create-near-app 8.4.0 → 8.5.0

package/templates/frontend/{vite-react/src/wallets/web3modal.js → next-page/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-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',

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

@@ -9,22 +9,26 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@near-wallet-selector/bitte-wallet": "^9.0.1",
-    "@near-wallet-selector/core": "^9.0.1",
-    "@near-wallet-selector/ethereum-wallets": "^9.0.1",
-    "@near-wallet-selector/here-wallet": "^9.0.1",
-    "@near-wallet-selector/hot-wallet": "^9.0.1",
-    "@near-wallet-selector/ledger": "^9.0.1",
-    "@near-wallet-selector/meteor-wallet": "^9.0.1",
-    "@near-wallet-selector/meteor-wallet-app": "^9.0.1",
-    "@near-wallet-selector/modal-ui": "^9.0.1",
-    "@near-wallet-selector/my-near-wallet": "^9.0.1",
-    "@near-wallet-selector/near-mobile-wallet": "^9.0.1",
-    "@near-wallet-selector/react-hook": "^9.0.1",
-    "@near-wallet-selector/sender": "^9.0.1",
-    "@near-wallet-selector/welldone-wallet": "^9.0.1",
-    "@reown/appkit": "^1.7.4",
-    "@reown/appkit-adapter-wagmi": "^1.7.4",
+    "@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",
@@ -44,7 +48,8 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "typescript": "^5.9.3",
     "vite": "^6.3.5",
-    "vite-plugin-node-polyfills": "^0.23.0"
+    "vite-plugin-node-polyfills": "0.23.0"
   }
 }

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

@@ -0,0 +1,81 @@
+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[]
+};
+
+function App () {
+  return (
+    <WalletSelectorProvider config={walletSelectorConfig}>
+      <BrowserRouter>
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/hello-near" element={<HelloNear />} />
+        </Routes>
+      </BrowserRouter>
+    </WalletSelectorProvider>
+  );
+};
+
+export default App;

package/templates/frontend/vite-react/src/components/{cards.jsx → cards.tsx}

@@ -1,5 +1,5 @@
-import styles from '@/styles/app.module.css';
-import { Link } from 'react-router';
+import styles from '@/styles/app.module.css'
+import { Link } from 'react-router'
 
 export const Cards = () => {
   return (
@@ -23,5 +23,5 @@ export const Cards = () => {
         <p>Discover how simple it is to interact with a Near smart contract.</p>
       </Link>
     </div>
-  );
-};
+  )
+}

package/templates/frontend/vite-react/src/components/{navigation.jsx → navigation.tsx}

@@ -1,14 +1,20 @@
 import { useEffect, useState } from 'react';
-
+import { Link } from 'react-router'
 import NearLogo from '@/assets/near-logo.svg';
-import { Link } from "react-router";
 import styles from '@/styles/app.module.css';
 import { useWalletSelector } from '@near-wallet-selector/react-hook';
 
