Merge pull request #549 from kodadot/main

Rank -> Score, Showing twitter next to profile at nft item detail

Author: yangwao

package.json

@@ -21,18 +21,18 @@
     "@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.38.8",
+    "@polkadot/types": "^4.17.1",
+    "@polkadot/ui-keyring": "^0.83.1",
+    "@polkadot/util": "^6.11.1",
+    "@polkadot/util-crypto": "^6.11.1",
+    "@polkadot/vue-identicon": "^0.83.1",
     "@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.17",
+    "@vue-polkadot/vue-api": "^0.0.36",
+    "@vue-polkadot/vue-settings": "^0.0.18",
     "apollo-boost": "^0.4.9",
     "axios": "^0.21.1",
     "buefy": "^0.9.8",

src/components/rmrk/Create/CreateItem.vue

@@ -17,7 +17,7 @@
       ></b-input>
       <Tooltip iconsize="is-medium" :label="$i18n.t('tooltip.name')" />
     </b-field>
-    <b-field :label="$i18n.t('Collection description')" class="mb-0">
+    <b-field :label="$i18n.t('nft.description')" class="mb-0">
       <b-input
         v-model="vDescription"
         maxlength="500"

src/components/rmrk/Gallery/CollectionItem.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="column">
         <p class="subtitle">
-          Creator <ProfileLink :address="issuer" :inline="true" />
+          Creator <ProfileLink :address="issuer" :inline="true" :showTwitter="true"/>
         </p>
         <p class="subtitle" v-if="owner">
           Owner <ProfileLink :address="owner" :inline="true" />

src/components/rmrk/Gallery/Gallery.vue

@@ -229,7 +229,9 @@ export default class Gallery extends Vue {
     const storedMetadata = await getMany(
       this.nfts.map(({ metadata }: any) => metadata)
     );
+
     storedMetadata.forEach(async (m, i) => {
+      console.log(m)
       if (!m) {
         try {
           const meta = await fetchNFTMetadata(this.nfts[i]);

src/components/rmrk/Gallery/GalleryItem.vue

@@ -149,7 +149,7 @@ import { exist } from './Search/exist';
 
 @Component<GalleryItem>({
   metaInfo() {
-    const image = `https://og-image-green-seven.vercel.app/${encodeURIComponent(this.nft.name as string)}.png?price=${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)}`;
     return {
       title: this.nft.name,
       titleTemplate: '%s | Low Carbon NFTs',

src/components/rmrk/Gallery/Item/Name.vue

@@ -31,7 +31,7 @@
           {{ $t('owner') }}
         </p>
         <p class="subtitle is-size-6">
-          <ProfileLink :address="nft.currentOwner" />
+          <ProfileLink :address="nft.currentOwner" :showTwitter="true"/>
           <b-skeleton :count="1" size="is-large" :active="isLoading"></b-skeleton>
           <!-- <a :href="`https://kusama.subscan.io/account/${nft.currentOwner}`" target="_blank"><Identity :address="nft.currentOwner" /></a> -->
         </p>

src/components/rmrk/Profile/ProfileLink.vue

@@ -1,4 +1,5 @@
 <template>
+<div>
   <LinkResolver class="profile-link__wrapper" route="profile" :param="address" link="u">
     <Identity :address="address" :inline="true" :verticalAlign="true" />
     <template v-slot:extra>
@@ -9,6 +10,11 @@
       </a>
     </template>
   </LinkResolver>
+  <div class="pt-2" v-if="showTwitter">
+    <Identity :address="address" :inline="true" :showTwitter="showTwitter" :verticalAlign="true" />
+	</div>
+</div>
+
 </template>
 
 <script lang="ts" >
@@ -23,6 +29,7 @@ const components = {
 @Component({ components })
 export default class ProfileLink extends Mixins(InlineMixin) {
   @Prop() public address!: string;
+  @Prop() public showTwitter!: boolean;
 
 }
 </script>

src/components/shared/format/Identity.vue

@@ -1,6 +1,17 @@
 <template>
   <component :is="is" v-clipboard:copy="address" :class="{ aligned: verticalAlign, overflowWrap: noOwerflow }">
-    {{ name | toString }}
+    <template v-if="showTwitter && twitter">
+      <a :href="`https://twitter.com/${twitter}`" target="_blank" rel="noopener noreferrer">
+        {{ twitter | toString }}
+        <b-icon
+          pack="fab"
+          icon="twitter"
+        ></b-icon>
+      </a>
+    </template>
+    <template v-else>
+      {{ name | toString }}
+    </template>
   </component>
 </template>
 
@@ -28,6 +39,7 @@ export default class Identity extends Mixins(InlineMixin) {
   @Prop(Boolean) public verticalAlign!: boolean;
   @Prop(Boolean) public noOwerflow!: boolean;
   @Prop(Boolean) public emit!: boolean;
+  @Prop(Boolean) public showTwitter!: boolean;
   private identity: IdentityFields = emptyObject<IdentityFields>();
 
   get name(): Address {
@@ -36,6 +48,12 @@ export default class Identity extends Mixins(InlineMixin) {
     return name as string || shortAddress(this.resolveAddress(this.address))
   }
 
+  get twitter(): Address {
+    // console.log('get twitter -> identityInfo', this.identityInfo);
+    const twitter = this.identity.twitter
+    return twitter as string || shortAddress(this.resolveAddress(this.address))
+  }
+
   @Watch('address', { immediate: true })
   async watchAddress(newAddress: Address,  oldAddress: Address) {
     if (shouldUpdate(newAddress, oldAddress)) {
@@ -95,7 +113,7 @@ export default class Identity extends Mixins(InlineMixin) {
     const final = Array.from(identity.info)
     .filter(([_, value]) => !Array.isArray(value) && !value.isEmpty)
     .reduce((acc, [key, value]) => {
-      acc[key] = this.handleRaw(value as Data)
+      acc[key] = this.handleRaw(value as unknown as Data)
       return acc;
     }, {} as IdentityFields)
 

src/components/spotlight/SpotlightTable.vue

@@ -66,7 +66,7 @@
 
       <b-table-column
         field="rank"
-        :label="$t('spotlight.rank')"
+        :label="$t('spotlight.score')"
         v-slot="props"
         sortable
       >

src/components/spotlight/utils.ts

@@ -24,7 +24,7 @@ export const nftFn = (a: any): Row => {
     total,
     sold,
     unique,
-    averagePrice: a.nfts.nodes.reduce(sumFn, 0) / (a.nfts.nodes.length || 1),
+    averagePrice: a.nfts.nodes.filter(onlyOwned).reduce(sumFn, 0) / (a.nfts.nodes.length || 1),
     count: 1,
     collectors: 0, // a.nfts.nodes.reduce(uniqueCollectorFn, new Set()),
     rank: sold * (unique / total)
@@ -38,3 +38,4 @@ const sumFn = (acc: number, val: SimpleSpotlightNFT) => {
 // const uniqueCollectorFn = (acc: Set<string>, val: SimpleSpotlightNFT) => val.issuer !== val.currentOwner ? acc.add(val.currentOwner) : acc
 const uniqueFn = (acc: Set<string>, val: SimpleSpotlightNFT) => acc.add(val.metadata)
 const soldFn = (acc: number, val: SimpleSpotlightNFT) => val.issuer !== val.currentOwner ? acc + 1 : acc
+const onlyOwned = ({ issuer, currentOwner }: SimpleSpotlightNFT) => issuer === currentOwner;