feat: oktoWallet support (#1403)

* feat: okto wallet support

* fix: update helper description & svg image

* fix: okto wallet svg file

* fix: docs

* chore: amend icon

* chore: changeset

* chore: name consistency

* fix: merge conflict

* fix: remove ios link

* Revert "fix: remove ios link"

This reverts commit 49ec0c6.

* fix: lint

* fix: okto i18n

* fix: i18n strings

---------

Co-authored-by: Asad Ahmed <[email protected]>
Co-authored-by: Daniel Sinclair <[email protected]>

.changeset/nine-pets-design.md

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

packages/example/pages/_app.tsx

@@ -33,6 +33,7 @@ import {
   imTokenWallet,
   ledgerWallet,
   mewWallet,
+  oktoWallet,
   okxWallet,
   omniWallet,
   oneKeyWallet,
@@ -131,6 +132,7 @@ const connectors = connectorsForWallets([
       imTokenWallet({ chains, projectId }),
       ledgerWallet({ chains, projectId }),
       mewWallet({ chains }),
+      oktoWallet({ chains, projectId }),
       okxWallet({ chains, projectId }),
       omniWallet({ chains, projectId }),
       oneKeyWallet({ chains }),

packages/rainbowkit/src/locales/en_US.json

@@ -917,6 +917,23 @@
           "description": "After you scan, a connection prompt will appear for you to connect your wallet."
         }
       }
+    },
+
+    "okto": {
+      "qr_code": {
+        "step1": {
+          "title": "Open the Okto app",
+          "description": "Add Okto to your home screen for quick access"
+        },
+        "step2": {
+          "title": "Create an MPC Wallet",
+          "description": "Create an account and generate a wallet"
+        },
+        "step3": {
+          "title": "Tap WalletConnect in Settings",
+          "description": "Tap the Scan QR icon at the top right and confirm the prompt to connect."
+        }
+      }
     }
   }
 }

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

@@ -18,6 +18,7 @@ import { injectedWallet } from './injectedWallet/injectedWallet';
 import { ledgerWallet } from './ledgerWallet/ledgerWallet';
 import { metaMaskWallet } from './metaMaskWallet/metaMaskWallet';
 import { mewWallet } from './mewWallet/mewWallet';
+import { oktoWallet } from './oktoWallet/oktoWallet';
 import { okxWallet } from './okxWallet/okxWallet';
 import { omniWallet } from './omniWallet/omniWallet';
 import { oneKeyWallet } from './oneKeyWallet/oneKeyWallet';
@@ -60,6 +61,7 @@ export {
   ledgerWallet,
   metaMaskWallet,
   mewWallet,
+  oktoWallet,
   okxWallet,
   omniWallet,
   oneKeyWallet,

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

@@ -0,0 +1,88 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { getWalletConnectUri } from '../../../utils/getWalletConnectUri';
+import { isAndroid } from '../../../utils/isMobile';
+import { Wallet } from '../../Wallet';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+import type {
+  WalletConnectConnectorOptions,
+  WalletConnectLegacyConnectorOptions,
+} from '../../getWalletConnectConnector';
+
+export interface OktoWalletLegacyOptions {
+  projectId?: string;
+  chains: Chain[];
+  walletConnectVersion: '1';
+  walletConnectOptions?: WalletConnectLegacyConnectorOptions;
+}
+
+export interface OktoWalletOptions {
+  projectId: string;
+  chains: Chain[];
+  walletConnectVersion?: '2';
+  walletConnectOptions?: WalletConnectConnectorOptions;
+}
+
+export const oktoWallet = ({
+  chains,
+  projectId,
+  walletConnectOptions,
+  walletConnectVersion = '2',
+}: OktoWalletLegacyOptions | OktoWalletOptions): Wallet => ({
+  id: 'Okto',
+  name: 'Okto',
+  iconUrl: async () => (await import('./oktoWallet.svg')).default,
+  iconBackground: '#fff',
+  downloadUrls: {
+    android:
+      'https://play.google.com/store/apps/details?id=im.okto.contractwalletclient',
+    ios: 'https://apps.apple.com/in/app/okto-wallet/id6450688229',
+    mobile: 'https://okto.tech/',
+    qrCode: 'https://okto.tech/',
+  },
+  createConnector: () => {
+    const connector = getWalletConnectConnector({
+      projectId,
+      chains,
+      version: walletConnectVersion,
+      options: walletConnectOptions,
+    });
+
+    return {
+      connector,
+      mobile: {
+        getUri: async () => {
+          const uri = await getWalletConnectUri(
+            connector,
+            walletConnectVersion,
+          );
+          return isAndroid() ? uri : `okto://wc?uri=${encodeURIComponent(uri)}`;
+        },
+      },
+      qrCode: {
+        getUri: async () =>
+          getWalletConnectUri(connector, walletConnectVersion),
+        instructions: {
+          learnMoreUrl: 'https://okto.tech/',
+          steps: [
+            {
+              description: 'wallet_connectors.okto.qr_code.step1.description',
+              step: 'install',
+              title: 'wallet_connectors.okto.qr_code.step1.title',
+            },
+            {
+              description: 'wallet_connectors.okto.qr_code.step2.description',
+              step: 'create',
+              title: 'wallet_connectors.okto.qr_code.step2.title',
+            },
+            {
+              description: 'wallet_connectors.okto.qr_code.step3.description',
+              step: 'scan',
+              title: 'wallet_connectors.okto.qr_code.step3.title',
+            },
+          ],
+        },
+      },
+    };
+  },
+});

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

@@ -311,6 +311,17 @@ mewWallet(options: {
 });
 ```
 
+#### Okto
+
+```tsx
+import { oktoWallet } from '@rainbow-me/rainbowkit/wallets';
+
+oktoWallet(options: {
+  projectId: string;
+  chains: Chain[];
+});
+```
+
 #### OKX Wallet
 
 ```tsx