create-near-app 2.0.0 → 3.0.0

package/templates/vue/package.json

@@ -1,86 +0,0 @@
-{
-  "name": "near-blank-project",
-  "version": "0.0.1",
-  "license": "UNLICENSED",
-  "scripts": {
-    "build": "npm run build:contract && npm run build:web",
-    "build:contract": "node contract/compile.js",
-    "build:contract:debug": "node contract/compile.js --debug",
-    "build:web": "node copy-dev-account.js && vue-cli-service build",
-    "dev:deploy:contract": "near dev-deploy",
-    "deploy:contract": "near deploy",
-    "deploy:pages": "gh-pages -d dist/",
-    "deploy": "npm run build && npm run deploy:contract && npm run deploy:pages",
-    "prestart": "npm run build:contract:debug && npm run dev:deploy:contract",
-    "start": "echo The app is starting! It will automatically open in your browser when ready && npm run serve",
-    "dev": "nodemon --watch contract -e ts --exec \"npm run start\"",
-    "test:web": "vue-cli-service test:unit",
-    "test": "npm run build:contract:debug && cd contract && npm run test && cd .. && vue-cli-service test:unit",
-    "serve": "node copy-dev-account.js && vue-cli-service serve --open",
-    "lint": "eslint . --ext .js --ext .vue --fix"
-  },
-  "dependencies": {
-    "core-js": "~3.12.1",
-    "near-api-js": "~0.41.0",
-    "vue": "~2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.8",
-    "@vue/cli-plugin-eslint": "~4.5.8",
-    "@vue/cli-plugin-unit-jest": "~4.5.4",
-    "@vue/cli-service": "~4.5.8",
-    "@vue/test-utils": "~1.2.0",
-    "env-cmd": "~10.1.0",
-    "eslint": "~7.26.0",
-    "eslint-plugin-vue": "~7.9.0",
-    "gh-pages": "~3.1.0",
-    "near-cli": "~1.6.0",
-    "nodemon": "~2.0.4",
-    "shelljs": "~0.8.4",
-    "vue-template-compiler": "~2.6.11"
-  },
-  "eslintConfig": {
-    "ignorePatterns": [
-      "src/config.js",
-      "/tests/*.spec.js",
-      "copy-dev-account.js"
-    ],
-    "env": {
-      "browser": true,
-      "es2020": true
-    },
-    "extends": [
-      "eslint:recommended",
-      "plugin:vue/essential"
-    ],
-    "parserOptions": {
-      "ecmaVersion": 2017,
-      "sourceType": "module"
-    },
-    "plugins": [
-      "vue"
-    ],
-    "rules": {
-      "indent": [
-        2,
-        2
-      ],
-      "quotes": [
-        "off",
-        "double"
-      ],
-      "vue/html-indent": [
-        "error",
-        2,
-        {
-          "alignAttributesVertically": true
-        }
-      ]
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}

package/templates/vue/src/App.vue

@@ -1,37 +0,0 @@
-<template>
-  <div id="root">
-    <SignedOut v-show="!isSignedIn" />
-    <SignedIn v-show="isSignedIn" />
-  </div>
-</template>
-
-<script>
-import "./global.css"
-import getConfig from "./config"
-import SignedOut from "./components/SignedOut.vue"
-import SignedIn from "./components/SignedIn.vue"
-
-const nearConfig = getConfig(process.env.NODE_ENV || "development")
-console.log(
-  `networkId:${nearConfig.networkId} CONTRACT_NAME:${nearConfig.contractName}`
-)
-window.networkId = nearConfig.networkId
-
-export default {
-  created() {
-    document.title = "near-blank-project"
-  },
-  name: "App",
-  components: {
-    SignedOut,
-    SignedIn,
-  },
-
-  computed: {
-    isSignedIn() {
-      return window.walletConnection.isSignedIn()
-    },
-  },
-}
-</script>
-

package/templates/vue/src/components/Notification.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="notification">
-    <aside>
-      <a target="_blank" rel="noreferrer" v-bind:href="urlPrefix + '/' + accountId">{{ accountId }}</a>
-      <br />
-      {{ msg }}
-      <br />in contract:
-      <a
-        target="_blank"
-        rel="noreferrer"
-        v-bind:href="urlPrefix + '/' + contractId"
-      >{{ contractId }}</a>
-      <footer>
-        <div>✔ Succeeded</div>
-        <div>Just now</div>
-      </footer>
-    </aside>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Notification",
-  props: {
-    networkId: String,
-    msg: String,
-    contractId: String,
-  },
-  computed: {
-    urlPrefix() {
-      return "https://explorer." + this.networkId + ".near.org/accounts"
-    },
-    accountId() {
-      return window.accountId
-    }
-  }
-}
-</script>

package/templates/vue/src/components/SignedIn.vue

@@ -1,179 +0,0 @@
-<template>
-  <div>
-    <button class="link" style="float: right" v-on:click="logout">Sign out</button>
-    <main>
-      <h1>
-        <label
-          for="greeting"
-          style="color: var(--secondary);border-bottom: 2px solid var(--secondary);"
-        >{{ savedGreeting }}</label>
-        {{ accountId }}
-      </h1>
-      <form v-on:submit.prevent="saveGreeting">
-        <fieldset ref="fieldset">
-          <label
-            for="greeting"
-            style="display:block; color:var(--gray);margin-bottom:0.5em;"
-          >Change greeting</label>
-          <div style="display:flex">
-            <input v-model="newGreeting" autocomplete="off" id="greeting" style="flex:1" />
-            <button id="save" style="border-radius:0 5px 5px 0">Save</button>
-          </div>
-        </fieldset>
-      </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>src/App.vue</code> and
-          <code>src/utils.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>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> or
-          <code>yarn 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>
-    </main>
-
-    <Notification
-      v-show="notificationVisible"
-      ref="notification"
-      :networkId="networkId"
-      :msg="'called method: setGreeting'"
-      :contractId="contractId"
-      :visible="false"
-    />
-  </div>
-</template>
-
-<script>
-import { logout } from "../utils"
-
-import Notification from "./Notification.vue"
-
-export default {
-  name: "SignedIn",
-
-  beforeMount() {
-    if (this.isSignedIn) {
-      this.retrieveSavedGreeting()
-    }
-  },
-
-  components: {
-    Notification,
-  },
-
-  data: function () {
-    return {
-      savedGreeting: "",
-      newGreeting: "",
-      notificationVisible: false,
-    }
-  },
-
-  computed: {
-    isSignedIn() {
-      return window.walletConnection? window.walletConnection.isSignedIn(): false
-    },
-    accountId() {
-      return window.accountId
-    },
-    contractId() {
-      return window.contract? window.contract.contractId: null
-    },
-    networkId() {
-      return window.networkId
-    },
-  },
-
-  methods: {
-    retrieveSavedGreeting() {
-      //retrieve greeting
-      window.contract
-        .getGreeting({ accountId: window.accountId })
-        .then((greetingFromContract) => {
-          this.savedGreeting = greetingFromContract
-          this.newGreeting = greetingFromContract
-        })
-    },
-
-    saveGreeting: async function (event) {
-      // fired on form submit button used to update the greeting
-
-      // disable the form while the value gets updated on-chain
-      this.$refs.fieldset.disabled = true
-
-      try {
-        
-        // make an update call to the smart contract
-        await window.contract.setGreeting({
-          // pass the new greeting
-          message: this.newGreeting,
-        })
-      } catch (e) {
-        alert(
-          "Something went wrong! " +
-            "Maybe you need to sign out and back in? " +
-            "Check your browser console for more info."
-        )
-        throw e //re-throw
-      } finally {
-        // re-enable the form, whether the call succeeded or failed
-        this.$refs.fieldset.disabled = false
-      }
-
-      // update savedGreeting with persisted value
-      this.savedGreeting = this.newGreeting
-
-      this.notificationVisible = true //show new notification
-
-      // remove Notification again after css animation completes
-      // this allows it to be shown again next time the form is submitted
-      setTimeout(() => {
-        this.notificationVisible = false
-      }, 11000)
-
-    },
-
-    logout: logout,
-  },
-}
-</script>

package/templates/vue/src/components/SignedOut.vue

@@ -1,34 +0,0 @@
-<template>
-  <main>
-    <h1>Welcome to NEAR!</h1>
-    <p>
-      To make use of the NEAR blockchain, you need to sign in. The button
-      below will sign you in using NEAR Wallet.
-    </p>
-    <p>
-      By default, when your app runs in "development" mode, it connects
-      to a test network ("testnet") wallet. This works just like the main
-      network ("mainnet") wallet, but the NEAR Tokens on testnet aren't
-      convertible to other currencies - they're just for testing!
-    </p>
-    <p>Go ahead and click the button below to try it out:</p>
-    <p style="text-align:center; margin-top:2.5em">
-      <button v-on:click="login">Sign in</button>
-    </p>
-  </main>
-</template>
-
-<script>
-import { login } from "../utils"
-
-export default {
-  name: "SignedOut",
-
-  methods: {
-    login() {
-      console.log("calling utils.login")
-      login()
-    },
-  },
-}
-</script>

package/templates/vue/src/config.js

@@ -1,63 +0,0 @@
-const CONTRACT_NAME = process.env.VUE_APP_CONTRACT_NAME ||'near-blank-project'
-
-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/vue/src/main.js

@@ -1,16 +0,0 @@
-import Vue from "vue"
-import App from "./App.vue"
-
-import { initContract } from "./utils"
-
-Vue.config.productionTip = false
-
-window.nearInitPromise = initContract()
-  .then(() => {
-
-    new Vue({
-      render: h => h(App),
-    }).$mount("#app")
-
-  })
-  

package/templates/vue/tests/unit/Notification.spec.js

@@ -1,26 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import Notification from 'components/Notification.vue'
-
-
-describe('Notification.vue Test', () => {
-  it('renders message when component is created', () => {
-    // render the component
-    const wrapper = shallowMount(Notification, {
-      propsData: {
-        msg: 'Test Message'
-      }
-    })
-
-    console.log(wrapper.text())
-
-    //check msg prop
-    expect(wrapper.props("msg")).toMatch('Test Message')
-
-    // check that the message is rendered
-    expect(wrapper.text()).toMatch('Test Message')
-
-    // check that additional the text is rendered
-    expect(wrapper.text()).toMatch('in contract')
-
-  })
-})

package/templates/vue/tests/unit/SignedIn.spec.js

@@ -1,24 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import SignedIn from 'components/SignedIn.vue'
-import Notification from 'components/Notification.vue'
-
-
-describe('SignedIn.vue Test', () => {
-  it('compose component', () => {
-    // render the component
-    const wrapper = shallowMount(SignedIn, {})
-
-    // check that the text is rendered
-    expect(wrapper.text()).toMatch('This greeting is stored on the NEAR blockchain')
-
-    // check that the logout button is rendered
-    expect(wrapper.find('button').text()).toBe("Sign out")
-
-    // check that the save button is rendered
-    expect(wrapper.find('#save').text()).toBe("Save")
-
-    // check the notification component is present
-    expect(wrapper.findComponent(Notification).exists()).toBe(true)
-
-  })
-})

package/templates/vue/tests/unit/SignedOut.spec.js

@@ -1,17 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import SignedOut from 'components/SignedOut.vue'
-
-
-describe('SignedOut.vue Test', () => {
-  it('compose main page', () => {
-    // render the component
-    const wrapper = shallowMount(SignedOut, {})
-
-    // check that the text is rendered
-    expect(wrapper.text()).toMatch('Welcome to NEAR')
-
-    // check that the login button rendered
-    expect(wrapper.find('button').text()).toBe("Sign in")
-
-  })
-})