create-near-app 8.5.0 → 9.0.0

package/templates/contracts/auction-adv/ts/src/contract.ts

@@ -0,0 +1,87 @@
+// Find all our documentation at https://docs.near.org
+import { NearBindgen, near, call, view, AccountId, NearPromise, initialize, assert } from "near-sdk-js";
+
+class Bid {
+  bidder: AccountId;
+  bid: bigint;
+}
+
+const THIRTY_TGAS = BigInt("30000000000000");
+const NO_DEPOSIT = BigInt(0);
+
+@NearBindgen({ requireInit: true })
+class AuctionContract {
+  highest_bid: Bid = { bidder: '', bid: BigInt(1) };
+  auction_end_time: bigint = BigInt(0);
+  auctioneer: AccountId = "";
+  claimed: boolean = false;
+  ft_contract: AccountId = "";
+  nft_contract: AccountId = "";
+  token_id: string = "";
+
+  @initialize({ privateFunction: true })
+  init({ end_time, auctioneer, ft_contract, nft_contract, token_id, starting_price }: { end_time: bigint, auctioneer: AccountId, ft_contract: AccountId, nft_contract: AccountId, token_id: string, starting_price: bigint }) {
+    this.auction_end_time = end_time;
+    this.highest_bid = { bidder: near.currentAccountId(), bid: starting_price };
+    this.auctioneer = auctioneer;
+    this.ft_contract = ft_contract;
+    this.nft_contract = nft_contract;
+    this.token_id = token_id;
+  }
+
+  @call({})
+  ft_on_transfer({ sender_id, amount, msg }: { sender_id: AccountId, amount: bigint, msg: String }) {
+
+    const previous = { ...this.highest_bid };
+
+    assert(this.auction_end_time > near.blockTimestamp(), "Auction has ended");
+    assert(near.predecessorAccountId() == this.ft_contract, "The token is not supported");
+    assert(BigInt(amount) >= BigInt(previous.bid), "You must place a higher bid");
+    this.highest_bid = {
+      bidder: sender_id,
+      bid: amount,
+    };
+
+    return NearPromise.new(this.ft_contract)
+      .functionCall("ft_transfer", JSON.stringify({ receiver_id: previous.bidder, amount: previous.bid }), BigInt(1), THIRTY_TGAS)
+      .then(
+        NearPromise.new(near.currentAccountId())
+          .functionCall("ft_transfer_callback", JSON.stringify({}), NO_DEPOSIT, THIRTY_TGAS)
+      )
+      .asReturn()
+  }
+
+  @call({})
+  claim() {
+    assert(this.auction_end_time <= near.blockTimestamp(), "Auction has not ended yet");
+    assert(!this.claimed, "Auction has been claimed");
+
+    this.claimed = true;
+
+    return NearPromise.new(this.nft_contract)
+      .functionCall("nft_transfer", JSON.stringify({ receiver_id: this.highest_bid.bidder, token_id: this.token_id }), BigInt(1), THIRTY_TGAS)
+      .then(NearPromise.new(this.ft_contract)
+      .functionCall("ft_transfer", JSON.stringify({ receiver_id: this.auctioneer, amount: this.highest_bid.bid }), BigInt(1), THIRTY_TGAS))
+      .asReturn()
+  }
+
+  @call({ privateFunction: true })
+  ft_transfer_callback({ }): BigInt {
+    return BigInt(0);
+  }
+
+  @view({})
+  get_highest_bid(): Bid {
+    return this.highest_bid;
+  }
+
+  @view({})
+  get_auction_end_time(): BigInt {
+    return this.auction_end_time;
+  }
+
+  @view({})
+  get_auction_info(): AuctionContract {
+    return this;
+  }
+}

package/templates/frontend/next-app/package.json

@@ -12,34 +12,12 @@
     "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",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^5.0.0",
+    "near-connect-hooks": "^1.0.2",
     "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2.30.5"
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^24.7.0",
@@ -50,9 +28,5 @@
     "eslint-config-next": "^15",
     "pino-pretty": "^11.2.2",
     "typescript": "^5.9.3"
-  },
-  "overrides": {
-    "@wagmi/core": "^2.17.2",
-    "viem": "^2.30.5"
   }
 }

