Add support for the Dynamic(xyz) wallet library

.env.example

@@ -56,3 +56,6 @@ MAGICBELL_DEV_KEY=
 
 # Needed for Arbitrary transaction feature
 ARBISCAN_API_KEY=
+
+# Needed so that we have a wallet provided by Dynamic.xyz
+DYNAMIC_ENV_ID=

Dockerfile

@@ -1,6 +1,6 @@
 # From https://github.com/runtime-env/import-meta-env/blob/main/packages/examples/docker-starter-example/Dockerfile
 FROM node:20.11-alpine3.19 as build-stage
-RUN apk add git
+RUN apk add git python3 make g++
 WORKDIR /app
 COPY package.json package-lock.json ./
 RUN SKIP_HOOKS=true npm ci

package.json

@@ -159,6 +159,9 @@
     "@colony/redux-promise-listener": "^1.2.0",
     "@colony/sdk": "^3.0.0-next.2",
     "@colony/unicode-confusables-noascii": "^0.1.2",
+    "@dynamic-labs/ethereum": "^4.2.3",
+    "@dynamic-labs/ethers-v5": "^2.6.2",
+    "@dynamic-labs/sdk-react-core": "^4.2.3",
     "@hookform/resolvers": "^2.9.10",
     "@magicbell/react-headless": "^5.0.1",
     "@nivo/arcs": "^0.87.0",

src/Entry.tsx

@@ -1,11 +1,18 @@
 import { ApolloProvider } from '@apollo/client';
+import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';
+import {
+  DynamicContextProvider,
+  mergeNetworks,
+} from '@dynamic-labs/sdk-react-core';
 import { PostHogProvider } from 'posthog-js/react';
 import React from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { IntlProvider } from 'react-intl';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
+import useLocalStorage from 'use-local-storage';
 
+import { GANACHE_NETWORK, GANACHE_LOCAL_RPC_URL } from '~constants/index.ts';
 import AnalyticsContextProvider from '~context/AnalyticsContext/AnalyticsContextProvider.tsx';
 import BreadcrumbsContextProvider from '~context/BreadcrumbsContext/BreadcrumbsContextProvider.tsx';
 import { getContext, ContextModule } from '~context/index.ts';
@@ -17,6 +24,10 @@ import motionStatesMessages from './i18n/en-motion-states.ts';
 import systemMessages from './i18n/en-system-messages.ts';
 import messages from './i18n/en.json';
 import Routes from './routes/index.ts';
