diff --git a/.changeset/short-follow-clap.md b/.changeset/short-follow-clap.md new file mode 100644 index 0000000000..61a6561798 --- /dev/null +++ b/.changeset/short-follow-clap.md @@ -0,0 +1,23 @@ +--- +'@rainbow-me/rainbowkit': patch +--- + +Frontier Wallet Support + +**Example usage** + +```ts +import { + getDefaultWallets, + connectorsForWallets, +} from '@rainbow-me/rainbowkit'; +import { frontierWallet } from '@rainbow-me/rainbowkit/wallets'; +const { wallets } = getDefaultWallets({ appName, chains }); +const connectors = connectorsForWallets([ + ...wallets, + { + groupName: 'Other', + wallets: [frontierWallet({ projectId, chains })], + }, +]); +``` diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index af1d451a46..1aa43e5e20 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -14,6 +14,7 @@ import { argentWallet, bitskiWallet, dawnWallet, + frontierWallet, imTokenWallet, ledgerWallet, mewWallet, @@ -93,6 +94,7 @@ const connectors = connectorsForWallets([ argentWallet({ chains, projectId }), bitskiWallet({ chains }), dawnWallet({ chains }), + frontierWallet({ chains, projectId }), imTokenWallet({ chains, projectId }), ledgerWallet({ chains, projectId }), mewWallet({ chains }), diff --git a/packages/rainbowkit/src/wallets/walletConnectors/frontierWallet/frontierWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/frontierWallet/frontierWallet.svg new file mode 100644 index 0000000000..948551a13c --- /dev/null +++ b/packages/rainbowkit/src/wallets/walletConnectors/frontierWallet/frontierWallet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/rainbowkit/src/wallets/walletConnectors/frontierWallet/frontierWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/frontierWallet/frontierWallet.ts new file mode 100644 index 0000000000..f22829aba9 --- /dev/null +++ b/packages/rainbowkit/src/wallets/walletConnectors/frontierWallet/frontierWallet.ts @@ -0,0 +1,155 @@ +/* eslint-disable sort-keys-fix/sort-keys-fix */ +import type { InjectedConnectorOptions } from '@wagmi/core'; +import { InjectedConnector } from 'wagmi/connectors/injected'; +import type { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext'; +import { getWalletConnectUri } from '../../../utils/getWalletConnectUri'; +import { isAndroid } from '../../../utils/isMobile'; +import type { Wallet } from '../../Wallet'; +import type { + WalletConnectConnectorOptions, + WalletConnectLegacyConnectorOptions, +} from '../../getWalletConnectConnector'; +import { getWalletConnectConnector } from '../../getWalletConnectConnector'; + +declare global { + interface Window { + frontier: any; + } +} + +export interface FrontierWalletLegacyOptions { + projectId?: string; + chains: Chain[]; + walletConnectVersion: '1'; + walletConnectOptions?: WalletConnectLegacyConnectorOptions; +} + +export interface FrontierWalletOptions { + projectId: string; + chains: Chain[]; + walletConnectVersion?: '2'; + walletConnectOptions?: WalletConnectConnectorOptions; +} + +export const frontierWallet = ({ + chains, + projectId, + walletConnectOptions, + walletConnectVersion = '2', + ...options +}: (FrontierWalletLegacyOptions | FrontierWalletOptions) & + InjectedConnectorOptions): Wallet => { + const isFrontierInjected = + typeof window !== 'undefined' && + typeof window.frontier !== 'undefined' && + window?.frontier?.ethereum?.isFrontier; + return { + id: 'frontier', + name: 'Frontier Wallet', + installed: + typeof window !== 'undefined' && + typeof window.frontier !== 'undefined' && + window?.frontier?.ethereum?.isFrontier + ? true + : undefined, + iconUrl: async () => (await import('./frontierWallet.svg')).default, + iconBackground: '#CC703C', + downloadUrls: { + android: + 'https://play.google.com/store/apps/details?id=com.frontierwallet', + ios: 'https://apps.apple.com/us/app/frontier-crypto-defi-wallet/id1482380988', + qrCode: 'https://www.frontier.xyz/download', + chrome: + 'https://chrome.google.com/webstore/detail/frontier-wallet/kppfdiipphfccemcignhifpjkapfbihd', + browserExtension: 'https://www.frontier.xyz/download', + }, + createConnector: () => { + const shouldUseWalletConnect = !isFrontierInjected; + const connector = shouldUseWalletConnect + ? getWalletConnectConnector({ + chains, + projectId, + options: walletConnectOptions, + version: walletConnectVersion, + }) + : new InjectedConnector({ chains }); + const getUri = async () => { + const uri = await getWalletConnectUri(connector, walletConnectVersion); + return isAndroid() + ? `frontier://wc?uri=${encodeURIComponent(uri)}` + : uri; + }; + return { + connector: new InjectedConnector({ + chains, + options: { + getProvider: () => { + const getFront = (frontier?: any) => + frontier?.ethereum ? frontier?.ethereum : undefined; + if (typeof window === 'undefined') return; + return getFront(window.frontier); + }, + ...options, + }, + }), + mobile: { + getUri: shouldUseWalletConnect ? getUri : undefined, + }, + qrCode: shouldUseWalletConnect + ? { + getUri, + instructions: { + learnMoreUrl: 'https://help.frontier.xyz/en/', + steps: [ + { + description: + 'We recommend putting Frontier Wallet on your home screen for quicker access.', + step: 'install', + title: 'Open the Frontier Wallet app', + }, + { + description: + 'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.', + step: 'create', + title: 'Create or Import a Wallet', + }, + { + description: + 'After you scan, a connection prompt will appear for you to connect your wallet.', + step: 'scan', + title: 'Tap the scan button', + }, + ], + }, + } + : undefined, + extension: { + instructions: { + learnMoreUrl: + 'https://help.frontier.xyz/en/articles/6967236-setting-up-frontier-on-your-device', + steps: [ + { + description: + 'We recommend pinning Frontier Wallet to your taskbar for quicker access to your wallet.', + step: 'install', + title: 'Install the Frontier Wallet extension', + }, + { + description: + 'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.', + step: 'create', + title: 'Create or Import a Wallet', + }, + { + description: + 'Once you set up your wallet, click below to refresh the browser and load up the extension.', + step: 'refresh', + title: 'Refresh your browser', + }, + ], + }, + }, + }; + }, + }; +}; diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts index cbc7c2a97a..ee3f7f939e 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/index.ts +++ b/packages/rainbowkit/src/wallets/walletConnectors/index.ts @@ -3,6 +3,7 @@ import { bitskiWallet } from './bitskiWallet/bitskiWallet'; import { braveWallet } from './braveWallet/braveWallet'; import { coinbaseWallet } from './coinbaseWallet/coinbaseWallet'; import { dawnWallet } from './dawnWallet/dawnWallet'; +import { frontierWallet } from './frontierWallet/frontierWallet'; import { imTokenWallet } from './imTokenWallet/imTokenWallet'; import { injectedWallet } from './injectedWallet/injectedWallet'; import { ledgerWallet } from './ledgerWallet/ledgerWallet'; @@ -26,6 +27,7 @@ export { braveWallet, coinbaseWallet, dawnWallet, + frontierWallet, imTokenWallet, injectedWallet, ledgerWallet, diff --git a/site/data/docs/custom-wallet-list.mdx b/site/data/docs/custom-wallet-list.mdx index b9819bb478..884e2eb6dc 100644 --- a/site/data/docs/custom-wallet-list.mdx +++ b/site/data/docs/custom-wallet-list.mdx @@ -167,6 +167,16 @@ dawnWallet(options: { }); ``` +#### Frontier Wallet + +```tsx +import { frontierWallet } from '@rainbow-me/rainbowkit/wallets'; +frontierWallet(options: { + projectId: string; + chains: Chain[]; +}); +``` + #### Ledger Live ```tsx