remove @thirdweb-dev/react (#4591)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
The focus of this PR is to update dependencies and refactor provider setup in the `apps/dashboard` directory.

### Detailed summary
- Updated dependencies for `@tanstack/react-query` and `@tanstack/react-table`
- Removed unused imports and code related to `@thirdweb-dev/react`
- Refactored provider setup in `apps/dashboard/src/components/app-layouts/provider-setup.tsx` and `apps/dashboard/src/components/app-layouts/providers.tsx`

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

<!-- end pr-codex -->

apps/dashboard/package.json

@@ -55,7 +55,6 @@
     "@stripe/stripe-js": "^3.5.0",
     "@tanstack/react-query": "^4.36.1",
     "@tanstack/react-table": "^8.17.3",
-    "@thirdweb-dev/react": "workspace:*",
     "@thirdweb-dev/sdk": "workspace:*",
     "@thirdweb-dev/service-utils": "workspace:*",
     "@thirdweb-dev/storage": "workspace:*",
@@ -169,16 +168,8 @@
       "tw-components",
       "contract-ui"
     ],
-    "exclude": [
-      "node_modules",
-      "types",
-      "tw-components"
-    ],
+    "exclude": ["node_modules", "types", "tw-components"],
     "entrypoints": []
   },
-  "browserslist": [
-    "defaults",
-    "unreleased versions",
-    "not UCAndroid > 0"
-  ]
+  "browserslist": ["defaults", "unreleased versions", "not UCAndroid > 0"]
 }

apps/dashboard/src/app/providers.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { DashboardThirdwebProviderSetup } from "components/app-layouts/provider-setup";
 import { AllChainsProvider } from "contexts/all-chains";
 import { ChainsProvider } from "contexts/configured-chains";
 import { ThemeProvider } from "next-themes";
