front update

frontend/README.md

@@ -26,7 +26,7 @@ Case: testing on nft-example.near_testing.testnet
 
 Case: new Smart-contract project
 
-1. near login           V--->subname of your account                    V--->your account
+1. near login
 2. near create-account nft-example.your-account.testnet --masterAccount your-account.testnet --initialBalance 10
 3. Create vars:
 - NFT_CONTRACT_ID=nft-example.your-account.testnet

frontend/nft-contract/src/lib.rs

@@ -14,7 +14,6 @@ pub use crate::nft_core::*;
 pub use crate::approval::*;
 pub use crate::royalty::*;
 pub use crate::events::*;
-pub use crate::greeting::*;
 
 mod internal;
 mod approval; 
@@ -24,7 +23,6 @@ mod mint;
 mod nft_core; 
 mod royalty; 
 mod events;
-mod greeting;
 
 // pub mod event;
 // pub use event::NearEvent;

frontend/package.json

@@ -3,27 +3,17 @@
   "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",
+    "build:web": "vue-cli-service build",
     "build:nft": "cd nft-contract && bash build.sh && cd .. && ls && cd market-contract && bash build.sh && cd ..",
-    "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",
+    "serve": "vue-cli-service serve --open",
     "lint": "eslint . --ext .js --ext .vue --fix"
   },
   "dependencies": {
     "axios": "^0.26.0",
-    "cids": "^1.1.9",
     "ipfs-core": "^0.12.0",
+    "js-untar": "^2.0.0",
     "near-api-js": "~0.43.1",
     "vue": "~2.6.11",
     "vue-notification": "^1.3.20",
@@ -39,10 +29,9 @@
     "eslint": "~7.26.0",
     "eslint-plugin-vue": "~7.9.0",
     "near-cli": "~2.1.1",
-    "nodemon": "~2.0.4",
     "sass": "^1.49.9",
     "sass-loader": "^8.0.2",
-    "shelljs": "~0.8.4",
+    "svg-sprite-loader": "^6.0.11",
     "vue-template-compiler": "~2.6.11"
   },
   "eslintConfig": {

frontend/src/App.vue

@@ -1,62 +1,77 @@
 <template>
   <div id="root">
     <notifications group="foo" />
-    <nav-bar v-if="isSignedIn" />
 
-    <div class="container">
-      <router-view />
+    <div v-if="getContractLoading" class="loading-container loading-container--app">
+      <spinner :size="92" color="#000" />
     </div>
+
+    <template v-else>
+
+      <head-bar
+        v-if="isSignedIn"
+      />
+
+      <div class="container">
+        <router-view />
+      </div>
+
+    </template>
   </div>
 </template>
 
 <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(
-  `networkId:${nearConfig.networkId} CONTRACT_NAME:${nearConfig.contractName}`
-)
-window.networkId = nearConfig.networkId
+import HeadBar from './components/HeadBar/HeadBar.vue'
+import Spinner from "./components/Spinner"
+import { mapActions, mapGetters } from "vuex"
 
 export default {
   name: "App",
+
   components: {
-    NavBar,
+    HeadBar,
+    Spinner,
   },
 
-  created() {
-    document.title = "nft-example.near_testing.testnet"
+  computed: {
+    ...mapGetters([
+      'getCurrentWallet',
+      'getContractLoading',
+      'getContract'
+    ]),
+    // checking for wallet and contract, until they loaded
+    isSignedIn() {
+      if (this.getCurrentWallet && this.getContract) {
+        return this.getCurrentWallet.isSignedIn()
+      }
 
-    if (this.isSignedIn) {
-      this.setCurrentContract(window.contract)
-      this.setAccountId(window.accountId)
+      return false
+    },
+  },
 
-      // getting all NFTs of currently signed user
-      this.getListOfNFT()
-    }
+  beforeMount() {
+    this.setIpfs()
+    document.title = "nft-example.near_testing.testnet"
   },
 
-  async beforeMount() {
-    await this.setIpfs()
+  watch: {
+    isSignedIn: {
+      handler(value) {
+        console.log(value, 'value')
+        if (value) {
+          // getting all NFTs of currently signed user
+          this.getListOfNFT()
+        }
+      },
+    },
   },
 
   methods: {
     ...mapActions([
-      'setCurrentContract',
-      'setAccountId',
       'getListOfNFT',
       'setIpfs',
-      'setStatus',
     ]),
   },
-
-  computed: {
-    isSignedIn() {
-      return window.walletConnection.isSignedIn()
-    },
-  },
 }
 </script>
 

frontend/src/api/index.js

@@ -15,6 +15,7 @@ export async function getNftInfosByAddress(accountAddress) {
 export async function getEffects() {
   return (await api.get('/effects')).data
 }
+
 export async function modifyPicture (objectURL, effectId) {
   console.log(objectURL, effectId, 'modifyPicture')
   let result = await api.post(`/effects/applyWithImgUrl/${effectId}?img_url=${objectURL}`, "", { 
@@ -29,4 +30,12 @@ export async function modifyPicture (objectURL, effectId) {
   console.log(item, 'objectURL')
 
   return item
+}
+
+export async function getPicture (objectURL, effectId) {
+  console.log(objectURL, effectId, 'modifyPicture')
+  let result = await api.get(`${objectURL}`,)
+  console.log(result, 'RESULT')
+
+  return result.url
 }

frontend/src/components/EffectCards/EffectCards.vue

@@ -1,17 +1,30 @@
 <template>
   <div class="effect-cards">
-    <div v-for="(card, idx) in cards" class="effect-cards__item" :key="idx" :class="cardClass(card.id || idx)">
+    <div v-for="(card, idx) in cards" class="effect-cards__item" :key="card.id" :class="cardClass(card.id || idx)">
       <div @click="cardClicked(card.id || idx)" class="effect-cards__item__inner">
         <template v-if="getImage(card)">
-          <img v-if="getImage(card).endsWith('.jpg')" class="card-img card-img-top card-img-fixed" :src="getImage(card)"
-               :alt="card.name">
-          <video v-else-if="contentType === 'video'" autoplay loop class="embed-responsive-item">
+          <img
+            v-if="getImage(card).endsWith('.jpg')"
+            class="card-img card-img-top card-img-fixed"
+            :src="getImage(card)"
+            :alt="card.name"
+          >
+          <video
+            v-else-if="contentType === 'video'"
+            autoplay
+            loop
+            class="embed-responsive-item"
+          >
             <source :src="getImage(card)" type="video/mp4">
           </video>
         </template>
         <template v-else>
-          <img v-if="contentType === 'image'" class="card-img card-img-top card-img-fixed" :src="placeholder()"
-               :alt="card.name">
+          <img
+            v-if="contentType === 'image'"
+            class="card-img card-img-top card-img-fixed"
+            :src="placeholder()"
+            :alt="card.name"
+          >
         </template>
         <div class="effect-cards__item__footer">
           <p :class="{'card-title': cardSize === 'standard', 'card-text': cardSize === 'smaller'}">
@@ -49,7 +62,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .standard-card-size {
     height: 242px;
     width: 168px;
@@ -86,7 +99,7 @@ export default {
 }
 
 .chosen-card {
-    box-shadow: -1px 2px 1px 7px rgba(192, 127, 255, 0.7);
+    box-shadow: 0px 0px 7px 6px rgba(192, 127, 255, 0.7);
     transform: scale(0.92);
 }
 
@@ -103,5 +116,9 @@ export default {
 
 .effect-cards__item__footer {
   text-align: center;
+  
+  p {
+    margin: 5px 0;
+  }
 }
 </style>

frontend/src/components/HeadBar/HeadBar.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="headbar">
+    <nav class="headbar__nav">
+      <router-link :to="{ name: 'ChooseNFT' }">
+        <img src="../../assets/logo.jpg">
+      </router-link>
+    </nav>
+    <div class="headbar__acc">
+      <div class="headbar__acc-info">
+        <span>Balance:</span> <b>{{ accBalance }}</b>
+        <icon name="near" :size="20" class="near-icon" />
+      </div>
+      <a
+        class="link"
+        target="_blank"
+        :href="`https://explorer.testnet.near.org/accounts/${getAccountId}`"
+      >Wallet.near</a>
+      <button class="main-btn main-btn--exit" @click="logout">Sign out</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { logout } from "../../nearConfig"
+
+export default {
+  name: "HeadBar",
+
+  computed: {
+    ...mapGetters([
+      'getAccountId',
+      'getCurrentWalletBalance',
+      'getCurrentWallet',
+    ]),
+    accBalance() {
+      return Number(this.getCurrentWalletBalance).toFixed(2)
+    },
+  },
+
+  methods: {
+    logout() {
+      logout(this.getCurrentWallet)
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.headbar__acc {
+  display: flex;
+  align-items: center;
+}
+
+.headbar__acc-info {
+  display: flex;
+  align-items: center;
+  color: #fff;
+  margin-right: 20px;
+
+  span {
+    margin-right: 5px;
+  }
+}
+
+.near-icon {
+  margin-left: 5px;
+}
+
+.headbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  padding: 0 15px;
+  background: #2d0949;
+}
+
+.headbar__nav {
+  width: 60%;
+  margin-right: auto;
+}
+
+.headbar__nav a.router-link-exact-active {
+  text-decoration: underline;
+}
+
+.headbar__nav a.router-link-exact-active:before,
+.headbar__nav a.router-link-exact-active:after {
+  transform: scale(1);
+}
+</style>