feat(app): add ethereum wallet into near wallet selector

apps/app/.env.example

@@ -18,3 +18,4 @@ API_ACCESS_KEY=
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=
 TURNSTILE_SECRET_KEY=
 NEXT_PUBLIC_SENTRY_DSN=
+NEXT_PUBLIC_REOWN_PROJECT_ID=

apps/app/package.json

@@ -15,10 +15,12 @@
     "@aws-sdk/client-ses": "^3.651.1",
     "@braintree/sanitize-url": "7.0.1",
     "@marsidev/react-turnstile": "1.0.2",
+    "@near-js/providers": "^1.0.1",
     "@near-wallet-selector/bitget-wallet": "8.9.13",
     "@near-wallet-selector/bitte-wallet": "8.9.13",
     "@near-wallet-selector/coin98-wallet": "8.9.13",
     "@near-wallet-selector/core": "8.9.13",
+    "@near-wallet-selector/ethereum-wallets": "^8.9.14",
     "@near-wallet-selector/here-wallet": "8.9.13",
     "@near-wallet-selector/ledger": "8.9.13",
     "@near-wallet-selector/math-wallet": "8.9.13",
@@ -48,6 +50,7 @@
     "@web3-onboard/ledger": "2.5.2",
     "@web3-onboard/react": "2.8.13",
     "@web3-onboard/walletconnect": "2.3.9",
+    "@web3modal/wagmi": "^5.1.11",
     "ahooks": "^3.8.0",
     "axios": "^1.7.2",
     "big.js": "6.2.1",
@@ -75,8 +78,14 @@
     "react-tabs": "^6.0.2",
     "react-toastify": "10.0.5",
     "swr": "^2.2.5",
+    "wagmi": "^2.12.27",
     "zustand": "4.3.7"
   },
