Example response
@@ -306,7 +306,7 @@ DEXs work by having multiple pools of token pairs (e.g. NEAR-USDC) that users ca }); ``` - Learn more about adding the [Wallet Selector Hooks](../web3-apps/tutorials/web-login/wallet-selector.md) to your application + Learn more about adding [Near Connect](../web3-apps/tutorials/wallet-login) to your applicationExample response
@@ -498,7 +498,7 @@ In order to swap a token for another, you need to [have funds](#deposit-funds), }); ``` - Learn more about adding the [Wallet Selector Hooks](../web3-apps/tutorials/web-login/wallet-selector.md) to your application + Learn more about adding [Near Connect](../web3-apps/tutorials/wallet-login) to your applicationExample response
diff --git a/docs/primitives/ft/ft.md b/docs/primitives/ft/ft.md index 373e8dac2b7..bd0c794ac1c 100644 --- a/docs/primitives/ft/ft.md +++ b/docs/primitives/ft/ft.md @@ -68,7 +68,7 @@ Here is how to directly interact with the factory contract through your applicat }); ``` - Learn more about adding the [Wallet Selector Hooks](../../web3-apps/tutorials/web-login/wallet-selector.md) to your application + Learn more about adding [Near Connect](../../web3-apps/tutorials/wallet-login) to your application
@@ -388,7 +388,7 @@ In both cases, it is necessary to invoke the `nft_transfer` method, indicating t
});
```
- Learn more about adding the [Wallet Selector Hooks](../../web3-apps/tutorials/web-login/wallet-selector.md) to your application
+ Learn more about adding [Near Connect](../../web3-apps/tutorials/wallet-login) to your application
Manually managing keys in the browser (not recommended)
@@ -1672,7 +1670,7 @@ Users can sign messages using the `wallet-selector` `signMessage` method, which
-
-
----
-
-## Unlocking the wallet ecosystem
-
-Wallet Selector makes it easy for users to interact with dApps by providing an abstraction over various wallets and wallet types within the NEAR ecosystem.
-
-:::info
-
-You can check the current list of supported wallets in the [README.md](https://github.com/near/wallet-selector/blob/main/README.md) file of near/wallet-selector repository.
-
-:::
-
----
-
-## 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 v5.1.1 or above check them at packages.
-
-```bash
-npm install near-api-js
-```
-
-```bash
-npm install @near-wallet-selector/core
-```
-
-Next, you'll need to install the wallets you want to support:
-
-```bash
-npm install \
- @near-wallet-selector/modal-ui \
- @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/meteor-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
-```
-
----
-
-## Setup
-
-The wallet selector can be set up in two ways: by using its `core` API, or by importing its `React context/hooks` into your app:
-
-
-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. - -- [Bitget Wallet](https://web3.bitget.com/): A multi-chain wallet supporting NEAR and other blockchains with comprehensive DeFi 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. - -- [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. - -- [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. - -Signed in as {signedAccountId}
;
- } else {
- return Not signed in
;
- }
-};
-```
-
-
-*High-level architecture of Ethereum wallets on NEAR*
-
-- -### Transaction Encoder - -The `Translator Encoder` - implemented [directly in the NEAR Wallet Selector](https://github.com/near/wallet-selector/blob/main/packages/ethereum-wallets/src/lib/index.ts) - takes the intent of the user (e.g. call `set_greeting` on `hello.near`) and translates it into an Ethereum transaction that the EVM wallet can sign. - -#### To (field) -The `to` field of the Ethereum transaction is transformed following these rules: -- If the `receiverId` matches `^0x[a-f0-9]{40}$` (e.g. `0xD79...314`), then the `to` field is set to the `receiverId` -- Otherwise (e.g. `ana.near` or an implicit account) the `to` field is set as `keccak-256(receiverId)[12,32]` - -#### Data (field) -The `data` field meanwhile contains the RLP-encoded NEAR actions wanted by the user, encoded as function calls on Ethereum, for example: -- `FunctionCall(to: string, method: string, args: bytes, yoctoNear: uint32)` -- `Transfer(to: string, yoctoNear: uint32)` -- `Stake(public_key: bytes, yoctoNear: uint32)` -- `AddKey(public_key: bytes, nonce: uint64, is_full_access: bool, allowance: uint256, receiver_id: string, method_names: string[])` - -:::info - -For more information on how other fields (such as `value`, `gas`, and `chainId`) are set, please refer to the [NEP-518 technical specification](https://github.com/near/NEPs/issues/518) - -::: - -
- -### Translator RPC - -The `Translator RPC` is a service deployed at `https://eth-rpc.mainnet.near.org` (for mainnet) and `https://eth-rpc.testnet.near.org` (for testnet) that translates Ethereum RPC calls into NEAR RPC calls. - -In other words, the `Translator RPC` simply acts as a relayer, taking the Ethereum transactions signed by the user and translating them into a function call into the `Wallet Contract` deployed in the user's account. - -
- -### Wallet Contract - -The `Wallet Contract` is a smart contract on NEAR that allows NEAR accounts to process EVM transactions. - -The contract exposes a method called `rlp_execute`, which takes as argument an RLP-encoded Ethereum transaction, verifies its signature, and executes the NEAR actions encoded in the `data` field of the transaction. - -Every NEAR account created through an EVM wallet has the `Wallet Contract` deployed on it. - -:::tip Wallet Accounts - -Remember that in NEAR **all accounts** can **have contracts**, and that **contracts** can perform **all the actions** that the **account can do**. - -::: - ---- - -## How it Works? - -Let's see how the components described above interact when a user logs in and uses an application. - -
- -### First Time Login - -The first time you login through your EVM wallet, the wallet selector will contact the account `ethereum-wallets.near` to create a NEAR account with the same address as your Ethereum wallet. For example, if your address on Metamask is `0xD79...314`, the NEAR account created will be `0xD79...314`. - -On this account, the `Wallet Contract` is deployed and a function-call key is added for the `rlp_execute` function of the contract - -
-*On your first login, a NEAR accounts with the same address as your Ethereum wallet is created, and the Wallet Contract is deployed on it*
-
-- -### Using the Account - -Once you have logged in, you can start interacting with the application. If at some point the application needs to interact with the blockchain, Metamask will ask you to sign a transaction. - -Under the hood, Metamask will create an Ethereum transaction and send it to the `Translator API`, deployed at `https://eth-rpc.mainnet.near.org`. - -The `Translator API` will then translate the Ethereum transaction into a **function call** into the `Wallet Contract` deployed in your account. Particularly, it will call the `rlp_execute` function, passing the Ethereum transaction as an argument. - -
-
-The `Wallet Contract` will then execute the function call, and the application will receive the result.
-
----
-
-## Resources
-
-Check the following resources to learn more about Ethereum wallets on NEAR:
-
-- [Adding EVM Wallets to your NEAR App](../tutorials/web-login/ethereum-wallets.md) - Step-by-step tutorial on how to add Ethereum wallets support to your NEAR app
-- [NEP-518 Technical Specification](https://github.com/near/NEPs/issues/518) - Full technical specification of how Ethereum wallets work on NEAR
diff --git a/docs/web3-apps/concepts/web-login.md b/docs/web3-apps/concepts/web-login.md
index af74bf0ccd4..9c2fa9aa9b3 100644
--- a/docs/web3-apps/concepts/web-login.md
+++ b/docs/web3-apps/concepts/web-login.md
@@ -10,78 +10,32 @@ integrate web login into your web app or website, each tailored to different use
Once the user is logged in, they will be able to use their accounts to interact with the NEAR blockchain, making
call to smart contracts, transfer tokens, and more.
-
-
-
-
----
-
-## Wallet Selector
-
-The [wallet selector](https://github.com/near/wallet-selector) is a javascript library that allows you to easily add a `modal popup` to your web, so users can login using one of the existing [NEAR wallets](https://wallet.near.org).
-
-It includes support for the most popular wallets, and `react hooks` to easily integrate it into your app.
-
-
-
-
-:::tip
-
-You can learn how to integrate the wallet selector into your app in our [Wallet Selector Tutorial](../tutorials/web-login/wallet-selector.md) guide.
-
-:::
-
---
## NEAR Connector
-Considered a successor to the wallet selector, the [NEAR Connector](https://github.com/AZbang/hot-connector) is a zero-dependency lightweight library that allows users to connect to your dApp using their preferred wallet.
+[NEAR Connect](https://github.com/azbang/near-connect) is a zero-dependency lightweight library that allows users to connect to your dApp using their preferred wallet. It uses a secure sandbox-based architecture where wallet scripts run in isolated iframes.
:::tip
-
-You can learn how to integrate the `near connector` into your app in the [NEAR Connector tutorial](../tutorials/web-login/near-connector.md).
-
+You can learn how to integrate NEAR Connect into your app in the [NEAR Connector tutorial](../tutorials/wallet-login.md)
:::
---
-## Privy Social Login
+## Social Login
[Privy](https://www.privy.io/) is a third-party service that allows users to login using their email or social accounts (Google, Facebook, Twitter, etc). Upon login, a NEAR wallet is created for the user, which they can fund and use to interact with your dApp.
-
-
:::tip
Check our [Privy Integration Example](https://github.com/near-examples/hello-privy/) to learn how to integrate Privy into your web app
:::
----
-
-## Web3Auth
-
-[Web3Auth](https://web3auth.io/) is a third-party service that allows users to login using their email or social accounts (Google, Facebook, Twitter, etc). Upon login, a NEAR wallet is created for the user, which they can fund and use to interact with your dApp.
-
-
-
-:::tip
-
-Check our [Web3Auth Integration Example](https://github.com/near-examples/hello-web3auth/) to learn how to integrate Privy into your web app
+
+:::info Web3Auth
+For an alternative social login method you can check [Web3Auth](https://web3auth.io/). We have a functional [Web3Auth Integration Example](https://github.com/near-examples/hello-web3auth/) to show how to integrate Web3Auth into your web app.
:::
-
-:::warning Ethereum Wallets
-The ethereum wallet login offered by Web3Auth will not allow you to interact with NEAR contracts
-:::
\ No newline at end of file
diff --git a/docs/web3-apps/quickstart.md b/docs/web3-apps/quickstart.md
index 52194bcccaf..7884284925e 100644
--- a/docs/web3-apps/quickstart.md
+++ b/docs/web3-apps/quickstart.md
@@ -13,42 +13,29 @@ In this guide we will show you how to quickly spin up a frontend where users can
:::tip Searching to integrate NEAR in your App?
-If you already have an application and want to integrate NEAR into it, we recommend you to first go through this guide and then check our documentation on [integrating NEAR to a frontend](./tutorials/web-login/wallet-selector.md)
+If you already have an application and want to integrate NEAR into it, we recommend you to first go through this guide and then check our documentation on [integrating NEAR to a frontend](./tutorials/wallet-login.md)
:::
---
-## Create NEAR App
-If you already have [Node.js](https://nodejs.org/en/download) installed, simply run:
+## Template Setup
+If you already have [Node.js](https://nodejs.org/en/download) installed, you can use `create-near-app` to quickly setup a template:
```bash
npx create-near-app@latest
-```
-
-Use the interactive menu to set up:
-1. `A Web App`.
-2. `NextJs (Classic)`.
-
-Summary of Available Methods
- -| Method | Wallet Login | Social Login | Key Owners | Description | -|-------------------------------------------|--------------|--------------|------------|--------------------------------------------------| -| [Wallet Selector](#wallet-selector) | β | β | User | Popup modal to select from existing NEAR wallets | -| [NEAR Connector](#near-connector) | β | β | User | Popup modal to select from existing NEAR wallets | -| [Privy Social Login](#privy-social-login) | β | β | | Developer | -| [Web3Auth](#web3auth) | β | β | User | Login using email or social accounts | - -
-
-
-:::tip Using pnpm
-While you can use our app with any package manager, we recommend you to skip the installation step and manually install the dependencies using `pnpm i`.
-:::
+ # β What do you want to build? βΊ Web Application
+ # β Select a framework for your frontend βΊ Next.js (Classic)
+ # β Name your project (we will create a directory with that name) β¦ near-template
+ # β Run 'npm install' now? β¦ yes
+```
Once the folder is ready - and all dependencies installed - you can start the development server using `pnpm`.
```bash
-pnpm dev
+cd near-template # go to your project folder
+npm run dev
```
Visit `http://localhost:3000` in your browser to view the dApp. Note that since the dApp uses NextJS the app might take longer to load the pages on first visit.
@@ -56,18 +43,14 @@ Visit `http://localhost:3000` in your browser to view the dApp. Note that since
More boilerplate options from `create-near-app`
- -Using `create-near-app` you can also set up: - - NextJs (App Router) - - Vite (React) - - JS/TS Smart Contract - - Rust Smart Contract -The app is not starting?
-Make sure you are using **node >= v18**, you can easily switch versions using `nvm use 18` +Make sure you are using **node >= v22**, you can easily switch versions using `nvm use 22`-:::info Info: Community Starter Templates - - These are some community templates that you can use to start quickstart your project. Refer to their pages for more information: - * [Bitte Templates](https://github.com/Mintbase/templates) - A `collection` of templates from Bitte and MintBase - * [NEARBuilders/near-vite-starter](https://github.com/NEARBuilders/near-vite-starter) - `Vite`, `TypeScript`, `Tanstack`, `Tailwind`,`Playwright` - +:::tip Framework +In this tutorial we are using the **Next.js** framework with the "classic" page-based routing, but you can select other frameworks such as Vite when creating the app ::: + --- ## Landing Page @@ -81,46 +64,28 @@ Go ahead and sign in with your NEAR account. If you don't have one, you can crea
-### Under the Hood - -[Next.js](https://nextjs.org/) uses a template system, where each page is a React component. +### Context Provider -Our app's template is defined at `./src/pages/_app.js`. It does two things: +[Next.js](https://nextjs.org/) uses a template system, where each page is a React component. Our main logic is defined at `./src/pages/_app.js`, which: -1. Initializes a [wallet selector](../tools/wallet-selector.md), and stores it in context so other components can access it later. -2. Renders the navigation menu and the page's content. +1. Creates a `NearProvider` that wraps the entire application to provide NEAR functionality +2. Renders the navigation menu and the page's content -
-
What is the wallet selector?
+What is NEAR Connect Hooks?
-The wallet selector is a modal that allows users to select their preferred Near wallet to login. Our application creates a new instance of the wallet selector then stores it in the apps context so it can be accessed by other components. +NEAR Connect is a library that allows users to select their preferred NEAR wallet to login, our application uses **hooks** that wrap its functionality to make it easier to use-### Navigation Bar & Login -The navigation bar implements buttons to `login` and `logout` users with their Near wallet. - -The code for the navigation bar can be found at `./src/components/navigation.js`. The login and logout buttons are implemented by using the `signIn` and `signOut` methods from the wallet selector previously initialized: +### Navigation Bar +The navigation bar implements a button to allow users to `login` and `logout` with their NEAR wallet. The main logic comes from the `useNearWallet` hook, which exposes all wallet related functionality. -
-### Under the Hood -We retrieve the `wallet` we initialized earlier via the `useContext` hook. The wallet allows us to interact with the smart contract through `viewMethod` and `callMethod`. +### Function Call Hooks +Just like the [navigation bar](#navigation-bar), we use the `useNearWallet` hook to get functions that allow us to call methods on the contract: - `viewMethod` is used to call functions that are read-only - `callMethod` is used to call functions that modify the state of the contract -
+
+
+
+---
+
+## Signing In / Out
+
+Selecting Wallets
+ +Unlike traditional wallet selectors that bundle wallet code, NEAR Connect uses a **manifest-based approach**: + +1. Wallet providers register their integration scripts in a public manifest +2. The connector dynamically loads wallet scripts when users want to connect + +This architecture eliminates the need to install individual wallet packages and ensures wallet code can be updated independently from your app. + +```tsx +connector = new NearConnector({ + network: "testnet", // or "mainnet" + features: { + signMessage: true, // Only show wallets that support message signing + signTransaction: true, + signInWithoutAddKey: true, + signAndSendTransaction: true, + signAndSendTransactions: true + }, +}); +``` + +- -### Wallet Selector Packages - - -In your `package.json`, add the `@near-wallet-selector/ethereum-wallets` package, and update **all** wallet selector packages to version `8.9.13` or above: - -
- -### Add Web3Modal libraries - -[Web3Modal (also known as AppKit)](https://reown.com/appkit) is a standard way to integrate multiple wallets in Ethereum community. - -It is based on [wagmi] hooks library for React. We will describe the React integration here, but if you are on another platform - just go [here](https://docs.reown.com/appkit/overview#get-started), and try using specific instructions suitable for you to install it. - -```bash -npm install @reown/appkit-adapter-wagmi @reown/appkit @wagmi/core viem -``` - ---- - -## 2. Add Web3Modal - -First, let's create a new file to handle the Web3Modal (i.e. the modal shown when selecting the `Ethereum Wallets` on the `Wallet Selector`), and all the configs needed to setup the Ethereum Wallets. - -
-
-
-:::tip
-
-Make sure to call `reconnect(wagmiConfig)` in your code, to persist the connection between the app and the wallet when the user refreshes the page
-
-:::
-
-Metadata
- - You can pass a `metadata` object to the `walletConnect` connector. This object will be displayed in the EVM wallets, like MetaMask. - - ```js title="source/wallets/web3modal.js" - const url = "http://localhost:3000"; - - const metadata = { - name: "Onboard to NEAR Protocol with EVM Wallet", - description: "Discover NEAR Protocol with Ethereum and NEAR wallets.", - url: url, - icons: [`${url}/icon.svg`], - }; - ``` - - This tracks the app requesting the connection on the WalletConnect side. See more [here](https://wagmi.sh/core/api/connectors/walletConnect#metadata). - -- -### Get `projectId` - -Notice that the modal uses a `projectId`, which refers to your unique project on `Reown`. Let's get the Web3Modal `projectId` for your project: - -1. Go to [Cloud Reown](https://cloud.reown.com/). -2. Register there. -3. Create a project on Cloud Reown. -4. You can copy your `projectId`: - - - -:::tip - -You can read more about the `projectId` and how it works [here](https://docs.reown.com/appkit/react/core/installation#cloud-configuration). - -::: - ---- - -## 4. Setup Wallet Selector - -The last step is to add the Ethereum Wallets selector to your Near Wallet Selector. Let's find your `setupWalletSelector` call and add `setupEthereumWallets` there: - -```js showLineNumbers -import { setupWalletSelector } from '@near-wallet-selector/core'; -import { wagmiConfig, web3Modal } from '@/wallets/web3modal'; -import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets"; -``` - -
- -### Selecting Wallets - -Unlike traditional wallet selectors that bundle wallet code, NEAR Connect uses a **manifest-based approach**: - -1. Wallet providers register their integration scripts in a public manifest -2. The connector dynamically loads wallet scripts when users want to connect - -This architecture eliminates the need to install individual wallet packages and ensures wallet code can be updated independently from your app. - -```tsx -connector = new NearConnector({ - network: "testnet", // or "mainnet" - features: { - signMessage: true, // Only show wallets that support message signing - signTransaction: true, - signInWithoutAddKey: true, - signAndSendTransaction: true, - signAndSendTransactions: true - }, -}); -``` - -
- -### Creating an Access Key - -The connector can request a [Function-Call Key](/protocol/access-keys#function-call-keys) for a specific contract on behalf of the user. This allows your app to interact with the contract without asking the user to sign every transaction. - -```tsx title="lib/near.ts" -const connector = new NearConnector({ - network: "testnet", // or "mainnet" - - // Optional: Request access key for contract interaction - connectWithKey: { - contractId: "your-contract.testnet", - methodNames: ["method1", "method2"], - allowance: "250000000000000", // 0.25 NEAR - }, -}); -``` - ---- - -## Signing In - -The connector uses the Observer Pattern (pub/sub), for which we need to do two things: - -1. Subscribe to the `signIn` event: - -```tsx -connector.on("wallet:signIn", async({ wallet, accounts, success }) => { - const address = await wallet.getAddress(); - console.log(`User signed in: ${address}`); -}); -``` - -2. Call the `connect` function to open a modal where the user can select a wallet and sign in: - -```tsx - -``` - ---- - -## Signing Out - -Similarly, to sign out we need to subscribe to the `signOut` event and call the `disconnect` function: - -```tsx -// Listen for sign-out -connector.on("wallet:signOut", () => { - console.log("User signed out"); -}); - -// Disconnect current wallet - -``` - ---- - -## Calling Contract Method - -To call a contract method, first get the connected wallet instance using `connector.wallet()`, then use the wallet's `signAndSendTransaction` method to make a function call: - -```tsx -// Get the connected wallet -const wallet = await connector.wallet(); - -// Call a change method -const result = await wallet.signAndSendTransaction({ - receiverId: "hello.near-examples.testnet", - actions: [ - { - type: "FunctionCall", - params: { - methodName: "set_greeting", - args: { greeting: "Hello from NEAR Connect!" }, - gas: "30000000000000", // 30 TGas - deposit: "0", // No deposit - }, - }, - ], -}); - -console.log("Transaction:", result.transaction.hash); -``` - -
-
-
-
----
-
-## Send Multiple Transactions
-
-You can request the user to sign and send multiple transactions in parallel through a single prompt:
-
-```tsx
-const wallet = await connector.wallet();
-
-const results = await wallet.signAndSendTransactions({
- transactions: [
- {
- receiverId: "token.near",
- actions: [
- {
- type: "FunctionCall",
- params: {
- methodName: "ft_transfer",
- args: {
- receiver_id: "alice.near",
- amount: "1000000",
- },
- gas: "30000000000000",
- deposit: "1", // 1 yoctoNEAR for security
- },
- },
- ],
- },
- {
- receiverId: "nft.near",
- actions: [
- {
- type: "FunctionCall",
- params: {
- methodName: "nft_mint",
- args: {
- token_id: "token-1",
- receiver_id: "alice.near",
- },
- gas: "30000000000000",
- deposit: "10000000000000000000000", // 0.01 NEAR
- },
- },
- ],
- },
- ],
-});
-
-console.log(`Completed ${results.length} transactions`);
-```
-
----
-
-### Sign Messages (NEP-413)
-
-In NEAR, users can sign messages for authentication purposes without needing to send a transaction:
-
-```tsx
-const wallet = await connector.wallet();
-
-const signature = await wallet.signMessage({
- message: "Please sign this message to authenticate",
- recipient: "your-app.near",
- nonce: Buffer.from(crypto.randomUUID()),
-});
-
-console.log("Signature:", signature.signature);
-console.log("Public Key:", signature.publicKey);
-
-// Verify the signature on your backend
-```
-
----
-
-## React Integration
-
-For React applications, the `near-connector` can be easily integrated using a custom hook.
-
-Check out our example [`useNear` hook](https://github.com/near-examples/hello-near-connector/blob/main/src/hooks/useNear.jsx) which handles:
-- Connector initialization
-- Auto-reconnect on page load
-- Event listener management and cleanup
-- Wallet state synchronization
-- Error handling
diff --git a/docs/web3-apps/tutorials/web-login/wallet-selector.md b/docs/web3-apps/tutorials/web-login/wallet-selector.md
deleted file mode 100644
index f61ca25e7ca..00000000000
--- a/docs/web3-apps/tutorials/web-login/wallet-selector.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-id: wallet-selector
-title: Wallet Selector Tutorial
-description: "Enable users to sign-in using their NEAR wallet with the Wallet Selector"
----
-import {CodeTabs, Language, Github} from "@site/src/components/UI/Codetabs"
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-Allowing your users to connect with their favorite wallet and interact with your dApp is a crucial step in building web3 applications. This guide will help you to integrate the `Wallet Selector` into your frontend, enabling users to sign-in and perform transactions using their NEAR wallet.
-
-
-
-:::tip
-
-To see a fully working example, check our [Hello NEAR Example](https://github.com/near-examples/hello-near-examples/frontend), a simple app that allows users to set and get a greeting message on the NEAR blockchain
-
-:::
-
-:::info
-
-Check other options to let users login into your application and use NEAR accounts in the [Web Login](../../concepts/web-login.md) section
-
-:::
-
----
-
-## Adding the Wallet Selector
-
-To start, you will need to add the `Wallet Selector` and its dependencies to your project.
-
-If you prefer to explore the complete code example, you can check the [hello-near-example](https://github.com/near-examples/hello-near-examples/tree/main/frontend) repository:
-
-```bash
-npm install \
- @near-wallet-selector/modal-ui \
- @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/meteor-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
-```
-
-Notice that the wallet selector implements multiple wallet packages to select from, [see the full list on the Repo](https://github.com/near/wallet-selector)
-
----
-
-## Initialize the Selector
-
-To initialize the wallet selector, you will need to set it up in your main application file (e.g., `app.js` or `index.js`). You can choose which wallets to include in the selector by importing their respective setup functions and adding them to the `modules` array.
-
-Read-only Methods
- -The `near-connector` does not provide a built-in way to call read-only (view) methods. - -However, you can use the `@near-js/providers` package to create a JSON-RPC provider and call view methods directly: - -```tsx -import { JsonRpcProvider } from "@near-js/providers"; - -const provider = new JsonRpcProvider({ url: "https://test.rpc.fastnear.com" }); - -const greeting = await provider.callFunction( - "hello.near-examples.testnet", - "get_greeting", - {} -); -``` - -- -### Custom RPC - -If you want to use a user-defined RPC endpoint with the Wallet Selector, you can set up a [network options](https://github.com/near/wallet-selector/tree/main/packages/core#options) object with the custom URLs. -For example: - - -```js -const my_network = { - networkId: "my-custom-network", - nodeUrl: "https://rpc.custom-rpc.com", - helperUrl: "https://helper.custom-helper.com", - explorerUrl: "https://custom-explorer.com", - indexerUrl: "https://api.custom-indexer.com", -}; -``` - -
- -### Creating an Access Key - -If you instantiated the `wallet-selector` passing an account id for the `createAccessKeyFor` parameter, then the wallet will create a [Function-Call Key](/protocol/access-keys#function-call-keys) and store it in the web's local storage. - -
- -## Sending Multiple Transactions - -The wallet-selector hook also exposes a method that can be used to send multiple transactions at once: - -```js -const { signAndSendTransactions } = useWalletSelector(); - -const txs = await signAndSendTransactions({ - transactions: [{ - receiverId: "hello.near-examples.testnet", - actions: [{ - type: "FunctionCall", - params: { - methodName: "set_greeting", - args: { - greeting: "Hello World" - }, - gas: THIRTY_TGAS, - deposit: NO_DEPOSIT - } - }] - }] -}); -``` - -Transactions can either be sent as multiple separate transactions simultaneously or as a batch transaction made up of actions where if one of the actions fails, they are all reverted. - -An example of both can be seen [here](../../../tutorials/examples/frontend-multiple-contracts#dispatching-multiple-transactions). - ---- - -## Querying Account Balance - -By calling the `getBalance` method the user can get the balance of a given account. - -```js -const { getBalance } = useWalletSelector(); - -const balance = await getBalance("account.testnet"); -``` - - ---- - -## Get Access Keys - -The final method the wallet selector hooks exposes is `getAccessKeys`, which is used to return an object of all the access keys on the account that is currently logged in. - -```js -const { getAccessKeys } = useWalletSelector(); - -const keys = await getAccessKeys("account.testnet"); -``` - -::: - -:::note Versioning for this article - -At the time of this writing, this example works with the following versions: - -- next: `15.0.3` -- near-api-js: `^5.0.1` -- wllet-selector/core: `^8.10.0` - -::: diff --git a/docs/web3-apps/tutorials/web-login/web3-auth.md b/docs/web3-apps/tutorials/web-login/web3-auth.md deleted file mode 100644 index ad4704b3cb6..00000000000 --- a/docs/web3-apps/tutorials/web-login/web3-auth.md +++ /dev/null @@ -1,213 +0,0 @@ ---- - -id: web3-auth -title: Web3Auth Social Login Integration -sidebar_label: Web3Auth Integration ---- - -import {Github} from "@site/src/components/UI/Codetabs" - - -# Integrating Web3Auth with NEAR - -This tutorial demonstrates how to integrate [Web3Auth](https://web3auth.io/) into a NEAR application, enabling users to log in with social accounts (Google, Facebook, Twitter, etc.) while maintaining full blockchain functionality. - -:::tip What is Web3Auth? - -Web3Auth is a pluggable authentication infrastructure that allows users to authenticate using familiar Web2 logins (OAuth providers like Google, Facebook, etc.) while generating a cryptographic key pair for Web3 interactions. This provides a seamless onboarding experience without requiring users to manage seed phrases or private keys directly. - -::: - -## Clone and Install - -Start by cloning the repository and installing dependencies: - -```bash -git clone https://github.com/near-examples/hello-web3auth.git -cd hello-web3auth/modal -yarn install -``` - ---- - - -## Get Web3Auth Credentials - -To enable social login, you need to create a Web3Auth project and obtain a Client ID. - -### Create a Web3Auth Account - -1. Go to [Web3Auth Dashboard](https://dashboard.web3auth.io/) -2. Sign up or log in with your preferred method -3. You'll be redirected to the dashboard - -### Create a New Project - -1. Click on **"Add new project"** -2. Fill in the project details: - - **Project Name**: Choose a descriptive name (e.g., "NEAR Social Login") - - **Environment**: Select **"Sapphire Devnet"** for development - - **Chain Namespace**: Choose **"Other"** (since NEAR is not natively supported) -3. Click **"Create"** - -### Configure Your Project - -1. Once created, click on your project to open its settings.In this section you can find Client ID and Client Secret which will be used in the application configuration. -2. Change the **Select Product** to **MPC Core Kit** -3. Change **Project platform** to **Web Application** -4. Go to the **"Domains"** tab -5. Add your application's URLs: - - **Whitelist URLs**: Add `http://localhost:5173` for local development - - For production, add your deployed URL (e.g., `https://yourdomain.com`) - ---- - -## Configure Google OAuth (Optional but Recommended) - -While Web3Auth provides default OAuth providers, setting up your own Google OAuth gives you more control and branding. - -### Create a Google Cloud Project - -1. Open the [Google Cloud Console](https://console.cloud.google.com/). -2. Click Select a project β New Project (or choose an existing project). -3. Enter a project name (for example, NEAR Web3Auth) and click Create. -4. In the left sidebar, go to **APIs & Services** β **OAuth consent screen** ([direct link](https://console.cloud.google.com/auth/overview/create)). - - -### Configure OAuth Consent Screen - -1. Go to **"APIs & Services"** β **"OAuth consent screen"** -2. Choose **"External"** (unless you have a Google Workspace) -3. Fill in the required information: - - **App name**: Your application name - - **User support email**: Your email - - **Developer contact**: Your email -4. Click **"Save and Continue"** -5. On the **Scopes** page, click **"Save and Continue"** (default scopes are fine) -6. On the **Test users** page, add your email for testing -7. Click **"Save and Continue"** - -### Create OAuth Credentials - -1. Go to **"APIs & Services"** β **"Credentials"** -2. Click **"+ Create Credentials"** β **"OAuth client ID"** ([direct link](https://console.cloud.google.com/auth/clients/create)) -3. Select **"Web application"** -4. Configure: - - **Name**: Choose a descriptive name - - **Authorized JavaScript origins**: - - Add `http://localhost:5173` (for development) - - Add your production domain (when ready) - - **Authorized redirect URIs**: - - Add `https://auth.web3auth.io/auth` - - This is Web3Auth's callback URL -5. Click **"Create"** -6. Copy the **Client ID** and **Client Secret** - -### Add Google Credentials to Web3Auth - -1. Return to [Web3Auth Dashboard](https://dashboard.web3auth.io/) -2. Go to the **Authentication** in left sidebar -3. Click on **Google** in social Logins -4. Click on **Add connection** and fill in the following details: - - **Auth Connection ID***: Your desired connection ID (e.g., `near-login`),This use for verifier value in application configuration. - - **Enter Google Client ID***: Your Google OAuth Client Secret from previous step.(e.g., `17426988624-32m2gh1o1n5qve6govq04ue91sioruk7WWapps.googleusercontent.com`) - ---- - -## Configure Your Application - -Now that you have your Web3Auth Client ID, update your application configuration. - -### Update the Config File - -Open `src/config.js` and replace the `clientId` with your own: - -