added status watcher with notifications, cleaned some code

copy-dev-account.js

@@ -2,6 +2,6 @@ let fs=require('fs')
 // copy created contract name for vue-cli-service at ./.env
 const contractNameFilePath = './neardev/dev-account';
 const existingContractName = fs.readFileSync(contractNameFilePath, { encoding: "utf8" }).trim()
-const vueEnvFile = "./.env.development.local"
+const vueEnvFile = "./.env"
 fs.writeFileSync(vueEnvFile , "VUE_APP_CONTRACT_NAME=" + existingContractName)
 console.log(`copied ${contractNameFilePath} to ${vueEnvFile}`)

src/App.vue

@@ -9,6 +9,7 @@
 <script>
 import NavBar from './components/NavBar/NavBar.vue'
 import getConfig from "./nearNets"
+import { mapActions } from "vuex"
 
 const nearConfig = getConfig(process.env.NODE_ENV || "development")
 console.log(
@@ -26,16 +27,26 @@ export default {
     document.title = "nft-example.near_testing.testnet"
 
     if (this.isSignedIn) {
-      this.$store.dispatch('setCurrentContract', window.contract)
-      this.$store.dispatch('setAccountId', window.accountId)
+      this.setCurrentContract(window.contract)
+      this.setAccountId(window.accountId)
 
       // getting all NFTs of currently signed user
-      this.$store.dispatch('getListOfNFT')
+      this.getListOfNFT()
     }
   },
 
   async beforeMount() {
-    await this.$store.dispatch('setIpfs')
+    await this.setIpfs()
+  },
+
+  methods: {
+    ...mapActions([
+      'setCurrentContract',
+      'setAccountId',
+      'getListOfNFT',
+      'setIpfs',
+      'setStatus',
+    ]),
   },
 
   computed: {

src/components/Spinner/SpinnerDots.vue

@@ -35,7 +35,6 @@ $target-scale: .55;
 $min-scale: .37;
 
 $animationDuration: 1s;
-
 .spinner-dots {
   font-size: 0;
   text-align: center;

src/global.css

@@ -26,6 +26,13 @@ html {
   opacity: 0;
 }
 
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
 body {
   margin: 0;
   padding: 0;

src/nearConfig.js

@@ -1,4 +1,4 @@
-import { connect, Contract, keyStores, WalletConnection } from 'near-api-js'
+import { connect, Contract, keyStores, WalletConnection, utils } from 'near-api-js'
 import getConfig from './nearNets'
 
 const nearConfig = getConfig(process.env.NODE_ENV || 'development')
@@ -16,6 +16,10 @@ export async function initContract() {
 
   // Getting the Account ID. If still unauthorized, it's just empty string
   window.accountId = window.walletConnection.getAccountId()
+  const acc = await near.account("near_testing.testnet")
+  const balance = await acc.getAccountBalance()
+  const amountInNEAR = utils.format.formatNearAmount(balance.total)
+  window.balance = amountInNEAR
 
   // Initializing our contract APIs by contract name and configuration
   window.contract = await new Contract(window.walletConnection.account(), nearConfig.contractName, {

src/router/index.js

@@ -7,6 +7,13 @@ import SendNFT from "../views/SendNFT"
 // import Minting from "../views/Minting"
 // import WrapNFTS from "../views/WrapNFTS"
 // import Unwrap from "../views/Unwrap"
+const { providers } = require("near-api-js")
+import store, { Status } from "../store"
+
+const provider = new providers.JsonRpcProvider(
+  "https://rpc.testnet.near.org"
+)
+
 
 Vue.use(Router)
 
@@ -75,12 +82,30 @@ router.afterEach((to, from) => {
   })
 })
 
+async function passResult(txHash, accountId, type) {
+  const result = await provider.txStatus(txHash, accountId)
+
+  if (result.status && 'SuccessValue' in result.status && type === 'send_nft') {
+    console.log("Result: 2 ", result)
+    // store.dispatch.setStatus(Status.Approved)
+    console.log(router, 'ROUTE')
+    console.log(Status)
+    store.dispatch('setStatus', Status.Approved)
+  }
 
+  if (result.status && 'SuccessValue' in result.status && type === 'choose_nft') {
+    console.log("Result: 2 ", result)
+    // store.dispatch.setStatus(Status.Approved)
+    console.log(router, 'ROUTE')
+    console.log(Status)
+    store.dispatch('setStatus', Status.Minted)
+  }
+}
 
 router.beforeEach((to, _from, next) => {
   const requiresAuth = to.matched.some((record) => record.meta.requiresAuth)
   const user = window.walletConnection.isSignedIn()
-  console.log(user, 'user')
+
   if (requiresAuth && !user) {
     next('/')
     Vue.notify({
@@ -91,6 +116,24 @@ router.beforeEach((to, _from, next) => {
   } else {
     next()
   }
+
+  // handling transaction hashes, for displayng response to user
+
+  const account_id = window.accountId
+  const url = new URL(document.location)
+  console.log(url, 'url')
+  console.log(window.location.href, 'document.location')
+  const tx_hash = url.searchParams.get('transactionHashes')
+
+  if (tx_hash && to.name === 'SendNFT') {
+    router.push({ name: 'SendNFT' })
+    passResult(tx_hash, account_id, 'send_nft')
+  }
+  if (tx_hash && to.name === 'ChooseNFT') {
+    console.log(tx_hash, 'tx_hash')
+    router.push({ name: 'ChooseNFT' })
+    passResult(tx_hash, account_id, 'choose_nft')
+  }
 })
 
 export default router

src/store/index.js

@@ -27,7 +27,8 @@ export const Status = Object.freeze({
   DeployingToIPFS: 2,
   DeployedToIPFS: 3,
   Minting: 4,
-  Minted: 5
+  Minted: 5,
+  Approved: 6,
 })
 
 const store = new Vuex.Store({
@@ -135,17 +136,21 @@ const store = new Vuex.Store({
       commit('setNFT', result[2].metadata)
       commit('passAllNFTs', result)
     },
-    createNewRandomNFT ({getters},  { token_id, metadata }) {
+    createNewRandomNFT ({getters, dispatch},  { token_id, metadata }) {
+      dispatch('setStatus', Status.Minting)
       createRandomNft(token_id, metadata, getters.getAccountId, getters.getContract)
     },
-    createNewUsualNFT ({getters},  { token_id, metadata }) {
+    createNewUsualNFT ({getters, dispatch},  { token_id, metadata }) {
       console.log(token_id, metadata, 'result createNewUsualNFT')
+      dispatch('setStatus', Status.Minting)
       createUsualNFT(token_id, metadata, getters.getAccountId, getters.getContract)
     },
-    setNFTApproveId ({getters}, token_id) {
+    setNFTApproveId ({getters, dispatch}, token_id) {
+      dispatch('setStatus', Status.Approving)
       approveNFT(getters.getAccountId, token_id, getters.getContract)
     },
-    sendNFTByToken ({getters}, { receiver, token_id }) {
+    sendNFTByToken ({getters, dispatch}, { receiver, token_id }) {
+      dispatch('setStatus', Status.Approving)
       sendNFT(receiver, token_id, getters.getContract)
     },
   },
@@ -162,9 +167,7 @@ const store = new Vuex.Store({
     getAccountId: state => state.account_id,
     getContract: state => state.contract,
     getAllNFTs: state => state.allNFTs,
-    getNFTforModification: (state) => {
-      return state.NFT
-    }
+    getNFTforModification: (state) => state.NFT
   }
 })