Instadapp/assembly
1
0
Fork 0
mirror of https://github.com/Instadapp/assembly.git synced 2024-07-29 22:37:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Georges KABBOUCHI 2021-08-01 14:22:17 +03:00
parent 80f4d2d9a1
commit 3381dc2c92
6 changed files with 82 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
components/CardAave.vue
View File

@ -1,5 +1,8 @@
<template> <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 items-center h-14">
<div class="flex mr-4 -space-x-3 overflow-hidden"> <div class="flex mr-4 -space-x-3 overflow-hidden">
<IconCurrency :currency="tokenKey" class="w-12 h-12" no-height /> <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 === 'no'" color="grey">No Position</Badge>
<Badge v-if="type === 'supply'" color="green">Supplied</Badge> <Badge v-if="type === 'supply'" color="green">Supplied</Badge>
<Badge v-if="type === 'borrow'" color="yellow">Borrowed</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
<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" 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 >L.L: {{ ll }}</Badge
> >
</div> </div>
@ -65,7 +79,7 @@
<div class="flex items-center justify-around mt-4"> <div class="flex items-center justify-around mt-4">
<div class="flex-col flex-1 text-center"> <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 <div
class="font-medium leading-none text-navi-pure-light dark:text-light text-16" class="font-medium leading-none text-navi-pure-light dark:text-light text-16"
> >
@ -83,7 +97,7 @@
</div> </div>
<Divider vertical class="h-6" /> <Divider vertical class="h-6" />
<div class="flex-col flex-1 text-center"> <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 <div
class="font-medium leading-none text-navi-pure-light dark:text-light text-16" class="font-medium leading-none text-navi-pure-light dark:text-light text-16"
> >
@ -105,47 +119,56 @@
<div <div
v-if="type === 'no'" v-if="type === 'no'"
class="flex items-center justify-around px-4 mt-6" class="flex items-center justify-around mt-6"
> >
<Button <button
class="mr-4 position-button" class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
color="ocean-blue"
@click="showSupply" @click="showSupply"
>Supply</Button
> >
<Button class="position-button" color="ocean-blue" @click="showBorrow" Supply
>Borrow</Button </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>
<div <div
v-if="type === 'supply'" v-if="type === 'supply'"
class="flex items-center justify-around px-4 mt-6" class="flex items-center justify-around mt-6"
> >
<Button <button
class="mr-4 position-button" class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
color="ocean-blue"
@click="showSupply" @click="showSupply"
>Supply</Button
> >
<Button class="position-button" color="ocean-blue" @click="showWithdraw" Supply
>Withdraw</Button </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>
<div <div
v-if="type === 'borrow'" v-if="type === 'borrow'"
class="flex items-center justify-around px-4 mt-6" class="flex items-center justify-around mt-6"
> >
<Button <button
class="mr-4 position-button" class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
color="ocean-blue"
@click="showBorrow" @click="showBorrow"
>Borrow</Button
> >
<Button class="position-button" color="ocean-blue" @click="showPayback" Borrow
>Payback</Button </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>
</div> </div>
</template> </template>

