add dynamic sdk

README.md

@@ -7,7 +7,7 @@
 
 🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
 
-⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, Viem, and Typescript.
+⚙️ Built using NextJS, Dynamic, Hardhat, Wagmi, Viem, and Typescript.
 
 - ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
 - 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.

packages/nextjs/.env.example

@@ -10,4 +10,4 @@
 # You'll need to prefix the variables names with NEXT_PUBLIC_ if you want to access them on the client side.
 # More info: https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
 NEXT_PUBLIC_ALCHEMY_API_KEY=
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
+NEXT_PUBLIC_DYNAMIC_ENVIRONMENT_ID=

packages/nextjs/app/layout.tsx

@@ -1,4 +1,3 @@
-import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";

packages/nextjs/components/Header.tsx

@@ -4,8 +4,9 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { DynamicWidget } from "@dynamic-labs/sdk-react-core";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
-import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { FaucetButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
 type HeaderMenuLink = {
@@ -102,7 +103,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
-        <RainbowKitCustomConnectButton />
+        <DynamicWidget />
         <FaucetButton />
       </div>
     </div>

packages/nextjs/components/ScaffoldEthAppWithProviders.tsx

@@ -1,16 +1,17 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
+import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
+import { DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
+import { DynamicWagmiConnector } from "@dynamic-labs/wagmi-connector";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { Toaster } from "react-hot-toast";
 import { WagmiProvider } from "wagmi";
 import { Footer } from "~~/components/Footer";
 import { Header } from "~~/components/Header";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { ProgressBar } from "~~/components/scaffold-eth/ProgressBar";
 import { useInitializeNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
+import scaffoldConfig from "~~/scaffold.config";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
@@ -38,24 +39,43 @@ export const queryClient = new QueryClient({
 
 export const ScaffoldEthAppWithProviders = ({ children }: { children: React.ReactNode }) => {
   const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === "dark";
-  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+  /**
+   * For more information on the `evmNetworks` object, see:
+   * https://docs.dynamic.xyz/chains/evmNetwork#custom-evm-networks-evmnetwork
+   */
+  const evmNetworks = scaffoldConfig.targetNetworks.map(chain => ({
+    blockExplorerUrls: chain.blockExplorers
+      ? Object.values(chain.blockExplorers as any).map(({ url }: any) => url)
+      : [],
+    chainId: chain.id,
+    name: chain.name,
+    rpcUrls: Object.values(chain.rpcUrls).map(({ http }) => http[0]),
+    iconUrls: [],
+    nativeCurrency: chain.nativeCurrency,
+    networkId: chain.id,
+  }));
 
   return (
-    <WagmiProvider config={wagmiConfig}>
-      <QueryClientProvider client={queryClient}>
-        <ProgressBar />
-        <RainbowKitProvider
-          avatar={BlockieAvatar}
-          theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
-        >
-          <ScaffoldEthApp>{children}</ScaffoldEthApp>
-        </RainbowKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <DynamicContextProvider
+      theme={resolvedTheme === "dark" ? "dark" : "light"}
+      settings={{
+        environmentId: scaffoldConfig.dynamicEnvId,
+        walletConnectors: [EthereumWalletConnectors],
+        overrides: {
+          evmNetworks,
+        },
+      }}
+    >
+      <WagmiProvider config={wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+          <DynamicWagmiConnector>
+            <ProgressBar />
+
+            <ScaffoldEthApp>{children}</ScaffoldEthApp>
+          </DynamicWagmiConnector>
+        </QueryClientProvider>
+      </WagmiProvider>
+    </DynamicContextProvider>
   );
 };

packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import { AvatarComponent } from "@rainbow-me/rainbowkit";
+import { FC } from "react";
 import { blo } from "blo";
 
+type BlockieAvatarProps = {
+  address: string;
+  ensImage?: string | null | undefined;
+  size: number | string;
+};
+
 // Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+export const BlockieAvatar: FC<BlockieAvatarProps> = ({ address, ensImage, size }) => (
   // Don't want to use nextJS Image here (and adding remote patterns for the URL)
   // eslint-disable-next-line @next/next/no-img-element
   <img