From b325ce8f08a39af44a74c93ade221c3600b2c770 Mon Sep 17 00:00:00 2001
From: goosewobbler <goosewobbler@protonmail.com>
Date: Thu, 20 Apr 2023 13:51:33 +0100
Subject: [PATCH] add Frame support

---
 packages/connectkit/src/assets/logos.tsx      | 17 ++++++++++
 packages/connectkit/src/utils/index.ts        | 15 +++++++++
 .../src/wallets/connectors/frame.tsx          | 32 +++++++++++++++++++
 packages/connectkit/src/wallets/index.ts      |  2 ++
 .../src/wallets/useDefaultWallets.tsx         |  3 +-
 5 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 packages/connectkit/src/wallets/connectors/frame.tsx

diff --git a/packages/connectkit/src/assets/logos.tsx b/packages/connectkit/src/assets/logos.tsx
index 586e452b..48022e47 100644
--- a/packages/connectkit/src/assets/logos.tsx
+++ b/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
   /*
@@ -822,4 +838,5 @@ export default {
   Frontier,
   Zerion,
   PlaceHolder,
+  Frame,
 };
diff --git a/packages/connectkit/src/utils/index.ts b/packages/connectkit/src/utils/index.ts
index f5523ef2..0faed777 100644
--- a/packages/connectkit/src/utils/index.ts
+++ b/packages/connectkit/src/utils/index.ts
@@ -110,6 +110,9 @@ const isMetaMask = () => {
   const isTokenary = Boolean(ethereum.isTokenary);
   if (isTokenary) return false;
 
+  const isFrame = Boolean(ethereum.isFrame);
+  if (isFrame) return false;
+
   return true;
 };
 
@@ -124,6 +127,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))
+  );
+};
+
 type ReactChildArray = ReturnType<typeof React.Children.toArray>;
 function flattenChildren(children: React.ReactNode): ReactChildArray {
   const childrenArray = React.Children.toArray(children);
@@ -166,5 +180,6 @@ export {
   getWalletDownloadUri,
   isMetaMask,
   isCoinbaseWallet,
+  isFrame,
   flattenChildren,
 };
diff --git a/packages/connectkit/src/wallets/connectors/frame.tsx b/packages/connectkit/src/wallets/connectors/frame.tsx
new file mode 100644
index 00000000..1f3822ca
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/packages/connectkit/src/wallets/index.ts b/packages/connectkit/src/wallets/index.ts
index 6a306831..3e7639f4 100644
--- a/packages/connectkit/src/wallets/index.ts
+++ b/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';
 
 export const getWallets = () => {
   return [
@@ -35,5 +36,6 @@ export const getWallets = () => {
     onto(),
     frontier(),
     zerion(),
+    frame(),
   ];
 };
diff --git a/packages/connectkit/src/wallets/useDefaultWallets.tsx b/packages/connectkit/src/wallets/useDefaultWallets.tsx
index 25aba970..83de1dbf 100644
--- a/packages/connectkit/src/wallets/useDefaultWallets.tsx
+++ b/packages/connectkit/src/wallets/useDefaultWallets.tsx
@@ -28,7 +28,8 @@ function useDefaultWallets(): WalletProps[] | any {
     'onto',
     'gnosisSafe',
     'frontier',
-    'zerion'
+    'zerion',
+    'frame'
   );
 
   const wallets = getWallets();