create-near-app 4.0.0-beta.3.0 → 4.0.0

package/dist/app.js

@@ -35,11 +35,8 @@ const show = __importStar(require("./messages"));
     if (promptResult === null) {
         return;
     }
-    const { config: { projectName, contract, frontend, tests, install }, projectPath, isFromPrompts, } = promptResult;
+    const { config: { projectName, contract, frontend, tests, install, }, projectPath, } = promptResult;
     show.creatingApp();
-    if (contract === 'assemblyscript') {
-        show.assemblyscriptWarning();
-    }
     let createSuccess;
     try {
         createSuccess = await (0, make_1.createProject)({
@@ -56,21 +53,15 @@ const show = __importStar(require("./messages"));
         console.error(e);
         createSuccess = false;
     }
+    if (install) {
+        await (0, make_1.runDepsInstall)(projectPath);
+    }
     if (createSuccess) {
-        show.setupSuccess(projectPath, contract, frontend);
+        show.setupSuccess(projectPath, contract, frontend, install);
     }
     else {
         show.setupFailed();
         return;
     }
-    if (install) {
-        await (0, make_1.runDepsInstall)(projectPath);
-    }
-    else if (isFromPrompts) {
-        const { depsInstall } = await (0, user_input_1.showDepsInstallPrompt)();
-        if (depsInstall) {
-            await (0, make_1.runDepsInstall)(projectPath);
-        }
-    }
 })();
 //# sourceMappingURL=app.js.map

package/dist/messages.js

@@ -3,19 +3,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.depsInstallError = exports.depsInstall = exports.creatingApp = exports.directoryExists = exports.assemblyscriptWarning = exports.windowsWarning = exports.unsupportedNodeVersion = exports.argsError = exports.setupSuccess = exports.successFrontendToText = exports.successContractToText = exports.setupFailed = exports.welcome = exports.log = void 0;
+exports.depsInstallError = exports.depsInstall = exports.creatingApp = exports.directoryExists = exports.windowsWarning = exports.unsupportedNodeVersion = exports.argsError = exports.setupSuccess = exports.successFrontendToText = exports.successContractToText = exports.setupFailed = exports.welcome = exports.show = void 0;
 const chalk_1 = __importDefault(require("chalk"));
 const tracking_1 = require("./tracking");
