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', );