Merge pull request #4 from praveen-klaytn/dev

Added Kaikas Support

package.json

@@ -34,6 +34,11 @@
   "engines": {
     "node": ">=16"
   },
+  "browser": {
+    "fs": false,
+    "path": false,
+    "os": false
+  },
   "resolutions": {
     "@walletconnect/core": "^2.11.2",
     "@walletconnect/ethereum-provider": "^2.11.2",
@@ -79,6 +84,7 @@
     "@web3auth/mpc-core-kit": "^1.1.3",
     "blo": "^1.1.1",
     "bn.js": "^5.2.1",
+    "caver-js": "^1.11.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.30.0",
     "ethers": "^6.11.1",

src/hooks/wallets/consts.ts

@@ -6,6 +6,7 @@ export const enum WALLET_KEYS {
   COINBASE = 'COINBASE',
   LEDGER = 'LEDGER',
   TREZOR = 'TREZOR',
+  KAIKAS = 'KAIKAS',
 }
 
 // TODO: Check if undefined is needed as a return type, possibly couple this with WALLET_MODULES
@@ -17,6 +18,7 @@ export const CGW_NAMES: { [key in WALLET_KEYS]: string | undefined } = {
   [WALLET_KEYS.SOCIAL]: 'socialSigner',
   [WALLET_KEYS.LEDGER]: 'ledger',
   [WALLET_KEYS.TREZOR]: 'trezor',
+  [WALLET_KEYS.KAIKAS]: 'kaikas',
 }
 
 export const KAIKAS_SVG = `<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 66" width="72" height="66">

src/hooks/wallets/kaikasWallet.ts

@@ -0,0 +1,73 @@
+import type { WalletInit } from '@web3-onboard/common'
+import { createEIP1193Provider } from '@web3-onboard/common'
+import Caver from 'caver-js'
+import { KAIKAS_SVG } from './consts'
+
+export const createDownloadMessage = (walletLabel: string, download?: string | (() => void)): string => {
+  if (!download) return `Please switch to ${walletLabel} to continue`
+  if (typeof download === 'function') {
+    return `Please <a href="#" onclick="${() => download()}">install</a> or enable to ${walletLabel} to continue`
+  } else {
+    return `Please <a href="${download}" target="_blank">install</a> or enable to ${walletLabel} to continue`
+  }
+}
+
+function kaikasWallet(): WalletInit {
+  return () => {
+    return {
+      label: 'Kaikas',
+      injectedNamespace: 'klaytn',
+      getIcon: async () => KAIKAS_SVG,
+      getInterface: async (interfaceData: any) => {
+        const provider: any = window.klaytn
+        if (!provider) {
+          throw new Error(
+            createDownloadMessage(
+              'Kaikas',
+              'https://chromewebstore.google.com/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi',
+            ),
+          )
+        }
+        const chains = interfaceData.chains
+        const externalChainsCaver: any = {}
+        for (let i = 0; i < chains.length; i++) {
+          externalChainsCaver[chains[i].id] = new Caver(chains[i].publicRpcUrl)
+        }
+
+        const walletCaver = new Caver(provider)
+
+        return Promise.resolve({
+          provider: createEIP1193Provider(provider, {
+            eth_sendTransaction: async ({ baseRequest, params }: any) => {
+              let txninput: any = {
+                from: params[0].from,
+                to: params[0].to,
+                gas: params[0].gas,
+              }
+              if (params[0].data) {
+                txninput['data'] = params[0].data
+              }
+              if (params[0].value) {
+                txninput['value'] = params[0].value
+              }
+              let txndata = await walletCaver.klay.sendTransaction(txninput)
+              return txndata.transactionHash as string
+            },
+            eth_getBalance: async ({ params }: any) => {
+              let networkVersion = walletCaver.utils.toHex(provider.networkVersion)
+
+              let selectedAddress = ''
+              if (params && params.length > 0) {
+                selectedAddress = params[0]
+              }
+              // Browser Caver couldnt fetch balance of its own address. returning -1 instead. So using external caver.
+              let balance = await externalChainsCaver[networkVersion].klay.getBalance(selectedAddress)
+              return balance
+            },
+          }),
+        })
+      },
+    }
+  }
+}
+export default kaikasWallet

src/hooks/wallets/wallets.ts

@@ -9,9 +9,10 @@ import coinbaseModule from '@web3-onboard/coinbase'
 import walletConnect from '@web3-onboard/walletconnect'
 
 import e2eWalletModule from '@/tests/e2e-wallet'
-import { CGW_NAMES, WALLET_KEYS, KAIKAS_SVG } from './consts'
+import { CGW_NAMES, WALLET_KEYS } from './consts'
 import MpcModule from '@/services/mpc/SocialLoginModule'
 import { SOCIAL_WALLET_OPTIONS } from '@/services/mpc/config'
+import kaikasModule from './kaikasWallet'
 
 const prefersDarkMode = (): boolean => {
   return window?.matchMedia('(prefers-color-scheme: dark)')?.matches
@@ -40,40 +41,26 @@ const walletConnectV2 = (chain: ChainInfo) => {
   })
 }
 
-const KAIKAS_CUSTOM_MODULE = {
-  label: 'Kaikas',
-  injectedNamespace: 'klaytn',
-  checkProviderIdentity: ({ provider }: { provider: any }) => !!provider && !!provider['_kaikas'],
-  getIcon: () => KAIKAS_SVG,
-  getInterface: () => ({
-    provider: window.klaytn,
-  }),
-  platforms: ['desktop'],
-  externalUrl: 'https://app.kaikas.io/',
-}
-
 let walletFilter: any = {}
 for (let _walletName in ProviderLabel) {
   walletFilter[_walletName] = false
 }
 walletFilter['MetaMask'] = true
-walletFilter['Kaikas'] = false
 
 const WALLET_MODULES: { [key in WALLET_KEYS]: (chain: ChainInfo) => WalletInit } = {
   [WALLET_KEYS.INJECTED]: () =>
     injectedWalletModule({
-      /* @ts-ignore */
-      custom: [KAIKAS_CUSTOM_MODULE],
       /* @ts-ignore */
       filter: walletFilter,
-      displayUnavailable: ['Kaikas', ProviderLabel.MetaMask],
+      displayUnavailable: [ProviderLabel.MetaMask],
     }) as WalletInit,
   [WALLET_KEYS.WALLETCONNECT_V2]: (chain) => walletConnectV2(chain) as WalletInit,
   [WALLET_KEYS.DCENT]: () => dcentModule() as WalletInit,
   [WALLET_KEYS.COINBASE]: () => coinbaseModule({ darkMode: prefersDarkMode() }) as WalletInit,
   [WALLET_KEYS.SOCIAL]: (chain) => MpcModule(chain) as WalletInit,
   [WALLET_KEYS.LEDGER]: () => ledgerModule() as WalletInit,
   [WALLET_KEYS.TREZOR]: () => trezorModule({ appUrl: TREZOR_APP_URL, email: TREZOR_EMAIL }) as WalletInit,
+  [WALLET_KEYS.KAIKAS]: () => kaikasModule() as WalletInit,
 }
 
 export const getAllWallets = (chain: ChainInfo): WalletInits => {

src/service-workers/firebase-messaging/firebase-messaging-sw.ts

@@ -67,7 +67,7 @@ export function firebaseMessagingSw() {
     self.registration.showNotification(notification.title || '', {
       icon: ICON_PATH,
       body: notification.body,
-      image: notification.image,
+      // image: notification.image,
       data,
     })
   })

src/tests/e2e-wallet.ts

@@ -23,7 +23,7 @@ const e2eWalletModule = (rpcUri: ChainInfo['rpcUri']): WalletInit => {
 
         return {
           provider: createEIP1193Provider(provider.engine, {
-            eth_requestAccounts: async () => provider.getAddresses(),
+            // eth_requestAccounts: async () => provider.getAddresses(),
           }),
         }
       },

src/utils/wallets.ts

@@ -47,16 +47,23 @@ export const isSmartContractWallet = memoize(
 /* Check if the wallet is unlocked. */
 export const isWalletUnlocked = async (walletName: string): Promise<boolean | undefined> => {
   const METAMASK = 'MetaMask'
+  const KAIKAS = 'Kaikas'
 
   // Only MetaMask exposes a method to check if the wallet is unlocked
-  // TODO: kaikas
   if (walletName === METAMASK) {
     if (typeof window === 'undefined' || !window.ethereum?._metamask) return false
     try {
       return await window.ethereum?._metamask.isUnlocked()
     } catch {
       return false
     }
+  } else if (walletName === KAIKAS) {
+    if (typeof window === 'undefined' || !window.klaytn?._kaikas) return false
+    try {
+      return await window.klaytn?._kaikas.isUnlocked()
+    } catch {
+      return false
+    }
   }
 
   // Don't reconnect to MPC wallet because it's not initialized right away