npm - create-near-app - Versions diffs - 4.0.0-beta.3.0 → 4.1.0 - Mend

create-near-app 4.0.0-beta.3.0 → 4.1.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 (54) hide show

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

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

File without changes

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

File without changes

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

@@ -0,0 +1,91 @@
+<!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"/>
+  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> -->
+  <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>
+            <span>Save</span>
+            <div class="loader"></div>
+          </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 → index.js} RENAMED Viewed

@@ -1,56 +1,48 @@
 import 'regenerator-runtime/runtime';
-import {
-  initContract,
-  signInWithNearWallet,
-  signOutNearWallet,
-  setGreetingOnContract,
-  getGreetingFromContract,
-} from './near-api';
+import { Contract } from './near-interface';
+import { Wallet } from './near-wallet';
-document.querySelector('form').onsubmit = doUserAction;
-document.querySelector('#sign-in-button').onclick = signInWithNearWallet;
-document.querySelector('#sign-out-button').onclick = signOutNearWallet;
+// create the Wallet and the Contract
+const wallet = new Wallet({contractId: process.env.CONTRACT_NAME});
+const contract = new Contract({wallet: wallet});
+// Setup on page load
+window.onload = async () => {
+  let isSignedIn = await wallet.startUp();
+  if(isSignedIn){
+    signedInFlow();
+  }else{
+    signedOutFlow();
+  }
-// ====== Initialize the API for NEAR ======
-window.nearInitPromise = initContract()
-  .then(() => {
-    if (window.walletConnection.isSignedIn()) {
-      signedInFlow();
-    } else {
-      signedOutFlow();
-    }
-  })
-  .catch(alert);
+  fetchGreeting();
+};
+// Button clicks
+document.querySelector('form').onsubmit = doUserAction;
+document.querySelector('#sign-in-button').onclick = () => { wallet.signIn(); };
+document.querySelector('#sign-out-button').onclick = () => { wallet.signOut(); };
 // 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')
+  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;
-  }
+  await contract.setGreeting(greeting.value);
   // ===== Fetch the data from the blockchain =====
   await fetchGreeting();
-  document
-    .querySelector('#signed-in-flow main')
+  document.querySelector('#signed-in-flow main')
     .classList.remove('please-wait');
 }
 // Get greeting from the contract on chain
 async function fetchGreeting() {
-  const currentGreeting = await getGreetingFromContract();
+  const currentGreeting = await contract.getGreeting();
   document.querySelectorAll('[data-behavior=greeting]').forEach(el => {
     el.innerText = currentGreeting;
@@ -62,8 +54,6 @@ async function fetchGreeting() {
 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
@@ -71,8 +61,6 @@ 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;
+    el.innerText = wallet.accountId;
   });
-  fetchGreeting();
-}
+}

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

@@ -0,0 +1,29 @@
+{
+  "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": {
+    "nodemon": "^2.0.16",
+    "parcel": "^2.6.0",
+    "process": "^0.11.10",
+    "env-cmd": "^10.1.0"
+  },
+  "dependencies": {
+    "@near-wallet-selector/core": "^6.0.0",
+    "@near-wallet-selector/ledger": "^6.0.0",
+    "@near-wallet-selector/math-wallet": "^6.0.0",
+    "@near-wallet-selector/meteor-wallet": "^6.0.0",
+    "@near-wallet-selector/modal-ui": "^6.0.0",
+    "@near-wallet-selector/my-near-wallet": "^6.0.0",
+    "@near-wallet-selector/near-wallet": "^6.0.0",
+    "@near-wallet-selector/nightly": "^6.0.0",
+    "@near-wallet-selector/nightly-connect": "^6.0.0",
+    "@near-wallet-selector/sender": "^6.0.0",
+    "@near-wallet-selector/wallet-connect": "^6.0.0",
+    "near-api-js": "^0.44.2"
+  }
+}

package/templates/integration-tests/{shared/js-tests → js-tests}/ava.config.cjs RENAMED Viewed

File without changes

package/templates/integration-tests/{shared/js-tests → js-tests}/package.json RENAMED Viewed

@@ -9,7 +9,7 @@
     "@types/bn.js": "^5.1.0",
     "@types/node": "^18.6.2",
     "ava": "^4.2.0",
-    "near-workspaces": "^3.1.0",
+    "near-workspaces": "^3.2.1",
     "ts-node": "^10.8.0",
     "typescript": "^4.7.2"
   },

package/templates/integration-tests/{shared/js-tests → js-tests}/src/main.ava.ts RENAMED Viewed

@@ -1,4 +1,4 @@
-import { Worker, NEAR, NearAccount } from 'near-workspaces';
+import { Worker, NearAccount } from 'near-workspaces';
 import anyTest, { TestFn } from 'ava';
 const test = anyTest as TestFn<{

package/templates/integration-tests/{shared/rust-tests → rust-tests}/Cargo.toml RENAMED Viewed

File without changes

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

File without changes

package/templates/shared/README.md CHANGED Viewed

@@ -9,18 +9,18 @@ Quick Start
 If you haven't installed dependencies during setup:
-    npm run deps-install
+    npm install
 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/templates/shared/{near.gitignore → template.gitignore} RENAMED Viewed

File without changes

package/dist/checks.js DELETED Viewed

@@ -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

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

@@ -1,15 +0,0 @@
-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/frontend/react/frontend/near-api.js DELETED Viewed

@@ -1,51 +0,0 @@
-import { connect, Contract, keyStores, WalletConnection } from 'near-api-js';
-import { getConfig } from './near-config';
-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));
-  // 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);
-  // Getting the Account ID. If still unauthorized, it's just empty string
-  window.accountId = window.walletConnection.getAccountId();
-  // Initializing our contract APIs by contract name and configuration
-  window.contract = await new Contract(window.walletConnection.account(), nearConfig.contractName, {
-    // View methods are read only. They don't modify the state, but usually return some value.
-    viewMethods: ['get_greeting'],
-    // Change methods can modify the state. But you don't receive the returned value when called.
-    changeMethods: ['set_greeting'],
-  });
-}
-export function signOutNearWallet() {
-  window.walletConnection.signOut();
-  // reload page
-  window.location.replace(window.location.origin + window.location.pathname);
-}
-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);
-}
-export async function setGreetingOnContract(message) {
-  let response = await window.contract.set_greeting({
-    args: { message: message }
-  });
-  return response;
-}
-export async function getGreetingFromContract() {
-  let greeting = await window.contract.get_greeting();
-  return greeting;
-}

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

@@ -1,61 +0,0 @@
-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/vanilla/frontend/index.html DELETED Viewed

@@ -1,86 +0,0 @@
-<!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>