feat: bybitWallet (#1874)

* feat: bybitWallet

* chore: change target url

* revert: change target url

---------

Co-authored-by: Magomed Khamidov <53529533+KosmosKey@users.noreply.github.com>

.changeset/gentle-elephants-fry.md

@@ -0,0 +1,7 @@
+---
+"@rainbow-me/rainbowkit": patch
+"example": patch
+"site": patch
+---
+
+Added Bybit Wallet support with `bybitWallet` wallet connector

packages/example/pages/_app.tsx

@@ -23,6 +23,7 @@ import {
   bitgetWallet,
   bitskiWallet,
   bloomWallet,
+  bybitWallet,
   clvWallet,
   coin98Wallet,
   coreWallet,
@@ -156,6 +157,7 @@ const config = getDefaultConfig({
         bitgetWallet,
         bitskiWallet,
         bloomWallet,
+        bybitWallet,
         clvWallet,
         coin98Wallet,
         coreWallet,

packages/rainbowkit/src/locales/en_US.json

@@ -340,6 +340,38 @@
       }
     },
 
+    "bybit": {
+      "qr_code": {
+        "step1": {
+          "description": "We recommend putting Bybit on your home screen for faster access to your wallet.",
+          "title": "Open the Bybit app"
+        },
+        "step2": {
+          "description": "You can easily backup your wallet using our backup feature on your phone.",
+          "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": "Click at the top right of your browser and pin Bybit Wallet for easy access.",
+          "title": "Install the Bybit Wallet extension"
+        },
+        "step2": {
+          "description": "Create a new wallet or import an existing one.",
+          "title": "Create or Import a wallet"
+        },
+        "step3": {
+          "description": "Once you set up Bybit Wallet, click below to refresh the browser and load up the extension.",
+          "title": "Refresh your browser"
+        }
+      }
+    },
+
     "coin98": {
       "qr_code": {
         "step1": {

packages/rainbowkit/src/wallets/walletConnectors/bybitWallet/bybitWallet.ts

@@ -0,0 +1,104 @@
+import { DefaultWalletOptions, Wallet } from '../../Wallet';
+import {
+  getInjectedConnector,
+  hasInjectedProvider,
+} from '../../getInjectedConnector';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+
+export type BifrostWalletOptions = DefaultWalletOptions;
+
+export const bybitWallet = ({
+  projectId,
+  walletConnectParameters,
+}: BifrostWalletOptions): Wallet => {
+  const isBybitInjected = hasInjectedProvider({
+    namespace: 'bybitWallet',
+  });
+
+  const shouldUseWalletConnect = !isBybitInjected;
+
+  const getUri = (uri: string) => {
+    return `bybitapp://open/route?targetUrl=by://web3/walletconnect/wc?uri=${encodeURIComponent(
+      uri,
+    )}`;
+  };
+
+  return {
+    id: 'bybit',
+    name: 'Bybit Wallet',
+    rdns: 'com.bybit',
+    iconUrl: async () => (await import('./bybitWallet.svg')).default,
+    installed: !shouldUseWalletConnect ? isBybitInjected : undefined,
+    iconBackground: '#000000',
+    downloadUrls: {
+      chrome:
+        'https://chromewebstore.google.com/detail/bybit-wallet/pdliaogehgdbhbnmkklieghmmjkpigpa',
+      browserExtension: 'https://www.bybit.com/en/web3',
+      android: 'https://play.google.com/store/apps/details?id=com.bybit.app',
+      ios: 'https://apps.apple.com/us/app/bybit-buy-trade-crypto/id1488296980',
+      mobile: 'https://www.bybit.com/en/web3',
+      qrCode: 'https://www.bybit.com/en/web3',
+    },
+    mobile: {
+      getUri: shouldUseWalletConnect ? getUri : undefined,
+    },
+    qrCode: shouldUseWalletConnect
+      ? {
+          getUri: (uri: string) => uri,
+          instructions: {
+            learnMoreUrl: 'https://www.bybit.com/en/web3',
+            steps: [
+              {
+                description:
+                  'wallet_connectors.bybit.qr_code.step1.description',
+                step: 'install',
+                title: 'wallet_connectors.bybit.qr_code.step1.title',
+              },
+              {
+                description:
+                  'wallet_connectors.bybit.qr_code.step2.description',
+                step: 'create',
+                title: 'wallet_connectors.bybit.qr_code.step2.title',
+              },
+              {
+                description:
+                  'wallet_connectors.bybit.qr_code.step3.description',
+                step: 'scan',
+                title: 'wallet_connectors.bybit.qr_code.step3.title',
+              },
+            ],
+          },
+        }
+      : undefined,
+    extension: {
+      instructions: {
+        learnMoreUrl: 'https://www.bybit.com/en/web3',
+        steps: [
+          {
+            description: 'wallet_connectors.bybit.extension.step1.description',
+            step: 'install',
+            title: 'wallet_connectors.bybit.extension.step1.title',
+          },
+          {
+            description: 'wallet_connectors.bybit.extension.step2.description',
+            step: 'create',
+            title: 'wallet_connectors.bybit.extension.step2.title',
+          },
+          {
+            description: 'wallet_connectors.bybit.extension.step3.description',
+            step: 'refresh',
+            title: 'wallet_connectors.bybit.extension.step3.title',
+          },
+        ],
+      },
+    },
+    createConnector: shouldUseWalletConnect
+      ? getWalletConnectConnector({
+          projectId,
+          walletConnectParameters,
+        })
+      : getInjectedConnector({
+          namespace: 'bybitWallet',
+        }),
+  };
+};

packages/rainbowkit/src/wallets/walletConnectors/index.ts

@@ -4,6 +4,7 @@ import { bitgetWallet } from './bitgetWallet/bitgetWallet';
 import { bitskiWallet } from './bitskiWallet/bitskiWallet';
 import { bloomWallet } from './bloomWallet/bloomWallet';
 import { braveWallet } from './braveWallet/braveWallet';
+import { bybitWallet } from './bybitWallet/bybitWallet';
 import { clvWallet } from './clvWallet/clvWallet';
 import { coin98Wallet } from './coin98Wallet/coin98Wallet';
 import { coinbaseWallet } from './coinbaseWallet/coinbaseWallet';
@@ -50,6 +51,7 @@ export {
   bitgetWallet,
   bitskiWallet,
   bloomWallet,
+  bybitWallet,
   braveWallet,
   clvWallet,
   coin98Wallet,

site/data/en-US/docs/custom-wallet-list.mdx

@@ -128,6 +128,12 @@ import { bitskiWallet } from '@rainbow-me/rainbowkit/wallets';
 import { bloomWallet } from '@rainbow-me/rainbowkit/wallets';
 ```
 
+#### Bybit Wallet
+
+```tsx
+import { bybitWallet } from '@rainbow-me/rainbowkit/wallets';
+```
+
 #### Brave Wallet
 
 ```tsx