Dashboard: Add team id to thirdweb client (#6775)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the usage of the `getThirdwebClient` function throughout the codebase, transitioning to using an options object that includes `jwt` and `teamId`. This change enhances client initialization consistency and improves the handling of team-related functionality.

### Detailed summary
- Updated `getThirdwebClient` to accept an options object with `jwt` and `teamId`.
- Modified several components to pass the new client structure.
- Added constants for `LAST_USED_PROJECT_ID` and `LAST_USED_TEAM_ID`.
- Enhanced various components to include `client` as a prop, improving flexibility.
- Adjusted several pages and components to handle team IDs better.
- Improved cookie management for storing and retrieving the last used team ID.
- Updated storybook examples to utilize the new client structure.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTableUI.stories.tsx`, `apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/published-contracts.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/Transactions/index.tsx`, `apps/dashboard/src/components/configure-networks/ConfigureNetworkForm.tsx`, `apps/dashboard/src/components/contract-components/contract-table/index.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx`, `apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routelist-card.tsx`, `apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routes-table.tsx`, `apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/page.tsx`, `apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/resolveAddressAndEns.tsx`, `apps/dashboard/src/app/team/components/TeamHeader/TeamSelectorMobileMenuButton.tsx`, `apps/dashboard/src/app/team/components/TeamHeader/TeamHeaderUI.stories.tsx`, `apps/dashboard/src/app/(dashboard)/contracts/deploy/[compiler_uri]/page.tsx`, `apps/dashboard/src/app/(dashboard)/(bridge)/routes/components/server/routelist-row.tsx`, `apps/dashboard/src/components/contract-components/contract-deploy-form/custom-contract.tsx`, `apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx`, `apps/dashboard/src/components/contract-components/contract-publish-form/index.tsx`, `apps/dashboard/src/app/nebula-app/(app)/components/ExecuteTransactionCard.stories.tsx`, `apps/dashboard/src/lib/wallet/nfts/alchemy.ts`, `apps/dashboard/src/lib/wallet/nfts/moralis.ts`, `apps/dashboard/src/app/(dashboard)/contracts/publish/[publish_uri]/page.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/metadata-header.tsx`, `apps/dashboard/src/app/team/components/TeamHeader/team-header-logged-in.client.tsx`, `apps/dashboard/src/components/contract-components/fetchPublishedContracts.ts`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/getModuleInstalledParams.ts`, `apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx`, `apps/dashboard/src/components/explore/contract-card/index.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/layout.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-row.tsx`, `apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/components/PublishedContractTable.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/chainlist/components/server/chainlist-card.tsx`, `apps/dashboard/src/app/(dashboard)/profile/[addressOrEns]/ProfileUI.tsx`, `apps/dashboard/src/components/contract-components/fetch-contracts-with-versions.ts`, `apps/dashboard/src/app/team/[team_slug]/(team)/layout.tsx`, `apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.stories.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/components/publish-based-deploy.tsx`, `apps/dashboard/src/app/team/components/TeamHeader/team-header.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/Transactions/TransactionCharts.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/layout.tsx`, `apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/cross-chain/data-table.tsx`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/utils/getPublishedContractsWithPublisherMapping.ts`, `apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx`, `apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.stories.tsx`, `apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx`, `apps/dashboard/src/components/contract-components/hooks.ts`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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

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

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

@@ -2,16 +2,16 @@
 
 import {
   generateAlchemyUrl,
-  isAlchemySupported,
   transformAlchemyResponseToNFT,
 } from "lib/wallet/nfts/alchemy";
 import {
   generateMoralisUrl,
-  isMoralisSupported,
   transformMoralisResponseToNFT,
 } from "lib/wallet/nfts/moralis";
 import type { WalletNFT } from "lib/wallet/nfts/types";
 import { getVercelEnv } from "../../lib/vercel-utils";
+import { isAlchemySupported } from "../../lib/wallet/nfts/isAlchemySupported";
+import { isMoralisSupported } from "../../lib/wallet/nfts/isMoralisSupported";
 import { DASHBOARD_THIRDWEB_CLIENT_ID } from "../constants/env";
 
 type WalletNFTApiReturn =

apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { GradientAvatar } from "./GradientAvatar";
 
@@ -17,8 +19,6 @@ export const Variants: Story = {
   args: {},
 };
 
-const client = getThirdwebClient();
-
 function Story() {
   return (
     <div className="container flex max-w-6xl flex-col gap-10 py-10">
@@ -29,7 +29,7 @@ function Story() {
           id={undefined}
           src={undefined}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -38,7 +38,7 @@ function Story() {
           id={"foo"}
           src={undefined}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -47,7 +47,7 @@ function Story() {
           id={"foo"}
           src={""}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -56,7 +56,7 @@ function Story() {
           id={"bar"}
           src={""}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -65,7 +65,7 @@ function Story() {
           src="invalid-src"
           id={undefined}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -74,7 +74,7 @@ function Story() {
           src="https://picsum.photos/200/300"
           id={undefined}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -83,7 +83,7 @@ function Story() {
           src="ipfs://QmZbeJYEs7kCJHyQxjxU2SJUtjSAr4m87wzJFJUyWomKdj/Smily.svg"
           id={undefined}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -123,7 +123,7 @@ function ToggleTest() {
           src={data?.src}
           id={data?.id}
           className="size-20"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
 
@@ -132,7 +132,7 @@ function ToggleTest() {
           className="size-20"
           src={data ? "invalid-src" : undefined}
           id={undefined}
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
     </div>

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.stories.tsx

@@ -1,7 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { BadgeContainer } from "../../../../stories/utils";
-import { getThirdwebClient } from "../../../constants/thirdweb.server";
+import {
+  BadgeContainer,
+  storybookThirdwebClient,
+} from "../../../../stories/utils";
 import { Button } from "../../ui/button";
 import { ProjectAvatar } from "./ProjectAvatar";
 
@@ -18,19 +20,25 @@ export const Variants: Story = {
   args: {},
 };
 
-const client = getThirdwebClient();
-
 function Story() {
   return (
     <div className="container flex max-w-6xl flex-col gap-10 py-10">
       <p> All images below are set with size-6 className </p>
 
       <BadgeContainer label="No Src - Skeleton">
-        <ProjectAvatar src={undefined} className="size-6" client={client} />
+        <ProjectAvatar
+          src={undefined}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="Invalid/Empty Src - BoxIcon Fallback">
-        <ProjectAvatar src={""} className="size-6" client={client} />
+        <ProjectAvatar
+          src={""}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
       </BadgeContainer>
 
       <ToggleTest />
@@ -65,14 +73,18 @@ function ToggleTest() {
       <p> Src+Name is: {data ? "set" : "not set"} </p>
 
       <BadgeContainer label="Valid Src">
-        <ProjectAvatar src={data?.src} className="size-6" client={client} />
+        <ProjectAvatar
+          src={data?.src}
+          className="size-6"
+          client={storybookThirdwebClient}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="invalid Src">
         <ProjectAvatar
           src={data ? "invalid-src" : undefined}
           className="size-6"
-          client={client}
+          client={storybookThirdwebClient}
         />
       </BadgeContainer>
     </div>

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

@@ -2,12 +2,16 @@ import { useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
 import { useActiveAccount } from "thirdweb/react";
 import type { GetAuthTokenResponse } from "../../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";
 
 // returns a thirdweb client with optional JWT passed i
 
 export function useThirdwebClient(jwt?: string) {
   const account = useActiveAccount();
+  const lastUsedTeamId = getCookie(LAST_USED_TEAM_ID);
+
   const query = useQuery({
     queryKey: ["jwt", account?.address],
     // only enable the query if there is an account and no JWT is passed in directly
@@ -33,8 +37,12 @@ export function useThirdwebClient(jwt?: string) {
 
   return useMemo(
     // prefer jwt from props over the one from the token query if it exists
-    () => getThirdwebClient(jwt || query.data),
-    [jwt, query.data],
+    () =>
+      getThirdwebClient({
+        jwt: jwt || query.data,
+        teamId: lastUsedTeamId,
+      }),
+    [jwt, query.data, lastUsedTeamId],
   );
 }
 

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

@@ -23,7 +23,14 @@ import { getZkPaymasterData } from "thirdweb/wallets/smart";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
 // returns a thirdweb client with optional JWT passed in
-export function getThirdwebClient(jwt?: string) {
+export function getThirdwebClient(
+  options:
+    | {
+        jwt: string | null | undefined;
+        teamId: string | undefined;
+      }
+    | undefined,
+) {
   if (getVercelEnv() !== "production") {
     // if not on production: run this when creating a client to set the domains
     setThirdwebDomains({
@@ -71,7 +78,8 @@ export function getThirdwebClient(jwt?: string) {
   }
 
   return createThirdwebClient({
-    secretKey: jwt ? jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
+    teamId: options?.teamId,
+    secretKey: options?.jwt ? options.jwt : DASHBOARD_THIRDWEB_SECRET_KEY,
     clientId: DASHBOARD_THIRDWEB_CLIENT_ID,
     config: {
       storage: {

apps/dashboard/src/app/(dashboard)/(bridge)/bridge/components/client/UniversalBridgeEmbed.tsx

@@ -1,17 +1,21 @@
 "use client";
-import { getThirdwebClient } from "@/constants/thirdweb.server";
+
 import { getSDKTheme } from "app/components/sdk-component-theme";
 import { useV5DashboardChain } from "lib/v5-adapter";
 import { useTheme } from "next-themes";
+import type { ThirdwebClient } from "thirdweb";
 import { PayEmbed } from "thirdweb/react";
 
-export function UniversalBridgeEmbed({ chainId }: { chainId?: number }) {
+export function UniversalBridgeEmbed({
+  chainId,
+  client,
+}: { chainId?: number; client: ThirdwebClient }) {
   const { theme } = useTheme();
   const chain = useV5DashboardChain(chainId || 1);
 
   return (
     <PayEmbed
-      client={getThirdwebClient()}
+      client={client}
       payOptions={{
         mode: "fund_wallet",
         prefillBuy: {

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

@@ -1,3 +1,4 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Metadata } from "next";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
 
@@ -18,10 +19,14 @@ export default async function RoutesPage({
   searchParams,
 }: { searchParams: Record<string, string | string[]> }) {
   const { chainId } = searchParams;
+  const client = getThirdwebClient(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">
-        <UniversalBridgeEmbed chainId={chainId ? Number(chainId) : undefined} />
+        <UniversalBridgeEmbed
+          chainId={chainId ? Number(chainId) : undefined}
+          client={client}
+        />
       </main>
 
       {/* eslint-disable-next-line @next/next/no-img-element */}

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

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

apps/dashboard/src/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 { getThirdwebClient } from "@/constants/thirdweb.server";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
+import type { ThirdwebClient } from "thirdweb";
 import { defineChain, getChainMetadata } from "thirdweb/chains";
 
 type RouteListRowProps = {
@@ -15,6 +15,7 @@ type RouteListRowProps = {
   destinationTokenIconUri?: string | null;
   destinationTokenSymbol?: string;
   destinationTokenName?: string;
+  client: ThirdwebClient;
 };
 
 export async function RouteListRow({
@@ -26,6 +27,7 @@ export async function RouteListRow({
   destinationTokenAddress,
   destinationTokenIconUri,
   destinationTokenSymbol,
+  client,
 }: RouteListRowProps) {
   const [
     originChain,
@@ -40,13 +42,13 @@ export async function RouteListRow({
     originTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: originTokenIconUri,
-          client: getThirdwebClient(),
+          client,
         })
       : undefined,
     destinationTokenIconUri
       ? resolveSchemeWithErrorHandler({
           uri: destinationTokenIconUri,
-          client: getThirdwebClient(),
+          client,
         })
       : undefined,
   ]);