Merge pull request #727 from kodadot/main

Ice Ice baby

Author: vikiival

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,28 +1,30 @@
 **Thank you for your contribution** to the KodaDot NFT gallery.
 Let's do a quick check before the merge.
-Your contribution will be an eternal part of the community codebase
+Your contribution will be an eternal part of the community codebase.
+
+### PR type
+- [ ] Bugfix
+- [ ] Feature
+- [ ] Refactoring
 
 ### Before submitting this PR, please make sure:
 - [ ] Code builds clean without any errors or warnings
 - [ ] I've merged recent default branch -- **main** and I've no conflicts
-- [ ] I didn't break any original functionality
+- [ ] I've didn't break any original functionality
+- [ ] I've posted screenshot of demonstrated change in this PR
 
 ### Optional
 - [ ] I've tested it on mobile and everything works
+- [ ] I found edge cases
 
-### PR type
-- [ ] Bugfix
-- [ ] Feature
-- [ ] Refactoring
-
-### What's new? (maybe part of changelog)
-- closes #<issue_number> - <Brief_description_how_you_fixed_it>
+### What's new? (may be part of changelog)
+- This PR closes #<issue_number> - <Brief_description_how_I've_fixed_it>
 
-### If issue contains bounty label ($,$$,$$$)
-- Your KSM address: <Kusama_address>
+### If issue had bounty label ($,$$,$$$)
+- Fill up your KSM address: https://kodadot.xyz/transfer/?target=<Kusama_Address> 
 
 ### Community participation
-- [ ] Are you at KodaDot Discord? If no, [let's join us - https://discord.gg/35hzy2dXXh](https://discord.gg/35hzy2dXXh)
+- [ ] Are you at KodaDot Discord? If not yet, [let's join us - https://discord.gg/35hzy2dXXh](https://discord.gg/35hzy2dXXh)
 
 ### Screenshot
-- [ ] Whenever your fix will change **something** on UI, a screenshot is more than welcome
+- [ ] Whenever my fix has changed **something** on UI, a screenshot for others, is more than welcome

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -1,4 +1,10 @@
-Thank you for your contribution to the KodaDot NFT gallery.
+Thank you for your contribution to the KodaDot NFT gallery, 
+we really appreciate your contribution!
+
+### PR type
+- [ ] Bugfix
+- [ ] Feature
+- [ ] Refactoring
 
 ### Before submitting this PR, please make sure:
 - [ ] Your code builds clean without any erros or warnigns
@@ -8,14 +14,11 @@ Thank you for your contribution to the KodaDot NFT gallery.
 
 ### Optional
 - [ ] You've tested it on mobile
-
-### PR type
-- [ ] Bugfix
-- [ ] Feature
-- [ ] Refactoring
+- [ ] Are there any edge cases? Name if any 
 
 ### What's new? (may be part of changelog)
-- closes #<issue_number> - <Brief_description_how_you_fixed_it>
+- closes #<issue_number> - <Brief_description_how_you've_fixed_it>
 
 ### If issue had bounty label ($,$$,$$$)
-- Your KSM address: <Kusama_address> 
+- Fill up your KSM address: https://kodadot.xyz/transfer/?target=<Kusama_Address> 
+

src/components/rmrk/Gallery/GalleryCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="card nft-card">
+  <div class="card nft-card" :class="{'is-current-owner': accountIsCurrentOwner()}">
     <LinkResolver class="nft-card__skeleton" :route="type" :param="id" :link="link" tag="div" >
       <div class="card-image" v-if="image">
         <span v-if="emoteCount" class="card-image__emotes">
@@ -51,8 +51,9 @@
 </template>
 
 <script lang="ts" >
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { get, update } from 'idb-keyval';
+import shouldUpdate from '@/utils/shouldUpdate';
 import { sanitizeIpfsUrl, fetchNFTMetadata, getSanitizer } from '../utils';
 import { NFT } from '../service/scheme';
 
@@ -74,6 +75,7 @@ export default class GalleryCard extends Vue {
   @Prop() public imageType!: string;
   @Prop() public price!: string;
   @Prop() public metadata!: string;
+  @Prop() public currentOwner!: string;
 
   private placeholder = '/koda300x300.svg';
 
@@ -86,12 +88,27 @@ export default class GalleryCard extends Vue {
         this.title = meta.name
       } else {
         const m = await fetchNFTMetadata({ metadata: this.metadata } as NFT, getSanitizer(this.metadata, undefined, 'permafrost'))
-        this.image = getSanitizer(meta.image || '')(meta.image || '')
+        this.image = getSanitizer(m.image || '')(m.image || '')
         this.title = m.name
         update(this.metadata, () => m)
       }
     }
   }
+
+  @Watch('accountId', { immediate: true })
+  hasAccount(value: string, oldVal: string) {
+    if (shouldUpdate(value, oldVal)) {
+      this.accountIsCurrentOwner();
+    }
+  }
+
+  get accountId() {
+    return this.$store.getters.getAuthAddress;
+  }
+
+  public accountIsCurrentOwner() {
+    return this.accountId === this.currentOwner
+  }
 }
 </script>
 
@@ -103,6 +120,10 @@ export default class GalleryCard extends Vue {
   overflow: hidden;
   box-shadow: 0px 2px 5px 0.5px #d32e79;
 
+  &.is-current-owner {
+    box-shadow: 0px 2px 5px 0.5px #41b883;
+  }
+
   .has-text-overflow-ellipsis {
     overflow: hidden;
     white-space: nowrap;

src/components/rmrk/Gallery/GalleryCardList.vue

@@ -10,8 +10,9 @@
                    :type="type"
                    :link="link"
                    :metadata="nft.metadata"
-                   :price="nft.price" 
+                   :price="nft.price"
                    :emoteCount="nft.emoteCount"
+                   :currentOwner="nft.currentOwner"
       />
     </div>
   </div>

src/queries/collectionById.graphql

@@ -10,6 +10,7 @@ query collectionById($id: String!) {
         name
         price
         burned
+        currentOwner
       }
     }
   }

src/views/OnChainProperty.vue

@@ -4,16 +4,25 @@
 		<b-tooltip class="p-2"
 		 :label="icons[index].label"
 		  position="is-top"
-		  v-clipboard:copy="icons[index].label"
 		  >
 			<b-icon class="property"
+			   v-if="icons[index].icon !== 'twitter'"
 		      :size="icons[index].size"
 		      :pack="icons[index].pack"
 		      :icon="icons[index].icon"
-		  		@click.native="toast('Copied to clipboard')"
+			   v-clipboard:copy="icons[index].label"
+		  	  @click.native="toast('Copied to clipboard')"
 		    >
 		    </b-icon>
-		</b-tooltip> 			
+			<b-icon class="property"
+			   v-else
+		      :size="icons[index].size"
+		      :pack="icons[index].pack"
+		      :icon="icons[index].icon"
+		  	  @click.native="navigateToTwitter(icons[index].label)"
+		    >
+		    </b-icon>
+		</b-tooltip>		
  		</span>
 	</div>
 </template>
@@ -119,7 +128,11 @@ export default class OnChainProperty extends Vue{
 
 	public toast(message: string): void {
 		this.$buefy.toast.open(message);
-  }
+  	}
+
+	public navigateToTwitter(handle: string): void {
+		window.open('https://twitter.com/' + handle.replace(/@/, ''), '_blank');
+	}
 
 	@Watch('legal')
 	async watchLegal(newLegal: string, oldLegal: string){