🖼 resolve conflict

Author: roiLeo

components/rmrk/Create/CreateToken.vue

@@ -531,8 +531,7 @@ export default class CreateToken extends mixins(
     showNotification('You will go to the detail in 2 seconds')
     const go = () =>
       this.$router.push({
-        name: 'nftDetail',
-        params: { id: getNftId(nft, blockNumber) },
+        path: `/rmrk/gallery/${getNftId(nft, blockNumber)}`,
         query: { message: 'congrats' }
       })
     setTimeout(go, 2000)

components/rmrk/Create/SimpleMint.vue

@@ -788,7 +788,7 @@ export default class SimpleMint extends mixins(
     showNotification('You will go to the detail in 2 seconds')
     const go = () =>
       this.$router.push({
-        path: `/rmrk/detail/${getNftId(nft, blockNumber)}`,
+        path: `/rmrk/gallery/${getNftId(nft, blockNumber)}`,
         query: { message: 'congrats' },
       })
     setTimeout(go, 2000)

components/rmrk/Gallery/CollectionItem.vue

@@ -118,19 +118,20 @@ const components = {
 }
 @Component<CollectionItem>({
   metaInfo() {
+    const image = `https://og-image-green-seven.vercel.app/${encodeURIComponent(this.collection.name as string)}.png?price=Items: ${this.collection?.nfts?.length}&image=${(this.meta.image as string)}`
     return {
       title: 'KodaDot cares about environmental impact',
       titleTemplate: '%s | Low Carbon NFTs',
       meta: [
         { name: 'description', content: 'Creating Carbonless NFTs on Kusama' },
         { property: 'og:title', content: this.collection.name || 'KodaDot cares about environmental impact'},
         { property: 'og:url', content: 'https://nft.kodadot.xyz/' + this.$route.path },
-        { property: 'og:image', content: this.meta.image || 'https://nft.kodadot.xyz/kodadot_carbonless.jpg'},
+        { property: 'og:image', content: image},
         { property: 'og:description', content: this.meta.description || 'Creating Carbonless NFTs on Kusama'},
         { property: 'twitter:card', content: 'summary_large_image' },
         { property: 'twitter:title', content: this.collection.name || 'KodaDOT cares about environmental impact'},
         { property: 'twitter:description', content: this.meta.description || 'Creating Carbonless NFTs on Kusama'},
-        { property: 'twitter:image', content: this.meta.image || 'https://nft.kodadot.xyz/kodadot_carbonless.jpg'},
+        { property: 'twitter:image', content: image},
       ]
     }
   },

components/rmrk/Gallery/GalleryCard.vue

@@ -5,9 +5,9 @@
   >
     <LinkResolver
       class="nft-card__skeleton"
-      :route="type"
-      :param="id"
+      :route="route"
       :link="link"
+      :param="id"
       tag="a"
     >
       <div
@@ -95,8 +95,8 @@ const components = {
 
 @Component({ components })
 export default class GalleryCard extends Vue {
-  @Prop({ default: '/rmrk/detail' }) public type!: string;
-  @Prop({ default: 'rmrk/detail' }) public link!: string;
+  @Prop({ default: '/rmrk/gallery' }) public route!: string;
+  @Prop({ default: 'rmrk/gallery' }) public link!: string;
   @Prop() public id!: string;
   @Prop() public name!: string;
   protected image = '';

components/rmrk/Gallery/GalleryCardList.vue

@@ -12,7 +12,7 @@
         <GalleryCard
           :id="nft.id"
           :name="nft.name"
-          :type="type"
+          :route="route"
           :link="link"
           :metadata="nft.metadata"
           :price="nft.price"
@@ -35,8 +35,8 @@ const components = {
 
 @Component({ components })
 export default class GalleryCardList extends Vue {
-  @Prop({ default: 'nftDetail' }) public type!: string;
-  @Prop({ default: 'rmrk/detail' }) public link!: string;
+  @Prop({ default: '/rmrk/gallery' }) public route!: string;
+  @Prop({ default: 'rmrk/gallery' }) public link!: string;
   @Prop() public items!: RmrkType[];
   @Prop({ default: false }) public horizontalLayout!: boolean;
   get classLayout() {

components/rmrk/Gallery/GalleryItem.vue

@@ -138,7 +138,7 @@ import Orientation from '@/directives/DeviceOrientation'
 
 @Component<GalleryItem>({
   metaInfo() {
-    const image = `https://og-image-green-seven.vercel.app/${encodeURIComponent(this.nft.name as string)}.png?price=${Number(this.nft.price) ? Vue.filter('formatBalance')(this.nft.price, 12, 'KSM') : ''}&image=${(this.meta.image as string)}`
+    const image = `https://og-image-green-seven.vercel.app/${encodeURIComponent(this.nft.name as string)}.png?price=${Number(this.nft.price) ? Vue.filter('formatBalance')(this.nft.price, 12, 'KSM') : ''}&image=${(this.meta.image as string)}&mime=${this.mimeType}`
     return {
       title: this.nft.name,
       titleTemplate: '%s | Low Carbon NFTs',

components/shared/AddressInput.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts">
 import correctFormat from '@/utils/ss58Format'
-import { checkAddress } from '@polkadot/util-crypto'
+import { checkAddress, isAddress } from '@polkadot/util-crypto'
 import { Debounce } from 'vue-debounce-decorator'
 import { Component, Emit, Prop, Vue } from 'nuxt-property-decorator'
 
@@ -25,6 +25,7 @@ export default class AddressInput extends Vue {
   private err: string | null = '';
   @Prop({ type: String, default: 'insert address' }) public label!: string;
   @Prop(Boolean) public emptyOnError!: boolean;
+  @Prop({ type: Boolean, default: true }) public strict!: boolean;
 
   get inputValue(): string {
     return this.value
@@ -34,15 +35,19 @@ export default class AddressInput extends Vue {
     this.handleInput(value)
   }
 
-  get type() {
+  get type(): string {
     return this.err ? 'is-danger': ''
   }
 
   @Debounce(500)
   @Emit('input')
   protected handleInput(value: string) {
-    const [, err] = checkAddress(value, correctFormat(this.ss58Format))
-    this.err = value ? err : ''
+    if (this.strict) {
+      const [, err] = checkAddress(value, correctFormat(this.ss58Format))
+      this.err = value ? err : ''
+    } else {
+      this.err = isAddress(value) ? '' : 'Invalid address'
+    }
 
     return this.emptyOnError && this.err ? '' : value
   }

components/shared/DisabledInput.vue

@@ -1,21 +1,17 @@
 <template>
-  <b-field
-    :label="label"
-    :expanded="expanded"
-  >
-    <b-input
-      :value="value"
-      disabled
-    />
+  <b-field :label="label" :expanded="expanded">
+    <b-input :value="value" :readonly="readonly" disabled ></b-input>
   </b-field>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'nuxt-property-decorator'
 
 @Component({})
 export default class DisabledInput extends Vue {
-  @Prop() public label!: any;
-  @Prop() public value!: any;
-  @Prop({default: false}) public expanded!: boolean;
+  @Prop({ type: String, required: true }) public label!: string;
+  @Prop({ type: String, required: true }) public value!: string;
+  @Prop({ type: Boolean, default: false}) public expanded!: boolean;
+  @Prop({ type: Boolean, default: false}) public readonly!: boolean;
+
 }
 </script>

components/shared/LinkResolver.vue

@@ -28,8 +28,8 @@ import isShareMode from '@/utils/isShareMode'
 
 @Component
 export default class LinkResolver extends mixins(InlineMixin) {
-  @Prop({ default: '/rmrk/detail' }) public route!: string;
-  @Prop({ default: 'rmrk/detail' }) public link!: string;
+  @Prop({ default: '/rmrk/gallery' }) public route!: string;
+  @Prop({ default: 'rmrk/gallery' }) public link!: string;
   @Prop({ default: 'a' }) public tag!: string;
   @Prop({}) public param!: string;
 

docker-compose.yml

@@ -14,4 +14,4 @@ services:
     - HOST=0.0.0.0
     - CHOKIDAR_USEPOLLING=true
     ports:
-    - 3000:3000
+    - 9000:9000