package/templates/frontend/next-app/src/app/hello-near/page.tsx

@@ -5,13 +5,11 @@ import styles from '@/app/app.module.css';
 import { Cards } from '@/components/cards';
 
 import { HelloNearContract } from '@/config';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useNearWallet } from 'near-connect-hooks';
 
-// Contract that the app will interact with
-const CONTRACT = HelloNearContract;
 
 export default function HelloNear() {
-  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
+  const { signedAccountId, viewFunction, callFunction } = useNearWallet();
 
   const [greeting, setGreeting] = useState<string>('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');

package/templates/frontend/next-app/src/app/layout.tsx

@@ -1,66 +1,11 @@
 'use client';
-
 import '@/app/globals.css';
-import '@near-wallet-selector/modal-ui/styles.css';
 
 import { Navigation } from '@/components/navigation';
-import { HelloNearContract, NetworkId } from '@/config';
-import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
+import { NearProvider } from 'near-connect-hooks';
 
 import { ReactNode } from 'react';
 
-// 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, Network, WalletSelectorParams } from "@near-wallet-selector/core";
-
-const walletSelectorConfig: WalletSelectorParams = {
-  network: NetworkId as unknown as Network,
-  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[]
-    };
-
 // Layout Component
 interface RootLayoutProps {
   children: ReactNode;
@@ -70,10 +15,10 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
       <body>
-        <WalletSelectorProvider config={walletSelectorConfig}>
+        <NearProvider>
           <Navigation />
           {children}
-        </WalletSelectorProvider>
+        </NearProvider>
       </body>
     </html>
   );

package/templates/frontend/next-app/src/components/navigation.tsx

@@ -1,30 +1,30 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useNearWallet } from 'near-connect-hooks';
 
 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 { signedAccountId, loading, signIn, signOut } = useNearWallet();
 
-  useEffect(() => {
+  const handleAction = () => {
     if (signedAccountId) {
-      setAction(() => signOut);
-      setLabel(`Logout ${signedAccountId}`);
+      signOut();
     } else {
-      setAction(() => signIn);
-      setLabel('Login');
+      signIn();
     }
-  }, [signedAccountId, signIn, signOut]);
+  };
+
+  const label = loading
+    ? "Loading..."
+    : signedAccountId
+    ? `Logout ${signedAccountId}`
+    : "Login";
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
-        <Link href="/" passHref>
+        <Link href="/">
           <Image
             priority
             src={NearLogo}
@@ -35,7 +35,7 @@ export const Navigation = () => {
           />
         </Link>
         <div className="navbar-nav pt-1">
-          <button className="btn btn-secondary" onClick={action}>
+          <button className="btn btn-secondary" onClick={handleAction}>
             {label}
           </button>
         </div>

package/templates/frontend/next-page/package.json

@@ -12,36 +12,15 @@
     "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",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^5.0.0",
+    "near-connect-hooks": "^1.0.2",
     "next": "^15",
     "react": "^18",
-    "react-dom": "^18",
-    "viem": "^2.30.5"
+    "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/node": "24.8.1",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
     "encoding": "^0.1.13",

package/templates/frontend/next-page/src/components/cards.tsx

@@ -20,7 +20,6 @@ export const Cards = () => {
       <Link
         href="/hello-near"
         className={styles.card}
-        rel="noopener noreferrer"
       >
         <h2>
           Near Integration <span>-&gt;</span>

package/templates/frontend/next-page/src/components/navigation.tsx

@@ -1,30 +1,30 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { useNearWallet } from 'near-connect-hooks';
 
 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 { signedAccountId, loading, signIn, signOut } = useNearWallet();
 
-  useEffect(() => {
+  const handleAction = () => {
     if (signedAccountId) {
-      setAction(() => signOut);
-      setLabel(`Logout ${signedAccountId}`);
+      signOut();
     } else {
-      setAction(() => signIn);
-      setLabel('Login');
+      signIn();
     }
-  }, [signedAccountId, signIn, signOut]);
+  };
+
+  const label = loading
+    ? "Loading..."
+    : signedAccountId
+    ? `Logout ${signedAccountId}`
+    : "Login";
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
-        <Link href="/" passHref legacyBehavior>
+        <Link href="/">
           <Image
             priority
             src={NearLogo}
@@ -35,7 +35,7 @@ export const Navigation = () => {
           />
         </Link>
         <div className="navbar-nav pt-1">
-          <button className="btn btn-secondary" onClick={action}>
+          <button className="btn btn-secondary" onClick={handleAction}>
             {label}
           </button>
         </div>

package/templates/frontend/next-page/src/pages/_app.tsx

@@ -1,68 +1,15 @@
 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";
+import { NearProvider } from 'near-connect-hooks';
 
-// 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}>
+    <NearProvider>
       <Navigation />
       <Component {...pageProps} />
-    </WalletSelectorProvider>
+    </NearProvider>
   );
 }

package/templates/frontend/next-page/src/pages/hello-near/index.tsx

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

package/templates/frontend/vite-react/package.json

@@ -9,39 +9,17 @@
     "preview": "vite preview"
   },
   "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.1",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^5.1.1",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-router": "^7",