@@ -22,11 +21,9 @@ export function AppRouterProviders(props: { children: React.ReactNode }) {
       <AllChainsProvider>
         <ChainsProvider>
           <ThirdwebProvider>
-            <DashboardThirdwebProviderSetup>
-              <ThemeProvider attribute="class" defaultTheme="dark">
-                {props.children}
-              </ThemeProvider>
-            </DashboardThirdwebProviderSetup>
+            <ThemeProvider attribute="class" defaultTheme="dark">
+              {props.children}
+            </ThemeProvider>
           </ThirdwebProvider>
         </ChainsProvider>
       </AllChainsProvider>

apps/dashboard/src/components/app-layouts/provider-setup.tsx

@@ -1,119 +1,13 @@
-"use client";
-
 import { thirdwebClient } from "@/constants/client";
-import {
-  DASHBOARD_THIRDWEB_CLIENT_ID,
-  DASHBOARD_THIRDWEB_SECRET_KEY,
-} from "@/constants/env";
-import {
-  type EVMContractInfo,
-  useEVMContractInfo,
-} from "@3rdweb-sdk/react/hooks/useActiveChainId";
-import { useQueryClient } from "@tanstack/react-query";
-import { ThirdwebSDKProvider } from "@thirdweb-dev/react";
 import type { Signer } from "ethers";
 import * as ethers from "ethers";
-import { useSupportedChains } from "hooks/chains/configureChains";
-import { useNativeColorMode } from "hooks/useNativeColorMode";
-import { getDashboardChainRpc } from "lib/rpc";
-import { StorageSingleton } from "lib/sdk";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { toEthersSigner } from "thirdweb/adapters/ethers5";
-import { type ChainMetadata, ethereum } from "thirdweb/chains";
 import {
   useActiveAccount,
   useActiveWallet,
   useActiveWalletChain,
 } from "thirdweb/react";
-import { setThirdwebDomains } from "thirdweb/utils";
-import type { ComponentWithChildren } from "types/component-with-children";
-import type { StoredChain } from "../../contexts/configured-chains";
-
-const PLACEHOLDER_CHAIN: StoredChain = {
-  chainId: 1,
-  chain: "ETH",
-  name: "Ethereum",
-  rpc: [ethereum.rpc],
-  nativeCurrency: {
-    decimals: 18,
-    name: "Ether",
-    symbol: "ETH",
-  },
-  shortName: "eth",
-  slug: "ethereum",
-  testnet: false,
-};
-
-const THIRDWEB_API_HOST = new URL(
-  process.env.NEXT_PUBLIC_THIRDWEB_API_HOST || "https://api.thirdweb.com",
-)
-  .toString()
-  .slice(0, -1);
-
-const isLocalHost = THIRDWEB_API_HOST.includes("localhost");
-
-const DOMAIN = isLocalHost
-  ? "thirdweb-dev.com"
-  : THIRDWEB_API_HOST.replace("https://api.", "");
-
-// do this upfront
-setThirdwebDomains({
-  bundler: `bundler.${DOMAIN}`,
-  inAppWallet: `embedded-wallet.${DOMAIN}`,
-  pay: `pay.${DOMAIN}`,
-  rpc: `rpc.${DOMAIN}`,
-  storage: `storage.${DOMAIN}`,
-});
-
-export interface DashboardThirdwebProviderProps {
-  contractInfo?: EVMContractInfo;
-  activeChain?: ChainMetadata;
-}
-
-export const DashboardThirdwebProviderSetup: ComponentWithChildren<
-  DashboardThirdwebProviderProps
-> = ({ children, activeChain }) => {
-  useNativeColorMode();
-  const queryClient = useQueryClient();
-  const supportedChains = useSupportedChains();
-  const contractInfo = useEVMContractInfo();
-  const chain = contractInfo?.chain;
-  const readonlySettings = useMemo(() => {
-    if (!chain) {
-      return undefined;
-    }
-    const rpcUrl = getDashboardChainRpc(chain.chainId, chain);
-    if (!rpcUrl) {
-      return undefined;
-    }
-    return {
-      chainId: chain.chainId,
-      rpcUrl,
-    };
-  }, [chain]);
-
-  const ethersSigner = useEthersSigner();
-
-  return (
-    <ThirdwebSDKProvider
-      queryClient={queryClient}
-      signer={ethersSigner}
-      activeChain={activeChain}
-      supportedChains={
-        supportedChains.length ? supportedChains : [PLACEHOLDER_CHAIN]
-      }
-      sdkOptions={{
-        gasSettings: { maxPriceInGwei: 650 },
-        readonlySettings,
-      }}
-      clientId={DASHBOARD_THIRDWEB_CLIENT_ID}
-      secretKey={DASHBOARD_THIRDWEB_SECRET_KEY}
-      storageInterface={StorageSingleton}
-    >
-      {children}
-    </ThirdwebSDKProvider>
-  );
-};
 
 export function useEthersSigner() {
   const activeWallet = useActiveWallet();

apps/dashboard/src/components/app-layouts/providers.tsx

@@ -1,40 +1,12 @@
 "use client";
-
-import { useEVMContractInfo } from "@3rdweb-sdk/react/hooks/useActiveChainId";
-import { useSupportedChainsSlugRecord } from "hooks/chains/configureChains";
 import { useNativeColorMode } from "hooks/useNativeColorMode";
-import { useRouter } from "next/router";
-import { useMemo } from "react";
 import { ThirdwebProvider } from "thirdweb/react";
 import type { ComponentWithChildren } from "types/component-with-children";
-import { DashboardThirdwebProviderSetup } from "./provider-setup";
 
 export const DashboardThirdwebProvider: ComponentWithChildren = ({
   children,
 }) => {
   useNativeColorMode();
-  const chainsSlugRecord = useSupportedChainsSlugRecord();
-  const contractInfo = useEVMContractInfo();
-  const router = useRouter();
-  const isChainSlugPage = router.pathname === "/[chain_id]";
-  const chainByChainSlug = chainsSlugRecord[router.asPath.split("/")[1]];
 
-  const activeChain = useMemo(() => {
-    return contractInfo?.chain === null
-      ? undefined
-      : isChainSlugPage
-        ? chainByChainSlug
-        : contractInfo?.chain;
-  }, [contractInfo, chainByChainSlug, isChainSlugPage]);
-
-  return (
-    <ThirdwebProvider>
-      <DashboardThirdwebProviderSetup
-        contractInfo={contractInfo}
-        activeChain={activeChain}
-      >
-        {children}
-      </DashboardThirdwebProviderSetup>
-    </ThirdwebProvider>
-  );
+  return <ThirdwebProvider>{children}</ThirdwebProvider>;
 };

pnpm-lock.yaml

@@ -233,9 +233,6 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.17.3
         version: 8.20.5([email protected]([email protected]))([email protected])
-      '@thirdweb-dev/react':
-        specifier: workspace:*
-        version: link:../../legacy_packages/react
       '@thirdweb-dev/sdk':
         specifier: workspace:*
         version: link:../../legacy_packages/sdk