mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
wip
This commit is contained in:
Georges KABBOUCHI
parent
80f4d2d9a1
commit
3381dc2c92
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="flex-shrink-0 shadow bg-white relative flex flex-col flex-1 px-4 pt-4 pb-6 dark:bg-dark-500">
|
||||
<div
|
||||
class="flex-shrink-0 bg-white rounded-lg relative flex flex-col flex-1 px-4 pt-4 pb-6 dark:bg-dark-500"
|
||||
style="box-shadow: -1px -3px 10px rgba(12, 25, 91, 0.03), 2px 4px 12px rgba(12, 25, 91, 0.05)"
|
||||
>
|
||||
<div class="flex items-center h-14">
|
||||
<div class="flex mr-4 -space-x-3 overflow-hidden">
|
||||
<IconCurrency :currency="tokenKey" class="w-12 h-12" no-height />
|
||||
|
|
@ -55,8 +58,19 @@
|
|||
<Badge v-if="type === 'no'" color="grey">No Position</Badge>
|
||||
<Badge v-if="type === 'supply'" color="green">Supplied</Badge>
|
||||
<Badge v-if="type === 'borrow'" color="yellow">Borrowed</Badge>
|
||||
<Badge v-tooltip="'Collateral Factor is the power to borrow against a particular token. Eg:- if collateral factor of ETH is 0.75 that means for every $100 of ETH you can borrow $75 worth of other assets.'" color="blue">C.F: {{ cf }}</Badge>
|
||||
<Badge v-if="ll !== null" v-tooltip="'Liquidation Limit is the point where position is subject to liquidate. Eg:- if liquidation limit of ETH is 0.8 that means for every $100 of ETH if the debt crosses $80 position will get liquidate.'" color="blue"
|
||||
<Badge
|
||||
v-tooltip="
|
||||
'Collateral Factor is the power to borrow against a particular token. Eg:- if collateral factor of ETH is 0.75 that means for every $100 of ETH you can borrow $75 worth of other assets.'
|
||||
"
|
||||
color="blue"
|
||||
>C.F: {{ cf }}</Badge
|
||||
>
|
||||
<Badge
|
||||
v-if="ll !== null"
|
||||
v-tooltip="
|
||||
'Liquidation Limit is the point where position is subject to liquidate. Eg:- if liquidation limit of ETH is 0.8 that means for every $100 of ETH if the debt crosses $80 position will get liquidate.'
|
||||
"
|
||||
color="blue"
|
||||
>L.L: {{ ll }}</Badge
|
||||
>
|
||||
</div>
|
||||
|
|
@ -65,7 +79,7 @@
|
|||
|
||||
<div class="flex items-center justify-around mt-4">
|
||||
<div class="flex-col flex-1 text-center">
|
||||
<div class="flex items-center mb-1 justify-evenly">
|
||||
<div class="flex items-center mb-2 justify-evenly">
|
||||
<div
|
||||
class="font-medium leading-none text-navi-pure-light dark:text-light text-16"
|
||||
>
|
||||
|
|
@ -83,7 +97,7 @@
|
|||
</div>
|
||||
<Divider vertical class="h-6" />
|
||||
<div class="flex-col flex-1 text-center">
|
||||
<div class="flex items-center mb-1 justify-evenly">
|
||||
<div class="flex items-center mb-2 justify-evenly">
|
||||
<div
|
||||
class="font-medium leading-none text-navi-pure-light dark:text-light text-16"
|
||||
>
|
||||
|
|
@ -105,47 +119,56 @@
|
|||
|
||||
<div
|
||||
v-if="type === 'no'"
|
||||
class="flex items-center justify-around px-4 mt-6"
|
||||
class="flex items-center justify-around mt-6"
|
||||
>
|
||||
<Button
|
||||
class="mr-4 position-button"
|
||||
color="ocean-blue"
|
||||
<button
|
||||
class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
|
||||
@click="showSupply"
|
||||
>Supply</Button
|
||||
>
|
||||
<Button class="position-button" color="ocean-blue" @click="showBorrow"
|
||||
>Borrow</Button
|
||||
Supply
|
||||
</button>
|
||||
<button
|
||||
class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
|
||||
@click="showBorrow"
|
||||
>
|
||||
Borrow
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="type === 'supply'"
|
||||
class="flex items-center justify-around px-4 mt-6"
|
||||
class="flex items-center justify-around mt-6"
|
||||
>
|
||||
<Button
|
||||
class="mr-4 position-button"
|
||||
color="ocean-blue"
|
||||
<button
|
||||
class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
|
||||
@click="showSupply"
|
||||
>Supply</Button
|
||||
>
|
||||
<Button class="position-button" color="ocean-blue" @click="showWithdraw"
|
||||
>Withdraw</Button
|
||||
Supply
|
||||
</button>
|
||||
<button
|
||||
class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
|
||||
@click="showWithdraw"
|
||||
>
|
||||
Withdraw
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="type === 'borrow'"
|
||||
class="flex items-center justify-around px-4 mt-6"
|
||||
class="flex items-center justify-around mt-6"
|
||||
>
|
||||
<Button
|
||||
class="mr-4 position-button"
|
||||
color="ocean-blue"
|
||||
<button
|
||||
class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
|
||||
@click="showBorrow"
|
||||
>Borrow</Button
|
||||
>
|
||||
<Button class="position-button" color="ocean-blue" @click="showPayback"
|
||||
>Payback</Button
|
||||
Borrow
|
||||
</button>
|
||||
<button
|
||||
class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
|
||||
@click="showPayback"
|
||||
>
|
||||
Payback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div
|
||||
v-tooltip="`Managing on ${protocolName} gives you rewards in ${tokenName}. The APY represents how much of the rewards you would earn during one year.`"
|
||||
class="flex items-center px-1 py-1 border border-opacity-50 rounded-sm select-none border-grey-light"
|
||||
class="flex items-center px-2 py-1 border rounded-[4px] select-none border-grey-dark border-opacity-[0.15]"
|
||||
>
|
||||
<IconCurrency :currency="currency" no-height class="w-3 h-3 mr-1" />
|
||||
<div class="text-11">{{ computedRate }}</div>
|
||||
<div class="text-sm font-semibold">{{ computedRate }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<template>
|
||||
<div class="relative flex items-center w-full">
|
||||
<div class="relative flex items-center h-9 w-[200px]">
|
||||
<input
|
||||
class="w-full pr-4 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
|
||||
class="w-full pl-3 pr-8 rounded-[6px] border border-grey-dark border-opacity-[0.15]"
|
||||
type="text"
|
||||
v-bind="$attrs"
|
||||
:class="{ 'pl-9 py-1': dense, 'pl-12': !dense }"
|
||||
v-on="inputListeners"
|
||||
/>
|
||||
<SVGSearch class="absolute w-4 h-4 search-icon" :style="dense ? 'left:12px' : 'left:18px'" />
|
||||
<SVGSearch class="absolute w-4 h-4 search-icon right-4" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -16,9 +15,6 @@ import { defineComponent, computed } from '@nuxtjs/composition-api'
|
|||
import SVGSearch from '@/assets/icons/search.svg?inline'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
dense: { type: Boolean, default: false },
|
||||
},
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
SVGSearch,
|
||||
|
|
@ -39,7 +35,7 @@ export default defineComponent({
|
|||
</script>
|
||||
<style scoped>
|
||||
.search-icon {
|
||||
@apply text-grey-light;
|
||||
@apply text-grey-pure;
|
||||
@apply transition;
|
||||
@apply duration-150;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ const textValues = [
|
|||
{ minValue: 0, text: 'Safe' },
|
||||
]
|
||||
|
||||
export function useStatus(statusLiquidationRatioRef, statusRef, liquidationRef) {
|
||||
export function useStatus(statusLiquidationRatioRef, statusRef = null , liquidationRef = null) {
|
||||
const color = computed(() => {
|
||||
if (!isZero(statusRef) && !isZero(liquidationRef)) {
|
||||
if (gte(statusRef.value, '1')) return 'red-dark'
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<h2 class="text-primary-gray text-lg font-semibold">Overview</h2>
|
||||
|
||||
<div
|
||||
class="mt-6 grid w-full grid-cols-1 gap-4 sm:grid-cols-3 xl:gap-[18px]"
|
||||
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">
|
||||
|
|
@ -114,20 +114,20 @@
|
|||
|
||||
<div class="mt-[60px]">
|
||||
<div
|
||||
class="flex flex-col mt-6 sm:flex-row sm:items-center sm:justify-between xxl:mt-4"
|
||||
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 class="w-full mt-4 sm:mt-0 sm:w-40">
|
||||
<div class="mt-4 sm:mt-0 sm:mr-1">
|
||||
<SearchInput
|
||||
v-model.trim="search"
|
||||
dense
|
||||
placeholder="Search position"
|
||||
placeholder="Search positions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content"
|
||||
class="mt-3 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content px-1"
|
||||
>
|
||||
<div v-for="item in filteredPositions" :key="item.key">
|
||||
<CardAave
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<h2 class="text-primary-gray text-lg font-semibold">Overview</h2>
|
||||
|
||||
<div
|
||||
class="mt-6 grid w-full grid-cols-1 gap-4 sm:grid-cols-3 xl:gap-[18px]"
|
||||
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">
|
||||
|
|
@ -86,6 +86,7 @@
|
|||
{{ formatPercent(status) }} -
|
||||
{{ formatPercent(position.maxLiquidation) }}
|
||||
</h3>
|
||||
<Badge class="w-18 xxl:w-23" :color="color">{{ text }}</Badge>
|
||||
<p class="mt-4 text-primary-gray font-medium">D/C (%)</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
|
|
@ -114,19 +115,19 @@
|
|||
|
||||
<div class="mt-[60px]">
|
||||
<div
|
||||
class="flex flex-col mt-6 sm:flex-row sm:items-center sm:justify-between xxl:mt-4"
|
||||
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 class="w-full mt-4 sm:mt-0 sm:w-40">
|
||||
<div class="mt-4 sm:mt-0 sm:mr-1">
|
||||
<SearchInput
|
||||
v-model.trim="search"
|
||||
dense
|
||||
placeholder="Search position"
|
||||
placeholder="Search positions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content">
|
||||
<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">
|
||||
<div v-for="item in filteredPositions" :key="item.key">
|
||||
<CardAave
|
||||
:token-key="item.key"
|
||||
|
|
@ -153,12 +154,14 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { defineComponent, computed } from "@nuxtjs/composition-api";
|
||||
// @ts-ignore
|
||||
import BackIcon from "~/assets/icons/back.svg?inline";
|
||||
import { useAaveV2Position } from "~/composables/useAaveV2Position";
|
||||
import { useFormatting } from "~/composables/useFormatting";
|
||||
import { useSearchFilter } from "~/composables/useSearchFilter";
|
||||
import { useStatus } from '~/composables/useStatus'
|
||||
import { useBigNumber } from '~/composables/useBigNumber'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -170,8 +173,16 @@ export default defineComponent({
|
|||
displayPositions,
|
||||
totalSupply,
|
||||
totalBorrow,
|
||||
status
|
||||
status,
|
||||
liquidation
|
||||
} = useAaveV2Position();
|
||||
|
||||
const { div } = useBigNumber()
|
||||
|
||||
const statusLiquidationRatio = computed(() => div(status.value, liquidation.value).toFixed())
|
||||
|
||||
const { color, text } = useStatus(statusLiquidationRatio)
|
||||
|
||||
const { formatUsd, formatPercent } = useFormatting();
|
||||
|
||||
const { filtered: filteredPositions, search } = useSearchFilter(
|
||||
|
|
@ -188,7 +199,9 @@ export default defineComponent({
|
|||
totalBorrow,
|
||||
status,
|
||||
formatUsd,
|
||||
formatPercent
|
||||
formatPercent,
|
||||
color,
|
||||
text
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user