🔀 Merge featured/hidden NFTs feature (#793)

likecoin · Dec 5, 2022 · 184296d · 184296d
2 parents 73f2c5e + b431af4
commit 184296d
Show file tree

Hide file tree

Showing 29 changed files with 603 additions and 105 deletions.
diff --git a/functions/.env.civic-liker b/functions/.env.civic-liker
@@ -1,5 +1,5 @@
 EXTERNAL_URL=https://liker.land
-API_URL=https://liker.land/api
+API_URL=https://liker.land
 LIKECOIN_API_BASE=https://api.like.co
 SENTRY_REPORT_URI=https://sentry.io/api/1423120/security/?sentry_key=01fb2a31c1bf4234bd8d36ed84732859
 BACKUP_BUCKET=gs://liker-land-firestore-backup

diff --git a/functions/.env.civic-liker-develop b/functions/.env.civic-liker-develop
@@ -1,6 +1,6 @@
 IS_TESTNET=TRUE
 EXTERNAL_URL=https://rinkeby.liker.land
-API_URL=https://rinkeby.liker.land/api
+API_URL=https://rinkeby.liker.land
 LIKECOIN_API_BASE=https://api.rinkeby.like.co
 SENTRY_REPORT_URI=https://sentry.io/api/1423136/security/?sentry_key=d2ce18926cf6477496214312f4a761ed
 BACKUP_BUCKET=gs://liker-land-develop-firestore-backup

diff --git a/functions/modules/firebase.js b/functions/modules/firebase.js
@@ -10,6 +10,9 @@ const getCollectionIfDefined = root =>
   root ? database.collection(root) : null;
 
 const userCollection = getCollectionIfDefined(process.env.FIRESTORE_USER_ROOT);
+const walletUserCollection = getCollectionIfDefined(
+  process.env.FIRESTORE_WALLET_USER_ROOT
+);
 const nftMintSubscriptionCollection = getCollectionIfDefined(
   process.env.FIRESTORE_NFT_MINT_SUBSCRIPTION_ROOT
 );
@@ -18,5 +21,6 @@ module.exports = {
   db,
   FieldValue,
   userCollection,
+  walletUserCollection,
   nftMintSubscriptionCollection,
 };
diff --git a/src/components/Icon/Hide.vue b/src/components/Icon/Hide.vue
@@ -0,0 +1,17 @@
+
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M18.7071 2.70711C19.0976 2.31658 19.0976 1.68342 18.7071 1.29289C18.3166 0.902369 17.6834 0.902369 17.2929 1.29289L14.6191 3.96671C13.332 3.37671 11.7992 3 9.99975 3C3.8434 3 0.809269 7.40918 0.0510727 9.68377C-0.000506043 9.83851 -0.0134524 10.0035 0.0133621 10.1644C0.233337 11.4842 1.32013 13.1818 2.9679 14.5251C3.16569 14.6863 3.37303 14.8438 3.58974 14.996L1.29289 17.2929C0.902369 17.6834 0.902369 18.3166 1.29289 18.7071C1.68342 19.0976 2.31658 19.0976 2.70711 18.7071L5.39114 16.0231C6.71126 16.6184 8.25582 17 9.99975 17C12.9583 17 15.3431 15.9016 17.0316 14.5251C18.6794 13.1818 19.7662 11.4842 19.9861 10.1644C20.013 10.0035 20 9.83851 19.9484 9.68377C19.5249 8.41318 18.3912 6.47652 16.3998 5.0144L18.7071 2.70711ZM13.0803 5.50547C12.1879 5.19141 11.1665 5.00079 10.007 5L9.99975 5L9.98849 5.00001C5.18602 5.0051 2.75407 8.26715 2.04043 10.0649C2.25402 10.7827 2.95896 11.9374 4.23162 12.9749C4.47949 13.177 4.74582 13.3719 5.03014 13.5556L5.82812 12.7577C4.54194 10.8163 4.75407 8.17491 6.46452 6.46446C7.43789 5.49109 8.71273 5.00294 9.98849 5.00001L10.007 5C10.9669 5.00132 11.9265 5.27733 12.7577 5.82806L13.0803 5.50547ZM11.2935 7.29226C10.1784 6.75957 8.80236 6.95505 7.87874 7.87867C6.95511 8.8023 6.75964 10.1783 7.29232 11.2935L11.2935 7.29226ZM6.92831 14.4859L14.963 6.4512C16.595 7.55182 17.5539 9.04431 17.9591 10.0649C17.7455 10.7827 17.0405 11.9374 15.7679 12.9749C14.3897 14.0984 12.4412 15 9.99975 15C8.86732 15 7.84093 14.806 6.92831 14.4859Z"
+      fill="#4A4A4A"
+    />
+  </svg>
+</template>
diff --git a/src/components/Icon/StartFilled.vue b/src/components/Icon/StartFilled.vue
@@ -0,0 +1,15 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.3471 2.5805C10.8377 1.91554 11.8773 2.09886 12.1109 2.89152L13.2063 6.6084C13.2988 6.9223 13.5391 7.17107 13.8496 7.27448L17.5259 8.49892C18.31 8.76005 18.4569 9.80547 17.7752 10.2726L14.5787 12.463C14.3088 12.6479 14.1464 12.9533 14.144 13.2805L14.1156 17.1553C14.1095 17.9817 13.1607 18.4445 12.5058 17.9405L9.43484 15.5773C9.1755 15.3778 8.83492 15.3177 8.52296 15.4166L4.82899 16.5869C4.04121 16.8365 3.30786 16.0771 3.58479 15.2985L4.88332 11.6476C4.99298 11.3393 4.94485 10.9968 4.75445 10.7307L2.4999 7.57914C2.0191 6.90705 2.51472 5.97492 3.34078 5.99769L7.21423 6.10449C7.54135 6.11351 7.85219 5.96191 8.04647 5.69858L10.3471 2.5805Z"
+      fill="#FFDB5B"
+      stroke="#FFFFFF"
+    />
+  </svg>
+</template>
diff --git a/src/components/Icon/StartOutlined.vue b/src/components/Icon/StartOutlined.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10.038 2.53805C10.7734 1.53566 12.339 1.81172 12.6873 3.0052L13.8027 6.82775L17.584 8.07593C18.7646 8.46564 18.9859 10.0399 17.9585 10.74L14.6677 12.9821L14.6491 16.964C14.6433 18.2072 13.2144 18.9041 12.2311 18.1433L9.08186 15.7064L5.28907 16.9192C4.10488 17.2979 3.00054 16.1543 3.42029 14.9841L4.76471 11.2359L2.43924 8.00351C1.71318 6.99429 2.45953 5.59061 3.70221 5.62819L7.68238 5.74857L10.038 2.53805ZM11.0512 4.538L9.1394 7.14362C8.84735 7.54167 8.37813 7.77052 7.88466 7.7556L4.6544 7.65791L6.54173 10.2813C6.83005 10.682 6.90271 11.199 6.73602 11.6637L5.6449 14.7057L8.7231 13.7214C9.19334 13.571 9.70746 13.6617 10.0979 13.9638L12.6538 15.9416L12.6689 12.7099C12.6712 12.2162 12.9163 11.7552 13.3243 11.4772L15.9951 9.65757L12.9262 8.64456C12.4574 8.48981 12.0948 8.11428 11.9565 7.64035L11.0512 4.538Z"
+      fill="white"
+    />
+  </svg>
+</template>
diff --git a/src/components/NFTFeatured/index.vue b/src/components/NFTFeatured/index.vue
@@ -0,0 +1,167 @@
+<template>
+  <div
+    v-if="!readOnly || displayState === 'featured'"
+    :class="[
+      'absolute',
+      'group',
+      'top-[12px]',
+      'right-[12px]',
+      'transition',
+      'ease-in',
+      'duration-200',
+      { 'cursor-pointer': readOnly },
+      { 'cursor-default': !readOnly }]"
+    @click="(e) => handleClick(e)"
+  >
+    <div class="flex gap-[8px] items-center">
+      <div
+        v-if="!readOnly && formatdisplayState"
+        :class="[
+          'px-[20px]',
+          'py-[4px]',
+          'rounded-[16px]',
+          'opacity-75',
+          'group-hover:opacity-100',
+          'transition',
+          'ease-in',
+          'duration-200',
+          bgColorClasses,
+        ]"
+      >
+        {{ formatdisplayState }}
+      </div>
+      <div class="w-[40px] h-[40px] relative">
+        <div
+          :class="[
+            'w-[40px]',
+            'h-[40px]',
+            'rounded-[50%]',
+            'opacity-75',
+            { 'group-hover:opacity-100': !readOnly },
+            'transition',
+            'ease-in',
+            'duration-200',
+            bgColorClasses,
+          ]"
+        />
+        <IconStartFilled
+          v-if="displayState === 'featured'"
+          :class="iconClasses"
+        />
+        <IconStartOutlined
+          v-if="displayState === 'default'"
+          :class="[iconClasses, 'opacity-75']"
+        />
+        <IconHide v-if="displayState === 'hidden'" :class="iconClasses" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapActions, mapGetters } from 'vuex';
+import { NFT_DISPLAY_STATE } from '~/constant';
+
+export default {
+  props: {
+    displayState: {
+      type: String,
+      default: NFT_DISPLAY_STATE.DEFAULT,
+    },
+    classId: {
+      type: String,
+      default: undefined,
+    },
+    readOnly: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  computed: {
+    ...mapGetters(['getAddress', 'walletHasLoggedIn']),
+    formatdisplayState() {
+      switch (this.displayState) {
+        case NFT_DISPLAY_STATE.FEATURED:
+          return this.$t('nft_portfolio_page_label_featured');
+
+        case NFT_DISPLAY_STATE.HIDDEN:
+          return this.$t('nft_portfolio_page_label_hidden');
+
+        case NFT_DISPLAY_STATE.DEFAULT:
+        default:
+          return '';
+      }
+    },
+    bgColorClasses() {
+      switch (this.displayState) {
+        case NFT_DISPLAY_STATE.FEATURED:
+          return ['bg-white'];
+        case NFT_DISPLAY_STATE.HIDDEN:
+          return ['bg-[#9B9B9B]'];
+        case NFT_DISPLAY_STATE.DEFAULT:
+        default:
+          return ['bg-medium-gray'];
+      }
+    },
+    iconClasses() {
+      return [
+        'w-[20px]',
+        'absolute',
+        'top-[50%]',
+        'left-[50%]',
+        'translate-x-[-50%]',
+        'translate-y-[-50%]',
+      ];
+    },
+  },
+
+  methods: {
+    ...mapActions([
+      'signLogin',
+      'addNFTFeatured',
+      'addNFTHidden',
+      'removeNFTFeatured',
+      'removeNFTHidden',
+    ]),
+    async handleClick(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.readOnly) return;
+
+      if (!this.walletHasLoggedIn) {
+        await this.signLogin();
+      }
+
+      switch (this.displayState) {
+        case NFT_DISPLAY_STATE.FEATURED:
+          await Promise.all([
+            this.removeNFTFeatured({
+              address: this.getAddress,
+              classId: this.classId,
+            }),
+            this.addNFTHidden({
+              address: this.getAddress,
+              classId: this.classId,
+            }),
+          ]);
+          break;
+        case NFT_DISPLAY_STATE.HIDDEN:
+          await this.removeNFTHidden({
+            address: this.getAddress,
+            classId: this.classId,
+          });
+          break;
+        case NFT_DISPLAY_STATE.DEFAULT:
+          await this.addNFTFeatured({
+            address: this.getAddress,
+            classId: this.classId,
+          });
+          break;
+        default:
+          break;
+      }
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTPortfolio/Base.vue b/src/components/NFTPortfolio/Base.vue
@@ -3,7 +3,7 @@
     :collected-count="collectedCount"
     :is-writing-nft="isWritingNFT"
   >
-    <NFTPortfolioCard>
+    <NFTPortfolioCard :display-state="displayState">
       <NFTCover
         :src="imageSrc"
         :size="350"
@@ -19,6 +19,7 @@
           'px-[24px]',
           'pt-[48px]',
           'py-[24px]',
+          'bg-white',
           'relative',
         ]"
       >
@@ -79,6 +80,8 @@
 </template>
 
 <script>
+import { NFT_DISPLAY_STATE } from '~/constant';
+
 import { ellipsis, formatNumberWithLIKE } from '~/util/ui';
 
 import nftClassCollectionMixin from '~/mixins/nft-class-collection';
@@ -146,6 +149,10 @@ export default {
       type: String,
       default: '',
     },
+    displayState: {
+      type: String,
+      default: NFT_DISPLAY_STATE.DEFAULT,
+    },
   },
   methods: {
     handleClickCollect(event) {

diff --git a/src/components/NFTPortfolio/Card.vue b/src/components/NFTPortfolio/Card.vue
@@ -1,21 +1,45 @@
 <template>
   <div
     :class="[
-      'flex',
-      'flex-col',
       'rounded-[24px]',
       'w-full',
       'overflow-hidden',
       'bg-white',
-      'box-border',
-      'border-[2px]',
-      'border-transparent',
-      'hover:border-like-cyan',
+      {'bg-gradient-to-tr from-[#D2F0F0] to-[#F0E6B4]': displayState === 'featured'},
+      {'hover:bg-like-cyan-light': displayState !== 'hidden'},
       'transition',
       'ease-in',
       'duration-200',
     ]"
   >
-    <slot />
+    <div
+      :class="[
+        'flex',
+        'flex-col',
+        'rounded-[24px]',
+        'w-full',
+        'h-auto',
+        'overflow-hidden',
+        'box-border',
+        'border-[2px]',
+        'border-transparent',
+        { 'opacity-25': displayState === 'hidden' },
+      ]"
+    >
+      <slot />
+    </div>
   </div>
 </template>
+
+<script>
+import { NFT_DISPLAY_STATE } from '~/constant';
+
+export default {
+  props: {
+    displayState: {
+      type: String,
+      default: NFT_DISPLAY_STATE.DEFAULT,
+    },
+  },
+};
+</script>
diff --git a/src/components/NFTPortfolio/Item.vue b/src/components/NFTPortfolio/Item.vue
@@ -18,9 +18,15 @@
       :image-src="NFTImageUrl"
       :is-collecting="uiIsOpenCollectModal && isCollecting"
       :own-count="ownCount"
+      :display-state="nftDisplayState"
       @collect="handleClickCollect"
       @load-cover="handleCoverLoaded"
     />
+    <NFTFeatured
+      :class-id="classId"
+      :read-only="$route.name !== 'dashboard'"
+      :display-state="nftDisplayState"
+    />
   </NuxtLink>
 </template>
 

diff --git a/src/components/NFTPortfolio/MainView.vue b/src/components/NFTPortfolio/MainView.vue
@@ -303,6 +303,9 @@ export default {
         case NFT_CLASS_LIST_SORTING.NFT_OWNED_COUNT:
           return this.$t('order_menu_collected');
 
+        case NFT_CLASS_LIST_SORTING.DISPLAY_STATE:
+          return this.$t('order_menu_display_state');
+
         default:
           return '';
       }

diff --git a/src/config/sitemap.js b/src/config/sitemap.js
@@ -28,6 +28,7 @@ async function getSitemapRoutes() {
       getTopCollectors,
     ].map(url =>
       axios.get(url).catch(err => {
+        // eslint-disable-next-line no-console
         console.error(err);
         return {};
       })

diff --git a/src/constant/index.js b/src/constant/index.js
@@ -165,3 +165,9 @@ export const NFT_GEM_NAME = [
 export const ROUGH_LIKE_TO_USD_PRICE = 0.01;
 
 export const LOGIN_MESSAGE = 'Login';
+
+export const NFT_DISPLAY_STATE = {
+  FEATURED: 'featured',
+  HIDDEN: 'hidden',
+  DEFAULT: 'default',
+};