Skip to content
This repository was archived by the owner on Aug 22, 2025. It is now read-only.

Commit 8840baf

Browse files
SekhmetSekhmet
committed
feat: add NFTs to treasury
1 parent b1364c0 commit 8840baf

File tree

2 files changed

+97
-45
lines changed

2 files changed

+97
-45
lines changed

‎src/components/Link.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
text: string;
4+
isActive: boolean;
5+
}>();
6+
</script>
7+
8+
<template>
9+
<h4
10+
class="eyebrow py-2 cursor-pointer"
11+
:class="[isActive ? 'text-skin-link' : 'text-skin-text']"
12+
v-text="text"
13+
/>
14+
</template>

‎src/views/Space/Treasury.vue‎

Lines changed: 83 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
1-
<script setup>
2-
import { onMounted, computed } from 'vue';
1+
<script setup lang="ts">
2+
import { onMounted, computed, ref, Ref } from 'vue';
33
import { formatUnits } from '@ethersproject/units';
44
import { useBalances } from '@/composables/useBalances';
5+
import { useNfts } from '@/composables/useNfts';
56
import space from '@/helpers/space.json';
67
import { _n, shorten, explorerUrl } from '@/helpers/utils';
78
import { ETH_CONTRACT } from '@/helpers/constants';
9+
import type { Space } from '@/types';
810
9-
defineProps({ space: Object });
11+
defineProps<{ space: Space }>();
12+
13+
const page: Ref<'tokens' | 'nfts'> = ref('tokens');
1014
1115
const { loading, loaded, assets, loadBalances } = useBalances();
16+
const { loading: nftsLoading, loaded: nftsLoaded, nfts, loadNfts } = useNfts();
1217
1318
const totalQuote = computed(() =>
1419
assets.value.reduce((acc, asset) => {
@@ -25,7 +30,10 @@ const sortedAssets = computed(() =>
2530
})
2631
);
2732
28-
onMounted(() => loadBalances(space.wallet));
33+
onMounted(() => {
34+
loadBalances(space.wallet);
35+
loadNfts(space.wallet);
36+
});
2937
</script>
3038

3139
<template>
@@ -44,7 +52,7 @@ onMounted(() => loadBalances(space.wallet));
4452
</div>
4553
<div class="space-y-3">
4654
<div>
47-
<Label :label="'Treasury'" />
55+
<Label label="Treasury" />
4856
<a
4957
:href="explorerUrl('1', space.wallet)"
5058
target="_blank"
@@ -59,55 +67,85 @@ onMounted(() => loadBalances(space.wallet));
5967
</a>
6068
</div>
6169
<div>
62-
<Label :label="'Tokens'" />
63-
<UiLoading v-if="loading && !loaded" class="px-4 py-3 block" />
64-
<div
65-
v-for="(asset, i) in sortedAssets"
66-
:key="i"
67-
class="mx-4 py-3 border-b flex"
68-
>
69-
<div class="flex-auto flex items-center">
70-
<Stamp :id="asset.contract_address" type="token" :size="32" />
71-
<div class="flex flex-col ml-3 leading-[22px]">
72-
<h4
73-
class="text-skin-link"
74-
v-text="shorten(asset.contract_ticker_symbol, 12)"
75-
/>
76-
<div class="text-sm" v-text="shorten(asset.contract_name, 24)" />
77-
</div>
78-
</div>
70+
<div class="flex pl-4">
71+
<Link
72+
:is-active="page === 'tokens'"
73+
text="Tokens"
74+
class="pr-3"
75+
@click="page = 'tokens'"
76+
/>
77+
<Link :is-active="page === 'nfts'" text="NFTs" @click="page = 'nfts'" />
78+
</div>
79+
<div v-if="page === 'tokens'">
80+
<UiLoading v-if="loading && !loaded" class="px-4 py-3 block" />
7981
<div
80-
v-if="asset.quote_rate"
81-
class="flex-col items-end text-right leading-[22px] w-[180px] invisible md:visible"
82+
v-for="(asset, i) in sortedAssets"
83+
:key="i"
84+
class="mx-4 py-3 border-b flex"
8285
>
83-
<h4 class="text-skin-link" v-text="`$${_n(asset.quote_rate)}`" />
84-
<div v-if="asset.percent" class="text-sm">
85-
<div
86-
v-if="asset.percent > 0"
87-
class="text-green"
88-
v-text="`+${_n(asset.percent)}%`"
86+
<div class="flex-auto flex items-center">
87+
<Stamp :id="asset.contract_address" type="token" :size="32" />
88+
<div class="flex flex-col ml-3 leading-[22px]">
89+
<h4
90+
class="text-skin-link"
91+
v-text="
92+
_n(
93+
formatUnits(
94+
asset.balance || 0,
95+
asset.contract_decimals || 0
96+
)
97+
)
98+
"
99+
/>
100+
<div class="text-sm" v-text="`$${_n(asset.quote)}`" />
101+
</div>
102+
</div>
103+
<div
104+
v-if="asset.quote_rate"
105+
class="flex-col items-end text-right leading-[22px] w-[180px] invisible md:visible"
106+
>
107+
<h4 class="text-skin-link" v-text="`$${_n(asset.quote_rate)}`" />
108+
<div v-if="asset.percent" class="text-sm">
109+
<div
110+
v-if="asset.percent > 0"
111+
class="text-green"
112+
v-text="`+${_n(asset.percent)}%`"
113+
/>
114+
<div
115+
v-if="asset.percent < 0"
116+
class="text-red"
117+
v-text="`${_n(asset.percent)}%`"
118+
/>
119+
</div>
120+
</div>
121+
<div
122+
class="flex-col items-end text-right leading-[22px] w-auto md:w-[180px]"
123+
>
124+
<h4
125+
class="text-skin-link"
126+
v-text="
127+
_n(
128+
formatUnits(asset.balance || 0, asset.contract_decimals || 0)
129+
)
130+
"
89131
/>
90132
<div
91-
v-if="asset.percent < 0"
92-
class="text-red"
93-
v-text="`${_n(asset.percent)}%`"
133+
v-if="asset.quote"
134+
class="text-sm"
135+
v-text="`$${_n(asset.quote)}`"
94136
/>
95137
</div>
96138
</div>
139+
</div>
140+
<div v-else>
141+
<UiLoading v-if="nftsLoading && !nftsLoaded" class="px-4 py-3 block" />
97142
<div
98-
class="flex-col items-end text-right leading-[22px] w-auto md:w-[180px]"
143+
class="grid gap-2 grid-cols-3 md:grid-cols-4 lg:grid-cols-6 py-3 px-2"
99144
>
100-
<h4
101-
class="text-skin-link"
102-
v-text="
103-
_n(formatUnits(asset.balance || 0, asset.contract_decimals || 0))
104-
"
105-
/>
106-
<div
107-
v-if="asset.quote"
108-
class="text-sm"
109-
v-text="`$${_n(asset.quote)}`"
110-
/>
145+
<div v-for="(nft, i) in nfts" :key="i" class="block px-3 py-1 mb-3">
146+
<NftPreview :item="nft" class="aspect-square rounded w-full" />
147+
<div class="mt-2 text-sm truncate">{{ nft.displayTitle }}</div>
148+
</div>
111149
</div>
112150
</div>
113151
</div>

0 commit comments

Comments
 (0)