wip: injection branding

family · Jul 14, 2023 · 3f271bd · 3f271bd
1 parent 9034fd8
commit 3f271bd
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/CircleSpinner/styles.ts b/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/CircleSpinner/styles.ts
@@ -16,7 +16,7 @@ export const LogoContainer = styled(motion.div)`
 export const Logo = styled(motion.div)<{ $small?: boolean }>`
   z-index: 2;
   position: absolute;
-  //overflow: hidden;
+  overflow: hidden;
   inset: 6px;
   border-radius: 50px;
   background: var(--ck-body-background);

diff --git a/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx b/packages/connectkit/src/components/ConnectModal/ConnectWithInjector/index.tsx
@@ -29,9 +29,14 @@ import CircleSpinner from './CircleSpinner';
 import { RetryIconCircle, Scan } from '../../../assets/icons';
 import BrowserIcon from '../../Common/BrowserIcon';
 import { AlertIcon, TickIcon } from '../../../assets/icons';
-import { detectBrowser, isWalletConnectConnector } from '../../../utils';
+import {
+  detectBrowser,
+  isInjectedConnector,
+  isWalletConnectConnector,
+} from '../../../utils';
 import useLocales from '../../../hooks/useLocales';
 import { useConnect } from '../../../hooks/useConnect';
+import useDefaultWallets from '../../../wallets/useDefaultWallets';
 
 export const states = {
   CONNECTED: 'connected',
@@ -125,7 +130,26 @@ const ConnectWithInjector: React.FC<{
 
   const [id, setId] = useState(connectorId);
   const [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
-  const connector = supportedConnectors.filter((c) => c.id === id)[0];
+  const wallets = useDefaultWallets();
+  const installedWallets = wallets.filter((wallet) => wallet.installed);
+  let connector = supportedConnectors.filter((c) => c.id === id)[0];
+  if (isInjectedConnector(connectorId) && installedWallets.length > 0) {
+    const wallet = installedWallets[0];
+    connector = {
+      ...wallet,
+      extensionIsInstalled: () => {
+        return wallet?.installed;
+      },
+      extensions: {
+        ...wallet?.downloadUrls,
+      },
+      appUrls: {
+        ...wallet?.downloadUrls,
+      },
+    };
+  }
+
+  console.log('connector', connector);
 
   const expiryDefault = 9; // Starting at 10 causes layout shifting, better to start at 9
   const [expiryTimer, setExpiryTimer] = useState<number>(expiryDefault);

diff --git a/packages/connectkit/src/components/Pages/Connectors/styles.ts b/packages/connectkit/src/components/Pages/Connectors/styles.ts
@@ -249,6 +249,9 @@ export const ConnectorIcon = styled(motion.div)`
   overflow: hidden;
   svg {
     display: block;
+    position: relative;
+    overflow: hidden;
+    border-radius: 27.5%;
     width: 100%;
     height: 100%;
   }
@@ -301,14 +304,16 @@ export const MobileConnectorLabel = styled(motion.span)`
 `;
 
 export const MobileConnectorIcon = styled(motion.div)`
+  position: relative;
   margin: 0 auto;
   width: 60px;
   height: 60px;
   overflow: hidden;
   svg {
-    border-radius: inherit;
     display: block;
     position: relative;
+    overflow: hidden;
+    border-radius: 27.5%;
     transform: translate3d(0, 0, 0);
     width: 100%;
     height: 100%;