simpler frontend format

frontend/index.js

@@ -1,43 +1,46 @@
 import 'regenerator-runtime/runtime';
-import { Contract } from './near-interface';
 import { Wallet } from './near-wallet';
+import { HelloNEAR } from './near-interface';
 
-// create the Wallet and the Contract
-const wallet = new Wallet({contractId: process.env.CONTRACT_NAME, createAccessKey: true});
-const contract = new Contract({wallet: wallet})
+// When creating the wallet you can choose to create an access key, so the user
+// can skip signing non-payable methods when interacting with the contract
+const wallet = new Wallet({ createAccessKeyFor: process.env.CONTRACT_NAME })
+
+// Abstract the logic of interacting with the contract to simplify your project
+const contract = new HelloNEAR({ contractId: process.env.CONTRACT_NAME, walletToUse: wallet });
 
 // Setup on page load
 window.onload = async () => {
-  const isSignedIn = await wallet.startUp()
+  let isSignedIn = await wallet.startUp();
 
-  if(isSignedIn){
-    signedInFlow()
-  }else{
-    signedOutFlow()
+  if (isSignedIn) {
+    signedInFlow();
+  } else {
+    signedOutFlow();
   }
 
   fetchGreeting();
-}
+};
 
 // Button clicks
 document.querySelector('form').onsubmit = doUserAction;
-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(); };
 
 // Take the new greeting and send it to the contract
 async function doUserAction(event) {
   event.preventDefault();
   const { greeting } = event.target.elements;
 
   document.querySelector('#signed-in-flow main')
-          .classList.add('please-wait');
+    .classList.add('please-wait');
 
   await contract.setGreeting(greeting.value);
 
   // ===== Fetch the data from the blockchain =====
   await fetchGreeting();
   document.querySelector('#signed-in-flow main')
-          .classList.remove('please-wait');
+    .classList.remove('please-wait');
 }
 
 // Get greeting from the contract on chain

frontend/near-interface.js

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

frontend/near-wallet.js

@@ -1,3 +1,5 @@
+/* A helper file that simplifies using the wallet selector */
+
 // near api js
 import { providers } from 'near-api-js';
 
@@ -20,32 +22,29 @@ export class Wallet {
   walletSelector;
   wallet;
   accountId;
-  contractId;
+  createAccessKeyFor;
 
-  constructor({contractId, createAccessKey=true}){
-    // Initializing a wallet with a contractId will add a
-    // key to the user's account.
+  constructor({ createAccessKeyFor = undefined }) {
+    // Login to a wallet passing a contractId will create a local
+    // key, so the user skips signing non-payable transactions.
     // Omitting the accountId will result in the user being
     // asked to sign all transactions.
-    this.contractWalletInit = createAccessKey ? contractId : undefined;
-    this.contractId = contractId;
+    this.createAccessKeyFor = createAccessKeyFor
   }
 
   // To be called when the website loads
   async startUp() {
     this.walletSelector = await setupWalletSelector({
       network: 'testnet',
       modules: [setupMyNearWallet({ iconUrl: MyNearIconUrl }),
-        setupLedger({ iconUrl: LedgerIconUrl })],
+      setupLedger({ iconUrl: LedgerIconUrl })],
     });
 
     const isSignedIn = this.walletSelector.isSignedIn();
 
     if (isSignedIn) {
-      const { accounts } = this.walletSelector.store.getState();
-
       this.wallet = await this.walletSelector.wallet();
-      this.accountId = accounts[0].accountId;
+      this.accountId = this.walletSelector.store.getState().accounts[0].accountId;
     }
 
     return isSignedIn;
@@ -54,19 +53,19 @@ export class Wallet {
   // Sign-in method
   signIn() {
     const description = 'Please select a wallet to sign in.';
-    const modal = setupModal(this.walletSelector, { contractId: this.contractWalletInit, description });
+    const modal = setupModal(this.walletSelector, { contractId: this.createAccessKeyFor, description });
     modal.show();
   }
 
   // Sign-out method
   signOut() {
     this.wallet.signOut();
-    this.wallet = this.accountId = this.contractId = null;
+    this.wallet = this.accountId = this.createAccessKeyFor = null;
     window.location.replace(window.location.origin + window.location.pathname);
   }
 
   // Make a read-only call to retrieve information from the network
-  async viewMethod({ contractId = this.contractId, method, args = {} }) {
+  async viewMethod({ contractId, method, args = {} }) {
     const { network } = this.walletSelector.options;
     const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
 
@@ -81,12 +80,10 @@ export class Wallet {
   }
 
   // Call a method that changes the contract's state
-  async callMethod({ contractId = this.contractId, method, args = {}, gas = THIRTY_TGAS, deposit = NO_DEPOSIT }) {
-    const { accountId } = this.walletSelector.store.getState().accounts[0];
-
+  async callMethod({ contractId, method, args = {}, gas = THIRTY_TGAS, deposit = NO_DEPOSIT }) {
     // Sign a transaction with the "FunctionCall" action
     return await this.wallet.signAndSendTransaction({
-      signerId: accountId,
+      signerId: this.accountId,
       receiverId: contractId,
       actions: [
         {