feat: roninWallet (#1787)

* feat: add roninWallet support * chore: lint * revert: add ronin chain * chore: change mobile getUri * chore: changeset * chore: change position for translation * chore: require projectId in docs * chore: tweak changset * fix: lint --------- Co-authored-by: Daniel Sinclair <d@niel.nyc>
rainbow-me · Feb 22, 2024 · 1e7d3f4 · 1e7d3f4
1 parent c16541a
commit 1e7d3f4
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 4 deletions.
diff --git a/.changeset/heavy-waves-clean.md b/.changeset/heavy-waves-clean.md
@@ -0,0 +1,7 @@
+---
+"@rainbow-me/rainbowkit": patch
+"example": patch
+"site": patch
+---
+
+Added Ronin Wallet support with `roninWallet` wallet connector
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -43,6 +43,7 @@ import {
   phantomWallet,
   rabbyWallet,
   ramperWallet,
+  roninWallet,
   safeheronWallet,
   safepalWallet,
   subWallet,
@@ -171,6 +172,7 @@ const config = getDefaultConfig({
         phantomWallet,
         rabbyWallet,
         ramperWallet,
+        roninWallet,
         safeheronWallet,
         safepalWallet,
         subWallet,

diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json
@@ -815,6 +815,38 @@
       }
     },
 
+    "ronin": {
+      "qr_code": {
+        "step1": {
+          "description": "We recommend putting Ronin Wallet on your home screen for quicker access.",
+          "title": "Open the Ronin Wallet app"
+        },
+        "step2": {
+          "description": "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.",
+          "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 scan button"
+        }
+      },
+
+      "extension": {
+        "step1": {
+          "description": "We recommend pinning Ronin Wallet to your taskbar for quicker access to your wallet.",
+          "title": "Install the Ronin Wallet extension"
+        },
+        "step2": {
+          "description": "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.",
+          "title": "Create or Import a Wallet"
+        },
+        "step3": {
+          "description": "Once you set up your wallet, click below to refresh the browser and load up the extension.",
+          "title": "Refresh your browser"
+        }
+      }
+    },
+
     "ramper": {
       "extension": {
         "step1": {

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -28,6 +28,7 @@ import { phantomWallet } from './phantomWallet/phantomWallet';
 import { rabbyWallet } from './rabbyWallet/rabbyWallet';
 import { rainbowWallet } from './rainbowWallet/rainbowWallet';
 import { ramperWallet } from './ramperWallet/ramperWallet';
+import { roninWallet } from './roninWallet/roninWallet';
 import { safeWallet } from './safeWallet/safeWallet';
 import { safeheronWallet } from './safeheronWallet/safeheronWallet';
 import { safepalWallet } from './safepalWallet/safepalWallet';
@@ -72,8 +73,9 @@ export {
   oneKeyWallet,
   phantomWallet,
   rabbyWallet,
-  ramperWallet,
   rainbowWallet,
+  ramperWallet,
+  roninWallet,
   safeWallet,
   safeheronWallet,
   safepalWallet,

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/roninWallet/roninWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/roninWallet/roninWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/roninWallet/roninWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/roninWallet/roninWallet.ts
@@ -0,0 +1,93 @@
+import { DefaultWalletOptions, Wallet } from '../../Wallet';
+import {
+  getInjectedConnector,
+  hasInjectedProvider,
+} from '../../getInjectedConnector';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+
+export type RoninWalletOptions = DefaultWalletOptions;
+
+export const roninWallet = ({
+  projectId,
+  walletConnectParameters,
+}: RoninWalletOptions): Wallet => {
+  const isRoninInjected = hasInjectedProvider({
+    namespace: 'ronin.provider',
+  });
+
+  return {
+    id: 'ronin',
+    name: 'Ronin Wallet',
+    iconUrl: async () => (await import('./roninWallet.svg')).default,
+    iconBackground: '#ffffff',
+    rdns: 'com.roninchain.wallet',
+    installed: isRoninInjected || undefined,
+    downloadUrls: {
+      android:
+        'https://play.google.com/store/apps/details?id=com.skymavis.genesis',
+      ios: 'https://apps.apple.com/us/app/ronin-wallet/id1592675001',
+      mobile: 'https://wallet.roninchain.com',
+      chrome:
+        'https://chrome.google.com/webstore/detail/ronin-wallet/fnjhmkhhmkbjkkabndcnnogagogbneec',
+      edge: 'https://microsoftedge.microsoft.com/addons/detail/ronin-wallet/kjmoohlgokccodicjjfebfomlbljgfhk',
+      firefox: 'https://addons.mozilla.org/firefox/addon/ronin-wallet',
+      browserExtension: 'https://wallet.roninchain.com/',
+      qrCode: 'https://wallet.roninchain.com/',
+    },
+    mobile: {
+      getUri: (uri: string) =>
+        `roninwallet://wc?uri=${encodeURIComponent(uri)}`,
+    },
+    qrCode: {
+      getUri: (uri: string) => uri,
+      instructions: {
+        learnMoreUrl: 'https://wallet.roninchain.com/',
+        steps: [
+          {
+            description: 'wallet_connectors.ronin.qr_code.step1.description',
+            step: 'install',
+            title: 'wallet_connectors.ronin.qr_code.step1.title',
+          },
+          {
+            description: 'wallet_connectors.ronin.qr_code.step2.description',
+            step: 'create',
+            title: 'wallet_connectors.ronin.qr_code.step2.title',
+          },
+          {
+            description: 'wallet_connectors.ronin.qr_code.step3.description',
+            step: 'scan',
+            title: 'wallet_connectors.ronin.qr_code.step3.title',
+          },
+        ],
+      },
+    },
+    extension: {
+      instructions: {
+        learnMoreUrl: 'https://wallet.roninchain.com/',
+        steps: [
+          {
+            description: 'wallet_connectors.ronin.extension.step1.description',
+            step: 'install',
+            title: 'wallet_connectors.ronin.extension.step1.title',
+          },
+          {
+            description: 'wallet_connectors.ronin.extension.step2.description',
+            step: 'create',
+            title: 'wallet_connectors.ronin.extension.step2.title',
+          },
+          {
+            description: 'wallet_connectors.ronin.extension.step3.description',
+            step: 'refresh',
+            title: 'wallet_connectors.ronin.extension.step3.title',
+          },
+        ],
+      },
+    },
+    createConnector: isRoninInjected
+      ? getInjectedConnector({ namespace: 'ronin.provider' })
+      : 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
@@ -326,6 +326,16 @@ import { rabbyWallet } from '@rainbow-me/rainbowkit/wallets';
 rabbyWallet();
 ```
 
+#### Rainbow
+
+```tsx
+import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
+
+rainbowWallet(options: {
+  projectId: string;
+});
+```
+
 #### Ramper Wallet
 
 ```tsx
@@ -334,12 +344,12 @@ import { ramperWallet } from '@rainbow-me/rainbowkit/wallets';
 ramperWallet();
 ```
 
-#### Rainbow
+#### Ronin Wallet
 
 ```tsx
-import { rainbowWallet } from '@rainbow-me/rainbowkit/wallets';
+import { roninWallet } from '@rainbow-me/rainbowkit/wallets';
 
-rainbowWallet(options: {
+roninWallet(options: {
   projectId: string;
 });
 ```