create-near-app 5.2.0 → 5.2.1

package/package.json

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

package/templates/contracts/js/src/contract.ts

@@ -1,3 +1,4 @@
+// Find all our documentation at https://docs.near.org
 import { NearBindgen, near, call, view } from 'near-sdk-js';
 
 @NearBindgen({})
@@ -10,9 +11,8 @@ class HelloNear {
   }
 
   @call({}) // This method changes the state, for which it cost gas
-  set_greeting({ message }: { message: string }): void {
-    // Record a log permanently to the blockchain!
-    near.log(`Saving greeting ${message}`);
-    this.greeting = message;
+  set_greeting({ greeting }: { greeting: string }): void {
+    near.log(`Saving greeting ${greeting}`);
+    this.greeting = greeting;
   }
 }

package/templates/contracts/rust/src/lib.rs

@@ -1,11 +1,4 @@
-/*
- * Example smart contract written in RUST
- *
- * Learn more about writing NEAR smart contracts with Rust:
- * https://near-docs.io/develop/Contract
- *
- */
-
+// Find all our documentation at https://docs.near.org
 use near_sdk::borsh::{self, BorshDeserialize, BorshSerialize};
 use near_sdk::{log, near_bindgen};
 
@@ -36,7 +29,6 @@ impl Contract {
 
     // Public method - accepts a greeting, such as "howdy", and records it
     pub fn set_greeting(&mut self, message: String) {
-        // Use env::log to record logs permanently to the blockchain!
         log!("Saving greeting {}", message);
         self.message = message;
     }

package/templates/frontend/react/App.js

@@ -6,20 +6,21 @@ import './assets/global.css';
 import { EducationalText, SignInPrompt, SignOutButton } from './ui-components';
 
 
-export default function App({ isSignedIn, helloNEAR, wallet }) {
+export default function App({ isSignedIn, contractId, wallet }) {
   const [valueFromBlockchain, setValueFromBlockchain] = React.useState();
 
   const [uiPleaseWait, setUiPleaseWait] = React.useState(true);
 
   // Get blockchian state once on component load
   React.useEffect(() => {
-    helloNEAR.getGreeting()
+    getGreeting()
       .then(setValueFromBlockchain)
       .catch(alert)
       .finally(() => {
         setUiPleaseWait(false);
       });
-  }, []);
+    }
+  , []);
 
   /// If user not signed-in with wallet - show prompt
   if (!isSignedIn) {
@@ -31,14 +32,21 @@ export default function App({ isSignedIn, helloNEAR, wallet }) {
     e.preventDefault();
     setUiPleaseWait(true);
     const { greetingInput } = e.target.elements;
-    helloNEAR.setGreeting(greetingInput.value)
-      .then(async () => {return helloNEAR.getGreeting();})
+    
+    // use the wallet to send the greeting to the contract
+    wallet.callMethod({ method: 'set_greeting', args: { message: greetingInput.value }, contractId })
+      .then(async () => {return getGreeting();})
       .then(setValueFromBlockchain)
       .finally(() => {
         setUiPleaseWait(false);
       });
   }
 
+  function getGreeting(){
+    // use the wallet to query the contract's greeting
+    return wallet.viewMethod({ method: 'get_greeting', contractId })
+  }
+
   return (
     <>
       <SignOutButton accountId={wallet.accountId} onClick={() => wallet.signOut()}/>
@@ -64,4 +72,4 @@ export default function App({ isSignedIn, helloNEAR, wallet }) {
       </main>
     </>
   );
-}
+}

package/templates/frontend/react/index.js

@@ -4,22 +4,20 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 // NEAR
-import { HelloNEAR } from './near-interface';
 import { Wallet } from './near-wallet';
 
+const CONTRACT_ADDRESS = process.env.CONTRACT_NAME
+
 // 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: process.env.CONTRACT_NAME })
-
-// Abstract the logic of interacting with the contract to simplify your flow
-const helloNEAR = new HelloNEAR({ contractId: process.env.CONTRACT_NAME, walletToUse: wallet });
+const wallet = new Wallet({ createAccessKeyFor: CONTRACT_ADDRESS })
 
 // Setup on page load
 window.onload = async () => {
   const isSignedIn = await wallet.startUp()
  
   ReactDOM.render(
-    <App isSignedIn={isSignedIn} helloNEAR={helloNEAR} wallet={wallet} />,
+    <App isSignedIn={isSignedIn} contractId={CONTRACT_ADDRESS} wallet={wallet} />,
     document.getElementById('root')
   );
 }

package/templates/frontend/vanilla/index.js

@@ -1,13 +1,11 @@
 import 'regenerator-runtime/runtime';
 import { Wallet } from './near-wallet';
-import { HelloNEAR } from './near-interface';
+
+const CONTRACT_ADDRESS = process.env.CONTRACT_NAME;
 
 // 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: process.env.CONTRACT_NAME })
-
-// Abstract the logic of interacting with the contract to simplify your flow
-const helloNEAR = new HelloNEAR({ contractId: process.env.CONTRACT_NAME, walletToUse: wallet });
+const wallet = new Wallet({ createAccessKeyFor: CONTRACT_ADDRESS })
 
 // Setup on page load
 window.onload = async () => {
@@ -19,47 +17,50 @@ window.onload = async () => {
     signedOutFlow();
   }
 
-  fetchGreeting();
+  getGreeting();
 };
 
 // Button clicks
-document.querySelector('form').onsubmit = doUserAction;
+document.querySelector('form').onsubmit = setGreeting;
 document.querySelector('#sign-in-button').onclick = () => { wallet.signIn(); };
 document.querySelector('#sign-out-button').onclick = () => { wallet.signOut(); };
 
-// Take the new greeting and send it to the contract
-async function doUserAction(event) {
+async function setGreeting(event) {
+  // handle UI
   event.preventDefault();
   const { greeting } = event.target.elements;
 
   document.querySelector('#signed-in-flow main')
     .classList.add('please-wait');
 
-  await helloNEAR.setGreeting(greeting.value);
+  // use the wallet to send the greeting to the Smart Contract
+  await wallet.callMethod({ method: 'set_greeting', args: { message: greeting.value }, contractId: CONTRACT_ADDRESS });
 
-  // ===== Fetch the data from the blockchain =====
-  await fetchGreeting();
-  document.querySelector('#signed-in-flow main')
-    .classList.remove('please-wait');
+  // query the new greeting
+  await getGreeting();
+
+  // handle UI stuff
+  document.querySelector('#signed-in-flow main').classList.remove('please-wait');
 }
 
-// Get greeting from the contract on chain
-async function fetchGreeting() {
-  const currentGreeting = await helloNEAR.getGreeting();
+async function getGreeting() {
+  // use the wallet to query the Smart Contract
+  const currentGreeting = await wallet.viewMethod({ method: 'get_greeting', contractId: CONTRACT_ADDRESS });
 
+  // handle UI stuff
   document.querySelectorAll('[data-behavior=greeting]').forEach(el => {
     el.innerText = currentGreeting;
     el.value = currentGreeting;
   });
 }
 
-// Display the signed-out-flow container
+// UI: Display the signed-out-flow container
 function signedOutFlow() {
   document.querySelector('#signed-in-flow').style.display = 'none';
   document.querySelector('#signed-out-flow').style.display = 'block';
 }
 
-// Displaying the signed in flow container and fill in account-specific data
+// UI: Displaying the signed in flow container and fill in account-specific data
 function signedInFlow() {
   document.querySelector('#signed-out-flow').style.display = 'none';
   document.querySelector('#signed-in-flow').style.display = 'block';

package/templates/frontend/shared/near-interface.js

@@ -1,16 +0,0 @@
-/* Talking with a contract often involves transforming data, we recommend you to encapsulate that logic into a class */
-
-export class HelloNEAR {
-  constructor({ contractId, walletToUse }) {
-    this.contractId = contractId;
-    this.wallet = walletToUse;    
-  }
-
-  async getGreeting() {
-    return await this.wallet.viewMethod({ contractId: this.contractId, method: 'get_greeting' });
-  }
-
-  async setGreeting(greeting) {
-    return await this.wallet.callMethod({ contractId: this.contractId, method: 'set_greeting', args: { message: greeting } });
-  }
-}