create-near-app 6.0.0-beta.5 → 6.0.0

package/package.json

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

package/templates/contracts/ts/package.json

@@ -2,6 +2,9 @@
   "name": "hello_near",
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
+  "engines": {
+    "node": "16.x"
+  },
   "type": "module",
   "scripts": {
     "build": "near-sdk-js build src/contract.ts build/hello_near.wasm",

package/templates/frontend/next/package.json

@@ -2,6 +2,9 @@
   "name": "hello-near",
   "version": "1.0.0",
   "private": true,
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",

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

@@ -1,6 +1,6 @@
 import dynamic from 'next/dynamic';
 
-import styles from '@/app/app.module.css'
+import styles from '@/app/app.module.css';
 import { DocsCard, HelloNearCard } from '@/components/cards';
 import { NetworkId, ComponentMap } from '@/config';
 
@@ -12,33 +12,33 @@ export default function HelloComponents() {
 
   return (
     <>
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Loading components from: &nbsp;
-          <code className={styles.code}>{socialComponents.socialDB}</code>
-        </p>
-      </div>
-      <div className={styles.center}>
-        <h1> <code>Multi-chain</code> Components Made Simple </h1>
-      </div>
-      <div className='row'>
-        <div class="col-6">
-          <Component src={socialComponents.HelloNear} />
-          <p class="my-4">&nbsp;</p>
-          <Component src={socialComponents.LoveNear} />
+      <main className={styles.main}>
+        <div className={styles.description}>
+          <p>
+            Loading components from: &nbsp;
+            <code className={styles.code}>{socialComponents.socialDB}</code>
+          </p>
         </div>
-        <div class="col-6">
-          <Component src={socialComponents.Lido} />
+        <div className={styles.center}>
+          <h1> <code>Multi-chain</code> Components Made Simple </h1>
         </div>
-      </div>
-      <hr />
+        <div className='row'>
+          <div class="col-6">
+            <Component src={socialComponents.HelloNear} />
+            <p class="my-4">&nbsp;</p>
+            <Component src={socialComponents.LoveNear} />
+          </div>
+          <div class="col-6">
+            <Component src={socialComponents.Lido} />
+          </div>
+        </div>
+        <hr />
 
-      <div className={styles.grid}>
-        <DocsCard />
-        <HelloNearCard />
-      </div>
-    </main>
+        <div className={styles.grid}>
+          <DocsCard />
+          <HelloNearCard />
+        </div>
+      </main>
     </>
   );
 }

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

@@ -1,35 +1,35 @@
-'use client'
+'use client';
 import { DocsCard, HelloComponentsCard } from '@/components/cards';
 import { useWallet } from '@/wallets/wallet-selector';
-import { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react';
 import { HelloNearContract, NetworkId } from '../../config';
-import styles from '../app.module.css'
+import styles from '../app.module.css';
 
 // Contract that the app will interact with
 const CONTRACT = HelloNearContract[NetworkId];
 
-export default function HelloNear({ }) {
-  const { signedAccountId, viewMethod, callMethod } = useWallet()
+export default function HelloNear() {
+  const { signedAccountId, viewMethod, callMethod } = useWallet();
 
-  const [greeting, setGreeting] = useState('loading...')
-  const [loggedIn, setLoggedIn] = useState(false)
-  const [showSpinner, setShowSpinner] = useState(false)
+  const [greeting, setGreeting] = useState('loading...');
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [showSpinner, setShowSpinner] = useState(false);
 
   useEffect(() => {
     viewMethod && viewMethod(CONTRACT, 'get_greeting', {}).then(
       greeting => setGreeting(greeting)
-    )
-  }, [viewMethod])
+    );
+  }, [viewMethod]);
 
   useEffect(() => {
-    setLoggedIn(!!signedAccountId)
-  }, [signedAccountId])
+    setLoggedIn(!!signedAccountId);
+  }, [signedAccountId]);
 
   const saveGreeting = async () => {
-    setShowSpinner(true)
+    setShowSpinner(true);
     await callMethod(CONTRACT, 'set_greeting', { greeting });
-    setShowSpinner(false)
-  }
+    setShowSpinner(false);
+  };
 
   return (
     <main className={styles.main}>
@@ -43,7 +43,7 @@ export default function HelloNear({ }) {
       <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 => { setGreeting(t.target.value) }} />
+          <input type="text" className="form-control w-20" placeholder="Store a new greeting" onChange={t => { setGreeting(t.target.value); } } />
           <div className="input-group-append">
             <button className="btn btn-secondary" onClick={saveGreeting}>
               <span hidden={showSpinner}> Save </span>
@@ -60,5 +60,5 @@ export default function HelloNear({ }) {
         <HelloComponentsCard />
       </div>
     </main>
-  )
+  );
 }

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

