create-near-app 8.4.1 → 9.0.0

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

@@ -9,42 +9,25 @@
     "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",
-    "@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",
     "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.24.0"
+    "vite-plugin-node-polyfills": "0.23.0"
   }
 }

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

@@ -0,0 +1,22 @@
+import { BrowserRouter, Routes, Route } from "react-router";
+
+import { Navigation } from "@/components/navigation";
+import Home from "@/pages/home";
+import HelloNear from "@/pages/hello_near";
+import { NearProvider } from 'near-connect-hooks';
+
+function App () {
+  return (
+    <NearProvider>
+      <BrowserRouter>
+        <Navigation />
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/hello-near" element={<HelloNear />} />
+        </Routes>
+      </BrowserRouter>
+    </NearProvider>
+  );
+};
+
+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.tsx

@@ -0,0 +1,43 @@
+import { Link } from 'react-router'
+import NearLogo from '@/assets/near-logo.svg';
+import styles from '@/styles/app.module.css';
+import { useNearWallet } from 'near-connect-hooks';
+
+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 to="/">
+          <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={handleAction}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

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/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';
+

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 { useNearWallet } from 'near-connect-hooks';
+
+interface useNearHook {
+  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 } = useNearWallet() as useNearHook;
+
+  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/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/contracts/py/.python-version

@@ -1 +0,0 @@
-3.13

package/templates/contracts/py/README.md

@@ -1,74 +0,0 @@
-# contract-py
-
-cargo-near-new-project-description
-
-## How to Build Locally?
-
-Install Python and Emscripten:
-
-```bash
-# Install Python (if not already installed)
-# Use your system's package manager or download from https://www.python.org/downloads/
-
-# Install Emscripten (required for compiling Python contracts to WebAssembly)
-# For Linux/macOS:
-git clone https://github.com/emscripten-core/emsdk.git
-cd emsdk
-./emsdk install latest
-./emsdk activate latest
-source ./emsdk_env.sh
-# Add to your .bashrc or .zshrc for permanent installation:
-# echo 'source "/path/to/emsdk/emsdk_env.sh"' >> ~/.bashrc
-cd ..
-
-# For Windows:
-# Download and extract: https://github.com/emscripten-core/emsdk
-# Then in Command Prompt:
-# cd emsdk
-# emsdk install latest
-# emsdk activate latest
-# emsdk_env.bat
-
-# Verify installation with:
-emcc --version
-
-# Install uv for Python package management
-curl -LsSf https://astral.sh/uv/install.sh | sh
-
-# Install NEAR CLI-RS to deploy and interact with the contract
-curl --proto '=https' --tlsv1.2 -LsSf https://github.com/near/near-cli-rs/releases/latest/download/near-cli-rs-installer.sh | sh
-```
-
-Then run:
-
-```bash
-uvx nearc greeting_contract.py
-```
-
-## How to Test Locally?
-
-```bash
-uv run pytest
-```
-
-## How to Deploy?
-
-To deploy manually, install [`cargo-near`](https://github.com/near/cargo-near) and run:
-
-```bash
-# Create a new account
-cargo near create-dev-account
-
-# Deploy the contract on it
-cargo near deploy <account-id>
-```
-## Useful Links
-
-- [cargo-near](https://github.com/near/cargo-near) - NEAR smart contract development toolkit for Rust
-- [near CLI](https://near.cli.rs) - Iteract with NEAR blockchain from command line
-- [NEAR Python SDK Documentation](https://github.com/r-near/near-sdk-py)
-- [NEAR Documentation](https://docs.near.org)
-- [NEAR StackOverflow](https://stackoverflow.com/questions/tagged/nearprotocol)
-- [NEAR Discord](https://near.chat)
-- [NEAR Telegram Developers Community Group](https://t.me/neardev)
-- NEAR DevHub: [Telegram](https://t.me/neardevhub), [Twitter](https://twitter.com/neardevhub)

package/templates/contracts/py/contract.py

@@ -1,31 +0,0 @@
-from near_sdk_py import Contract, view, call, init
-
-class GreetingContract(Contract):
-    """
-    A simple greeting contract that stores and returns a message.
-    """
-    
-    @init
-    def initialize(self, default_message="Hello, NEAR world!"):
-        """
-        Initialize the contract with a default greeting message.
-        """
-        self.storage["greeting"] = default_message
-        return {"success": True}
-    
-    @call
-    def set_greeting(self, message: str):
-        """
-        Change the greeting message.
-        """
-        self.storage["greeting"] = message
-        self.log_info(f"Saving greeting: {message}")
-        return {"success": True}
-    
-    @view
-    def get_greeting(self):
-        """
-        Retrieve the current greeting message.
-        """
-        return self.storage.get("greeting", "Hello, NEAR world!")
-        

package/templates/contracts/py/pyproject.toml

@@ -1,10 +0,0 @@
-[project]
-name = "py-near"
-version = "0.1.0"
-description = "Add your description here"
-readme = "README.md"
-requires-python = ">=3.13"
-dependencies = [
-    "near-pytest>=0.7.1",
-    "near-sdk-py>=0.7.3",
-]

package/templates/contracts/py/tests/test_mod.py

@@ -1,53 +0,0 @@
-from near_pytest.testing import NearTestCase
-import json
-
-class TestGreetingContract(NearTestCase):
-    @classmethod
-    def setup_class(cls):
-        """Compile and deploy the greeting contract."""
-        super().setup_class()
-        
-        # Compile the contract
-        wasm_path = cls.compile_contract(
-            "contract.py",
-            single_file=True
-        )
-        
-        # Deploy the contract
-        cls.contract_account = cls.create_account("contract")
-        cls.instance = cls.deploy_contract(cls.contract_account, wasm_path)
-        
-        # Initialize the contract
-        cls.instance.call_as(
-            account=cls.contract_account,
-            method_name="initialize",
-            args={"default_message": "Initial greeting"},
-        )
-        
-        # Create test user
-        cls.user = cls.create_account("user")
-        
-        # Save state for future resets
-        cls.save_state()
-    
-    def setup_method(self):
-        """Reset state before each test method."""
-        self.reset_state()
-        
-    def test_greeting(self):
-        # Set greeting as user
-        result = self.instance.call_as(
-            account=self.user,
-            method_name="set_greeting",
-            args={"message": "Hello from test!"}
-        )
-        result = json.loads(result.text)
-        assert result["success"] == True
-        
-        # Get greeting
-        greeting = self.instance.call_as(
-            account=self.user,
-            method_name="get_greeting"
-        )
-        assert greeting.text == "Hello from test!"
-