150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<script lang='ts' setup>
|
|
import type { TradableData } from "@/api/types";
|
|
import dayjs from "dayjs";
|
|
import { client, safeClient } from "@/api";
|
|
|
|
const props = defineProps<{
|
|
data: TradableData | null;
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
const tradingViewInst = useTemplateRef<HTMLDivElement>("tradingViewInst");
|
|
const { data: tickerData } = safeClient(client.api.market_data.pairs.ticker.get({
|
|
query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
|
|
}));
|
|
|
|
useTradingView(tradingViewInst, {
|
|
type: "Area",
|
|
data: async () => {
|
|
const { data } = safeClient(client.api.market_cap.history.get({
|
|
query: { symbol: props.data?.asset?.tradingPairsAsBase[0].symbol || "" },
|
|
}));
|
|
return data.value?.map(item => ({
|
|
time: dayjs(item.ts).format("YYYY-MM-DD"),
|
|
value: item.marketCapUsd,
|
|
})) || [];
|
|
},
|
|
weightChartOptions: {
|
|
height: 150,
|
|
rightPriceScale: {
|
|
visible: false,
|
|
},
|
|
leftPriceScale: {
|
|
visible: false,
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mt-2">
|
|
<div ref="tradingViewInst" />
|
|
|
|
<div class="mt-5">
|
|
<div class="font-semibold">
|
|
{{ t("tradeTokenized.base.tokenInfo") }}
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.tokenSymbol") }}
|
|
</div>
|
|
<div class="value">
|
|
{{ data?.assetCode }}
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.relatedAsset") }}
|
|
</div>
|
|
<div class="value">
|
|
{{ data?.product?.name }}
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.totalSupply") }}
|
|
</div>
|
|
<div class="value">
|
|
{{ Number(data?.totalSupply).toString() }}
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.marketCap") }}
|
|
</div>
|
|
<div class="value">
|
|
${{ Number(data?.product?.estimatedValue).toString() }}
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.volume24h") }}
|
|
</div>
|
|
<div class="value">
|
|
$500000
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.createTime") }}
|
|
</div>
|
|
<div class="value">
|
|
{{ useDateFormat(data?.createdAt, 'YYYY/MM/DD') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 space-y-4">
|
|
<div class="font-semibold">
|
|
{{ t("tradeTokenized.base.marketData") }}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Icon icon="hugeicons:trade-up" class="text-success" />
|
|
<div class="text-sm">
|
|
{{ t("tradeTokenized.base.priceChange") }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.hours24") }}
|
|
</div>
|
|
<div class="value">
|
|
{{ tickerData?.changePercent || '-' }}%
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.days7") }}
|
|
</div>
|
|
<div class="value">
|
|
-%
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="label">
|
|
{{ t("tradeTokenized.base.days30") }}
|
|
</div>
|
|
<div class="value">
|
|
-%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='css' scoped>
|
|
@reference "tailwindcss";
|
|
|
|
.label {
|
|
@apply text-(--ion-text-color-step-300) mb-1 text-sm;
|
|
}
|
|
.item {
|
|
@apply flex justify-between items-center mt-3;
|
|
}
|
|
.value {
|
|
@apply text-sm font-semibold;
|
|
}
|
|
</style>
|