@@ -1,16 +1,15 @@
-'use client'
-import './globals.css'
+'use client';
+import './globals.css';
 import '@near-wallet-selector/modal-ui/styles.css';
 
-import { ComponentMap, NetworkId } from '@/config';
+import { NetworkId } from '@/config';
 import { Navigation } from '@/components/navigation';
-import { initWallet } from '@/wallets/wallet-selector';
+import { useInitWallet } from '@/wallets/wallet-selector';
 
 export default function RootLayout({ children }) {
 
-  const createAccessKeyFor = ComponentMap[NetworkId].socialDB;
-  initWallet({ createAccessKeyFor });
-  
+  useInitWallet({ createAccessKeyFor: '', networkId: NetworkId });
+
   return (
     <html lang="en">
       <body>
@@ -18,5 +17,5 @@ export default function RootLayout({ children }) {
         {children}
       </body>
     </html>
-  )
+  );
 }

package/templates/frontend/next/src/app/page.js

@@ -1,8 +1,8 @@
-import Image from 'next/image'
-import styles from './app.module.css'
-import { DocsCard, HelloComponentsCard, HelloNearCard } from '@/components/cards'
+import Image from 'next/image';
+import styles from './app.module.css';
+import { DocsCard, HelloComponentsCard, HelloNearCard } from '@/components/cards';
 
-export default function Home({ }) {
+export default function Home() {
   return (
     <main className={styles.main}>
       <div className={styles.description}> </div>
@@ -33,5 +33,5 @@ export default function Home({ }) {
         <DocsCard />
       </div>
     </main>
-  )
+  );
 }

package/templates/frontend/next/src/components/cards.js

@@ -13,7 +13,7 @@ export const DocsCard = () => {
       </h2>
       <p>Learn how this application works, and what you can build on Near.</p>
     </a>);
-}
+};
 
 export const HelloNearCard = () => {
   return (
@@ -28,7 +28,7 @@ export const HelloNearCard = () => {
       <p>Discover how simple it is to interact with a Near smart contract.</p>
     </a>
   );
-}
+};
 
 export const HelloComponentsCard = () => {
   return (
@@ -42,5 +42,5 @@ export const HelloComponentsCard = () => {
       </h2>
       <p>See how Web3 components can help you to create multi-chain apps.</p>
     </a>
-  )
-}
+  );
+};

package/templates/frontend/next/src/components/navigation.js

@@ -7,17 +7,17 @@ import { useWallet } from '@/wallets/wallet-selector';
 
 export const Navigation = () => {
 
-  const { signedAccountId, logOut, logIn } = useWallet()
-  const [action, setAction] = useState(() => { })
-  const [label, setLabel] = useState('Loading...')
+  const { signedAccountId, logOut, logIn } = useWallet();
+  const [action, setAction] = useState(() => { });
+  const [label, setLabel] = useState('Loading...');
 
   useEffect(() => {
     if (signedAccountId) {
-      setAction(() => logOut)
-      setLabel(`Logout ${signedAccountId}`)
+      setAction(() => logOut);
+      setLabel(`Logout ${signedAccountId}`);
     } else {
-      setAction(() => logIn)
-      setLabel('Login')
+      setAction(() => logIn);
+      setLabel('Login');
     }
   }, [signedAccountId, logOut, logIn, setAction, setLabel]);
 
@@ -33,4 +33,4 @@ export const Navigation = () => {
       </div>
     </nav>
   );
-}
+};