-const log = (...args) => console.log(...args);
-exports.log = log;
-const welcome = () => (0, exports.log)((0, chalk_1.default) `{blue ======================================================}
+if (process.env.NEAR_NO_COLOR) {
+    chalk_1.default.level = 0;
+}
+const show = (...args) => console.log(...args);
+exports.show = show;
+const welcome = () => (0, exports.show)((0, chalk_1.default) `{blue ======================================================}
 👋 {bold {green Welcome to NEAR!}} Learn more: https://docs.near.org/
 🔧 Let's get your dApp ready.
 {blue ======================================================}
 (${tracking_1.trackingMessage})
 `);
 exports.welcome = welcome;
-const setupFailed = () => (0, exports.log)((0, chalk_1.default) `{bold {red ==========================================}}
+const setupFailed = () => (0, exports.show)((0, chalk_1.default) `{bold {red ==========================================}}
 {red ⛔️ There was a problem during NEAR project setup}.
 Please refer to https://github.com/near/create-near-app README to troubleshoot.
 Notice: some platforms aren't supported (yet).
@@ -25,32 +28,42 @@ const successContractToText = (contract) => (0, chalk_1.default) `with a smart c
 exports.successContractToText = successContractToText;
 const successFrontendToText = (frontend) => frontend === 'none' ? '' : (0, chalk_1.default) ` and a frontend template${frontend === 'react' ? (0, chalk_1.default) `{bold  in React.js}` : ''}`;
 exports.successFrontendToText = successFrontendToText;
-const setupSuccess = (projectName, contract, frontend) => (0, exports.log)((0, chalk_1.default) `
+const setupSuccess = (projectName, contract, frontend, install) => (0, exports.show)((0, chalk_1.default) `
+{green ======================================================}
 ✅  Success! Created '${projectName}'
    ${(0, exports.successContractToText)(contract)}${(0, exports.successFrontendToText)(frontend)}.
-🧠 See {bold {green README.md}} to get started.
-${contract === 'rust' ? (0, chalk_1.default) `🦀 If you are new to Rust please visit {bold {green https://www.rust-lang.org }}` : ''}
-Happy Hacking! 👍
-{blue ======================================================}`);
+${contract === 'rust' ? (0, chalk_1.default) `🦀 If you are new to Rust please visit {bold {green https://www.rust-lang.org }}\n` : ''}
+  {bold {bgYellow {black Your next steps}}}:
+   - {inverse Navigate to your project}:
+         {blue cd {bold ${projectName}}}
+   ${!install ? (0, chalk_1.default) `- {inverse Install all dependencies}
+         {blue npm {bold run deps-install}}` : 'Then:'}
+   - {inverse Test your contract} in NEAR SandBox:
+         {blue npm {bold test}}
+   - {inverse Deploy your contract} to NEAR TestNet with a temporary dev account:
+         {blue npm {bold run deploy}}
+   ${frontend !== 'none' ? (0, chalk_1.default) `- {inverse Start your frontend}:
+         {blue npm {bold start}}\n` : ''}
+🧠 Read {bold {greenBright README.md}} to explore further.`);
 exports.setupSuccess = setupSuccess;
-const argsError = () => (0, exports.log)((0, chalk_1.default) `{red Arguments error}
+const argsError = () => (0, exports.show)((0, chalk_1.default) `{red Arguments error}
 Run {blue npx create-near-app} without arguments, or use:
 npx create-near-app <projectName> --contract rust|js|assemblyscript --frontend react|vanilla|none --tests js|rust`);
 exports.argsError = argsError;
-const unsupportedNodeVersion = (supported) => (0, exports.log)((0, chalk_1.default) `{red We support node.js version ${supported} or later}`);
+const unsupportedNodeVersion = (supported) => (0, exports.show)((0, chalk_1.default) `{red We support node.js version ${supported} or later}`);
 exports.unsupportedNodeVersion = unsupportedNodeVersion;
-const windowsWarning = () => (0, exports.log)((0, chalk_1.default) `👉 Notice: On Windows we recommend using WSL.`);
+const windowsWarning = () => (0, exports.show)((0, chalk_1.default) `{bgYellow {black Notice: On Win32 please use WSL (Windows Subsystem for Linux).}}
+https://docs.microsoft.com/en-us/windows/wsl/install
+Exiting now.`);
 exports.windowsWarning = windowsWarning;
-const assemblyscriptWarning = () => (0, exports.log)((0, chalk_1.default) `👉 Notice: AssemblyScript is not supported on all platforms.`);
-exports.assemblyscriptWarning = assemblyscriptWarning;
-const directoryExists = (dirName) => (0, exports.log)((0, chalk_1.default) `{red This directory already exists! ${dirName}}`);
+const directoryExists = (dirName) => (0, exports.show)((0, chalk_1.default) `{red This directory already exists! ${dirName}}`);
 exports.directoryExists = directoryExists;
-const creatingApp = () => (0, exports.log)((0, chalk_1.default) `\n...creating a new NEAR app...`);
+const creatingApp = () => (0, exports.show)((0, chalk_1.default) `\nCreating a new {bold NEAR dApp}`);
 exports.creatingApp = creatingApp;
-const depsInstall = () => (0, exports.log)((0, chalk_1.default) `
-{green Installing dependencies in a few folders, this might take a while...}
+const depsInstall = () => (0, exports.show)((0, chalk_1.default) `
+{green Installing dependencies in a few folders, this might take a while.}
 `);
 exports.depsInstall = depsInstall;
-const depsInstallError = () => (0, exports.log)(chalk_1.default.red('Error installing NEAR project dependencies'));
+const depsInstallError = () => (0, exports.show)(chalk_1.default.red('Error installing NEAR project dependencies'));
 exports.depsInstallError = depsInstallError;
 //# sourceMappingURL=messages.js.map

package/dist/package-json.js

@@ -53,8 +53,6 @@ const buildContractScript = (contract) => {
             return {
                 'build:contract': 'cd contract && rustup target add wasm32-unknown-unknown && cargo build --all --target wasm32-unknown-unknown --release',
             };
-        default:
-            return {};
     }
 };
 const deployScript = (contract) => {
@@ -68,8 +66,6 @@ const deployScript = (contract) => {
             return {
                 'deploy': 'npm run build:contract && cd contract && near dev-deploy --wasmFile ./target/wasm32-unknown-unknown/release/hello_near.wasm',
             };
-        default:
-            return {};
     }
 };
 const unitTestScripts = (contract) => {
@@ -79,8 +75,6 @@ const unitTestScripts = (contract) => {
             return { 'test:unit': 'cd contract && npm test' };
         case 'rust':
             return { 'test:unit': 'cd contract && cargo test' };
-        default:
-            return {};
     }
 };
 const integrationTestScripts = (contract, tests) => {
@@ -118,13 +112,27 @@ const integrationTestScripts = (contract, tests) => {
                     'test:integration': 'npm run build:contract && cd integration-tests && cargo run --example integration-tests "../contract/target/wasm32-unknown-unknown/release/hello_near.wasm"',
                 };
             }
-        default:
-            return {};
     }
 };
 const npmInstallScript = (contract, hasFrontend, tests) => {
     switch (contract) {
         case 'assemblyscript':
+            if (hasFrontend) {
+                if (tests === 'js') {
+                    return { 'deps-install': 'npm install && cd contract && npm install --ignore-scripts && cd ../integration-tests && npm install && cd ../frontend && npm install && cd ..' };
+                }
+                else {
+                    return { 'deps-install': 'npm install && cd contract && npm install --ignore-scripts && cd ../frontend && npm install && cd ..' };
+                }
+            }
+            else {
+                if (tests === 'js') {
+                    return { 'deps-install': 'npm install && cd contract && npm install --ignore-scripts && cd ../integration-tests && npm install && cd ..' };
+                }
+                else {
+                    return { 'deps-install': 'npm install && cd contract && npm install --ignore-scripts && cd ..' };
+                }
+            }
         case 'js':
             if (hasFrontend) {
                 if (tests === 'js') {

package/dist/tracking.js

@@ -12,7 +12,7 @@ exports.trackingMessage = (0, chalk_1.default) `NEAR collects anonymous informat
 // TODO: track different failures & deps-install usage
 const trackUsage = async (frontend, contract) => {
     // prevents logging from CI
-    if (process.env.IS_GITHUB_ACTION) {
+    if (process.env.NEAR_ENV === 'ci' || process.env.NODE_ENV === 'ci') {
         console.log('Mixpanel logging is skipped in CI env');
         return;
     }

package/dist/types.js

@@ -1,3 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TESTING_FRAMEWORKS = exports.FRONTENDS = exports.CONTRACTS = void 0;
+exports.CONTRACTS = ['assemblyscript', 'js', 'rust'];
+exports.FRONTENDS = ['react', 'vanilla', 'none'];
+exports.TESTING_FRAMEWORKS = ['rust', 'js'];
 //# sourceMappingURL=types.js.map

package/dist/user-input.js

@@ -26,7 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.projectPath = exports.promptAndGetConfig = exports.userAnswersAreValid = exports.showDepsInstallPrompt = exports.showProjectNamePrompt = exports.getUserAnswers = exports.validateUserArgs = exports.getUserArgs = void 0;
+exports.projectPath = exports.promptAndGetConfig = exports.userAnswersAreValid = exports.showProjectNamePrompt = exports.getUserAnswers = exports.validateUserArgs = exports.getUserArgs = void 0;
+const types_1 = require("./types");
 const chalk_1 = __importDefault(require("chalk"));
 const prompts_1 = __importDefault(require("prompts"));
 const commander_1 = require("commander");
@@ -59,9 +60,9 @@ function validateUserArgs(args) {
     const hasAllArgs = hasAllOptions && hasProjectName;
     const hasNoArgs = !hasPartialOptions && !hasProjectName;
     const optionsAreValid = hasAllOptions
-        && ['react', 'vanilla', 'none'].includes(frontend)
-        && ['js', 'rust', 'assemblyscript'].includes(contract)
-        && ['js', 'rust'].includes(tests);
+        && types_1.FRONTENDS.includes(frontend)
+        && types_1.CONTRACTS.includes(contract)
+        && types_1.TESTING_FRAMEWORKS.includes(tests);
     if (hasNoArgs) {
         return 'none';
     }
@@ -73,35 +74,38 @@ function validateUserArgs(args) {
     }
 }
 exports.validateUserArgs = validateUserArgs;
+const contractChoices = [
+    { title: 'JavaScript', value: 'js' },
+    { title: 'Rust', value: 'rust' },
+    { title: 'AssemblyScript', value: 'assemblyscript' },
+];
+const testsChoices = [
+    { title: 'Rust Sandbox Tests', value: 'rust' },
+    { title: 'JavaScript Sandbox Tests', value: 'js' },
+];
+const frontendChoices = [
+    { title: 'React.js', value: 'react' },
+    { title: 'Vanilla JavaScript', value: 'vanilla' },
+    { title: 'No frontend', value: 'none' },
+];
 const userPrompts = [
     {
         type: 'select',
         name: 'contract',
         message: 'Select your smart-contract language',
-        choices: [
-            { title: 'JavaScript', value: 'js' },
-            { title: 'Rust', value: 'rust' },
-            { title: 'AssemblyScript', value: 'assemblyscript' },
-        ]
+        choices: contractChoices,
     },
     {
         type: prev => prev === 'rust' ? 'select' : null,
         name: 'tests',
         message: 'Select language for Sandbox Test',
-        choices: [
-            { title: 'Rust Sandbox Tests', value: 'rust' },
-            { title: 'JavaScript Sandbox Tests', value: 'js' },
-        ]
+        choices: testsChoices,
     },
     {
         type: 'select',
         name: 'frontend',
         message: 'Select a template for your frontend',
-        choices: [
-            { title: 'React.js', value: 'react' },
-            { title: 'Vanilla JavaScript', value: 'vanilla' },
-            { title: 'No frontend', value: 'none' },
-        ]
+        choices: frontendChoices,
     },
     {
         type: 'text',
@@ -109,10 +113,15 @@ const userPrompts = [
         message: 'Name your project (this will create a directory with that name)',
         initial: 'hello-near',
     },
+    {
+        type: 'confirm',
+        name: 'install',
+        message: (0, chalk_1.default) `Run {bold {blue 'npm install'}} now?`,
+        initial: true,
+    },
 ];
 async function getUserAnswers() {
-    const [contract, frontend, tests, projectName] = userPrompts;
-    const answers = await (0, prompts_1.default)([contract, frontend, tests, projectName]);
+    const answers = await (0, prompts_1.default)(userPrompts);
     if (!answers.tests) {
         answers.tests = answers.contract !== 'rust' ? 'js' : 'rust';
     }
@@ -125,22 +134,6 @@ async function showProjectNamePrompt() {
     return answers;
 }
 exports.showProjectNamePrompt = showProjectNamePrompt;
-async function showDepsInstallPrompt() {
-    const questions = [
-        {
-            type: 'toggle',
-            name: 'depsInstall',
-            // message: chalk`One last thing:\n  There are few package.json files with dependencies. We can run {bold {blue 'yarn install'}} for you.\n  Run {bold {blue 'yarn install'}} now? (To do it yourself: {blue 'yarn run deps-install'}).\n  \n`,
-            message: (0, chalk_1.default) `Run {bold {blue 'npm install'}} now in all folders? (To do it yourself: {blue 'npm run deps-install'}).\n`,
-            initial: true,
-            active: 'yes',
-            inactive: 'no'
-        },
-    ];
-    const answers = await (0, prompts_1.default)(questions);
-    return answers;
-}
-exports.showDepsInstallPrompt = showDepsInstallPrompt;
 function userAnswersAreValid(answers) {
     const { contract, frontend, projectName, tests } = answers;
     if ([contract, frontend, projectName, tests].includes(undefined)) {
@@ -156,7 +149,6 @@ async function promptAndGetConfig() {
     let isFromPrompts = false;
     // process cli args
     const args = await getUserArgs();
-    const { install } = args;
     const argsValid = validateUserArgs(args);
     if (argsValid === 'error') {
         show.argsError();
@@ -176,6 +168,7 @@ async function promptAndGetConfig() {
     if (process.platform === 'win32') {
         // TODO: track windows
         show.windowsWarning();
+        return null;
     }
     // Get user input
     if (config === null) {
@@ -189,21 +182,12 @@ async function promptAndGetConfig() {
     const { frontend, contract } = config;
     (0, tracking_1.trackUsage)(frontend, contract);
     let path = (0, exports.projectPath)(config.projectName);
-    // If dir exists keep asking user
+    // If dir exists warn and exit
     if (fs_1.default.existsSync(path)) {
-        if (!isFromPrompts) {
-            show.directoryExists(path);
-            return null;
-        }
-        else {
-            while (fs_1.default.existsSync(path)) {
-                show.directoryExists(path);
-                const { projectName: newProjectName } = await showProjectNamePrompt();
-                config.projectName = newProjectName;
-            }
-        }
+        show.directoryExists(path);
+        return null;
     }
-    return { config: { ...config, install }, projectPath: path, isFromPrompts };
+    return { config, projectPath: path, isFromPrompts };
 }
 exports.promptAndGetConfig = promptAndGetConfig;
 const projectPath = (projectName) => `${process.cwd()}/${projectName}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-near-app",
-  "version": "4.0.0-beta.3.0",
+  "version": "4.0.0",
   "description": "Quickly scaffold your dApp on NEAR Blockchain",
   "main": "index.js",
   "engines": {
@@ -27,7 +27,6 @@
     "chalk": "^4.1.2",
     "commander": "^9.4.0",
     "cross-spawn": "^7.0.3",
-    "lodash": "^4.17.21",
     "mixpanel": "^0.16.0",
     "ncp": "^2.0.0",
     "prompts": "^2.4.2",
@@ -44,8 +43,6 @@
     "@types/node": "^18.6.1",
     "@types/prompts": "^2.0.14",
     "@types/semver": "^7.3.10",
-    "@typescript-eslint/eslint-plugin": "^5.26.0",
-    "@typescript-eslint/parser": "^5.26.0",
     "eslint": "^8.20.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.26.0",

package/templates/contracts/js/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "near-cli": "^3.4.0",
-    "near-sdk-js": "0.4.0-4"
+    "near-sdk-js": "0.4.0-5"
   },
   "devDependencies": {
     "typescript": "^4.7.4"

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

@@ -3,21 +3,23 @@ import { NearBindgen, NearContract, near, call, view } from 'near-sdk-js';
 // The @NearBindgen decorator allows this code to compile to Base64.
 @NearBindgen
 class MyContract extends NearContract {
-  my_greeting: string;
+  greeting: string;
 
-  constructor() {
+  constructor({message="Hello"}:{message: string}) {
     //execute the NEAR Contract's constructor
     super();
-    this.my_greeting = 'Hello';
+    this.greeting = message;
   }
 
+  default(){ return new MyContract({message: "Hello"}) }
+
   // @call indicates that this is a 'change method' or a function
   // that changes state on the blockchain. Change methods cost gas.
   // For more info -> https://docs.near.org/docs/concepts/gas
   @call
   set_greeting({ message }: { message: string }): void {
     near.log(`Saving greeting ${message}`);
-    this.my_greeting = message;
+    this.greeting = message;
   }
 
   // @view indicates a 'view method' or a function that returns
@@ -25,7 +27,7 @@ class MyContract extends NearContract {
   // and do not cost gas.
   @view
   get_greeting(): string {
-    near.log(`The current greeting is ${this.my_greeting}`);
-    return this.my_greeting;
+    near.log(`The current greeting is ${this.greeting}`);
+    return this.greeting;
   }
 }

package/templates/frontend/react/frontend/App.js

@@ -48,7 +48,7 @@ export default function App() {
         <h1>
           The contract says: <span className="greeting">{valueFromBlockchain}</span>
         </h1>
-        <form onSubmit={changeGreeting} className='change'>
+        <form onSubmit={changeGreeting} className="change">
           <label>Change greeting:</label>
           <div>
             <input
@@ -56,7 +56,10 @@ export default function App() {
               defaultValue={valueFromBlockchain}
               id="greetingInput"
             />
-            <button>Save</button>
+            <button>
+              <span>Save</span>
+              <div className="loader"></div>
+            </button>
           </div>
         </form>
         <EducationalText/>

package/templates/frontend/react/frontend/assets/global.css

@@ -30,8 +30,6 @@ main {
 }
 
 main.please-wait {
-  opacity: 0.5;
-  cursor: wait;
 }
 
 h1 {
@@ -90,6 +88,8 @@ ul.information  {
 }
 .change input {
   flex: 1;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 .change label {
   display: block;
@@ -97,6 +97,10 @@ ul.information  {
   margin-right: 10px;
   padding-bottom: 0.5em;
 }
+.change button {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
 
 a,
 .link {
@@ -118,7 +122,14 @@ button, input {
   font: inherit;
   outline: none;
 }
-
+main.please-wait .change button {
+  position: relative;
+  pointer-events: none;
+  background-color: white;
+}
+main.please-wait .change button span {
+  visibility: hidden;
+}
 button {
   background-color: var(--secondary);
   border-radius: 5px;
@@ -131,7 +142,6 @@ button {
 button:hover, button:focus {
   box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset;
 }
-
 input {
   background-color: var(--light-gray);
   border: none;
@@ -171,3 +181,51 @@ li {
     box-shadow: 0 0 10em rgba(255, 255, 255, 0.02) inset;
   }
 }
+
+main.please-wait .loader,
+main.please-wait .loader:after{
+  display: inline-block;
+}
+.loader,
+.loader:after {
+  display: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+}
+.loader {
+  font-size: 10px;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: calc(50% - 10px);
+  text-indent: -9999em;
+  border-top: 3px solid var(--secondary);
+  border-right: 3px solid var(--secondary);
+  border-bottom: 3px solid var(--secondary);
+  border-left: 3px solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package/templates/frontend/vanilla/frontend/assets/global.css

@@ -29,10 +29,7 @@ main {
   max-width: 26em;
 }
 
-main.please-wait {
-  opacity: 0.5;
-  cursor: wait;
-}
+main.please-wait {}
 
 h1 {
   background-image: url(./logo-black.svg);
@@ -90,6 +87,8 @@ ul.information  {
 }
 .change input {
   flex: 1;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
 }
 .change label {
   display: block;
@@ -97,6 +96,10 @@ ul.information  {
   margin-right: 10px;
   padding-bottom: 0.5em;
 }
+.change button {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
 
 a,
 .link {
@@ -119,6 +122,15 @@ button, input {
   outline: none;
 }
 
+main.please-wait .change button {
+  position: relative;
+  pointer-events: none;
+  background-color: white;
+}
+main.please-wait .change button span {
+  visibility: hidden;
+}
+
 button {
   background-color: var(--secondary);
   border-radius: 5px;
@@ -171,3 +183,51 @@ li {
     box-shadow: 0 0 10em rgba(255, 255, 255, 0.02) inset;
   }
 }
+
+main.please-wait .loader,
+main.please-wait .loader:after{
+  display: inline-block;
+}
+.loader,
+.loader:after {
+  display: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+}
+.loader {
+  font-size: 10px;
+  position: absolute;
+  top: calc(50% - 10px);
+  left: calc(50% - 10px);
+  text-indent: -9999em;
+  border-top: 3px solid var(--secondary);
+  border-right: 3px solid var(--secondary);
+  border-bottom: 3px solid var(--secondary);
+  border-left: 3px solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation: load8 1.1s infinite linear;
+  animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load8 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

package/templates/frontend/vanilla/frontend/index.html

@@ -43,11 +43,14 @@
       <label for="greeting">Change greeting:</label>
       <div>
         <input
-          autocomplete="off"
-          id="greeting"
-          data-behavior="greeting"
+                autocomplete="off"
+                id="greeting"
+                data-behavior="greeting"
         />
-        <button>Save</button>
+        <button>
+          <span>Save</span>
+          <div class="loader"></div>
+        </button>
       </div>
     </form>
     <p>

package/templates/shared/README.md

@@ -16,11 +16,11 @@ Build and deploy your contract to TestNet with a temporary dev account:
 
     npm run deploy
 
-Test your contract tests:
+Test your contract:
 
     npm test
 
-If you have a frontend, run `npm run start`. This will run a dev server.
+If you have a frontend, run `npm start`. This will run a dev server.
 
 
 Exploring The Code

package/dist/checks.js

@@ -1,34 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.postMessage = exports.preMessage = void 0;
-const chalk_1 = __importDefault(require("chalk"));
-function preMessage(settings) {
-    switch (settings.contract) {
-        case 'assemblyscript':
-            return asPreMessage(settings);
-        default:
-            return true;
-    }
-}
-exports.preMessage = preMessage;
-function postMessage(settings) {
-    switch (settings.contract) {
-        default:
-            return true;
-    }
-}
-exports.postMessage = postMessage;
-// AS preMessage
-const AS_NOT_SUPPORTED_MSG = (0, chalk_1.default) `
-{yellow Warning} NEAR-SDK-AS might {bold {red not be compatible}} with your system
-`;
-async function asPreMessage({ tests }) {
-    if (tests === 'workspaces') {
-        console.log(AS_NOT_SUPPORTED_MSG);
-        return true;
-    }
-}
-//# sourceMappingURL=checks.js.map