feat: support berasigWallet (#2253)

* fix: lint * chore: changeset * feat: berasigWallet support feat: berasigWallet support fix: format revert locale files feat: support BerasigWallet fix: example dapp support chore: docs --------- Co-authored-by: thiennv-qng <[email protected]>
rainbow-me · Dec 2, 2024 · 9dd23d9 · 9dd23d9
1 parent f1ab60e
commit 9dd23d9
Show file tree

Hide file tree

Showing 8 changed files with 101 additions and 1 deletion.
diff --git a/.changeset/sour-lemons-dance.md b/.changeset/sour-lemons-dance.md
@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Added BeraSig support with `berasigWallet` wallet connector
diff --git a/packages/example/src/wagmi.ts b/packages/example/src/wagmi.ts
@@ -1,6 +1,7 @@
 import { type Chain, getDefaultConfig } from '@rainbow-me/rainbowkit';
 import {
   argentWallet,
+  berasigWallet,
   bestWallet,
   bifrostWallet,
   binanceWallet,
@@ -187,6 +188,7 @@ export const config = getDefaultConfig({
       groupName: 'Other',
       wallets: [
         argentWallet,
+        berasigWallet,
         bestWallet,
         bifrostWallet,
         binanceWallet,

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts b/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts
@@ -217,7 +217,7 @@ const chainMetadataByName: Record<ChainName, ChainMetadata | null> = {
   optimismKovan: { chainId: 69, ...optimismIcon },
   optimismSepolia: { chainId: 11155420, ...optimismIcon },
   polygon: { chainId: 137, name: 'Polygon', ...polygonIcon },
-  polygonAmoy: {chainId: 80002, ... polygonIcon},
+  polygonAmoy: { chainId: 80002, ...polygonIcon },
   polygonMumbai: { chainId: 80_001, ...polygonIcon },
   rinkeby: { chainId: 4, ...ethereumIcon },
   ropsten: { chainId: 3, ...ethereumIcon },

diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json
@@ -243,6 +243,23 @@
       }
     },
 
+    "berasig": {
+      "extension": {
+        "step1": {
+          "title": "Install the BeraSig extension",
+          "description": "We recommend pinning BeraSig to your taskbar for easier access to your wallet."
+        },
+        "step2": {
+          "title": "Create a Wallet",
+          "description": "Be sure to back up your wallet using a secure method. Never share your secret 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."
+        }
+      }
+    },
+
     "best": {
       "qr_code": {
         "step1": {

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/berasigWallet/berasigWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/berasigWallet/berasigWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/berasigWallet/berasigWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/berasigWallet/berasigWallet.ts
@@ -0,0 +1,67 @@
+import type { DefaultWalletOptions, Wallet } from '../../Wallet';
+import {
+  getInjectedConnector,
+  hasInjectedProvider,
+} from '../../getInjectedConnector';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+
+export type BerasigWalletOptions = DefaultWalletOptions;
+
+export const berasigWallet = ({
+  projectId,
+  walletConnectParameters,
+}: BerasigWalletOptions): Wallet => {
+  const isBerasigWalletInjected = hasInjectedProvider({
+    namespace: 'berasig.ethereum',
+  });
+
+  const shouldUseWalletConnect = !isBerasigWalletInjected;
+  return {
+    id: 'berasig',
+    name: 'BeraSig',
+    iconUrl: async () => (await import('./berasigWallet.svg')).default,
+    iconBackground: '#ffffff',
+    installed: isBerasigWalletInjected,
+    downloadUrls: {
+      android: 'https://play.google.com/store/apps/details?id=io.berasig.ios',
+      ios: 'https://apps.apple.com/us/app/berasig-wallet-on-berachain/id6502052535',
+      qrCode: 'https://berasig.com',
+      mobile: 'https://berasig.com',
+      browserExtension:
+        'https://chromewebstore.google.com/detail/berasig/ckedkkegjbflcfblcjklibnedmfjppbj',
+    },
+    extension: {
+      instructions: {
+        steps: [
+          {
+            description:
+              'wallet_connectors.berasig.extension.step1.description',
+            step: 'install',
+            title: 'wallet_connectors.berasig.extension.step1.title',
+          },
+          {
+            description:
+              'wallet_connectors.berasig.extension.step2.description',
+            step: 'create',
+            title: 'wallet_connectors.berasig.extension.step2.title',
+          },
+          {
+            description:
+              'wallet_connectors.berasig.extension.step3.description',
+            step: 'refresh',
+            title: 'wallet_connectors.berasig.extension.step3.title',
+          },
+        ],
+        learnMoreUrl: 'https://berasig.com',
+      },
+    },
+    createConnector: shouldUseWalletConnect
+      ? getWalletConnectConnector({
+          projectId,
+          walletConnectParameters,
+        })
+      : getInjectedConnector({
+          namespace: 'berasig.ethereum',
+        }),
+  };
+};
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -1,4 +1,5 @@
 import { argentWallet } from './argentWallet/argentWallet';
+import { berasigWallet } from './berasigWallet/berasigWallet';
 import { bestWallet } from './bestWallet/bestWallet';
 import { bifrostWallet } from './bifrostWallet/bifrostWallet';
 import { binanceWallet } from './binanceWallet/binanceWallet';
@@ -63,6 +64,7 @@ import { zerionWallet } from './zerionWallet/zerionWallet';
 
 export {
   argentWallet,
+  berasigWallet,
   bestWallet,
   bifrostWallet,
   binanceWallet,

diff --git a/site/data/en-US/docs/custom-wallet-list.mdx b/site/data/en-US/docs/custom-wallet-list.mdx
@@ -110,6 +110,12 @@ import { oneInchWallet } from '@rainbow-me/rainbowkit/wallets';
 import { argentWallet } from '@rainbow-me/rainbowkit/wallets';
 ```
 
+#### BeraSig
+
+```tsx
+import { berasigWallet } from '@rainbow-me/rainbowkit/wallets';
+```
+
 #### Best Wallet
 
 ```tsx