create-near-app 8.4.1 → 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/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -12,35 +12,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-wallet-selector/bitte-wallet": "^9.0.2",
-    "@near-wallet-selector/core": "^9.0.2",
-    "@near-wallet-selector/ethereum-wallets": "^9.0.2",
-    "@near-wallet-selector/here-wallet": "^9.0.2",
-    "@near-wallet-selector/hot-wallet": "^9.0.2",
-    "@near-wallet-selector/ledger": "^9.0.2",
-    "@near-wallet-selector/meteor-wallet": "^9.0.2",
-    "@near-wallet-selector/meteor-wallet-app": "^9.0.2",
-    "@near-wallet-selector/modal-ui": "^9.0.2",
-    "@near-wallet-selector/my-near-wallet": "^9.0.2",
-    "@near-wallet-selector/near-mobile-wallet": "^9.0.2",
-    "@near-wallet-selector/react-hook": "^9.0.2",
-    "@near-wallet-selector/sender": "^9.0.2",
-    "@near-wallet-selector/welldone-wallet": "^9.0.2",
-    "@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",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.1",
     "encoding": "^0.1.13",
     "eslint": "^9",
     "eslint-config-next": "^15",
-    "pino-pretty": "^11.2.2"
+    "pino-pretty": "^11.2.2",
+    "typescript": "^5.9.3"
   }
-}
+}

package/templates/frontend/{next-page/src/pages/hello-near/index.js → next-app/src/app/hello-near/page.tsx}

@@ -1,25 +1,23 @@
+'use client';
 import { useState, useEffect } from 'react';
 
-import styles from '@/styles/app.module.css';
-import { HelloNearContract } from '../../config';
+import styles from '@/app/app.module.css';
 import { Cards } from '@/components/cards';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
