39 lines
1.0 KiB
Vue
39 lines
1.0 KiB
Vue
<script lang='ts' setup>
|
|
import { getCryptoIcon } from "@/config/crypto";
|
|
|
|
const walletStore = useWalletStore();
|
|
const { balances } = storeToRefs(walletStore);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ion-label class="text-xs font-medium text-text-300">
|
|
Asset
|
|
</ion-label>
|
|
<ion-list lines="none" class="space-y-5 mt-2!">
|
|
<ion-item v-for="asset, i in balances" :key="i" class="">
|
|
<div class="flex items-center space-x-3 flex-1">
|
|
<component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
|
|
<div class="space-y-1">
|
|
<div class="font-medium text-md">
|
|
{{ asset.assetCode }}
|
|
</div>
|
|
<div class="text-xs text-text-700 font-bold">
|
|
Total: ${{ asset.total }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-fit font-bold">
|
|
${{ Number(asset.available) }}
|
|
</div>
|
|
</ion-item>
|
|
</ion-list>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
ion-item::part(native) {
|
|
--padding-start: 0;
|
|
}
|
|
</style>
|