feat: iopayWallet (#2138)

* feat: iopayWallet * fix: global navigator * chore: tweak * revert: rename iopayWallet to ioPayWallet --------- Co-authored-by: MK <[email protected]>
rainbow-me · Aug 15, 2024 · d9ad6f0 · d9ad6f0
1 parent 675f9dd
commit d9ad6f0
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/iopayWallet/iopayWallet.ts 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
@@ -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