+interface WalletSelectorHook {
+  signedAccountId: string | null;
+  signIn: () => void;
+  signOut: () => void;
+}
+
 export const Navigation = () => {
-  const { signedAccountId, signIn, signOut } = useWalletSelector();
-  const [action, setAction] = useState(() => { });
-  const [label, setLabel] = useState('Loading...');
+  const { signedAccountId, signIn, signOut } = useWalletSelector() as WalletSelectorHook;
+
+  const [action, setAction] = useState<() => void>(() => () => {});
+  const [label, setLabel] = useState<string>('Loading...');
 
   useEffect(() => {
     if (signedAccountId) {
@@ -16,7 +22,7 @@ export const Navigation = () => {
       setLabel(`Logout ${signedAccountId}`);
     } else {
       setAction(() => signIn);
-      setLabel("Login");
+      setLabel('Login');
     }
   }, [signedAccountId, signIn, signOut]);
 
@@ -24,7 +30,13 @@ export const Navigation = () => {
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <Link to="/">
-          <img src={NearLogo} alt="NEAR" width="30" height="24" className={styles.logo} />
+          <img
+            src={NearLogo}
+            alt="NEAR"
+            width={30}
+            height={24}
+            className={styles.logo}
+          />
         </Link>
         <div className="navbar-nav pt-1">
           <button className="btn btn-secondary" onClick={action}>

package/templates/frontend/vite-react/src/{config.js → config.ts}

@@ -4,4 +4,4 @@ const contractPerNetwork = {
 };
 
 export const NetworkId = 'testnet';
-export const HelloNearContract = contractPerNetwork[NetworkId];
+export const HelloNearContract = contractPerNetwork[NetworkId];

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

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@/styles/globals.css';
+import App from '@/App';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}

package/templates/frontend/vite-react/src/pages/hello_near.tsx

@@ -0,0 +1,95 @@
+import { useEffect, useState, ChangeEvent } from 'react';
+import { Cards } from '@/components/cards';
+import styles from '@/styles/app.module.css';
+
+import { HelloNearContract } from '@/config';
+import { useWalletSelector } from '@near-wallet-selector/react-hook';
+
+interface WalletSelectorHook {
+  signedAccountId: string | null;
+  viewFunction: (params: { contractId: string; method: string; args?: Record<string, unknown> }) => Promise<any>;
+  callFunction: (params: { contractId: string; method: string; args?: Record<string, unknown> }) => Promise<any>;
+}
+
+// Contract constant
+const CONTRACT = HelloNearContract as string;
+
+export default function HelloNear() {
+  const { signedAccountId, viewFunction, callFunction } = useWalletSelector() as WalletSelectorHook;
+
+  const [greeting, setGreeting] = useState<string>('loading...');
+  const [newGreeting, setNewGreeting] = useState<string>('loading...');
+  const [loggedIn, setLoggedIn] = useState<boolean>(false);
+  const [showSpinner, setShowSpinner] = useState<boolean>(false);
+
+  useEffect(() => {
+    viewFunction({ contractId: CONTRACT, method: 'get_greeting' })
+      .then((greeting) => setGreeting(greeting))
+      .catch(console.error);
+  }, [viewFunction]);
+
+  useEffect(() => {
+    setLoggedIn(!!signedAccountId);
+  }, [signedAccountId]);
+
+  const saveGreeting = async () => {
+    try {
+      await callFunction({
+        contractId: CONTRACT,
+        method: 'set_greeting',
+        args: { greeting: newGreeting },
+      });
+    } catch (error) {
+      console.error(error);
+      const greeting = await viewFunction({ contractId: CONTRACT, method: 'get_greeting' });
+      setGreeting(greeting);
+    }
+
+    setShowSpinner(true);
+    await new Promise((resolve) => setTimeout(resolve, 300));
+    setGreeting(newGreeting);
+    setShowSpinner(false);
+  };
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setNewGreeting(e.target.value);
+  };
+
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Interacting with the contract: &nbsp;
+          <code className={styles.code}>{CONTRACT}</code>
+        </p>
+      </div>
+      <div className={styles.center}>
+        <h1 className="w-100">
+          The contract says: <code>{greeting}</code>
+        </h1>
+
+        {loggedIn ? (
+          <div className="input-group">
+            <input
+              type="text"
+              className="form-control w-20"
+              placeholder="Store a new greeting"
+              onChange={handleChange}
+            />
+            <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>
+              </button>
+            </div>
+          </div>
+        ) : (
+          <div className="w-100 text-end align-text-center">
+            <p className="m-0">Please login to change the greeting</p>
+          </div>
+        )}
+      </div>
+      <Cards />
+    </main>
+  );
+}