-    "viem": "^2.30.5"
+    "near-connect-hooks": "^1.0.2",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-router": "^7"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react": "^7.37.2",

package/templates/frontend/vite-react/src/App.tsx

@@ -3,70 +3,11 @@ import { BrowserRouter, Routes, Route } from "react-router";
 import { Navigation } from "@/components/navigation";
 import Home from "@/pages/home";
 import HelloNear from "@/pages/hello_near";
-import { HelloNearContract, NetworkId } from "@/config";
-
-import "@near-wallet-selector/modal-ui/styles.css";
-
-// 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";
-
-import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
-
-// 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[]
-};
+import { NearProvider } from 'near-connect-hooks';
 
 function App () {
   return (
-    <WalletSelectorProvider config={walletSelectorConfig}>
+    <NearProvider>
       <BrowserRouter>
         <Navigation />
         <Routes>
@@ -74,7 +15,7 @@ function App () {
           <Route path="/hello-near" element={<HelloNear />} />
         </Routes>
       </BrowserRouter>
-    </WalletSelectorProvider>
+    </NearProvider>
   );
 };
 

package/templates/frontend/vite-react/src/components/navigation.tsx

@@ -1,30 +1,24 @@
-import { useEffect, useState } from 'react';
 import { Link } from 'react-router'
 import NearLogo from '@/assets/near-logo.svg';
 import styles from '@/styles/app.module.css';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
-
-interface WalletSelectorHook {
-  signedAccountId: string | null;
-  signIn: () => void;
-  signOut: () => void;
-}
+import { useNearWallet } from 'near-connect-hooks';
 
 export const Navigation = () => {
-  const { signedAccountId, signIn, signOut } = useWalletSelector() as WalletSelectorHook;
-
-  const [action, setAction] = useState<() => void>(() => () => {});
-  const [label, setLabel] = useState<string>('Loading...');
+ const { signedAccountId, loading, signIn, signOut } = useNearWallet();
 
-  useEffect(() => {
+  const handleAction = () => {
     if (signedAccountId) {
-      setAction(() => signOut);
-      setLabel(`Logout ${signedAccountId}`);
+      signOut();
     } else {
-      setAction(() => signIn);
-      setLabel('Login');
+      signIn();
     }
-  }, [signedAccountId, signIn, signOut]);
+  };
+
+  const label = loading
+    ? "Loading..."
+    : signedAccountId
+    ? `Logout ${signedAccountId}`
+    : "Login";
 
   return (
     <nav className="navbar navbar-expand-lg">
@@ -39,7 +33,7 @@ export const Navigation = () => {
           />
         </Link>
         <div className="navbar-nav pt-1">
-          <button className="btn btn-secondary" onClick={action}>
+          <button className="btn btn-secondary" onClick={handleAction}>
             {label}
           </button>
         </div>

package/templates/frontend/vite-react/src/global.d.ts

@@ -0,0 +1,13 @@
+// CSS module declarations
+declare module '*.module.css';
+declare module '*.module.scss';
+declare module '*.module.sass';
+
+// Image declarations
+declare module '*.svg';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.jpeg';
+declare module '*.gif';
+declare module '*.webp';
+