feat: add imToken to available wallet (#325)

* feat: add  to available wallet

* Update packages/rainbowkit/src/wallets/walletConnectors/imToken/imToken.ts

Co-authored-by: Nick Beattie <nick@nickbytes.com>

* chore: remove from coolmode docs

* fix: use color instead of transparent

* chore: update imtoken svg

* chore: update imToken svg for site

* chore: add changeset for imToken wallet

Co-authored-by: Nick Beattie <nick@nickbytes.com>

.changeset/quiet-tomatoes-compete.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Adds imToken to available wallets

packages/example/pages/_app.tsx

@@ -47,6 +47,7 @@ const connectors = connectorsForWallets([
     wallets: [
       wallet.argent({ chains }),
       wallet.trust({ chains }),
+      wallet.imToken({ chains }),
       wallet.ledger({ chains }),
     ],
   },

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

@@ -0,0 +1,69 @@
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
+import { Chain } from '../../../components/RainbowKitProvider/RainbowKitChainContext';
+import { rpcUrlsForChains } from '../../../utils/rpcUrlsForChains';
+import { Wallet } from '../../Wallet';
+
+export interface ImTokenOptions {
+  chains: Chain[];
+}
+
+export const imToken = ({ chains }: ImTokenOptions): Wallet => ({
+  id: 'imToken',
+  name: 'imToken',
+  iconUrl: async () => (await import('./imToken.svg')).default,
+  iconBackground: '#098de6',
+  downloadUrls: {
+    android: 'https://play.google.com/store/apps/details?id=im.token.app',
+    ios: 'https://itunes.apple.com/us/app/imtoken2/id1384798940',
+    qrCode: 'https://token.im/download',
+  },
+  createConnector: () => {
+    const rpc = rpcUrlsForChains(chains);
+    const connector = new WalletConnectConnector({
+      chains,
+      options: {
+        qrcode: false,
+        rpc,
+      },
+    });
+    return {
+      connector,
+      mobile: {
+        getUri: async () => {
+          const { uri } = (await connector.getProvider()).connector;
+          return `imtokenv2://wc?uri=${encodeURIComponent(uri)}`;
+        },
+      },
+      qrCode: {
+        getUri: async () => (await connector.getProvider()).connector.uri,
+        instructions: {
+          learnMoreUrl:
+            typeof window !== 'undefined' &&
+            window.navigator.language.includes('zh')
+              ? 'https://support.token.im/hc/zh-cn/categories/360000925393'
+              : 'https://support.token.im/hc/en-us/categories/360000925393',
+          steps: [
+            {
+              description:
+                'Put imToken app on your home screen for faster access to your wallet.',
+              step: 'install',
+              title: 'Open the imToken app',
+            },
+            {
+              description: 'Create a new wallet or import an existing one.',
+              step: 'create',
+              title: 'Create or Import a Wallet',
+            },
+            {
+              description:
+                'Choose New Connection, then scan the QR code and confirm the prompt to connect.',
+              step: 'scan',
+              title: 'Tap Scanner Icon in top right corner',
+            },
+          ],
+        },
+      },
+    };
+  },
+});

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

@@ -1,5 +1,6 @@
 import { argent } from './argent/argent';
 import { coinbase } from './coinbase/coinbase';
+import { imToken } from './imToken/imToken';
 import { injected } from './injected/injected';
 import { ledger } from './ledger/ledger';
 import { metaMask } from './metaMask/metaMask';
@@ -10,6 +11,7 @@ import { walletConnect } from './walletConnect/walletConnect';
 export const wallet = {
   argent,
   coinbase,
+  imToken,
   injected,
   ledger,
   metaMask,

site/components/Provider/Provider.tsx

@@ -27,6 +27,7 @@ const connectors = connectorsForWallets([
     wallets: [
       wallet.argent({ chains }),
       wallet.trust({ chains }),
+      wallet.imToken({ chains }),
       wallet.ledger({ chains }),
     ],
   },

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

@@ -168,6 +168,16 @@ wallet.trust(options: {
 });
 ```
 
+#### imToken
+
+```tsx
+import { wallet } from '@rainbow-me/rainbowkit';
+
+wallet.imToken(options: {
+  chains: Chain[];
+});
+```
+
 #### WalletConnect
 
 This is a fallback wallet option designed for other WalletConnect-based wallets that haven’t been provided by another wallet in the list.