diff --git a/app.vue b/app.vue index e971a69..fc62424 100644 --- a/app.vue +++ b/app.vue @@ -3,7 +3,10 @@ class="grid grid-rows-[max-content_1fr_max-content] grid-cols-[1fr] w-full justify-items-center" >
- +
@@ -41,9 +45,12 @@ import dayjs from "dayjs" import { footerSections } from "./footerSections" -const { data, refresh } = await useFetch("/api/staking") +const { data: staking, refresh: refreshStaking } = + await useFetch("/api/staking") +const { data: supply, refresh: refreshSupply } = await useFetch("/api/supply") -useIntervalFn(refresh, 10000) +useIntervalFn(refreshStaking, 10000) +useIntervalFn(refreshSupply, 10000) function epochToTimestamp(genesisDate, epoch) { const secondsSinceGenesis = epoch * 45 @@ -53,7 +60,7 @@ function epochToTimestamp(genesisDate, epoch) { } const visibleStakers = computed(() => { - return data.value.map((stake) => { + return staking.value.map((stake) => { const validator = stake.key.validator const withdrawer = stake.key.withdrawer const amount = stake.value.coins @@ -78,6 +85,10 @@ const totalStaked = computed(() => { : 0 }) +const circulatingSupply = computed(() => { + return parseInt(supply.value) +}) + // const visibleStakers = ref(mockStakers); const loading = ref(false) diff --git a/assets/svg/arrow-down.svg b/assets/svg/arrow-down.svg new file mode 100644 index 0000000..c9d4d2a --- /dev/null +++ b/assets/svg/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/arrow-up.svg b/assets/svg/arrow-up.svg new file mode 100644 index 0000000..25502ab --- /dev/null +++ b/assets/svg/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/logo.svg b/assets/svg/logo.svg index 10364de..6f90795 100644 --- a/assets/svg/logo.svg +++ b/assets/svg/logo.svg @@ -1,5 +1,29 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/components/LeaderBoard.vue b/components/LeaderBoard.vue index 7af78f4..5f32ba8 100644 --- a/components/LeaderBoard.vue +++ b/components/LeaderBoard.vue @@ -8,23 +8,55 @@ >
- Rank - Address - Staked Amount - Timestamp + + Rank + + + + Withdrawer + + + + Staked Amount + +
Rank - {{ index + 1 }} + {{ staker.rank }} - Address + Withdrawer @@ -37,16 +69,10 @@ Amount {{ formatNumber(nanoWitToWit(staker.amount).toFixed()) }} $WIT - Timestamp - - {{ formatDate(staker.timestamp) }} -
@@ -55,32 +81,66 @@ class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-wit-blue-500" />
- +
+ +
-