spinner configs

family · Oct 27, 2023 · 65edcf4 · 65edcf4
1 parent a4762cc
commit 65edcf4
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 20 deletions.
diff --git a/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx b/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx
@@ -32,6 +32,7 @@ import useLocales from '../../../hooks/useLocales';
 import { useConnect } from '../../../hooks/useConnect';
 import { useContext } from '../../ConnectKit';
 import { useWallet } from '../../../hooks/useWallets';
+import CircleSpinner from './CircleSpinner';
 
 export const states = {
   CONNECTED: 'connected',
@@ -267,26 +268,51 @@ const ConnectWithInjector: React.FC<{
                 </RetryButton>
               )}
             </AnimatePresence>
-            <SquircleSpinner
-              logo={
-                status === states.UNAVAILABLE ? (
-                  <div
-                    style={{
-                      transform: 'scale(1.14)',
-                      position: 'relative',
-                      width: '100%',
-                    }}
-                  >
-                    {wallet.icon}
-                  </div>
-                ) : (
-                  <>{wallet.icon}</>
-                )
-              }
-              //smallLogo={wallet.connector.id === 'injected' && wallet.connector.name === 'injected'}
-              connecting={status === states.CONNECTING}
-              //unavailable={status === states.UNAVAILABLE}
-            />
+            {wallet.iconShape === 'circle' ? (
+              <CircleSpinner
+                logo={
+                  status === states.UNAVAILABLE ? (
+                    <div
+                      style={{
+                        transform: 'scale(1.14)',
+                        position: 'relative',
+                        width: '100%',
+                      }}
+                    >
+                      {wallet.icon}
+                    </div>
+                  ) : (
+                    <>{wallet.icon}</>
+                  )
+                }
+                smallLogo={
+                  wallet.id === 'injected' && wallet.connector.id === 'injected'
+                }
+                connecting={status === states.CONNECTING}
+                unavailable={status === states.UNAVAILABLE}
+              />
+            ) : (
+              <SquircleSpinner
+                logo={
+                  status === states.UNAVAILABLE ? (
+                    <div
+                      style={{
+                        transform: 'scale(1.14)',
+                        position: 'relative',
+                        width: '100%',
+                      }}
+                    >
+                      {wallet.icon}
+                    </div>
+                  ) : (
+                    <>{wallet.icon}</>
+                  )
+                }
+                //smallLogo={wallet.connector.id === 'injected' && wallet.connector.name === 'injected'}
+                connecting={status === states.CONNECTING}
+                //unavailable={status === states.UNAVAILABLE}
+              />
+            )}
             {/* </Tooltip> */}
           </ConnectingAnimation>
         </ConnectingContainer>

diff --git a/packages/connectkit/src/constants/walletConfigs.tsx b/packages/connectkit/src/constants/walletConfigs.tsx
@@ -7,6 +7,7 @@ export type WalletConfigProps = {
   icon?: string | React.ReactNode;
   iconConnector?: React.ReactNode;
   iconBackground?: string;
+  iconShape?: 'squircle' | 'circle';
   downloadUrls?: { [key: string]: string };
 };
 
@@ -42,6 +43,7 @@ export const walletConfigs: { [key: string]: WalletConfigProps } = {
     ),
     iconBackground:
       'linear-gradient(0deg, var(--ck-brand-metamask-12), var(--ck-brand-metamask-11))',
+    iconShape: 'circle',
     downloadUrls: {
       chrome:
         'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',