diff --git a/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx b/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx index ad6922fe..e3903a9e 100644 --- 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<{ )} - - {wallet.icon} - - ) : ( - <>{wallet.icon} - ) - } - //smallLogo={wallet.connector.id === 'injected' && wallet.connector.name === 'injected'} - connecting={status === states.CONNECTING} - //unavailable={status === states.UNAVAILABLE} - /> + {wallet.iconShape === 'circle' ? ( + + {wallet.icon} + + ) : ( + <>{wallet.icon} + ) + } + smallLogo={ + wallet.id === 'injected' && wallet.connector.id === 'injected' + } + connecting={status === states.CONNECTING} + unavailable={status === states.UNAVAILABLE} + /> + ) : ( + + {wallet.icon} + + ) : ( + <>{wallet.icon} + ) + } + //smallLogo={wallet.connector.id === 'injected' && wallet.connector.name === 'injected'} + connecting={status === states.CONNECTING} + //unavailable={status === states.UNAVAILABLE} + /> + )} {/* */} diff --git a/packages/connectkit/src/constants/walletConfigs.tsx b/packages/connectkit/src/constants/walletConfigs.tsx index d24fb187..383f34c5 100644 --- 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',