-// Contract that the app will interact with
-const CONTRACT = HelloNearContract;
+import { HelloNearContract } from '@/config';
+import { useNearWallet } from 'near-connect-hooks';
+
 
 export default function HelloNear() {
-  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
+  const { signedAccountId, viewFunction, callFunction } = useNearWallet();
 
-  const [greeting, setGreeting] = useState('loading...');
+  const [greeting, setGreeting] = useState<string>('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');
   const [loggedIn, setLoggedIn] = useState(false);
   const [showSpinner, setShowSpinner] = useState(false);
 
-  useEffect(() => {
-    viewFunction({ contractId: CONTRACT, method: 'get_greeting' }).then(
-      greeting => setGreeting(greeting)
-    );
+ useEffect(() => {
+    viewFunction({ contractId: HelloNearContract, method: 'get_greeting' }).then((greeting) => setGreeting(greeting as string));
   }, []);
 
   useEffect(() => {
@@ -27,11 +25,17 @@ export default function HelloNear() {
   }, [signedAccountId]);
 
   const saveGreeting = async () => {
+    // Try to store greeting, revert if it fails
+    callFunction({ contractId: HelloNearContract, method: 'set_greeting', args: { greeting: newGreeting } })
+      .then(async () => {
+        const greeting = (await viewFunction({ contractId: HelloNearContract, method: 'get_greeting' })) as string;
+        setGreeting(greeting);
+        setShowSpinner(false);
+      });
+
+    // Assume the transaction will be successful and update the UI optimistically
     setShowSpinner(true);
-    await callFunction({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
-    const greeting = await viewFunction({ contractId: CONTRACT, method: 'get_greeting' });
-    setGreeting(greeting);
-    setShowSpinner(false);
+    setGreeting(newGreeting);
   };
 
   return (
@@ -39,7 +43,7 @@ export default function HelloNear() {
       <div className={styles.description}>
         <p>
           Interacting with the contract: &nbsp;
-          <code className={styles.code}>{CONTRACT}</code>
+          <code className={styles.code}>{HelloNearContract}</code>
         </p>
       </div>
 
@@ -52,15 +56,12 @@ export default function HelloNear() {
             type="text"
             className="form-control w-20"
             placeholder="Store a new greeting"
-            onChange={t => setNewGreeting(t.target.value)}
+            onChange={(t) => setNewGreeting(t.target.value)}
           />
           <div className="input-group-append">
             <button className="btn btn-secondary" onClick={saveGreeting}>
               <span hidden={showSpinner}> Save </span>
-              <i
-                className="spinner-border spinner-border-sm"
-                hidden={!showSpinner}
-              ></i>
+              <i className="spinner-border spinner-border-sm" hidden={!showSpinner}></i>
             </button>
           </div>
         </div>

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

@@ -0,0 +1,25 @@
+'use client';
+import '@/app/globals.css';
+
+import { Navigation } from '@/components/navigation';
+import { NearProvider } from 'near-connect-hooks';
+
+import { ReactNode } from 'react';
+
+// Layout Component
+interface RootLayoutProps {
+  children: ReactNode;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en">
+      <body>
+        <NearProvider>
+          <Navigation />
+          {children}
+        </NearProvider>
+      </body>
+    </html>
+  );
+}

package/templates/frontend/next-app/src/components/{cards.js → cards.tsx}

@@ -1,6 +1,5 @@
-import Link from 'next/link';
-
-import styles from '@/app/app.module.css';
+import Link from "next/link";
+import styles from "@/app/app.module.css";
 
 export const Cards = () => {
   return (
@@ -8,7 +7,7 @@ export const Cards = () => {
       <Link
         href="https://docs.near.org/build/web3-apps/quickstart"
         className={styles.card}
-        target='_blank'
+        target="_blank"
         rel="noopener noreferrer"
       >
         <h2>
@@ -17,11 +16,7 @@ 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} rel="noopener noreferrer">
         <h2>
           Near Integration <span>-&gt;</span>
         </h2>

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

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useNearWallet } from 'near-connect-hooks';
+
+import NearLogo from '../../public/near-logo.svg';
+
+export const Navigation = () => {
+   const { signedAccountId, loading, signIn, signOut } = useNearWallet();
+
+  const handleAction = () => {
+    if (signedAccountId) {
+      signOut();
+    } else {
+      signIn();
+    }
+  };
+
+  const label = loading
+    ? "Loading..."
+    : signedAccountId
+    ? `Logout ${signedAccountId}`
+    : "Login";
+
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/">
+          <Image
+            priority
+            src={NearLogo}
+            alt="NEAR"
+            width={30}
+            height={24}
+            className="d-inline-block align-text-top"
+          />
+        </Link>
+        <div className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={handleAction}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

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

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/app/global.d.ts",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/templates/frontend/next-page/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

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

@@ -12,35 +12,21 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-wallet-selector/bitte-wallet": "^9.0.2",
-    "@near-wallet-selector/core": "^9.0.2",
-    "@near-wallet-selector/ethereum-wallets": "^9.0.2",
-    "@near-wallet-selector/here-wallet": "^9.0.2",
-    "@near-wallet-selector/hot-wallet": "^9.0.2",
-    "@near-wallet-selector/ledger": "^9.0.2",
-    "@near-wallet-selector/meteor-wallet": "^9.0.2",
-    "@near-wallet-selector/meteor-wallet-app": "^9.0.2",
-    "@near-wallet-selector/modal-ui": "^9.0.2",
-    "@near-wallet-selector/my-near-wallet": "^9.0.2",
-    "@near-wallet-selector/near-mobile-wallet": "^9.0.2",
-    "@near-wallet-selector/react-hook": "^9.0.2",
-    "@near-wallet-selector/sender": "^9.0.2",
-    "@near-wallet-selector/welldone-wallet": "^9.0.2",
-    "@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",
     "eslint": "^9",
     "eslint-config-next": "^15",
-    "pino-pretty": "^11.2.2"
+    "pino-pretty": "^11.2.2",
+    "typescript": "^5.9.3"
   }
-}
+}

package/templates/frontend/next-page/src/components/{cards.js → 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

@@ -0,0 +1,45 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useNearWallet } from 'near-connect-hooks';
+
+import NearLogo from '../../public/near-logo.svg';
+
+export const Navigation = () => {
+   const { signedAccountId, loading, signIn, signOut } = useNearWallet();
+
+  const handleAction = () => {
+    if (signedAccountId) {
+      signOut();
+    } else {
+      signIn();
+    }
+  };
+
+  const label = loading
+    ? "Loading..."
+    : signedAccountId
+    ? `Logout ${signedAccountId}`
+    : "Login";
+
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/">
+          <Image
+            priority
+            src={NearLogo}
+            alt="NEAR"
+            width={30}
+            height={24}
+            className="d-inline-block align-text-top"
+          />
+        </Link>
+        <div className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={handleAction}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

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

@@ -0,0 +1,15 @@
+import "@/styles/globals.css";
+
+import type { AppProps } from "next/app";
+import { Navigation } from "@/components/navigation";
+import { NearProvider } from 'near-connect-hooks';
+
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <NearProvider>
+      <Navigation />
+      <Component {...pageProps} />
+    </NearProvider>
+  );
+}

package/templates/frontend/{vite-react/src/pages/hello_near.jsx → next-page/src/pages/hello-near/index.tsx}

@@ -1,40 +1,41 @@
-import { useEffect, useState } from 'react';
 
 import { Cards } from '@/components/cards';
+
+import { useEffect, useState } from 'react';
 import styles from '@/styles/app.module.css';
 
-import { HelloNearContract } from '@/config';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
+import { HelloNearContract } from '../../config';
 
-// Contract that the app will interact with
-const CONTRACT = HelloNearContract;
+import { useNearWallet } from 'near-connect-hooks';
 
 export default function HelloNear() {
-  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
+  const { signedAccountId, viewFunction, callFunction } = useNearWallet();
 
-  const [greeting, setGreeting] = useState('loading...');
-  const [newGreeting, setNewGreeting] = useState('loading...');
+  const [greeting, setGreeting] = useState<string>('loading...');
+  const [newGreeting, setNewGreeting] = useState('');
   const [loggedIn, setLoggedIn] = useState(false);
   const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
-    viewFunction({ contractId: CONTRACT, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
-  }, [viewFunction]);
+    viewFunction({ contractId: HelloNearContract, method: 'get_greeting' }).then((greeting) => setGreeting(greeting as string));
+  }, []);
 
   useEffect(() => {
     setLoggedIn(!!signedAccountId);
   }, [signedAccountId]);
 
   const saveGreeting = async () => {
-    callFunction({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } })
-      .catch(async () => {
-        viewFunction({ contractId: CONTRACT, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
+    // Try to store greeting, revert if it fails
+    callFunction({ contractId: HelloNearContract, method: 'set_greeting', args: { greeting: newGreeting } })
+      .then(async () => {
+        const greeting = (await viewFunction({ contractId: HelloNearContract, method: 'get_greeting' })) as string;
+        setGreeting(greeting);
+        setShowSpinner(false);
       });
 
+    // Assume the transaction will be successful and update the UI optimistically
     setShowSpinner(true);
-    await new Promise(resolve => setTimeout(resolve, 300));
     setGreeting(newGreeting);
-    setShowSpinner(false);
   };
 
   return (
@@ -42,9 +43,10 @@ export default function HelloNear() {
       <div className={styles.description}>
         <p>
           Interacting with the contract: &nbsp;
-          <code className={styles.code}>{CONTRACT}</code>
+          <code className={styles.code}>{HelloNearContract}</code>
         </p>
       </div>
+
       <div className={styles.center}>
         <h1 className="w-100">
           The contract says: <code>{greeting}</code>

package/templates/frontend/next-page/src/pages/{index.js → index.tsx}

@@ -1,14 +1,14 @@
-import Image from 'next/image';
+import Image from "next/image";
 
-import NearLogo from '/public/near.svg';
-import NextLogo from '/public/next.svg';
-import styles from '@/styles/app.module.css';
-import { Cards } from '@/components/cards';
+import NearLogo from "/public/near.svg";
+import NextLogo from "/public/next.svg";
+import { Cards } from "@/components/cards";
+import styles from "@/styles/app.module.css";
 
 export default function Home() {
   return (
     <main className={styles.main}>
-      <div className={styles.description}> </div>
+      <div className={styles.description}></div>
 
       <div className={styles.center}>
         <Image
@@ -24,8 +24,8 @@ export default function Home() {
           className={styles.logo}
           src={NextLogo}
           alt="Next.js Logo"
-          width={300 * .58}
-          height={61 * .58}
+          width={300 * 0.58}
+          height={61 * 0.58}
           priority
         />
       </div>

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

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "jsx": "preserve",
+    "strict": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "global.d.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/templates/frontend/vite-react/eslint.config.js

@@ -7,10 +7,11 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 export default [
   { ignores: ['dist'] },
   {
-    files: ['**/*.{js,jsx}'],
+    files: ['**/*.{js,jsx,ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
+      parser: tseslint.parser, 
       parserOptions: {
         ecmaVersion: 'latest',
         ecmaFeatures: { jsx: true },
@@ -22,12 +23,14 @@ export default [
       react,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
+      '@typescript-eslint': tseslint.plugin, 
     },
     rules: {
       ...js.configs.recommended.rules,
       ...react.configs.recommended.rules,
       ...react.configs['jsx-runtime'].rules,
       ...reactHooks.configs.recommended.rules,
+      ...tseslint.configs.recommended.rules, 
       'react/jsx-no-target-blank': 'off',
       'react-refresh/only-export-components': [
         'warn',