4
components/RewardsRateBadge.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<div <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.`" 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" /> <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> </div>
</template> </template>

12
components/SearchInput.vue
View File

@ -1,13 +1,12 @@
<template> <template>
<div class="relative flex items-center w-full"> <div class="relative flex items-center h-9 w-[200px]">
<input <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" type="text"
v-bind="$attrs" v-bind="$attrs"
:class="{ 'pl-9 py-1': dense, 'pl-12': !dense }"
v-on="inputListeners" 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> </div>
</template> </template>
@ -16,9 +15,6 @@ import { defineComponent, computed } from '@nuxtjs/composition-api'
import SVGSearch from '@/assets/icons/search.svg?inline' import SVGSearch from '@/assets/icons/search.svg?inline'
export default defineComponent({ export default defineComponent({
props: {
dense: { type: Boolean, default: false },
},
inheritAttrs: false, inheritAttrs: false,
components: { components: {
SVGSearch, SVGSearch,
@ -39,7 +35,7 @@ export default defineComponent({
</script> </script>
<style scoped> <style scoped>
.search-icon { .search-icon {
@apply text-grey-light; @apply text-grey-pure;
@apply transition; @apply transition;
@apply duration-150; @apply duration-150;
} }

2
composables/useStatus.ts
View File

@ -18,7 +18,7 @@ const textValues = [
{ minValue: 0, text: 'Safe' }, { minValue: 0, text: 'Safe' },
] ]
export function useStatus(statusLiquidationRatioRef, statusRef, liquidationRef) { export function useStatus(statusLiquidationRatioRef, statusRef = null , liquidationRef = null) {
const color = computed(() => { const color = computed(() => {
if (!isZero(statusRef) && !isZero(liquidationRef)) { if (!isZero(statusRef) && !isZero(liquidationRef)) {
if (gte(statusRef.value, '1')) return 'red-dark' if (gte(statusRef.value, '1')) return 'red-dark'

10
pages/mainnet/aave-v2.vue
View File

@ -18,7 +18,7 @@
<h2 class="text-primary-gray text-lg font-semibold">Overview</h2> <h2 class="text-primary-gray text-lg font-semibold">Overview</h2>
<div <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="shadow rounded-lg py-8 px-6 flex">
<div class="flex-1"> <div class="flex-1">
@ -114,20 +114,20 @@
<div class="mt-[60px]"> <div class="mt-[60px]">
<div <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> <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 <SearchInput
v-model.trim="search" v-model.trim="search"
dense dense
placeholder="Search position" placeholder="Search positions"
/> />
</div> </div>
</div> </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"> <div v-for="item in filteredPositions" :key="item.key">
<CardAave <CardAave

29
pages/polygon/aave-v2.vue
View File

@ -18,7 +18,7 @@
<h2 class="text-primary-gray text-lg font-semibold">Overview</h2> <h2 class="text-primary-gray text-lg font-semibold">Overview</h2>
<div <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="shadow rounded-lg py-8 px-6 flex">
<div class="flex-1"> <div class="flex-1">
@ -86,6 +86,7 @@
{{ formatPercent(status) }} - {{ formatPercent(status) }} -
{{ formatPercent(position.maxLiquidation) }} {{ formatPercent(position.maxLiquidation) }}
</h3> </h3>
<Badge class="w-18 xxl:w-23" :color="color">{{ text }}</Badge>
<p class="mt-4 text-primary-gray font-medium">D/C (%)</p> <p class="mt-4 text-primary-gray font-medium">D/C (%)</p>
</div> </div>
<div class="flex items-center"> <div class="flex items-center">
@ -114,19 +115,19 @@
<div class="mt-[60px]"> <div class="mt-[60px]">
<div <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> <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 <SearchInput
v-model.trim="search" v-model.trim="search"
dense dense
placeholder="Search position" placeholder="Search positions"
/> />
</div> </div>
</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"> <div v-for="item in filteredPositions" :key="item.key">
<CardAave <CardAave
:token-key="item.key" :token-key="item.key"
@ -153,12 +154,14 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api"; import { defineComponent, computed } from "@nuxtjs/composition-api";
// @ts-ignore // @ts-ignore
import BackIcon from "~/assets/icons/back.svg?inline"; import BackIcon from "~/assets/icons/back.svg?inline";
import { useAaveV2Position } from "~/composables/useAaveV2Position"; import { useAaveV2Position } from "~/composables/useAaveV2Position";
import { useFormatting } from "~/composables/useFormatting"; import { useFormatting } from "~/composables/useFormatting";
import { useSearchFilter } from "~/composables/useSearchFilter"; import { useSearchFilter } from "~/composables/useSearchFilter";
import { useStatus } from '~/composables/useStatus'
import { useBigNumber } from '~/composables/useBigNumber'
export default defineComponent({ export default defineComponent({
components: { components: {
@ -170,8 +173,16 @@ export default defineComponent({
displayPositions, displayPositions,
totalSupply, totalSupply,
totalBorrow, totalBorrow,
status status,
liquidation
} = useAaveV2Position(); } = useAaveV2Position();
const { div } = useBigNumber()
const statusLiquidationRatio = computed(() => div(status.value, liquidation.value).toFixed())
const { color, text } = useStatus(statusLiquidationRatio)
const { formatUsd, formatPercent } = useFormatting(); const { formatUsd, formatPercent } = useFormatting();
const { filtered: filteredPositions, search } = useSearchFilter( const { filtered: filteredPositions, search } = useSearchFilter(
@ -188,7 +199,9 @@ export default defineComponent({
totalBorrow, totalBorrow,
status, status,
formatUsd, formatUsd,
formatPercent formatPercent,
color,
text
}; };
} }
}); });