diff --git a/README.md b/README.md index b07c27c0e..6c078bba0 100644 --- 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 index 26551ea6e..661711cf8 100644 --- 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 index 6b963b36b..ae071e9f1 100644 --- 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 index 32d40e765..5a2c74833 100644 --- 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 = () => {