Merge pull request #672 from kodadot/transfer

Transfer Page

Author: yangwao

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/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"

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