assembly/pages/mainnet/maker.vue

284 lines
8.3 KiB
Vue
Raw Normal View History

2021-08-08 11:34:44 +00:00
<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>
2021-08-10 16:11:15 +00:00
<div class="mt-10 flex items-center">
2021-08-13 21:15:46 +00:00
<div class="flex items-center">
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
>
<div
class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
>
<MakerDAOIcon Icon class="w-10 h-10 text-white" />
</div>
</div>
<h1 class="ml-4 text-primary-black text-2xl font-semibold">MakerDAO</h1>
</div>
2021-08-10 16:11:15 +00:00
2021-08-13 21:15:46 +00:00
<dropdown-makerdao class="ml-auto" />
2021-08-08 11:34:44 +00:00
</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">
2021-08-10 14:17:20 +00:00
{{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} /
{{ formatUsd(liquidationMaxPrice) }}
2021-08-08 11:34:44 +00:00
</h3>
<p class="mt-4 text-primary-gray font-medium">Liquidation (ETH)</p>
</div>
<div class="flex items-center">
2021-08-10 14:17:20 +00:00
<IconBackground
name="receipt-tax"
class="bg-light-brown-pure text-light-brown-pure"
/>
2021-08-08 11:34:44 +00:00
</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">
2021-08-10 14:17:20 +00:00
import { computed, defineComponent, useRouter } from "@nuxtjs/composition-api";
2021-08-08 11:34:44 +00:00
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";
2021-08-13 20:58:50 +00:00
import { useMakerdaoPosition } from "~/composables/protocols/useMakerdaoPosition";
2021-08-08 11:34:44 +00:00
import { useStatus } from "~/composables/useStatus";
2021-08-10 14:17:20 +00:00
import { useNotification } from "~/composables/useNotification";
2021-08-10 16:11:15 +00:00
import DropdownMakerdao from "~/components/protocols/DropdownMakerdao.vue";
2021-08-13 21:15:46 +00:00
import MakerDAOIcon from '~/assets/icons/makerdao.svg?inline'
2021-08-08 11:34:44 +00:00
export default defineComponent({
components: {
BackIcon,
CardMakerdao,
SVGIncoming,
SVGBalance,
SVGEarnings,
SVGArrowRight,
2021-08-10 16:11:15 +00:00
SVGPercent,
2021-08-13 21:15:46 +00:00
DropdownMakerdao,
MakerDAOIcon,
2021-08-08 11:34:44 +00:00
},
setup() {
2021-08-10 14:17:20 +00:00
const router = useRouter();
2021-08-08 11:34:44 +00:00
2021-08-10 14:17:20 +00:00
const { div, isZero, gt, lt } = useBigNumber();
const {
formatUsd,
formatUsdMax,
formatPercent,
formatDecimal
} = useFormatting();
const { showWarning } = useNotification();
2021-08-08 11:34:44 +00:00
const {
status,
2021-08-10 14:17:20 +00:00
vaults,
2021-08-08 11:34:44 +00:00
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);
2021-08-10 14:17:20 +00:00
function showSupply() {
if (gt(debt.value, "0") && lt(debt.value, minDebt.value)) {
// select("depositAndBorrow");
} else if (vaults.value.length === 0) {
router.push({ hash: "collateral" });
} else {
router.push({ hash: "supply" });
}
}
function showWithdraw() {
if (isZero(collateral.value)) {
showWarning("MakerDAO", "No collateral supplied!!");
} else if (gt(debt.value, "0") && lt(debt.value, minDebt.value)) {
// select("paybackAndWithdraw");
} else {
router.push({ hash: "withdraw" });
}
}
2021-08-08 11:34:44 +00:00
2021-08-10 14:17:20 +00:00
function showPayback() {
if (isZero(collateral.value)) {
showWarning("MakerDAO", "No collateral supplied!!");
} else {
router.push({ hash: "payback?tokenKey=dai" });
}
}
2021-08-08 11:34:44 +00:00
2021-08-10 14:17:20 +00:00
function showBorrow() {
if (isZero(collateral.value)) {
showWarning("MakerDAO", "Deposit collateral before borrowing!!");
} else {
router.push({ hash: "borrow?tokenKey=dai" });
}
}
2021-08-08 11:34:44 +00:00
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>