diff --git a/packages/connectkit/src/assets/logos.tsx b/packages/connectkit/src/assets/logos.tsx
index 23df9e8d..c470399e 100644
--- a/packages/connectkit/src/assets/logos.tsx
+++ b/packages/connectkit/src/assets/logos.tsx
@@ -411,6 +411,22 @@ export const ImToken = ({ ...props }) => (
);
+export const Frame = ({ ...props }) => (
+
+);
+
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,
};
diff --git a/packages/connectkit/src/utils/index.ts b/packages/connectkit/src/utils/index.ts
index 66eabfdc..7e240e10 100644
--- a/packages/connectkit/src/utils/index.ts
+++ b/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,
};
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: ,
+ transparent: ,
+ appIcon: ,
+ connectorButton: ,
+ },
+ 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 f232fa2a..4d738639 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';
import { phantom } from './connectors/phantom';
import { dawn } from './connectors/dawn';
@@ -38,6 +39,7 @@ export const getWallets = () => {
onto(),
frontier(),
zerion(),
+ frame(),
phantom(),
dawn(),
];
diff --git a/packages/connectkit/src/wallets/useDefaultWallets.tsx b/packages/connectkit/src/wallets/useDefaultWallets.tsx
index 593fe9d8..a6e908ac 100644
--- a/packages/connectkit/src/wallets/useDefaultWallets.tsx
+++ b/packages/connectkit/src/wallets/useDefaultWallets.tsx
@@ -29,6 +29,7 @@ function useDefaultWallets(): WalletProps[] | any {
'gnosisSafe',
'frontier',
'zerion',
+ 'frame',
'phantom',
'dawn',
);