From 14cb6b7bc2a77aa94eed76ea8f4c38f9c4195187 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sun, 1 Aug 2021 20:13:24 +0300
Subject: [PATCH] fixes

---
 layouts/default.vue       | 13 ++-------
 pages/mainnet/aave-v2.vue | 61 +++++++++++++++++++++------------------
 pages/polygon/aave-v2.vue | 58 +++++++++++++++++--------------------
 3 files changed, 61 insertions(+), 71 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index e52be33..9e4d0da 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="min-h-screen overflow-hidden font-sans antialiased text-primary-black"
+    class="min-h-screen relative overflow-hidden font-sans antialiased text-primary-black"
   >
     <Navbar />
     <div class="max-w-6xl mx-auto py-12 overflow-x-hidden ">
@@ -11,7 +11,7 @@
 
     <Backdrop :show="isBackdropShown" @click="closeBackdrop" />
 
-    <SidebarContext class="grid-sidebar-context" />
+    <SidebarContext />
 
     <Modal />
 
@@ -97,13 +97,4 @@ export default defineComponent({
     --height-navbar: 82px;
   }
 }
-
-.grid-sidebar-context {
-  grid-row-start: navbar;
-  grid-row-end: main;
-
-  @screen xl {
-    grid-area: sidebar-context;
-  }
-}
 </style>
\ No newline at end of file
diff --git a/pages/mainnet/aave-v2.vue b/pages/mainnet/aave-v2.vue
index 32755ea..fbbb9ca 100644
--- a/pages/mainnet/aave-v2.vue
+++ b/pages/mainnet/aave-v2.vue
@@ -82,31 +82,22 @@
 
         <div class="shadow rounded-lg py-8 px-6 flex">
           <div class="flex-1">
-            <h3 class="text-2xl text-primary-black font-medium">
-              {{ formatPercent(status) }} -
-              {{ formatPercent(position.maxLiquidation) }}
-            </h3>
-            <p class="mt-4 text-primary-gray font-medium">D/C (%)</p>
-          </div>
-          <div class="flex items-center">
-            <svg
-              width="27"
-              height="29"
-              viewBox="0 0 27 29"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M1.34917 12C0.603705 12 -7.62939e-06 12.6037 -7.62939e-06 13.3492V26.8498C-7.62939e-06 27.5953 0.603705 28.199 1.34917 28.199H25.6496C26.395 28.199 27 27.5953 27 26.8498V13.3492C27 12.6037 26.395 12 25.6496 12H1.34917ZM3.93109 14.6996H23.0676C23.1684 14.9836 23.3312 15.2415 23.5442 15.4545C23.7573 15.6675 24.0152 15.8304 24.2991 15.9311V24.2679C24.0154 24.3688 23.7578 24.5317 23.5449 24.7447C23.3321 24.9577 23.1695 25.2156 23.0689 25.4994H3.93109C3.83052 25.2153 3.66775 24.9574 3.45469 24.7443C3.24163 24.5312 2.98365 24.3685 2.69961 24.2679V15.9311C2.98365 15.8305 3.24163 15.6678 3.45469 15.4547C3.66775 15.2416 3.83052 14.9837 3.93109 14.6996ZM13.4994 16.0501C12.4252 16.0501 11.3951 16.4768 10.6355 17.2363C9.876 17.9958 9.4493 19.026 9.4493 20.1001C9.4493 21.1743 9.876 22.2044 10.6355 22.964C11.3951 23.7235 12.4252 24.1502 13.4994 24.1502C14.5735 24.1502 15.6037 23.7235 16.3632 22.964C17.1227 22.2044 17.5494 21.1743 17.5494 20.1001C17.5494 19.026 17.1227 17.9958 16.3632 17.2363C15.6037 16.4768 14.5735 16.0501 13.4994 16.0501ZM6.74968 18.7497C6.39185 18.7497 6.04868 18.8918 5.79566 19.1448C5.54264 19.3979 5.4005 19.741 5.4005 20.0989C5.4005 20.4567 5.54264 20.7999 5.79566 21.0529C6.04868 21.3059 6.39185 21.448 6.74968 21.448C7.1075 21.448 7.45067 21.3059 7.70369 21.0529C7.95671 20.7999 8.09886 20.4567 8.09886 20.0989C8.09886 19.741 7.95671 19.3979 7.70369 19.1448C7.45067 18.8918 7.1075 18.7497 6.74968 18.7497ZM20.2491 18.7497C19.8911 18.7497 19.5477 18.8919 19.2946 19.145C19.0415 19.3982 18.8992 19.7415 18.8992 20.0995C18.8992 20.4575 19.0415 20.8008 19.2946 21.054C19.5477 21.3071 19.8911 21.4493 20.2491 21.4493C20.607 21.4493 20.9504 21.3071 21.2035 21.054C21.4566 20.8008 21.5989 20.4575 21.5989 20.0995C21.5989 19.7415 21.4566 19.3982 21.2035 19.145C20.9504 18.8919 20.607 18.7497 20.2491 18.7497Z"
-                fill="#209B9F"
-              />
-              <path
-                d="M9.26922 5.85639L12.8282 9.41665C12.9101 9.50186 13.0083 9.56957 13.1171 9.61569C13.2259 9.66181 13.3429 9.68538 13.461 9.68497C13.5793 9.68521 13.6963 9.66144 13.8051 9.61511C13.9139 9.56877 14.0121 9.50082 14.0939 9.41538L17.6529 5.85639C17.7382 5.77424 17.8061 5.67566 17.8524 5.5666C17.8986 5.45754 17.9224 5.34024 17.9221 5.22176C17.9219 5.10329 17.8977 4.98609 17.851 4.87721C17.8043 4.76833 17.736 4.67003 17.6503 4.58821C17.4829 4.42155 17.2575 4.32628 17.0213 4.32243C16.7834 4.32597 16.5564 4.42224 16.3885 4.59075L14.3634 6.61578V1.90125C14.3651 1.78233 14.343 1.66428 14.2982 1.55409C14.2534 1.44391 14.187 1.34383 14.1029 1.25979C14.0187 1.17575 13.9185 1.10946 13.8083 1.06486C13.698 1.02025 13.58 0.998235 13.461 1.00011C13.3422 0.998406 13.2243 1.02055 13.1142 1.06523C13.0041 1.10992 12.9041 1.17623 12.82 1.26025C12.736 1.34427 12.6697 1.44429 12.625 1.55439C12.5803 1.66449 12.5582 1.78244 12.5599 1.90125V6.61704L10.5349 4.59201C10.3672 4.42305 10.1401 4.3263 9.90204 4.32243C9.66419 4.32597 9.43713 4.42224 9.26922 4.59075C9.18408 4.67269 9.11636 4.77098 9.0701 4.87971C9.02384 4.98845 9 5.1054 9 5.22357C9 5.34173 9.02384 5.45869 9.0701 5.56742C9.11636 5.67616 9.18408 5.77444 9.26922 5.85639Z"
-                fill="#209B9F"
-                stroke="#209B9F"
-                stroke-width="0.3"
-              />
-            </svg>
+            <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(position.maxLiquidation) }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -155,12 +146,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: {
@@ -172,8 +165,18 @@ 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(
@@ -190,7 +193,9 @@ export default defineComponent({
       totalBorrow,
       status,
       formatUsd,
-      formatPercent
+      formatPercent,
+      color,
+      text
     };
   }
 });
