Ethereum wallets selector.

[paouvrard]

Description

This is the Ethereum Wallets package for NEAR Wallet Selector.
The package adds support for Ethereum wallets by creating Ethereum-compatible transactions from NEAR transaction inputs.

Ethereum wallet support NEP: near/NEPs#518

Because NEAR Protocol does not yet support the new 0x accounts natively, the eth-wallet.testnet namespace is used during development before the protocol upgrade.

Any Ethereum wallet can be connected via Web3Modal: the dApp provides the web3Modal connection and can chose which wallets to support. A multichain dApp can switch networks using the same wallet connection.
Apps can use the w3m-button and provide a "Log in with Ethereum" flow to automatically connect the ethereum-wallets package without needing to go through the NEAR modal.
This module is usable without Web3Modal but only connects to the default injected wallet (Metamask browser extension, embedded browser wallets...).

SignIn requires switching to NEAR Protocol network to ensure that the wallet is compatible, if the user switches to other networks he will be prompted to switch back to NEAR before making a transaction.

Sign out prompts to remove the FunctionCall access key if there is one, this action is non blocking and the user can sign out without executing the transaction.

A NEAR dApp can connect to multiple Ethereum wallet addresses. If the user switches to a new address from the Ethereum wallet, the NEAR wallet will be disconnected so that it can reconnect with the signIn flow. If the dApp doesn't require a FunctionCall access key or the Ethereum wallet address already signed in, then the address connects automatically when changed.

NEP-518 doesn't support multiple actions within the same transaction, so when multiple actions are requested, they are split into separate transactions and executed 1 by 1.

NEP-518 rpc relayer uses a FunctionCall access key to execute transactions on behalf of the user by calling rlp_execute. If this key is not yet added, the wallet will be onboarded before the first transaction is made.

signMessage and verifyOwner are not implemented because Ethereum wallets are not compatible with these standards, instead a dApp can use eth_sign or eth_signTypedData_v4 to authenticate the wallet by interacting with it directly.

Dependency updates:

• Wagmi requires typeScript >=5.0.4: https://wagmi.sh/react/typescript.
• • This made it necessary so bump angular and nx dependencies versions to fix build errors.
• @walletconnect/sign-client version was also bumped: I don't know any wallet that uses the wallet-connect package to test it but I don't expect the minor version change to break it. Happy to test it if you can recommend a wallet.
• Removed ngcc post install because it is no longer required (ALERT: As of Angular 16, "ngcc" is no longer required and not invoked during CLI builds. You are seeing this message because the current operation invoked the "ngcc" command directly. This "ngcc" invocation can be safely removed.)

Testing:

An alpha release of this package is available to use on NEAR testnet dapps:

Previews:

Rainbow bridge: https://rainbow-bridge-next-testnet-git-ethereum-wallets-auroraisnear.vercel.app
Ref Finance: https://web3-wallet-three.vercel.app

Installation:

yarn add @aurora-is-near/ethereum-wallets

Usage:

import { setupEthereumWallets } from "@aurora-is-near/ethereum-wallets"
import { setupMyNearWallet } from "@near-wallet-selector/my-near-wallet";
const _selector = await setupWalletSelector({
  network: "testnet",
  debug: true,
  modules: [
    setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
    setupMyNearWallet()
  ],
});

Playground: https://near-wallet-playground.testnet.aurora.dev
This ethereum-wallets package does the onboarding of the relayer automatically, but the playground is also useful for un-onboarding of the relayer and adding NEP-141 tokens to MetaMask using their equivalent 0x address.

Checklist:

• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings

[Patrick1904]

From a UX perspective, did you consider avoiding the modal on top of modal approach by adding the ETH wallet flow directly in the ETH wallet tab on the main modal?

[paouvrard]

From a UX perspective, did you consider avoiding the modal on top of modal approach by adding the ETH wallet flow directly in the ETH wallet tab on the main modal?

Yea that was the idea initially with MetaMask-only support but this approach seemed to provide most benefits and reliability. I'm considering that dApps will be multi-chain and web3Modal manages the selected network which we use with const { selectedNetworkId } = web3Modal.getState() so I expect we will run into issues trying to reimplement all this within the NEAR modal. We already have the AddKey transaction modal during login so we can't fully avoid extra modals anyway. With Web3Modal the Ethereum users have a familiar UX and it gives us all current and future wallet features with minimal maintenance (dApps should be able to upgrade Web3Modal without needing an update of this ethereum-wallets module).
Another compatible flow we can consider is for dApps to have a "Sign in with Ethereum" button like the w3m-button which when connected would trigger the ethereum-wallets module to connect automatically (bypassing the near-wallet-selector modal if that is possible).

[Patrick1904]

LGTM

[trechriron]

Please address merge conflicts. Thanks!

[frol]

@paouvrard Sorry for jumping in, but I'd like to invite you to participate in the Race of Sloths - a fun and gamified open-source contributions program. Consider mentioning @race-of-sloths user in your github comment or PR description to join!

See how the flow works here: near/nearcore#11778

[trechriron]

Thanks for addressing merge conflicts!