Merge pull request #665 from kodadot/main

yangwao · web-flow · commit da93f833ac6d · 2021-08-31T13:12:49.000+02:00
Sometimes after fog, comes sunny day.
diff --git a/package.json b/package.json
@@ -21,18 +21,19 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "@google/model-viewer": "^1.7.2",
-    "@polkadot/extension-dapp": "^0.38.6",
-    "@polkadot/types": "^4.15.1",
-    "@polkadot/ui-keyring": "^0.81.1",
-    "@polkadot/util": "^6.9.1",
-    "@polkadot/util-crypto": "^6.9.1",
-    "@polkadot/vue-identicon": "^0.81.1",
+    "@polkadot/extension-dapp": "^0.39.3",
+    "@polkadot/types": "5.7.1",
+    "@polkadot/types-known": "5.7.1",
+    "@polkadot/ui-keyring": "^0.85.3",
+    "@polkadot/util": "7.3.1",
+    "@polkadot/util-crypto": "7.3.1",
+    "@polkadot/vue-identicon": "^0.85.3",
     "@subsocial/api": "^0.5.8",
     "@subsocial/types": "^0.5.8",
     "@subsocial/utils": "^0.4.39",
     "@types/file-saver": "^2.0.2",
-    "@vue-polkadot/vue-api": "0.0.35",
-    "@vue-polkadot/vue-settings": "^0.0.18",
+    "@vue-polkadot/vue-api": "^0.0.45",
+    "@vue-polkadot/vue-settings": "^0.0.19",
     "apollo-boost": "^0.4.9",
     "axios": "^0.21.1",
     "buefy": "^0.9.8",
diff --git a/public/index.html b/public/index.html
@@ -80,10 +80,9 @@
     <div id="app">
       <div class="preloader-container">
         <div class="preloader">
-          <video width="240" height="240" playsinline autoplay muted loop>
-            <source src="/kodadot_preloader_1.mp4" type="video/mp4">
-            Your browser does not support the video tag.
-          </video>
+          <object type="image/svg+xml" data="kodadot_preloader_1.svg">
+            KodaDot preloader
+          </object>
           <br />
           <span class="preloader-text">
             🔌 Charging Kusama<br>
diff --git a/public/kodadot_preloader_1.gif b/public/kodadot_preloader_1.gif
diff --git a/public/kodadot_preloader_1.mp4 b/public/kodadot_preloader_1.mp4
diff --git a/public/kodadot_preloader_1.svg b/public/kodadot_preloader_1.svg
diff --git a/src/assets/homepage-bg.jpg b/src/assets/homepage-bg.jpg
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
@@ -11,6 +11,8 @@
           src="/koda300x300.svg"
           alt="First NFT market explorer on Kusama and Polkadot"
           class="logo__img"
+          width="60"
+          height="60"
         >
       </b-navbar-item>
     </template>
