Ethereum wallets selector.

.vscode/settings.json

@@ -2,8 +2,7 @@
   "eslint.format.enable": true,
   "prettier.enable": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint":
-    true
+    "source.fixAll.eslint": "explicit"
   },
   "typescript.tsdk": "node_modules/typescript/lib"
 }

README.md

@@ -21,6 +21,7 @@ NEAR Wallet Selector makes it easy for users to interact with your dApp by provi
 - [NearFi Wallet](https://www.npmjs.com/package/@near-wallet-selector/nearfi) - Mobile wallet.
 - [Near Mobile Wallet](https://www.npmjs.com/package/@near-wallet-selector/near-mobile-wallet) - Mobile Wallet.
 - [WalletConnect](https://www.npmjs.com/package/@near-wallet-selector/wallet-connect) - Bridge wallet.
+- [Ethereum wallets](https://www.npmjs.com/package/@near-wallet-selector/ethereum-wallets) - Injected wallet.
 
 ## Preview
 
@@ -72,6 +73,7 @@ yarn add \
   @near-wallet-selector/ramper-wallet \
   @near-wallet-selector/near-mobile-wallet  \
   @near-wallet-selector/mintbase-wallet
+  @near-wallet-selector/ethereum-wallets
 
 # Using NPM.
 npm install \
@@ -94,6 +96,7 @@ npm install \
   @near-wallet-selector/ramper-wallet \
   @near-wallet-selector/near-mobile-wallet \
   @near-wallet-selector/mintbase-wallet
+  @near-wallet-selector/ethereum-wallets
 ```
 
 Optionally, you can install our [`modal-ui`](https://www.npmjs.com/package/@near-wallet-selector/modal-ui) or [`modal-ui-js`](https://www.npmjs.com/package/@near-wallet-selector/modal-ui-js) package for a pre-built interface that wraps the `core` API and presents the supported wallets:
@@ -131,6 +134,7 @@ import { setupXDEFI } from "@near-wallet-selector/xdefi";
 import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
 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";
 
 const selector = await setupWalletSelector({
   network: "testnet",
@@ -166,6 +170,7 @@ const selector = await setupWalletSelector({
           callbackUrl: "https://www.mywebsite.com",
           deprecated: false,
       }),
+    setupEthereumWallets({ wagmiConfig, web3Modal }),
   ],
 });
 

examples/angular/project.json

@@ -103,6 +103,11 @@
             "glob": "**/*",
             "input": "packages/near-mobile-wallet/assets/",
             "output": "assets/"
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/ethereum-wallets/assets/",
+            "output": "assets/"
           }
         ],
         "styles": ["examples/angular/src/styles.scss"],

examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts

@@ -23,6 +23,11 @@ import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
 import { setupLedger } from "@near-wallet-selector/ledger";
 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 { createWeb3Modal } from "@web3modal/wagmi";
+import { reconnect, http, createConfig, type Config } from "@wagmi/core";
+import { type Chain } from "@wagmi/core/chains";
+import { injected, walletConnect } from "@wagmi/connectors";
 import { CONTRACT_ID } from "../../../constants";
 
 declare global {
@@ -32,6 +37,61 @@ declare global {
   }
 }
 
+// Get a project ID at https://cloud.walletconnect.com
+const projectId = "30147604c5f01d0bc4482ab0665b5697";
+
+// NOTE: This is the NEAR wallet playground used in dev mode.
+// TODO: Replace with the NEAR chain after the protocol upgrade.
+const near: Chain = {
+  id: 398,
+  name: "NEAR wallet playground",
+  nativeCurrency: {
+    decimals: 18,
+    name: "NEAR",
+    symbol: "NEAR",
+  },
+  rpcUrls: {
+    default: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
+    public: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
+  },
+  blockExplorers: {
+    default: {
+      name: "NEAR Explorer",
+      url: "https://testnet.nearblocks.io",
+    },
+  },
+  testnet: true,
+};
+
+const wagmiConfig: Config = createConfig({
+  chains: [near],
+  transports: {
+    [near.id]: http(),
+  },
+  connectors: [
+    walletConnect({
+      projectId,
+      metadata: {
+        name: "NEAR Guest Book",
+        description: "A guest book with comments stored on the NEAR blockchain",
+        url: "https://near.github.io/wallet-selector",
+        icons: ["https://near.github.io/wallet-selector/favicon.ico"],
+      },
+      showQrModal: false,
+    }),
+    injected({ shimDisconnect: true }),
+  ],
+});
+reconnect(wagmiConfig);
+
+const web3Modal = createWeb3Modal({
+  wagmiConfig: wagmiConfig,
+  projectId,
+  featuredWalletIds: [
+    "ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18", // Zerion
+  ],
+});
+
 @Component({
   selector: "near-wallet-selector-wallet-selector",
   templateUrl: "./wallet-selector.component.html",
@@ -93,6 +153,7 @@ export class WalletSelectorComponent implements OnInit {
         setupRamperWallet(),
         setupNearMobileWallet(),
         setupMintbaseWallet({ contractId: "guest-book.testnet" }),
+        setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
       ],
     });
 

examples/react/components/Content.tsx

@@ -180,7 +180,7 @@ const Content: React.FC = () => {
             ],
           })
           .catch((err) => {
-            alert("Failed to add message");
+            alert("Failed to add message " + err);
             console.log("Failed to add message");
 
             throw err;
@@ -379,6 +379,10 @@ const Content: React.FC = () => {
         <div>
           <button onClick={handleSignIn}>Log in</button>
         </div>
+        <div style={{ marginTop: 30 }}>
+          {/* @ts-ignore */}
+          <w3m-button label="Log in with Ethereum" />
+        </div>
         <SignIn />
       </Fragment>
     );
@@ -395,6 +399,12 @@ const Content: React.FC = () => {
           <button onClick={handleSwitchAccount}>Switch Account</button>
         )}
       </div>
+      {selector.store.getState().selectedWalletId === "ethereum-wallets" && (
+        <div style={{ marginTop: 30 }}>
+          {/* @ts-ignore */}
+          <w3m-button label="Log in with Ethereum" />
+        </div>
+      )}
       <Form
         account={account}
         onSubmit={(e) => handleSubmit(e as unknown as Submitted)}

examples/react/contexts/WalletSelectorContext.tsx

@@ -1,5 +1,9 @@
 import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet";
-import type { AccountState, WalletSelector } from "@near-wallet-selector/core";
+import type {
+  AccountState,
+  InjectedWalletBehaviour,
+  WalletSelector,
+} from "@near-wallet-selector/core";
 import { setupWalletSelector } from "@near-wallet-selector/core";
 import { setupHereWallet } from "@near-wallet-selector/here-wallet";
 import { setupMathWallet } from "@near-wallet-selector/math-wallet";
@@ -21,6 +25,7 @@ import { setupXDEFI } from "@near-wallet-selector/xdefi";
 import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
 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 type { ReactNode } from "react";
 import React, {
@@ -31,6 +36,17 @@ import React, {
   useMemo,
 } from "react";
 import { distinctUntilChanged, map } from "rxjs";
+import { createWeb3Modal } from "@web3modal/wagmi";
+import type { GetAccountReturnType } from "@wagmi/core";
+import {
+  reconnect,
+  http,
+  createConfig,
+  type Config,
+  watchAccount,
+} from "@wagmi/core";
+import { type Chain } from "@wagmi/core/chains";
+import { injected, walletConnect } from "@wagmi/connectors";
 
 import { Loading } from "../components/Loading";
 import { CONTRACT_ID } from "../constants";
@@ -52,6 +68,61 @@ interface WalletSelectorContextValue {
 const WalletSelectorContext =
   React.createContext<WalletSelectorContextValue | null>(null);
 
+// Get a project ID at https://cloud.walletconnect.com
+const projectId = "30147604c5f01d0bc4482ab0665b5697";
+
+// NOTE: This is the NEAR wallet playground used in dev mode.
+// TODO: Replace with the NEAR chain after the protocol upgrade.
+const near: Chain = {
+  id: 398,
+  name: "NEAR wallet playground",
+  nativeCurrency: {
+    decimals: 18,
+    name: "NEAR",
+    symbol: "NEAR",
+  },
+  rpcUrls: {
+    default: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
+    public: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
+  },
+  blockExplorers: {
+    default: {
+      name: "NEAR Explorer",
+      url: "https://testnet.nearblocks.io",
+    },
+  },
+  testnet: true,
+};
+
+const wagmiConfig: Config = createConfig({
+  chains: [near],
+  transports: {
+    [near.id]: http(),
+  },
+  connectors: [
+    walletConnect({
+      projectId,
+      metadata: {
+        name: "NEAR Guest Book",
+        description: "A guest book with comments stored on the NEAR blockchain",
+        url: "https://near.github.io/wallet-selector",
+        icons: ["https://near.github.io/wallet-selector/favicon.ico"],
+      },
+      showQrModal: false,
+    }),
+    injected({ shimDisconnect: true }),
+  ],
+});
+reconnect(wagmiConfig);
+
+const web3Modal = createWeb3Modal({
+  wagmiConfig: wagmiConfig,
+  projectId,
+  featuredWalletIds: [
+    "ecc4036f814562b41a5268adc86270fba1365471402006302e70169465b7ac18", // Zerion
+  ],
+});
+
 export const WalletSelectorContextProvider: React.FC<{
   children: ReactNode;
 }> = ({ children }) => {
@@ -60,6 +131,25 @@ export const WalletSelectorContextProvider: React.FC<{
   const [accounts, setAccounts] = useState<Array<AccountState>>([]);
   const [loading, setLoading] = useState<boolean>(true);
 
+  // Log in with Ethereum flow: auto connect to ethereum-wallets without showing the NEAR modal.
+  useEffect(() => {
+    if (!selector) {
+      return;
+    }
+    watchAccount(wagmiConfig, {
+      onChange: (data: GetAccountReturnType) => {
+        if (!data.address || selector.store.getState().selectedWalletId) {
+          return;
+        }
+        selector.wallet("ethereum-wallets").then((wallet) =>
+          (wallet as InjectedWalletBehaviour).signIn({
+            contractId: CONTRACT_ID,
+          })
+        );
+      },
+    });
+  }, [selector]);
+
   const init = useCallback(async () => {
     const _selector = await setupWalletSelector({
       network: "testnet",
@@ -95,6 +185,7 @@ export const WalletSelectorContextProvider: React.FC<{
         }),
         setupNearMobileWallet(),
         setupMintbaseWallet({ contractId: "guest-book.testnet" }),
+        setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
       ],
     });
     const _modal = setupModal(_selector, {

examples/react/project.json

@@ -96,6 +96,11 @@
             "glob": "**/*",
             "input": "packages/near-mobile-wallet/assets/",
             "output": "assets/"
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/ethereum-wallets/assets/",
+            "output": "assets/"
           }
         ]
       },