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

Author: MananTank

.changeset/thin-days-add.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix `thirdweb/insight` import typescript error

apps/dashboard/.env.example

@@ -53,14 +53,6 @@ DASHBOARD_SECRET_KEY="<replace_me_with_your_secret_key>"
 # Client id for api routes
 API_ROUTES_CLIENT_ID=
 
-# <moralis.io API key (used for api routes for token balances and wallet NFTs)
-# - not required to build (unless using wallet NFTs and token balances)>
-MORALIS_API_KEY=
-
-# alchemy.com API key (used for wallet NFTS)
-# - cannot be restricted to IP/domain because vercel has no stable IPs and it happens during build & runtime api route call
-# - not required to build (unless testing wallet NFTs)>
-SSR_ALCHEMY_KEY=
 
 
 # Hubspot Access Token (used for contact us form)

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

@@ -1,19 +1,8 @@
 "use server";
 
 import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "@/constants/public-envs";
-import { MORALIS_API_KEY } from "@/constants/server-envs";
-import {
-  generateAlchemyUrl,
-  transformAlchemyResponseToNFT,
-} from "@/lib/wallet/nfts/alchemy";
-import {
-  generateMoralisUrl,
-  transformMoralisResponseToNFT,
-} from "@/lib/wallet/nfts/moralis";
 import type { WalletNFT } from "@/lib/wallet/nfts/types";
 import { getVercelEnv } from "@/utils/vercel";
-import { isAlchemySupported } from "../lib/wallet/nfts/isAlchemySupported";
-import { isMoralisSupported } from "../lib/wallet/nfts/isMoralisSupported";
 
 type WalletNFTApiReturn =
   | { result: WalletNFT[]; error?: undefined }
@@ -38,60 +27,6 @@ export async function getWalletNFTs(params: {
     return { result: response.data };
   }
 
-  if (isAlchemySupported(chainId)) {
-    const url = generateAlchemyUrl({ chainId, owner });
-
-    const response = await fetch(url, {
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-    if (response.status >= 400) {
-      return { error: response.statusText };
-    }
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformAlchemyResponseToNFT(parsedResponse, owner);
-
-      return { error: undefined, result };
-    } catch (err) {
-      console.error("Error fetching NFTs", err);
-      return { error: "error parsing response" };
-    }
-  }
-
-  if (isMoralisSupported(chainId) && MORALIS_API_KEY) {
-    const url = generateMoralisUrl({ chainId, owner });
-
-    const response = await fetch(url, {
-      headers: {
-        "X-API-Key": MORALIS_API_KEY,
-      },
-      method: "GET",
-      next: {
-        revalidate: 10, // cache for 10 seconds
-      },
-    });
-
-    if (response.status >= 400) {
-      return { error: response.statusText };
-    }
-
-    try {
-      const parsedResponse = await response.json();
-      const result = await transformMoralisResponseToNFT(
-        await parsedResponse,
-        owner,
-        chainId,
-      );
-
-      return { result };
-    } catch (err) {
-      console.error("Error fetching NFTs", err);
-      return { error: "error parsing response" };
-    }
-  }
-
   return { error: "unsupported chain" };
 }
 

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

@@ -58,16 +58,6 @@ if (isProd && INSIGHT_SERVICE_API_KEY) {
   );
 }
 
-export const MORALIS_API_KEY = process.env.MORALIS_API_KEY || "";
-
-if (MORALIS_API_KEY) {
-  experimental_taintUniqueValue(
-    "Do not pass MORALIS_API_KEY to the client",
-    process,
-    MORALIS_API_KEY,
-  );
-}
-
 export const ANALYTICS_SERVICE_URL = process.env.ANALYTICS_SERVICE_URL || "";
 
 export const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY || "";

apps/dashboard/src/@/constants/server-envs.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));
     },
   });
 }