71 lines
2.5 KiB
Vue
71 lines
2.5 KiB
Vue
<script lang='ts' setup>
|
|
import { eyeOffOutline, eyeOutline } from "ionicons/icons";
|
|
|
|
const { t } = useI18n();
|
|
const walletStore = useWalletStore();
|
|
const { fundingBalances, totalAssetValue } = storeToRefs(walletStore);
|
|
const fundingBalanceVisible = useStorage("funding-balances-visible", true);
|
|
|
|
onMounted(() => {
|
|
walletStore.syncFundingBalances();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ion-page>
|
|
<ion-header class="ion-no-border">
|
|
<ion-toolbar class="ion-toolbar">
|
|
<ui-back-button slot="start" />
|
|
<ion-title>{{ t('wallet.funding.title') }}</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content :fullscreen="true">
|
|
<div class="flex flex-col gap-1 ion-padding border-b border-text-900 mb-2">
|
|
<div class="text-sm text-gray-500 flex items-center gap-2" @click="fundingBalanceVisible = !fundingBalanceVisible">
|
|
<div class="text-md">
|
|
{{ t('wallet.funding.totalAssets') }}
|
|
</div>
|
|
<ion-icon :icon="fundingBalanceVisible ? eyeOffOutline : eyeOutline" />
|
|
</div>
|
|
<div class="flex items-end gap-2">
|
|
<div class="text-2xl font-bold">
|
|
{{ fundingBalanceVisible ? totalAssetValue.fundingValueUsd : Array(totalAssetValue.fundingValueUsd.toString().length).fill("*").join("") }}
|
|
</div>
|
|
<div class="text-md font-bold">
|
|
USDT
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ion-padding-horizontal text-md font-semibold my-4">
|
|
{{ t('wallet.funding.assets') }}
|
|
</div>
|
|
|
|
<ion-list lines="none" class="space-y-5 mt-2!">
|
|
<ion-item v-for="asset, i in fundingBalances" :key="i" @click="$router.push(`/asset_record/${asset.assetCode}/funding`)">
|
|
<div class="flex items-center space-x-3 flex-1">
|
|
<Icon :icon="asset.asset.iconUrl || ''" 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-500 font-semibold">
|
|
{{ t('wallet.funding.total') }}: ${{ Number(asset.total).toFixed(2) }}
|
|
</div>
|
|
<div class="text-xs text-text-500 font-semibold">
|
|
{{ t('wallet.funding.frozen') }}: ${{ Number(asset.frozen).toFixed(2) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-fit font-bold">
|
|
${{ Number(asset.available).toFixed(2) }}
|
|
</div>
|
|
</ion-item>
|
|
</ion-list>
|
|
</ion-content>
|
|
</ion-page>
|
|
</template>
|
|
|
|
<style lang='css' scoped></style>
|