create-near-app 8.4.0 → 8.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-near-app",
-  "version": "8.4.0",
+  "version": "8.5.0",
   "description": "Quickly scaffold your dApp on NEAR Blockchain",
   "main": "index.js",
   "engines": {

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,20 +12,24 @@
     "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",
+    "@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",
@@ -38,9 +42,17 @@
     "viem": "^2.30.5"
   },
   "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"
+  },
+  "overrides": {
+    "@wagmi/core": "^2.17.2",
+    "viem": "^2.30.5"
   }
-}
+}

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

@@ -1,7 +1,8 @@
-import { useEffect, useState } from 'react';
+'use client';
+import { useState, useEffect } from 'react';
 
+import styles from '@/app/app.module.css';
 import { Cards } from '@/components/cards';
-import styles from '@/styles/app.module.css';
 
 import { HelloNearContract } from '@/config';
 import { useWalletSelector } from '@near-wallet-selector/react-hook';
@@ -12,29 +13,31 @@ const CONTRACT = HelloNearContract;
 export default function HelloNear() {
   const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
 
-  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));
-  }, [viewFunction]);
+ useEffect(() => {
+    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 +45,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>
@@ -70,4 +74,4 @@ export default function HelloNear() {
       <Cards />
     </main>
   );
-}
+}

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

@@ -0,0 +1,80 @@
+'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 { 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;
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en">
+      <body>
+        <WalletSelectorProvider config={walletSelectorConfig}>
+          <Navigation />
+          {children}
+        </WalletSelectorProvider>
+      </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.js → navigation.tsx}

@@ -1,14 +1,15 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
-
-import NearLogo from '/public/near-logo.svg';
 import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
+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 [action, setAction] = useState(() => { });
-  const [label, setLabel] = useState('Loading...');
 
   useEffect(() => {
     if (signedAccountId) {
@@ -24,10 +25,19 @@ export const Navigation = () => {
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <Link href="/" passHref>
-          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+          <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={action} > {label} </button>
+        <div className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={action}>
+            {label}
+          </button>
         </div>
       </div>
     </nav>

package/templates/frontend/{next-page/src/wallets/web3modal.js → next-app/src/wallets/web3modal.ts}

@@ -1,7 +1,6 @@
 import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
 import { createAppKit } from "@reown/appkit/react";
 import { nearTestnet } from "@reown/appkit/networks";
-import { reconnect } from "@wagmi/core";
 
 // Get a project ID at https://cloud.reown.com
 const projectId = "30147604c5f01d0bc4482ab0665b5697";

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,20 +12,24 @@
     "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",
+    "@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",
@@ -38,9 +42,12 @@
     "viem": "^2.30.5"
   },
   "devDependencies": {
+    "@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/{navigation.js → navigation.tsx}

@@ -3,12 +3,13 @@ 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 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 [action, setAction] = useState(() => { });
-  const [label, setLabel] = useState('Loading...');
 
   useEffect(() => {
     if (signedAccountId) {
@@ -16,18 +17,27 @@ export const Navigation = () => {
       setLabel(`Logout ${signedAccountId}`);
     } else {
       setAction(() => signIn);
-      setLabel("Login");
+      setLabel('Login');
     }
-  }, [signedAccountId]);
+  }, [signedAccountId, signIn, signOut]);
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <Link href="/" passHref legacyBehavior>
-          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+          <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={action} > {label} </button>
+        <div className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={action}>
+            {label}
+          </button>
         </div>
       </div>
     </nav>

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

@@ -0,0 +1,68 @@
+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>
+  );
+}

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

@@ -1,25 +1,23 @@
-import { useState, useEffect } from 'react';
 
+import { Cards } from '@/components/cards';
+
+import { useEffect, useState } from 'react';
 import styles from '@/styles/app.module.css';
+
 import { HelloNearContract } from '../../config';
-import { Cards } from '@/components/cards';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
-// Contract that the app will interact with
-const CONTRACT = HelloNearContract;
+import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
 export default function HelloNear() {
   const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
 
-  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({ 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>
@@ -71,4 +72,4 @@ export default function HelloNear() {
       <Cards />
     </main>
   );
-}
+}

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>