+  "overrides": {
+    "@near-wallet-selector/ethereum-wallets": {
+      "near-api-js": "5.0.0"
+    }
+  },
   "devDependencies": {
     "@types/big.js": "~6.2.2",
     "@types/lodash": "~4.17.7",
@@ -86,10 +95,12 @@
     "@types/react-dom": "~18.2",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "~10.4",
+    "encoding": "^0.1.13",
     "eslint-config-custom-nextjs": "*",
     "nb-tsconfig": "*",
     "nb-types": "*",
     "next-translate-plugin": "~2.6",
+    "pino-pretty": "^11.3.0",
     "postcss": "~8.4",
     "tailwindcss": "~3.3",
     "typescript": "~5.2"

apps/app/src/components/Address/Contract/ViewOrChange.tsx

@@ -63,7 +63,7 @@ const ViewOrChange = (props: Props) => {
   const [fields, setFields] = useState<FieldType[]>([]);
   const [result, setResult] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-  const [hideQuery, setHideQuery] = useState(false);
+  const [hideQuery, _setHideQuery] = useState(false);
   const [options, setOptions] = useState({
     attachedDeposit: '0',
     gas: '30000000000000',
@@ -185,7 +185,7 @@ const ViewOrChange = (props: Props) => {
                 : value,
           };
           setFields((flds) => [...flds, field]);
-          setHideQuery(true);
+          //setHideQuery(true);
         }
       }
     } catch (error) {

apps/app/src/components/vm/VmInitializer.tsx

@@ -17,6 +17,7 @@ import { setupNeth } from '@near-wallet-selector/neth';
 import { setupXDEFI } from '@near-wallet-selector/xdefi';
 import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
 import { setupMintbaseWallet } from '@near-wallet-selector/mintbase-wallet';
+import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
 import {
   CommitButton,
   EthersProviderContext,
@@ -37,12 +38,13 @@ import { networkId, bosNetworkId } from '@/utils/config';
 import '@near-wallet-selector/modal-ui/styles.css';
 import Link from 'next/link';
 import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
+import { wagmiConfig, web3Modal } from '@/utils/web3modal';
 
 export default function VmInitializer() {
   const [signedIn, setSignedIn] = useState(false);
   const [signedAccountId, setSignedAccountId] = useState(null);
   const [availableStorage, setAvailableStorage] = useState<Big | null>(null);
-  const [walletModal, setWalletModal] = useState<WalletSelectorModal | null>(
+  const [_walletModal, setWalletModal] = useState<WalletSelectorModal | null>(
     null,
   );
 
@@ -80,6 +82,11 @@ export default function VmInitializer() {
             setupNearMobileWallet(),
             setupMintbaseWallet(),
             setupBitteWallet(),
+            setupEthereumWallets({
+              wagmiConfig: wagmiConfig as any,
+              web3Modal: web3Modal as any,
+              alwaysOnboardDuringSignIn: true,
+            }),
           ],
         }),
         customElements: {
@@ -99,10 +106,19 @@ export default function VmInitializer() {
     });
   }, [near]);
 
-  const requestSignInWithWallet = useCallback(() => {
-    walletModal?.show();
-    return false;
-  }, [walletModal]);
+  const requestSignInWithWallet = useCallback(async () => {
+    try {
+      if (!near) {
+        return;
+      }
+
+      const selector = await near.selector;
+      const modal = setupModal(selector, { contractId: '' });
+      modal.show();
+    } catch (error) {
+      console.error('Failed to set up or show the modal:', error);
+    }
+  }, [near]);
 
   const logOut = useCallback(async () => {
     if (!near) {

apps/app/src/utils/config.ts

@@ -82,3 +82,20 @@ export const chainAbstractionExplorerUrl =
             `https://blockexplorer.one/bitcoin/testnet/address/${address}`,
         },
       };
+
+const evmWalletChains = {
+  mainnet: {
+    chainId: 397,
+    name: 'Near Mainnet',
+    explorer: 'https://nearblocks.io',
+    rpc: 'https://eth-rpc.mainnet.near.org',
+  },
+  testnet: {
+    chainId: 398,
+    name: 'Near Testnet',
+    explorer: 'https://testnet.nearblocks.io',
+    rpc: 'https://eth-rpc.testnet.near.org',
+  },
+};
+
+export const EVMWalletChain = evmWalletChains[networkId];

apps/app/src/utils/web3modal.ts

@@ -0,0 +1,44 @@
+import { injected, walletConnect } from '@wagmi/connectors';
+import { createConfig, http, reconnect } from '@wagmi/core';
+import { createWeb3Modal } from '@web3modal/wagmi';
+import { EVMWalletChain, networkId } from './config';
+import { env } from 'next-runtime-env';
+
+// Config
+const near = {
+  id: EVMWalletChain.chainId,
+  name: EVMWalletChain.name,
+  nativeCurrency: {
+    decimals: 18,
+    name: 'NEAR',
+    symbol: 'NEAR',
+  },
+  rpcUrls: {
+    default: { http: [EVMWalletChain.rpc] },
+    public: { http: [EVMWalletChain.rpc] },
+  },
+  blockExplorers: {
+    default: {
+      name: 'NEAR Explorer',
+      url: EVMWalletChain.explorer,
+    },
+  },
+  testnet: networkId === 'testnet',
+};
+
+const projectId = env('NEXT_PUBLIC_REOWN_PROJECT_ID') || '';
+
+export const wagmiConfig = createConfig({
+  chains: [near],
+  transports: { [near.id]: http() },
+  connectors: [
+    walletConnect({ projectId, showQrModal: false }),
+    injected({ shimDisconnect: true }),
+  ],
+});
+
+// Preserve login state on page reload
+reconnect(wagmiConfig, { connectors: [injected({ shimDisconnect: true })] });
+
+// Modal for login
+export const web3Modal = createWeb3Modal({ wagmiConfig, projectId });

mainnet-app.yml

@@ -6,7 +6,7 @@ services:
       dockerfile: ./apps/app/Dockerfile
     restart: always
     ports:
-      - '127.0.0.1:3005:3000'
+      - '127.0.0.1:3009:3000'
     environment:
       PORT: 3000
       NEXT_PUBLIC_NETWORK_ID: mainnet
@@ -25,7 +25,8 @@ services:
       NEXT_PUBLIC_USER_DASHBOARD_URL: https://dash.nearblocks.io/
       NEXT_PUBLIC_API_URL: https://api.nearblocks.io/v1/
       API_URL: https://api.nearblocks.io/v1/
-      API_ACCESS_KEY: ${API_ACCESS_KEY}
+      API_ACCESS_KEY: 69447c5cc69447c5cc
       NEXT_PUBLIC_TURNSTILE_SITE_KEY: ${NEXT_PUBLIC_TURNSTILE_SITE_KEY}
       TURNSTILE_SECRET_KEY: ${TURNSTILE_SECRET_KEY}
       NEXT_PUBLIC_SENTRY_DSN: ${NEXT_PUBLIC_SENTRY_DSN}
+      NEXT_PUBLIC_REOWN_PROJECT_ID: 5690251ad29b1ed10f9a41bf343964e1

testnet-app.yml

@@ -29,3 +29,4 @@ services:
       NEXT_PUBLIC_TURNSTILE_SITE_KEY: ${NEXT_PUBLIC_TURNSTILE_SITE_KEY}
       TURNSTILE_SECRET_KEY: ${TURNSTILE_SECRET_KEY}
       NEXT_PUBLIC_SENTRY_DSN: ${NEXT_PUBLIC_SENTRY_DSN}
+      NEXT_PUBLIC_REOWN_PROJECT_ID: ${NEXT_PUBLIC_REOWN_PROJECT_ID}

turbo.json

@@ -30,7 +30,8 @@
         "TURNSTILE_SECRET_KEY",
         "NEXT_PUBLIC_SENTRY_DSN",
         "NEXT_RUNTIME",
-        "CI"
+        "CI",
+        "NEXT_PUBLIC_REOWN_PROJECT_ID"
       ]
     },
     "lint": {