create-near-app 4.0.0 → 4.1.0-rc.0

package/README.md

@@ -17,6 +17,8 @@ To create a new NEAR project run this and follow interactive prompts:
 
     npx create-near-app
 
+> If you've previously installed `create-near-app` globally via `npm install -g create-near-app`, please uninstall the package using `npm uninstall -g create-near-app` to ensure that `npx` always uses the latest version.
+
 Follow the instructions in the README.md in the project you just created! 🚀
 
 You can create contracts written in:

package/dist/app.js

@@ -57,7 +57,7 @@ const show = __importStar(require("./messages"));
         await (0, make_1.runDepsInstall)(projectPath);
     }
     if (createSuccess) {
-        show.setupSuccess(projectPath, contract, frontend, install);
+        show.setupSuccess(projectName, contract, frontend, install);
     }
     else {
         show.setupFailed();

package/dist/make.js

@@ -47,34 +47,35 @@ async function createFiles({ contract, frontend, tests, projectPath, verbose, ro
     const skip = ['.cache', 'dist', 'out', 'node_modules'];
     // copy frontend
     if (frontend !== 'none') {
-        const sourceTemplateDir = `${rootDir}/frontend/${frontend}`;
-        await copyDir(sourceTemplateDir, projectPath, { verbose, skip: skip.map(f => path_1.default.join(sourceTemplateDir, f)) });
+        const sourceFrontendDir = path_1.default.resolve(`${rootDir}/frontend/${frontend}`);
+        const sourceSharedFrontendDir = path_1.default.resolve(`${rootDir}/frontend/shared`);
+        const targetFrontendDir = path_1.default.resolve(`${projectPath}/frontend`);
+        fs_1.default.mkdirSync(targetFrontendDir, { recursive: true });
+        await copyDir(sourceFrontendDir, targetFrontendDir, { verbose, skip: skip.map(f => path_1.default.join(sourceFrontendDir, f)) });
+        await copyDir(sourceSharedFrontendDir, targetFrontendDir, { verbose, skip: skip.map(f => path_1.default.join(sourceSharedFrontendDir, f)) });
     }
     // shared files
-    const sourceSharedDir = `${rootDir}/shared`;
+    const sourceSharedDir = path_1.default.resolve(rootDir, 'shared');
     await copyDir(sourceSharedDir, projectPath, { verbose, skip: skip.map(f => path_1.default.join(sourceSharedDir, f)) });
     // copy contract files
-    const contractSourceDir = `${rootDir}/contracts/${contract}`;
-    await copyDir(contractSourceDir, `${projectPath}/contract`, {
+    const sourceContractDir = path_1.default.resolve(rootDir, 'contracts', contract);
+    const targetContractDir = path_1.default.resolve(projectPath, 'contract');
+    fs_1.default.mkdirSync(targetContractDir, { recursive: true });
+    await copyDir(sourceContractDir, targetContractDir, {
         verbose,
-        skip: skip.map(f => path_1.default.join(contractSourceDir, f))
+        skip: skip.map(f => path_1.default.join(sourceContractDir, f))
     });
+    // tests dir
+    const targetTestDir = path_1.default.resolve(projectPath, 'integration-tests');
+    fs_1.default.mkdirSync(targetTestDir, { recursive: true });
     // copy tests - shared files
-    let sourceTestSharedDir = path_1.default.resolve(`${rootDir}/integration-tests/shared/${tests}-tests`);
-    await copyDir(sourceTestSharedDir, `${projectPath}/integration-tests/`, {
+    const sourceTestSharedDir = path_1.default.resolve(`${rootDir}/integration-tests/${tests}-tests`);
+    await copyDir(sourceTestSharedDir, targetTestDir, {
         verbose,
         skip: skip.map(f => path_1.default.join(sourceTestSharedDir, f))
     });
-    // copy tests - overrides files
-    let sourceTestOverridesDir = path_1.default.resolve(`${rootDir}/integration-tests/overrides/${contract}-contract/${tests}-tests`);
-    if (fs_1.default.existsSync(sourceTestOverridesDir)) {
-        await copyDir(sourceTestOverridesDir, `${projectPath}/integration-tests/`, {
-            verbose,
-            skip: skip.map(f => path_1.default.join(sourceTestOverridesDir, f))
-        });
-    }
     // add .gitignore
-    await (0, exports.renameFile)(`${projectPath}/near.gitignore`, `${projectPath}/.gitignore`);
+    await (0, exports.renameFile)(`${projectPath}/template.gitignore`, `${projectPath}/.gitignore`);
 }
 exports.createFiles = createFiles;
 const renameFile = async function (oldPath, newPath) {
@@ -119,7 +120,7 @@ function copyDir(source, dest, { skip, verbose }) {
 exports.copyDir = copyDir;
 async function runDepsInstall(projectPath) {
     show.depsInstall();
-    const npmCommandArgs = ['run', 'deps-install'];
+    const npmCommandArgs = ['install'];
     await new Promise((resolve, reject) => (0, cross_spawn_1.default)('npm', npmCommandArgs, {
         cwd: projectPath,
         stdio: 'inherit',

package/dist/messages.js

@@ -37,7 +37,7 @@ ${contract === 'rust' ? (0, chalk_1.default) `🦀 If you are new to Rust please
    - {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:'}
+         {blue npm {bold 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:

package/dist/package-json.js

@@ -51,7 +51,7 @@ const buildContractScript = (contract) => {
             };
         case 'rust':
             return {
-                'build:contract': 'cd contract && rustup target add wasm32-unknown-unknown && cargo build --all --target wasm32-unknown-unknown --release',
+                'build:contract': 'cd contract && ./build.sh',
             };
     }
 };
@@ -64,7 +64,7 @@ const deployScript = (contract) => {
             };
         case 'rust':
             return {
-                'deploy': 'npm run build:contract && cd contract && near dev-deploy --wasmFile ./target/wasm32-unknown-unknown/release/hello_near.wasm',
+                'deploy': 'cd contract && ./deploy.sh',
             };
     }
 };
@@ -119,52 +119,52 @@ const npmInstallScript = (contract, hasFrontend, tests) => {
         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 ..' };
+                    return { 'postinstall': '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 ..' };
+                    return { 'postinstall': '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 ..' };
+                    return { 'postinstall': '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 ..' };
+                    return { 'postinstall': 'cd contract && npm install --ignore-scripts && cd ..' };
                 }
             }
         case 'js':
             if (hasFrontend) {
                 if (tests === 'js') {
-                    return { 'deps-install': 'npm install && cd contract && npm install && cd ../integration-tests && npm install && cd ../frontend && npm install && cd ..' };
+                    return { 'postinstall': 'cd contract && npm install && cd ../integration-tests && npm install && cd ../frontend && npm install && cd ..' };
                 }
                 else {
-                    return { 'deps-install': 'npm install && cd contract && npm install && cd ../frontend && npm install && cd ..' };
+                    return { 'postinstall': 'cd contract && npm install && cd ../frontend && npm install && cd ..' };
                 }
             }
             else {
                 if (tests === 'js') {
-                    return { 'deps-install': 'npm install && cd contract && npm install && cd ../integration-tests && npm install && cd ..' };
+                    return { 'postinstall': 'cd contract && npm install && cd ../integration-tests && npm install && cd ..' };
                 }
                 else {
-                    return { 'deps-install': 'npm install && cd contract && npm install && cd ..' };
+                    return { 'postinstall': 'cd contract && npm install && cd ..' };
                 }
             }
         case 'rust':
             if (hasFrontend) {
                 if (tests === 'js') {
-                    return { 'deps-install': 'npm install && cd frontend && npm install && cd ../integration-tests && npm install && cd ..' };
+                    return { 'postinstall': 'cd frontend && npm install && cd ../integration-tests && npm install && cd ..' };
                 }
                 else {
-                    return { 'deps-install': 'npm install && cd frontend && npm install && cd ..' };
+                    return { 'postinstall': 'cd frontend && npm install && cd ..' };
                 }
             }
             else {
                 if (tests === 'js') {
-                    return { 'deps-install': 'npm install && cd ./integration-tests && npm install && cd ..' };
+                    return { 'postinstall': 'cd ./integration-tests && npm install && cd ..' };
                 }
                 else {
-                    return { 'deps-install': 'npm install' };
+                    return {};
                 }
             }
     }

package/dist/tracking.js

@@ -9,7 +9,7 @@ const mixpanel_1 = __importDefault(require("mixpanel"));
 const MIXPANEL_TOKEN = 'df164f13212cbb0dfdae991da60e87f2';
 const tracker = mixpanel_1.default.init(MIXPANEL_TOKEN);
 exports.trackingMessage = (0, chalk_1.default) `NEAR collects anonymous information on the commands used. No personal information that could identify you is shared`;
-// TODO: track different failures & deps-install usage
+// TODO: track different failures & install usage
 const trackUsage = async (frontend, contract) => {
     // prevents logging from CI
     if (process.env.NEAR_ENV === 'ci' || process.env.NODE_ENV === 'ci') {

package/dist/user-input.js

@@ -75,13 +75,13 @@ function validateUserArgs(args) {
 }
 exports.validateUserArgs = validateUserArgs;
 const contractChoices = [
-    { title: 'JavaScript', value: 'js' },
+    { title: 'TypeScript', value: 'js' },
     { title: 'Rust', value: 'rust' },
     { title: 'AssemblyScript', value: 'assemblyscript' },
 ];
 const testsChoices = [
     { title: 'Rust Sandbox Tests', value: 'rust' },
-    { title: 'JavaScript Sandbox Tests', value: 'js' },
+    { title: 'TypeScript Sandbox Tests', value: 'js' },
 ];
 const frontendChoices = [
     { title: 'React.js', value: 'react' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-near-app",
-  "version": "4.0.0",
+  "version": "4.1.0-rc.0",
   "description": "Quickly scaffold your dApp on NEAR Blockchain",
   "main": "index.js",
   "engines": {
@@ -16,7 +16,7 @@
   "scripts": {
     "start": "npm run build && node index.js",
     "build": "tsc",
-    "test": "npm run build && jest --runInBand",
+    "test": "npm run build && FORCE_COLOR=1 jest --runInBand",
     "test-e2e": "npm run build && ./test/e2e.sh",
     "lint": "eslint .",
     "fix": "eslint . --fix",

package/templates/contracts/js/README.md

@@ -1,23 +1,79 @@
-Hello NEAR!
-=================================
+# Hello NEAR Contract
 
-A [smart contract] written with [NEAR JavaScript SDK] for an app initialized with [create-near-app]
+The smart contract exposes two methods to enable storing and retrieving a greeting in the NEAR network.
 
+```ts
+@NearBindgen({})
+class HelloNear {
+  greeting: string = "Hello";
 
-Quick Start
-===========
+  @view // This method is read-only and can be called for free
+  get_greeting(): string {
+    return this.greeting;
+  }
 
-1. Install dependencies: `npm install`
-2. Deploy to NEAR TestNet with a temporary dev account: `npm run deploy`
+  @call // This method changes the state, for which it cost gas
+  set_greeting({ greeting }: { greeting: string }): void {
+    // Record a log permanently to the blockchain!
+    near.log(`Saving greeting ${greeting}`);
+    this.greeting = greeting;
+  }
+}
+```
 
-Exploring The Code
-==================
+<br />
 
-1. The smart contract code is in `src/contract.ts`.
-2. There are two functions to the smart contract: `get_greeting` and `set_greeting`.
-3. Tests: Use integration-tests that `create-near-app` created for you.
+# Quickstart
 
+1. Make sure you have installed [node.js](https://nodejs.org/en/download/package-manager/) >= 16.
+2. Install the [`NEAR CLI`](https://github.com/near/near-cli#setup)
 
-  [smart contract]: https://docs.near.org/develop/welcome
-  [NEAR JavaScript SDK]: https://github.com/near/near-sdk-js
-  [create-near-app]: https://github.com/near/create-near-app
+<br />
+
+## 1. Build and Deploy the Contract
+You can automatically compile and deploy the contract in the NEAR testnet by running:
+
+```bash
+npm run deploy
+```
+
+Once finished, check the `neardev/dev-account` file to find the address in which the contract was deployed:
+
+```bash
+cat ./neardev/dev-account
+# e.g. dev-1659899566943-21539992274727
+```
+
+<br />
+
+## 2. Retrieve the Greeting
+
+`get_greeting` is a read-only method (aka `view` method).
+
+`View` methods can be called for **free** by anyone, even people **without a NEAR account**!
+
+```bash
+# Use near-cli to get the greeting
+near view <dev-account> get_greeting
+```
+
+<br />
+
+## 3. Store a New Greeting
+`set_greeting` changes the contract's state, for which it is a `call` method.
+
+`Call` methods can only be invoked using a NEAR account, since the account needs to pay GAS for the transaction.
+
+```bash
+# Use near-cli to set a new greeting
+near call <dev-account> set_greeting '{"greeting":"howdy"}' --accountId <dev-account>
+```
+
+**Tip:** If you would like to call `set_greeting` using your own account, first login into NEAR using:
+
+```bash
+# Use near-cli to login your NEAR account
+near login
+```
+
+and then use the logged account to sign the transaction: `--accountId <your-account>`.

package/templates/contracts/js/build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+
+echo ">> Building contract"
+
+near-sdk-js build src/contract.ts build/hello_near.wasm

package/templates/contracts/js/deploy.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+
+./build.sh
+
+if [ $? -ne 0 ]; then
+  echo ">> Error building contract"
+  exit 1
+fi
+
+echo ">> Deploying contract"
+
+# https://docs.near.org/tools/near-cli#near-dev-deploy
+near dev-deploy --wasmFile build/hello_near.wasm

package/templates/contracts/js/package.json

@@ -4,13 +4,13 @@
   "license": "(MIT AND Apache-2.0)",
   "type": "module",
   "scripts": {
-    "build": "near-sdk-js build src/contract.ts build/hello_near.wasm",
-    "deploy": "npm run build && rm -rf neardev && near dev-deploy --wasmFile build/hello_near.wasm && export $(cat ./neardev/dev-account.env) && near call $CONTRACT_NAME init --accountId $CONTRACT_NAME --deposit 1 && echo $CONTRACT_NAME",
+    "build": "./build.sh",
+    "deploy": "./deploy.sh",
     "test": "echo use integration-tests"
   },
   "dependencies": {
     "near-cli": "^3.4.0",
-    "near-sdk-js": "0.4.0-5"
+    "near-sdk-js": "0.5.0-0"
   },
   "devDependencies": {
     "typescript": "^4.7.4"

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

@@ -1,33 +1,18 @@
-import { NearBindgen, NearContract, near, call, view } from 'near-sdk-js';
+import { NearBindgen, near, call, view } from 'near-sdk-js';
 
-// The @NearBindgen decorator allows this code to compile to Base64.
-@NearBindgen
-class MyContract extends NearContract {
-  greeting: string;
+@NearBindgen({})
+class HelloNear {
+  greeting: string = "Hello";
 
-  constructor({message="Hello"}:{message: string}) {
-    //execute the NEAR Contract's constructor
-    super();
-    this.greeting = message;
+  @view // This method is read-only and can be called for free
+  get_greeting(): string {
+    return this.greeting;
   }
 
-  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
+  @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;
   }
-
-  // @view indicates a 'view method' or a function that returns
-  // the current values stored on the blockchain. View calls are free
-  // and do not cost gas.
-  @view
-  get_greeting(): string {
-    near.log(`The current greeting is ${this.greeting}`);
-    return this.greeting;
-  }
 }

package/templates/contracts/rust/Cargo.toml

@@ -5,7 +5,7 @@ authors = ["Near Inc <hello@near.org>"]
 edition = "2021"
 
 [lib]
-crate-type = ["cdylib", "rlib"]
+crate-type = ["cdylib"]
 
 [dependencies]
 near-sdk = "4.0.0"

package/templates/contracts/rust/README.md

@@ -1,24 +1,91 @@
-Hello NEAR!
-=================================
+# Hello NEAR Contract
 
-A [smart contract] written in [Rust] for an app initialized with [create-near-app]
+The smart contract exposes two methods to enable storing and retrieving a greeting in the NEAR network.
 
+```rust
+const DEFAULT_GREETING: &str = "Hello";
 
-Quick Start
-===========
+#[near_bindgen]
+#[derive(BorshDeserialize, BorshSerialize)]
+pub struct Contract {
+    greeting: String,
+}
 
-Before you compile this code, you will need to install Rust with [correct target]
+impl Default for Contract {
+    fn default() -> Self {
+        Self{greeting: DEFAULT_GREETING.to_string()}
+    }
+}
 
-Exploring The Code
-==================
+#[near_bindgen]
+impl Contract {
+    // Public: Returns the stored greeting, defaulting to 'Hello'
+    pub fn get_greeting(&self) -> String {
+        return self.greeting.clone();
+    }
 
-1. The main smart contract code lives in `src/lib.rs`.
-2. There are two functions to the smart contract: `get_greeting` and `set_greeting`.
-3. Tests: You can run smart contract tests with the `cargo test`.
+    // Public: Takes a greeting, such as 'howdy', and records it
+    pub fn set_greeting(&mut self, greeting: String) {
+        // Record a log permanently to the blockchain!
+        log!("Saving greeting {}", greeting);
+        self.greeting = greeting;
+    }
+}
+```
 
+<br />
 
-  [smart contract]: https://docs.near.org/develop/welcome
-  [Rust]: https://www.rust-lang.org/
-  [create-near-app]: https://github.com/near/create-near-app
-  [correct target]: https://docs.near.org/develop/prerequisites#rust-and-wasm
-  [cargo]: https://doc.rust-lang.org/book/ch01-03-hello-cargo.html
+# Quickstart
+
+1. Make sure you have installed [rust](https://rust.org/).
+2. Install the [`NEAR CLI`](https://github.com/near/near-cli#setup)
+
+<br />
+
+## 1. Build and Deploy the Contract
+You can automatically compile and deploy the contract in the NEAR testnet by running:
+
+```bash
+./deploy.sh
+```
+
+Once finished, check the `neardev/dev-account` file to find the address in which the contract was deployed:
+
+```bash
+cat ./neardev/dev-account
+# e.g. dev-1659899566943-21539992274727
+```
+
+<br />
+
+## 2. Retrieve the Greeting
+
+`get_greeting` is a read-only method (aka `view` method).
+
+`View` methods can be called for **free** by anyone, even people **without a NEAR account**!
+
+```bash
+# Use near-cli to get the greeting
+near view <dev-account> get_greeting
+```
+
+<br />
+
+## 3. Store a New Greeting
+`set_greeting` changes the contract's state, for which it is a `change` method.
+
+`Change` methods can only be invoked using a NEAR account, since the account needs to pay GAS for the transaction.
+
+```bash
+# Use near-cli to set a new greeting
+near call <dev-account> set_greeting '{"greeting":"howdy"}' --accountId <dev-account>
+```
+
+**Tip:** If you would like to call `set_greeting` using your own account, first login into NEAR using:
+
+```bash
+# Use near-cli to login your NEAR account
+near login
+```
+
+and then use the logged account to sign the transaction: `--accountId <your-account>`.

package/templates/contracts/rust/build.sh

@@ -0,0 +1,6 @@
+#!/bin/sh
+
+echo ">> Building contract"
+
+rustup target add wasm32-unknown-unknown
+cargo build --all --target wasm32-unknown-unknown --release

package/templates/contracts/rust/deploy.sh

@@ -0,0 +1,13 @@
+#!/bin/sh
+
+./build.sh
+
+if [ $? -ne 0 ]; then
+  echo ">> Error building contract"
+  exit 1
+fi
+
+echo ">> Deploying contract"
+
+# https://docs.near.org/tools/near-cli#near-dev-deploy
+near dev-deploy --wasmFile ./target/wasm32-unknown-unknown/release/hello_near.wasm

package/templates/frontend/react/{frontend/App.js → App.js}

@@ -3,18 +3,17 @@ import React from 'react';
 
 import './assets/global.css';
 
-import { getGreetingFromContract, setGreetingOnContract } from './near-api';
 import { EducationalText, SignInPrompt, SignOutButton } from './ui-components';
 
 
-export default function App() {
+export default function App({ isSignedIn, contract, wallet }) {
   const [valueFromBlockchain, setValueFromBlockchain] = React.useState();
 
   const [uiPleaseWait, setUiPleaseWait] = React.useState(true);
 
   // Get blockchian state once on component load
   React.useEffect(() => {
-    getGreetingFromContract()
+    contract.getGreeting()
       .then(setValueFromBlockchain)
       .catch(alert)
       .finally(() => {
@@ -23,19 +22,18 @@ export default function App() {
   }, []);
 
   /// If user not signed-in with wallet - show prompt
-  if (!window.walletConnection.isSignedIn()) {
+  if (!isSignedIn) {
     // Sign-in flow will reload the page later
-    return <SignInPrompt greeting={valueFromBlockchain}/>;
+    return <SignInPrompt greeting={valueFromBlockchain} onClick={() => wallet.signIn()}/>;
   }
 
   function changeGreeting(e) {
     e.preventDefault();
     setUiPleaseWait(true);
     const { greetingInput } = e.target.elements;
-    setGreetingOnContract(greetingInput.value)
-      .then(getGreetingFromContract)
+    contract.setGreeting(greetingInput.value)
+      .then(async () => {return contract.getGreeting();})
       .then(setValueFromBlockchain)
-      .catch(alert)
       .finally(() => {
         setUiPleaseWait(false);
       });
@@ -43,7 +41,7 @@ export default function App() {
 
   return (
     <>
-      <SignOutButton accountId={window.accountId}/>
+      <SignOutButton accountId={wallet.accountId} onClick={() => wallet.signOut()}/>
       <main className={uiPleaseWait ? 'please-wait' : ''}>
         <h1>
           The contract says: <span className="greeting">{valueFromBlockchain}</span>

package/templates/frontend/react/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import { Wallet } from './near-wallet';
+import { Contract } from './near-interface';
+
+const reactRoot = createRoot(document.querySelector('#root'));
+
+// create the Wallet and the Contract
+const contractId = process.env.CONTRACT_NAME;
+const wallet = new Wallet({contractId: contractId});
+const contract = new Contract({wallet: wallet});
+
+window.onload = wallet.startUp()
+  .then((isSignedIn) => {
+    reactRoot.render(<App isSignedIn={isSignedIn} contract={contract} wallet={wallet} />);
+  })
+  .catch(e => {
+    reactRoot.render(<div style={{color: 'red'}}>Error: <code>{e.message}</code></div>);
+    console.error(e);
+  });