feat: okxWallet (#1107)

.changeset/thin-turkeys-shave.md

@@ -0,0 +1,23 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+OKX Wallet Support
+
+**Example usage**
+
+```ts
+import {
+  getDefaultWallets,
+  connectorsForWallets,
+} from '@rainbow-me/rainbowkit';
+import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
+const { wallets } = getDefaultWallets({ appName, chains });
+const connectors = connectorsForWallets([
+  ...wallets,
+  {
+    groupName: 'Other',
+    wallets: [okxWallet({ chains })],
+  },
+]);
+```

packages/example/pages/_app.tsx

@@ -20,6 +20,7 @@ import {
   imTokenWallet,
   ledgerWallet,
   mewWallet,
+  okxWallet,
   omniWallet,
   trustWallet,
 } from '@rainbow-me/rainbowkit/wallets';
@@ -111,12 +112,13 @@ const connectors = connectorsForWallets([
     groupName: 'Other',
     wallets: [
       argentWallet({ chains }),
+      bitskiWallet({ chains }),
       imTokenWallet({ chains }),
       ledgerWallet({ chains }),
       mewWallet({ chains }),
+      okxWallet({ chains }),
       omniWallet({ chains }),
       trustWallet({ chains }),
-      bitskiWallet({ chains }),
     ],
   },
 ]);

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

@@ -7,6 +7,7 @@ import { injectedWallet } from './injectedWallet/injectedWallet';
 import { ledgerWallet } from './ledgerWallet/ledgerWallet';
 import { metaMaskWallet } from './metaMaskWallet/metaMaskWallet';
 import { mewWallet } from './mewWallet/mewWallet';
+import { okxWallet } from './okxWallet/okxWallet';
 import { omniWallet } from './omniWallet/omniWallet';
 import { rainbowWallet } from './rainbowWallet/rainbowWallet';
 import { safeWallet } from './safeWallet/safeWallet';
@@ -27,5 +28,6 @@ export {
   rainbowWallet,
   safeWallet,
   trustWallet,
+  okxWallet,
   walletConnectWallet,
 };

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

@@ -0,0 +1,119 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import type { InjectedConnectorOptions } from '@wagmi/core/connectors/injected';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { isAndroid } from '../../../utils/isMobile';
+import { Wallet } from '../../Wallet';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+
+export interface OKXWalletOptions {
+  chains: Chain[];
+}
+
+export const okxWallet = ({
+  chains,
+  ...options
+}: OKXWalletOptions & InjectedConnectorOptions): Wallet => {
+  // `isOkxWallet` or `isOKExWallet` needs to be added to the wagmi `Ethereum` object
+  const isOKXInjected =
+    typeof window !== 'undefined' &&
+    // @ts-expect-error
+    typeof window.okxwallet !== 'undefined';
+
+  const shouldUseWalletConnect = !isOKXInjected;
+
+  return {
+    id: 'okx',
+    name: 'OKX Wallet',
+    iconUrl: async () => (await import('./okxWallet.svg')).default,
+    iconAccent: '#000',
+    iconBackground: '#000',
+    downloadUrls: {
+      browserExtension:
+        'https://chrome.google.com/webstore/detail/okx-wallet/mcohilncbfahbmgdjkbpemcciiolgcge',
+      android:
+        'https://play.google.com/store/apps/details?id=com.okinc.okex.gp',
+      ios: 'https://itunes.apple.com/app/id1327268470?mt=8',
+      qrCode: 'https://www.okx.com/web3',
+    },
+    createConnector: () => {
+      const connector = shouldUseWalletConnect
+        ? getWalletConnectConnector({ chains })
+        : new InjectedConnector({
+            chains,
+            options: {
+              // @ts-expect-error
+              getProvider: () => window.okxwallet,
+              ...options,
+            },
+          });
+
+      return {
+        connector,
+        mobile: {
+          getUri: shouldUseWalletConnect
+            ? async () => {
+                const { uri } = (await connector.getProvider()).connector;
+                return isAndroid()
+                  ? uri
+                  : `okex://main/wc?uri=${encodeURIComponent(uri)}`;
+              }
+            : undefined,
+        },
+        qrCode: shouldUseWalletConnect
+          ? {
+              getUri: async () => (await connector.getProvider()).connector.uri,
+              instructions: {
+                learnMoreUrl: 'https://www.okx.com/web3/',
+                steps: [
+                  {
+                    description:
+                      'We recommend putting OKX Wallet on your home screen for quicker access.',
+                    step: 'install',
+                    title: 'Open the OKX Wallet app',
+                  },
+                  {
+                    description:
+                      'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
+                    step: 'create',
+                    title: 'Create or Import a Wallet',
+                  },
+                  {
+                    description:
+                      'After you scan, a connection prompt will appear for you to connect your wallet.',
+                    step: 'scan',
+                    title: 'Tap the scan button',
+                  },
+                ],
+              },
+            }
+          : undefined,
+        extension: {
+          learnMoreUrl: 'https://www.okx.com/web3/',
+          instructions: {
+            steps: [
+              {
+                description:
+                  'We recommend pinning OKX Wallet to your taskbar for quicker access to your wallet.',
+                step: 'install',
+                title: 'Install the OKX Wallet extension',
+              },
+              {
+                description:
+                  'Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.',
+                step: 'create',
+                title: 'Create or Import a Wallet',
+              },
+              {
+                description:
+                  'Once you set up your wallet, click below to refresh the browser and load up the extension.',
+                step: 'refresh',
+                title: 'Refresh your browser',
+              },
+            ],
+          },
+        },
+      };
+    },
+  };
+};

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

@@ -156,6 +156,16 @@ ledgerWallet(options: {
 });
 ```
 
+#### imToken
+
+```tsx
+import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
+
+imTokenWallet(options: {
+  chains: Chain[];
+});
+```
+
 #### MetaMask
 
 ```tsx
@@ -175,6 +185,16 @@ mewWallet(options: {
 });
 ```
 
+#### OKX Wallet
+
+```tsx
+import { okxWallet } from '@rainbow-me/rainbowkit/wallets';
+
+okxWallet(options: {
+  chains: Chain[];
+});
+```
+
 #### Omni
 
 ```tsx
@@ -215,16 +235,6 @@ trustWallet(options: {
 });
 ```
 
-#### imToken
-
-```tsx
-import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
-
-imTokenWallet(options: {
-  chains: Chain[];
-});
-```
-
 ### Examples
 
 #### Ordering