[Coin][FungibleAsset] add paired coin/fa info

src/api/hooks/useGetCoinPairedFa.ts

@@ -0,0 +1,15 @@
+import {useViewFunction} from "./useViewFunction";
+
+export function useGetCoinPairedFa(coinType: string): string | null {
+  const {data} = useViewFunction("0x1::coin::paired_metadata", [coinType], []);
+
+  if (data !== undefined) {
+    const mappedData = data as [{vec: [{inner: string}]}];
+    const val = mappedData[0]?.vec[0];
+    if (val !== undefined && val !== null) {
+      return val.inner;
+    }
+  }
+
+  return null;
+}

src/api/hooks/useGetFaPairedCoin.ts

@@ -0,0 +1,34 @@
+import {useViewFunction} from "./useViewFunction";
+import {Hex} from "@aptos-labs/ts-sdk";
+
+const TEXT_DECODER = new TextDecoder();
+
+export function useGetFaPairedCoin(address: string): string | null {
+  const {data} = useViewFunction("0x1::coin::paired_coin", [], [address]);
+
+  if (data !== undefined) {
+    const mappedData = data as [
+      {
+        vec: [
+          {account_address: string; module_name: string; struct_name: string},
+        ];
+      },
+    ];
+    const val = mappedData[0]?.vec[0];
+    if (val !== undefined && val !== null) {
+      return (
+        val.account_address +
+        "::" +
+        hexToUtf8(val.module_name) +
+        "::" +
+        hexToUtf8(val.struct_name)
+      );
+    }
+  }
+
+  return null;
+}
+
+function hexToUtf8(hexWith0x: string): string {
+  return TEXT_DECODER.decode(Hex.fromHexString(hexWith0x).toUint8Array());
+}

src/pages/Coin/Index.tsx

@@ -14,6 +14,7 @@ import {CoinData} from "./Components/CoinData";
 import {useGetCoinSupplyLimit} from "../../api/hooks/useGetCoinSupplyLimit";
 import {useGetCoinList} from "../../api/hooks/useGetCoinList";
 import {findCoinData} from "../Transaction/Tabs/BalanceChangeTab";
+import {useGetCoinPairedFa} from "../../api/hooks/useGetCoinPairedFa";
 
 const TAB_VALUES_FULL: TabValue[] = ["info", "holders", "transactions"];
 
@@ -43,6 +44,7 @@ export default function CoinPage() {
     isLoading,
   } = useGetAccountResource(address, `0x1::coin::CoinInfo<${struct}>`);
   const supply = useGetCoinSupplyLimit(struct);
+  const pairedFa = useGetCoinPairedFa(struct);
 
   if (error === null) {
     error = infoError;
@@ -71,6 +73,7 @@ export default function CoinPage() {
               data={data as CoinData | undefined}
               tabValues={tabValues}
               supply={supply}
+              pairedFa={pairedFa}
               coinData={coinData}
             />
             <Error struct={struct} error={error} />
@@ -81,6 +84,7 @@ export default function CoinPage() {
             data={data as CoinData | undefined}
             tabValues={tabValues}
             supply={supply}
+            pairedFa={pairedFa}
             coinData={coinData}
           />
         )}

src/pages/Coin/Tabs.tsx

@@ -54,6 +54,7 @@ type TabPanelProps = {
   struct: string;
   data: CoinData | undefined;
   supply: bigint | null;
+  pairedFa: string | null;
   coinData: CoinDescription | undefined;
 };
 
@@ -62,6 +63,7 @@ function TabPanel({
   struct,
   data,
   supply,
+  pairedFa,
   coinData,
 }: TabPanelProps): JSX.Element {
   const TabComponent = TabComponents[value];
@@ -70,6 +72,7 @@ function TabPanel({
       struct={struct}
       data={data}
       supply={supply}
+      pairedFa={pairedFa}
       coinData={coinData}
     />
   );
@@ -80,6 +83,7 @@ type CoinTabsProps = {
   data: CoinData | undefined;
   tabValues?: TabValue[];
   supply: bigint | null;
+  pairedFa: string | null;
   coinData: CoinDescription | undefined;
 };
 
@@ -89,6 +93,7 @@ export default function CoinTabs({
   data,
   tabValues = TAB_VALUES,
   supply,
+  pairedFa,
   coinData,
 }: CoinTabsProps): JSX.Element {
   const {tab, modulesTab} = useParams();
@@ -130,6 +135,7 @@ export default function CoinTabs({
           struct={struct}
           data={data}
           supply={supply}
+          pairedFa={pairedFa}
           coinData={coinData}
         />
       </Box>

src/pages/Coin/Tabs/InfoTab.tsx

@@ -13,13 +13,15 @@ type InfoTabProps = {
   struct: string;
   data: CoinData | undefined;
   supply: bigint | null;
+  pairedFa: string | null;
   coinData: CoinDescription | undefined;
 };
 
 export default function InfoTab({
   struct,
   data,
   supply,
+  pairedFa,
   coinData,
 }: InfoTabProps) {
   if (!data || Array.isArray(data)) {
@@ -69,11 +71,24 @@ export default function InfoTab({
             title={"Creator:"}
             value={
               <HashButton
+                size="large"
                 hash={struct.split("::")[0]}
                 type={HashType.ACCOUNT}
               />
             }
           />
+          {pairedFa && (
+            <ContentRow
+              title={"Paired FA:"}
+              value={
+                <HashButton
+                  size="large"
+                  hash={pairedFa}
+                  type={HashType.FUNGIBLE_ASSET}
+                />
+              }
+            />
+          )}
         </ContentBox>
       )}
     </Box>

src/pages/FungibleAsset/Index.tsx

@@ -13,6 +13,7 @@ import {FaMetadata, useGetFaMetadata} from "../../api/hooks/useGetFaMetadata";
 import {useGetFASupply} from "../../api/hooks/useGetFaSupply";
 import {CoinDescription, useGetCoinList} from "../../api/hooks/useGetCoinList";
 import {findCoinData} from "../Transaction/Tabs/BalanceChangeTab";
+import {useGetFaPairedCoin} from "../../api/hooks/useGetFaPairedCoin";
 
 const TAB_VALUES_FULL: TabValue[] = ["info", "holders", "transactions"];
 
@@ -44,6 +45,7 @@ export default function FAPage() {
   const {data: allCoinData} = useGetCoinList();
   const metadata = useGetFaMetadata(address);
   const supply = useGetFASupply(address);
+  const pairedCoin = useGetFaPairedCoin(address);
   const isLoading = false;
 
   const coinData = findCoinData(allCoinData?.data, address);
@@ -52,6 +54,7 @@ export default function FAPage() {
     coinData: coinData,
     metadata: metadata,
     supply: supply,
+    pairedCoin: pairedCoin,
   };
 
   const tabValues = isGraphqlClientSupported ? TAB_VALUES_FULL : TAB_VALUES;

src/pages/FungibleAsset/Tabs/InfoTab.tsx

@@ -94,8 +94,22 @@
           />
           <ContentRow
             title={"Object Details:"}
-            value={<HashButton hash={address} type={HashType.OBJECT} />}
+            value={
+              <HashButton size="large" hash={address} type={HashType.OBJECT} />
+            }
           />
+          {data.pairedCoin && (
+            <ContentRow
+              title={"Paired Coin:"}
+              value={
+                <HashButton
+                  size="large"
+                  hash={data.pairedCoin}
+                  type={HashType.COIN}
+                />
+              }
+            />
+          )}
         </ContentBox>
       )}
     </Box>