[coin/fa] Add holders tab (#917)

aptos-labs · Nov 15, 2024 · 461c57b · 461c57b
1 parent 652df02
commit 461c57b
Show file tree

Hide file tree

Showing 10 changed files with 215 additions and 15 deletions.
diff --git a/src/api/hooks/useGetCoinHolders.ts b/src/api/hooks/useGetCoinHolders.ts
@@ -0,0 +1,37 @@
+import {useQuery as useGraphqlQuery} from "@apollo/client/react/hooks/useQuery";
+import {gql} from "@apollo/client";
+
+export type CoinHolder = {
+  owner_address: string;
+  amount: number;
+};
+
+export function useGetCoinHolders(coin_type: string): {
+  isLoading: boolean;
+  error: any;
+  data: CoinHolder[] | undefined;
+} {
+  const {loading, error, data} = useGraphqlQuery<{
+    current_fungible_asset_balances: CoinHolder[];
+  }>(
+    gql`
+      query GetFungibleAssetBalances($coin_type: String!) {
+        current_fungible_asset_balances(
+          where: {asset_type: {_eq: $coin_type}}
+          limit: 100
+          order_by: {amount: desc}
+        ) {
+          owner_address
+          amount
+        }
+      }
+    `,
+    {variables: {coin_type}},
+  );
+
+  return {
+    isLoading: loading,
+    error,
+    data: data?.current_fungible_asset_balances,
+  };
+}
diff --git a/src/api/hooks/useGetFaMetadata.ts b/src/api/hooks/useGetFaMetadata.ts
@@ -1,6 +1,6 @@
 import {useViewFunction} from "./useViewFunction";
 
-type FaMetadata = {
+export type FaMetadata = {
   name: string;
   symbol: string;
   decimals: number;

diff --git a/src/pages/Coin/Index.tsx b/src/pages/Coin/Index.tsx
@@ -15,9 +15,9 @@ import {useGetCoinSupplyLimit} from "../../api/hooks/useGetCoinSupplyLimit";
 import {useGetCoinList} from "../../api/hooks/useGetCoinList";
 import {findCoinData} from "../Transaction/Tabs/BalanceChangeTab";
 
-const TAB_VALUES_FULL: TabValue[] = ["info"];
+const TAB_VALUES_FULL: TabValue[] = ["info", "holders"];
 
-const TAB_VALUES: TabValue[] = ["info", "transactions"];
+const TAB_VALUES: TabValue[] = ["info"];
 
 export default function CoinPage() {
   const isGraphqlClientSupported = useGetIsGraphqlClientSupported();

diff --git a/src/pages/Coin/Tabs.tsx b/src/pages/Coin/Tabs.tsx
@@ -11,11 +11,13 @@ import {useParams} from "react-router-dom";
 import {useNavigate} from "../../routing";
 import {CoinData} from "./Components/CoinData";
 import {CoinDescription} from "../../api/hooks/useGetCoinList";
+import HoldersTab from "./Tabs/HoldersTab";
 
-const TAB_VALUES: TabValue[] = ["info", "transactions"];
+const TAB_VALUES: TabValue[] = ["info", "holders", "transactions"];
 
 const TabComponents = Object.freeze({
   transactions: TransactionsTab,
+  holders: HoldersTab,
   info: InfoTab,
 });
 
@@ -27,6 +29,8 @@ function getTabLabel(value: TabValue): string {
       return "Info";
     case "transactions":
       return "Transactions";
+    case "holders":
+      return "Holders";
     default:
       return assertNever(value);
   }
@@ -38,6 +42,8 @@ function getTabIcon(value: TabValue): JSX.Element {
       return <DescriptionOutlinedIcon fontSize="small" />;
     case "transactions":
       return <WysiwygIcon fontSize="small" />;
+    case "holders":
+      return <WysiwygIcon fontSize="small" />;
     default:
       return assertNever(value);
   }

diff --git a/src/pages/Coin/Tabs/HoldersTab.tsx b/src/pages/Coin/Tabs/HoldersTab.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import EmptyTabContent from "../../../components/IndividualPageContent/EmptyTabContent";
+import {CoinData} from "../Components/CoinData";
+import {
+  CoinHolder,
+  useGetCoinHolders,
+} from "../../../api/hooks/useGetCoinHolders";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import GeneralTableBody from "../../../components/Table/GeneralTableBody";
+import GeneralTableHeaderCell from "../../../components/Table/GeneralTableHeaderCell";
+import GeneralTableRow from "../../../components/Table/GeneralTableRow";
+import GeneralTableCell from "../../../components/Table/GeneralTableCell";
+import HashButton, {HashType} from "../../../components/HashButton";
+import {getFormattedBalanceStr} from "../../../components/IndividualPageContent/ContentValue/CurrencyValue";
+
+type HoldersTabProps = {
+  struct: string;
+  data: CoinData | undefined;
+};
+
+export default function HoldersTab({struct, data}: HoldersTabProps) {
+  const holderData = useGetCoinHolders(struct);
+  if (!data || Array.isArray(data) || !holderData?.data) {
+    return <EmptyTabContent />;
+  }
+
+  return <HoldersTable data={data} holders={holderData.data} />;
+}
+
+export function HoldersTable({
+  data,
+  holders,
+}: {
+  holders: CoinHolder[];
+  data: CoinData;
+}) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <GeneralTableHeaderCell header="address" />
+          <GeneralTableHeaderCell header="amount" textAlignRight={true} />
+        </TableRow>
+      </TableHead>
+      <GeneralTableBody>
+        {holders.map((holder) => {
+          return (
+            <GeneralTableRow>
+              <GeneralTableCell>
+                <HashButton
+                  hash={holder.owner_address}
+                  type={HashType.ACCOUNT}
+                />
+              </GeneralTableCell>
+              <GeneralTableCell align={"right"}>
+                {getFormattedBalanceStr(
+                  holder.amount.toString(),
+                  data.data.decimals,
+                ) +
+                  " " +
+                  data.data.symbol}
+              </GeneralTableCell>
+            </GeneralTableRow>
+          );
+        })}
+      </GeneralTableBody>
+    </Table>
+  );
+}
diff --git a/src/pages/FungibleAsset/Index.tsx b/src/pages/FungibleAsset/Index.tsx
@@ -9,14 +9,20 @@ import Error from "./Error";
 import {ResponseError, ResponseErrorType} from "../../api/client";
 import {isValidAccountAddress} from "../utils";
 import FATitle from "./Title";
-import {useGetFaMetadata} from "../../api/hooks/useGetFaMetadata";
+import {FaMetadata, useGetFaMetadata} from "../../api/hooks/useGetFaMetadata";
 import {useGetFASupply} from "../../api/hooks/useGetFaSupply";
-import {useGetCoinList} from "../../api/hooks/useGetCoinList";
+import {CoinDescription, useGetCoinList} from "../../api/hooks/useGetCoinList";
 import {findCoinData} from "../Transaction/Tabs/BalanceChangeTab";
 
-const TAB_VALUES_FULL: TabValue[] = ["info"];
+const TAB_VALUES_FULL: TabValue[] = ["info", "holders"];
 
-const TAB_VALUES: TabValue[] = ["info", "transactions"];
+const TAB_VALUES: TabValue[] = ["info"];
+
+export type FACombinedData = {
+  coinData: CoinDescription | undefined;
+  metadata: FaMetadata | null;
+  supply: bigint | null;
+};
 
 export default function FAPage() {
   const isGraphqlClientSupported = useGetIsGraphqlClientSupported();

diff --git a/src/pages/FungibleAsset/Tabs.tsx b/src/pages/FungibleAsset/Tabs.tsx
@@ -9,12 +9,14 @@ import StyledTabs from "../../components/StyledTabs";
 import StyledTab from "../../components/StyledTab";
 import {useParams} from "react-router-dom";
 import {useNavigate} from "../../routing";
-import {FAData} from "./Components/FAData";
+import HoldersTab from "./Tabs/HoldersTab";
+import {FACombinedData} from "./Index";
 
-const TAB_VALUES: TabValue[] = ["info", "transactions"];
+const TAB_VALUES: TabValue[] = ["info", "holders", "transactions"];
 
 const TabComponents = Object.freeze({
   transactions: TransactionsTab,
+  holders: HoldersTab,
   info: InfoTab,
 });
 
@@ -24,6 +26,8 @@ function getTabLabel(value: TabValue): string {
   switch (value) {
     case "info":
       return "Info";
+    case "holders":
+      return "Holders";
     case "transactions":
       return "Transactions";
     default:
@@ -35,6 +39,8 @@ function getTabIcon(value: TabValue): JSX.Element {
   switch (value) {
     case "info":
       return <DescriptionOutlinedIcon fontSize="small" />;
+    case "holders":
+      return <WysiwygIcon fontSize="small" />;
     case "transactions":
       return <WysiwygIcon fontSize="small" />;
     default:
@@ -45,7 +51,7 @@ function getTabIcon(value: TabValue): JSX.Element {
 type TabPanelProps = {
   value: TabValue;
   address: string;
-  data: FAData | undefined;
+  data: FACombinedData | undefined;
 };
 
 function TabPanel({value, address, data}: TabPanelProps): JSX.Element {
@@ -55,7 +61,7 @@ function TabPanel({value, address, data}: TabPanelProps): JSX.Element {
 
 type FATabsProps = {
   address: string;
-  data: any | undefined;
+  data: FACombinedData | undefined;
   tabValues?: TabValue[];
 };
 

diff --git a/src/pages/FungibleAsset/Tabs/HoldersTab.tsx b/src/pages/FungibleAsset/Tabs/HoldersTab.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import EmptyTabContent from "../../../components/IndividualPageContent/EmptyTabContent";
+import {
+  CoinHolder,
+  useGetCoinHolders,
+} from "../../../api/hooks/useGetCoinHolders";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import GeneralTableBody from "../../../components/Table/GeneralTableBody";
+import GeneralTableHeaderCell from "../../../components/Table/GeneralTableHeaderCell";
+import GeneralTableRow from "../../../components/Table/GeneralTableRow";
+import GeneralTableCell from "../../../components/Table/GeneralTableCell";
+import HashButton, {HashType} from "../../../components/HashButton";
+import {getFormattedBalanceStr} from "../../../components/IndividualPageContent/ContentValue/CurrencyValue";
+import {FACombinedData} from "../Index";
+
+type HoldersTabProps = {
+  address: string;
+  data: FACombinedData | undefined;
+};
+
+export default function HoldersTab({address, data}: HoldersTabProps) {
+  const holderData = useGetCoinHolders(address);
+  if (!data || Array.isArray(data) || !holderData?.data) {
+    return <EmptyTabContent />;
+  }
+
+  return <HoldersTable data={data} holders={holderData.data} />;
+}
+
+export function HoldersTable({
+  data,
+  holders,
+}: {
+  holders: CoinHolder[];
+  data: FACombinedData;
+}) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <GeneralTableHeaderCell header="rank" />
+          <GeneralTableHeaderCell header="holder address" />
+          <GeneralTableHeaderCell header="amount" textAlignRight={true} />
+        </TableRow>
+      </TableHead>
+      <GeneralTableBody>
+        {holders.map((holder, i) => {
+          return (
+            <GeneralTableRow>
+              <GeneralTableCell>{i}</GeneralTableCell>
+              <GeneralTableCell>
+                <HashButton
+                  hash={holder.owner_address}
+                  type={HashType.ACCOUNT}
+                />
+              </GeneralTableCell>
+              <GeneralTableCell align={"right"}>
+                {getFormattedBalanceStr(
+                  holder.amount.toString(),
+                  data.coinData?.decimals,
+                ) +
+                  " " +
+                  data.coinData?.symbol}
+              </GeneralTableCell>
+            </GeneralTableRow>
+          );
+        })}
+      </GeneralTableBody>
+    </Table>
+  );
+}
diff --git a/src/pages/FungibleAsset/Tabs/InfoTab.tsx b/src/pages/FungibleAsset/Tabs/InfoTab.tsx
@@ -6,10 +6,11 @@ import EmptyTabContent from "../../../components/IndividualPageContent/EmptyTabC
 import {getFormattedBalanceStr} from "../../../components/IndividualPageContent/ContentValue/CurrencyValue";
 import {getAssetSymbol} from "../../../utils";
 import HashButton, {HashType} from "../../../components/HashButton";
+import {FACombinedData} from "../Index";
 
 type InfoTabProps = {
   address: string;
-  data: any | undefined;
+  data: FACombinedData | undefined;
 };
 
 // TODO: put this extra information somewhere else

diff --git a/src/pages/FungibleAsset/Tabs/TransactionsTab.tsx b/src/pages/FungibleAsset/Tabs/TransactionsTab.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import EmptyTabContent from "../../../components/IndividualPageContent/EmptyTabContent";
-import {FAData} from "../Components/FAData";
+import {FACombinedData} from "../Index";
 
 type TransactionsTabProps = {
   address: string;
-  data: FAData | undefined;
+  data: FACombinedData | undefined;
 };
 
 export default function TransactionsTab({}: TransactionsTabProps) {