npm - create-near-app - Versions diffs - 3.0.0 → 4.0.0-beta.2.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

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

@@ -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/{vanilla/frontend/assets/img → frontend/vanilla/frontend/assets}/logo-black.svg RENAMED Viewed

File without changes

package/templates/{vanilla/frontend/assets/img → frontend/vanilla/frontend/assets}/logo-white.svg RENAMED Viewed

File without changes

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

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="icon" href="assets/favicon.ico"/>
+  <link rel="apple-touch-icon" href="assets/favicon.ico"/>
+  <title>Welcome to NEAR</title>
+  <link rel="stylesheet" href="assets/global.css">
+</head>
+<body>
+<main id="signed-out-flow" style="display: none">
+  <h1>
+    The contract says: <span class="greeting" data-behavior="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>
+  <p style="text-align: center; margin-top: 2.5em">
+    <button id="sign-in-button">Sign in with NEAR Wallet</button>
+  </p>
+</main>
+<div id="signed-in-flow" style="display: none">
+  <button style="float: right" id="sign-out-button">
+    Sign out <span data-behavior="account-id"></span>
+  </button>
+  <main>
+    <h1>
+      The contract says: <span class="greeting" data-behavior="greeting"></span>
+    </h1>
+    <form class="change">
+      <label for="greeting">Change greeting:</label>
+      <div>
+        <input
+          autocomplete="off"
+          id="greeting"
+          data-behavior="greeting"
+        />
+        <button>Save</button>
+      </div>
+    </form>
+    <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>index.js</code> and <code>near-api.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/index.ts</code> – this is the source code for your
+        <a target="_blank" 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/index.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" href="https://docs.near.org">the NEAR docs</a>
+      or look through some
+      <a target="_blank" href="https://examples.near.org">example apps</a>.
+    </p>
+  </main>
+</div>
+<script src="index.js" type="module"></script>
+</body>
+</html>

package/templates/frontend/vanilla/frontend/index.js ADDED Viewed

@@ -0,0 +1,78 @@
+import 'regenerator-runtime/runtime';
+import {
+  initContract,
+  signInWithNearWallet,
+  signOutNearWallet,
+  setGreetingOnContract,
+  getGreetingFromContract,
+} from './near-api';
+document.querySelector('form').onsubmit = doUserAction;
+document.querySelector('#sign-in-button').onclick = signInWithNearWallet;
+document.querySelector('#sign-out-button').onclick = signOutNearWallet;
+// ====== Initialize the API for NEAR ======
+window.nearInitPromise = initContract()
+  .then(() => {
+    if (window.walletConnection.isSignedIn()) {
+      signedInFlow();
+    } else {
+      signedOutFlow();
+    }
+  })
+  .catch(alert);
+// 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');
+  try {
+    // ===== Call smart-contract to save the value on then blockchain =====
+    await setGreetingOnContract(greeting.value);
+  } catch (e) {
+    alert(
+      'Something went wrong! ' +
+      'Maybe you need to sign out and back in? ' +
+      'Check your browser console for more info.'
+    );
+    throw e;
+  }
+  // ===== Fetch the data from the blockchain =====
+  await fetchGreeting();
+  document
+    .querySelector('#signed-in-flow main')
+    .classList.remove('please-wait');
+}
+// Get greeting from the contract on chain
+async function fetchGreeting() {
+  const currentGreeting = await getGreetingFromContract();
+  document.querySelectorAll('[data-behavior=greeting]').forEach(el => {
+    el.innerText = currentGreeting;
+    el.value = currentGreeting;
+  });
+}
+// Display the signed-out-flow container
+function signedOutFlow() {
+  document.querySelector('#signed-in-flow').style.display = 'none';
+  document.querySelector('#signed-out-flow').style.display = 'block';
+  fetchGreeting();
+}
+// Displaying the signed in flow container and fill in account-specific data
+function signedInFlow() {
+  document.querySelector('#signed-out-flow').style.display = 'none';
+  document.querySelector('#signed-in-flow').style.display = 'block';
+  document.querySelectorAll('[data-behavior=account-id]').forEach(el => {
+    el.innerText = window.accountId;
+  });
+  fetchGreeting();
+}

package/templates/{vanilla/frontend/assets/js/near/utils.js → frontend/vanilla/frontend/near-api.js} RENAMED Viewed

@@ -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
+  });
+  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/vanilla/frontend/near-config.js ADDED Viewed

