adding in mobile support for zeal

rainbow-me · Jun 28, 2024 · c87ebe8 · c87ebe8
1 parent 5065fdb
commit c87ebe8
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 37 deletions.
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,103 @@
-import { Wallet } from '../../Wallet';
 import {
-  getInjectedConnector,
-  hasInjectedProvider,
-} from '../../getInjectedConnector';
+	DefaultWalletOptions,
+	InstructionStepName,
+	Wallet,
+} from "../../Wallet";
+import {
+	getInjectedConnector,
+	hasInjectedProvider,
+} from "../../getInjectedConnector";
+import { getWalletConnectConnector } from "../../getWalletConnectConnector";
+
+export type ZealWalletOptions = DefaultWalletOptions;
+
+export const zealWallet = ({
+	projectId,
+	walletConnectParameters,
+}: ZealWalletOptions): Wallet => {
+	const isZealWalletInjected = hasInjectedProvider({ flag: "isZeal" });
+
+	const shouldUseWalletConnect = !isZealWalletInjected;
+
+	const getUriMobile = (uri: string) => {
+		return `zeal://wc?uri=${encodeURIComponent(uri)}`;
+	};
+
+	const getUriQR = (uri: string) => {
+		return uri;
+	};
 
-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',
-        },
-      ],
-    },
-  },
-  createConnector: getInjectedConnector({ flag: 'isZeal' }),
-});
+	return {
+		id: "zeal",
+		name: "Zeal",
+		iconUrl: async () => (await import("./zealWallet.svg")).default,
+		iconBackground: "#fff0",
+		iconAccent: "#00FFFF",
+		installed: hasInjectedProvider({ flag: "isZeal" }),
+		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 ? getUriMobile : undefined,
+		},
+		qrCode: shouldUseWalletConnect
+			? {
+					getUri: getUriQR,
+					instructions: {
+						learnMoreUrl: "https://zeal.app/",
+						steps: [
+							{
+								description: "wallet_connectors.zeal.qr_code.step1.description",
+								step: "install" as InstructionStepName,
+								title: "wallet_connectors.zeal.qr_code.step1.title",
+							},
+							{
+								description: "wallet_connectors.zeal.qr_code.step2.description",
+								step: "create" as InstructionStepName,
+								title: "wallet_connectors.zeal.qr_code.step2.title",
+							},
+							{
+								description: "wallet_connectors.zeal.qr_code.step3.description",
+								step: "scan" as InstructionStepName,
+								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" as InstructionStepName,
+						title: "wallet_connectors.zeal.extension.step1.title",
+					},
+					{
+						description: "wallet_connectors.zeal.extension.step2.description",
+						step: "create" as InstructionStepName,
+						title: "wallet_connectors.zeal.extension.step2.title",
+					},
+					{
+						description: "wallet_connectors.zeal.extension.step3.description",
+						step: "refresh" as InstructionStepName,
+						title: "wallet_connectors.zeal.extension.step3.title",
+					},
+				],
+			},
+		},
+		createConnector: shouldUseWalletConnect
+			? getWalletConnectConnector({
+					projectId,
+					walletConnectParameters,
+			  })
+			: getInjectedConnector({ flag: "isZeal" }),
+	};
+};