change tx text

ui/shared/TokenTransfer/TokenTransfer.tsx

-import { Hide, Show, Text } from '@chakra-ui/react';
+import { Hide, Show, Text, Flex, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenTransferResponse } from 'types/api/tokenTransfer';
@@ -7,6 +7,7 @@ import type { QueryKeys } from 'types/client/queries';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import HashStringShorten from 'ui/shared/HashStringShorten';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonTable from 'ui/shared/SkeletonTable';
 import { flattenTotal } from 'ui/shared/TokenTransfer/helpers';
@@ -22,9 +23,10 @@ interface Props {
   queryIds?: Array<string>;
   baseAddress?: string;
   showTxInfo?: boolean;
+  txHash?: string;
 }
 
-const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryIds, path, baseAddress, showTxInfo = true }: Props) => {
+const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryIds, path, baseAddress, showTxInfo = true, txHash }: Props) => {
   const { isError, isLoading, data, pagination } = useQueryWithPages<TokenTransferResponse>({
     apiPath: path,
     queryName,
@@ -37,13 +39,14 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
       return (
         <>
           <Hide below="lg">
+            { txHash !== undefined && <Skeleton mb={ 6 } h={ 6 } w="340px"/> }
             <SkeletonTable columns={ showTxInfo ?
               [ '44px', '185px', '160px', '25%', '25%', '25%', '25%' ] :
               [ '185px', '25%', '25%', '25%', '25%' ] }
             />
           </Hide>
           <Show below="lg">
-            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo }/>
+            <TokenTransferSkeletonMobile showTxInfo={ showTxInfo } txHash={ txHash }/>
           </Show>
         </>
       );
@@ -70,9 +73,17 @@ const TokenTransfer = ({ isLoading: isLoadingProp, isDisabled, queryName, queryI
     );
   })();
 
+  const isPaginatorHidden = pagination.page === 1 && !pagination.hasNextPage;
+
   return (
     <>
-      { pagination.page === 1 && !pagination.hasNextPage ? null : (
+      { txHash && (data?.items.length || 0 > 0) && (
+        <Flex mb={ isPaginatorHidden ? 6 : 0 } w="100%">
+          <Text as="span" fontWeight={ 600 } whiteSpace="pre">Token transfers for by txn hash: </Text>
+          <HashStringShorten hash={ txHash }/>
+        </Flex>
+      ) }
+      { isPaginatorHidden ? null : (
         <ActionBar>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>

ui/shared/TokenTransfer/TokenTransferSkeletonMobile.tsx

 import { Skeleton, SkeletonCircle, Flex, Box, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-const TokenTransferSkeletonMobile = ({ showTxInfo }: { showTxInfo?: boolean }) => {
+const TokenTransferSkeletonMobile = ({ showTxInfo, txHash }: { showTxInfo?: boolean; txHash?: string }) => {
   const borderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
 
   return (
-    <Box>
-      { Array.from(Array(2)).map((item, index) => (
-        <Flex
-          key={ index }
-          rowGap={ 3 }
-          flexDirection="column"
-          paddingY={ 6 }
-          borderTopWidth="1px"
-          borderColor={ borderColor }
-          _last={{
-            borderBottomWidth: '1px',
-          }}
-        >
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton w="100px" mr={ 2 }/>
-            <Skeleton w="50px"/>
-            { showTxInfo && <Skeleton w="24px" ml="auto"/> }
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="70px"/>
-            <Skeleton w="24px"/>
-            <Skeleton w="90px"/>
-          </Flex>
-          { showTxInfo && (
+    <>
+      { txHash !== undefined && <Skeleton mb={ 6 } h={ 6 } w="100%"/> }
+      <Box>
+        { Array.from(Array(2)).map((item, index) => (
+          <Flex
+            key={ index }
+            rowGap={ 3 }
+            flexDirection="column"
+            paddingY={ 6 }
+            borderTopWidth="1px"
+            borderColor={ borderColor }
+            _last={{
+              borderBottomWidth: '1px',
+            }}
+          >
+            <Flex h={ 6 }>
+              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+              <Skeleton w="100px" mr={ 2 }/>
+              <Skeleton w="50px"/>
+              { showTxInfo && <Skeleton w="24px" ml="auto"/> }
+            </Flex>
             <Flex h={ 6 } columnGap={ 2 }>
-              <Skeleton w="70px" flexShrink={ 0 }/>
-              <Skeleton w="100%"/>
+              <Skeleton w="70px"/>
+              <Skeleton w="24px"/>
+              <Skeleton w="90px"/>
+            </Flex>
+            { showTxInfo && (
+              <Flex h={ 6 } columnGap={ 2 }>
+                <Skeleton w="70px" flexShrink={ 0 }/>
+                <Skeleton w="100%"/>
+              </Flex>
+            ) }
+            <Flex h={ 6 }>
+              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+              <Skeleton flexGrow={ 1 } mr={ 3 }/>
+              <Skeleton w="50px" mr={ 3 }/>
+              <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
+              <Skeleton flexGrow={ 1 } mr={ 3 }/>
+            </Flex>
+            <Flex h={ 6 } columnGap={ 2 }>
+              <Skeleton w="45px"/>
+              <Skeleton w="90px"/>
             </Flex>
-          ) }
-          <Flex h={ 6 }>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-            <Skeleton w="50px" mr={ 3 }/>
-            <SkeletonCircle size="6" mr={ 2 } flexShrink={ 0 }/>
-            <Skeleton flexGrow={ 1 } mr={ 3 }/>
-          </Flex>
-          <Flex h={ 6 } columnGap={ 2 }>
-            <Skeleton w="45px"/>
-            <Skeleton w="90px"/>
           </Flex>
-        </Flex>
-      )) }
-    </Box>
+        )) }
+      </Box>
+    </>
   );
 };
 

ui/tx/TxTokenTransfer.tsx

-import { Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { QueryKeys } from 'types/client/queries';
@@ -24,17 +23,15 @@ const TxTokenTransfer = () => {
   const path = `/node-api/transactions/${ data?.hash }/token-transfers`;
 
   return (
-    <>
-      <Text mb={ 6 }>Token transfers for transaction { data?.hash }</Text>
-      <TokenTransfer
-        isLoading={ isLoading }
-        isDisabled={ !data?.status || !data?.hash }
-        path={ path }
-        queryName={ QueryKeys.txTokenTransfers }
-        queryIds={ data?.hash ? [ data.hash ] : undefined }
-        showTxInfo={ false }
-      />
-    </>
+    <TokenTransfer
+      isLoading={ isLoading }
+      isDisabled={ !data?.status || !data?.hash }
+      path={ path }
+      queryName={ QueryKeys.txTokenTransfers }
+      queryIds={ data?.hash ? [ data.hash ] : undefined }
+      showTxInfo={ false }
+      txHash={ data?.hash || '' }
+    />
   );
 };