package/templates/frontend/{next-app/src/wallets/web3modal.js → vite-react/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/vite-react/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/next-app/jsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

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

@@ -1,67 +0,0 @@
-'use client';
-import { useState, useEffect } from 'react';
-
-import styles from '@/app/app.module.css';
-import { Cards } from '@/components/cards';
-
-import { HelloNearContract } from '@/config';
-import { useWalletSelector } from '@near-wallet-selector/react-hook';
-
-// Contract that the app will interact with
-const CONTRACT = HelloNearContract;
-
-export default function HelloNear() {
-  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
-
-  const [greeting, setGreeting] = useState('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(() => {
-    setLoggedIn(!!signedAccountId);
-  }, [signedAccountId]);
-
-  const storeGreeting = async () => {
-    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);
-  };
-
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Interacting with the contract: &nbsp;
-          <code className={styles.code}>{CONTRACT}</code>
-        </p>
-      </div>
-
-      <div className={styles.center}>
-        <h1 className="w-100"> The contract says: <code>{greeting}</code> </h1>
-        <div className="input-group" hidden={!loggedIn}>
-          <input type="text" className="form-control w-20" placeholder="Store a new greeting" onChange={t => setNewGreeting(t.target.value)} />
-          <div className="input-group-append">
-            <button className="btn btn-secondary" onClick={storeGreeting}>
-              <span hidden={showSpinner}> Save </span>
-              <i className="spinner-border spinner-border-sm" hidden={!showSpinner}></i>
-            </button>
-          </div>
-        </div>
-        <div className='w-100 text-end align-text-center' hidden={loggedIn}>
-          <p className='m-0'> Please login to change the greeting </p>
-        </div>
-      </div>
-      <div className={styles.grid}>
-        <Cards />
-      </div>
-    </main>
-  );
-}

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

@@ -1,54 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-import '@/app/globals.css';
-import { Navigation } from '@/components/navigation';
-import '@near-wallet-selector/modal-ui/styles.css';
-import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
-import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
-import { setupMeteorWalletApp } from '@near-wallet-selector/meteor-wallet-app';
-import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
-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 { setupHereWallet } from '@near-wallet-selector/here-wallet';
-import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
-import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
-import { HelloNearContract, NetworkId } from '@/config';
-import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
-import { wagmiAdapter, web3Modal } from '@/wallets/web3modal';
-
-const walletSelectorConfig = {
-  network: NetworkId,
-  // createAccessKeyFor: HelloNearContract,
-  modules: [
-    setupMeteorWallet(),
-    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
-    setupBitteWallet(),
-    setupMeteorWalletApp({ contractId: HelloNearContract }),
-    setupHotWallet(),
-    setupLedger(),
-    setupSender(),
-    setupHereWallet(),
-    setupNearMobileWallet(),
-    setupWelldoneWallet(),
-    setupMyNearWallet(),
-  ],
-}
-
-// Layout Component
-export default function RootLayout({ children }) {
-
-  return (
-    <html lang="en">
-      <body>
-        <WalletSelectorProvider config={walletSelectorConfig}>
-          <Navigation />
-          {children}
-        </WalletSelectorProvider>
-      </body>
-    </html>
-  );
-}

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

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}

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

@@ -1,45 +0,0 @@
-import '@/styles/globals.css';
-import { Navigation } from '@/components/navigation';
-
-import '@near-wallet-selector/modal-ui/styles.css';
-import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
-import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
-import { setupMeteorWalletApp } from '@near-wallet-selector/meteor-wallet-app';
-import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
-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 { setupHereWallet } from '@near-wallet-selector/here-wallet';
-import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
-import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
-import { HelloNearContract, NetworkId } from '@/config';
-import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
-import { wagmiAdapter, web3Modal } from '@/wallets/web3modal';
-
-const walletSelectorConfig = {
-  network: NetworkId,
-  // createAccessKeyFor: HelloNearContract,
-  modules: [
-    setupMeteorWallet(),
-    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
-    setupBitteWallet(),
-    setupMeteorWalletApp({ contractId: HelloNearContract }),
-    setupHotWallet(),
-    setupLedger(),
-    setupSender(),
-    setupHereWallet(),
-    setupNearMobileWallet(),
-    setupWelldoneWallet(),
-    setupMyNearWallet(),
-  ],
-}
-
-export default function MyApp({ Component, pageProps }) {
-  return (
-    <WalletSelectorProvider config={walletSelectorConfig}>
-      <Navigation />
-      <Component {...pageProps} />
-    </WalletSelectorProvider>
-  );
-}