feat: add NFTs to treasury

Author: Sekhmet

src/components/Link.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  text: string;
+  isActive: boolean;
+}>();
+</script>
+
+<template>
+  <h4
+    class="eyebrow py-2 cursor-pointer"
+    :class="[isActive ? 'text-skin-link' : 'text-skin-text']"
+    v-text="text"
+  />
+</template>

src/views/Space/Treasury.vue

@@ -1,14 +1,19 @@
-<script setup>
-import { onMounted, computed } from 'vue';
+<script setup lang="ts">
+import { onMounted, computed, ref, Ref } from 'vue';
 import { formatUnits } from '@ethersproject/units';
 import { useBalances } from '@/composables/useBalances';
+import { useNfts } from '@/composables/useNfts';
 import space from '@/helpers/space.json';
 import { _n, shorten, explorerUrl } from '@/helpers/utils';
 import { ETH_CONTRACT } from '@/helpers/constants';
+import type { Space } from '@/types';
 
-defineProps({ space: Object });
+defineProps<{ space: Space }>();
+
+const page: Ref<'tokens' | 'nfts'> = ref('tokens');
 
 const { loading, loaded, assets, loadBalances } = useBalances();
+const { loading: nftsLoading, loaded: nftsLoaded, nfts, loadNfts } = useNfts();
 
 const totalQuote = computed(() =>
   assets.value.reduce((acc, asset) => {
@@ -25,7 +30,10 @@ const sortedAssets = computed(() =>
   })
 );
 
-onMounted(() => loadBalances(space.wallet));
+onMounted(() => {
+  loadBalances(space.wallet);
+  loadNfts(space.wallet);
+});
 </script>
 
 <template>
@@ -44,7 +52,7 @@ onMounted(() => loadBalances(space.wallet));
   </div>
   <div class="space-y-3">
     <div>
-      <Label :label="'Treasury'" />
+      <Label label="Treasury" />
       <a
         :href="explorerUrl('1', space.wallet)"
         target="_blank"
@@ -60,31 +68,54 @@ onMounted(() => loadBalances(space.wallet));
       </a>
     </div>
     <div>
-      <Label :label="'Tokens'" />
-      <UiLoading v-if="loading && !loaded" class="px-4 py-3 block" />
-      <div
-        v-for="(asset, i) in sortedAssets"
-        :key="i"
-        class="mx-4 py-3 border-b flex"
-      >
-        <div class="flex-auto flex items-center">
-          <Stamp :id="asset.contract_address" type="token" :size="32" />
-          <div class="flex flex-col ml-3 leading-[20px]">
+      <div class="flex pl-4">
+        <Link
+          :is-active="page === 'tokens'"
+          text="Tokens"
+          class="pr-3"
+          @click="page = 'tokens'"
+        />
+        <Link :is-active="page === 'nfts'" text="NFTs" @click="page = 'nfts'" />
+      </div>
+      <div v-if="page === 'tokens'">
+        <UiLoading v-if="loading && !loaded" class="px-4 py-3 block" />
+        <div
+          v-for="(asset, i) in sortedAssets"
+          :key="i"
+          class="mx-4 py-3 border-b flex"
+        >
+          <div class="flex-auto flex items-center">
+            <Stamp :id="asset.contract_address" type="token" :size="32" />
+            <div class="flex flex-col ml-3 leading-[20px]">
+              <div
+                class="text-skin-link"
+                v-text="shorten(asset.contract_ticker_symbol, 12)"
+              />
+              <div class="text-sm" v-text="shorten(asset.contract_name, 24)" />
+            </div>
+          </div>
+          <div class="flex-col items-end text-right leading-[20px]">
             <div
               class="text-skin-link"
-              v-text="shorten(asset.contract_ticker_symbol, 12)"
+              v-text="
+                _n(
+                  formatUnits(asset.balance || 0, asset.contract_decimals || 0)
+                )
+              "
             />
-            <div class="text-sm" v-text="shorten(asset.contract_name, 24)" />
+            <div class="text-sm" v-text="`$${_n(asset.quote)}`" />
           </div>
         </div>
-        <div class="flex-col items-end text-right leading-[20px]">
-          <div
-            class="text-skin-link"
-            v-text="
-              _n(formatUnits(asset.balance || 0, asset.contract_decimals || 0))
-            "
-          />
-          <div class="text-sm" v-text="`$${_n(asset.quote)}`" />
+      </div>
+      <div v-else>
+        <UiLoading v-if="nftsLoading && !nftsLoaded" class="px-4 py-3 block" />
+        <div
+          class="grid gap-2 grid-cols-3 md:grid-cols-4 lg:grid-cols-6 py-3 px-2"
+        >
+          <div v-for="(nft, i) in nfts" :key="i" class="block px-3 py-1 mb-3">
+            <NftPreview :item="nft" class="aspect-square rounded w-full" />
+            <div class="mt-2 text-sm truncate">{{ nft.displayTitle }}</div>
+          </div>
         </div>
       </div>
     </div>