diff --git a/docs/tools/wallet-selector.md b/docs/tools/wallet-selector.md index 914d494e212..bc0aba7b9b3 100644 --- a/docs/tools/wallet-selector.md +++ b/docs/tools/wallet-selector.md @@ -5,29 +5,41 @@ sidebar_label: NEAR Wallet Selector description: "A single library to connect all NEAR Wallets." --- -The [Wallet Selector](https://github.com/near/wallet-selector) is a `JS`/`TS` library that lets users connect to your application using their preferred wallet. +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; -![Preview](/docs/assets/tools/wallet-selector-preview.png) -*Initial screen of [Wallet Selector](https://near.github.io/wallet-selector/)* +The [Wallet Selector](https://github.com/near/wallet-selector) is a `JS`/`TS` library that lets users connect to your application using their preferred wallet. + +![Preview](/docs/assets/tools/wallet-selector.png) +_Initial screen of [Wallet Selector](https://near.github.io/wallet-selector/)_
List of NEAR Wallets Here is a list of user-friendly wallets that support the NEAR blockchain, you can find more at the [NEAR Wallets](https://wallet.near.org/) page. -- [HERE Wallet](https://www.herewallet.app/): Non-custodial mobile wallet with a friendly user interface and advanced features. +- [Bitget Wallet](https://web3.bitget.com/): A multi-chain wallet supporting NEAR and other blockchains with comprehensive DeFi features. -- [Meteor Wallet](https://wallet.meteorwallet.app/): Both a browser and extension wallet, with advanced NFT features. +- [Coin98 Wallet](https://coin98.com/): A multi-chain wallet and DeFi gateway supporting NEAR and 40+ blockchains. + +- [Hot Wallet](https://hot-labs.org/): A browser-based wallet optimized for development and testing environments. -- [Bitte Wallet](https://github.com/BitteProtocol/wallet): A passkey meta-transaction, browser wallet, with advanced NFT Tooling and AI features. If you're looking to integrate Bitte Wallet into your applications, -- [MyNearWallet](https://mynearwallet.com/): A browser based wallet that offers the same UI and features of `wallet.near.org`. +- [Intear Wallet](https://intear.tech/): A NEAR-focused wallet with seamless integration capabilities. + +- [Math Wallet](https://mathwallet.org/): A multi-platform wallet supporting NEAR and multiple blockchain networks. + +- [Meteor Wallet](https://wallet.meteorwallet.app/): Both a browser and extension wallet, with advanced NFT features. - [NEAR Mobile](https://nearmobile.app/): A non-custodial wallet that is easy to use and well designed to manage your crypto wherever you go. -- [Nightly Wallet](https://wallet.nightly.app/download): A mobile and extension wallet, with support for multiple ecosystems. +- [OKX Wallet](https://www.okx.com/web3): A comprehensive Web3 wallet supporting NEAR and multiple chains with built-in DeFi access. + +- [Ramper Wallet](https://www.ramper.xyz/): A user-friendly wallet with social login features supporting NEAR. - [Sender Wallet](https://sender.org/): Security-audited mobile & extension wallet with 1M+ users, supporting NEAR & Aurora. +- [Unity Wallet](https://www.unitywallet.app/): A wallet designed for seamless NEAR blockchain integration. + - [WELLDONE Wallet](https://welldonestudio.io/): A multi-chain extension wallet that gives you control over all your assets from a single platform.
@@ -48,7 +60,7 @@ You can check the current list of supported wallets in the [README.md](https://g ## Install -The easiest way to use NEAR Wallet Selector is to install the core package from the NPM registry, some packages may require near-api-js v0.44.2 or above check them at packages. +The easiest way to use NEAR Wallet Selector is to install the core package from the NPM registry, some packages may require near-api-js v5.1.1 or above check them at packages. ```bash npm install near-api-js @@ -62,19 +74,21 @@ Next, you'll need to install the wallets you want to support: ```bash npm install \ - @near-wallet-selector/near-wallet \ - @near-wallet-selector/my-near-wallet \ - @near-wallet-selector/sender \ - @near-wallet-selector/nearfi \ - @near-wallet-selector/here-wallet \ + @near-wallet-selector/bitget-wallet \ + @near-wallet-selector/coin98-wallet \ + @near-wallet-selector/ethereum-wallets \ + @near-wallet-selector/hot-wallet \ + @near-wallet-selector/intear-wallet \ + @near-wallet-selector/ledger \ @near-wallet-selector/math-wallet \ - @near-wallet-selector/nightly \ @near-wallet-selector/meteor-wallet \ - @near-wallet-selector/ledger \ - @near-wallet-selector/wallet-connect \ - @near-wallet-selector/nightly-connect \ - @near-wallet-selector/default-wallets \ - @near-wallet-selector/coin98-wallet + @near-wallet-selector/meteor-wallet-app \ + @near-wallet-selector/near-mobile-wallet \ + @near-wallet-selector/okx-wallet \ + @near-wallet-selector/ramper-wallet \ + @near-wallet-selector/sender \ + @near-wallet-selector/unity-wallet \ + @near-wallet-selector/welldone-wallet ``` --- @@ -110,20 +124,59 @@ modal.show(); To integrate the Wallet Selector, you also need to include the required CSS: -``` -import "@near-wallet-selector/modal-ui/styles.css" +```js +import "@near-wallet-selector/modal-ui/styles.css"; ``` ::: --- +## Setup React Hook + +This package provides a React context and hook to easily integrate Wallet Selector into your React application. + +Install the React hook package: + +```bash +npm install @near-wallet-selector/react-hook \ +@near-wallet-selector/modal-ui +``` + +Wrap your app with the provider: + +```jsx +import "@near-wallet-selector/modal-ui/styles.css"; + +import { setupNearWallet } from "@near-wallet-selector/near-wallet"; + +import { WalletSelectorProvider } from "@near-wallet-selector/react-hook"; + +const config = { + network: "testnet", + modules: [setupNearWallet()], +}; + +function App() { + return ( + + {/* Your app components */} + + ); +} +``` + +--- + ## Reference The API reference of the selector can be found [`here`](https://github.com/near/wallet-selector/blob/main/packages/core/docs/api/selector.md) ### Sign in + + + ```ts // NEAR Wallet. (async () => { @@ -132,8 +185,32 @@ The API reference of the selector can be found [`here`](https://github.com/near/ })(); ``` + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { signIn } = useWalletSelector(); + + const handleSignIn = () => { + signIn(); + }; + + return ; +}; +``` + + + + ### Sign out + + + ```ts (async () => { const wallet = await selector.wallet("my-near-wallet"); @@ -141,8 +218,37 @@ The API reference of the selector can be found [`here`](https://github.com/near/ })(); ``` + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { signOut } = useWalletSelector(); + + const handleSignOut = async () => { + try { + await signOut(); + console.log("Successfully signed out"); + } catch (error) { + console.error("Sign out failed:", error); + } + }; + + return ; +}; +``` + + + + ### Get accounts + + + ```ts (async () => { const wallet = await selector.wallet("my-near-wallet"); @@ -151,8 +257,35 @@ The API reference of the selector can be found [`here`](https://github.com/near/ })(); ``` + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { getAccount, signedAccountId } = useWalletSelector(); + const fetchAccountInfo = async (accountId) => { + const account = await getAccount(signedAccountId); + console.log(account); + }; + useEffect(() => { + fetchAccountInfo(); + }, []); + + return
Check console for account info
; +}; +``` + + + + ### Verify Owner + + + ```ts // MyNearWallet (async () => { @@ -163,8 +296,88 @@ The API reference of the selector can be found [`here`](https://github.com/near/ })(); ``` + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { signMessage } = useWalletSelector(); + + const handleVerifyOwner = async () => { + try { + const signedMessage = await signMessage({ + message: "Test message", + recipient: "app.near", + nonce: Buffer.from(Date.now().toString()), + }); + console.log("Message signed:", signedMessage); + } catch (error) { + console.error("Verification failed:", error); + } + }; + + return ; +}; +``` + + + + +### View method + + + + +```ts +(async () => { + const wallet = await selector.wallet("my-near-wallet"); + const result = await wallet.viewMethod({ + contractId: "guestbook.near-examples.testnet", + method: "get_messages", + args: {}, + }); + console.log("View result:", result); +})(); +``` + + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { viewFunction } = useWalletSelector(); + + const handleViewMethod = async () => { + try { + const result = await viewFunction({ + contractId: "guestbook.near-examples.testnet", + method: "get_messages", + args: {}, + }); + console.log("View result:", result); + } catch (error) { + console.error("View method failed:", error); + } + }; + + return ; +}; +``` + + + + ### Sign and send transaction + + + ```ts (async () => { const wallet = await selector.wallet("my-near-wallet"); @@ -173,7 +386,7 @@ The API reference of the selector can be found [`here`](https://github.com/near/ { type: "FunctionCall", params: { - methodName: "addMessage", + methodName: "add_message", args: { text: "Hello World!" }, gas: "30000000000000", deposit: "10000000000000000000000", @@ -184,20 +397,55 @@ The API reference of the selector can be found [`here`](https://github.com/near/ })(); ``` + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { callFunction } = useWalletSelector(); + + const handleTransaction = async () => { + try { + const result = await callFunction({ + contractId: "guestbook.near-examples.testnet", + method: "add_message", + args: { text: "Hello World!" }, + gas: "30000000000000", + deposit: "10000000000000000000000", + }); + console.log("Transaction result:", result); + } catch (error) { + console.error("Transaction failed:", error); + } + }; + + return ; +}; +``` + + + + ### Sign and send transactions + + + ```ts (async () => { const wallet = await selector.wallet("my-near-wallet"); await wallet.signAndSendTransactions({ transactions: [ { - receiverId: "guest-book.testnet", + receiverId: "guestbook.near-examples.testnet", actions: [ { type: "FunctionCall", params: { - methodName: "addMessage", + methodName: "add_message", args: { text: "Hello World!" }, gas: "30000000000000", deposit: "10000000000000000000000", @@ -209,3 +457,48 @@ The API reference of the selector can be found [`here`](https://github.com/near/ }); })(); ``` + + + + + +```jsx +import { useWalletSelector } from "@near-wallet-selector/react-hook"; + +const MyComponent = () => { + const { signAndSendTransactions } = useWalletSelector(); + + const handleBatchTransactions = async () => { + try { + const transactions = [ + { + receiverId: "guestbook.near-examples.testnet", + actions: [ + { + type: "FunctionCall", + params: { + methodName: "add_message", + args: { text: "Hello World!" }, + gas: "30000000000000", + deposit: "10000000000000000000000", + }, + }, + ], + }, + ]; + + const results = await signAndSendTransactions({ transactions }); + console.log("Batch results:", results); + } catch (error) { + console.error("Batch transaction failed:", error); + } + }; + + return ( + + ); +}; +``` + + + diff --git a/website/src/components/tools/index.jsx b/website/src/components/tools/index.jsx index 4ff47622a13..e8a7e2a178c 100644 --- a/website/src/components/tools/index.jsx +++ b/website/src/components/tools/index.jsx @@ -51,7 +51,7 @@ const Tools = () => { async (ft_contracts) => { if (!signedAccountId) return []; if (!ft_contracts.length) return []; - console.log("hello", ft_contracts); + setLoadingFT(true); const getFTData = async (contract_id) => { @@ -61,7 +61,6 @@ const Tools = () => { method: 'ft_balance_of', args: { account_id: signedAccountId }, }); - console.log(`FT balance for ${contract_id}:`, balance); if (balance === '0') return { contract_id, balance, metadata: {}, verified: false }; const metadata = (await viewFunction({ contractId: contract_id, method: 'ft_metadata' })); diff --git a/website/static/docs/assets/tools/wallet-selector.png b/website/static/docs/assets/tools/wallet-selector.png new file mode 100644 index 00000000000..a94c478df5a Binary files /dev/null and b/website/static/docs/assets/tools/wallet-selector.png differ