package/templates/frontend/next/src/wallets/wallet-selector.js

@@ -1,12 +1,11 @@
 import { create as createStore } from 'zustand';
-import { distinctUntilChanged, map } from "rxjs";
+import { distinctUntilChanged, map } from 'rxjs';
 import { providers } from 'near-api-js';
 import { setupWalletSelector } from '@near-wallet-selector/core';
 import { setupModal } from '@near-wallet-selector/modal-ui';
 import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
 import { setupHereWallet } from '@near-wallet-selector/here-wallet';
 
-import { NetworkId } from '@/config';
 import { useEffect, useState } from 'react';
 
 export const useWallet = createStore(set => ({
@@ -22,7 +21,7 @@ export const useWallet = createStore(set => ({
   setStoreSelector: ({ selector }) => set({ selector }),
 }));
 
-export function initWallet({ createAccessKeyFor }) {
+export function useInitWallet({ createAccessKeyFor, networkId }) {
   const setAuth = useWallet(store => store.setAuth);
   const setLogActions = useWallet(store => store.setLogActions);
   const setMethods = useWallet(store => store.setMethods);
@@ -30,22 +29,20 @@ export function initWallet({ createAccessKeyFor }) {
   const [selector, setSelector] = useState(undefined);
 
   useEffect(() => {
-    console.log('initWallet')
     const selector = setupWalletSelector({
-      network: NetworkId,
+      network: networkId,
       modules: [setupMyNearWallet(), setupHereWallet()]
-    })
+    });
 
     setSelector(selector);
     setStoreSelector({ selector });
-  }, []);
+  }, [networkId, setStoreSelector]);
 
   useEffect(() => {
-    console.log('selector then')
-    if(!selector) return;
-    
+    if (!selector) return;
+
     selector.then(walletSelector => {
-      const accounts = walletSelector.store.getState().accounts
+      const accounts = walletSelector.store.getState().accounts;
       const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
       setAuth({ signedAccountId });
 
@@ -55,37 +52,32 @@ export function initWallet({ createAccessKeyFor }) {
           distinctUntilChanged()
         )
         .subscribe((accounts) => {
-          console.log("accounts", accounts)
           const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
           setAuth({ signedAccountId });
         });
-    })
+    });
   }, [selector, setAuth]);
 
   useEffect(() => {
-    console.log('actions')
+    if (!selector) return;
 
-    if(!selector) return;
-  
     // defined logOut and logIn actions
     const logOut = async () => {
       const wallet = await (await selector).wallet();
       await wallet.signOut();
       setAuth({ signedAccountId: '' });
-    }
+    };
 
     const logIn = async () => {
       const modal = setupModal(await selector, { contractId: createAccessKeyFor });
       modal.show();
-    }
+    };
 
     setLogActions({ logOut, logIn });
-  }, [selector, setAuth]);
+  }, [createAccessKeyFor, selector, setAuth, setLogActions]);
 
   useEffect(() => {
-    console.log('methods')
-
-    if(!selector) return;
+    if (!selector) return;
 
     const viewMethod = async (contractId, method, args = {}) => {
       const { network } = (await selector).options;
@@ -99,7 +91,7 @@ export function initWallet({ createAccessKeyFor }) {
         finality: 'optimistic',
       });
       return JSON.parse(Buffer.from(res.result).toString());
-    }
+    };
 
     const callMethod = async (contractId, method, args = {}, gas = '30000000000000', deposit = 0) => {
       const wallet = await (await selector).wallet();
@@ -119,10 +111,10 @@ export function initWallet({ createAccessKeyFor }) {
         ],
       });
 
-      return providers.getTransactionLastResult(outcome)
-    }
+      return providers.getTransactionLastResult(outcome);
+    };
 
     setMethods({ viewMethod, callMethod });
 
-  }, [selector]);
+  }, [selector, setMethods]);
 }

package/templates/frontend/vanilla/src/components.js

