Unlist, performance, transfer, moving assets to public

package.json

@@ -46,7 +46,6 @@
     "lazysizes": "^5.3.2",
     "markdown-it-vue": "^1.1.6",
     "mingo": "^4.1.2",
-    "netlify-lambda": "^2.0.9",
     "register-service-worker": "^1.7.2",
     "setimmediate": "^1.0.5",
     "slugify": "^1.5.3",
@@ -76,6 +75,7 @@
     "@vue/cli-plugin-typescript": "^4.2.3",
     "@vue/cli-service": "^4.2.3",
     "all-contributors-cli": "^6.20.0",
+    "netlify-lambda": "^2.0.14",
     "sass": "^1.35.1",
     "sass-loader": "^10.2",
     "tslint": "^6.1.0",

src-functions/getKey.js

@@ -30,7 +30,7 @@ exports.handler = async (event) => {
         Authorization: `Bearer ${process.env.PINATA_MASTER}`
       },
     });
-    console.log('[PINATA] Generate Key', status, data);
+    console.log('[PINATA] Generate Key', status);
 
     if (status < 400) {
       return {

src/components/Navbar.vue

@@ -59,6 +59,11 @@
             :to="{ name: 'rmrkFaq'}">
             {{ $t('FAQ') }}
           </b-navbar-item>
+          <b-navbar-item
+            tag="router-link"
+            :to="{ name: 'transfer'}">
+            {{ $t('Transfer') }}
+          </b-navbar-item>
           <b-navbar-item
             tag="router-link"
             :to="{ name: 'settings'}">

src/components/landing/Landing.vue

@@ -230,7 +230,7 @@ export default class Landing extends Vue {
   height: 100%;
 
   @include desktop {
-    background: url('../../assets/homepage-bg.jpg') center bottom;
+    background: url('/homepage-bg.jpg') center bottom;
     background-repeat: no-repeat;
     background-size: contain;
   }

src/components/rmrk/Create/CreateItem.vue

@@ -92,7 +92,7 @@ export default class CreateItem extends Vue {
   @PropSync('description', { type: String }) vDescription!: string
   @PropSync('edition', { type: Number }) vEdition!: number;
   @PropSync('nsfw', { type: Boolean }) vNsfw!: boolean;
-  @PropSync('price', { type: Number }) vPrice!: string | number;
+  @PropSync('price', { type: [Number, String] }) vPrice!: string | number;
   @PropSync('tags', { type: Array }) vTags!: Attribute[];
   @PropSync('file', { type: Blob }) vFile!: Blob | null;
   @PropSync('secondFile', { type: Blob }) vSecondFile!: Blob | null;

src/components/rmrk/Create/CreateToken.vue

@@ -142,7 +142,6 @@ type MintedCollection = {
     PasswordInput,
     Tooltip,
     Support,
-    BalanceInput: () => import('@/components/shared/BalanceInput.vue'),
     Money: () => import('@/components/shared/format/Money.vue'),
     Loader: () => import('@/components/shared/Loader.vue'),
     ArweaveUploadSwitch: () => import('./ArweaveUploadSwitch.vue')

src/components/rmrk/Gallery/AvailableActions.vue

@@ -8,7 +8,7 @@
         {{ action }}
       </b-button>
     </div>
-    <component class="mb-4" v-if="showMeta" :is="showMeta" @input="updateMeta" />
+    <component class="mb-4" v-if="showMeta" :is="showMeta" @input="updateMeta" emptyOnError />
     <b-button
       v-if="showSubmit"
       type="is-primary"
@@ -252,6 +252,12 @@ export default class AvailableActions extends Mixins(RmrkVersionMixin) {
     });
   }
 
+  unlistNft() {
+    // change the selected action to list and change meta value to 0
+    this.selectedAction = 'LIST';
+    this.meta = 0;
+    this.submit();
+  }
 }
 </script>
 

src/components/rmrk/Gallery/Gallery.vue

@@ -166,7 +166,7 @@ export default class Gallery extends Vue {
     sortBy: { blockNumber: -1 }
   };
   private first = 12;
-  private placeholder = require('@/assets/koda300x300.svg');
+  private placeholder = '/koda300x300.svg';
   private currentValue = 1;
   private total = 0;
 

src/components/rmrk/Gallery/GalleryCard.vue

@@ -75,7 +75,7 @@ export default class GalleryCard extends Vue {
   @Prop() public price!: string;
   @Prop() public metadata!: string;
 
-  private placeholder = require('@/assets/koda300x300.svg');
+  private placeholder = '/koda300x300.svg';
 
   async mounted() {
 
@@ -144,7 +144,7 @@ export default class GalleryCard extends Vue {
       }
     }
   }
-  
+
   .card-image__emotes__count {
     vertical-align: text-bottom;
   }

src/components/rmrk/Gallery/GalleryItem.vue

@@ -21,12 +21,12 @@
                 <div class="image-preview has-text-centered" :class="{fullscreen: isFullScreenView}">
                   <b-image
                     v-if="!isLoading && imageVisible && !meta.animation_url"
-                    :src="meta.image || require('@/assets/koda300x300.svg')"
-                    :src-fallback="require('@/assets/koda300x300.svg')"
+                    :src="meta.image || '/koda300x300.svg'"
+                    :src-fallback="'/koda300x300.svg'"
                     alt="KodaDot NFT minted multimedia"
                     ratio="1by1"
                   ></b-image>
-                  <img class="fullscreen-image" :src="meta.image || require('@/assets/koda300x300.svg')" alt="KodaDot NFT minted multimedia">
+                  <img class="fullscreen-image" :src="meta.image || '/koda300x300.svg'" alt="KodaDot NFT minted multimedia">
                   <b-skeleton height="524px" size="is-large" :active="isLoading"></b-skeleton>
                   <MediaResolver v-if="meta.animation_url" :class="{ withPicture: imageVisible }" :src="meta.animation_url" :mimeType="mimeType" />
                 </div>
@@ -69,7 +69,10 @@
           <b-skeleton :count="2" size="is-large" :active="isLoading"></b-skeleton>
           <div class="price-block" v-if="hasPrice">
             <div class="label">{{ $t('price') }}</div>
-            <div class="price-block__original">{{ nft.price | formatBalance(12, 'KSM') }}</div>
+            <div class="price-block__container">
+              <div class="price-block__original">{{ nft.price | formatBalance(12, 'KSM') }}</div>
+              <b-button v-if="nft.currentOwner === accountId" type="is-warning" outlined @click="handleUnlist">{{ $t('Unlist') }}</b-button>
+            </div>
             <!--<div class="label price-block__exchange">{{ this.nft.price | formatBalance(12, 'USD') }}</div>--> <!-- // price in USD -->
           </div>
 
@@ -82,6 +85,7 @@
                     <p class="subtitle">
                       <Auth />
                       <AvailableActions
+                      ref="actions"
                       :accountId="accountId"
                       :currentOwnerId="nft.currentOwner"
                       :price="nft.price"
@@ -118,7 +122,7 @@ import { NFT, NFTMetadata, Emote } from '../service/scheme';
 import { sanitizeIpfsUrl, resolveMedia } from '../utils';
 import { emptyObject } from '@/utils/empty';
 
-// import AvailableActions from './AvailableActions.vue';
+import AvailableActions from './AvailableActions.vue';
 import { notificationTypes, showNotification } from '@/utils/notification';
 // import Money from '@/components/shared/format/Money.vue';
 // import/ Sharing from '@/components/rmrk/Gallery/Item/Sharing.vue';
@@ -292,6 +296,12 @@ export default class GalleryItem extends Vue {
       showNotification(`INSTANCE REMOVED`, notificationTypes.warn)
     }
   }
+
+  protected handleUnlist() {
+    //call unlist function from the AvailableActions component
+    (this.$refs.actions as AvailableActions).unlistNft();
+  }
+
 }
 </script>
 
