create-near-app 5.3.1 → 6.0.0-beta.0

package/templates/integration-tests/js-tests/package.json

@@ -2,6 +2,9 @@
   "name": "ava-testing",
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
+  "engines": {
+    "node": "16.x"
+  },
   "scripts": {
     "test": "ava"
   },

package/templates/integration-tests/js-tests/src/main.ava.ts

@@ -32,13 +32,13 @@ test.afterEach.always(async (t) => {
 
 test('returns the default greeting', async (t) => {
   const { contract } = t.context.accounts;
-  const message: string = await contract.view('get_greeting', {});
-  t.is(message, 'Hello');
+  const greeting: string = await contract.view('get_greeting', {});
+  t.is(greeting, 'Hello');
 });
 
-test('changes the message', async (t) => {
+test('changes the greeting', async (t) => {
   const { root, contract } = t.context.accounts;
-  await root.call(contract, 'set_greeting', { message: 'Howdy' });
-  const message: string = await contract.view('get_greeting', {});
-  t.is(message, 'Howdy');
+  await root.call(contract, 'set_greeting', { greeting: 'Howdy' });
+  const greeting: string = await contract.view('get_greeting', {});
+  t.is(greeting, 'Howdy');
 });

package/templates/integration-tests/rust-tests/src/tests.rs

@@ -31,15 +31,15 @@ async fn test_default_message(
     user: &Account,
     contract: &Contract,
 ) -> anyhow::Result<()> {
-    let message: String = user
+    let greeting: String = user
         .call( contract.id(), "get_greeting")
         .args_json(json!({}))
         .transact()
         .await?
         .json()?;
 
-    assert_eq!(message, "Hello".to_string());
-    println!("      Passed ✅ gets default message");
+    assert_eq!(greeting, "Hello".to_string());
+    println!("      Passed ✅ gets default greeting");
     Ok(())
 }
 
@@ -48,19 +48,19 @@ async fn test_changes_message(
     contract: &Contract,
 ) -> anyhow::Result<()> {
     user.call(contract.id(), "set_greeting")
-        .args_json(json!({"message": "Howdy"}))
+        .args_json(json!({"greeting": "Howdy"}))
         .transact()
         .await?
         .into_result()?;
 
-    let message: String = user
+    let greeting: String = user
         .call(contract.id(), "get_greeting")
         .args_json(json!({}))
         .transact()
         .await?
         .json()?;
 
-    assert_eq!(message, "Howdy".to_string());
-    println!("      Passed ✅ changes message");
+    assert_eq!(greeting, "Howdy".to_string());
+    println!("      Passed ✅ changes greeting");
     Ok(())
 }

package/templates/frontend/react/App.js

@@ -1,75 +0,0 @@
-import 'regenerator-runtime/runtime';
-import React from 'react';
-
-import './assets/global.css';
-
-import { EducationalText, SignInPrompt, SignOutButton } from './ui-components';
-
-
-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(() => {
-    getGreeting()
-      .then(setValueFromBlockchain)
-      .catch(alert)
-      .finally(() => {
-        setUiPleaseWait(false);
-      });
-    }
-  , []);
-
-  /// If user not signed-in with wallet - show prompt
-  if (!isSignedIn) {
-    // Sign-in flow will reload the page later
-    return <SignInPrompt greeting={valueFromBlockchain} onClick={() => wallet.signIn()}/>;
-  }
-
-  function changeGreeting(e) {
-    e.preventDefault();
-    setUiPleaseWait(true);
-    const { greetingInput } = e.target.elements;
-    
-    // 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()}/>
-      <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>
-              <span>Save</span>
-              <div className="loader"></div>
-            </button>
-          </div>
-        </form>
-        <EducationalText/>
-      </main>
-    </>
-  );
-}

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

@@ -1,231 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-html {
-  --bg: #efefef;
-  --fg: #1e1e1e;
-  --gray: #555;
-  --light-gray: #ccc;
-  --shadow: #e6e6e6;
-  --success: rgb(90, 206, 132);
-  --primary: #FF585D;
-  --secondary: #0072CE;
-
-  background-color: var(--bg);
-  color: var(--fg);
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
-  font-size: calc(0.9em + 0.5vw);
-  line-height: 1.3;
-}
-
-body {
-  margin: 0;
-  padding: 1em;
-}
-
-main {
-  margin: 0 auto;
-  max-width: 26em;
-}
-
-main.please-wait {
-}
-
-h1 {
-  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;
-  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;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.change label {
-  display: block;
-  text-align: left;
-  margin-right: 10px;
-  padding-bottom: 0.5em;
-}
-.change button {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-
-a,
-.link {
-  color: var(--primary);
-  text-decoration: none;
-}
-a:hover,
-a:focus,
-.link:hover,
-.link:focus {
-  text-decoration: underline;
-}
-a:active,
-.link:active {
-  color: var(--secondary);
-}
-
-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;
-  border: none;
-  color: #efefef;
-  cursor: pointer;
-  padding: 0.3em 0.75em;
-  transition: transform 30ms;
-}
-button:hover, button:focus {
-  box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset;
-}
-input {
-  background-color: var(--light-gray);
-  border: none;
-  border-radius: 5px 0 0 5px;
-  caret-color: var(--primary);
-  color: inherit;
-  padding: 0.25em 0.5em;
-}
-input::selection {
-  background-color: var(--secondary);
-  color: #efefef;
-}
-input:focus {
-  box-shadow: 0 0 10em rgba(0, 0, 0, 0.02) inset;
-}
-
-code {
-  color: var(--gray);
-}
-
-li {
-  padding-bottom: 1em;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    --bg: #1e1e1e;
-    --fg: #efefef;
-    --gray: #aaa;
-    --shadow: #2a2a2a;
-    --light-gray: #444;
-  }
-  h1 {
-    background-image: url(./logo-white.svg);
-  }
-  input:focus {
-    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/react/assets/logo-black.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="76.81" x2="211.16" y1="211.17" y2="76.81"><stop offset=".21" stop-color="#24272a"/><stop offset=".42" stop-color="#24272a" stop-opacity="0"/><stop offset=".59" stop-color="#24272a" stop-opacity="0"/><stop offset=".81" stop-color="#24272a"/></linearGradient><path d="m88.46 216a16.45 16.45 0 0 0 12.46-5.71l112.56-130.57a16.42 16.42 0 0 0 -13.94-7.72 16.46 16.46 0 0 0 -12.41 5.65l-113.13 129.8a16.46 16.46 0 0 0 14.46 8.55z" fill="url(#a)"/><path d="m88.46 216a16.46 16.46 0 0 0 7.54-1.83v-109l87.45 104.94a16.44 16.44 0 0 0 12.64 5.89h3.45a16.46 16.46 0 0 0 16.46-16.46v-111.08a16.46 16.46 0 0 0 -16.46-16.46 16.36 16.36 0 0 0 -7.54 1.81v109.05l-87.45-104.94a16.44 16.44 0 0 0 -12.64-5.92h-3.45a16.46 16.46 0 0 0 -16.46 16.46v111.08a16.46 16.46 0 0 0 16.46 16.46z" fill="#24272a"/></svg>

package/templates/frontend/react/assets/logo-white.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 288 288" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="76.81" x2="211.16" y1="211.17" y2="76.81"><stop offset=".21" stop-color="#fff"/><stop offset=".42" stop-color="#fff" stop-opacity="0"/><stop offset=".59" stop-color="#fff" stop-opacity="0"/><stop offset=".81" stop-color="#fff"/></linearGradient><path d="m88.46 216a16.45 16.45 0 0 0 12.46-5.71l112.56-130.57a16.42 16.42 0 0 0 -13.94-7.72 16.46 16.46 0 0 0 -12.41 5.65l-113.13 129.8a16.46 16.46 0 0 0 14.46 8.55z" fill="url(#a)"/><path d="m88.46 216a16.46 16.46 0 0 0 7.54-1.83v-109l87.45 104.94a16.44 16.44 0 0 0 12.64 5.89h3.45a16.46 16.46 0 0 0 16.46-16.46v-111.08a16.46 16.46 0 0 0 -16.46-16.46 16.36 16.36 0 0 0 -7.54 1.81v109.05l-87.45-104.94a16.44 16.44 0 0 0 -12.64-5.92h-3.45a16.46 16.46 0 0 0 -16.46 16.46v111.08a16.46 16.46 0 0 0 16.46 16.46z" fill="#fff"/></svg>

package/templates/frontend/react/index.html

@@ -1,15 +0,0 @@
-<!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/index.js

@@ -1,23 +0,0 @@
-// React
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-// NEAR
-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: CONTRACT_ADDRESS })
-
-// Setup on page load
-window.onload = async () => {
-  const isSignedIn = await wallet.startUp()
- 
-  ReactDOM.render(
-    <App isSignedIn={isSignedIn} contractId={CONTRACT_ADDRESS} wallet={wallet} />,
-    document.getElementById('root')
-  );
-}

package/templates/frontend/react/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "my-near-app",
-  "version": "1.0.0",
-  "license": "(MIT AND Apache-2.0)",
-  "scripts": {
-    "start": "./start.sh",
-    "build": "parcel build index.html --public-url ./"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@types/node": "^20.3.2",
-    "buffer": "^5.5.0||^6.0.0",
-    "env-cmd": "^10.1.0",
-    "events": "^3.1.0",
-    "https-browserify": "^1.0.0",
-    "nodemon": "^2.0.22",
-    "parcel": "^2.9.3",
-    "process": "^0.11.10",
-    "punycode": "^1.4.1",
-    "react-test-renderer": "^18.2.0",
-    "stream-http": "^3.1.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.1.3",
-    "url": "^0.11.0"
-  },
-  "dependencies": {
-    "@near-wallet-selector/core": "^8.1.4",
-    "@near-wallet-selector/modal-ui": "^8.1.4",
-    "@near-wallet-selector/my-near-wallet": "^8.1.4",
-    "near-api-js": "^2.1.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "regenerator-runtime": "^0.13.11"
-  },
-  "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/ui-components.js

@@ -1,59 +0,0 @@
-import React from 'react';
-
-export function SignInPrompt({greeting, onClick}) {
-  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={onClick}>Sign in with NEAR Wallet</button>
-      </p>
-    </main>
-  );
-}
-
-export function SignOutButton({accountId, onClick}) {
-  return (
-    <button style={{ float: 'right' }} onClick={onClick}>
-      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>frontend/App.js</code> - you'll see <code>getGreeting</code> and <code>setGreeting</code> being called on <code>contract</code>. What's this?
-        </li>
-        <li>
-          Ultimately, this <code>contract</code> code is defined in <code>./contract</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 deploy</code>, the code in <code>./contract</code> gets deployed to the NEAR testnet. You can see how this happens by looking in <code>package.json</code>.</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>
-    </>
-  );
-}

package/templates/frontend/shared/start.sh

@@ -1,26 +0,0 @@
-#!/bin/sh
-
-CONTRACT_DIRECTORY=../contract
-DEV_ACCOUNT_FILE="${CONTRACT_DIRECTORY}/neardev/dev-account.env"
-
-start () {
-  echo The app is starting!
-  env-cmd -f $DEV_ACCOUNT_FILE parcel index.html --open
-}
-
-alert () {
-  GREEN='\033[1;32m'
-  NC='\033[0m' # No Color
-
-  echo "======================================================"
-  echo "It looks like you didn't deploy your contract"
-  echo ">> Run ${GREEN}'npm run deploy'${NC} from the your project's root directory"
-  echo "This frontend template works with contracts deployed to NEAR TestNet"
-  echo "======================================================"
-}
-
-if [ -f "$DEV_ACCOUNT_FILE" ]; then
-  start
-else
-  alert
-fi