@@ -3,11 +3,7 @@ import { Wallet } from './near-wallet';
 import { useInitNear, Widget } from 'near-social-vm';
 import { useEffect } from 'react';
 
-const CONTRACT_ADDRESS = 'v1.social08.testnet';
-
-// When creating the wallet you can optionally ask to create an access key
-// Having the key enables to call non-payable methods without interrupting the user to sign
-const wallet = new Wallet({createAccessKeyFor: CONTRACT_ADDRESS, network: 'testnet'});
+const wallet = new Wallet({network: 'testnet'});
 
 export default function Component({ src }) {
 
@@ -46,8 +42,8 @@ window.onload = async () => {
 };
 
 // Button clicks
-document.querySelector('#sign-in-button').onclick = () => { wallet.signIn() };
-document.querySelector('#sign-out-button').onclick = () => { wallet.signOut() };
+document.querySelector('#sign-in-button').onclick = () => { wallet.signIn(); };
+document.querySelector('#sign-out-button').onclick = () => { wallet.signOut(); };
 
 // UI: Display the signed-out container
 function signedOutUI() {

package/templates/frontend/vanilla/src/hello.js

@@ -1,22 +1,22 @@
 import { Wallet } from './near-wallet';
 
-const CONTRACT_ADDRESS = 'v1.social08.testnet';
+const HELLO_NEAR = 'hello.near-examples.testnet';
 
 // When creating the wallet you can optionally ask to create an access key
 // Having the key enables to call non-payable methods without interrupting the user to sign
-const wallet = new Wallet({createAccessKeyFor: CONTRACT_ADDRESS, network: 'testnet'});
+const wallet = new Wallet({ network: 'testnet' });
 
 // Setup on page load
 window.onload = async () => {
   let isSignedIn = await wallet.startUp();
-  isSignedIn? signedInUI(): signedOutUI();
+  isSignedIn ? signedInUI() : signedOutUI();
   getGreeting();
 };
 
 // Button clicks
 document.querySelector('form').onsubmit = setGreeting;
-document.querySelector('#sign-in-button').onclick = () => { wallet.signIn() };
-document.querySelector('#sign-out-button').onclick = () => { wallet.signOut() };
+document.querySelector('#sign-in-button').onclick = () => { wallet.signIn(); };
+document.querySelector('#sign-out-button').onclick = () => { wallet.signOut(); };
 
 async function setGreeting(event) {
   event.preventDefault();
@@ -26,7 +26,7 @@ async function setGreeting(event) {
 
   // use the wallet to send the greeting to the Smart Contract
   const { greeting } = event.target.elements;
-  await wallet.callMethod({ method: 'set_greeting', args: { greeting: greeting.value }, contractId: CONTRACT_ADDRESS });
+  await wallet.callMethod({ method: 'set_greeting', args: { greeting: greeting.value }, contractId: HELLO_NEAR });
 
   // query the new greeting
   await getGreeting();
@@ -37,7 +37,7 @@ async function setGreeting(event) {
 
 async function getGreeting() {
   // use the wallet to query the Smart Contract
-  const currentGreeting = await wallet.viewMethod({ method: 'get_greeting', contractId: CONTRACT_ADDRESS });
+  const currentGreeting = await wallet.viewMethod({ method: 'get_greeting', contractId: HELLO_NEAR });
 
   // Display it
   document.querySelector('#displayGreeting').innerText = currentGreeting;
@@ -56,6 +56,6 @@ function signedInUI() {
   });
 }
 
-function hide(id){
+function hide(id) {
   document.querySelectorAll(id).forEach(el => el.style.display = 'none');
 }

package/templates/frontend/vanilla/src/near-wallet.js

@@ -24,8 +24,8 @@ export class Wallet {
     // key, so the user skips signing non-payable transactions.
     // Omitting the accountId will result in the user being
     // asked to sign all transactions.
-    this.createAccessKeyFor = createAccessKeyFor
-    this.network = network
+    this.createAccessKeyFor = createAccessKeyFor;
+    this.network = network;
     this.selector = setupWalletSelector({
       network: this.network,
       modules: [setupMyNearWallet()],

package/templates/frontend/next/.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}