Add evm wallet (#619)

* feat: add evm wallet * feat: update evm wallet config * fix: evm wallet tx issue * fix: evm wallet bridge issue * chore: update @web3 wallet version * feat: function key package * upgrade evm wallet version * feat: add allowUnsupportedChain config * fix: login with evm wallet always lose login data issue * fix: to chain is evm chain need not setChain * fix: fix near wallet provider issue * feat:remove ref-modal-ui * fix: evm chain balance issue * fix: evm wallet tip issue * fix balance issue * fix: swith chain issue for evm wallet * feat: remove orderly key delete feature --------- Co-authored-by: naturexie <[email protected]>
ref-finance · Oct 11, 2024 · 4bc83a8 · 4bc83a8
1 parent aa3f065
commit 4bc83a8
Show file tree

Hide file tree

Showing 17 changed files with 1,603 additions and 745 deletions.
diff --git a/package.json b/package.json
@@ -118,7 +118,8 @@
     "@near-js/wallet-account": "^1.0.2",
     "@near-wallet-selector/bitte-wallet": "^8.9.12",
     "@near-wallet-selector/coin98-wallet": "8.9.12",
-    "@near-wallet-selector/core": "^8.9.7",
+    "@near-wallet-selector/core": "8.9.10",
+    "@near-wallet-selector/ethereum-wallets": "^8.9.13",
     "@near-wallet-selector/here-wallet": "^8.9.7",
     "@near-wallet-selector/ledger": "^8.9.7",
     "@near-wallet-selector/math-wallet": "^8.9.7",
@@ -133,15 +134,19 @@
     "@near-wallet-selector/sender": "^8.9.7",
     "@near-wallet-selector/wallet-connect": "^7.9.1",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v4.7.1/react-icons-all-files-4.7.1.tgz",
+    "@tanstack/react-query": "^5.56.2",
     "@transak/transak-sdk": "1.2.2",
+    "@wagmi/connectors": "^5.1.13",
+    "@wagmi/core": "^2.13.7",
     "@walletconnect/client": "^2.0.0-beta.26",
     "@walletconnect/qrcode-modal": "2.0.0-alpha.20",
     "@walletconnect/sign-client": "2.0.0-beta.102-6a30ee7.0",
     "@walletconnect/types": "^2.0.0-beta.102",
-    "@web3-onboard/injected-wallets": "^2.10.9",
-    "@web3-onboard/ledger": "^2.5.2",
-    "@web3-onboard/react": "^2.8.13",
-    "@web3-onboard/walletconnect": "^2.5.1",
+    "@web3-onboard/injected-wallets": "^2.11.2",
+    "@web3-onboard/ledger": "^2.7.1",
+    "@web3-onboard/react": "^2.9.2",
+    "@web3-onboard/walletconnect": "^2.6.1",
+    "@web3modal/wagmi": "^5.1.9",
     "actionsheet-react": "^1.0.12",
     "animejs": "^3.2.1",
     "axios": "^0.21.1",
@@ -201,6 +206,8 @@
     "rxjs": "7.8.1",
     "socket.io-client": "^4.5.4",
     "swiper": "^6.8.4",
+    "viem": "^2.21.15",
+    "wagmi": "^2.12.14",
     "web3-eth-abi": "1.8.2",
     "zustand": "^4.3.7"
   },

