feat: subWallet support (#1564)

* feat: add SubWallet wallet feat: update change set feat: update custom-wallet-list feat: add WalletConnect and Mobile for SubWallet feat: fix wrong logo path * fix: changeset * fix: rebase * fix: i18n * fix: ordering * fix: i18n key * fix: changeset * fix: i18n keys --------- Co-authored-by: S2kael <laiducminh1002@gmail.com>
rainbow-me · Oct 23, 2023 · efb8566 · efb8566 · vercel · Oct 23, 2023
1 parent b0022ae
commit efb8566
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 0 deletions.
diff --git a/.changeset/empty-bottles-sort.md b/.changeset/empty-bottles-sort.md
@@ -0,0 +1,23 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+SubWallet Support
+
+**Example usage**
+
+```ts
+import {
+  getDefaultWallets,
+  connectorsForWallets,
+} from '@rainbow-me/rainbowkit';
+import { subWallet } from '@rainbow-me/rainbowkit/wallets';
+const { wallets } = getDefaultWallets({ appName, chains, projectId });
+const connectors = connectorsForWallets([
+  ...wallets,
+  {
+    groupName: 'Other',
+    wallets: [subWallet({ chains, projectId })],
+  },
+]);
+```
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -39,6 +39,7 @@ import {
   rabbyWallet,
   safeheronWallet,
   safepalWallet,
+  subWallet,
   tahoWallet,
   talismanWallet,
   tokenPocketWallet,
@@ -135,6 +136,7 @@ const connectors = connectorsForWallets([
       rabbyWallet({ chains }),
       safeheronWallet({ chains }),
       safepalWallet({ chains, projectId }),
+      subWallet({ chains, projectId }),
       tahoWallet({ chains }),
       talismanWallet({ chains }),
       tokenPocketWallet({ chains, projectId }),

diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json
@@ -855,6 +855,37 @@
           "description": "Once you set up your wallet, click below to refresh the browser and load up the extension."
         }
       }
+    },
+
+    "subwallet": {
+      "extension": {
+        "step1": {
+          "title": "Install the SubWallet extension",
+          "description": "We recommend pinning SubWallet to your taskbar for quicker access to your wallet."
+        },
+        "step2": {
+          "title": "Create or Import a Wallet",
+          "description": "Be sure to back up your wallet using a secure method. Never share your recovery phrase with anyone."
+        },
+        "step3": {
+          "title": "Refresh your browser",
+          "description": "Once you set up your wallet, click below to refresh the browser and load up the extension."
+        }
+      },
+      "qr_code": {
+        "step1": {
+          "title": "Open the SubWallet app",
+          "description": "We recommend putting SubWallet on your home screen for quicker access."
+        },
+        "step2": {
+          "title": "Create or Import a Wallet",
+          "description": "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone."
+        },
+        "step3": {
+          "title": "Tap the scan button",
+          "description": "After you scan, a connection prompt will appear for you to connect your wallet."
+        }
+      }
     }
   }
 }
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -26,6 +26,7 @@ import { rainbowWallet } from './rainbowWallet/rainbowWallet';
 import { safeWallet } from './safeWallet/safeWallet';
 import { safeheronWallet } from './safeheronWallet/safeheronWallet';
 import { safepalWallet } from './safepalWallet/safepalWallet';
+import { subWallet } from './subWallet/subWallet';
 import { tahoWallet } from './tahoWallet/tahoWallet';
 import { talismanWallet } from './talismanWallet/talismanWallet';
 import { tokenPocketWallet } from './tokenPocketWallet/tokenPocketWallet';
