Migrate hello-near-examples from wallet-selector to `near-selector

frontend/package.json

@@ -12,33 +12,17 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-wallet-selector/bitget-wallet": "9.5.4",
-    "@near-wallet-selector/coin98-wallet": "9.5.4",
-    "@near-wallet-selector/core": "9.5.4",
-    "@near-wallet-selector/ethereum-wallets": "9.5.4",
-    "@near-wallet-selector/hot-wallet": "9.5.4",
-    "@near-wallet-selector/intear-wallet": "9.5.4",
-    "@near-wallet-selector/ledger": "9.5.4",
-    "@near-wallet-selector/math-wallet": "9.5.4",
-    "@near-wallet-selector/meteor-wallet": "9.5.4",
-    "@near-wallet-selector/meteor-wallet-app": "9.5.4",
-    "@near-wallet-selector/modal-ui": "9.5.4",
-    "@near-wallet-selector/near-mobile-wallet": "9.5.4",
-    "@near-wallet-selector/okx-wallet": "9.5.4",
-    "@near-wallet-selector/ramper-wallet": "9.5.4",
-    "@near-wallet-selector/react-hook": "9.5.4",
-    "@near-wallet-selector/sender": "9.5.4",
-    "@near-wallet-selector/unity-wallet": "9.5.4",
-    "@near-wallet-selector/welldone-wallet": "9.5.4",
-    "@reown/appkit": "^1.7.7",
-    "@reown/appkit-adapter-wagmi": "^1.7.7",
-    "@wagmi/core": "^2.17.2",
+    "@hot-labs/near-connect": "^0.6.2",
+    "@near-js/crypto": "^2.3.1",
+    "@near-js/providers": "^2.3.1",
+    "@near-js/transactions": "^2.3.1",
+    "@near-js/utils": "^2.3.1",
+    "@walletconnect/sign-client": "^2.21.9",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
     "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2.30.5"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",

frontend/src/components/cards.tsx

@@ -16,7 +16,10 @@ export const Cards = () => {
         <p>Learn how this application works, and what you can build on Near.</p>
       </Link>
 
-      <Link href="/hello-near" className={styles.card} rel="noopener noreferrer">
+      <Link
+        href="/hello-near"
+        className={styles.card}
+      >
         <h2>
           Near Integration <span>-&gt;</span>
         </h2>

frontend/src/components/navigation.tsx

@@ -1,23 +1,21 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
-
-import NearLogo from '../../public/near-logo.svg';
+import Image from "next/image";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useNear } from "@/hooks/useNear";
+import NearLogo from "../../public/near-logo.svg";
 
 export const Navigation = () => {
-  // Type the action as a function that returns void
   const [action, setAction] = useState<() => void>(() => () => {});
-  const [label, setLabel] = useState<string>('Loading...');
-  const { signedAccountId, signIn, signOut } = useWalletSelector();
+  const [label, setLabel] = useState<string>("Loading...");
+  const { signedAccountId, signIn, signOut } = useNear();
 
   useEffect(() => {
     if (signedAccountId) {
       setAction(() => signOut);
       setLabel(`Logout ${signedAccountId}`);
     } else {
       setAction(() => signIn);
-      setLabel('Login');
+      setLabel("Login");
     }
   }, [signedAccountId, signIn, signOut]);
 

frontend/src/hooks/useNear.tsx

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useState } from "react";
+import { JsonRpcProvider } from "@near-js/providers";
+import { NearConnector, NearWallet } from "@hot-labs/near-connect";
+
+interface ConnectedWallet {
+  wallet: NearWallet;
+  accounts: { accountId: string }[];
+}
+
+interface FunctionCallParams {
+  contractId: string;
+  method: string;
+  args?: Record<string, unknown>;
+  gas?: string;
+  deposit?: string;
+}
+
+interface ViewFunctionParams {
+  contractId: string;
+  method: string;
+  args?: Record<string, unknown>;
+}
+
+let connector: NearConnector | undefined;
+const provider = new JsonRpcProvider({ url: "https://test.rpc.fastnear.com" });
+
+if (typeof window !== "undefined") {
+  connector = new NearConnector({ network: "testnet" });
+}
+
+export function useNear() {
+  const [wallet, setWallet] = useState<NearWallet | undefined>(undefined);
+  const [signedAccountId, setSignedAccountId] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const signIn = useCallback(async () => {
+    if (!connector) return;
+    const connectedWallet = await connector.connect();
+    console.log("Connected wallet", connectedWallet);
+  }, []);
+
+  const signOut = useCallback(async () => {
+    if (!wallet || !connector) return;
+    await connector.disconnect(wallet);
+    console.log("Disconnected wallet");
+    setWallet(undefined);
+    setSignedAccountId("");
+  }, [wallet]);
+
+  useEffect(() => {
+    if (!connector) return;
+
+    async function reload() {
+      try {
+        const { wallet, accounts } = (await connector!.getConnectedWallet()) as ConnectedWallet;
+        setWallet(wallet);
+        setSignedAccountId(accounts[0]?.accountId || "");
+      } catch {
+        setWallet(undefined);
+        setSignedAccountId("");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    const onSignOut = () => {
+      setWallet(undefined);
+      setSignedAccountId("");
+    };
+
+    const onSignIn = async (payload: { wallet: NearWallet }) => {
+      console.log("Signed in with payload", payload);
+      setWallet(payload.wallet);
+      const accountId = await payload.wallet.getAddress();
+      setSignedAccountId(accountId);
+    };
+
+    connector.on("wallet:signOut", onSignOut);
+    connector.on("wallet:signIn", onSignIn);
+
+    reload();
+
+    return () => {
+      connector?.off("wallet:signOut", onSignOut);
+      connector?.off("wallet:signIn", onSignIn);
+    };
+  }, []);
+
+  const viewFunction = useCallback(async ({ contractId, method, args = {} }: ViewFunctionParams) => {
+    return provider.callFunction(contractId, method, args);
+  }, []);
+
+  const callFunction = useCallback(
+    async ({ contractId, method, args = {}, gas = "30000000000000", deposit = "0" }: FunctionCallParams) => {
+      if (!wallet) throw new Error("Wallet not connected");
+      return wallet.signAndSendTransaction({
+        receiverId: contractId,
+        actions: [
+          {
+            type: "FunctionCall",
+            params: { methodName: method, args, gas, deposit },
+          },
+        ],
+      });
+    },
+    [wallet]
+  );
+
+  return {
+    signedAccountId,
+    wallet,
+    signIn,
+    signOut,
+    loading,
+    viewFunction,
+    callFunction,
+    provider,
+  };
+}

frontend/src/pages/_app.tsx

@@ -1,68 +1,13 @@
 import "@/styles/globals.css";
-import "@near-wallet-selector/modal-ui/styles.css";
 
 import type { AppProps } from "next/app";
-import { WalletSelectorProvider } from "@near-wallet-selector/react-hook";
 import { Navigation } from "@/components/navigation";
-import { HelloNearContract, NetworkId } from "@/config";
-
-// Wallet setups
-import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
-import { setupMeteorWalletApp } from "@near-wallet-selector/meteor-wallet-app";
-import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
-import { setupHotWallet } from "@near-wallet-selector/hot-wallet";
-import { setupLedger } from "@near-wallet-selector/ledger";
-import { setupSender } from "@near-wallet-selector/sender";
-import { setupNearMobileWallet } from "@near-wallet-selector/near-mobile-wallet";
-import { setupWelldoneWallet } from "@near-wallet-selector/welldone-wallet";
-import { setupMathWallet } from "@near-wallet-selector/math-wallet";
-import { setupBitgetWallet } from "@near-wallet-selector/bitget-wallet";
-import { setupRamperWallet } from "@near-wallet-selector/ramper-wallet";
-import { setupUnityWallet } from "@near-wallet-selector/unity-wallet";
-import { setupOKXWallet } from "@near-wallet-selector/okx-wallet";
-import { setupCoin98Wallet } from "@near-wallet-selector/coin98-wallet";
-import { setupIntearWallet } from "@near-wallet-selector/intear-wallet";
-
-// Ethereum adapters
-import { wagmiAdapter, web3Modal } from "@/wallets/web3modal";
-
-// Types
-import type { WalletModuleFactory } from "@near-wallet-selector/core";
-
-const walletSelectorConfig = {
-  network: NetworkId,
-  modules: [
-    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
-    setupMeteorWallet(),
-    setupMeteorWalletApp({ contractId: HelloNearContract }),
-    setupHotWallet(),
-    setupLedger(),
-    setupSender(),
-    setupNearMobileWallet(),
-    setupWelldoneWallet(),
-    setupMathWallet(),
-    setupBitgetWallet(),
-    setupRamperWallet(),
-    setupUnityWallet({ 
-      projectId: "your-project-id",
-      metadata: {
-        name: "Hello NEAR",
-        description: "Hello NEAR Example",
-        url: "https://near.org",
-        icons: ["https://near.org/favicon.ico"],
-      }
-    }),
-    setupOKXWallet(),
-    setupCoin98Wallet(),
-    setupIntearWallet(),  
-  ] as WalletModuleFactory[]
-};
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
-    <WalletSelectorProvider config={walletSelectorConfig}>
+      <>
       <Navigation />
       <Component {...pageProps} />
-    </WalletSelectorProvider>
+      </>
   );
 }

frontend/src/pages/hello-near/index.tsx

@@ -5,10 +5,10 @@ import styles from '@/styles/app.module.css';
 
 import { HelloNearContract } from '../../config';
 
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useNear } from '@/hooks/useNear';
 
 export default function HelloNear() {
-  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
+  const { signedAccountId, viewFunction, callFunction } = useNear();
 
   const [greeting, setGreeting] = useState<string>('loading...');
   const [newGreeting, setNewGreeting] = useState('');