Skip to content

Commit

Permalink
Merge pull request #1106 from aurora-is-near/ethereum-wallets
Browse files Browse the repository at this point in the history
Ethereum wallets selector.
  • Loading branch information
trechriron authored Jul 25, 2024
2 parents 6b84315 + 6a4757d commit 49e2ce1
Show file tree
Hide file tree
Showing 27 changed files with 5,896 additions and 1,009 deletions.
11 changes: 8 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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.
Expand All @@ -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:
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -185,6 +189,7 @@ const selector = await setupWalletSelector({
callbackUrl: "https://www.mywebsite.com",
deprecated: false,
}),
setupEthereumWallets({ wagmiConfig, web3Modal }),
],
});

Expand Down
7 changes: 6 additions & 1 deletion examples/angular/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand All @@ -120,7 +125,7 @@
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "5mb"
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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",
Expand Down Expand Up @@ -97,6 +156,7 @@ export class WalletSelectorComponent implements OnInit {
setupNearMobileWallet(),
setupMintbaseWallet({ contractId: CONTRACT_ID }),
setupBitteWallet({ contractId: CONTRACT_ID }),
setupEthereumWallets({ wagmiConfig, web3Modal, devMode: true }),
],
});

Expand Down
12 changes: 11 additions & 1 deletion examples/react/components/Content.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
);
Expand All @@ -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)}
Expand Down
92 changes: 91 additions & 1 deletion examples/react/contexts/WalletSelectorContext.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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, {
Expand All @@ -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";
Expand All @@ -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 }) => {
Expand All @@ -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",
Expand Down Expand Up @@ -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, {
Expand Down
5 changes: 5 additions & 0 deletions examples/react/project.json
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@
"glob": "**/*",
"input": "packages/okx-wallet/assets/",
"output": "assets/"
},
{
"glob": "**/*",
"input": "packages/ethereum-wallets/assets/",
"output": "assets/"
}
]
},
Expand Down
Loading

0 comments on commit 49e2ce1

Please sign in to comment.