Merge pull request #1106 from aurora-is-near/ethereum-wallets

Ethereum wallets selector.
near · Jul 25, 2024 · 49e2ce1 · 49e2ce1
2 parents 6b84315 + 6a4757d
commit 49e2ce1
Show file tree

Hide file tree

Showing 27 changed files with 5,896 additions and 1,009 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,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
 
@@ -77,7 +78,8 @@ yarn add \
   @near-wallet-selector/bitget-wallet \
   @near-wallet-selector/okx-wallet \
   @near-wallet-selector/mintbase-wallet \
-  @near-wallet-selector/bitte-wallet
+  @near-wallet-selector/bitte-wallet \
+  @near-wallet-selector/ethereum-wallets
 
 
 # Using NPM.
@@ -104,7 +106,8 @@ npm install \
   @near-wallet-selector/bitget-wallet \
   @near-wallet-selector/okx-wallet \
   @near-wallet-selector/mintbase-wallet \
-  @near-wallet-selector/bitte-wallet
+  @near-wallet-selector/bitte-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:
@@ -142,7 +145,8 @@ 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 { setupBitteWallet } from "@near-wallet-selector/bitte-wallet"; 
+import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
+import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
 
 const selector = await setupWalletSelector({
   network: "testnet",
@@ -185,6 +189,7 @@ const selector = await setupWalletSelector({
         callbackUrl: "https://www.mywebsite.com",
         deprecated: false,
     }),
+    setupEthereumWallets({ wagmiConfig, web3Modal }),
   ],
 });
 

diff --git a/examples/angular/project.json b/examples/angular/project.json
@@ -108,6 +108,11 @@
             "glob": "**/*",
             "input": "packages/okx-wallet/assets/",
             "output": "assets/"
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/ethereum-wallets/assets/",
+            "output": "assets/"
           }
         ],
         "styles": ["examples/angular/src/styles.scss"],
@@ -120,7 +125,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "5mb"
+              "maximumError": "6mb"
             },
             {
               "type": "anyComponentStyle",

diff --git a/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts b/examples/angular/src/app/pages/wallet-selector/wallet-selector.component.ts
@@ -25,6 +25,11 @@ import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet"
 import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet";
 import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
 import { setupOKXWallet } from "@near-wallet-selector/okx-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 {
@@ -34,6 +39,60 @@ 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,
+  enableOnramp: false,
+  allWallets: "SHOW",
+});
+
 @Component({
   selector: "near-wallet-selector-wallet-selector",
   templateUrl: "./wallet-selector.component.html",
@@ -97,6 +156,7 @@ export class WalletSelectorComponent implements OnInit {
         setupNearMobileWallet(),
         setupMintbaseWallet({ contractId: CONTRACT_ID }),
         setupBitteWallet({ contractId: CONTRACT_ID }),
+        setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
       ],
     });
 

diff --git a/examples/react/components/Content.tsx b/examples/react/components/Content.tsx
@@ -179,7 +179,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;
@@ -378,6 +378,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>
     );
@@ -394,6 +398,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)}

diff --git a/examples/react/contexts/WalletSelectorContext.tsx b/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";
@@ -23,6 +27,7 @@ import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet"
 import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet";
 import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
 import { setupOKXWallet } from "@near-wallet-selector/okx-wallet";
+import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
 
 import type { ReactNode } from "react";
 import React, {
@@ -33,6 +38,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";
@@ -54,6 +70,60 @@ 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,
+  enableOnramp: false,
+  allWallets: "SHOW",
+});
+
 export const WalletSelectorContextProvider: React.FC<{
   children: ReactNode;
 }> = ({ children }) => {
@@ -62,6 +132,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",
@@ -99,6 +188,7 @@ export const WalletSelectorContextProvider: React.FC<{
         setupNearMobileWallet(),
         setupMintbaseWallet({ contractId: CONTRACT_ID }),
         setupBitteWallet({ contractId: CONTRACT_ID }),
+        setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
       ],
     });
     const _modal = setupModal(_selector, {

diff --git a/examples/react/project.json b/examples/react/project.json
@@ -101,6 +101,11 @@
             "glob": "**/*",
             "input": "packages/okx-wallet/assets/",
             "output": "assets/"
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/ethereum-wallets/assets/",
+            "output": "assets/"
           }
         ]
       },