@@ -0,0 +1,62 @@
+const CONTRACT_NAME = process.env.CONTRACT_NAME;
+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.`);
+  }
+}
+module.exports = getConfig;

package/templates/frontend/vanilla/frontend/package.json ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "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": {
+    "nodemon": "^2.0.16",
+    "parcel": "^2.6.0",
+    "process": "^0.11.10",
+    "env-cmd": "^10.1.0"
+  },
+  "dependencies": {
+    "near-api-js": "^0.44.2"
+  }
+}

package/{integration-tests/ts → templates/integration-tests/classic-tests}/ava.config.cjs RENAMED Viewed

@@ -1,9 +1,9 @@
-require("util").inspect.defaultOptions.depth = 5; // Increase AVA's printing depth
-module.exports = {
-  timeout: "300000",
-  files: ["src/*.ava.ts"],
-  failWithoutAssertions: false,
-  extensions: ["ts"],
-  require: ["ts-node/register"],
-};
+require("util").inspect.defaultOptions.depth = 5; // Increase AVA's printing depth
+module.exports = {
+  timeout: "300000",
+  files: ["src/*.ava.ts"],
+  failWithoutAssertions: false,
+  extensions: ["ts"],
+  require: ["ts-node/register"],
+};

package/{integration-tests/ts → templates/integration-tests/classic-tests}/package.json RENAMED Viewed

@@ -3,14 +3,15 @@
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
   "scripts": {
-    "test": "ava --verbose"
+    "test": "ava"
   },
   "devDependencies": {
+    "@types/bn.js": "^5.1.0",
+    "@types/node": "^18.6.2",
     "ava": "^4.2.0",
-    "near-workspaces": "^2.0.0",
-    "typescript": "^4.7.2",
+    "near-api-js": "^0.44.2",
     "ts-node": "^10.8.0",
-    "@types/bn.js": "^5.1.0"
+    "typescript": "^4.7.2"
   },
   "dependencies": {}
 }

package/templates/integration-tests/classic-tests/src/config.ts ADDED Viewed

@@ -0,0 +1,34 @@
+import {KeyPair, keyStores} from 'near-api-js';
+const fs = require('fs');
+const path = require('path');
+// first make sure you deployed your contract with dev-deploy, see ../package.json deploy script
+// here we take the contract from the auto-generated neardev folder
+const CONTRACT_NAME = fs.readFileSync(path.resolve(__dirname, '../../contract/neardev/dev-account'), 'utf-8');
+const NETWORK_ID = 'testnet';
+// Create an InMemoryKeyStore
+const keyStore = new keyStores.InMemoryKeyStore();
+// Load credentials
+const credPath = `${process.env.HOME}/.near-credentials/${NETWORK_ID}/${CONTRACT_NAME}.json`;
+let credentials = JSON.parse(fs.readFileSync(credPath));
+// Save key in the key store
+keyStore.setKey(
+  NETWORK_ID,
+  CONTRACT_NAME,
+  KeyPair.fromString(credentials.private_key)
+);
+export const nearConfig = {
+  networkId: NETWORK_ID,
+  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',
+  headers: {},
+  deps: {keyStore}
+};

package/templates/integration-tests/classic-tests/src/main.ava.ts ADDED Viewed

@@ -0,0 +1,32 @@
+import anyTest, { TestFn } from 'ava';
+import { Near, Account, Contract } from 'near-api-js';
+import { nearConfig } from './config';
+const test = anyTest as TestFn<{
+  accounts: Record<string, any>;
+}>;
+test.beforeEach(async (t) => {
+  const near = await new Near(nearConfig);
+  const user = await new Account(near.connection, nearConfig.contractName);
+  const contract = await new Contract(
+    user,
+    nearConfig.contractName,
+    { viewMethods: ['get_greeting'], changeMethods: ['set_greeting'] }
+  );
+  t.context.accounts = { contract };
+});
+test('returns the default greeting', async (t) => {
+  const { contract } = t.context.accounts;
+  const message: string = await contract.get_greeting({});
+  t.is(message, 'Hello');
+});
+test('changes the message', async (t) => {
+  const { contract } = t.context.accounts;
+  await contract.set_greeting({args:{ message: 'Howdy' }});
+  const message: string = await contract.get_greeting({});
+  t.is(message, 'Howdy');
+});

package/{integration-tests → templates/integration-tests/workspaces-tests}/rs/Cargo.toml RENAMED Viewed

File without changes

package/{integration-tests → templates/integration-tests/workspaces-tests}/rs/src/tests.rs RENAMED Viewed

@@ -1,14 +1,16 @@
+use std::{env, fs};
 use near_units::parse_near;
 use serde_json::json;
 use workspaces::prelude::*;
 use workspaces::{network::Sandbox, Account, Contract, Worker};
-const WASM_FILEPATH: &str = "../../out/main.wasm";
 #[tokio::main]
 async fn main() -> anyhow::Result<()> {
+    let wasm_arg: &str = &(env::args().nth(1).unwrap());
+    let wasm_filepath = fs::canonicalize(env::current_dir()?.join(wasm_arg))?;
     let worker = workspaces::sandbox().await?;
-    let wasm = std::fs::read(WASM_FILEPATH)?;
+    let wasm = std::fs::read(wasm_filepath)?;
     let contract = worker.dev_deploy(&wasm).await?;
     // create accounts

package/templates/{react → integration-tests/workspaces-tests/ts}/ava.config.cjs RENAMED Viewed

@@ -1,9 +1,9 @@
-require("util").inspect.defaultOptions.depth = 5; // Increase AVA's printing depth
-module.exports = {
-  timeout: "300000",
-  files: ["**/*.ava.ts"],
-  failWithoutAssertions: false,
-  extensions: ["ts"],
-  require: ["ts-node/register"],
-};
+require("util").inspect.defaultOptions.depth = 5; // Increase AVA's printing depth
+module.exports = {
+  timeout: "300000",
+  files: ["src/*.ava.ts"],
+  failWithoutAssertions: false,
+  extensions: ["ts"],
+  require: ["ts-node/register"],
+};

package/templates/integration-tests/workspaces-tests/ts/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "ava-testing",
+  "version": "1.0.0",
+  "license": "(MIT AND Apache-2.0)",
+  "scripts": {
+    "test": "ava"
+  },
+  "devDependencies": {
+    "@types/bn.js": "^5.1.0",
+    "@types/node": "^18.6.2",
+    "ava": "^4.2.0",
+    "near-workspaces": "^3.1.0",
+    "ts-node": "^10.8.0",
+    "typescript": "^4.7.2"
+  },
+  "dependencies": {}
+}