[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,31 @@
+import {useViewFunction} from "./useViewFunction";
+
+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 Buffer.from(hexWith0x.slice(2), "hex").toString("utf8");
+}

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"];
 
@@ -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

@@ -48,6 +48,7 @@ type TabPanelProps = {
   struct: string;
   data: CoinData | undefined;
   supply: bigint | null;
+  pairedFa: string | null;
   coinData: CoinDescription | undefined;
 };
 
@@ -56,6 +57,7 @@ function TabPanel({
   struct,
   data,
   supply,
+  pairedFa,
   coinData,
 }: TabPanelProps): JSX.Element {
   const TabComponent = TabComponents[value];
@@ -64,6 +66,7 @@ function TabPanel({
       struct={struct}
       data={data}
       supply={supply}
+      pairedFa={pairedFa}
       coinData={coinData}
     />
   );
@@ -74,6 +77,7 @@ type CoinTabsProps = {
   data: CoinData | undefined;
   tabValues?: TabValue[];
   supply: bigint | null;
+  pairedFa: string | null;
   coinData: CoinDescription | undefined;
 };
 
@@ -83,6 +87,7 @@ export default function CoinTabs({
   data,
   tabValues = TAB_VALUES,
   supply,
+  pairedFa,
   coinData,
 }: CoinTabsProps): JSX.Element {
   const {tab, modulesTab} = useParams();
@@ -124,6 +129,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)) {
@@ -74,6 +76,14 @@ export default function InfoTab({
               />
             }
           />
+          {pairedFa && (
+            <ContentRow
+              title={"Paired FA:"}
+              value={
+                <HashButton hash={pairedFa} type={HashType.FUNGIBLE_ASSET} />
+              }
+            />
+          )}
         </ContentBox>
       )}
     </Box>

src/pages/FungibleAsset/Index.tsx

@@ -13,6 +13,7 @@ import {useGetFaMetadata} from "../../api/hooks/useGetFaMetadata";
 import {useGetFASupply} from "../../api/hooks/useGetFaSupply";
 import {useGetCoinList} from "../../api/hooks/useGetCoinList";
 import {findCoinData} from "../Transaction/Tabs/BalanceChangeTab";
+import {useGetFaPairedCoin} from "../../api/hooks/useGetFaPairedCoin";
 
 const TAB_VALUES_FULL: TabValue[] = ["info"];
 
@@ -38,6 +39,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);
@@ -46,6 +48,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

@@ -95,6 +95,12 @@ export default function InfoTab({address, data}: InfoTabProps) {
             title={"Object Details:"}
             value={<HashButton hash={address} type={HashType.OBJECT} />}
           />
+          {data.pairedCoin && (
+            <ContentRow
+              title={"Paired Coin:"}
+              value={<HashButton hash={data.pairedCoin} type={HashType.COIN} />}
+            />
+          )}
         </ContentBox>
       )}
     </Box>