feat: Krystal walletconnect

package.json

@@ -49,6 +49,7 @@
     "@coinbase/wallet-sdk": "^3.0.4",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@kybernetwork/oauth2": "1.0.0",
+    "@kyberswap/krystal-walletconnect-v2": "0.0.1-rc1.0",
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.0.11",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",

src/components/AddressInputPanel/index.tsx

@@ -55,14 +55,17 @@ const Input = styled.input<{ error?: boolean }>`
   }
   padding: 0px;
   -webkit-appearance: textfield;
+  appearance: textfield;
 
   ::-webkit-search-decoration {
     -webkit-appearance: none;
+    appearance: none;
   }
 
   ::-webkit-outer-spin-button,
   ::-webkit-inner-spin-button {
     -webkit-appearance: none;
+    appearance: none;
   }
 `
 

src/components/Header/web3/WalletModal/index.tsx

@@ -442,8 +442,12 @@ export default function WalletModal() {
       minHeight={false}
       maxHeight={90}
       maxWidth={600}
-      bypassScrollLock={walletView === WALLET_VIEWS.PENDING && ['WALLET_CONNECT'].includes(pendingWalletKey)}
-      bypassFocusLock={walletView === WALLET_VIEWS.PENDING && ['WALLET_CONNECT', 'BLOCTO'].includes(pendingWalletKey)}
+      bypassScrollLock={
+        walletView === WALLET_VIEWS.PENDING && ['WALLET_CONNECT', 'KRYSTAL_WC'].includes(pendingWalletKey)
+      }
+      bypassFocusLock={
+        walletView === WALLET_VIEWS.PENDING && ['WALLET_CONNECT', 'KRYSTAL_WC', 'BLOCTO'].includes(pendingWalletKey)
+      }
     >
       <Wrapper>{getModalContent()}</Wrapper>
     </Modal>

src/components/TransactionConfirmationModal/index.tsx

@@ -122,6 +122,7 @@ function AddTokenToInjectedWallet({ token, chainId }: { token: Token; chainId: C
   if (!walletKey) return null
   if (!isEVM) return null
   if (walletKey === 'WALLET_CONNECT') return null
+  if (walletKey === 'KRYSTAL_WC') return null
   const walletConfig = SUPPORTED_WALLETS[walletKey]
 
   return (

src/constants/connectors/evm.ts

@@ -1,4 +1,5 @@
 import { BloctoConnector } from '@blocto/web3-react-connector'
+import { WalletConnect as KrystalWalletConnect } from '@kyberswap/krystal-walletconnect-v2'
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { OPTIONAL_EVENTS } from '@walletconnect/ethereum-provider'
 import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
@@ -35,43 +36,53 @@ export const [blocto, bloctoHooks] = initializeConnector<BloctoConnector>(
 export const [bloctoInject, bloctoInjectHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
 
 const darkmode = Boolean(window.matchMedia('(prefers-color-scheme: dark)'))
+const walletconnectConfig = {
+  options: {
+    projectId: WALLETCONNECT_PROJECT_ID,
+    chains: WALLET_CONNECT_REQUIRED_CHAIN_IDS,
+    optionalChains: WALLET_CONNECT_OPTIONAL_CHAIN_IDS,
+    showQrModal: true,
+    methods: ['eth_sendTransaction', 'personal_sign', 'eth_signTypedData_v4'],
+    optionalMethods: ['eth_signTypedData', 'eth_sign'],
+    // optionalMethods: OPTIONAL_METHODS,
+    optionalEvents: OPTIONAL_EVENTS,
+    rpcMap: WALLET_CONNECT_SUPPORTED_CHAIN_IDS.reduce((acc, cur) => {
+      acc[cur] = NETWORKS_INFO[cur].defaultRpcUrl
+      return acc
+    }, {} as { [key in ChainId]: string }),
+    qrModalOptions: {
+      chainImages: undefined,
+      themeMode: darkmode ? ('dark' as const) : ('light' as const),
+      themeVariables: {
+        '--w3m-z-index': '1000',
+        '--w3m-logo-image-url': Kyber,
+        '--w3m-background-image-url': WC_BG,
+        '--w3m-accent-color': '#31CB9E',
+        '--w3m-accent-fill-color': '#222222',
+        '--w3m-color-bg-1': '#0F0F0F',
+      } as any,
+    },
+    metadata: {
+      name: 'Kyberswap',
+      description: document.title,
+      url: window.location.origin,
+      icons: ['https://kyberswap.com/favicon.svg'],
+    },
+  },
+}
+
 export const [walletConnectV2, walletConnectV2Hooks] = initializeConnector<WalletConnectV2>(
   actions =>
     new WalletConnectV2({
       actions,
-      defaultChainId: ChainId.MAINNET,
-      options: {
-        projectId: WALLETCONNECT_PROJECT_ID,
-        chains: WALLET_CONNECT_REQUIRED_CHAIN_IDS,
-        optionalChains: WALLET_CONNECT_OPTIONAL_CHAIN_IDS,
-        showQrModal: true,
-        methods: ['eth_sendTransaction', 'personal_sign', 'eth_signTypedData_v4'],
-        optionalMethods: ['eth_signTypedData', 'eth_sign'],
-        // optionalMethods: OPTIONAL_METHODS,
-        optionalEvents: OPTIONAL_EVENTS,
-        rpcMap: WALLET_CONNECT_SUPPORTED_CHAIN_IDS.reduce((acc, cur) => {
-          acc[cur] = NETWORKS_INFO[cur].defaultRpcUrl
-          return acc
-        }, {} as { [key in ChainId]: string }),
-        qrModalOptions: {
-          chainImages: undefined,
-          themeMode: darkmode ? 'dark' : 'light',
-          themeVariables: {
-            '--w3m-z-index': '1000',
-            '--w3m-logo-image-url': Kyber,
-            '--w3m-background-image-url': WC_BG,
-            '--w3m-accent-color': '#31CB9E',
-            '--w3m-accent-fill-color': '#222222',
-            '--w3m-color-bg-1': '#0F0F0F',
-          } as any,
-        },
-        metadata: {
-          name: 'Kyberswap',
-          description: document.title,
-          url: window.location.origin,
-          icons: ['https://kyberswap.com/favicon.svg'],
-        },
-      },
+      ...walletconnectConfig,
+    }),
+)
+export const [krystalWalletConnectV2, krystalWalletConnectV2Hooks] = initializeConnector<KrystalWalletConnect>(
+  actions =>
+    new KrystalWalletConnect({
+      actions,
+      ...walletconnectConfig,
     }),
 )
 

src/constants/wallets.ts

@@ -36,6 +36,8 @@ import {
   injectedHooks,
   krystal,
   krystalHooks,
+  krystalWalletConnectV2,
+  krystalWalletConnectV2Hooks,
   metaMask,
   metamaskHooks,
   rabby,
@@ -108,6 +110,11 @@ const detectKrystal = (): WalletReadyState => {
   return WalletReadyState.NotDetected
 }
 
+const detectKrystalWC = (): WalletReadyState => {
+  if (!getIsKrystalWallet()) return WalletReadyState.Installed
+  return WalletReadyState.Unsupported
+}
+
 const detectBrave = (): WalletReadyState => {
   //todo known issue: fail connect on mobile solana
   if (getIsBraveWallet()) return WalletReadyState.Installed
@@ -187,6 +194,15 @@ export const SUPPORTED_WALLETS = {
     installLink: 'https://wallet.krystal.app',
     readyState: detectKrystal,
   } as EVMWalletInfo,
+  KRYSTAL_WC: {
+    connector: krystalWalletConnectV2,
+    hooks: krystalWalletConnectV2Hooks,
+    name: 'Krystal',
+    icon: KRYSTAL,
+    iconLight: KRYSTAL,
+    installLink: 'https://wallet.krystal.app',
+    readyState: detectKrystalWC,
+  } as EVMWalletInfo,
   RABBY: {
     connector: rabby,
     hooks: rabbyHooks,

src/hooks/index.ts

@@ -7,7 +7,7 @@ import { useEffect, useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import { useSearchParams } from 'react-router-dom'
 
-import { blocto, gnosisSafe, metaMask, walletConnectV2 } from 'constants/connectors/evm'
+import { blocto, gnosisSafe, krystalWalletConnectV2, metaMask, walletConnectV2 } from 'constants/connectors/evm'
 import { MOCK_ACCOUNT_EVM, MOCK_ACCOUNT_SOLANA } from 'constants/env'
 import { NETWORKS_INFO, isSupportedChainId } from 'constants/networks'
 import { NetworkInfo } from 'constants/networks/type'
@@ -60,6 +60,9 @@ export function useActiveWeb3React(): {
     if (connectedConnectorEVM === walletConnectV2) {
       return 'WALLET_CONNECT'
     }
+    if (connectedConnectorEVM === krystalWalletConnectV2) {
+      return 'KRYSTAL_WC'
+    }
     if (connectedConnectorEVM === gnosisSafe) {
       return 'SAFE'
     }

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "allowJs": false,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
@@ -22,7 +22,6 @@
     "jsx": "react-jsx",
     "downlevelIteration": true,
     "allowSyntheticDefaultImports": true,
-    "types": ["vite/client", "vite-plugin-svgr/client"],
     "typeRoots": ["./types"],
     "baseUrl": "src",
     "useUnknownInCatchVariables": false

yarn.lock

@@ -2236,6 +2236,16 @@
     axios "1.2.1"
     client-oauth2 "^4.3.3"
 
+"@kyberswap/krystal-walletconnect-v2@0.0.1-rc1.0":
+  version "0.0.1-rc1.0"
+  resolved "https://registry.yarnpkg.com/@kyberswap/krystal-walletconnect-v2/-/krystal-walletconnect-v2-0.0.1-rc1.0.tgz#eae5e9d6ebb05471fcd0170d30a54453bbadde19"
+  integrity sha512-TLw2DQsCH5eLhYdCRf48W7FM3LM7+d9+/e2l5ISEDxk0V6urbeybR1BIdQpsoojZiLhUWBjQdkJkXM1P0wRQpg==
+  dependencies:
+    "@walletconnect/ethereum-provider" "2.8.1"
+    "@walletconnect/modal" "2.4.7"
+    "@web3-react/types" "8.2.0"
+    eventemitter3 "4.0.7"
+
 "@kyberswap/ks-sdk-classic@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@kyberswap/ks-sdk-classic/-/ks-sdk-classic-1.0.3.tgz#8ee8e454b2838359a36aee387729d1d2e5aa9c20"
@@ -5368,7 +5378,7 @@
   dependencies:
     tslib "1.14.1"
 
-"@walletconnect/ethereum-provider@^2.8.0":
+"@walletconnect/ethereum-provider@2.8.1", "@walletconnect/ethereum-provider@^2.8.0":
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/@walletconnect/ethereum-provider/-/ethereum-provider-2.8.1.tgz#1743072f42b5c940648b0303a382e8907a362a00"
   integrity sha512-YlF8CCiFTSEZRyANIBsop/U+t+d1Z1/UXXoE9+iwjSGKJsaym6PgBLPb2d8XdmS/qR6Tcx7lVodTp4cVtezKnA==
@@ -5530,7 +5540,7 @@
   resolved "https://registry.yarnpkg.com/@walletconnect/mobile-registry/-/mobile-registry-1.4.0.tgz#502cf8ab87330841d794819081e748ebdef7aee5"
   integrity sha512-ZtKRio4uCZ1JUF7LIdecmZt7FOLnX72RPSY7aUVu7mj7CSfxDwUn6gBuK6WGtH+NZCldBqDl5DenI5fFSvkKYw==
 
-"@walletconnect/modal@^2.4.5":
+"@walletconnect/modal@2.4.7", "@walletconnect/modal@^2.4.5":
   version "2.4.7"
   resolved "https://registry.yarnpkg.com/@walletconnect/modal/-/modal-2.4.7.tgz#fd84d6f1ac767865d63153e32150f790739a189a"
   integrity sha512-kFpvDTT44CgNGcwQVC0jHrYed4xorghKX1DOGo8ZfBSJ5TJx3p6d6SzLxkH1cZupWbljWkYS6SqvZcUBs8vWpg==
@@ -9612,7 +9622,7 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
-eventemitter3@^4.0.0, eventemitter3@^4.0.1, eventemitter3@^4.0.4, eventemitter3@^4.0.7:
+eventemitter3@4.0.7, eventemitter3@^4.0.0, eventemitter3@^4.0.1, eventemitter3@^4.0.4, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==