adding in mobile support for zeal (#2068)

* adding in mobile support for zeal * chore: tweak * chore: changeset --------- Co-authored-by: graadient <no email> Co-authored-by: MK <mago.khamidov@gmail.com>
rainbow-me · Jul 2, 2024 · b530c80 · b530c80
1 parent 57cae39
commit b530c80
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 33 deletions.
diff --git a/.changeset/dirty-guests-love.md b/.changeset/dirty-guests-love.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Added mobile support for `zealWallet` wallet connector
diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json
@@ -1098,6 +1098,20 @@
     },
 
     "zeal": {
+      "qr_code": {
+        "step1": {
+          "title": "Open the Zeal app",
+          "description": "Add Zeal Wallet to your home screen for faster access to your wallet."
+        },
+        "step2": {
+          "title": "Create or Import a Wallet",
+          "description": "Create a new wallet or import an existing one."
+        },
+        "step3": {
+          "title": "Tap the QR icon and scan",
+          "description": "Tap the QR icon on your homescreen, scan the code and confirm the prompt to connect."
+        }
+      },
       "extension": {
         "step1": {
           "title": "Install the Zeal extension",

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/zealWallet/zealWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/zealWallet/zealWallet.ts
@@ -1,39 +1,95 @@
-import { Wallet } from '../../Wallet';
+import { DefaultWalletOptions, Wallet } from '../../Wallet';
 import {
   getInjectedConnector,
   hasInjectedProvider,
 } from '../../getInjectedConnector';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
 
-export const zealWallet = (): Wallet => ({
-  id: 'zeal',
-  name: 'Zeal',
-  iconUrl: async () => (await import('./zealWallet.svg')).default,
-  iconBackground: '#fff0',
-  installed: hasInjectedProvider({ flag: 'isZeal' }),
-  downloadUrls: {
-    browserExtension: 'https://zeal.app',
-  },
-  extension: {
-    instructions: {
-      learnMoreUrl: 'https://zeal.app/',
-      steps: [
-        {
-          description: 'wallet_connectors.zeal.extension.step1.description',
-          step: 'install',
-          title: 'wallet_connectors.zeal.extension.step1.title',
-        },
-        {
-          description: 'wallet_connectors.zeal.extension.step2.description',
-          step: 'create',
-          title: 'wallet_connectors.zeal.extension.step2.title',
-        },
-        {
-          description: 'wallet_connectors.zeal.extension.step3.description',
-          step: 'refresh',
-          title: 'wallet_connectors.zeal.extension.step3.title',
-        },
-      ],
+export type ZealWalletOptions = DefaultWalletOptions;
+
+export const zealWallet = ({
+  projectId,
+  walletConnectParameters,
+}: ZealWalletOptions): Wallet => {
+  const isZealWalletInjected = hasInjectedProvider({ flag: 'isZeal' });
+
+  const shouldUseWalletConnect = !isZealWalletInjected;
+
+  return {
+    id: 'zeal',
+    name: 'Zeal',
+    rdns: 'app.zeal',
+    iconUrl: async () => (await import('./zealWallet.svg')).default,
+    iconBackground: '#fff0',
+    iconAccent: '#00FFFF',
+    downloadUrls: {
+      browserExtension: 'https://zeal.app',
+      chrome:
+        'https://chromewebstore.google.com/detail/zeal-wallet/heamnjbnflcikcggoiplibfommfbkjpj',
+      android: 'https://play.google.com/store/apps/details?id=app.zeal.wallet',
+      ios: 'https://testflight.apple.com/join/MP72Ytw8',
+      mobile: 'https://zeal.app',
+      qrCode: 'https://zeal.app',
+    },
+    mobile: {
+      getUri: shouldUseWalletConnect
+        ? (uri: string) => {
+            return `zeal://wc?uri=${encodeURIComponent(uri)}`;
+          }
+        : undefined,
+    },
+    qrCode: shouldUseWalletConnect
+      ? {
+          getUri: (uri: string) => uri,
+          instructions: {
+            learnMoreUrl: 'https://zeal.app',
+            steps: [
+              {
+                description: 'wallet_connectors.zeal.qr_code.step1.description',
+                step: 'install',
+                title: 'wallet_connectors.zeal.qr_code.step1.title',
+              },
+              {
+                description: 'wallet_connectors.zeal.qr_code.step2.description',
+                step: 'create',
+                title: 'wallet_connectors.zeal.qr_code.step2.title',
+              },
+              {
+                description: 'wallet_connectors.zeal.qr_code.step3.description',
+                step: 'scan',
+                title: 'wallet_connectors.zeal.qr_code.step3.title',
+              },
+            ],
+          },
+        }
+      : undefined,
+    extension: {
+      instructions: {
+        learnMoreUrl: 'https://zeal.app',
+        steps: [
+          {
+            description: 'wallet_connectors.zeal.extension.step1.description',
+            step: 'install',
+            title: 'wallet_connectors.zeal.extension.step1.title',
+          },
+          {
+            description: 'wallet_connectors.zeal.extension.step2.description',
+            step: 'create',
+            title: 'wallet_connectors.zeal.extension.step2.title',
+          },
+          {
+            description: 'wallet_connectors.zeal.extension.step3.description',
+            step: 'refresh',
+            title: 'wallet_connectors.zeal.extension.step3.title',
+          },
+        ],
+      },
     },
-  },
-  createConnector: getInjectedConnector({ flag: 'isZeal' }),
-});
+    createConnector: shouldUseWalletConnect
+      ? getWalletConnectConnector({
+          projectId,
+          walletConnectParameters,
+        })
+      : getInjectedConnector({ flag: 'isZeal' }),
+  };
+};