From 3381dc2c922d35fd8cbf0712b67923d3d2d7dc14 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sun, 1 Aug 2021 14:22:17 +0300
Subject: [PATCH] wip

---
 components/CardAave.vue         | 75 +++++++++++++++++++++------------
 components/RewardsRateBadge.vue |  4 +-
 components/SearchInput.vue      | 12 ++----
 composables/useStatus.ts        |  2 +-
 pages/mainnet/aave-v2.vue       | 10 ++---
 pages/polygon/aave-v2.vue       | 29 +++++++++----
 6 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/components/CardAave.vue b/components/CardAave.vue
index bec393d..20a400c 100644
--- a/components/CardAave.vue
+++ b/components/CardAave.vue
@@ -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>
diff --git a/components/RewardsRateBadge.vue b/components/RewardsRateBadge.vue
index 90445bf..aea9ab1 100644
--- a/components/RewardsRateBadge.vue
+++ b/components/RewardsRateBadge.vue
@@ -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>
 
diff --git a/components/SearchInput.vue b/components/SearchInput.vue
index 2b00831..ddc287e 100644
--- a/components/SearchInput.vue
+++ b/components/SearchInput.vue
@@ -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;
 }
diff --git a/composables/useStatus.ts b/composables/useStatus.ts
index 2b145a9..bf6c68b 100644
--- a/composables/useStatus.ts
+++ b/composables/useStatus.ts
@@ -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'
diff --git a/pages/mainnet/aave-v2.vue b/pages/mainnet/aave-v2.vue
index 54e914a..32755ea 100644
--- a/pages/mainnet/aave-v2.vue
+++ b/pages/mainnet/aave-v2.vue
@@ -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
diff --git a/pages/polygon/aave-v2.vue b/pages/polygon/aave-v2.vue
index 4ea3ab8..e784c7e 100644
--- a/pages/polygon/aave-v2.vue
+++ b/pages/polygon/aave-v2.vue
@@ -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
     };
   }
 });