feat: clvWallet support (#1563)

* feat: CLV Wallet connector * fix: icon * fix: imports * fix: reorder connector keys * fix: i18n * fix: qr code instructions --------- Co-authored-by: Sophie <sophie4140@outlook.com>
rainbow-me · Oct 23, 2023 · e41103f · e41103f · vercel · Oct 23, 2023
1 parent efb8566
commit e41103f
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 0 deletions.
diff --git a/.changeset/tidy-experts-sell.md b/.changeset/tidy-experts-sell.md
@@ -0,0 +1,23 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+CLV Wallet Support
+
+**Example usage**
+
+```ts
+import {
+  getDefaultWallets,
+  connectorsForWallets,
+} from '@rainbow-me/rainbowkit';
+import { clvWallet } from '@rainbow-me/rainbowkit/wallets';
+const { wallets } = getDefaultWallets({ appName, chains });
+const connectors = connectorsForWallets([
+  ...wallets,
+  {
+    groupName: 'Other',
+    wallets: [clvWallet({ chains, projectId })],
+  },
+]);
+```
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -21,6 +21,7 @@ import {
   bifrostWallet,
   bitgetWallet,
   bitskiWallet,
+  clvWallet,
   coin98Wallet,
   coreWallet,
   dawnWallet,
@@ -118,6 +119,7 @@ const connectors = connectorsForWallets([
       bifrostWallet({ chains, projectId }),
       bitgetWallet({ chains, projectId }),
       bitskiWallet({ chains }),
+      clvWallet({ chains, projectId }),
       coin98Wallet({ chains, projectId }),
       coreWallet({ chains, projectId }),
       dawnWallet({ chains }),

diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json
@@ -886,6 +886,37 @@
           "description": "After you scan, a connection prompt will appear for you to connect your wallet."
         }
       }
+    },
+
+    "clv": {
+      "extension": {
+        "step1": {
+          "title": "Install the CLV Wallet extension",
+          "description": "We recommend pinning CLV Wallet 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 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."
+        }
+      },
+      "qr_code": {
+        "step1": {
+          "title": "Open the CLV Wallet app",
+          "description": "We recommend putting CLV Wallet 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/clvWallet/clvWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/clvWallet/clvWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/clvWallet/clvWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/clvWallet/clvWallet.ts
@@ -0,0 +1,130 @@
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { getWalletConnectUri } from '../../../utils/getWalletConnectUri';
+import { Wallet } from '../../Wallet';
+import {
+  WalletConnectConnectorOptions,
+  getWalletConnectConnector,
+} from '../../getWalletConnectConnector';
+
+export interface CLVWalletOptions {
+  projectId: string;
+  chains: Chain[];
+  walletConnectVersion?: '2';
+  walletConnectOptions?: WalletConnectConnectorOptions;
+}
+
+declare global {
+  interface Window {
+    clover: any;
+  }
+}
+
+export const clvWallet = ({
+  chains,
+  projectId,
+  walletConnectOptions,
+  walletConnectVersion = '2',
+}: CLVWalletOptions): Wallet => {
+  const provider = typeof window !== 'undefined' && window['clover'];
+  const isCLVInjected = Boolean(provider);
+
+  const shouldUseWalletConnect = !isCLVInjected;
+
+  return {
+    id: 'clv',
+    name: 'CLV',
+    iconUrl: async () => (await import('./clvWallet.svg')).default,
+    iconBackground: '#fff',
+    iconAccent: '#BDFDE2',
+    installed: !shouldUseWalletConnect ? isCLVInjected : undefined,
+    downloadUrls: {
+      chrome:
+        'https://chrome.google.com/webstore/detail/clv-wallet/nhnkbkgjikgcigadomkphalanndcapjk',
+      ios: 'https://apps.apple.com/app/clover-wallet/id1570072858',
+      mobile: 'https://apps.apple.com/app/clover-wallet/id1570072858',
+      qrCode: 'https://clv.org/',
+    },
+    createConnector: () => {
+      const connector = shouldUseWalletConnect
+        ? getWalletConnectConnector({
+            chains,
+            options: walletConnectOptions,
+            projectId,
+            version: walletConnectVersion,
+          })
+        : new InjectedConnector({
+            chains,
+            options: {
+              getProvider: () => provider,
+            },
+          });
+
+      const getUri = async () => {
+        const uri = await getWalletConnectUri(connector, '2');
+        return uri;
+      };
+
+      return {
+        connector,
+        extension: {
+          instructions: {
+            learnMoreUrl: 'https://clv.org/',
+            steps: [
+              {
+                description:
+                  'wallet_connectors.clv.extension.step1.description',
+                step: 'install',
+                title: 'wallet_connectors.clv.extension.step1.title',
+              },
+              {
+                description:
+                  'wallet_connectors.clv.extension.step2.description',
+                step: 'create',
+                title: 'wallet_connectors.clv.extension.step2.title',
+              },
+              {
+                description:
+                  'wallet_connectors.clv.extension.step3.description',
+                step: 'refresh',
+                title: 'wallet_connectors.clv.extension.step3.title',
+              },
+            ],
+          },
+        },
+        mobile: {
+          getUri: shouldUseWalletConnect ? getUri : undefined,
+        },
+        qrCode: shouldUseWalletConnect
+          ? {
+              getUri: async () =>
+                getWalletConnectUri(connector, walletConnectVersion),
+              instructions: {
+                learnMoreUrl: 'https://clv.org/',
+                steps: [
+                  {
+                    description:
+                      'wallet_connectors.clv.qr_code.step1.description',
+                    step: 'install',
+                    title: 'wallet_connectors.clv.qr_code.step1.title',
+                  },
+                  {
+                    description:
+                      'wallet_connectors.clv.qr_code.step2.description',
+                    step: 'create',
+                    title: 'wallet_connectors.clv.qr_code.step2.title',
+                  },
+                  {
+                    description:
+                      'wallet_connectors.clv.qr_code.step3.description',
+                    step: 'scan',
+                    title: 'wallet_connectors.clv.qr_code.step3.title',
+                  },
+                ],
+              },
+            }
+          : undefined,
+      };
+    },
+  };
+};
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -3,6 +3,7 @@ import { bifrostWallet } from './bifrostWallet/bifrostWallet';
 import { bitKeepWallet, bitgetWallet } from './bitgetWallet/bitgetWallet';
 import { bitskiWallet } from './bitskiWallet/bitskiWallet';
 import { braveWallet } from './braveWallet/braveWallet';
+import { clvWallet } from './clvWallet/clvWallet';
 import { coin98Wallet } from './coin98Wallet/coin98Wallet';
 import { coinbaseWallet } from './coinbaseWallet/coinbaseWallet';
 import { coreWallet } from './coreWallet/coreWallet';
@@ -44,6 +45,7 @@ export {
   bitKeepWallet,
   bitskiWallet,
   braveWallet,
+  clvWallet,
   coin98Wallet,
   coinbaseWallet,
   coreWallet,

diff --git a/site/data/docs/custom-wallet-list.mdx b/site/data/docs/custom-wallet-list.mdx
@@ -166,6 +166,16 @@ braveWallet(options: {
 });
 ```
 
+### CLV Wallet
+```tsx
+import { clvWallet } from '@rainbow-me/rainbowkit/wallets';
+
+clvWallet(options: {
+  projectId: string;
+  chains: Chain[];
+});
+```
+
 #### Coinbase Wallet
 
 ```tsx