diff --git a/docs/web3-apps/concepts/web-login.md b/docs/web3-apps/concepts/web-login.md
index af74bf0ccd4..3fe8e8b26a2 100644
--- a/docs/web3-apps/concepts/web-login.md
+++ b/docs/web3-apps/concepts/web-login.md
@@ -1,87 +1,75 @@
---
-title: Web Login Methods
+title: Web Login Methods for NEAR
id: web-login
-description: "Learn all the login options available for your website or web app"
+description: "Learn wallet connection options for your NEAR web app"
---
-NEAR offers multiple options to allow users to login using NEAR accounts. Below are the most popular methods to
-integrate web login into your web app or website, each tailored to different use cases and user experiences.
+NEAR offers multiple wallet connection methods. The modern NEAR Connect approach is recommended for new projects.
-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.
-
-
-
- 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 |
-
-
-
----
-
-## 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.
-
-:::
+| Method | Dependencies | Maintenance | Recommendation |
+|--------|--------------|--------------|----------------|
+| **NEAR Connect** | Zero | Distributed | **Recommended** |
+| Wallet Selector | Multiple | Centralized | Legacy |
+| Privy | Third-party | Third-party | Social login |
+| Web3Auth | Third-party | Third-party | Social login |
---
-## NEAR Connector
+## NEAR Connect (Recommended)
-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 modern wallet connector for NEAR. Created by Andrei Zhevlakov (CTO at HOT Labs), it solves maintenance issues of the legacy approach.
-:::tip
+### Key Benefits
+- Zero dependencies
+- Sandboxed security
+- Dynamic wallet updates
+- Better performance
-You can learn how to integrate the `near connector` into your app in the [NEAR Connector tutorial](../tutorials/web-login/near-connector.md).
+```bash
+yarn add @hot-labs/near-connect
+```
-:::
+```tsx
+import { NearConnector } from "@hot-labs/near-connect";
----
+const connector = new NearConnector();
+connector.on("wallet:signIn", async (data) => {
+ const wallet = await connector.wallet();
+ // Use wallet API (compatible with near-wallet-selector)
+});
+```
-## Privy Social Login
+[View full NEAR Connect tutorial](../tutorials/web-login/near-connector.md)
-[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.
+---
-
+## Wallet Selector (Legacy)
-:::tip
+The [Wallet Selector](https://github.com/near/wallet-selector) is the traditional approach with maintenance challenges:
+- Monolithic codebase
+- Bundled wallet code
+- Slow update cycle
-Check our [Privy Integration Example](https://github.com/near-examples/hello-privy/) to learn how to integrate Privy into your web app
+
+:::note
+Consider using [NEAR Connect](#near-connect-recommended) for new projects instead.
:::
---
-## Web3Auth
+## Social Login Options
-[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.
+### Privy
-
+[Privy](https://www.privy.io/) enables social login (email, Google, Facebook) with NEAR wallet creation.
-:::tip
+### Web3Auth
-Check our [Web3Auth Integration Example](https://github.com/near-examples/hello-web3auth/) to learn how to integrate Privy into your web app
-
-:::
+[Web3Auth](https://web3auth.io/) provides social login with NEAR wallet creation.
-:::warning Ethereum Wallets
-The ethereum wallet login offered by Web3Auth will not allow you to interact with NEAR contracts
+:::warning
+Web3Auth's Ethereum wallet login won't work with NEAR contracts.
:::
\ No newline at end of file
diff --git a/docs/web3-apps/tutorials/web-login/near-connector.md b/docs/web3-apps/tutorials/web-login/near-connector.md
index 03437b33b13..55d7d6baff5 100644
--- a/docs/web3-apps/tutorials/web-login/near-connector.md
+++ b/docs/web3-apps/tutorials/web-login/near-connector.md
@@ -1,270 +1,109 @@
----
id: near-connector
-title: NEAR Connect Tutorial
-description: "Connect users to NEAR wallets with a secure, sandbox-based connector library"
+title: Modern NEAR Wallet Connection
+description: "Connect users to NEAR wallets with the modern NEAR Connect library"
---
-import {CodeTabs, Language, Github} from "@site/src/components/UI/Codetabs"
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-The `@hot-labs/near-connect` library provides a secure, zero-dependency wallet connector for NEAR blockchain with a unique sandbox-based architecture. Unlike traditional wallet selectors, it offers a dynamic manifest system that allows wallets to be added and updated without requiring developers to update their dependencies.
-
-:::info Working Example
-For a complete working example with React, check out the [hello-near-connector repository](https://github.com/near-examples/hello-near-connector) which demonstrates all features in action.
+# NEAR Connect
-:::
+**NEAR Connect** (`@hot-labs/near-connect`) is the modern wallet connector for NEAR. Created by Andrei Zhevlakov (CTO at HOT Labs), it solves the maintenance issues of `near-wallet-selector` with zero dependencies and sandboxed security.
-
-:::tip Why NEAR Connect?
-
-- **Secure Execution**: Wallet scripts run in isolated sandboxed iframes for maximum security
-- **Dynamic Wallets**: Wallets are loaded from a manifest and can be updated without code changes
-- **Zero Dependencies**: Lightweight library with no external dependencies
-- **Automatic Detection**: Supports both injected wallets (extensions) and manifest-based wallets
-
-:::
-
-
----
-
-## Installation
-
-Install the `@hot-labs/near-connect` package along with its required peer dependencies:
+## Quick Start
```bash
-npm install @hot-labs/near-connect \
- @near-js/providers \
- @near-js/utils
+yarn add @hot-labs/near-connect
```
----
-
-## Creating the Connector
-
-Initialize the `NearConnector` instance in your application. For a complete reference of the `NearConnector` class implementation, see the [source code on GitHub](https://github.com/azbang/hot-connector/blob/main/near-connect/src/NearConnector.ts).
-
-```tsx title="lib/near.ts"
-// Basic connector for NEAR testnet
+```tsx
import { NearConnector } from "@hot-labs/near-connect";
-connector = new NearConnector({ network: "testnet" });
-```
-
-
-
-### Selecting Wallets
+const connector = new NearConnector();
-Unlike traditional wallet selectors that bundle wallet code, NEAR Connect uses a **manifest-based approach**:
+connector.on("wallet:signIn", async (data) => {
+ const wallet = await connector.wallet();
+ const accountId = data.accounts[0].accountId;
+
+ // Use wallet API (compatible with near-wallet-selector)
+ await wallet.signMessage({
+ message: "Authenticate with NEAR",
+ recipient: "your-app.near",
+ nonce: Buffer.from(crypto.randomUUID())
+ });
+});
-1. Wallet providers register their integration scripts in a public manifest
-2. The connector dynamically loads wallet scripts when users want to connect
+// Connect wallet
+connector.connect();
+```
-This architecture eliminates the need to install individual wallet packages and ensures wallet code can be updated independently from your app.
+## Configuration
```tsx
-connector = new NearConnector({
- network: "testnet", // or "mainnet"
+// Filter wallets by features
+const connector = new NearConnector({
features: {
- signMessage: true, // Only show wallets that support message signing
- signTransaction: true,
- signInWithoutAddKey: true,
- signAndSendTransaction: true,
- signAndSendTransactions: true
+ signMessage: true,
+ testnet: 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
+ // Optional: request limited access key
+ signIn: {
+ contractId: "game.near",
+ methods: ["action"]
},
+
+ // Optional: WalletConnect support
+ walletConnect: walletConnectClient
});
```
----
-
-## 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
-
-```
-
----
+## Available Wallets
-## Signing Out
+- HOT Wallet
+- Meteor Wallet
+- Intear Wallet
+- MyNearWallet
+- Nightly Wallet
+- Near Mobile Wallet
+- Unity Wallet
+- OKX Wallet
+- Any WalletConnect wallet
-Similarly, to sign out we need to subscribe to the `signOut` event and call the `disconnect` function:
+## Transaction Formats
+### Legacy format (backward compatible)
```tsx
-// Listen for sign-out
-connector.on("wallet:signOut", () => {
- console.log("User signed out");
+await wallet.signAndSendTransaction({
+ receiverId: "contract.near",
+ actions: [{
+ type: "FunctionCall",
+ params: {
+ methodName: "method_name",
+ args: { param: "value" },
+ gas: "30000000000000",
+ deposit: "0"
+ }
+ }]
});
-
-// 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:
-
+### NEAR API JS format (recommended)
```tsx
-// Get the connected wallet
-const wallet = await connector.wallet();
+import { functionCall } from "@near-js/transactions";
-// Call a change method
-const result = await wallet.signAndSendTransaction({
- receiverId: "hello.near-examples.testnet",
+await wallet.signAndSendTransaction({
+ receiverId: "contract.near",
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);
-```
-
-
-
- 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",
- {}
-);
-```
-
-
-
----
-
-## 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
- },
- },
- ],
- },
- ],
+ functionCall("method_name", { param: "value" }, "30000000000000", "0")
+ ]
});
-
-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
+## Architecture
-For React applications, the `near-connector` can be easily integrated using a custom hook.
+Wallets run in isolated iframes with controlled access:
+- **Sandboxed security** - wallet code isolated from dApp
+- **Dynamic updates** - wallets update independently without app changes
+- **Zero dependencies** - lightweight and secure
-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
+For more information, visit [github.com/azbang/near-connect](https://github.com/azbang/near-connect)
\ No newline at end of file