add: family browser support (#264)

* svg cleanup * add isFamily check * fallback * wip: injection branding * autoconnect to family * data-connectkit * transparent logo * Update yarn.lock
family · Jul 17, 2023 · 2df1dcc · 2df1dcc · vercel · Jul 17, 2023
1 parent 4191300
commit 2df1dcc
Show file tree

Hide file tree

Showing 10 changed files with 405 additions and 9 deletions.
diff --git a/packages/connectkit/src/assets/logos.tsx b/packages/connectkit/src/assets/logos.tsx
diff --git a/packages/connectkit/src/components/Common/Portal/index.tsx b/packages/connectkit/src/components/Common/Portal/index.tsx
@@ -19,6 +19,7 @@ const Portal = (props: any) => {
     if (!ref.current) {
       const div = document.createElement('div');
       div.setAttribute('id', selector);
+      div.setAttribute('data-connectkit', '1.4.0');
       document.body.appendChild(div);
       ref.current = div;
     }

diff --git a/packages/connectkit/src/components/ConnectKit.tsx b/packages/connectkit/src/components/ConnectKit.tsx
@@ -26,6 +26,8 @@ import {
   useConnectCallback,
   useConnectCallbackProps,
 } from '../hooks/useConnectCallback';
+import { isFamily } from '../utils';
+import { useConnector } from '../hooks/useConnectors';
 
 export const routes = {
   ONBOARDING: 'onboarding',
@@ -124,6 +126,7 @@ export const ConnectKitProvider: React.FC<ConnectKitProviderProps> = ({
   });
 
   const chains = useChains();
+  const injectedConnector = useConnector('injected');
 
   // Default config options
   const defaultOptions: ConnectKitOptions = {
@@ -191,6 +194,13 @@ export const ConnectKitProvider: React.FC<ConnectKitProviderProps> = ({
     }
   }, [chain, route, open]);
 
+  // Autoconnect to Family wallet if available
+  useEffect(() => {
+    if (isFamily()) {
+      injectedConnector?.connect();
+    }
+  }, [injectedConnector]);
+
   const log = debugMode ? console.log : () => {};
 
   const value = {

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,24 @@ 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,
+      },
+    };
+  }
 
   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/index.tsx b/packages/connectkit/src/components/Pages/Connectors/index.tsx
@@ -104,7 +104,16 @@ const Wallets: React.FC = () => {
       if (a) return x;
       return null;
     });
-    if (hasWalletLogo.length === 0) return null;
+    if (hasWalletLogo.length === 0) {
+      const installedWallets = wallets.filter((wallet) => wallet.installed);
+      if (installedWallets.length === 1) {
+        // Fallback for when there is only one wallet installed
+        return installedWallets[0];
+      } else {
+        // Fallback for when there are multiple wallets installed
+        return null;
+      }
+    }
 
     const foundInjector = wallets.filter(
       (wallet: any) => wallet.installed && wallet.name === hasWalletLogo[0]

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%;

diff --git a/packages/connectkit/src/utils/index.ts b/packages/connectkit/src/utils/index.ts
@@ -92,6 +92,16 @@ const getBrowserAppUri = (connectorId: string) => {
   }
 };
 
+const isFamily = () => {
+  if (typeof window === 'undefined') return false;
+
+  const { ethereum } = window;
+  if (!ethereum) return false;
+
+  const isFamily = Boolean(ethereum.isFamily);
+  if (isFamily) return true;
+};
+
 const isMetaMask = () => {
   if (typeof window === 'undefined') return false;
 
@@ -224,6 +234,7 @@ export {
   detectBrowser,
   detectOS,
   getWalletDownloadUri,
+  isFamily,
   isMetaMask,
   isDawn,
   isCoinbaseWallet,

diff --git a/packages/connectkit/src/wallets/connectors/family.tsx b/packages/connectkit/src/wallets/connectors/family.tsx
@@ -1,15 +1,18 @@
 import { WalletProps } from './../wallet';
-import { isAndroid } from '../../utils';
+import { isAndroid, isFamily } from '../../utils';
 import Logos from './../../assets/logos';
 
 export const family = (): WalletProps => {
+  const isInstalled = isFamily();
   return {
     id: 'family',
     name: 'Family',
     logos: {
       default: <Logos.Family />,
+      transparent: <Logos.Family transparent />,
     },
     logoBackground: '#7DC4FF',
+    installed: Boolean(isInstalled) ? true : undefined,
     scannable: true,
     downloadUrls: {
       download: 'https://connect.family.co/v0/download/family',