diff --git a/.changeset/ten-teachers-agree.md b/.changeset/ten-teachers-agree.md new file mode 100644 index 0000000000..be49cd656c --- /dev/null +++ b/.changeset/ten-teachers-agree.md @@ -0,0 +1,23 @@ +--- +'@rainbow-me/rainbowkit': patch +--- + +TokenPocket Support + +**Example usage** + +```ts +import { + getDefaultWallets, + connectorsForWallets, +} from '@rainbow-me/rainbowkit'; +import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets'; +const { wallets } = getDefaultWallets({ appName, projectId, chains }); +const connectors = connectorsForWallets([ + ...wallets, + { + groupName: 'Other', + wallets: [tokenPocketWallet({ projectId, chains })], + }, +]); +``` diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx index f0f9fd6966..79236fc46d 100644 --- a/packages/example/pages/_app.tsx +++ b/packages/example/pages/_app.tsx @@ -26,6 +26,7 @@ import { safeheronWallet, tahoWallet, talismanWallet, + tokenPocketWallet, trustWallet, xdefiWallet, zerionWallet, @@ -109,6 +110,7 @@ const connectors = connectorsForWallets([ safeheronWallet({ chains }), tahoWallet({ chains }), talismanWallet({ chains }), + tokenPocketWallet({ chains, projectId }), trustWallet({ chains, projectId }), xdefiWallet({ chains }), zerionWallet({ chains, projectId }), diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts index 7a8508c035..faef0b402c 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/index.ts +++ b/packages/rainbowkit/src/wallets/walletConnectors/index.ts @@ -19,6 +19,7 @@ import { safeWallet } from './safeWallet/safeWallet'; import { safeheronWallet } from './safeheronWallet/safeheronWallet'; import { tahoWallet } from './tahoWallet/tahoWallet'; import { talismanWallet } from './talismanWallet/talismanWallet'; +import { tokenPocketWallet } from './tokenPocketWallet/tokenPocketWallet'; import { trustWallet } from './trustWallet/trustWallet'; import { walletConnectWallet } from './walletConnectWallet/walletConnectWallet'; import { xdefiWallet } from './xdefiWallet/xdefiWallet'; @@ -45,6 +46,7 @@ export { safeheronWallet, tahoWallet, talismanWallet, + tokenPocketWallet, trustWallet, okxWallet, walletConnectWallet, diff --git a/packages/rainbowkit/src/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.svg new file mode 100644 index 0000000000..5c13e59be2 --- /dev/null +++ b/packages/rainbowkit/src/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.svg @@ -0,0 +1 @@ +tokenpocket \ No newline at end of file diff --git a/packages/rainbowkit/src/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.ts new file mode 100644 index 0000000000..f88d39dee2 --- /dev/null +++ b/packages/rainbowkit/src/wallets/walletConnectors/tokenPocketWallet/tokenPocketWallet.ts @@ -0,0 +1,135 @@ +/* eslint-disable sort-keys-fix/sort-keys-fix */ +import type { InjectedConnectorOptions } from '@wagmi/core/connectors/injected'; +import { InjectedConnector } from 'wagmi/connectors/injected'; +import type { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext'; +import { getWalletConnectUri } from '../../../utils/getWalletConnectUri'; +import { isMobile } from '../../../utils/isMobile'; +import type { Wallet } from '../../Wallet'; +import type { + WalletConnectConnectorOptions, + WalletConnectLegacyConnectorOptions, +} from '../../getWalletConnectConnector'; +import { getWalletConnectConnector } from '../../getWalletConnectConnector'; + +export interface TokenPocketWalletLegacyOptions { + projectId?: string; + chains: Chain[]; + walletConnectVersion: '1'; + walletConnectOptions?: WalletConnectLegacyConnectorOptions; +} + +export interface TokenPocketWalletOptions { + projectId: string; + chains: Chain[]; + walletConnectVersion?: '2'; + walletConnectOptions?: WalletConnectConnectorOptions; +} + +export const tokenPocketWallet = ({ + chains, + projectId, + walletConnectOptions, + walletConnectVersion = '2', +}: (TokenPocketWalletLegacyOptions | TokenPocketWalletOptions) & + InjectedConnectorOptions): Wallet => { + const isTokenPocketInjected = + typeof window !== 'undefined' && window.ethereum?.isTokenPocket === true; + + const shouldUseWalletConnect = !isTokenPocketInjected; + + return { + id: 'tokenPocket', + name: 'TokenPocket', + iconUrl: async () => (await import('./tokenPocketWallet.svg')).default, + iconBackground: '#2980FE', + installed: !shouldUseWalletConnect ? isTokenPocketInjected : undefined, + downloadUrls: { + chrome: + 'https://chrome.google.com/webstore/detail/tokenpocket/mfgccjchihfkkindfppnaooecgfneiii', + browserExtension: 'https://extension.tokenpocket.pro/', + android: + 'https://play.google.com/store/apps/details?id=vip.mytokenpocket', + ios: 'https://apps.apple.com/us/app/tp-global-wallet/id6444625622', + qrCode: 'https://tokenpocket.pro/en/download/app', + mobile: 'https://tokenpocket.pro/en/download/app', + }, + createConnector: () => { + const connector = shouldUseWalletConnect + ? getWalletConnectConnector({ + chains, + projectId, + options: walletConnectOptions, + version: walletConnectVersion, + }) + : new InjectedConnector({ chains }); + + const getUri = async () => { + const uri = await getWalletConnectUri(connector, walletConnectVersion); + return isMobile() + ? `tpoutside://wc?uri=${encodeURIComponent(uri)}` + : uri; + }; + + return { + connector, + mobile: { + getUri: shouldUseWalletConnect ? getUri : undefined, + }, + qrCode: shouldUseWalletConnect + ? { + getUri, + instructions: { + learnMoreUrl: 'https://help.tokenpocket.pro/en/', + steps: [ + { + description: + 'We recommend putting TokenPocket on your home screen for quicker access.', + step: 'install', + title: 'Open the TokenPocket 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.tokenpocket.pro/en/extension-wallet/faq/installation-tutorial', + steps: [ + { + description: + 'We recommend pinning TokenPocket to your taskbar for quicker access to your wallet.', + step: 'install', + title: 'Install the TokenPocket 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/site/data/docs/custom-wallet-list.mdx b/site/data/docs/custom-wallet-list.mdx index dd9093eab6..69d87ebbaa 100644 --- a/site/data/docs/custom-wallet-list.mdx +++ b/site/data/docs/custom-wallet-list.mdx @@ -324,6 +324,17 @@ talismanWallet(options: { }); ``` +#### TokenPocket + +```tsx +import { tokenPocketWallet } from '@rainbow-me/rainbowkit/wallets'; + +tokenPocketWallet(options: { + projectId: string; + chains: Chain[]; +}); +``` + #### Trust Wallet ```tsx