diff --git a/src/components/landing/Landing.vue b/src/components/landing/Landing.vue
@@ -230,7 +230,7 @@ export default class Landing extends Vue {
   height: 100%;
 
   @include desktop {
-    background: url('../../assets/homepage-bg.png') center bottom;
+    background: url('../../assets/homepage-bg.jpg') center bottom;
     background-repeat: no-repeat;
     background-size: contain;
   }
diff --git a/src/components/rmrk/Create/CreateCollection.vue b/src/components/rmrk/Create/CreateCollection.vue
@@ -17,15 +17,15 @@
 
       <MetadataUpload
         v-model="image"
-        label="Drop your NFT here or click to upload. We support various media types (bmp/ gif/ jpeg/ png/ svg/ tiff/ webp/ mp4/ ogv/ quicktime/ webm/ glb/ flac/ mp3/ json)"
+        label="Drop collection logo here or click to upload. We support various media types (PNG, JPEG, GIF, SVG)"
         expanded
         preview
-        accept="image/png, image/jpeg, image/gif"
+        accept="image/png, image/jpeg, image/gif, image/svg+xml, image/svg"
       />
 
       <b-field grouped :label="$i18n.t('Name')">
         <b-input
-          placeholder="Name your NFT"
+          placeholder="Name your collection"
           v-model="rmrkMint.name"
           expanded
           class="mr-0"
@@ -61,7 +61,7 @@
           v-model="meta.description"
           maxlength="500"
           type="textarea"
-          placeholder="Describe your NFT"
+          placeholder="Describe your collection"
           spellcheck="true"
         ></b-input>
       </b-field>
@@ -237,9 +237,9 @@ export default class CreateCollection extends Mixins(
               const decoded = api.registry.findMetaError(
                 dispatchError.asModule
               );
-              const { documentation, name, section } = decoded;
+              const { docs, name, section } = decoded;
               showNotification(
-                `[ERR] ${section}.${name}: ${documentation.join(' ')}`,
+                `[ERR] ${section}.${name}: ${docs.join(' ')}`,
                 notificationTypes.danger
               );
             } else {
diff --git a/src/components/rmrk/Create/CreateItem.vue b/src/components/rmrk/Create/CreateItem.vue
@@ -2,7 +2,7 @@
   <div>
     <MetadataUpload
       v-model="vFile"
-      label="Drop your NFT here or click to upload. We support various media types (bmp/ gif/ jpeg/ png/ svg/ tiff/ webp/ mp4/ ogv/ quicktime/ webm/ glb/ flac/ mp3/ json)"
+      label="Drop your NFT here or click to upload. We support various media types (BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP, MP4, OGV, QUICKTIME, WEBM, GLB, FLAC, MP3, JSON)"
       expanded
       preview
     />
diff --git a/src/components/rmrk/Create/CreateToken.vue b/src/components/rmrk/Create/CreateToken.vue
@@ -12,6 +12,7 @@
             v-model="selectedCollection"
             expanded
           >
+            <option disabled selected value=""> -- </option>
             <option
               v-for="option in collections"
               :value="option"
@@ -472,9 +473,9 @@ export default class CreateToken extends Mixins(
     const { api } = Connector.getInstance();
     if (dispatchError.isModule) {
       const decoded = api.registry.findMetaError(dispatchError.asModule);
-      const { documentation, name, section } = decoded;
+      const { docs, name, section } = decoded;
       showNotification(
-        `[ERR] ${section}.${name}: ${documentation.join(' ')}`,
+        `[ERR] ${section}.${name}: ${docs.join(' ')}`,
         notificationTypes.danger
       );
     } else {
diff --git a/src/components/rmrk/Create/DropUpload.vue b/src/components/rmrk/Create/DropUpload.vue
@@ -13,7 +13,6 @@
         </div>
       </section>
     </b-upload>
-    <Tooltip iconsize="is-medium" label="Upload your image of the NFT" />
   </b-field>
 </template>
 
diff --git a/src/components/rmrk/Create/SimpleMint.vue b/src/components/rmrk/Create/SimpleMint.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="columns mb-6">
-    <div class="column is-7 is-offset-3">
+    <div class="column is-6 is-offset-3">
       <section>
         <br />
         <Loader v-model="isLoading" :status="status" />
@@ -21,7 +21,7 @@
 
           <MetadataUpload
             v-model="file"
-            label="Drop your NFT here or click to upload. We support various media types (bmp/ gif/ jpeg/ png/ svg/ tiff/ webp/ mp4/ ogv/ quicktime/ webm/ glb/ flac/ mp3/ json)"
+            label="Drop your NFT here or click to upload. We support various media types (BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP, MP4, OGV, QUICKTIME, WEBM, GLB, FLAC, MP3, JSON)"
             expanded
             preview
           />
@@ -408,9 +408,9 @@ export default class SimpleMint extends Mixins(
     const { api } = Connector.getInstance();
     if (dispatchError.isModule) {
       const decoded = api.registry.findMetaError(dispatchError.asModule);
-      const { documentation, name, section } = decoded;
+      const { docs, name, section } = decoded;
       showNotification(
-        `[ERR] ${section}.${name}: ${documentation.join(' ')}`,
+        `[ERR] ${section}.${name}: ${docs.join(' ')}`,
         notificationTypes.danger
       );
     } else {
diff --git a/src/components/rmrk/Gallery/AvailableActions.vue b/src/components/rmrk/Gallery/AvailableActions.vue
@@ -3,6 +3,7 @@
     <Loader v-model="isLoading" :status="status" />
     <div v-if="accountId" class="buttons">
       <b-button v-for="action in actions" :key="action" :type="iconType(action)[0]"
+      outlined
       @click="handleAction(action)">
         {{ action }}
       </b-button>
@@ -42,7 +43,7 @@ type DescriptionTuple = [string, string] | [string];
 const iconResolver: Record<string, DescriptionTuple> = {
   SEND: ['is-info is-dark'],
   CONSUME: ['is-danger'],
-  LIST: ['is-dark'],
+  LIST: ['is-light'],
   BUY: ['is-success is-dark']
 };
 
diff --git a/src/components/rmrk/Gallery/GalleryItem.vue b/src/components/rmrk/Gallery/GalleryItem.vue
@@ -68,31 +68,16 @@
 
           <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="label price-block__exchange">{{ this.nft.price | formatBalance(12, 'USD') }}</div>--> <!-- // price in USD -->
-            <div class="label">{{ $t('price') }}</div>
           </div>
 
           <template v-if="detailVisible && !nft.burned">
             <!-- <PackSaver v-if="accountId" :accountId="accountId" :currentOwnerId="nft.currentOwner" :nftId="nft.id" /> -->
-            <b-collapse class="card mb-4" animation="slide"
-                aria-id="contentIdForA11y3" :open="false">
-                <template #trigger="props">
-                  <div
-                    class="card-header"
-                    role="button"
-                    aria-controls="contentIdForA11y3">
-                    <p class="card-header-title">
-                      {{ $t('actions') }}
-                    </p>
-                    <a class="card-header-icon">
-                      <b-icon
-                        :icon="props.open ? 'chevron-up' : 'chevron-down'">
-                      </b-icon>
-                    </a>
-                  </div>
-                </template>
-                <div class="card-content">
+            <div class="card mb-4" aria-id="contentIdForA11y3">
+              <div class="card-content">
+                  <div class="label ">{{ $t('actions') }}</div>
                   <div class="content">
                     <p class="subtitle">
                       <Auth />
@@ -107,7 +92,7 @@
                     </p>
                   </div>
                 </div>
-            </b-collapse>
+              </div>
           </template>
 
           <Sharing />
@@ -455,6 +440,11 @@ hr.comment-divider {
       }
     }
 
+    &-content {
+      padding-left: 1rem;
+      padding-top: 1rem;
+    }
+
     &-footer {
       border-radius: none;
       border-top: none;
diff --git a/src/components/shared/AccountSelect.vue b/src/components/shared/AccountSelect.vue
@@ -1,6 +1,7 @@
 <template>
      <b-field grouped :label="label" >
         <b-select placeholder="Select account" v-model="account" expanded>
+          <option disabled selected value=""> -- </option>
           <option
             v-for="option in options"
             :value="option.address"
diff --git a/src/components/shared/Auth.vue b/src/components/shared/Auth.vue
@@ -62,6 +62,7 @@ export default class Auth extends Vue {
 .auth-avatar {
   display: flex;
   flex-direction: row;
+  margin-bottom: 1rem;
 }
 
 .auth-avatar-title {
diff --git a/src/utils/WithKeyring.ts b/src/utils/WithKeyring.ts
@@ -55,6 +55,14 @@ export default class WithKeyring extends Vue {
     }
 
     this.importedAccounts = await web3Accounts({ ss58Format: correctFormat(this.ss58Format) >= 0 ? correctFormat(this.ss58Format) : correctFormat(this.prefixByStore)  });
+
+    if (!this.accountId && this.importedAccounts?.length && !process.env.VUE_APP_KEYRING) {
+      this.$store.dispatch('setAuth', { address: this.importedAccounts[0]?.address });
+    }
+  }
+
+  get accountId() {
+    return this.$store.getters.getAuthAddress;
   }
 
   get prefixByStore() {
diff --git a/src/utils/formatBalance.ts b/src/utils/formatBalance.ts
@@ -1,7 +1,7 @@
 import BN from 'bn.js';
 import { formatBalance } from '@polkadot/util';
 
-function format(balance: number | string | BN | BigInt, decimals: number = 12, withUnit?: boolean | string, withSi?: boolean ) {
+function format(balance: number | string | BN | bigint, decimals: number = 12, withUnit?: boolean | string, withSi?: boolean ) {
   try {
     return formatBalance(balance, { decimals , withUnit , forceUnit: '-', withSi })
   } catch (e) {
diff --git a/src/views/Remark.vue b/src/views/Remark.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="columns">
-    <div class="column is-7 is-offset-3">
+    <div class="column is-6 is-offset-3">
       <section>
         <br>
         <b-tabs v-model="activeTab" destroy-on-hide expanded>
diff --git a/tslint.json b/tslint.json
@@ -16,7 +16,6 @@
     "max-classes-per-file": [true, 2],
     "no-string-literal": false,
     "no-unused-expression": [true, "allow-fast-null-checks"],
-    "no-empty-interface": false,
-    "semicolon": [true, "always"]
+    "no-empty-interface": false
   }
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@`
`11`	`11`	`src="/koda300x300.svg"`
`12`	`12`	`alt="First NFT market explorer on Kusama and Polkadot"`
`13`	`13`	`class="logo__img"`
	`14`	`+ width="60"`
	`15`	`+ height="60"`
`14`	`16`	`>`
`15`	`17`	`</b-navbar-item>`
`16`	`18`	`</template>`
Original file line number	Diff line number	Diff line change
`@@ -230,7 +230,7 @@ export default class Landing extends Vue {`
`230`	`230`	`height: 100%;`
`231`	`231`
`232`	`232`	`@include desktop {`
`233`		`- background: url('../../assets/homepage-bg.png') center bottom;`
	`233`	`+ background: url('../../assets/homepage-bg.jpg') center bottom;`
`234`	`234`	`background-repeat: no-repeat;`
`235`	`235`	`background-size: contain;`
`236`	`236`	`}`