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/contexts/WalletSelectorContext.tsx

@@ -21,6 +21,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 +32,10 @@ import React, {
   useMemo,
 } from "react";
 import { distinctUntilChanged, map } from "rxjs";
+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 { Loading } from "../components/Loading";
 import { CONTRACT_ID } from "../constants";
@@ -52,6 +57,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 }) => {
@@ -95,6 +155,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/"
           }
         ]
       },

package.json

@@ -18,6 +18,7 @@
     "nightly",
     "ledger",
     "wallet-connect",
+    "ethereum-wallets",
     "nearfi",
     "meteor-wallet",
     "welldone-wallet",
@@ -64,6 +65,7 @@
     "build:ramper-wallet": "nx run-many --target=build --projects=ramper-wallet --configuration=production",
     "build:near-mobile-wallet": "nx run-many --target=build --projects=near-mobile-wallet --configuration=production",
     "build:mintbase-wallet": "nx run-many --target=build --projects=mintbase-wallet --configuration=production",
+    "build:ethereum-wallets": "nx run-many --target=build --projects=ethereum-wallets --configuration=production",
     "examples:vanillajs:generateimportmap": "(cd examples/vanillajs && jspm link index.html -o index.html)",
     "serve:vanillajs": "yarn examples:vanillajs:generateimportmap && http-server -c-1 examples/vanillajs",
     "lint": "nx workspace-lint && nx run-many --target=lint --all --parallel",
@@ -72,19 +74,18 @@
     "serve:angular": "nx serve angular",
     "prepack": "yarn build:core && yarn build:all",
     "test": "nx run-many --target=test --all",
-    "postinstall": "ngcc --properties es2020 browser module main",
     "find:unused": "ts-prune -p tsprune.json"
   },
   "dependencies": {
-    "@angular/animations": "15.2.9",
-    "@angular/common": "15.2.9",
-    "@angular/compiler": "15.2.9",
-    "@angular/core": "15.2.9",
-    "@angular/forms": "15.2.9",
-    "@angular/platform-browser": "15.2.9",
-    "@angular/platform-browser-dynamic": "15.2.9",
-    "@angular/router": "15.2.9",
-    "@here-wallet/core": "^1.6.6",
+    "@angular/animations": "16.1.9",
+    "@angular/common": "16.1.9",
+    "@angular/compiler": "16.1.9",
+    "@angular/core": "16.1.9",
+    "@angular/forms": "16.1.9",
+    "@angular/platform-browser": "16.1.9",
+    "@angular/platform-browser-dynamic": "16.1.9",
+    "@angular/router": "16.1.9",
+    "@here-wallet/core": "^1.5.1",
     "@jscutlery/semver": "3.1.0",
     "@ledgerhq/hw-transport": "6.30.3",
     "@ledgerhq/hw-transport-webhid": "6.28.3",
@@ -94,8 +95,10 @@
     "@near-snap/sdk": "^0.6.0",
     "@peersyst/near-mobile-signer": "^1.0.10",
     "@ramper/near": "^0.0.30",
+    "@tanstack/react-query": "5.36.2",
     "@walletconnect/modal": "^2.6.2",
-    "@walletconnect/sign-client": "2.11.0",
+    "@walletconnect/sign-client": "2.13.0",
+    "@web3modal/wagmi": "4.2.0",
     "better-sqlite3": "^9.3.0",
     "big.js": "^6.1.1",
     "bn.js": "^5.2.0",
@@ -125,29 +128,31 @@
     "tweetnacl": "^1.0.3",
     "tweetnacl-util": "^0.15.1",
     "url": "^0.11.0",
+    "viem": "2.10.5",
+    "wagmi": "2.8.8",
     "zone.js": "0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.2.8",
-    "@angular-devkit/core": "15.2.8",
-    "@angular-devkit/schematics": "15.2.8",
+    "@angular-devkit/build-angular": "16.1.8",
+    "@angular-devkit/core": "16.1.8",
+    "@angular-devkit/schematics": "16.1.8",
     "@angular-eslint/eslint-plugin": "15.0.0",
     "@angular-eslint/eslint-plugin-template": "15.0.0",
     "@angular-eslint/template-parser": "15.0.0",
-    "@angular/cli": "~15.2.0",
-    "@angular/compiler-cli": "15.2.9",
+    "@angular/cli": "16.1.8",
+    "@angular/compiler-cli": "16.1.8",
     "@angular/language-service": "15.2.9",
     "@babel/preset-react": "^7.16.7",
     "@nrwl/js": "16.0.0",
     "@nrwl/rollup": "16.0.0",
     "@nrwl/tao": "16.0.0",
     "@nrwl/webpack": "16.0.0",
-    "@nx/angular": "16.0.0",
+    "@nx/angular": "16.4.0",
     "@nx/cypress": "16.0.0",
     "@nx/eslint-plugin": "16.0.0",
     "@nx/jest": "16.0.0",
     "@nx/js": "16.0.0",
-    "@nx/linter": "16.0.0",
+    "@nx/linter": "16.4.0",
     "@nx/next": "16.0.0",
     "@nx/react": "16.0.0",
     "@nx/web": "16.0.0",
@@ -193,7 +198,7 @@
     "jest-preset-angular": "13.0.0",
     "jsdoc": "^4.0.2",
     "jspm": "^3.1.0",
-    "nx": "16.0.0",
+    "nx": "16.4.0",
     "nx-cloud": "16.0.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.7.1",
@@ -207,7 +212,7 @@
     "ts-jest": "29.1.0",
     "ts-node": "10.9.1",
     "ts-prune": "^0.10.3",
-    "typescript": "4.9.5",
+    "typescript": "5.0.4",
     "url-loader": "^4.1.1",
     "util": "^0.12.5",
     "webpack": "^5.75.0",

packages/ethereum-wallets/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

packages/ethereum-wallets/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}