[balance] Fix APT balance on account page by using view function

src/api/hooks/useGetAccountAPTBalance.ts

@@ -1,29 +1,15 @@
 import {Types} from "aptos";
-import {useGetAccountResources} from "./useGetAccountResources";
-
-interface CoinStore {
-  coin: {
-    value: string;
-  };
-}
+import {useQuery} from "@tanstack/react-query";
+import {ResponseError} from "../client";
+import {getBalance} from "../index";
+import {useGlobalState} from "../../global-config/GlobalConfig";
 
 export function useGetAccountAPTBalance(address: Types.Address) {
-  const {isLoading, data, error} = useGetAccountResources(address);
-
-  if (isLoading || error || !data) {
-    return null;
-  }
-
-  const coinStore = data.find(
-    (resource) =>
-      resource.type === "0x1::coin::CoinStore<0x1::aptos_coin::AptosCoin>",
-  );
-
-  if (!coinStore) {
-    return null;
-  }
-
-  const coinStoreData: CoinStore = coinStore.data as CoinStore;
-
-  return coinStoreData?.coin?.value;
+  const [state] = useGlobalState();
+  // TODO: Convert all Types.Address to AccountAddress
+  return useQuery<string, ResponseError>({
+    queryKey: ["aptBalance", {address}, state.network_value],
+    queryFn: () => getBalance(state.sdk_v2_client!, address),
+    retry: false,
+  });
 }

src/api/index.ts

@@ -3,6 +3,14 @@ import {OCTA} from "../constants";
 import {isNumeric} from "../pages/utils";
 import {sortTransactions} from "../utils";
 import {withResponseError} from "./client";
+import {
+  AccountAddressInput,
+  Aptos,
+  APTOS_COIN,
+  InputViewFunctionData,
+  TypeTagAddress,
+  TypeTagU64,
+} from "@aptos-labs/ts-sdk";
 
 export async function getTransactions(
   requestParameters: {start?: number; limit?: number},
@@ -216,6 +224,29 @@ export async function getRecentBlocks(
   return blocks;
 }
 
+export async function getBalance(
+  client: Aptos,
+  address: AccountAddressInput,
+  coinType?: `0x${string}::${string}::${string}`,
+): Promise<string> {
+  const typeArguments = coinType ? [coinType] : [APTOS_COIN];
+
+  // TODO: Replace with native SDK call
+  const payload: InputViewFunctionData = {
+    function: "0x1::coin::balance",
+    typeArguments,
+    functionArguments: [address],
+    abi: {
+      parameters: [new TypeTagAddress()],
+      typeParameters: [{constraints: []}],
+      returnTypes: [new TypeTagU64()],
+    },
+  };
+  return withResponseError(
+    client.view<[string]>({payload}).then((res) => res[0]),
+  );
+}
+
 export async function getStake(
   client: AptosClient,
   delegatorAddress: Types.Address,

src/pages/Account/BalanceCard.tsx

@@ -13,12 +13,13 @@ type BalanceCardProps = {
 
 export default function BalanceCard({address}: BalanceCardProps) {
   const balance = useGetAccountAPTBalance(address);
+  console.log("BalanceCard balance", balance);
 
-  return balance ? (
+  return balance.data ? (
     <Card height="auto">
       <Stack spacing={1.5} marginY={1}>
         <Typography fontSize={17} fontWeight={700}>
-          {`${getFormattedBalanceStr(balance)} APT`}
+          {`${getFormattedBalanceStr(balance.data)} APT`}
         </Typography>
         <Stack direction="row" spacing={1} alignItems="center">
           <Typography fontSize={12} color={grey[450]}>