@@ -408,6 +418,12 @@ hr.comment-divider {
       font-weight: 500;
     }
 
+    &__container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
     &__exchange {
       opacity: .6;
       color: $dark;

src/components/rmrk/Gallery/History.vue

@@ -76,13 +76,10 @@ export default class History extends Vue {
 	protected priceData: any = [];
 	// protected eventData: Date[] = [];
 
-	public async created() {
-		this.createTable();
-	}
-
 	protected createTable() {
 		let prevOwner: string = '';
 		let curPrice: string = '0.0000000';
+
 		for (const newEvent of this.events) {
 			const event: any = {};
 
@@ -162,9 +159,10 @@ export default class History extends Vue {
 	}
 
 	@Watch('events')
-	async watchEvent(newEvent: [], oldEvent: []) {
-		// console.log(this.events)
-		this.createTable();
+	public async watchEvent() {
+    if (this.events) {
+      this.createTable();
+    }
 	}
 }
 </script>

src/components/rmrk/Profile/ProfileLink.vue

@@ -5,7 +5,7 @@
       <template v-slot:extra>
         <a :href="`https://kusama.subscan.io/account/${address}`" target="_blank" rel="noopener noreferrer">
           <figure class="image is-24x24 subscan__less-margin">
-            <img alt="subscan" :src="require('@/assets/subscan.svg')" />
+            <img alt="subscan" src="/subscan.svg" />
           </figure>
         </a>
       </template>

src/components/shared/AddressInput.vue

@@ -1,34 +1,43 @@
 <template>
   <div>
-    <b-field :label="$t(label)">
-      <b-input type="is-danger" v-model="value" @input="handleInput" :message="err"></b-input>
+    <b-field :type="type" :message="err" :label="$t(label)">
+      <b-input v-model="inputValue" @input="handleInput"></b-input>
     </b-field>
   </div>
 </template>
 
 <script lang="ts">
+import correctFormat from '@/utils/ss58Format';
 import { checkAddress } from '@polkadot/util-crypto';
 import { Debounce } from 'vue-debounce-decorator';
-import { Component, Emit, Prop, Vue } from 'vue-property-decorator';
+import { Component, Emit, Prop, Vue, VModel } from 'vue-property-decorator';
 
 @Component({})
 export default class AddressInput extends Vue {
-
-  private value: string = '';
+  @Prop(String) public value!: string;
   private err: string | null = '';
-  @Prop({ default: 'insert address' }) public label!: string;
+  @Prop({ type: String, default: 'insert address' }) public label!: string;
+  @Prop(Boolean) public emptyOnError!: boolean;
+
+  get inputValue(): string {
+    return this.value;
+  }
+
+  set inputValue(value: string) {
+    this.handleInput(value);
+  }
+
+  get type() {
+    return this.err ? 'is-danger': '';
+  }
 
   @Debounce(500)
   @Emit('input')
   protected handleInput(value: string) {
-    const [valid, err] = checkAddress(value, process.env.VUE_APP_KEYRING === 'true' ? 0 : this.ss58Format);
-    this.err = err;
-
-    if (valid) {
-      return value
-    }
+    const [, err] = checkAddress(value, correctFormat(this.ss58Format));
+    this.err = value ? err : '';
 
-    return ''
+    return this.emptyOnError && this.err ? '' : value;
   }
 
   get ss58Format(): number {

src/components/shared/ArweaveLink.vue

@@ -1,7 +1,7 @@
 <template>
   <ExternalLink :url="link" :id="id" class="is-flex">
     <figure class="image is-24x24 icon__less-margin">
-      <img :src="require('@/assets/arweave.svg')" />
+      <img src="/arweave.svg" />
     </figure>
     <b class="is-align-self-center">View {{ label }} on Arweave</b>
   </ExternalLink>

src/components/shared/BalanceInput.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="arguments-wrapper">
     <b-field :label="$t(label)" class="balance">
-      <b-input v-model="value" @input="handleInput" type="number" step="0.001" min="0"/>
+      <b-input v-model="inputValue" @input="handleInput" type="number" step="0.001" min="0"/>
       <p class="control balance">
-        <b-select v-model="selectedUnit" @input="handleInput">
+        <b-select :disabled="!calculate" v-model="selectedUnit" @input="handleInput">
           <option v-for="u in units" v-bind:key="u.value" v-bind:value="u.value">
             {{ u.name }}
           </option>
@@ -14,12 +14,13 @@
 </template>
 
 <script lang="ts" >
-import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch, Emit, Mixins } from 'vue-property-decorator';
 import Balance from '@/params/components/Balance.vue';
 import { units as defaultUnits } from '@/params/constants';
 import { Unit } from '@/params/types';
 import shouldUpdate from '@/utils/shouldUpdate';
 import { Debounce } from 'vue-debounce-decorator';
+import ChainMixin from '@/utils/mixins/chainMixin';
 
 const components = { Balance }
 
@@ -28,27 +29,27 @@ type BalanceType = {
 }
 
 @Component({ components })
-export default class BalanceInput extends Vue {
-  private value: number = 0;
+export default class BalanceInput extends Mixins(ChainMixin) {
+  @Prop({ type: [Number, String], default: 0 }) value!: number;
   protected units: Unit[] = defaultUnits;
   private selectedUnit: number = 1;
   @Prop({ default: 'balance' }) public label!: string;
+  @Prop({ default: true }) public calculate!: boolean;
 
-
-  get chainProperties() {
-    return this.$store.getters.getChainProperties;
+  get inputValue(): number {
+    return this.value;
   }
 
-  get decimals(): number {
-    return this.chainProperties.tokenDecimals
+  set inputValue(value: number) {
+    this.handleInput(value);
   }
 
-  get unit(): string {
-    return this.chainProperties.tokenSymbol
+  formatSelectedValue(value: number): number {
+    return  value * (10**this.decimals) * this.selectedUnit
   }
 
   get calculatedBalance() {
-    return this.value * (10**this.decimals) * this.selectedUnit
+    return this.formatSelectedValue(this.inputValue)
   }
 
   protected mapper(unit: Unit) {
@@ -62,23 +63,10 @@ export default class BalanceInput extends Vue {
     this.units = defaultUnits.map(this.mapper);
   }
 
-  // @Watch('$store.getters.getChainProperties.tokenSymbol')
-  // protected updateUnit(val: string, oldVal: string) {
-  //   console.log('@Watch(unit)', val, oldVal)
-  //   if (shouldUpdate(val, oldVal)) {
-  //     this.units = defaultUnits.map(u => {
-  //       if (u.name === '-') {
-  //         return { ...u, name: val }
-  //       }
-  //       return u
-  //     })
-  //   }
-  // }
-
   @Debounce(200)
   @Emit('input')
-  public handleInput() {
-    return this.calculatedBalance;
+  public handleInput(value: number) {
+    return this.calculate ? this.formatSelectedValue(value) : value;
   }
 }
 </script>

src/components/shared/Loader.vue

@@ -15,7 +15,7 @@ export default class Loader extends Vue {
   @Prop(String) public status!: string;
   @Prop(Boolean) public value!: boolean;
 
-  protected placeholder = require('@/assets/infinity.svg');
+  protected placeholder = '/infinity.svg';
 
   get isLoading() {
     return this.value;

src/components/subsocial/PostButton.vue

@@ -2,7 +2,7 @@
   <b-button @click="$emit('click')">
     <span :style="{ display: 'flex' }">
       <figure class="image is-24x24 mr-2">
-        <img :src="require('@/assets/subsocial.svg')" />
+        <img src="/subsocial.svg" />
       </figure>
       <span>{{ $t("subsocial.post") }}</span>
     </span>