create-near-app 8.0.0 → 8.2.0

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

@@ -1,15 +1,15 @@
-import { useState, useEffect, useContext } from 'react';
+import { useState, useEffect } from 'react';
 
-import { NearContext } from '@/wallets/near';
 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;
 
 export default function HelloNear() {
-  const { signedAccountId, wallet } = useContext(NearContext);
+  const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
 
   const [greeting, setGreeting] = useState('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');
@@ -17,12 +17,10 @@ export default function HelloNear() {
   const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
-    if (!wallet) return;
-
-    wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' }).then(
+    viewFunction({ contractId: CONTRACT, method: 'get_greeting' }).then(
       greeting => setGreeting(greeting)
     );
-  }, [wallet]);
+  }, []);
 
   useEffect(() => {
     setLoggedIn(!!signedAccountId);
@@ -30,8 +28,8 @@ export default function HelloNear() {
 
   const saveGreeting = async () => {
     setShowSpinner(true);
-    await wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
-    const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
+    await callFunction({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
+    const greeting = await viewFunction({ contractId: CONTRACT, method: 'get_greeting' });
     setGreeting(greeting);
     setShowSpinner(false);
   };

package/templates/frontend/next-page/src/wallets/web3modal.js

@@ -1,44 +1,35 @@
-import { NetworkId, EVMWalletChain } from '@/config';
-import { reconnect, http, createConfig } from "@wagmi/core";
-import { walletConnect, injected } from "@wagmi/connectors";
-import { createWeb3Modal } from "@web3modal/wagmi";
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { createAppKit } from "@reown/appkit/react";
+import { nearTestnet } from "@reown/appkit/networks";
+import { reconnect } from "@wagmi/core";
 
-// Config
-const near = {
-  id: EVMWalletChain.chainId,
-  name: EVMWalletChain.name,
-  nativeCurrency: {
-    decimals: 18,
-    name: "NEAR",
-    symbol: "NEAR",
-  },
-  rpcUrls: {
-    default: { http: [EVMWalletChain.rpc] },
-    public: { http: [EVMWalletChain.rpc] },
-  },
-  blockExplorers: {
-    default: {
-      name: "NEAR Explorer",
-      url: EVMWalletChain.explorer,
-    },
-  },
-  testnet: NetworkId === "testnet",
-};
+// Get a project ID at https://cloud.reown.com
+const projectId = "30147604c5f01d0bc4482ab0665b5697";
 
-// Get your projectId at https://cloud.reown.com
-const projectId = '5bb0fe33763b3bea40b8d69e4269b4ae';
-
-export const wagmiConfig = createConfig({
-  chains: [near],
-  transports: { [near.id]: http() },
-  connectors: [
-    walletConnect({ projectId, showQrModal: false }),
-    injected({ shimDisconnect: true }),
-  ],
+export const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  networks: [nearTestnet],
 });
 
-// Preserve login state on page reload
-reconnect(wagmiConfig);
+export const web3Modal = createAppKit({
+  adapters: [wagmiAdapter],
+  projectId,
+  networks: [nearTestnet],
+  enableWalletConnect: true,
+  features: {
+    analytics: true,
+    swaps: false,
+    onramp: false,
+    email: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+    socials: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  },
+  coinbasePreference: "eoaOnly", // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  allWallets: "SHOW",
+});
 
-// Modal for login
-export const web3Modal = createWeb3Modal({ wagmiConfig, projectId });
+// force reconnecting if the user has already signed in with an ethereum wallet
+// this is a workaround until `ethereum-wallets` supports the `reconnect` method
+if (typeof window !== "undefined") {
+  const recentWallets = localStorage.getItem("near-wallet-selector:recentlySignedInWallets");
+  recentWallets && recentWallets.includes("ethereum-wallets") && reconnect(wagmiAdapter.wagmiConfig)
+} 

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

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

package/templates/frontend/vite-react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> Near App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

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

@@ -0,0 +1,49 @@
+{
+  "name": "hello-near",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "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"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@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",
+    "vite": "^6.3.5",
+    "vite-plugin-node-polyfills": "^0.23.0"
+  }
+}

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

@@ -0,0 +1,56 @@
+import { Navigation } from './components/navigation';
+import Home from './pages/home';
+
+import HelloNear from './pages/hello_near';
+import { HelloNearContract, NetworkId } from './config.js';
+import { BrowserRouter, Routes, Route } from "react-router";
+import { wagmiAdapter, web3Modal } from '@/wallets/web3modal';
+
+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 { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
+
+const walletSelectorConfig = {
+  network: NetworkId,
+  // createAccessKeyFor: HelloNearContract,
+  modules: [
+    setupMeteorWallet(),
+    setupEthereumWallets({ wagmiConfig: wagmiAdapter.wagmiConfig, web3Modal }),
+    setupBitteWallet(),
+    setupMeteorWalletApp({ contractId: HelloNearContract }),
+    setupHotWallet(),
+    setupLedger(),
+    setupSender(),
+    setupHereWallet(),
+    setupNearMobileWallet(),
+    setupWelldoneWallet(),
+    setupMyNearWallet(),
+  ],
+}
+
+
+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/assets/near-logo.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="26.707293"
+   height="26.619026"
+   viewBox="0 0 26.707293 26.619026"
+   fill="none"
+   version="1.1"
+   id="svg196"
+   sodipodi:docname="near-logo.svg"
+   inkscape:version="1.2.1 (9c6d41e, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview198"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="4.305628"
+     inkscape:cx="52.721693"
+     inkscape:cy="16.025537"
+     inkscape:window-width="1403"
+     inkscape:window-height="430"
+     inkscape:window-x="0"
+     inkscape:window-y="25"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg196" />
+  <g
+     clip-path="url(#clip0_1_1899)"
+     id="g192"
+     transform="translate(-0.217407,-0.690475)">
+    <path
+       d="m 24.079,0.690475 c -0.9891,0 -1.9075,0.511145 -2.4256,1.351425 l -5.5825,8.261 c -0.1819,0.2723 -0.1081,0.6393 0.1651,0.8206 0.2214,0.1471 0.5143,0.1289 0.716,-0.044 l 5.495,-4.75049 c 0.0913,-0.0819 0.232,-0.07356 0.3142,0.01744 0.0373,0.04171 0.0571,0.09556 0.0571,0.15092 V 21.3707 c 0,0.1228 -0.0997,0.2214 -0.223,0.2214 -0.0662,0 -0.1285,-0.0288 -0.1704,-0.0796 L 5.81436,1.69457 C 5.27339,1.05829 4.47904,0.691234 3.64284,0.690475 H 3.0623 C 1.4911,0.690475 0.217407,1.96 0.217407,3.52605 V 24.4739 c 0,1.5661 1.273693,2.8356 2.844893,2.8356 0.98913,0 1.9075,-0.5111 2.42565,-1.3514 l 5.58255,-8.261 c 0.1818,-0.2723 0.108,-0.6393 -0.1652,-0.8206 -0.2214,-0.1471 -0.5143,-0.1289 -0.7159,0.044 L 4.69436,21.671 C 4.60306,21.7529 4.4623,21.7445 4.38013,21.6535 4.34284,21.6118 4.32306,21.558 4.32382,21.5026 V 6.62554 c 0,-0.12286 0.09967,-0.22145 0.22293,-0.22145 0.06544,0 0.12859,0.02882 0.17044,0.07963 L 21.3255,26.3054 c 0.5409,0.6363 1.3353,1.0034 2.1715,1.0041 h 0.5805 c 1.5712,8e-4 2.8457,-1.268 2.8472,-2.834 V 3.52605 C 26.9247,1.96 25.651,0.690475 24.0798,0.690475 Z"
+       fill="#000000"
+       id="path190" />
+  </g>
+</svg>

package/templates/frontend/vite-react/src/assets/near.svg

@@ -0,0 +1 @@
+<svg width="110" height="28" viewBox="0 0 110 28" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_1_1899)"><path d="M45.5211 4.46114C43.4964 4.46114 42.0241 4.93816 40.7733 6.03856L38.5644 7.94588C38.3803 8.09301 38.0121 8.20297 37.7549 7.98228C37.4969 7.76235 37.4604 7.46886 37.6811 7.17537L38.8589 5.41442C39.043 5.15733 38.8962 4.82743 38.5644 4.82743H35.7302C35.3992 4.82743 35.1413 5.08452 35.1413 5.41442V22.5841C35.1413 22.914 35.3992 23.1711 35.7302 23.1711H38.6748C39.0058 23.1711 39.2637 22.914 39.2637 22.5841V12.8988C39.2637 8.46006 42.9813 7.76311 44.3798 7.76311C47.3609 7.76311 48.4284 9.89112 48.4284 11.5049V22.5841C48.4284 22.914 48.6863 23.1711 49.0173 23.1711H51.9618C52.2928 23.1711 52.5508 22.914 52.5508 22.5841V11.1379C52.5508 7.029 49.8634 4.46114 45.5203 4.46114H45.5211Z" fill="black"/><path d="M64.5489 4.38757C58.8439 4.38757 55.2001 7.87307 55.2001 12.6053V15.2104C55.2001 20.1997 58.8439 23.6117 64.5489 23.6117C69.5912 23.6117 73.1246 21.0067 73.4929 17.4848C73.5302 17.1177 73.2723 16.8614 72.904 16.8614H70.0332C69.7753 16.8614 69.5546 17.0085 69.4808 17.2648C69.1126 18.4388 67.3831 20.1997 64.5489 20.1997C61.7146 20.1997 59.0645 18.1453 59.1011 15.2104L59.1383 11.9456C59.1749 9.48766 61.7519 7.80027 64.5489 7.80027C67.0887 7.80027 69.5546 9.23133 69.8118 11.5793C69.8331 11.8508 69.6459 12.0957 69.3774 12.1473L61.125 13.7437C60.794 13.8172 60.5361 14.1107 60.5361 14.477V14.5134C60.5361 14.8433 60.867 15.1368 61.3456 15.1368H73.1977C73.5233 15.1368 73.7866 14.8737 73.7866 14.5498V12.2391C73.7866 7.87383 69.9952 4.38833 64.5481 4.38833L64.5489 4.38757Z" fill="black"/><path d="M85.0863 4.38757C80.4853 4.38757 76.5105 7.0654 76.5105 10.5873C76.5105 10.8808 76.7685 11.1007 77.0994 11.1007H80.0805C80.375 11.1007 80.5956 10.8808 80.6329 10.5873C80.9274 8.97348 82.8782 7.79951 84.976 7.79951C87.4785 7.79951 89.1722 9.34053 89.1722 11.982V15.174C89.1722 18.4388 86.7427 20.0898 83.7243 20.0898C81.3687 20.0898 80.0067 19.2093 80.0067 17.7782C80.0067 16.5307 80.6694 15.4667 83.3926 14.8433L87.3309 13.7793C87.7356 13.6693 87.8832 13.3387 87.8094 12.9724C87.7729 12.6789 87.4419 12.5318 87.1467 12.5318H83.0616C79.6019 12.5318 76.105 14.7326 76.105 17.961V18.4744C76.105 21.7764 79.2337 23.5002 82.8037 23.5002C85.0855 23.5002 87.0364 22.6197 88.2507 21.5929L90.0548 20.0519C90.3492 19.7948 90.6437 19.7948 90.9008 20.0519C91.1215 20.2718 91.0477 20.6024 90.8636 20.8588L89.7595 22.5833C89.5754 22.8404 89.7223 23.1703 90.054 23.1703H92.7041C93.0351 23.1703 93.293 22.9132 93.293 22.5833V11.467C93.293 7.21177 90.2381 4.38681 85.0848 4.38681L85.0863 4.38757Z" fill="black"/><path d="M109.194 4.82819H105.071C103.636 4.82819 102.237 5.70866 101.243 6.55274L99.6243 7.94663C99.4401 8.09376 99.1084 8.20372 98.8877 8.0202C98.6298 7.83667 98.5195 7.46962 98.7409 7.17612L99.9187 5.41517C100.103 5.15808 99.956 4.82819 99.6243 4.82819H96.8638C96.5328 4.82819 96.2749 5.08528 96.2749 5.41517V22.5848C96.2749 22.9147 96.5328 23.1718 96.8638 23.1718H99.8822C100.213 23.1718 100.471 22.9147 100.471 22.5848V13.7801C100.471 10.0011 102.017 8.31369 105.367 8.31369H109.194C109.525 8.31369 109.783 8.0566 109.783 7.7267V5.41517C109.783 5.08528 109.525 4.82819 109.194 4.82819H109.194Z" fill="black"/><path d="M24.079 0.690475C23.0899 0.690475 22.1715 1.20162 21.6534 2.0419L16.0709 10.3029C15.889 10.5752 15.9628 10.9422 16.236 11.1235C16.4574 11.2706 16.7503 11.2524 16.952 11.0795L22.447 6.32901C22.5383 6.24711 22.679 6.25545 22.7612 6.34645C22.7985 6.38816 22.8183 6.44201 22.8183 6.49737V21.3707C22.8183 21.4935 22.7186 21.5921 22.5953 21.5921C22.5291 21.5921 22.4668 21.5633 22.4249 21.5125L5.81436 1.69457C5.27339 1.05829 4.47904 0.691234 3.64284 0.690475H3.0623C1.4911 0.690475 0.217407 1.96 0.217407 3.52605V24.4739C0.217407 26.04 1.4911 27.3095 3.0623 27.3095C4.05143 27.3095 4.9698 26.7984 5.48795 25.9581L11.0705 17.6971C11.2523 17.4248 11.1785 17.0578 10.9053 16.8765C10.6839 16.7294 10.391 16.7476 10.1894 16.9205L4.69436 21.671C4.60306 21.7529 4.4623 21.7445 4.38013 21.6535C4.34284 21.6118 4.32306 21.558 4.32382 21.5026V6.62554C4.32382 6.50268 4.42349 6.40409 4.54675 6.40409C4.61219 6.40409 4.67534 6.43291 4.71719 6.48372L21.3255 26.3054C21.8664 26.9417 22.6608 27.3088 23.497 27.3095H24.0775C25.6487 27.3103 26.9232 26.0415 26.9247 24.4755V3.52605C26.9247 1.96 25.651 0.690475 24.0798 0.690475H24.079Z" fill="black"/></g></svg>

package/templates/frontend/vite-react/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/templates/frontend/vite-react/src/components/cards.jsx

@@ -0,0 +1,27 @@
+import styles from '@/styles/app.module.css';
+import { Link } from 'react-router';
+
+export const Cards = () => {
+  return (
+    <div className={styles.grid}>
+      <a
+        href="https://docs.near.org/build/web3-apps/quickstart"
+        className={styles.card}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <h2>
+          Near Docs <span>-&gt;</span>
+        </h2>
+        <p>Learn how this application works, and what you can build on Near.</p>
+      </a>
+
+      <Link to="/hello-near" className={styles.card} rel="noopener noreferrer">
+        <h2>
+          Near Integration <span>-&gt;</span>
+        </h2>
+        <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

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+
+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';
+
+export const Navigation = () => {
+  const { signedAccountId, signIn, signOut } = useWalletSelector();
+  const [action, setAction] = useState(() => { });
+  const [label, setLabel] = useState('Loading...');
+
+  useEffect(() => {
+    if (signedAccountId) {
+      setAction(() => signOut);
+      setLabel(`Logout ${signedAccountId}`);
+    } else {
+      setAction(() => signIn);
+      setLabel("Login");
+    }
+  }, [signedAccountId, signIn, signOut]);
+
+  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={action}>
+            {label}
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};

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

@@ -0,0 +1,7 @@
+const contractPerNetwork = {
+  mainnet: 'hello.near-examples.near',
+  testnet: 'hello.near-examples.testnet',
+};
+
+export const NetworkId = 'testnet';
+export const HelloNearContract = contractPerNetwork[NetworkId];

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

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

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

@@ -0,0 +1,73 @@
+import { useEffect, useState } 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';
+
+// 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 saveGreeting = async () => {
+    callFunction({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } })
+      .catch(async () => {
+        viewFunction({ contractId: CONTRACT, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
+      });
+
+    setShowSpinner(true);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    setGreeting(newGreeting);
+    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={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" hidden={loggedIn}>
+          <p className="m-0"> Please login to change the greeting </p>
+        </div>
+      </div>
+      <Cards />
+    </main>
+  );
+}

package/templates/frontend/vite-react/src/pages/home.jsx

@@ -0,0 +1,31 @@
+import styles from '@/styles/app.module.css';
+import NearLogo from '@/assets/near-logo.svg';
+import NextLogo from '@/assets/react.svg';
+import { Cards } from '@/components/cards';
+
+const Home = () => {
+  return (
+
+    <main className={styles.main}>
+    <div className={styles.description}> </div>
+
+    <div className={styles.center}>
+      <img className={styles.logo} src={NearLogo} alt="NEAR Logo" width={110 * 1.5} height={28 * 1.5} />
+      <h3 className="ms-2 me-3 text-dark"> + </h3>
+      <img
+          className={styles.reactLogo}
+          src={NextLogo}
+          alt="React Logo"
+          width={300 * 0.58}
+          height={61 * 0.58}
+        />
+    </div>
+
+    <div className={styles.grid}>
+      <Cards />
+    </div>
+  </main>
+  )
+}
+
+export default Home