Skip to content

Commit 49e2ce1

Browse files
trechrirontrechriron
authored
Merge pull request #1106 from aurora-is-near/ethereum-wallets
Ethereum wallets selector.
2 parents 6b84315 + 6a4757d commit 49e2ce1

27 files changed

+5896
-1009
lines changed

‎README.md

+8-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ NEAR Wallet Selector makes it easy for users to interact with your dApp by provi
2323
- [NearFi Wallet](https://www.npmjs.com/package/@near-wallet-selector/nearfi) - Mobile wallet.
2424
- [Near Mobile Wallet](https://www.npmjs.com/package/@near-wallet-selector/near-mobile-wallet) - Mobile Wallet.
2525
- [WalletConnect](https://www.npmjs.com/package/@near-wallet-selector/wallet-connect) - Bridge wallet.
26+
- [Ethereum wallets](https://www.npmjs.com/package/@near-wallet-selector/ethereum-wallets) - Injected wallet.
2627

2728
## Preview
2829

@@ -77,7 +78,8 @@ yarn add \
7778
@near-wallet-selector/bitget-wallet \
7879
@near-wallet-selector/okx-wallet \
7980
@near-wallet-selector/mintbase-wallet \
80-
@near-wallet-selector/bitte-wallet
81+
@near-wallet-selector/bitte-wallet \
82+
@near-wallet-selector/ethereum-wallets
8183

8284

8385
# Using NPM.
@@ -104,7 +106,8 @@ npm install \
104106
@near-wallet-selector/bitget-wallet \
105107
@near-wallet-selector/okx-wallet \
106108
@near-wallet-selector/mintbase-wallet \
107-
@near-wallet-selector/bitte-wallet
109+
@near-wallet-selector/bitte-wallet \
110+
@near-wallet-selector/ethereum-wallets
108111
```
109112

110113
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";
142145
import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
143146
import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet";
144147
import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet";
145-
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
148+
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
149+
import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
146150

147151
const selector = await setupWalletSelector({
148152
network: "testnet",
@@ -185,6 +189,7 @@ const selector = await setupWalletSelector({
185189
callbackUrl: "https://www.mywebsite.com",
186190
deprecated: false,
187191
}),
192+
setupEthereumWallets({ wagmiConfig, web3Modal }),
188193
],
189194
});
190195

‎examples/angular/project.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,11 @@
108108
"glob": "**/*",
109109
"input": "packages/okx-wallet/assets/",
110110
"output": "assets/"
111+
},
112+
{
113+
"glob": "**/*",
114+
"input": "packages/ethereum-wallets/assets/",
115+
"output": "assets/"
111116
}
112117
],
113118
"styles": ["examples/angular/src/styles.scss"],
@@ -120,7 +125,7 @@
120125
{
121126
"type": "initial",
122127
"maximumWarning": "500kb",
123-
"maximumError": "5mb"
128+
"maximumError": "6mb"
124129
},
125130
{
126131
"type": "anyComponentStyle",

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

+60
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet"
2525
import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet";
2626
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
2727
import { setupOKXWallet } from "@near-wallet-selector/okx-wallet";
28+
import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
29+
import { createWeb3Modal } from "@web3modal/wagmi";
30+
import { reconnect, http, createConfig, type Config } from "@wagmi/core";
31+
import { type Chain } from "@wagmi/core/chains";
32+
import { injected, walletConnect } from "@wagmi/connectors";
2833
import { CONTRACT_ID } from "../../../constants";
2934

3035
declare global {
@@ -34,6 +39,60 @@ declare global {
3439
}
3540
}
3641

42+
// Get a project ID at https://cloud.walletconnect.com
43+
const projectId = "30147604c5f01d0bc4482ab0665b5697";
44+
45+
// NOTE: This is the NEAR wallet playground used in dev mode.
46+
// TODO: Replace with the NEAR chain after the protocol upgrade.
47+
const near: Chain = {
48+
id: 398,
49+
name: "NEAR wallet playground",
50+
nativeCurrency: {
51+
decimals: 18,
52+
name: "NEAR",
53+
symbol: "NEAR",
54+
},
55+
rpcUrls: {
56+
default: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
57+
public: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
58+
},
59+
blockExplorers: {
60+
default: {
61+
name: "NEAR Explorer",
62+
url: "https://testnet.nearblocks.io",
63+
},
64+
},
65+
testnet: true,
66+
};
67+
68+
const wagmiConfig: Config = createConfig({
69+
chains: [near],
70+
transports: {
71+
[near.id]: http(),
72+
},
73+
connectors: [
74+
walletConnect({
75+
projectId,
76+
metadata: {
77+
name: "NEAR Guest Book",
78+
description: "A guest book with comments stored on the NEAR blockchain",
79+
url: "https://near.github.io/wallet-selector",
80+
icons: ["https://near.github.io/wallet-selector/favicon.ico"],
81+
},
82+
showQrModal: false,
83+
}),
84+
injected({ shimDisconnect: true }),
85+
],
86+
});
87+
reconnect(wagmiConfig);
88+
89+
const web3Modal = createWeb3Modal({
90+
wagmiConfig: wagmiConfig,
91+
projectId,
92+
enableOnramp: false,
93+
allWallets: "SHOW",
94+
});
95+
3796
@Component({
3897
selector: "near-wallet-selector-wallet-selector",
3998
templateUrl: "./wallet-selector.component.html",
@@ -97,6 +156,7 @@ export class WalletSelectorComponent implements OnInit {
97156
setupNearMobileWallet(),
98157
setupMintbaseWallet({ contractId: CONTRACT_ID }),
99158
setupBitteWallet({ contractId: CONTRACT_ID }),
159+
setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
100160
],
101161
});
102162

‎examples/react/components/Content.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ const Content: React.FC = () => {
179179
],
180180
})
181181
.catch((err) => {
182-
alert("Failed to add message");
182+
alert("Failed to add message " + err);
183183
console.log("Failed to add message");
184184

185185
throw err;
@@ -378,6 +378,10 @@ const Content: React.FC = () => {
378378
<div>
379379
<button onClick={handleSignIn}>Log in</button>
380380
</div>
381+
<div style={{ marginTop: 30 }}>
382+
{/* @ts-ignore */}
383+
<w3m-button label="Log in with Ethereum" />
384+
</div>
381385
<SignIn />
382386
</Fragment>
383387
);
@@ -394,6 +398,12 @@ const Content: React.FC = () => {
394398
<button onClick={handleSwitchAccount}>Switch Account</button>
395399
)}
396400
</div>
401+
{selector.store.getState().selectedWalletId === "ethereum-wallets" && (
402+
<div style={{ marginTop: 30 }}>
403+
{/* @ts-ignore */}
404+
<w3m-button label="Log in with Ethereum" />
405+
</div>
406+
)}
397407
<Form
398408
account={account}
399409
onSubmit={(e) => handleSubmit(e as unknown as Submitted)}

‎examples/react/contexts/WalletSelectorContext.tsx

+91-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet";
2-
import type { AccountState, WalletSelector } from "@near-wallet-selector/core";
2+
import type {
3+
AccountState,
4+
InjectedWalletBehaviour,
5+
WalletSelector,
6+
} from "@near-wallet-selector/core";
37
import { setupWalletSelector } from "@near-wallet-selector/core";
48
import { setupHereWallet } from "@near-wallet-selector/here-wallet";
59
import { setupMathWallet } from "@near-wallet-selector/math-wallet";
@@ -23,6 +27,7 @@ import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet"
2327
import { setupMintbaseWallet } from "@near-wallet-selector/mintbase-wallet";
2428
import { setupBitteWallet } from "@near-wallet-selector/bitte-wallet";
2529
import { setupOKXWallet } from "@near-wallet-selector/okx-wallet";
30+
import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
2631

2732
import type { ReactNode } from "react";
2833
import React, {
@@ -33,6 +38,17 @@ import React, {
3338
useMemo,
3439
} from "react";
3540
import { distinctUntilChanged, map } from "rxjs";
41+
import { createWeb3Modal } from "@web3modal/wagmi";
42+
import type { GetAccountReturnType } from "@wagmi/core";
43+
import {
44+
reconnect,
45+
http,
46+
createConfig,
47+
type Config,
48+
watchAccount,
49+
} from "@wagmi/core";
50+
import { type Chain } from "@wagmi/core/chains";
51+
import { injected, walletConnect } from "@wagmi/connectors";
3652

3753
import { Loading } from "../components/Loading";
3854
import { CONTRACT_ID } from "../constants";
@@ -54,6 +70,60 @@ interface WalletSelectorContextValue {
5470
const WalletSelectorContext =
5571
React.createContext<WalletSelectorContextValue | null>(null);
5672

73+
// Get a project ID at https://cloud.walletconnect.com
74+
const projectId = "30147604c5f01d0bc4482ab0665b5697";
75+
76+
// NOTE: This is the NEAR wallet playground used in dev mode.
77+
// TODO: Replace with the NEAR chain after the protocol upgrade.
78+
const near: Chain = {
79+
id: 398,
80+
name: "NEAR wallet playground",
81+
nativeCurrency: {
82+
decimals: 18,
83+
name: "NEAR",
84+
symbol: "NEAR",
85+
},
86+
rpcUrls: {
87+
default: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
88+
public: { http: ["https://near-wallet-relayer.testnet.aurora.dev"] },
89+
},
90+
blockExplorers: {
91+
default: {
92+
name: "NEAR Explorer",
93+
url: "https://testnet.nearblocks.io",
94+
},
95+
},
96+
testnet: true,
97+
};
98+
99+
const wagmiConfig: Config = createConfig({
100+
chains: [near],
101+
transports: {
102+
[near.id]: http(),
103+
},
104+
connectors: [
105+
walletConnect({
106+
projectId,
107+
metadata: {
108+
name: "NEAR Guest Book",
109+
description: "A guest book with comments stored on the NEAR blockchain",
110+
url: "https://near.github.io/wallet-selector",
111+
icons: ["https://near.github.io/wallet-selector/favicon.ico"],
112+
},
113+
showQrModal: false,
114+
}),
115+
injected({ shimDisconnect: true }),
116+
],
117+
});
118+
reconnect(wagmiConfig);
119+
120+
const web3Modal = createWeb3Modal({
121+
wagmiConfig: wagmiConfig,
122+
projectId,
123+
enableOnramp: false,
124+
allWallets: "SHOW",
125+
});
126+
57127
export const WalletSelectorContextProvider: React.FC<{
58128
children: ReactNode;
59129
}> = ({ children }) => {
@@ -62,6 +132,25 @@ export const WalletSelectorContextProvider: React.FC<{
62132
const [accounts, setAccounts] = useState<Array<AccountState>>([]);
63133
const [loading, setLoading] = useState<boolean>(true);
64134

135+
// Log in with Ethereum flow: auto connect to ethereum-wallets without showing the NEAR modal.
136+
useEffect(() => {
137+
if (!selector) {
138+
return;
139+
}
140+
watchAccount(wagmiConfig, {
141+
onChange: (data: GetAccountReturnType) => {
142+
if (!data.address || selector.store.getState().selectedWalletId) {
143+
return;
144+
}
145+
selector.wallet("ethereum-wallets").then((wallet) =>
146+
(wallet as InjectedWalletBehaviour).signIn({
147+
contractId: CONTRACT_ID,
148+
})
149+
);
150+
},
151+
});
152+
}, [selector]);
153+
65154
const init = useCallback(async () => {
66155
const _selector = await setupWalletSelector({
67156
network: "testnet",
@@ -99,6 +188,7 @@ export const WalletSelectorContextProvider: React.FC<{
99188
setupNearMobileWallet(),
100189
setupMintbaseWallet({ contractId: CONTRACT_ID }),
101190
setupBitteWallet({ contractId: CONTRACT_ID }),
191+
setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
102192
],
103193
});
104194
const _modal = setupModal(_selector, {

‎examples/react/project.json

+5
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,11 @@
101101
"glob": "**/*",
102102
"input": "packages/okx-wallet/assets/",
103103
"output": "assets/"
104+
},
105+
{
106+
"glob": "**/*",
107+
"input": "packages/ethereum-wallets/assets/",
108+
"output": "assets/"
104109
}
105110
]
106111
},

0 commit comments

Comments
 (0)