create-near-app 3.0.0 → 4.0.0-beta.2.0

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

@@ -0,0 +1,31 @@
+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;
+
+  constructor() {
+    //execute the NEAR Contract's constructor
+    super();
+    this.my_greeting = '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;
+  }
+
+  // @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.my_greeting}`);
+    return this.my_greeting;
+  }
+}

package/templates/contracts/js/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "target": "es5",
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules"
+  ],
+}

package/{contracts → templates/contracts}/rust/Cargo.toml

@@ -1,5 +1,5 @@
 [package]
-name = "greeter"
+name = "hello_near"
 version = "1.0.0"
 authors = ["Near Inc <hello@near.org>"]
 edition = "2021"

package/{contracts → templates/contracts}/rust/README.md

@@ -1,5 +1,5 @@
-near-blank-project Smart Contract
-==================
+Hello NEAR!
+=================================
 
 A [smart contract] written in [Rust] for an app initialized with [create-near-app]
 
@@ -9,18 +9,16 @@ Quick Start
 
 Before you compile this code, you will need to install Rust with [correct target]
 
-
 Exploring The Code
 ==================
 
 1. The main smart contract code lives in `src/lib.rs`.
-2. Tests: You can run smart contract tests with the `./test` script. This runs
-   standard Rust tests using [cargo] with a `--nocapture` flag so that you
-   can see any debug info you print to the console.
+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`.
 
 
-  [smart contract]: https://docs.near.org/docs/develop/contracts/overview
+  [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://github.com/near/near-sdk-rs#pre-requisites
+  [correct target]: https://docs.near.org/develop/prerequisites#rust-and-wasm
   [cargo]: https://doc.rust-lang.org/book/ch01-03-hello-cargo.html

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

@@ -0,0 +1,66 @@
+import 'regenerator-runtime/runtime';
+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() {
+  const [valueFromBlockchain, setValueFromBlockchain] = React.useState();
+
+  const [uiPleaseWait, setUiPleaseWait] = React.useState(true);
+
+  // Get blockchian state once on component load
+  React.useEffect(() => {
+    getGreetingFromContract()
+      .then(setValueFromBlockchain)
+      .catch(alert)
+      .finally(() => {
+        setUiPleaseWait(false);
+      });
+  }, []);
+
+  /// If user not signed-in with wallet - show prompt
+  if (!window.walletConnection.isSignedIn()) {
+    // Sign-in flow will reload the page later
+    return <SignInPrompt greeting={valueFromBlockchain}/>;
+  }
+
+  function changeGreeting(e) {
+    e.preventDefault();
+    setUiPleaseWait(true);
+    const { greetingInput } = e.target.elements;
+    setGreetingOnContract(greetingInput.value)
+      .then(getGreetingFromContract)
+      .then(setValueFromBlockchain)
+      .catch(alert)
+      .finally(() => {
+        setUiPleaseWait(false);
+      });
+  }
+
+  return (
+    <>
+      <SignOutButton accountId={window.accountId}/>
+      <main className={uiPleaseWait ? 'please-wait' : ''}>
+        <h1>
+          The contract says: <span className="greeting">{valueFromBlockchain}</span>
+        </h1>
+        <form onSubmit={changeGreeting} className='change'>
+          <label>Change greeting:</label>
+          <div>
+            <input
+              autoComplete="off"
+              defaultValue={valueFromBlockchain}
+              id="greetingInput"
+            />
+            <button>Save</button>
+          </div>
+        </form>
+        <EducationalText/>
+      </main>
+    </>
+  );
+}

package/templates/{vanilla/frontend/assets/css → frontend/react/frontend/assets}/global.css

@@ -27,17 +27,75 @@ body {
 main {
   margin: 0 auto;
   max-width: 26em;
-  text-align: justify;
+}
+
+main.please-wait {
+  opacity: 0.5;
+  cursor: wait;
 }
 
 h1 {
-  background-image: url(../img/logo-black.svg);
+  background-image: url(./logo-black.svg);
   background-position: center 1em;
   background-repeat: no-repeat;
   background-size: auto 1.5em;
   margin-top: 0;
-  padding: 3.5em 0 0.5em;
+  padding: 3.5em 0 0;
   text-align: center;
+  font-size: 1.5em;
+}
+.greeting {
+  color: var(--secondary);
+  text-decoration: underline;
+}
+h2 {
+  text-align: center;
+}
+
+.please-wait .change {
+  pointer-events: none;
+}
+
+ul.information  {
+  margin: 2em 0 2em 0;
+  padding: 0;
+  text-align: left;
+  font-size: 0.8em;
+
+}
+.information li:first-child {
+  border-top: 1px solid var(--light-gray);
+}
+.information li {
+  padding: 0.5em 0;
+  border-bottom: 1px solid var(--light-gray);
+  list-style: none;
+}
+
+.change {
+  display: flex;
+  flex-direction: column;
+  align-content: stretch;
+  justify-content: space-evenly;
+  align-items: stretch;
+  font-size: 1em;
+  border: 2px solid var(--light-gray);
+  padding: 0.5em;
+}
+.change > div {
+  display: flex;
+  align-content: stretch;
+  justify-content: space-evenly;
+  align-items: stretch;
+}
+.change input {
+  flex: 1;
+}
+.change label {
+  display: block;
+  text-align: left;
+  margin-right: 10px;
+  padding-bottom: 0.5em;
 }
 
 a,
@@ -73,57 +131,14 @@ button {
 button:hover, button:focus {
   box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset;
 }
-button:active {
-  box-shadow: 0 0 10em rgba(0, 0, 0, 0.1) inset;
-}
-button.link {
-  background: none;
-  border: none;
-  box-shadow: none;
-  display: inline;
-}
-[disabled] button, button[disabled] {
-  box-shadow: none;
-  background-color: var(--light-gray);
-  color: gray;
-  cursor: not-allowed;
-  transform: none;
-}
-[disabled] button {
-  text-indent: -900em;
-  width: 2em;
-  position: relative;
-}
-[disabled] button:after {
-  content: " ";
-  display: block;
-  width: 0.8em;
-  height: 0.8em;
-  border-radius: 50%;
-  border: 2px solid #fff;
-  border-color: var(--fg) transparent var(--fg) transparent;
-  animation: loader 1.2s linear infinite;
-  position: absolute;
-  top: 0.45em;
-  right: 0.5em;
-}
-@keyframes loader {
-  0% { transform: rotate(0deg) }
-  100% { transform: rotate(360deg) }
-}
-
-fieldset {
-  border: none;
-  padding: 2em 0;
-}
 
 input {
-  background-color: var(--shadow);
+  background-color: var(--light-gray);
   border: none;
   border-radius: 5px 0 0 5px;
   caret-color: var(--primary);
   color: inherit;
-  padding: 0.25em 1em;
+  padding: 0.25em 0.5em;
 }
 input::selection {
   background-color: var(--secondary);
@@ -141,37 +156,6 @@ li {
   padding-bottom: 1em;
 }
 
-aside {
-  animation: notify ease-in-out 10s;
-  background-color: var(--shadow);
-  border-radius: 5px;
-  bottom: 0;
-  font-size: 0.8em;
-  margin: 1em;
-  padding: 1em;
-  position: fixed;
-  transform: translateY(10em);
-  right: 0;
-}
-aside footer {
-  display: flex;
-  font-size: 0.9em;
-  justify-content: space-between;
-  margin-top: 0.5em;
-}
-aside footer *:first-child {
-  color: var(--success);
-}
-aside footer *:last-child {
-  color: var(--gray);
-}
-@keyframes notify {
-  0% { transform: translateY(10em) }
-  5% { transform: translateY(0) }
-  95% { transform: translateY(0) }
-  100% { transform: translateY(10em) }
-}
-
 @media (prefers-color-scheme: dark) {
   html {
     --bg: #1e1e1e;
@@ -181,7 +165,7 @@ aside footer *:last-child {
     --light-gray: #444;
   }
   h1 {
-    background-image: url(../img/logo-white.svg);
+    background-image: url(./logo-white.svg);
   }
   input:focus {
     box-shadow: 0 0 10em rgba(255, 255, 255, 0.02) inset;

package/templates/frontend/react/frontend/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="assets/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" href="assets/favicon.ico" />
+    <title>Welcome to NEAR with React</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="./index.js" type="module"></script>
+  </body>
+</html>

package/templates/frontend/react/frontend/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import { initContract } from './near-api';
+
+const reactRoot = createRoot(document.querySelector('#root'));
+
+window.nearInitPromise = initContract()
+  .then(() => {
+    reactRoot.render(<App />);
+  })
+  .catch(e => {
+    reactRoot.render(<div style={{color: 'red'}}>Error: <code>{e.message}</code></div>);
+    console.error(e);
+  });

package/templates/{react/frontend/assets/js/near/utils.js → frontend/react/frontend/near-api.js}

@@ -1,19 +1,19 @@
-import { connect, Contract, keyStores, WalletConnection } from 'near-api-js'
-import getConfig from './config'
+import { connect, Contract, keyStores, WalletConnection } from 'near-api-js';
+import { getConfig } from './near-config';
 
-const nearConfig = getConfig(process.env.NODE_ENV || 'development')
+const nearConfig = getConfig(process.env.NODE_ENV || 'development');
 
 // Initialize contract & set global variables
 export async function initContract() {
   // Initialize connection to the NEAR testnet
-  const near = await connect(Object.assign({ deps: { keyStore: new keyStores.BrowserLocalStorageKeyStore() } }, nearConfig))
+  const near = await connect(Object.assign({ deps: { keyStore: new keyStores.BrowserLocalStorageKeyStore() } }, nearConfig));
 
   // Initializing Wallet based Account. It can work with NEAR testnet wallet that
   // is hosted at https://wallet.testnet.near.org
-  window.walletConnection = new WalletConnection(near)
+  window.walletConnection = new WalletConnection(near);
 
   // Getting the Account ID. If still unauthorized, it's just empty string
-  window.accountId = window.walletConnection.getAccountId()
+  window.accountId = window.walletConnection.getAccountId();
 
   // Initializing our contract APIs by contract name and configuration
   window.contract = await new Contract(window.walletConnection.account(), nearConfig.contractName, {
@@ -21,31 +21,31 @@ export async function initContract() {
     viewMethods: ['get_greeting'],
     // Change methods can modify the state. But you don't receive the returned value when called.
     changeMethods: ['set_greeting'],
-  })
+  });
 }
 
-export function logout() {
-  window.walletConnection.signOut()
+export function signOutNearWallet() {
+  window.walletConnection.signOut();
   // reload page
-  window.location.replace(window.location.origin + window.location.pathname)
+  window.location.replace(window.location.origin + window.location.pathname);
 }
 
-export function login() {
+export function signInWithNearWallet() {
   // Allow the current app to make calls to the specified contract on the
   // user's behalf.
   // This works by creating a new access key for the user's account and storing
   // the private key in localStorage.
-  window.walletConnection.requestSignIn(nearConfig.contractName)
+  window.walletConnection.requestSignIn(nearConfig.contractName);
 }
 
-export async function set_greeting(message){
+export async function setGreetingOnContract(message) {
   let response = await window.contract.set_greeting({
-    args:{message: message}
-  })
-  return response
+    args: { message: message }
+  });
+  return response;
 }
 
-export async function get_greeting(){
-  let greeting = await window.contract.get_greeting()
-  return greeting
+export async function getGreetingFromContract() {
+  let greeting = await window.contract.get_greeting();
+  return greeting;
 }

package/templates/frontend/react/frontend/near-config.js

@@ -0,0 +1,61 @@
+const CONTRACT_NAME = process.env.CONTRACT_NAME;
+
+export function getConfig(env) {
+  switch (env) {
+
+    case 'production':
+    case 'mainnet':
+      return {
+        networkId: 'mainnet',
+        nodeUrl: 'https://rpc.mainnet.near.org',
+        contractName: CONTRACT_NAME,
+        walletUrl: 'https://wallet.near.org',
+        helperUrl: 'https://helper.mainnet.near.org',
+        explorerUrl: 'https://explorer.mainnet.near.org',
+      };
+    case 'development':
+    case 'testnet':
+      return {
+        networkId: 'testnet',
+        nodeUrl: 'https://rpc.testnet.near.org',
+        contractName: CONTRACT_NAME,
+        walletUrl: 'https://wallet.testnet.near.org',
+        helperUrl: 'https://helper.testnet.near.org',
+        explorerUrl: 'https://explorer.testnet.near.org',
+      };
+    case 'betanet':
+      return {
+        networkId: 'betanet',
+        nodeUrl: 'https://rpc.betanet.near.org',
+        contractName: CONTRACT_NAME,
+        walletUrl: 'https://wallet.betanet.near.org',
+        helperUrl: 'https://helper.betanet.near.org',
+        explorerUrl: 'https://explorer.betanet.near.org',
+      };
+    case 'local':
+      return {
+        networkId: 'local',
+        nodeUrl: 'http://localhost:3030',
+        keyPath: `${process.env.HOME}/.near/validator_key.json`,
+        walletUrl: 'http://localhost:4000/wallet',
+        contractName: CONTRACT_NAME,
+      };
+    case 'test':
+    case 'ci':
+      return {
+        networkId: 'shared-test',
+        nodeUrl: 'https://rpc.ci-testnet.near.org',
+        contractName: CONTRACT_NAME,
+        masterAccount: 'test.near',
+      };
+    case 'ci-betanet':
+      return {
+        networkId: 'shared-test-staging',
+        nodeUrl: 'https://rpc.ci-betanet.near.org',
+        contractName: CONTRACT_NAME,
+        masterAccount: 'test.near',
+      };
+    default:
+      throw Error(`Unconfigured environment '${env}'. Can be configured in src/config.js.`);
+  }
+}

package/templates/frontend/react/frontend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "my-near-app",
+  "version": "1.0.0",
+  "license": "(MIT AND Apache-2.0)",
+  "scripts": {
+    "start": "echo The app is starting! && env-cmd -f ../contract/neardev/dev-account.env parcel index.html --open",
+    "build": "parcel build index.html --public-url ./"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.17.12",
+    "@types/node": "^18.6.2",
+    "ava": "^4.2.0",
+    "react-test-renderer": "^18.1.0",
+    "ts-node": "^10.8.0",
+    "typescript": "^4.7.2",
+    "nodemon": "^2.0.16",
+    "parcel": "^2.6.0",
+    "process": "^0.11.10",
+    "env-cmd": "^10.1.0"
+  },
+  "dependencies": {
+    "near-api-js": "^0.44.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "regenerator-runtime": "^0.13.9"
+  },
+  "resolutions": {
+    "@babel/preset-env": "7.13.8"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/templates/frontend/react/frontend/ui-components.js

@@ -0,0 +1,60 @@
+import { signInWithNearWallet, signOutNearWallet } from './near-api';
+import React from 'react';
+
+export function SignInPrompt({greeting}) {
+  return (
+    <main>
+      <h1>
+        The contract says: <span className="greeting">{greeting}</span>
+      </h1>
+      <h3>
+        Welcome to NEAR!
+      </h3>
+      <p>
+        Your contract is storing a greeting message in the NEAR blockchain. To
+        change it you need to sign in using the NEAR Wallet. It is very simple,
+        just use the button below.
+      </p>
+      <p>
+        Do not worry, this app runs in the test network ("testnet"). It works
+        just like the main network ("mainnet"), but using NEAR Tokens that are
+        only for testing!
+      </p>
+      <br/>
+      <p style={{ textAlign: 'center' }}>
+        <button onClick={signInWithNearWallet}>Sign in with NEAR Wallet</button>
+      </p>
+    </main>
+  );
+}
+
+export function SignOutButton({accountId}) {
+  return (
+    <button style={{ float: 'right' }} onClick={signOutNearWallet}>
+      Sign out {accountId}
+    </button>
+  );
+}
+
+export function EducationalText() {
+  return (
+    <>
+      <p>
+        Look at that! A Hello World app! This greeting is stored on the NEAR blockchain. Check it out:
+      </p>
+      <ol>
+        <li>
+          Look in <code>src/App.js</code> and <code>src/utils.js</code> – you'll see <code>get_greeting</code> and <code>set_greeting</code> being called on <code>contract</code>. What's this?
+        </li>
+        <li>
+          Ultimately, this <code>contract</code> code is defined in <code>assembly/main.ts</code> – this is the source code for your <a target="_blank" rel="noreferrer" href="https://docs.near.org/docs/develop/contracts/overview">smart contract</a>.</li>
+        <li>
+          When you run <code>npm run dev</code>, the code in <code>assembly/main.ts</code> gets deployed to the NEAR testnet. You can see how this happens by looking in <code>package.json</code> at the <code>scripts</code> section to find the <code>dev</code> command.</li>
+      </ol>
+      <hr />
+      <p>
+        To keep learning, check out <a target="_blank" rel="noreferrer" href="https://docs.near.org">the NEAR docs</a> or look through some <a target="_blank" rel="noreferrer" href="https://examples.near.org">example apps</a>.
+      </p>
+    </>
+  );
+}