Dashboard: thirdweb client refactor (#6987)

Author: MananTank

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

@@ -2,7 +2,7 @@
 import { defineDashboardChain } from "lib/defineDashboardChain";
 import { ZERO_ADDRESS, isAddress, toTokens } from "thirdweb";
 import { getWalletBalance } from "thirdweb/wallets";
-import { getUserThirdwebClient } from "../../app/(app)/api/lib/getAuthToken";
+import { serverThirdwebClient } from "../constants/thirdweb-client.server";
 
 type BalanceQueryResponse = Array<{
   balance: string;
@@ -23,7 +23,6 @@ export async function getTokenBalancesFromMoralis(params: {
       error: string;
     }
 > {
-  const client = await getUserThirdwebClient();
   const { contractAddress, chainId } = params;
 
   if (!isAddress(contractAddress)) {
@@ -39,7 +38,7 @@ export async function getTokenBalancesFromMoralis(params: {
     const balance = await getWalletBalance({
       address: contractAddress,
       chain,
-      client,
+      client: serverThirdwebClient,
     });
     return [
       {

apps/dashboard/src/@/constants/thirdweb-client.client.ts

@@ -0,0 +1,11 @@
+import { getConfiguredThirdwebClient } from "./thirdweb.server";
+
+export function getClientThirdwebClient(params?: {
+  jwt: string | undefined | null;
+  teamId: string | undefined | null;
+}) {
+  return getConfiguredThirdwebClient({
+    secretKey: params?.jwt ?? undefined,
+    teamId: params?.teamId ?? undefined,
+  });
+}

apps/dashboard/src/@/constants/thirdweb-client.server.ts

@@ -0,0 +1,9 @@
+import "server-only";
+
+import { DASHBOARD_THIRDWEB_SECRET_KEY } from "./env";
+import { getConfiguredThirdwebClient } from "./thirdweb.server";
+
+export const serverThirdwebClient = getConfiguredThirdwebClient({
+  teamId: undefined,
+  secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
+});

apps/dashboard/src/@/constants/thirdweb.client.ts

@@ -4,7 +4,7 @@ import { useActiveAccount } from "thirdweb/react";
 import type { GetAuthTokenResponse } from "../../app/(app)/api/auth/get-auth-token/route";
 import { LAST_USED_TEAM_ID } from "../../constants/cookies";
 import { getCookie } from "../../lib/cookie";
-import { getThirdwebClient } from "./thirdweb.server";
+import { getClientThirdwebClient } from "./thirdweb-client.client";
 
 // returns a thirdweb client with optional JWT passed i
 
@@ -38,7 +38,7 @@ export function useThirdwebClient(jwt?: string) {
   return useMemo(
     // prefer jwt from props over the one from the token query if it exists
     () =>
-      getThirdwebClient({
+      getClientThirdwebClient({
         jwt: jwt || query.data,
         teamId: lastUsedTeamId,
       }),

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -1,6 +1,5 @@
 import {
   DASHBOARD_THIRDWEB_CLIENT_ID,
-  DASHBOARD_THIRDWEB_SECRET_KEY,
   IPFS_GATEWAY_URL,
 } from "@/constants/env";
 import {
@@ -12,7 +11,7 @@ import {
   THIRDWEB_SOCIAL_API_DOMAIN,
   THIRDWEB_STORAGE_DOMAIN,
 } from "constants/urls";
-import { createThirdwebClient } from "thirdweb";
+import { type ThirdwebClient, createThirdwebClient } from "thirdweb";
 import { populateEip712Transaction } from "thirdweb/transaction";
 import {
   getTransactionDecorator,
@@ -22,15 +21,10 @@ import {
 import { getZkPaymasterData } from "thirdweb/wallets/smart";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
-// returns a thirdweb client with optional JWT passed in
-export function getThirdwebClient(
-  options:
-    | {
-        jwt: string | null | undefined;
-        teamId: string | undefined;
-      }
-    | undefined,
-) {
+export function getConfiguredThirdwebClient(options: {
+  secretKey: string | undefined;
+  teamId: string | undefined;
+}): ThirdwebClient {
   if (getVercelEnv() !== "production") {
     // if not on production: run this when creating a client to set the domains
     setThirdwebDomains({
@@ -78,8 +72,8 @@ export function getThirdwebClient(
   }
 
   return createThirdwebClient({
-    teamId: options?.teamId,
-    secretKey: options?.jwt ? options.jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
+    teamId: options.teamId,
+    secretKey: options.secretKey,
     clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
     config: {
       storage: {

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/bridge/page.tsx

@@ -1,5 +1,5 @@
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Metadata } from "next";
+import { getClientThirdwebClient } from "../../../../../@/constants/thirdweb-client.client";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
 
 const title = "Universal Bridge: Swap, Bridge, and On-Ramp";
@@ -19,7 +19,7 @@ export default async function RoutesPage({
   searchParams,
 }: { searchParams: Record<string, string | string[]> }) {
   const { chainId } = searchParams;
-  const client = getThirdwebClient(undefined);
+  const client = getClientThirdwebClient(undefined);
   return (
     <div className="relative mx-auto flex h-screen w-full flex-col items-center justify-center overflow-hidden border py-10">
       <main className="container z-10 flex justify-center">

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx

@@ -1,8 +1,8 @@
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import type { ThirdwebClient } from "thirdweb";
 import { defineChain } from "thirdweb";
 import { getChainMetadata } from "thirdweb/chains";
+import { serverThirdwebClient } from "../../../../../../../@/constants/thirdweb-client.server";
 
 type RouteListCardProps = {
   originChainId: number;
@@ -15,7 +15,6 @@ type RouteListCardProps = {
   destinationTokenIconUri?: string | null;
   destinationTokenSymbol: string;
   destinationTokenName: string;
-  client: ThirdwebClient;
 };
 
 export async function RouteListCard({
@@ -27,7 +26,6 @@ export async function RouteListCard({
   destinationTokenAddress,
   destinationTokenIconUri,
   destinationTokenName,
-  client,
 }: RouteListCardProps) {
   const [
     originChain,
@@ -42,13 +40,13 @@ export async function RouteListCard({
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
-          client,
+          client: serverThirdwebClient,
         })
       : undefined,
     destinationTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: destinationTokenIconUri,
-          client,
+          client: serverThirdwebClient,
         })
       : undefined,
   ]);

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx

@@ -1,7 +1,7 @@
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { TableCell, TableRow } from "@/components/ui/table";
+import { serverThirdwebClient } from "@/constants/thirdweb-client.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
-import type { ThirdwebClient } from "thirdweb";
 import { defineChain, getChainMetadata } from "thirdweb/chains";
 
 type RouteListRowProps = {
@@ -15,7 +15,6 @@ type RouteListRowProps = {
   destinationTokenIconUri?: string | null;
   destinationTokenSymbol?: string;
   destinationTokenName?: string;
-  client: ThirdwebClient;
 };
 
 export async function RouteListRow({
@@ -27,7 +26,6 @@ export async function RouteListRow({
   destinationTokenAddress,
   destinationTokenIconUri,
   destinationTokenSymbol,
-  client,
 }: RouteListRowProps) {
   const [
     originChain,
@@ -42,13 +40,13 @@ export async function RouteListRow({
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
-          client,
+          client: serverThirdwebClient,
         })
       : undefined,
     destinationTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: destinationTokenIconUri,
-          client,
+          client: serverThirdwebClient,
         })
       : undefined,
   ]);

apps/dashboard/src/app/(app)/(dashboard)/(bridge)/routes/components/server/routes-table.tsx

@@ -6,7 +6,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Address } from "thirdweb";
 import { checksumAddress } from "thirdweb/utils";
 import { getRoutes } from "../../../utils";
@@ -137,7 +136,6 @@ export async function RoutesData(props: {
   const startIndex = (activePage - 1) * pageSize;
   const endIndex = startIndex + pageSize;
   const paginatedRoutes = routesToRender.slice(startIndex, endIndex);
-  const client = getThirdwebClient(undefined);
 
   return (
     <>
@@ -172,7 +170,6 @@ export async function RoutesData(props: {
                     destinationTokenIconUri={route.destinationToken.iconUri}
                     destinationTokenSymbol={route.destinationToken.symbol}
                     destinationTokenName={route.destinationToken.name}
-                    client={client}
                   />
                 ))}
               </TableBody>
@@ -196,7 +193,6 @@ export async function RoutesData(props: {
                   destinationTokenIconUri={route.destinationToken.iconUri}
                   destinationTokenSymbol={route.destinationToken.symbol}
                   destinationTokenName={route.destinationToken.name}
-                  client={client}
                 />
               </li>
             ))}

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/server/BuyFundsSection.tsx

@@ -1,6 +1,5 @@
 import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
-import type { ThirdwebClient } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import { ChainIcon } from "../../../../components/server/chain-icon";
 import { PayModalButton } from "../client/PayModal";
@@ -9,7 +8,6 @@ import { SectionTitle } from "./SectionTitle";
 
 export function BuyFundsSection(props: {
   chain: ChainMetadata;
-  client: ThirdwebClient;
 }) {
   const sanitizedChainName = props.chain.name.replace("Mainnet", "").trim();
 
@@ -22,7 +20,6 @@ export function BuyFundsSection(props: {
             <ChainIcon
               className="-mr-2 size-12 rounded-full border p-1"
               iconUrl={props.chain.icon?.url}
-              client={props.client}
             />
             <CreditCardIcon
               bg="hsl(var(--background))"