Dashboard: Remove Moralis API usage from contract/balances, UI improvements

Author: MananTank

apps/dashboard/src/@/actions/getBalancesFromMoralis.ts

@@ -5,62 +5,85 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import { toast } from "sonner";
-import { sendAndConfirmTransaction, type ThirdwebContract } from "thirdweb";
+import {
+  type Chain,
+  sendAndConfirmTransaction,
+  type ThirdwebClient,
+  type ThirdwebContract,
+} from "thirdweb";
 import { distribute, distributeByToken } from "thirdweb/extensions/split";
+import { getOwnedTokens } from "thirdweb/insight";
 import { useActiveAccount } from "thirdweb/react";
 import invariant from "tiny-invariant";
-import { getTokenBalancesFromMoralis } from "@/actions/getBalancesFromMoralis";
+import { parseError } from "../utils/errorParser";
 
-function getTokenBalancesQuery(contract: ThirdwebContract) {
+function getTokenBalancesQuery(params: {
+  ownerAddress: string;
+  client: ThirdwebClient;
+  chain: Chain;
+}) {
   return queryOptions({
     queryFn: async () => {
-      const res = await getTokenBalancesFromMoralis({
-        chainId: contract.chain.id,
-        contractAddress: contract.address,
+      return getOwnedTokens({
+        client: params.client,
+        chains: [params.chain],
+        ownerAddress: params.ownerAddress,
+        queryOptions: {
+          include_native: "true",
+        },
       });
-
-      if (!res.data) {
-        throw new Error(res.error);
-      }
-      return res.data;
     },
-    queryKey: ["split-balances", contract.chain.id, contract.address],
+    queryKey: ["getOwnedTokens", params.chain.id, params.ownerAddress],
     retry: false,
   });
 }
 
-export function useSplitBalances(contract: ThirdwebContract) {
-  return useQuery(getTokenBalancesQuery(contract));
+export function useOwnedTokenBalances(params: {
+  ownerAddress: string;
+  client: ThirdwebClient;
+  chain: Chain;
+}) {
+  return useQuery(getTokenBalancesQuery(params));
 }
 
 export function useSplitDistributeFunds(contract: ThirdwebContract) {
   const account = useActiveAccount();
   const queryClient = useQueryClient();
 
+  const params = {
+    ownerAddress: contract.address, // because we want to fetch the balance of split contract
+    client: contract.client,
+    chain: contract.chain,
+  };
+
   return useMutation({
     mutationFn: async () => {
       invariant(account, "No active account");
+
       const balances =
         // get the cached data if it exists, otherwise fetch it
-        queryClient.getQueryData(getTokenBalancesQuery(contract).queryKey) ||
-        (await queryClient.fetchQuery(getTokenBalancesQuery(contract)));
+        queryClient.getQueryData(getTokenBalancesQuery(params).queryKey) ||
+        (await queryClient.fetchQuery(getTokenBalancesQuery(params)));
 
       const distributions = balances
-        .filter((token) => token.display_balance !== "0.0")
+        .filter((token) => token.value !== 0n)
         .map(async (currency) => {
           const transaction =
             currency.name === "Native Token"
               ? distribute({ contract })
               : distributeByToken({
                   contract,
-                  tokenAddress: currency.token_address,
+                  tokenAddress: currency.tokenAddress,
                 });
           const promise = sendAndConfirmTransaction({
             account,
             transaction,
           });
           toast.promise(promise, {
-            error: `Error distributing ${currency.name}`,
+            error: (err) => ({
+              message: `Error distributing ${currency.name}`,
+              description: parseError(err),
+            }),
             loading: `Distributing ${currency.name}`,
             success: `Successfully distributed ${currency.name}`,
           });
@@ -69,7 +92,7 @@ export function useSplitDistributeFunds(contract: ThirdwebContract) {
       return await Promise.all(distributions);
     },
     onSettled: () => {
-      queryClient.invalidateQueries(getTokenBalancesQuery(contract));
+      queryClient.invalidateQueries(getTokenBalancesQuery(params));
     },
   });
 }

apps/dashboard/src/@/hooks/useSplit.ts

@@ -2,7 +2,7 @@
 
 import type { ThirdwebContract } from "thirdweb";
 import { useActiveWalletChain, useWalletBalance } from "thirdweb/react";
-import { useSplitBalances } from "@/hooks/useSplit";
+import { useOwnedTokenBalances } from "@/hooks/useSplit";
 import { StatCard } from "../../overview/components/stat-card";
 
 export function AccountBalance(props: { contract: ThirdwebContract }) {
@@ -13,7 +13,7 @@ export function AccountBalance(props: { contract: ThirdwebContract }) {
     client: props.contract.client,
   });
 
-  const balanceQuery = useSplitBalances(props.contract);
+  const balanceQuery = useOwnedTokenBalances(props.contract);
 
   return (
     <div className="grid grid-cols-2 gap-3 md:grid-cols-3">
@@ -28,7 +28,7 @@ export function AccountBalance(props: { contract: ThirdwebContract }) {
           <StatCard
             key={bl.symbol}
             label={bl.symbol}
-            value={bl.display_balance}
+            value={bl.displayValue}
             isPending={false}
           />
         ))}