+import {
+  dynamicCssOverridesLight,
+  dynamicCssOverridesDark,
+} from './styles/dynamicOverrides.ts';
 
 interface Props {
   store: any;
@@ -38,35 +49,99 @@ if (__COMMIT_HASH__) {
 const Entry = ({ store }: Props) => {
   const apolloClient = getContext(ContextModule.ApolloClient);
 
+  const [isDarkMode] = useLocalStorage(
+    'isDarkMode',
+    window.matchMedia('(prefers-color-scheme: dark)').matches,
+  );
+
   return (
-    <PostHogProvider {...posthogConfig}>
-      <IntlProvider
-        locale="en"
-        defaultLocale="en"
-        messages={{
-          ...messages,
-          ...actionMessages,
-          ...eventsMessages,
-          ...systemMessages,
-          ...motionStatesMessages,
-        }}
-      >
-        <ApolloProvider client={apolloClient}>
-          <ReduxProvider store={store}>
-            <HelmetProvider>
-              <AnalyticsContextProvider>
-                <Router>
-                  <BreadcrumbsContextProvider>
-                    <RouteTracker />
-                    <Routes />
-                  </BreadcrumbsContextProvider>
-                </Router>
-              </AnalyticsContextProvider>
-            </HelmetProvider>
-          </ReduxProvider>
-        </ApolloProvider>
-      </IntlProvider>
-    </PostHogProvider>
+    <DynamicContextProvider
+      theme={isDarkMode ? 'dark' : 'light'}
+      settings={{
+        debugError: import.meta.env.DEV,
+        logLevel: import.meta.env.DEV ? 'WARN' : 'ERROR',
+        mobileExperience: 'redirect',
+        environmentId: import.meta.env.DYNAMIC_ENV_ID,
+        walletConnectors: [EthereumWalletConnectors],
+        initialAuthenticationMode: 'connect-only',
+        networkValidationMode: 'always',
+        recommendedWallets: [
+          {
+            walletKey: 'metamask',
+            label: 'Recommended',
+          },
+        ],
+        // Since we can't use the shadow Dom override for css styling, since that breaks the skeleton loader
+        // we have to resort to this method to override the css, which is very verbose
+        cssOverrides: isDarkMode
+          ? dynamicCssOverridesDark
+          : dynamicCssOverridesLight,
+        overrides: {
+          evmNetworks: (networks) => {
+            // Only needed for embedded wallets
+            // All the others have their own interface to manage the chain
+            if (import.meta.env.DEV) {
+              return mergeNetworks(
+                [
+                  {
+                    blockExplorerUrls: [
+                      GANACHE_NETWORK.blockExplorerUrl as string,
+                    ],
+                    chainId: parseInt(GANACHE_NETWORK.chainId, 10),
+                    chainName: 'Local Hardhat Instance',
+                    iconUrls: ['/src/images/icons/hardhat.svg'],
+                    name: 'Local Hardhat Instance',
+                    nativeCurrency: {
+                      decimals: 18,
+                      name: 'Ether',
+                      symbol: 'ETH',
+                      iconUrl:
+                        'https://app.dynamic.xyz/assets/networks/eth.svg',
+                    },
+                    networkId: parseInt(GANACHE_NETWORK.chainId, 10),
+
+                    rpcUrls: [GANACHE_LOCAL_RPC_URL],
+                    vanityName: 'Hardhat',
+                  },
+                ],
+                networks,
+              );
+            }
+            return networks;
+          },
+        },
+        shadowDOMEnabled: true,
+      }}
+    >
+      <PostHogProvider {...posthogConfig}>
+        <IntlProvider
+          locale="en"
+          defaultLocale="en"
+          messages={{
+            ...messages,
+            ...actionMessages,
+            ...eventsMessages,
+            ...systemMessages,
+            ...motionStatesMessages,
+          }}
+        >
+          <ApolloProvider client={apolloClient}>
+            <ReduxProvider store={store}>
+              <HelmetProvider>
+                <AnalyticsContextProvider>
+                  <Router>
+                    <BreadcrumbsContextProvider>
+                      <RouteTracker />
+                      <Routes />
+                    </BreadcrumbsContextProvider>
+                  </Router>
+                </AnalyticsContextProvider>
+              </HelmetProvider>
+            </ReduxProvider>
+          </ApolloProvider>
+        </IntlProvider>
+      </PostHogProvider>
+    </DynamicContextProvider>
   );
 };
 

src/auth/index.ts

@@ -3,7 +3,6 @@ import { SiweMessage } from 'siwe';
 
 import { APP_URL } from '~constants/index.ts';
 import { ContextModule, getContext } from '~context/index.ts';
-import { isFullWallet } from '~types/wallet.ts';
 
 const authProxyRequest = async (urlPartial: string, options?: RequestInit) => {
   try {
@@ -38,10 +37,6 @@ export const deauthenticateWallet = async (): Promise<void> => {
 export const authenticateWallet = async (): Promise<void> => {
   const wallet = getContext(ContextModule.Wallet);
 
-  if (!isFullWallet(wallet)) {
-    throw new Error('Background login not yet completed.');
-  }
-
   const signer = wallet.ethersProvider.getSigner();
 
   const authCheck = await authProxyRequest('check');

src/components/common/Extensions/UserNavigation/UserNavigation.tsx

@@ -1,3 +1,4 @@
+import { DynamicWidget } from '@dynamic-labs/sdk-react-core';
 import { Cardholder, GearSix, List, X } from '@phosphor-icons/react';
 import React, { useState, type FC } from 'react';
 import { defineMessages } from 'react-intl';
@@ -27,6 +28,8 @@ const MSG = defineMessages({
   },
 });
 
+const localStorageKey = '__DYNAMIC_WALLET_DEBUG_ENABLED__';
+
 // @TODO: Rename this to something more explanatory
 const UserNavigation: FC<UserNavigationProps> = ({
   extra = null,
@@ -79,6 +82,15 @@ const UserNavigation: FC<UserNavigationProps> = ({
 
   return (
     <div data-tour={TourTargets.UserMenu} className="flex gap-1 md:relative">
+      <div
+        className={
+          localStorage.getItem(localStorageKey) === 'true'
+            ? 'visible'
+            : 'hidden'
+        }
+      >
+        <DynamicWidget />
+      </div>
       {txButton}
       {isWalletConnected ? (
         <div className="flex gap-1">

src/components/common/Extensions/UserNavigation/partials/WalletConnectedTopMenu/WalletConnectedTopMenu.tsx

@@ -1,6 +1,7 @@
-import { UserCircleGear } from '@phosphor-icons/react';
+import { useDynamicContext } from '@dynamic-labs/sdk-react-core';
+import { UserCircleGear, Wallet } from '@phosphor-icons/react';
 import React, { type PropsWithChildren, type FC } from 'react';
-import { useIntl } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useMobile } from '~hooks/index.ts';
@@ -14,10 +15,18 @@ import Link from '~v5/shared/Link/index.ts';
 const displayName =
   'common.Extensions.UserNavigation.partials.WalletConnectedTopMenu';
 
+const MSG = defineMessages({
+  manageEmbedded: {
+    id: `${displayName}.manageEmbedded`,
+    defaultMessage: 'Manage wallet',
+  },
+});
+
 const WalletConnectedTopMenu: FC<PropsWithChildren> = ({ children }) => {
   const { formatMessage } = useIntl();
-  const { user } = useAppContext();
+  const { user, wallet } = useAppContext();
   const isMobile = useMobile();
+  const { setShowAuthFlow } = useDynamicContext();
 
   const iconSize = isMobile ? 18 : 16;
 
@@ -45,6 +54,22 @@ const WalletConnectedTopMenu: FC<PropsWithChildren> = ({ children }) => {
           </p>
         </Link>
       )}
+      {/*
+       * Only show the manage embedded wallet link if the wallet is embedded / custodial
+       * All the other wallet types have their own interface
+       */}
+      {wallet?.label === 'turnkeyhd' && (
+        <div className="navigation-link -ml-4 w-[calc(100%+2rem)] rounded hover:bg-gray-50">
+          <Wallet size={iconSize} />
+          <button
+            type="button"
+            className="ml-2"
+            onClick={() => setShowAuthFlow(true)}
+          >
+            {formatMessage(MSG.manageEmbedded)}
+          </button>
+        </div>
+      )}
     </div>
   );
 };

src/components/frame/LandingPage/LandingPage.tsx

@@ -47,7 +47,7 @@ const LandingPage = () => {
       bottomComponent={
         isContentLoading ? (
           <LoadingSkeleton
-            isLoading
+            // isLoading
             className="m-6 h-[2.125rem] w-full rounded md:hidden"
           />
         ) : (

src/components/frame/v5/pages/UserAdvancedPage/UserAdvancedPage.tsx

@@ -20,11 +20,12 @@ const MSG = defineMessages({
 });
 
 const UserAdvancedPage = () => {
-  const { user, userLoading, walletConnecting } = useAppContext();
+  const { user, userLoading, walletConnecting, willWalletAutoConnect } =
+    useAppContext();
 
   useSetPageHeadingTitle(formatText({ id: 'advancedSettings.title' }));
 
-  if (userLoading || walletConnecting) {
+  if (userLoading || walletConnecting || (!user && willWalletAutoConnect)) {
     return <LoadingTemplate loadingText={MSG.loadingText} />;
   }
 

src/components/frame/v5/pages/UserCryptoToFiatPage/CryptoToFiatPage.tsx

@@ -32,7 +32,8 @@ const MSG = defineMessages({
 });
 
 const UserCryptoToFiatPage = () => {
-  const { user, userLoading, walletConnecting } = useAppContext();
+  const { user, userLoading, walletConnecting, willWalletAutoConnect } =
+    useAppContext();
   const featureFlags = useContext(FeatureFlagsContext);
   const cryptoToFiatFeatureFlag = featureFlags[FeatureFlag.CRYPTO_TO_FIAT];
 
@@ -45,7 +46,8 @@ const UserCryptoToFiatPage = () => {
     return <Navigate to={`${USER_HOME_ROUTE}/${USER_EDIT_PROFILE_ROUTE}`} />;
   }
 
-  const isLoadingUserAndWalletInfo = userLoading || walletConnecting;
+  const isLoadingUserAndWalletInfo =
+    userLoading || walletConnecting || (!user && willWalletAutoConnect);
 
   if (!isLoadingUserAndWalletInfo && !user) {
     return <Navigate to={LANDING_PAGE_ROUTE} />;

src/components/frame/v5/pages/UserPreferencesPage/UserPreferencesPage.tsx

@@ -23,11 +23,12 @@ const MSG = defineMessages({
 });
 
 const UserPreferencesPage: FC = () => {
-  const { user, userLoading, walletConnecting } = useAppContext();
+  const { user, userLoading, walletConnecting, willWalletAutoConnect } =
+    useAppContext();
 
   useSetPageHeadingTitle(formatText({ id: 'userPreferencesPage.title' }));
 
-  if (userLoading || walletConnecting) {
+  if (userLoading || walletConnecting || (!user && willWalletAutoConnect)) {
     return <LoadingTemplate loadingText={MSG.loadingText} />;
   }
 

src/components/frame/v5/pages/UserProfilePage/partials/UserAccountPage/UserAccountPage.tsx

@@ -24,12 +24,13 @@ const MSG = defineMessages({
 });
 
 const UserAccountPage: FC = () => {
-  const { user, userLoading, walletConnecting } = useAppContext();
+  const { user, userLoading, walletConnecting, willWalletAutoConnect } =
+    useAppContext();
   const { handleSubmit } = useUserProfile();
 
   useSetPageHeadingTitle(formatText({ id: 'userProfileTab.title' }));
 
-  if (userLoading || walletConnecting) {
+  if (userLoading || walletConnecting || (!user && willWalletAutoConnect)) {
     return <LoadingTemplate loadingText={MSG.loadingText} />;
   }