diff --git a/src/components/forms/SlippageSelector.tsx b/src/components/forms/SlippageSelector.tsx
@@ -219,7 +219,8 @@ export default function SlippageSelector({
     selectedWalletId === 'near-snap' ||
     selectedWalletId === 'near-mobile-wallet' ||
     selectedWalletId === 'okx-wallet' ||
-    selectedWalletId === 'mintbase-wallet';
+    selectedWalletId === 'mintbase-wallet' ||
+    selectedWalletId == 'ethereum-wallets';
   useEffect(() => {
     if (trisDisbaled) {
       setEnableTri(false);

diff --git a/src/components/layout/transactionTipPopUp.tsx b/src/components/layout/transactionTipPopUp.tsx
@@ -288,7 +288,7 @@ export const checkAccountTip = () => {
 };
 
 export const checkCrossSwapTransactions = async (txHashes: string[]) => {
-  let templastTx = txHashes.pop();
+  const templastTx = txHashes.pop();
 
   let lastTx = templastTx;
 
@@ -305,23 +305,26 @@ export const checkCrossSwapTransactions = async (txHashes: string[]) => {
   const byNeth =
     txDetail?.transaction?.actions?.[0]?.FunctionCall?.method_name ===
     'execute';
-
+  const byEvm =
+    txDetail?.transaction?.actions?.[0]?.FunctionCall?.method_name ===
+    'rlp_execute';
+  const isPackage = byNeth || byEvm;
   if (txHashes.length > 0) {
     // judge if aurora call
 
-    const isAurora = byNeth
+    const isAurora = isPackage
       ? txDetail?.receipts?.[0]?.receiver_id === 'aurora'
       : txDetail.transaction?.receiver_id === 'aurora';
 
-    const ifCall = byNeth
+    const ifCall = isPackage
       ? txDetail?.receipts?.[0]?.receipt?.Action?.actions?.[0]?.FunctionCall
           ?.method_name === 'call'
       : txDetail.transaction?.actions?.length === 1 &&
         txDetail.transaction?.actions?.[0]?.FunctionCall?.method_name ===
           'call';
 
     if (isAurora && ifCall) {
-      let parsedOut = byNeth
+      const parsedOut = isPackage
         ? parsedTransactionSuccessValueNeth(txDetail)
         : parsedTransactionSuccessValue(txDetail);
 
@@ -344,7 +347,7 @@ export const checkCrossSwapTransactions = async (txHashes: string[]) => {
         const slippageErrprReg = /INSUFFICIENT_OUTPUT_AMOUNT/i;
         const expiredErrorReg = /EXPIRED/i;
 
-        const parsedOutput = byNeth
+        const parsedOutput = isPackage
           ? parsedTransactionSuccessValueNeth(secondDetail)
           : parsedTransactionSuccessValue(secondDetail);
 

diff --git a/src/components/meme/CallBackModal.tsx b/src/components/meme/CallBackModal.tsx
@@ -85,7 +85,6 @@ function CallBackModal(props: any) {
     }
     return [from.toFixed(), to.toFixed()];
   }, [amount, seeds, txParams, seed]);
-
   if (!seed && !isXrefAction) return null;
   function goNearblocks() {
     history.replace('/meme');

diff --git a/src/components/meme/SeedsBox.tsx b/src/components/meme/SeedsBox.tsx
@@ -71,22 +71,28 @@ const SeedsBox = () => {
     if (txHash && isSignedIn) {
       checkTransaction(txHash).then((res: any) => {
         const { transaction, receipts } = res;
-        const isNeth =
+        const byNeth =
           transaction?.actions?.[0]?.FunctionCall?.method_name === 'execute';
-        const methodNameNeth =
+        const byEvm =
+          transaction?.actions?.[0]?.FunctionCall?.method_name ===
+          'rlp_execute';
+        const isPackage = byNeth || byEvm;
+        const packageMethodName =
           receipts?.[0]?.receipt?.Action?.actions?.[0]?.FunctionCall
             ?.method_name;
         const methodNameNormal =
           transaction?.actions[0]?.FunctionCall?.method_name;
         const args = parsedArgs(
-          isNeth
+          isPackage
             ? res?.receipts?.[0]?.receipt?.Action?.actions?.[0]?.FunctionCall
                 ?.args
             : res?.transaction?.actions?.[0]?.FunctionCall?.args || ''
         );
-        const receiver_id = transaction?.receiver_id;
+        const receiver_id = byEvm
+          ? receipts?.[0].receiver_id
+          : transaction?.receiver_id;
         const parsedInputArgs = JSON.parse(args || '');
-        const methodName = isNeth ? methodNameNeth : methodNameNormal;
+        const methodName = isPackage ? packageMethodName : methodNameNormal;
         if (
           methodName == 'unlock_and_unstake_seed' ||
           methodName == 'ft_transfer_call'

diff --git a/src/components/meme/context.tsx b/src/components/meme/context.tsx
@@ -125,14 +125,18 @@ function MemeContextProvider({ children }: any) {
     if (txHash && isSignedIn) {
       checkTransaction(txHash).then((res: any) => {
         const { transaction, receipts, receipts_outcome } = res;
-        const isNeth =
+        const byNeth =
           transaction?.actions?.[0]?.FunctionCall?.method_name === 'execute';
-        const methodNameNeth =
+        const byEvm =
+          transaction?.actions?.[0]?.FunctionCall?.method_name ===
+          'rlp_execute';
+        const isPackage = byNeth || byEvm;
+        const packageMethodName =
           receipts?.[0]?.receipt?.Action?.actions?.[0]?.FunctionCall
             ?.method_name;
         const methodNameNormal =
           transaction?.actions[0]?.FunctionCall?.method_name;
-        const methodName = isNeth ? methodNameNeth : methodNameNormal;
+        const methodName = isPackage ? packageMethodName : methodNameNormal;
         if (methodName == 'check_in') {
           const logs = receipts_outcome[0].outcome.logs;
           const parsedLogs = logs.map((log) => {

diff --git a/src/components/portfolio/AccessKeyModal.tsx b/src/components/portfolio/AccessKeyModal.tsx
@@ -81,7 +81,7 @@ function AccessKeyModal(props: any) {
               onClick={() => {
                 setTab('accessKey');
               }}
-              className={`flex items-center gap-1.5 text-lg gotham_bold pr-4 border-r border-v3SwapGray border-opacity-20 cursor-pointer ${
+              className={`flex items-center gap-1.5 text-lg gotham_bold pr-4 cursor-pointer ${
                 tab == 'accessKey' ? 'text-white' : 'text-limitOrderInputColor'
               }`}
             >
@@ -97,40 +97,13 @@ function AccessKeyModal(props: any) {
                 <CustomTooltip id={'approved'} />
               </div>
             </span>
-            <div
-              onClick={() => {
-                setTab('orderlyKey');
-              }}
-              className={`flex items-center gap-1.5 pl-4 cursor-pointer ${
-                tab == 'orderlyKey' ? 'text-white' : 'text-limitOrderInputColor'
-              }`}
-            >
-              <OrderlyIcon isActive={tab == 'orderlyKey'} />
-              <span className="flex items-center gap-1.5 text-lg gotham_bold">
-                Orderly
-                <div
-                  className="text-white text-right ml-1"
-                  data-class="reactTip"
-                  data-tooltip-id={'orderly'}
-                  data-place="top"
-                  data-tooltip-html={getOrderlyTip()}
-                >
-                  <QuestionMark />
-                  <CustomTooltip id={'orderly'} />
-                </div>
-              </span>
-            </div>
           </div>
           <ModalCloseIcon className="cursor-pointer" onClick={onRequestClose} />
         </div>
         <AuthorizedApps
           hidden={tab == 'orderlyKey'}
           currentUsedKeys={currentUsedKeys}
         />
-        <OrderlyKeys
-          hidden={tab == 'accessKey'}
-          currentUsedKeys={currentUsedKeys}
-        />
       </div>
     </Modal>
   );

diff --git a/src/context/WalletSelectorContext.tsx b/src/context/WalletSelectorContext.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { map, distinctUntilChanged } from 'rxjs';
 
 import { NetworkId, setupWalletSelector } from '@near-wallet-selector/core';
@@ -31,6 +37,11 @@ import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet'
 import { setupOKXWallet } from '@near-wallet-selector/okx-wallet';
 import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet';
 import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
+import type { Config } from '@wagmi/core';
+import { reconnect, http, createConfig } from '@wagmi/core';
+import { walletConnect, injected } from '@wagmi/connectors';
+import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
+import { createWeb3Modal } from '@web3modal/wagmi';
 
 import 'ref-modal-ui/styles.css';
 import { near } from '../services/near';
@@ -98,7 +109,51 @@ export const WalletSelectorContextProvider: React.FC<any> = ({ children }) => {
 
   const [isLedger, setIsLedger] = useState<boolean>(undefined);
   const [allKeys, setAllKeys] = useState<IAccountKey[]>([]);
-
+  const { wagmiConfig, web3Modal } = useMemo(() => {
+    const nearBlock = {
+      id: 397,
+      name: 'NEAR Mainnet',
+      nativeCurrency: {
+        decimals: 18,
+        name: 'NEAR',
+        symbol: 'NEAR',
+      },
+      rpcUrls: {
+        default: { http: ['https://eth-rpc.mainnet.near.org'] },
+        public: { http: ['https://eth-rpc.mainnet.near.org'] },
+      },
+      blockExplorers: {
+        default: {
+          name: 'NEAR Explorer',
+          url: 'https://eth-explorer.near.org',
+        },
+      },
+      testnet: false,
+    };
+    const wagmiConfig: Config = createConfig({
+      chains: [nearBlock],
+      transports: {
+        [nearBlock.id]: http(),
+      },
+      connectors: [
+        walletConnect({
+          projectId: '87e549918631f833447b56c15354e450',
+          showQrModal: false,
+        }),
+        injected({ shimDisconnect: true }),
+      ],
+    });
+    reconnect(wagmiConfig);
+    const web3Modal = createWeb3Modal({
+      wagmiConfig,
+      projectId: '87e549918631f833447b56c15354e450',
+      allowUnsupportedChain: true,
+    });
+    return {
+      wagmiConfig,
+      web3Modal,
+    };
+  }, []);
   const syncAccountState = (
     currentAccountId: string | null,
     newAccounts: Array<AccountState>
@@ -140,7 +195,6 @@ export const WalletSelectorContextProvider: React.FC<any> = ({ children }) => {
       },
     ],
   };
-
   const init = useCallback(async () => {
     const RPC_LIST_system = getExtendConfig().RPC_LIST;
     const RPC_LIST_custom = getCustomConfig();
@@ -227,6 +281,11 @@ export const WalletSelectorContextProvider: React.FC<any> = ({ children }) => {
           deprecated: false,
         }),
         setupCoin98Wallet(),
+        setupEthereumWallets({
+          wagmiConfig,
+          web3Modal,
+          alwaysOnboardDuringSignIn: true,
+        } as any),
       ],
     });
     const _modal = setupModal(_selector, {
@@ -269,7 +328,7 @@ export const WalletSelectorContextProvider: React.FC<any> = ({ children }) => {
             distinctUntilChanged()
           )
           .subscribe((nextAccounts) => {
-            syncAccountState(accountId, nextAccounts);
+            // syncAccountState(accountId, nextAccounts);
           });
       });
   }, [init]);
@@ -284,6 +343,11 @@ export const WalletSelectorContextProvider: React.FC<any> = ({ children }) => {
         distinctUntilChanged()
       )
       .subscribe((nextAccounts) => {
+        if (
+          selector?.store?.getState()?.selectedWalletId == 'ethereum-wallets'
+        ) {
+          if (accountId == nextAccounts?.[0]?.accountId) return;
+        }
         syncAccountState(accountId, nextAccounts);
       });
 

diff --git a/src/pages/Bridge/hooks/useBridgeForm.ts b/src/pages/Bridge/hooks/useBridgeForm.ts
@@ -154,8 +154,8 @@ export default function useBridgeForm() {
 
       if (fromValue.chain !== 'NEAR')
         setChain(EVMConfig.chains[fromValue.chain.toLowerCase()]?.id);
-      else if (toValue.chain !== 'NEAR')
-        setChain(EVMConfig.chains[toValue.chain.toLowerCase()]?.id);
+      // else if (toValue.chain !== 'NEAR')
+      //   setChain(EVMConfig.chains[toValue.chain.toLowerCase()]?.id);
 
       logger.log('useBridgeForm', fromValue, toValue);
 

diff --git a/src/pages/Bridge/index.tsx b/src/pages/Bridge/index.tsx
@@ -29,13 +29,11 @@ function BridgePage() {
   return (
     <div className="bridge-page">
       <WalletConnectProvider>
-        <WalletConnectNearProvider>
-          <BridgeTransactionProvider>
-            <BridgeFormProvider>
-              <Layout />
-            </BridgeFormProvider>
-          </BridgeTransactionProvider>
-        </WalletConnectNearProvider>
+        <BridgeTransactionProvider>
+          <BridgeFormProvider>
+            <Layout />
+          </BridgeFormProvider>
+        </BridgeTransactionProvider>
       </WalletConnectProvider>
     </div>
   );

diff --git a/src/pages/Bridge/services/bridge/stargate.ts b/src/pages/Bridge/services/bridge/stargate.ts
@@ -410,11 +410,18 @@ const stargateBridgeService = {
       transactions: [transferTransaction, auroraTransaction],
     });
     if (Array.isArray(res)) {
-      const transaction = res.find(
+      let transaction = res.find(
         (item) =>
           item.transaction.receiver_id === 'aurora' &&
           item.transaction.actions?.[0]?.FunctionCall?.method_name === 'call'
       );
+      if (
+        !transaction &&
+        window.selector?.store?.getState()?.selectedWalletId ==
+          'ethereum-wallets'
+      ) {
+        transaction = res.pop();
+      }
       logger.log('bridge: send success', res);
       logger.log('bridge: send success2', transaction);
       return transaction?.transaction.hash;

diff --git a/src/pages/Bridge/services/contract.ts b/src/pages/Bridge/services/contract.ts
@@ -101,7 +101,9 @@ export const evmServices = {
         const Interface = new ethers.utils.Interface(erc20Abi);
 
         const data = Interface.encodeFunctionData('balanceOf', [sender]);
-        const rawBalance = await window.ethWeb3Provider?.call({
+        const rpc = EVMConfig.chains[chain.toLowerCase()].rpcUrl;
+        const targetProvider = new ethers.providers.JsonRpcProvider(rpc);
+        const rawBalance = await targetProvider?.call({
           to: token.addresses[chain],
           data,
         });