feat: kaikasWallet and klaytn chain (#1902)

* feat: kaikasWallet * chore: update download urls * feat: klaytn chain * chore: tweak * fix: alphabetic order * fix: alphabetic order * chore: format * chore: optimize kaikasWallet.svg and update wallet title name * chore: remove old changeset * chore: update and optimize kaikasWallet.svg * chore: alphabetical * chore: alphabetical * chore: resize klaytn.svg --------- Co-authored-by: Magomed Khamidov <[email protected]> Co-authored-by: Daniel Sinclair <[email protected]>
rainbow-me · Apr 4, 2024 · b11118f · b11118f
1 parent ec41346
commit b11118f
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 0 deletions.
diff --git a/.changeset/soft-tigers-flash.md b/.changeset/soft-tigers-flash.md
@@ -0,0 +1,7 @@
+---
+"@rainbow-me/rainbowkit": patch
+"example": patch
+"site": patch
+---
+
+Added Kaikas Wallet support with `kaikasWallet` wallet connector and added `klaytn` chain with `klaytnBaobab` testnet support.
diff --git a/packages/example/pages/_app.tsx b/packages/example/pages/_app.tsx
@@ -36,6 +36,7 @@ import {
   frontierWallet,
   gateWallet,
   imTokenWallet,
+  kaikasWallet,
   kresusWallet,
   ledgerWallet,
   mewWallet,
@@ -80,6 +81,8 @@ import {
   blastSepolia,
   bsc,
   holesky,
+  klaytn,
+  klaytnBaobab,
   mainnet,
   optimism,
   optimismSepolia,
@@ -139,6 +142,7 @@ const config = getDefaultConfig({
     zkSync,
     zetachain,
     ronin,
+    klaytn,
     ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true'
       ? [
           sepolia,
@@ -151,6 +155,7 @@ const config = getDefaultConfig({
           blastSepolia,
           avalancheFuji,
           zetachainAthensTestnet,
+          klaytnBaobab,
         ]
       : []),
   ],
@@ -178,6 +183,7 @@ const config = getDefaultConfig({
         gateWallet,
         imTokenWallet,
         kresusWallet,
+        kaikasWallet,
         ledgerWallet,
         mewWallet,
         oktoWallet,

diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/chainIcons/klaytn.svg b/packages/rainbowkit/src/components/RainbowKitProvider/chainIcons/klaytn.svg
diff --git a/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts b/packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts
@@ -21,6 +21,8 @@ type ChainName =
   | 'goerli'
   | 'hardhat'
   | 'holesky'
+  | 'klaytn'
+  | 'klaytnBaobab'
   | 'kovan'
   | 'localhost'
   | 'mainnet'
@@ -94,6 +96,11 @@ const hardhatIcon: IconMetadata = {
   iconUrl: async () => (await import('./chainIcons/hardhat.svg')).default,
 };
 
+const klaytnIcon: IconMetadata = {
+  iconBackground: 'transparent',
+  iconUrl: async () => (await import('./chainIcons/klaytn.svg')).default,
+};
+
 const optimismIcon: IconMetadata = {
   iconBackground: '#ff5a57',
   iconUrl: async () => (await import('./chainIcons/optimism.svg')).default,
@@ -148,6 +155,8 @@ const chainMetadataByName: Record<ChainName, ChainMetadata | null> = {
   hardhat: { chainId: 31_337, ...hardhatIcon },
   holesky: { chainId: 17000, ...ethereumIcon },
   kovan: { chainId: 42, ...ethereumIcon },
+  klaytn: { chainId: 8_217, name: 'Klaytn', ...klaytnIcon },
+  klaytnBaobab: { chainId: 1_001, name: 'Klaytn Baobab', ...klaytnIcon },
   localhost: { chainId: 1_337, ...ethereumIcon },
   mainnet: { chainId: 1, name: 'Ethereum', ...ethereumIcon },
   optimism: { chainId: 10, name: 'Optimism', ...optimismIcon },

diff --git a/packages/rainbowkit/src/locales/en_US.json b/packages/rainbowkit/src/locales/en_US.json
@@ -551,6 +551,37 @@
       }
     },
 
+    "kaikas": {
+      "extension": {
+        "step1": {
+          "description": "We recommend pinning Kaikas to your taskbar for quicker access to your wallet.",
+          "title": "Install the Kaikas extension"
+        },
+        "step2": {
+          "description": "Be sure to back up your wallet using a secure method. Never share your secret phrase with anyone.",
+          "title": "Create or Import a Wallet"
+        },
+        "step3": {
+          "description": "Once you set up your wallet, click below to refresh the browser and load up the extension.",
+          "title": "Refresh your browser"
+        }
+      },
+      "qr_code": {
+        "step1": {
+          "title": "Open the Kaikas app",
+          "description": "Put Kaikas app on your home screen for faster access to your wallet."
+        },
+        "step2": {
+          "title": "Create or Import a Wallet",
+          "description": "Create a new wallet or import an existing one."
+        },
+        "step3": {
+          "title": "Tap Scanner Icon in top right corner",
+          "description": "Choose New Connection, then scan the QR code and confirm the prompt to connect."
+        }
+      }
+    },
+
     "kresus": {
       "qr_code": {
         "step1": {

diff --git a/packages/rainbowkit/src/locales/ko_KR.json b/packages/rainbowkit/src/locales/ko_KR.json
@@ -474,6 +474,22 @@
         }
       }
     },
+    "kaikas": {
+      "extension": {
+        "step1": {
+          "description": "지갑에 더 빠르게 접근할 수 있도록 Kaikas Wallet을 작업 표시줄에 고정하는 것을 권장합니다.",
+          "title": "Kaikas Wallet 확장 프로그램을 설치하세요"
+        },
+        "step2": {
+          "description": "안전한 방법을 사용하여 지갑을 백업하세요. 비밀 문구는 절대로 누구와도 공유하지 마세요.",
+          "title": "지갑 만들기 또는 가져오기"
+        },
+        "step3": {
+          "description": "지갑을 설정한 후 아래를 클릭하여 브라우저를 새로고침하고 확장 프로그램을 로드하세요.",
+          "title": "브라우저 새로고침"
+        }
+      }
+    },
     "kresus": {
       "qr_code": {
         "step1": {

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/index.ts b/packages/rainbowkit/src/wallets/walletConnectors/index.ts
@@ -19,6 +19,7 @@ import { frontierWallet } from './frontierWallet/frontierWallet';
 import { gateWallet } from './gateWallet/gateWallet';
 import { imTokenWallet } from './imTokenWallet/imTokenWallet';
 import { injectedWallet } from './injectedWallet/injectedWallet';
+import { kaikasWallet } from './kaikasWallet/kaikasWallet';
 import { kresusWallet } from './kresusWallet/kresusWallet';
 import { ledgerWallet } from './ledgerWallet/ledgerWallet';
 import { metaMaskWallet } from './metaMaskWallet/metaMaskWallet';
@@ -70,6 +71,7 @@ export {
   gateWallet,
   imTokenWallet,
   injectedWallet,
+  kaikasWallet,
   kresusWallet,
   ledgerWallet,
   metaMaskWallet,

diff --git a/packages/rainbowkit/src/wallets/walletConnectors/kaikasWallet/kaikasWallet.svg b/packages/rainbowkit/src/wallets/walletConnectors/kaikasWallet/kaikasWallet.svg
diff --git a/packages/rainbowkit/src/wallets/walletConnectors/kaikasWallet/kaikasWallet.ts b/packages/rainbowkit/src/wallets/walletConnectors/kaikasWallet/kaikasWallet.ts
@@ -0,0 +1,99 @@
+import { DefaultWalletOptions, Wallet } from '../../Wallet';
+import {
+  getInjectedConnector,
+  hasInjectedProvider,
+} from '../../getInjectedConnector';
+import { getWalletConnectConnector } from '../../getWalletConnectConnector';
+
+export type KaikasWalletOptions = DefaultWalletOptions;
+
+export const kaikasWallet = ({
+  projectId,
+  walletConnectParameters,
+}: KaikasWalletOptions): Wallet => {
+  const isKaikasWalletInjected = hasInjectedProvider({
+    namespace: 'klaytn',
+  });
+
+  const shouldUseWalletConnect = !isKaikasWalletInjected;
+
+  const getUri = (uri: string) => {
+    return `kaikas://walletconnect?uri=${encodeURIComponent(uri)}`;
+  };
+
+  return {
+    id: 'kaikas',
+    name: 'Kaikas Wallet',
+    iconUrl: async () => (await import('./kaikasWallet.svg')).default,
+    installed: isKaikasWalletInjected || undefined,
+    iconBackground: '#fff',
+    downloadUrls: {
+      chrome:
+        'https://chromewebstore.google.com/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi',
+      browserExtension: 'https://app.kaikas.io',
+      qrCode: 'https://app.kaikas.io',
+      ios: 'https://apps.apple.com/us/app/kaikas-mobile-crypto-wallet/id1626107061',
+      android: 'https://play.google.com/store/apps/details?id=io.klutch.wallet',
+      mobile: 'https://app.kaikas.io',
+    },
+    mobile: { getUri: shouldUseWalletConnect ? getUri : undefined },
+    qrCode: shouldUseWalletConnect
+      ? {
+          getUri: (uri: string) => uri,
+          instructions: {
+            learnMoreUrl: 'https://kaikas.io',
+            steps: [
+              {
+                description:
+                  'wallet_connectors.kaikas.qr_code.step1.description',
+                step: 'install',
+                title: 'wallet_connectors.kaikas.qr_code.step1.title',
+              },
+              {
+                description:
+                  'wallet_connectors.kaikas.qr_code.step2.description',
+                step: 'create',
+                title: 'wallet_connectors.kaikas.qr_code.step2.title',
+              },
+              {
+                description:
+                  'wallet_connectors.kaikas.qr_code.step3.description',
+                step: 'refresh',
+                title: 'wallet_connectors.kaikas.qr_code.step3.title',
+              },
+            ],
+          },
+        }
+      : undefined,
+    extension: {
+      instructions: {
+        learnMoreUrl: 'https://kaikas.io',
+        steps: [
+          {
+            description: 'wallet_connectors.kaikas.extension.step1.description',
+            step: 'install',
+            title: 'wallet_connectors.kaikas.extension.step1.title',
+          },
+          {
+            description: 'wallet_connectors.kaikas.extension.step2.description',
+            step: 'create',
+            title: 'wallet_connectors.kaikas.extension.step2.title',
+          },
+          {
+            description: 'wallet_connectors.kaikas.extension.step3.description',
+            step: 'refresh',
+            title: 'wallet_connectors.kaikas.extension.step3.title',
+          },
+        ],
+      },
+    },
+    createConnector: shouldUseWalletConnect
+      ? getWalletConnectConnector({
+          projectId,
+          walletConnectParameters,
+        })
+      : getInjectedConnector({
+          namespace: 'klaytn',
+        }),
+  };
+};
diff --git a/site/data/en-US/docs/custom-wallet-list.mdx b/site/data/en-US/docs/custom-wallet-list.mdx
@@ -218,6 +218,12 @@ import { imTokenWallet } from '@rainbow-me/rainbowkit/wallets';
 import { kresusWallet } from '@rainbow-me/rainbowkit/wallets';
 ```
 
+#### Kaikas
+
+```tsx 
+import { kaikasWallet } from '@rainbow-me/rainbowkit/wallets';
+```
+
 #### MetaMask
 
 ```tsx