@@ -66,6 +67,7 @@ export {
   safeWallet,
   safeheronWallet,
   safepalWallet,
+  subWallet,
   tahoWallet,
   talismanWallet,
   tokenPocketWallet,

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/subWallet/subWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/subWallet/subWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/subWallet/subWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/subWallet/subWallet.ts
@@ -0,0 +1,152 @@
+import type { InjectedConnectorOptions } from '@wagmi/core/connectors/injected';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { getWalletConnectUri } from '../../../utils/getWalletConnectUri';
+import { InstructionStepName, Wallet } from '../../Wallet';
+import {
+  WalletConnectConnectorOptions,
+  getWalletConnectConnector,
+} from '../../getWalletConnectConnector';
+
+declare global {
+  interface Window {
+    SubWallet: Window['ethereum'];
+  }
+}
+
+export interface SubWalletOptions {
+  projectId: string;
+  chains: Chain[];
+  walletConnectVersion?: '2';
+  walletConnectOptions?: WalletConnectConnectorOptions;
+}
+
+const getSubWalletInjectedProvider = (): Window['ethereum'] => {
+  if (typeof window === 'undefined') return;
+  return window.SubWallet;
+};
+
+export const subWallet = ({
+  chains,
+  projectId,
+  walletConnectOptions,
+  walletConnectVersion = '2',
+  ...options
+}: SubWalletOptions & InjectedConnectorOptions): Wallet => {
+  const isSubWalletInjected = Boolean(getSubWalletInjectedProvider());
+  const shouldUseWalletConnect = !isSubWalletInjected;
+
+  return {
+    id: 'subwallet',
+    name: 'SubWallet',
+    iconUrl: async () => (await import('./subWallet.svg')).default,
+    iconBackground: '#fff',
+    installed: isSubWalletInjected || undefined,
+    downloadUrls: {
+      browserExtension: 'https://www.subwallet.app/download',
+      chrome:
+        'https://chrome.google.com/webstore/detail/subwallet-polkadot-wallet/onhogfjeacnfoofkfgppdlbmlmnplgbn',
+      firefox: 'https://addons.mozilla.org/en-US/firefox/addon/subwallet/',
+      edge: 'https://chrome.google.com/webstore/detail/subwallet-polkadot-wallet/onhogfjeacnfoofkfgppdlbmlmnplgbn',
+      mobile: 'https://www.subwallet.app/download',
+      android:
+        'https://play.google.com/store/apps/details?id=app.subwallet.mobile',
+      ios: 'https://apps.apple.com/us/app/subwallet-polkadot-wallet/id1633050285',
+      qrCode: 'https://www.subwallet.app/download',
+    },
+    createConnector: () => {
+      const connector = shouldUseWalletConnect
+        ? getWalletConnectConnector({
+            projectId,
+            chains,
+            version: walletConnectVersion,
+            options: walletConnectOptions,
+          })
+        : new InjectedConnector({
+            chains,
+            options: {
+              getProvider: getSubWalletInjectedProvider,
+              ...options,
+            },
+          });
+
+      const getUriMobile = async () => {
+        const uri = await getWalletConnectUri(connector, walletConnectVersion);
+
+        return `subwallet://wc?uri=${encodeURIComponent(uri)}`;
+      };
+
+      const getUriQR = async () => {
+        return await getWalletConnectUri(connector, walletConnectVersion);
+      };
+
+      const mobileConnector = {
+        getUri: shouldUseWalletConnect ? getUriMobile : undefined,
+      };
+
+      let qrConnector = undefined;
+
+      if (shouldUseWalletConnect) {
+        qrConnector = {
+          getUri: getUriQR,
+          instructions: {
+            learnMoreUrl: 'https://www.subwallet.app/',
+            steps: [
+              {
+                description:
+                  'wallet_connectors.subwallet.qr_code.step1.description',
+                step: 'install' as InstructionStepName,
+                title: 'wallet_connectors.subwallet.qr_code.step1.title',
+              },
+              {
+                description:
+                  'wallet_connectors.subwallet.qr_code.step2.description',
+                step: 'create' as InstructionStepName,
+                title: 'wallet_connectors.subwallet.qr_code.step2.title',
+              },
+              {
+                description:
+                  'wallet_connectors.subwallet.qr_code.step3.description',
+                step: 'scan' as InstructionStepName,
+                title: 'wallet_connectors.subwallet.qr_code.step3.title',
+              },
+            ],
+          },
+        };
+      }
+
+      const extensionConnector = {
+        instructions: {
+          learnMoreUrl: 'https://www.subwallet.app/',
+          steps: [
+            {
+              description:
+                'wallet_connectors.subwallet.extension.step1.description',
+              step: 'install' as InstructionStepName,
+              title: 'wallet_connectors.subwallet.extension.step1.title',
+            },
+            {
+              description:
+                'wallet_connectors.subwallet.extension.step2.description',
+              step: 'create' as InstructionStepName,
+              title: 'wallet_connectors.subwallet.extension.step2.title',
+            },
+            {
+              description:
+                'wallet_connectors.subwallet.extension.step3.description',
+              step: 'refresh' as InstructionStepName,
+              title: 'wallet_connectors.subwallet.extension.step3.title',
+            },
+          ],
+        },
+      };
+
+      return {
+        connector,
+        mobile: mobileConnector,
+        qrCode: qrConnector,
+        extension: extensionConnector,
+      };
+    },
+  };
+};
diff --git a/site/data/docs/custom-wallet-list.mdx b/site/data/docs/custom-wallet-list.mdx
@@ -394,6 +394,17 @@ safepalWallet(options: {
 });
 ```
 
+#### SubWallet
+
+```tsx
+import { subWallet } from '@rainbow-me/rainbowkit/wallets';
+
+subWallet(options: {
+  chains: Chain[];
+  projectId: string;
+});
+```
+
 #### Taho
 
 ```tsx