diff --git a/packages/example/src/wagmi.ts b/packages/example/src/wagmi.ts index 7cace08621..10b11ccbe8 100644 --- a/packages/example/src/wagmi.ts +++ b/packages/example/src/wagmi.ts @@ -21,6 +21,7 @@ import { frontierWallet, gateWallet, imTokenWallet, + iopayWallet, kaikasWallet, krakenWallet, kresusWallet, @@ -195,6 +196,7 @@ export const config = getDefaultConfig({ frontierWallet, gateWallet, imTokenWallet, + iopayWallet, kresusWallet, krakenWallet, kaikasWallet, diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json index 86cb4384e4..e56759f591 100644 --- a/packages/rainbowkit/src/locales/en_US.json +++ b/packages/rainbowkit/src/locales/en_US.json @@ -585,6 +585,23 @@ } }, + "iopay": { + "qr_code": { + "step1": { + "description": "We recommend putting ioPay on your home screen for faster access to your wallet.", + "title": "Open the ioPay app" + }, + "step2": { + "description": "You can easily backup your wallet using our backup feature on your phone.", + "title": "Create or Import a Wallet" + }, + "step3": { + "description": "After you scan, a connection prompt will appear for you to connect your wallet.", + "title": "Tap the WalletConnect button" + } + } + }, + "kaikas": { "extension": { "step1": { diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts index 1229df8268..d6ebfc2aae 100644 --- a/packages/rainbowkit/src/wallets/walletConnectors/index.ts +++ b/packages/rainbowkit/src/wallets/walletConnectors/index.ts @@ -21,6 +21,7 @@ import { frontierWallet } from './frontierWallet/frontierWallet'; import { gateWallet } from './gateWallet/gateWallet'; import { imTokenWallet } from './imTokenWallet/imTokenWallet'; import { injectedWallet } from './injectedWallet/injectedWallet'; +import { iopayWallet } from './iopayWallet/iopayWallet'; import { kaikasWallet } from './kaikasWallet/kaikasWallet'; import { krakenWallet } from './krakenWallet/krakenWallet'; import { kresusWallet } from './kresusWallet/kresusWallet'; @@ -79,6 +80,7 @@ export { gateWallet, imTokenWallet, injectedWallet, + iopayWallet, kaikasWallet, krakenWallet, kresusWallet, diff --git a/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.svg new file mode 100644 index 0000000000..e9619be10f --- /dev/null +++ b/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.ts new file mode 100644 index 0000000000..6a45cc3adc --- /dev/null +++ b/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.ts @@ -0,0 +1,65 @@ +import { isAndroid } from '../../../utils/isMobile'; +import { DefaultWalletOptions, Wallet } from '../../Wallet'; +import { getInjectedConnector } from '../../getInjectedConnector'; +import { getWalletConnectConnector } from '../../getWalletConnectConnector'; + +export type IoPayWalletOptions = DefaultWalletOptions; + +function isIoPayMobile(): boolean { + return ( + typeof navigator !== 'undefined' && + typeof navigator.userAgent !== 'undefined' && + (navigator?.userAgent.includes('IoPayAndroid') || + navigator?.userAgent.includes('IoPayiOs')) + ); +} + +export const iopayWallet = ({ + projectId, + walletConnectParameters, +}: IoPayWalletOptions): Wallet => ({ + id: 'iopay', + name: 'ioPay Wallet', + iconUrl: async () => (await import('./iopayWallet.svg')).default, + iconBackground: '#fff', + downloadUrls: { + android: + 'https://play.google.com/store/apps/details?id=io.iotex.iopay.gp&pli=1', + ios: 'https://apps.apple.com/us/app/iopay-multichain-crypto-wallet/id1478086371', + qrCode: 'https://iopay.me/', + }, + mobile: { + getUri: (uri: string) => { + return isAndroid() ? uri : `iopay://wc?uri=${encodeURIComponent(uri)}`; + }, + }, + qrCode: { + getUri: (uri: string) => uri, + instructions: { + learnMoreUrl: 'https://iopay.me/', + steps: [ + { + description: 'wallet_connectors.iopay.qr_code.step1.description', + step: 'install', + title: 'wallet_connectors.iopay.qr_code.step1.title', + }, + { + description: 'wallet_connectors.iopay.qr_code.step2.description', + step: 'create', + title: 'wallet_connectors.iopay.qr_code.step2.title', + }, + { + description: 'wallet_connectors.iopay.qr_code.step3.description', + step: 'scan', + title: 'wallet_connectors.iopay.qr_code.step3.title', + }, + ], + }, + }, + createConnector: isIoPayMobile() + ? getInjectedConnector({}) + : getWalletConnectConnector({ + projectId, + walletConnectParameters, + }), +}); diff --git a/site/data/en-US/docs/custom-wallet-list.mdx b/site/data/en-US/docs/custom-wallet-list.mdx index 65d3af0996..65a2014ba2 100644 --- a/site/data/en-US/docs/custom-wallet-list.mdx +++ b/site/data/en-US/docs/custom-wallet-list.mdx @@ -235,6 +235,12 @@ import { ledgerWallet } from '@rainbow-me/rainbowkit/wallets'; import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets'; ``` +#### ioPay Wallet + +```tsx +import { iopayWallet } from '@rainbow-me/rainbowkit/wallets'; +``` + #### Kraken Wallet ```tsx