mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
224 lines
6.3 KiB
Vue
224 lines
6.3 KiB
Vue
|
<template>
|
||
|
<div>
|
||
|
<div>
|
||
|
<nuxt-link
|
||
|
to="/"
|
||
|
class="text-[#C0C5D7] text-lg font-semibold flex items-center"
|
||
|
>
|
||
|
<BackIcon class="w-4 h-4 mr-3" />
|
||
|
Apps
|
||
|
</nuxt-link>
|
||
|
</div>
|
||
|
|
||
|
<div class="mt-10">
|
||
|
<h1 class="text-primary-black text-2xl font-semibold">MakerDAO</h1>
|
||
|
</div>
|
||
|
|
||
|
<div class="mt-10">
|
||
|
<h2 class="text-primary-gray text-lg font-semibold">Overview</h2>
|
||
|
|
||
|
<div
|
||
|
class="px-1 mt-6 grid w-full grid-cols-1 gap-4 sm:grid-cols-3 xl:gap-[18px]"
|
||
|
>
|
||
|
<div class="shadow rounded-lg py-8 px-6 flex">
|
||
|
<div class="flex-1">
|
||
|
<h3 class="text-2xl text-primary-black font-medium">
|
||
|
# {{ vaultId }}
|
||
|
</h3>
|
||
|
<p class="mt-4 text-primary-gray font-medium">Vault ID</p>
|
||
|
</div>
|
||
|
<div class="flex items-center">
|
||
|
<IconBackground
|
||
|
name="cube"
|
||
|
class="bg-blue-pure text-blue-pure"
|
||
|
icon-class="h-7"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="shadow rounded-lg py-8 px-6 flex">
|
||
|
<div class="flex-1">
|
||
|
<h3 class="text-2xl text-primary-black font-medium">
|
||
|
{{ formatUsd(netValue) }}
|
||
|
</h3>
|
||
|
<p class="mt-4 text-primary-gray font-medium">Net Value</p>
|
||
|
</div>
|
||
|
<div class="flex items-center">
|
||
|
<SVGBalance />
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="shadow rounded-lg py-8 px-6 flex">
|
||
|
<div class="flex-1">
|
||
|
<h3 class="text-2xl text-primary-black font-medium">
|
||
|
{{ formatPercent(rate) }}
|
||
|
</h3>
|
||
|
<p class="mt-4 text-primary-gray font-medium">Borrow Rate</p>
|
||
|
</div>
|
||
|
<div class="flex items-center">
|
||
|
<SVGPercent class="h-12" />
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="shadow rounded-lg py-8 px-6 flex">
|
||
|
<div class="flex-1">
|
||
|
<div class="flex justify-between items-center">
|
||
|
<h3 class="text-2xl text-primary-black font-medium">
|
||
|
{{ formatPercent(status) }}
|
||
|
</h3>
|
||
|
<Badge class="w-18 xxl:w-23" :color="color">{{ text }}</Badge>
|
||
|
</div>
|
||
|
<div
|
||
|
class="mt-4 flex justify-between items-center text-primary-gray font-medium"
|
||
|
>
|
||
|
<div class="flex items-center whitespace-no-wrap">
|
||
|
<div>D/C (%)</div>
|
||
|
|
||
|
<div class="ml-2"><Info text="Debt/Collateral ratio" /></div>
|
||
|
</div>
|
||
|
<span>Max - {{ formatPercent(liquidation) }}</span>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="shadow rounded-lg py-8 px-6 flex">
|
||
|
<div class="flex-1">
|
||
|
<h3 class="text-2xl text-primary-black font-medium">
|
||
|
{{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} / {{ formatUsd(liquidationMaxPrice) }}
|
||
|
</h3>
|
||
|
<p class="mt-4 text-primary-gray font-medium">Liquidation (ETH)</p>
|
||
|
</div>
|
||
|
<div class="flex items-center">
|
||
|
<IconBackground name="receipt-tax" class="bg-light-brown-pure text-light-brown-pure" />
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="mt-[60px]">
|
||
|
<div
|
||
|
class="w-full flex flex-col mt-6 sm:flex-row sm:items-center sm:justify-between xl:mt-4"
|
||
|
>
|
||
|
<h2 class="text-primary-gray text-lg font-semibold">Your Positions</h2>
|
||
|
</div>
|
||
|
<div
|
||
|
class="mt-3 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content px-1"
|
||
|
>
|
||
|
<CardMakerdao
|
||
|
:amount="collateral"
|
||
|
:amount-usd="collateralUsd"
|
||
|
position-type="supply"
|
||
|
:token-key="tokenKey"
|
||
|
:vault-token-type="vaultTokenType"
|
||
|
:supply-or-borrow="showSupply"
|
||
|
:withdraw-or-payback="showWithdraw"
|
||
|
:price-in-usd="liquidationMaxPrice"
|
||
|
/>
|
||
|
|
||
|
<CardMakerdao
|
||
|
:amount="debt"
|
||
|
:amount-usd="debt"
|
||
|
position-type="borrow"
|
||
|
token-key="dai"
|
||
|
:vault-token-type="vaultTokenType"
|
||
|
:supply-or-borrow="showBorrow"
|
||
|
:withdraw-or-payback="showPayback"
|
||
|
price-in-usd="1"
|
||
|
/>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script lang="ts">
|
||
|
import { computed, defineComponent } from "@nuxtjs/composition-api";
|
||
|
import BackIcon from "~/assets/icons/back.svg?inline";
|
||
|
import SVGIncoming from "@/assets/img/icons/incoming.svg?inline";
|
||
|
import SVGBalance from "@/assets/img/icons/balance.svg?inline";
|
||
|
import SVGEarnings from "@/assets/img/icons/earnings.svg?inline";
|
||
|
import SVGArrowRight from "@/assets/img/icons/arrow-right.svg?inline";
|
||
|
import SVGPercent from "@/assets/img/icons/percent.svg?inline";
|
||
|
import CardMakerdao from "~/components/protocols/CardMakerdao.vue";
|
||
|
import { useBigNumber } from "~/composables/useBigNumber";
|
||
|
import { useFormatting } from "~/composables/useFormatting";
|
||
|
import { useMakerdaoPosition } from "~/composables/useMakerdaoPosition";
|
||
|
import { useStatus } from "~/composables/useStatus";
|
||
|
|
||
|
export default defineComponent({
|
||
|
components: {
|
||
|
BackIcon,
|
||
|
CardMakerdao,
|
||
|
SVGIncoming,
|
||
|
SVGBalance,
|
||
|
SVGEarnings,
|
||
|
SVGArrowRight,
|
||
|
SVGPercent
|
||
|
},
|
||
|
setup() {
|
||
|
const { div } = useBigNumber();
|
||
|
|
||
|
const { formatUsd, formatUsdMax, formatPercent, formatDecimal } = useFormatting();
|
||
|
|
||
|
const {
|
||
|
status,
|
||
|
vaultTokenType,
|
||
|
collateral,
|
||
|
collateralUsd,
|
||
|
vaultId,
|
||
|
liquidation,
|
||
|
tokenKey,
|
||
|
symbol,
|
||
|
rate,
|
||
|
netValue,
|
||
|
liquidationPrice,
|
||
|
liquidationMaxPrice,
|
||
|
debt,
|
||
|
minDebt,
|
||
|
debtCeilingReached
|
||
|
} = useMakerdaoPosition();
|
||
|
|
||
|
const statusLiquidationRatio = computed(() =>
|
||
|
div(status.value, liquidation.value).toFixed()
|
||
|
);
|
||
|
|
||
|
const { color, text } = useStatus(statusLiquidationRatio);
|
||
|
|
||
|
function showWithdraw() {}
|
||
|
|
||
|
function showPayback() {}
|
||
|
|
||
|
function showBorrow() {}
|
||
|
|
||
|
function showSupply() {}
|
||
|
|
||
|
return {
|
||
|
formatUsd,
|
||
|
formatUsdMax,
|
||
|
formatPercent,
|
||
|
formatDecimal,
|
||
|
color,
|
||
|
text,
|
||
|
vaultTokenType,
|
||
|
collateral,
|
||
|
collateralUsd,
|
||
|
vaultId,
|
||
|
liquidation,
|
||
|
tokenKey,
|
||
|
netValue,
|
||
|
rate,
|
||
|
symbol,
|
||
|
status,
|
||
|
liquidationPrice,
|
||
|
liquidationMaxPrice,
|
||
|
showWithdraw,
|
||
|
showPayback,
|
||
|
showBorrow,
|
||
|
showSupply,
|
||
|
debt,
|
||
|
minDebt,
|
||
|
debtCeilingReached
|
||
|
};
|
||
|
}
|
||
|
});
|
||
|
</script>
|