Merge branch 'main' into @daniel/rainbow-support

family · Aug 30, 2023 · df38ab4 · df38ab4
2 parents d3baa6f + 15f9002
commit df38ab4
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 172 deletions.
diff --git a/packages/connectkit/src/components/Common/ChainSelectList/index.tsx b/packages/connectkit/src/components/Common/ChainSelectList/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
 import supportedChains from '../../../constants/supportedChains';
 
@@ -21,6 +19,7 @@ import { isCoinbaseWalletConnector, isMobile } from '../../../utils';
 
 import ChainIcons from '../../../assets/chains';
 import useLocales from '../../../hooks/useLocales';
+import { useContext } from '../../ConnectKit';
 
 const Spinner = (
   <svg
@@ -60,20 +59,23 @@ const ChainSelectList = ({
 }) => {
   const { connector } = useAccount();
   const { chain, chains } = useNetwork();
-  const { status, isLoading, pendingChainId, switchNetwork } =
+  const { isLoading, pendingChainId, switchNetwork, error } =
     useSwitchNetwork();
 
   const locales = useLocales({});
   const mobile = isMobile();
 
-  const disabled = status === 'error' || !switchNetwork;
+  const isError = error?.['code'] === 4902; // Wallet cannot switch networks
+  const disabled = isError || !switchNetwork;
 
   const handleSwitchNetwork = (chainId: number) => {
     if (switchNetwork) {
       switchNetwork(chainId);
     }
   };
 
+  const { triggerResize } = useContext();
+
   return (
     <SwitchNetworksContainer style={{ marginBottom: switchNetwork ? -8 : 0 }}>
       <ChainButtonContainer>
@@ -144,69 +146,71 @@ const ChainSelectList = ({
                   </ChainLogoContainer>
                   {ch.name}
                 </span>
-                <ChainButtonStatus>
-                  <AnimatePresence initial={false} exitBeforeEnter>
-                    {ch.id === chain?.id && (
-                      <motion.span
-                        key={'connectedText'}
-                        style={{
-                          color:
-                            'var(--ck-dropdown-active-color, var(--ck-focus-color))',
-                          display: 'block',
-                          position: 'relative',
-                        }}
-                        initial={{ opacity: 0, x: -4 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{
-                          opacity: 0,
-                          x: 4,
-                          transition: { duration: 0.1, delay: 0 },
-                        }}
-                        transition={{
-                          ease: [0.76, 0, 0.24, 1],
-                          duration: 0.3,
-                          delay: 0.2,
-                        }}
-                      >
-                        {locales.connected}
-                      </motion.span>
-                    )}
-                    {isLoading && pendingChainId === ch.id && (
-                      <motion.span
-                        key={'approveText'}
-                        style={{
-                          color: 'var(--ck-dropdown-pending-color, inherit)',
-                          display: 'block',
-                          position: 'relative',
-                        }}
-                        initial={{
-                          opacity: 0,
-                          x: -4,
-                        }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: 4 }}
-                        transition={{
-                          ease: [0.76, 0, 0.24, 1],
-                          duration: 0.3,
-                          delay: 0.1,
-                        }}
-                      >
+                {variant !== 'secondary' && (
+                  <ChainButtonStatus>
+                    <AnimatePresence initial={false} exitBeforeEnter>
+                      {ch.id === chain?.id && (
                         <motion.span
-                          animate={
-                            // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
-                            mobile &&
-                            isCoinbaseWalletConnector(connector?.id) && {
-                              opacity: [1, 0],
-                              transition: { delay: 4, duration: 4 },
-                            }
-                          }
+                          key={'connectedText'}
+                          style={{
+                            color:
+                              'var(--ck-dropdown-active-color, var(--ck-focus-color))',
+                            display: 'block',
+                            position: 'relative',
+                          }}
+                          initial={{ opacity: 0, x: -4 }}
+                          animate={{ opacity: 1, x: 0 }}
+                          exit={{
+                            opacity: 0,
+                            x: 4,
+                            transition: { duration: 0.1, delay: 0 },
+                          }}
+                          transition={{
+                            ease: [0.76, 0, 0.24, 1],
+                            duration: 0.3,
+                            delay: 0.2,
+                          }}
                         >
-                          {locales.approveInWallet}
+                          {locales.connected}
                         </motion.span>
-                      </motion.span>
-                    )}
-                  </AnimatePresence>
-                </ChainButtonStatus>
+                      )}
+                      {isLoading && pendingChainId === ch.id && (
+                        <motion.span
+                          key={'approveText'}
+                          style={{
+                            color: 'var(--ck-dropdown-pending-color, inherit)',
+                            display: 'block',
+                            position: 'relative',
+                          }}
+                          initial={{
+                            opacity: 0,
+                            x: -4,
+                          }}
+                          animate={{ opacity: 1, x: 0 }}
+                          exit={{ opacity: 0, x: 4 }}
+                          transition={{
+                            ease: [0.76, 0, 0.24, 1],
+                            duration: 0.3,
+                            delay: 0.1,
+                          }}
+                        >
+                          <motion.span
+                            animate={
+                              // UI fix for Coinbase Wallet on mobile does not remove isLoading on rejection event
+                              mobile &&
+                              isCoinbaseWalletConnector(connector?.id) && {
+                                opacity: [1, 0],
+                                transition: { delay: 4, duration: 4 },
+                              }
+                            }
+                          >
+                            {locales.approveInWallet}
+                          </motion.span>
+                        </motion.span>
+                      )}
+                    </AnimatePresence>
+                  </ChainButtonStatus>
+                )}
                 {variant === 'secondary' ? (
                   <ChainButtonBg
                     initial={false}
@@ -237,18 +241,17 @@ const ChainSelectList = ({
         </ChainButtons>
       </ChainButtonContainer>
       <AnimatePresence>
-        {disabled && (
+        {isError && (
           <motion.div
-            style={{
-              overflow: 'hidden',
-            }}
-            initial={{ height: 0 }}
-            animate={{ height: 'auto' }}
-            exit={{ height: 0 }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
             transition={{
               ease: [0.76, 0, 0.24, 1],
               duration: 0.3,
             }}
+            onAnimationStart={triggerResize}
+            onAnimationComplete={triggerResize}
           >
             <div style={{ paddingTop: 10, paddingBottom: 8 }}>
               <Alert>

diff --git a/packages/connectkit/src/components/Common/Modal/index.tsx b/packages/connectkit/src/components/Common/Modal/index.tsx
@@ -307,7 +307,14 @@ const Modal: React.FC<ModalProps> = ({
   const ref = useRef<any>(null);
   useEffect(() => {
     if (ref.current) updateBounds(ref.current);
-  }, [chain, switchNetwork, mobile, isSignedIn, context.options]);
+  }, [
+    chain,
+    switchNetwork,
+    mobile,
+    isSignedIn,
+    context.options,
+    context.resize,
+  ]);
 
   useEffect(() => {
     if (!mounted) {

diff --git a/packages/connectkit/src/components/ConnectKit.tsx b/packages/connectkit/src/components/ConnectKit.tsx
@@ -65,6 +65,8 @@ type ContextValue = {
   debugMode?: boolean;
   log: (...props: any) => void;
   displayError: (message: string | React.ReactNode | null, code?: any) => void;
+  resize: number;
+  triggerResize: () => void;
 } & useConnectCallbackProps;
 
 export const Context = createContext<ContextValue | null>(null);
@@ -177,6 +179,8 @@ export const ConnectKitProvider: React.FC<ConnectKitProviderProps> = ({
   const [route, setRoute] = useState<string>(routes.CONNECTORS);
   const [errorMessage, setErrorMessage] = useState<Error>('');
 
+  const [resize, onResize] = useState<number>(0);
+
   // Include Google Font that is needed for a themes
   if (opts.embedGoogleFonts) useThemeFont(theme);
 
@@ -232,6 +236,8 @@ export const ConnectKitProvider: React.FC<ConnectKitProviderProps> = ({
       if (code) console.table(code);
       console.log('---------/CONNECTKIT DEBUG---------');
     },
+    resize,
+    triggerResize: () => onResize((prev) => prev + 1),
   };
 
   return createElement(

diff --git a/packages/connectkit/src/defaultConfig.ts b/packages/connectkit/src/defaultConfig.ts
@@ -7,17 +7,11 @@ import {
 } from 'wagmi';
 import { Chain, mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
 
-import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
-import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
-import { WalletConnectLegacyConnector } from 'wagmi/connectors/walletConnectLegacy';
-import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
-import { SafeConnector } from 'wagmi/connectors/safe';
-import { InjectedConnector } from 'wagmi/connectors/injected';
-
 import { alchemyProvider } from 'wagmi/providers/alchemy';
 import { infuraProvider } from 'wagmi/providers/infura';
 import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
 import { publicProvider } from 'wagmi/providers/public';
+import defaultConnectors from './defaultConnectors';
 
 let globalAppName: string;
 let globalAppIcon: string;
@@ -27,17 +21,6 @@ export const getAppIcon = () => globalAppIcon;
 
 const defaultChains = [mainnet, polygon, optimism, arbitrum];
 
-type DefaultConnectorsProps = {
-  chains?: Chain[];
-  app: {
-    name: string;
-    icon?: string;
-    description?: string;
-    url?: string;
-  };
-  walletConnectProjectId?: string;
-};
-
 type DefaultConfigProps = {
   appName: string;
   appIcon?: string;
@@ -63,87 +46,6 @@ type ConnectKitClientProps = {
   webSocketPublicClient?: WebSocketPublicClient;
 };
 
-const getDefaultConnectors = ({
-  chains,
-  app,
-  walletConnectProjectId,
-}: DefaultConnectorsProps) => {
-  const hasAllAppData = app.name && app.icon && app.description && app.url;
-  const shouldUseSafeConnector =
-    !(typeof window === 'undefined') && window?.parent !== window;
-
-  let connectors: Connector[] = [];
-
-  // If we're in an iframe, include the SafeConnector
-  if (shouldUseSafeConnector) {
-    connectors = [
-      ...connectors,
-      new SafeConnector({
-        chains,
-        options: {
-          allowedDomains: [/gnosis-safe.io$/, /app.safe.global$/],
-          debug: false,
-        },
-      }),
-    ];
-  }
-
-  // Add the rest of the connectors
-  connectors = [
-    ...connectors,
-    new MetaMaskConnector({
-      chains,
-      options: {
-        shimDisconnect: true,
-        UNSTABLE_shimOnConnectSelectAccount: true,
-      },
-    }),
-    new CoinbaseWalletConnector({
-      chains,
-      options: {
-        appName: app.name,
-        headlessMode: true,
-      },
-    }),
-    walletConnectProjectId
-      ? new WalletConnectConnector({
-          chains,
-          options: {
-            showQrModal: false,
-            projectId: walletConnectProjectId,
-            metadata: hasAllAppData
-              ? {
-                  name: app.name,
-                  description: app.description!,
-                  url: app.url!,
-                  icons: [app.icon!],
-                }
-              : undefined,
-          },
-        })
-      : new WalletConnectLegacyConnector({
-          chains,
-          options: {
-            qrcode: false,
-          },
-        }),
-    new InjectedConnector({
-      chains,
-      options: {
-        shimDisconnect: true,
-        name: (detectedName) =>
-          `Injected (${
-            typeof detectedName === 'string'
-              ? detectedName
-              : detectedName.join(', ')
-          })`,
-      },
-    }),
-  ];
-
-  return connectors;
-};
-
 const defaultConfig = ({
   autoConnect = true,
   appName = 'ConnectKit',
@@ -189,7 +91,7 @@ const defaultConfig = ({
     autoConnect,
     connectors:
       connectors ??
-      getDefaultConnectors({
+      defaultConnectors({
         chains: configuredChains,
         app: {
           name: appName,