add Frame support (#204)

Co-authored-by: Lochie Axon <[email protected]>

packages/connectkit/src/assets/logos.tsx

@@ -411,6 +411,22 @@ export const ImToken = ({ ...props }) => (
   </svg>
 );
 
+export const Frame = ({ ...props }) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    width="32"
+    height="32"
+    viewBox="0 0 153.4 152.9"
+  >
+    <path
+      fill="rgb(0, 210, 190)"
+      d="M145.1,75.6v-58c0-5.1-4.2-9.3-9.3-9.3h0H77.7c-0.6,0-1.1-0.2-1.6-0.6l-7-7c-0.4-0.4-1-0.7-1.6-0.7H9.3 C4.2,0,0,4.1,0,9.3c0,0,0,0,0,0l0,0v58c0,0.6,0.2,1.1,0.6,1.6l7,7c0.4,0.4,0.7,1,0.7,1.6v58c0,5.1,4.2,9.3,9.3,9.3c0,0,0,0,0,0h58.2 c0.6,0,1.1,0.2,1.6,0.6l7,7c0.4,0.4,1,0.6,1.6,0.6h58.2c5.1,0,9.3-4.1,9.3-9.3c0,0,0,0,0,0l0,0v-58c0-0.6-0.2-1.1-0.6-1.6l-7-7 C145.4,76.7,145.1,76.2,145.1,75.6z M105.6,106.6H47.9c-0.7,0-1.3-0.6-1.3-1.3V47.7c0-0.7,0.6-1.3,1.3-1.3h57.7 c0.7,0,1.3,0.6,1.3,1.3v57.6C107,106,106.4,106.6,105.6,106.6z"
+    />
+  </svg>
+);
+
 export const Rainbow = ({ ...props }) => {
   // Here we're using a base64 of an svg because the gradients in this logo do not play nicely on mobile devices
   /*
@@ -930,5 +946,6 @@ export default {
   Zerion,
   Phantom,
   PlaceHolder,
+  Frame,
   Dawn,
 };

packages/connectkit/src/utils/index.ts

@@ -112,6 +112,9 @@ const isMetaMask = () => {
   const isTokenary = Boolean(ethereum.isTokenary);
   if (isTokenary) return false;
 
+  const isFrame = Boolean(ethereum.isFrame);
+  if (isFrame) return false;
+
   if (isPhantom()) return false;
 
   return true;
@@ -138,6 +141,17 @@ const isCoinbaseWallet = () => {
   );
 };
 
+const isFrame = () => {
+  if (typeof window === 'undefined') return false;
+  const { ethereum } = window;
+
+  return !!(
+    ethereum?.isFrame ||
+    (ethereum?.providers &&
+      ethereum?.providers.find((provider) => provider.isFrame))
+  );
+}
+
 const isPhantom = () => {
   if (typeof window === 'undefined') return false;
   const { phantom } = window as any;
@@ -189,6 +203,7 @@ export {
   isMetaMask,
   isDawn,
   isCoinbaseWallet,
+  isFrame,
   isPhantom,
   flattenChildren,
 };

packages/connectkit/src/wallets/connectors/frame.tsx

@@ -0,0 +1,32 @@
+import { WalletProps } from '../wallet';
+
+import { isFrame } from '../../utils';
+import Logos from '../../assets/logos';
+
+export const frame = (): WalletProps => {
+  const isInstalled = isFrame();
+
+  return {
+    id: 'frame',
+    name: 'Frame',
+    logos: {
+      default: <Logos.Frame />,
+      transparent: <Logos.Frame />,
+      appIcon: <Logos.Frame />,
+      connectorButton: <Logos.Frame />,
+    },
+    logoBackground: '#fff',
+    scannable: false,
+    downloadUrls: {
+      download: 'https://connect.family.co/v0/download/frame',
+      website: 'https://frame.sh',
+      chrome:
+        'https://chrome.google.com/webstore/detail/frame-companion/ldcoohedfbjoobcadoglnnmmfbdlmmhf',
+      firefox: 'https://addons.mozilla.org/en-US/firefox/addon/frame-extension',
+      brave:
+        'https://chrome.google.com/webstore/detail/frame-companion/ldcoohedfbjoobcadoglnnmmfbdlmmhf',
+    },
+    installed: isInstalled,
+    createUri: (uri: string) => uri,
+  };
+};

packages/connectkit/src/wallets/index.ts

@@ -15,6 +15,7 @@ import { onto } from './connectors/onto';
 import { gnosisSafe } from './connectors/gnosisSafe';
 import { frontier } from './connectors/frontier';
 import { zerion } from './connectors/zerion';
+import { frame } from './connectors/frame';
 import { phantom } from './connectors/phantom';
 import { dawn } from './connectors/dawn';
 
@@ -38,6 +39,7 @@ export const getWallets = () => {
     onto(),
     frontier(),
     zerion(),
+    frame(),
     phantom(),
     dawn(),
   ];

packages/connectkit/src/wallets/useDefaultWallets.tsx

@@ -29,6 +29,7 @@ function useDefaultWallets(): WalletProps[] | any {
     'gnosisSafe',
     'frontier',
     'zerion',
+    'frame',
     'phantom',
     'dawn',
   );