diff --git a/pages/polygon/aave-v2.vue b/pages/polygon/aave-v2.vue
index e784c7e..fbbb9ca 100644
--- a/pages/polygon/aave-v2.vue
+++ b/pages/polygon/aave-v2.vue
@@ -82,32 +82,22 @@
 
         <div class="shadow rounded-lg py-8 px-6 flex">
           <div class="flex-1">
-            <h3 class="text-2xl text-primary-black font-medium">
-              {{ 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">
-            <svg
-              width="27"
-              height="29"
-              viewBox="0 0 27 29"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M1.34917 12C0.603705 12 -7.62939e-06 12.6037 -7.62939e-06 13.3492V26.8498C-7.62939e-06 27.5953 0.603705 28.199 1.34917 28.199H25.6496C26.395 28.199 27 27.5953 27 26.8498V13.3492C27 12.6037 26.395 12 25.6496 12H1.34917ZM3.93109 14.6996H23.0676C23.1684 14.9836 23.3312 15.2415 23.5442 15.4545C23.7573 15.6675 24.0152 15.8304 24.2991 15.9311V24.2679C24.0154 24.3688 23.7578 24.5317 23.5449 24.7447C23.3321 24.9577 23.1695 25.2156 23.0689 25.4994H3.93109C3.83052 25.2153 3.66775 24.9574 3.45469 24.7443C3.24163 24.5312 2.98365 24.3685 2.69961 24.2679V15.9311C2.98365 15.8305 3.24163 15.6678 3.45469 15.4547C3.66775 15.2416 3.83052 14.9837 3.93109 14.6996ZM13.4994 16.0501C12.4252 16.0501 11.3951 16.4768 10.6355 17.2363C9.876 17.9958 9.4493 19.026 9.4493 20.1001C9.4493 21.1743 9.876 22.2044 10.6355 22.964C11.3951 23.7235 12.4252 24.1502 13.4994 24.1502C14.5735 24.1502 15.6037 23.7235 16.3632 22.964C17.1227 22.2044 17.5494 21.1743 17.5494 20.1001C17.5494 19.026 17.1227 17.9958 16.3632 17.2363C15.6037 16.4768 14.5735 16.0501 13.4994 16.0501ZM6.74968 18.7497C6.39185 18.7497 6.04868 18.8918 5.79566 19.1448C5.54264 19.3979 5.4005 19.741 5.4005 20.0989C5.4005 20.4567 5.54264 20.7999 5.79566 21.0529C6.04868 21.3059 6.39185 21.448 6.74968 21.448C7.1075 21.448 7.45067 21.3059 7.70369 21.0529C7.95671 20.7999 8.09886 20.4567 8.09886 20.0989C8.09886 19.741 7.95671 19.3979 7.70369 19.1448C7.45067 18.8918 7.1075 18.7497 6.74968 18.7497ZM20.2491 18.7497C19.8911 18.7497 19.5477 18.8919 19.2946 19.145C19.0415 19.3982 18.8992 19.7415 18.8992 20.0995C18.8992 20.4575 19.0415 20.8008 19.2946 21.054C19.5477 21.3071 19.8911 21.4493 20.2491 21.4493C20.607 21.4493 20.9504 21.3071 21.2035 21.054C21.4566 20.8008 21.5989 20.4575 21.5989 20.0995C21.5989 19.7415 21.4566 19.3982 21.2035 19.145C20.9504 18.8919 20.607 18.7497 20.2491 18.7497Z"
-                fill="#209B9F"
-              />
-              <path
-                d="M9.26922 5.85639L12.8282 9.41665C12.9101 9.50186 13.0083 9.56957 13.1171 9.61569C13.2259 9.66181 13.3429 9.68538 13.461 9.68497C13.5793 9.68521 13.6963 9.66144 13.8051 9.61511C13.9139 9.56877 14.0121 9.50082 14.0939 9.41538L17.6529 5.85639C17.7382 5.77424 17.8061 5.67566 17.8524 5.5666C17.8986 5.45754 17.9224 5.34024 17.9221 5.22176C17.9219 5.10329 17.8977 4.98609 17.851 4.87721C17.8043 4.76833 17.736 4.67003 17.6503 4.58821C17.4829 4.42155 17.2575 4.32628 17.0213 4.32243C16.7834 4.32597 16.5564 4.42224 16.3885 4.59075L14.3634 6.61578V1.90125C14.3651 1.78233 14.343 1.66428 14.2982 1.55409C14.2534 1.44391 14.187 1.34383 14.1029 1.25979C14.0187 1.17575 13.9185 1.10946 13.8083 1.06486C13.698 1.02025 13.58 0.998235 13.461 1.00011C13.3422 0.998406 13.2243 1.02055 13.1142 1.06523C13.0041 1.10992 12.9041 1.17623 12.82 1.26025C12.736 1.34427 12.6697 1.44429 12.625 1.55439C12.5803 1.66449 12.5582 1.78244 12.5599 1.90125V6.61704L10.5349 4.59201C10.3672 4.42305 10.1401 4.3263 9.90204 4.32243C9.66419 4.32597 9.43713 4.42224 9.26922 4.59075C9.18408 4.67269 9.11636 4.77098 9.0701 4.87971C9.02384 4.98845 9 5.1054 9 5.22357C9 5.34173 9.02384 5.45869 9.0701 5.56742C9.11636 5.67616 9.18408 5.77444 9.26922 5.85639Z"
-                fill="#209B9F"
-                stroke="#209B9F"
-                stroke-width="0.3"
-              />
-            </svg>
+            <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(position.maxLiquidation) }}</span>
+            </div>
           </div>
         </div>
       </div>
@@ -127,7 +117,9 @@
           />
         </div>
       </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">
+      <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"
@@ -160,8 +152,8 @@ 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'
+import { useStatus } from "~/composables/useStatus";
+import { useBigNumber } from "~/composables/useBigNumber";
 
 export default defineComponent({
   components: {
@@ -177,11 +169,13 @@ export default defineComponent({
       liquidation
     } = useAaveV2Position();
 
- const { div } = useBigNumber()
+    const { div } = useBigNumber();
 
-    const statusLiquidationRatio = computed(() => div(status.value, liquidation.value).toFixed())
+    const statusLiquidationRatio = computed(() =>
+      div(status.value, liquidation.value).toFixed()
+    );
 
-    const { color, text } = useStatus(statusLiquidationRatio)
+    const { color, text } = useStatus(statusLiquidationRatio);
 
     const { formatUsd, formatPercent } = useFormatting();