From a54be3569cb2b699ef8f64b654a906b92616f1c4 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Tue, 27 Jul 2021 01:19:20 +0300
Subject: [PATCH] wip

---
 components/AccountSwitcher.vue                |   3 +
 components/CustomTransition.vue               |  30 +++
 components/Spinner.vue                        |  14 ++
 components/ValidationErrors.vue               |  32 +++
 components/common/ProgressBar.vue             |  37 ++++
 components/common/input/ButtonCTA.vue         |  41 ++++
 components/common/input/ToggleButton.vue      |  60 ++++++
 .../sidebar/context/SidebarContextHeading.vue |   3 +
 .../context/SidebarContextRootContainer.vue   |   2 +-
 .../context/aaveV2/SidebarAaveV2Supply.vue    | 157 +++++++++++++-
 .../components/SidebarSectionStatus.vue       |   4 +-
 composables/useAaveV2Position.ts              | 118 ++++++++--
 composables/useBalances.ts                    | 203 ++++++++++++++++++
 composables/useDSA.ts                         |  19 ++
 composables/useMaxAmountActive.ts             |  69 ++++++
 composables/useParsing.ts                     |  16 ++
 composables/useToken.ts                       |  11 +-
 composables/useValidation.ts                  |  17 ++
 composables/useValidators.ts                  |  45 ++++
 composables/useWeb3.ts                        |   1 +
 constant/atokens.ts                           |  29 +--
 layouts/default.vue                           |   2 +-
 utils/web3.ts                                 |   4 +-
 23 files changed, 858 insertions(+), 59 deletions(-)
 create mode 100644 components/CustomTransition.vue
 create mode 100644 components/Spinner.vue
 create mode 100644 components/ValidationErrors.vue
 create mode 100644 components/common/ProgressBar.vue
 create mode 100644 components/common/input/ButtonCTA.vue
 create mode 100644 components/common/input/ToggleButton.vue
 create mode 100644 components/sidebar/context/SidebarContextHeading.vue
 create mode 100644 composables/useBalances.ts
 create mode 100644 composables/useMaxAmountActive.ts
 create mode 100644 composables/useParsing.ts
 create mode 100644 composables/useValidation.ts
 create mode 100644 composables/useValidators.ts

diff --git a/components/AccountSwitcher.vue b/components/AccountSwitcher.vue
index fac600b..71fcdd0 100644
--- a/components/AccountSwitcher.vue
+++ b/components/AccountSwitcher.vue
@@ -108,11 +108,13 @@
 
 <script>
 import { defineComponent, ref, watch } from '@nuxtjs/composition-api'
+import { useBalances } from '~/composables/useBalances';
 import { useDSA } from "~/composables/useDSA";
 
 export default defineComponent({
   setup() {
     const { accounts, activeAccount, createAccount, creatingAccount, setAccount } = useDSA()
+    const { fetchBalances } = useBalances()
 
     const show = ref(false)
 
@@ -121,6 +123,7 @@ export default defineComponent({
     }
 
     watch(activeAccount, hide);
+    watch(activeAccount, (val) => val && fetchBalances(true));
 
     return {
       hide,
diff --git a/components/CustomTransition.vue b/components/CustomTransition.vue
new file mode 100644
index 0000000..82e84c9
--- /dev/null
+++ b/components/CustomTransition.vue
@@ -0,0 +1,30 @@
+<template>
+  <transition
+    v-bind="$attrs"
+    v-on="$listeners"
+    @after-enter="addAfterEnterClass"
+    @before-leave="removeAfterEnterClass"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+export default defineComponent({
+  props: {
+    afterEnterClass: { type: String, default: '' },
+  },
+  setup(props) {
+    const afterEnterClasses = computed(() => props.afterEnterClass.split(' ').filter((cssClass) => !!cssClass))
+    function addAfterEnterClass(el) {
+      afterEnterClasses.value.forEach((cssClass) => el.classList.add(cssClass))
+    }
+    function removeAfterEnterClass(el) {
+      afterEnterClasses.value.forEach((cssClass) => el.classList.remove(cssClass))
+    }
+
+    return { addAfterEnterClass, removeAfterEnterClass }
+  },
+})
+</script>
diff --git a/components/Spinner.vue b/components/Spinner.vue
new file mode 100644
index 0000000..1174ca9
--- /dev/null
+++ b/components/Spinner.vue
@@ -0,0 +1,14 @@
+<template>
+  <SVGSpinner v-bind="$attrs" class="animate-spin-loading" v-on="$listeners" />
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import SVGSpinner from '@/assets/icons/spinner.svg?inline'
+
+export default defineComponent({
+  components: {
+    SVGSpinner,
+  },
+})
+</script>
diff --git a/components/ValidationErrors.vue b/components/ValidationErrors.vue
new file mode 100644
index 0000000..3be9115
--- /dev/null
+++ b/components/ValidationErrors.vue
@@ -0,0 +1,32 @@
+<template>
+  <transition
+    enter-active-class="duration-75 ease-out"
+    enter-class="opacity-0"
+    enter-to-class="opacity-100"
+    leave-active-class="duration-75 ease-in"
+    leave-class="opacity-100"
+    leave-to-class="opacity-0"
+  >
+    <Alert v-if="!!errorMessages.length" v-bind="$attrs">
+      <!-- <h3 class="font-medium leading-5 text-red-500 text-12">There are errors with your submission</h3> -->
+      <div class="mb-1 font-medium leading-5 text-red-700 last:mb-0 text-12">
+        <ul class="pl-4 list-disc">
+          <li v-for="(errorMessage, index) in errorMessages" :key="index">
+            {{ errorMessage }}
+          </li>
+        </ul>
+      </div>
+    </Alert>
+  </transition>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    errorMessages: { type: Array, required: true },
+  },
+})
+</script>
diff --git a/components/common/ProgressBar.vue b/components/common/ProgressBar.vue
new file mode 100644
index 0000000..0a4e805
--- /dev/null
+++ b/components/common/ProgressBar.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="relative overflow-hidden rounded-xs">
+    <div class="w-full h-1 bg-opacity-25 bg-grey-pure"></div>
+    <div
+      class="absolute inset-0 transition-transform duration-200 ease-out"
+      :style="{ transform }"
+      :class="{
+        'bg-red-800': color === 'red-dark',
+        'bg-red-pure': color === 'red',
+        'bg-passion-orange-pure': color === 'passion-orange',
+        'bg-orange-pure': color === 'orange',
+        'bg-yellow-pure': color === 'yellow',
+        'bg-green-pure': color === 'green-pure',
+        'bg-ocean-blue-pure': color === 'ocean-blue',
+        'bg-grey-pure': color === 'grey',
+      }"
+    ></div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { useBigNumber } from '~/composables/useBigNumber'
+
+export default defineComponent({
+  props: {
+    // Range: 0.0 - 1.0
+    progress: { type: String, default: '0' },
+    color: { type: String, default: 'ocean-blue' },
+  },
+  setup(props) {
+    const { min, minus, times } = useBigNumber()
+    const transform = computed(() => `translateX(-${minus('100', times(min(props.progress, 1), '100')).toFixed()}%)`)
+    return { transform }
+  },
+})
+</script>
diff --git a/components/common/input/ButtonCTA.vue b/components/common/input/ButtonCTA.vue
new file mode 100644
index 0000000..51d2d81
--- /dev/null
+++ b/components/common/input/ButtonCTA.vue
@@ -0,0 +1,41 @@
+<template>
+  <button
+    class="flex items-center justify-center flex-shrink-0 py-2 font-semibold text-white whitespace-no-wrap duration-75 ease-out transform rounded-sm select-none bg-ocean-blue-pure text-14 shadow-cta focus:outline-none dark:shadow-none"
+    :class="{
+      'bg-opacity-50 pointer-events-none': disabled && !loading,
+      'hover:-translate-y-px': !disabled && !loading,
+      'active:translate-y-px': !disabled && !loading
+    }"
+    :disabled="disabled || loading"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <slot v-if="!loading" />
+    <CustomTransition
+      enter-active-class="duration-200 ease-out"
+      enter-class="w-0 ml-0 opacity-0"
+      enter-to-class="w-4 opacity-100"
+      after-enter-class="w-4 "
+      leave-active-class="duration-100 ease-in"
+      leave-class="w-4 opacity-100"
+      leave-to-class="w-0 ml-0 opacity-0"
+    >
+      <SVGSpinner v-if="loading" class="h-4 animate-spin-loading" />
+    </CustomTransition>
+  </button>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import SVGSpinner from '@/assets/icons/spinner.svg?inline'
+
+export default defineComponent({
+  components: {
+    SVGSpinner,
+  },
+  props: {
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+})
+</script>
diff --git a/components/common/input/ToggleButton.vue b/components/common/input/ToggleButton.vue
new file mode 100644
index 0000000..f4bfff3
--- /dev/null
+++ b/components/common/input/ToggleButton.vue
@@ -0,0 +1,60 @@
+<template>
+  <div
+    class="relative flex items-center group"
+    :class="{
+      'cursor-pointer': !disabled && !loading,
+      'pointer-events-none': disabled || loading
+    }"
+    v-bind="$attrs"
+    role="checkbox"
+    :aria-checked="checked"
+    @click="toggle"
+  >
+    <div
+      class="box-content flex w-10 h-5 transition-colors duration-75 rounded-full p-2px"
+      :class="{
+        'bg-green-pure dark:bg-opacity-75': checked,
+        'bg-grey-light  group-hover:bg-grey-pure group-hover:bg-opacity-20 focus:bg-grey-pure focus:bg-opacity-20 dark:group-hover:bg-opacity-38 dark:bg-opacity-20 ': !checked
+      }"
+    />
+    <div
+      class="absolute flex items-center justify-center w-5 h-5 transition-transform duration-300 ease-out transform bg-white rounded-full  dark:bg-light"
+      style="top: calc(50% - 0.625rem)"
+      :style="{ transform }"
+    >
+      <spinner v-if="loading" class="text-green-pure" />
+    </div>
+    <span v-if="label" class="ml-4 text-12">{{ label }}</span>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed } from '@nuxtjs/composition-api'
+import Spinner from '~/components/Spinner.vue'
+
+export default defineComponent({
+  components: { Spinner },
+  inheritAttrs: false,
+  model: {
+    prop: 'checked',
+    event: 'change',
+  },
+  props: {
+    checked: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    label: { type: String, default: '' },
+  },
+  setup(props, context) {
+    function toggle() {
+      if (props.disabled || props.loading) return
+
+      context.emit('change', !props.checked)
+    }
+
+    const transform = computed(() => (props.checked ? 'translateX(calc(2px + 2.5rem - 1.25rem))' : 'translateX(2px)'))
+
+    return { toggle, transform }
+  },
+})
+</script>
diff --git a/components/sidebar/context/SidebarContextHeading.vue b/components/sidebar/context/SidebarContextHeading.vue
new file mode 100644
index 0000000..c54bf8c
--- /dev/null
+++ b/components/sidebar/context/SidebarContextHeading.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="font-semibold text-center text-19"><slot /></div>
+</template>
diff --git a/components/sidebar/context/SidebarContextRootContainer.vue b/components/sidebar/context/SidebarContextRootContainer.vue
index 5765089..930a322 100644
--- a/components/sidebar/context/SidebarContextRootContainer.vue
+++ b/components/sidebar/context/SidebarContextRootContainer.vue
@@ -3,7 +3,7 @@
     <SidebarContextHeader><slot name="title" /></SidebarContextHeader>
 
     <div class="overflow-y-scroll scrollbar-hover">
-      <div class="mx-auto max-w-[385px]">
+      <div class="mx-auto w-full">
         <div class="py-2 sm:py-4">
           <slot />
         </div>
diff --git a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
index 5e9d542..aa98db7 100644
--- a/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
+++ b/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
@@ -2,15 +2,65 @@
   <SidebarContextRootContainer>
     <template #title>Supply {{ symbol }}</template>
 
-    <SidebarSectionValueWithIcon class="mt-2" label="Token Balance">
+    <SidebarSectionValueWithIcon label="Token Balance">
       <template #icon
         ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
       /></template>
-      <template #value>{{ balance }} {{ symbol }}</template>
+      <template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
     </SidebarSectionValueWithIcon>
 
     <div class="bg-background mt-6 p-8">
-      <input-numeric v-model="amount" placeholder="Amount to supply" />
+      <input-numeric
+        v-model="amount"
+        placeholder="Amount to supply"
+        :error="errors.amount.message"
+      />
+    </div>
+
+    <hr />
+
+    <div class="px-5">
+      <div class="flex items-center justify-between mt-6">
+        <div class="font-semibold">Set Max</div>
+
+        <toggle-button :checked="isMaxAmount" @change="toggle" />
+      </div>
+
+      <SidebarContextHeading class="mt-6"
+        >Projected Debt Position</SidebarContextHeading
+      >
+
+      <hr />
+
+      <SidebarSectionStatus
+        class="mt-6"
+        :liquidation="maxLiquidation"
+        :status="status"
+      />
+
+      <hr />
+
+      <SidebarSectionValueWithIcon class="mt-6" label="Liquidation Price (ETH)">
+        <template #value>
+          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} /
+          {{ formatUsd(liquidationMaxPrice) }}
+        </template>
+      </SidebarSectionValueWithIcon>
+
+      <hr />
+
+      <div class="flex flex-shrink-0 mt-6">
+        <ButtonCTA
+          class="w-full"
+          :disabled="!isValid || pending"
+          :loading="pending"
+          @click="cast"
+        >
+          Supply
+        </ButtonCTA>
+      </div>
+
+      <ValidationErrors :error-messages="errorMessages" class="mt-6" />
     </div>
   </SidebarContextRootContainer>
 </template>
@@ -19,37 +69,122 @@
 import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 import InputNumeric from '~/components/common/input/InputNumeric.vue'
 import { useAaveV2Position } from '~/composables/useAaveV2Position'
+import { useBalances } from '~/composables/useBalances'
+import { useBigNumber } from '~/composables/useBigNumber'
 import { useFormatting } from '~/composables/useFormatting'
+import { useValidators } from '~/composables/useValidators'
+import { useValidation } from '~/composables/useValidation'
 import { useToken } from '~/composables/useToken'
+import { useParsing } from '~/composables/useParsing'
+import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
+import { useWeb3 } from '~/composables/useWeb3'
+import atokens from '~/constant/atokens'
+import ToggleButton from '~/components/common/input/ToggleButton.vue'
+import { useDSA } from '~/composables/useDSA'
+import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import { useNotification } from '~/composables/useNotification'
 
 export default defineComponent({
-  components: { InputNumeric },
+  components: { InputNumeric, ToggleButton, ButtonCTA },
   props: {
     tokenKey: { type: String, required: true },
   },
   setup(props) {
-    const { status, displayPositions } = useAaveV2Position()
-    // const { formatUsd, formatUsdMax, formatNumber, formatDecimal } = useFormatting()
+    const { showTransaction } = useNotification()
+    const { networkName, account } = useWeb3()
+    const { dsa } = useDSA()
+    const { getTokenByKey, valInt } = useToken()
+    const { getBalanceByKey } = useBalances()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, plus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+
+    const { status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
+      overridePosition: (position) => {
+        if (rootTokenKey.value !== position.key) return position
+
+        return {
+          ...position,
+          supply: plus(position.supply, amountParsed.value).toFixed(),
+        }
+      },
+    })
 
     const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
 
-    const rootTokenKey = computed(() => 'eth')
+    const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
 
-    const { getTokenByKey } = useToken()
-
-    const token = computed(() => getTokenByKey(props.tokenKey))
+    const token = computed(() => getTokenByKey(rootTokenKey.value))
     const symbol = computed(() => token.value?.symbol)
+    const decimals = computed(() => token.value?.decimals)
+    const balance = computed(() => getBalanceByKey(rootTokenKey.value))
+    const address = computed(() => token.value?.address)
 
+    const factor = computed(
+      () => displayPositions.value?.find((position) => rootTokenKey.value === position.key)?.factor
+    )
 
-    const balance = computed(() => "0")
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
+
+    const { validateAmount, validateLiquidation, validateIsLoggedIn } = useValidators()
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+      const liqValid = gt(factor.value, '0') ? validateLiquidation(status.value, maxLiquidation.value) : null
+
+      return {
+        amount: { message: validateAmount(amountParsed.value, balance.value), show: hasAmountValue },
+        liquidation: { message: liqValid, show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+
+      const amount = isMaxAmount.value ? dsa.value.maxValue : valInt(amountParsed.value, decimals.value)
+
+      const spells = dsa.value.Spell()
+
+      spells.add({
+        connector: 'aave_v2',
+        method: 'deposit',
+        args: [address.value, amount, 0, 0],
+      })
+
+      window.dsa = dsa.value
+
+      const txHash = await dsa.value.cast({
+        spells,
+        from: account.value,
+      })
+
+      pending.value = false
+    }
 
     return {
+      pending,
+      cast,
+      errors,
       amount,
       status,
       rootTokenKey,
       token,
       symbol,
       balance,
+      formatNumber,
+      formatUsdMax,
+      formatUsd,
+      toggle,
+      isMaxAmount,
+      maxLiquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      errorMessages,
+      isValid
     }
   },
 })
diff --git a/components/sidebar/context/components/SidebarSectionStatus.vue b/components/sidebar/context/components/SidebarSectionStatus.vue
index d1f3db8..480502d 100644
--- a/components/sidebar/context/components/SidebarSectionStatus.vue
+++ b/components/sidebar/context/components/SidebarSectionStatus.vue
@@ -8,18 +8,20 @@
 
     <div class="flex items-center">
       <div class="w-24 mr-3 font-medium text-19">{{ formatPercent(status) }}</div>
-      <ProgressBar class="w-full" :color="color" :progress="status" />
+      <progress-bar class="w-full" :color="color" :progress="status" />
     </div>
   </div>
 </template>
 
 <script>
 import { computed, defineComponent } from '@nuxtjs/composition-api'
+import ProgressBar from '~/components/common/ProgressBar.vue'
 import { useBigNumber } from '~/composables/useBigNumber'
 import { useFormatting } from '~/composables/useFormatting'
 import { useStatus } from '~/composables/useStatus'
 
 export default defineComponent({
+  components: { ProgressBar },
   props: {
     liquidation: { type: String, required: true },
     status: { type: String, required: true },
diff --git a/composables/useAaveV2Position.ts b/composables/useAaveV2Position.ts
index e169254..2e3e4ff 100644
--- a/composables/useAaveV2Position.ts
+++ b/composables/useAaveV2Position.ts
@@ -12,7 +12,16 @@ import { useBigNumber } from "./useBigNumber";
 import { usePosition } from "./usePosition";
 import { useToken } from "./useToken";
 
-const { times, isZero, div, max, gt, minus, ensureValue } = useBigNumber();
+const {
+  times,
+  isZero,
+  div,
+  max,
+  gt,
+  minus,
+  ensureValue,
+  plus
+} = useBigNumber();
 const { getType } = usePosition();
 
 const position = ref<any>({
@@ -43,25 +52,13 @@ const totalBorrow = computed(() =>
     : 0
 );
 
-const status = computed(() => {
-  if (!position.value) {
-    return "0";
-  }
+const ethPriceInUsd = computed(() => position.value?.ethPriceInUsd);
 
-  if (
-    isZero(position.value.totalSupplyInEth) &&
-    !isZero(position.value.totalBorrowInEth)
-  )
-    return "1.1";
-  if (isZero(position.value.totalSupplyInEth)) return "0";
+export function useAaveV2Position(
+  { overridePosition } = { overridePosition: null }
+) {
+  overridePosition = overridePosition || (pos => pos);
 
-  return max(
-    div(position.value.totalBorrowInEth, position.value.totalSupplyInEth),
-    "0"
-  ).toFixed();
-});
-
-export function useAaveV2Position() {
   const { web3, chainId, networkName } = useWeb3();
   const { activeAccount } = useDSA();
   const { getTokenByKey, allATokensV2 } = useToken();
@@ -118,6 +115,42 @@ export function useAaveV2Position() {
     { immediate: true }
   );
 
+  const stats = computed(() =>
+    displayPositions.value.reduce(
+      (stats, { key, supply, borrow, priceInEth, factor, liquidation }) => {
+        if (key === "eth") {
+          stats.ethSupplied = supply;
+        }
+
+        stats.totalSupplyInEth = plus(
+          stats.totalSupplyInEth,
+          times(supply, priceInEth)
+        ).toFixed();
+        stats.totalBorrowInEth = plus(
+          stats.totalBorrowInEth,
+          times(borrow, priceInEth)
+        ).toFixed();
+        stats.totalMaxBorrowLimitInEth = plus(
+          stats.totalMaxBorrowLimitInEth,
+          times(supply, times(priceInEth, factor))
+        ).toFixed();
+        stats.totalMaxLiquidationLimitInEth = plus(
+          stats.totalMaxLiquidationLimitInEth,
+          times(supply, times(priceInEth, liquidation))
+        ).toFixed();
+
+        return stats;
+      },
+      {
+        totalSupplyInEth: "0",
+        totalBorrowInEth: "0",
+        totalMaxBorrowLimitInEth: "0",
+        totalMaxLiquidationLimitInEth: "0",
+        ethSupplied: "0"
+      }
+    )
+  );
+
   const rewardTokenPriceInUsd = computed(() => {
     if (networkName.value === Network.Polygon) {
       return ensureValue(
@@ -159,7 +192,8 @@ export function useAaveV2Position() {
           max(b.supplyUsd, b.borrowUsd),
           max(a.supplyUsd, a.borrowUsd)
         ).toNumber()
-      );
+      )
+      .map(overridePosition);
   });
 
   function getPositionOrDefaultPosition(token, position) {
@@ -230,13 +264,57 @@ export function useAaveV2Position() {
     };
   }
 
+  const maxLiquidation = computed(() => {
+    if (isZero(stats.value.totalSupplyInEth)) return "0";
+
+    return max(
+      div(
+        stats.value.totalMaxLiquidationLimitInEth,
+        stats.value.totalSupplyInEth
+      ),
+      "0"
+    ).toFixed();
+  });
+
+  const liquidationPrice = computed(() => {
+    if (isZero(stats.value.ethSupplied)) return "0";
+
+    return max(
+      times(
+        div(
+          stats.value.totalBorrowInEth,
+          stats.value.totalMaxLiquidationLimitInEth
+        ),
+        ethPriceInUsd.value
+      ),
+      "0"
+    ).toFixed();
+  });
+
+  const status = computed(() => {
+    if (
+      isZero(stats.value.totalSupplyInEth) &&
+      !isZero(stats.value.totalBorrowInEth)
+    )
+      return "1.1";
+    if (isZero(stats.value.totalSupplyInEth)) return "0";
+
+    return max(
+      div(stats.value.totalBorrowInEth, stats.value.totalSupplyInEth),
+      "0"
+    ).toFixed();
+  });
+
   return {
     displayPositions,
     position,
     fetchPosition,
     totalSupply,
     totalBorrow,
-    status
+    status,
+    maxLiquidation,
+    liquidationPrice,
+    liquidationMaxPrice: ethPriceInUsd
   };
 }
 
diff --git a/composables/useBalances.ts b/composables/useBalances.ts
new file mode 100644
index 0000000..250cf16
--- /dev/null
+++ b/composables/useBalances.ts
@@ -0,0 +1,203 @@
+import { nextTick, onMounted, reactive, watch } from "@nuxtjs/composition-api";
+import BigNumber from "bignumber.js";
+import abis from "~/constant/abis";
+import addresses from "~/constant/addresses";
+import tokens from "~/constant/tokens";
+import uniPoolTokens from "~/constant/uniPoolTokens";
+import { useDSA } from "./useDSA";
+import { Network } from "./useNetwork";
+import { useWeb3 } from "./useWeb3";
+import Web3 from "web3";
+import { AbiItem } from "web3-utils";
+import { mainnetWeb3, polygonWeb3 } from "~/utils/web3";
+import { useToken } from "./useToken";
+
+const balances = reactive({
+  user: null,
+  dsa: null
+});
+
+export function useBalances() {
+  const { account, web3, networkName } = useWeb3();
+  const { activeAccount } = useDSA();
+  const { getTokenByKey } = useToken();
+
+  const fetchBalances = async (refresh = false) => {
+    await nextTick();
+
+    if (!balances.user || refresh) {
+      balances.user = {
+        mainnet: await getBalances(account.value, Network.Mainnet, mainnetWeb3),
+        polygon: await getBalances(account.value, Network.Polygon, polygonWeb3)
+      };
+    }
+
+    if (!balances.dsa || refresh) {
+      balances.dsa = {
+        mainnet: await getBalances(
+          activeAccount.value.address,
+          Network.Mainnet,
+          mainnetWeb3
+        ),
+        polygon: await getBalances(
+          activeAccount.value.address,
+          Network.Polygon,
+          polygonWeb3
+        )
+      };
+    }
+  };
+
+  const getBalanceByKey = (tokenKey, network = null) => {
+    return (
+      balances.dsa?.[network || networkName.value][
+        getTokenByKey(tokenKey)?.address
+      ]?.balance || "0"
+    );
+  };
+
+  return {
+    balances,
+    fetchBalances,
+    getBalanceByKey
+  };
+}
+
+async function getBalances(
+  owner,
+  network: Network,
+  web3: Web3,
+  additionalTokens = []
+) {
+  try {
+    const tokenResolverABI = abis.resolver.balance;
+    const tokenResolverAddr = addresses[network].resolver.balance;
+
+    const tokensArr = tokens[network].allTokens;
+    const tokensList =
+      network === Network.Mainnet
+        ? [...tokensArr, ...uniPoolTokens[network].allTokens]
+        : tokensArr;
+
+    let tokensAddrArr = tokensList.map(a => a.address);
+    const tokenResolverInstance = new web3.eth.Contract(
+      tokenResolverABI as AbiItem[],
+      tokenResolverAddr
+    );
+
+    const tokensAddrArrLength = tokensAddrArr.length;
+    let additionalTokensInfo;
+    let isNotTokens;
+    if (additionalTokens && additionalTokens.length) {
+      additionalTokens = additionalTokens.filter(
+        token =>
+          !tokensArr.find(a => a.address.toLowerCase() === token.toLowerCase())
+      );
+    }
+    if (additionalTokens && additionalTokens.length) {
+      additionalTokensInfo = await getTokensDetails(
+        additionalTokens,
+        network,
+        web3
+      );
+      isNotTokens = Object.fromEntries(
+        additionalTokens
+          .filter((val, index) => !additionalTokensInfo[index].isToken)
+          .map(val => [val, { isToken: false }])
+      );
+      additionalTokens = additionalTokens.filter(
+        (val, index) => additionalTokensInfo[index].isToken
+      );
+      additionalTokensInfo = additionalTokensInfo.filter(val => val.isToken);
+      tokensAddrArr = tokensAddrArr.concat(additionalTokens);
+    }
+
+    const tokenBalances = await tokenResolverInstance.methods
+      .getBalances(owner, tokensAddrArr)
+      .call();
+
+    let tokensBalObj = {};
+    tokenBalances.forEach((a, i) => {
+      const tokenAddress = web3.utils.toChecksumAddress(tokensAddrArr[i]);
+      let tokenData;
+      if (i < tokensAddrArrLength) {
+        tokenData = {
+          ...tokensList[i],
+          decimals: tokensList[i].decimals.toString()
+        };
+      } else {
+        tokenData = additionalTokensInfo[i - tokensAddrArrLength];
+      }
+      const { name, symbol, decimals, type, isStableCoin, key } = tokenData;
+      tokensBalObj[tokenAddress] = {
+        name,
+        symbol,
+        decimals,
+        type,
+        isStableCoin,
+        key,
+        balance: new BigNumber(a).dividedBy(10 ** tokenData.decimals).toFixed(),
+        raw: String(a)
+      };
+    });
+    tokensBalObj = { ...tokensBalObj, ...isNotTokens };
+
+    return tokensBalObj;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+const storedTokens = {};
+
+async function getTokensDetails(addressArr, network: Network, web3: Web3) {
+  try {
+    const balanceInstance = new web3.eth.Contract(
+      abis.resolver.balance as AbiItem[],
+      addresses[network].resolver.balance
+    );
+
+    const result = [];
+    for (let i = 0; i < addressArr.length; i++) {
+      let details = tokens[network].getTokenByAddress(addressArr[i]);
+      if (!details) {
+        details = uniPoolTokens[network].getTokenByAddress(addressArr[i]);
+      }
+      if (!details) {
+        details = storedTokens[addressArr[i]];
+      } else {
+        details.isToken = true;
+      }
+      try {
+        if (!details) {
+          details = await balanceInstance.methods
+            .getTokenDetails([addressArr[i]])
+            .call();
+          const { name, symbol, decimals, isToken } = details[0];
+          details = {
+            name,
+            symbol,
+            decimals,
+            isToken,
+            type: "token",
+            isStableCoin: false,
+            key: symbol.toLowerCase()
+          };
+          storedTokens[addressArr[i]] = details;
+        }
+      } catch (error) {
+        if (
+          error.message &&
+          error.message === "Returned error: execution reverted"
+        ) {
+          details = { isToken: false };
+        } else {
+          throw error;
+        }
+      }
+      details.address = addressArr[i];
+      result[i] = details;
+    }
+    return result;
+  } catch (error) {}
+}
diff --git a/composables/useDSA.ts b/composables/useDSA.ts
index 5c939b7..14fd7b1 100644
--- a/composables/useDSA.ts
+++ b/composables/useDSA.ts
@@ -20,6 +20,15 @@ export function useDSA() {
     { immediate: true }
   );
 
+  watch(
+    chainId,
+    () => {
+      if (web3.value) {
+        dsa.value = new DSA(web3.value, chainId.value);
+      }
+    },
+  );
+
   watch(
     dsa,
     async () => {
@@ -34,6 +43,16 @@ export function useDSA() {
     { immediate: true }
   );
 
+  watch(
+    activeAccount,
+    async () => {
+      if (activeAccount.value) {
+        dsa.value.setAccount(activeAccount.value.id);
+      }
+    },
+    { immediate: true }
+  );
+
   const creatingAccount = ref(false);
 
   async function createAccount() {
diff --git a/composables/useMaxAmountActive.ts b/composables/useMaxAmountActive.ts
new file mode 100644
index 0000000..2cc8017
--- /dev/null
+++ b/composables/useMaxAmountActive.ts
@@ -0,0 +1,69 @@
+import { computed, ref, watch } from "@nuxtjs/composition-api";
+import { useBigNumber } from "./useBigNumber";
+
+/**
+ * Saves and restores a previous amount value when setting the isMaxAmount toggle.
+ *
+ * @param {import('@nuxtjs/composition-api').Ref<string>} amountRef Reference for amount.
+ * @param {import('@nuxtjs/composition-api').Ref<string>} maxAmountRef Reference for maxAmount.
+ */
+export function useMaxAmountActive(amountRef, maxAmountRef) {
+  const { toBN, eq } = useBigNumber();
+
+  let prevAmount = toBN(amountRef.value).toFixed();
+
+  const syncAmount = ref(false);
+
+  watch(
+    [amountRef, syncAmount],
+    ([amount, syncAmountValue], [oldAmount, oldSyncAmountValue]) => {
+      //@ts-ignore
+      if (!eq(amount, oldAmount) && syncAmountValue === oldSyncAmountValue) {
+        // If amount has changed turn of syncing
+        syncAmount.value = false;
+      }
+    }
+  );
+
+  watch([maxAmountRef, syncAmount], ([maxAmount, syncAmountValue]) => {
+    if (syncAmountValue) {
+      // Update amount if syncing is enabled
+      //@ts-ignore
+      amountRef.value = toBN(maxAmount).toFixed();
+    }
+  });
+
+  function setSyncAmount(syncAmountValue) {
+    if (syncAmount.value === syncAmountValue) return;
+
+    if (syncAmountValue) {
+      // Store amount value when syncing
+      syncAmount.value = true;
+      prevAmount = toBN(amountRef.value).toFixed();
+      amountRef.value = toBN(maxAmountRef.value).toFixed();
+    } else {
+      // Restore amount value when syncing is disabled
+      amountRef.value = prevAmount;
+      syncAmount.value = false;
+    }
+  }
+
+  function enable() {
+    setSyncAmount(true);
+  }
+
+  function disable() {
+    setSyncAmount(false);
+  }
+
+  function toggle() {
+    setSyncAmount(!syncAmount.value);
+  }
+
+  return {
+    enable,
+    disable,
+    toggle,
+    isMaxAmount: computed(() => syncAmount.value)
+  };
+}
diff --git a/composables/useParsing.ts b/composables/useParsing.ts
new file mode 100644
index 0000000..4578efa
--- /dev/null
+++ b/composables/useParsing.ts
@@ -0,0 +1,16 @@
+import { useBigNumber } from "./useBigNumber";
+
+export function useParsing() {
+  const { toBN } = useBigNumber();
+
+  function parseSafeFloat(value) {
+    if (value === null) return "0";
+    if (value === undefined) return "0";
+
+    const normalizedAmount = String(value).replace(",", ".");
+
+    return toBN(normalizedAmount).toFixed();
+  }
+
+  return { parseSafeFloat };
+}
diff --git a/composables/useToken.ts b/composables/useToken.ts
index fd66826..c53aef6 100644
--- a/composables/useToken.ts
+++ b/composables/useToken.ts
@@ -1,10 +1,12 @@
 import { computed } from "@nuxtjs/composition-api";
 import atokensV2 from "~/constant/atokensV2";
 import tokens from "~/constant/tokens";
+import { useBigNumber } from "./useBigNumber";
 import { useWeb3 } from "./useWeb3";
 
 export function useToken() {
   const { networkName } = useWeb3();
+  const { toBN, times, minus, div, pow } = useBigNumber();
 
   const getTokenByKey = key =>
     tokens[networkName.value].allTokens.find(
@@ -13,8 +15,15 @@ export function useToken() {
 
   const allATokensV2 = computed(() => atokensV2[networkName.value].allTokens);
 
+  function valInt(val, decimals) {
+    const num = toBN(val);
+    const multiplier = pow(10, decimals);
+    return times(num, multiplier).toFixed(0);
+  }
+
   return {
     getTokenByKey,
-    allATokensV2
+    allATokensV2,
+    valInt
   };
 }
diff --git a/composables/useValidation.ts b/composables/useValidation.ts
new file mode 100644
index 0000000..27db256
--- /dev/null
+++ b/composables/useValidation.ts
@@ -0,0 +1,17 @@
+import { computed } from "@nuxtjs/composition-api";
+
+export function useValidation(errorsRef) {
+  const errorMessages = computed(() =>
+    Object.values(errorsRef.value)
+      .filter(({ message, show }) => !!message && show)
+      .map(({ message }) => message)
+  );
+
+  const isValid = computed(() =>
+    Object.values(errorsRef.value).every(
+      ({ message, messageOnly }) => message === null || messageOnly === true
+    )
+  );
+
+  return { errorMessages, isValid };
+}
diff --git a/composables/useValidators.ts b/composables/useValidators.ts
new file mode 100644
index 0000000..b2ab482
--- /dev/null
+++ b/composables/useValidators.ts
@@ -0,0 +1,45 @@
+import { useBigNumber } from "./useBigNumber";
+
+export function useValidators() {
+  const { isZero, minus, eq, gt } = useBigNumber();
+
+  function validateAmount(amountParsed, balance = null, options = null) {
+    const mergedOptions = Object.assign(
+      { msg: "Your amount exceeds your balance." },
+      options
+    );
+
+    if (isZero(amountParsed)) {
+      return "Please provide a valid amount.";
+    } else if (balance !== null && gt(amountParsed, balance)) {
+      return mergedOptions.msg;
+    }
+
+    return null;
+  }
+
+  function validateLiquidation(status, liquidation, isWithdraw = false) {
+    if (eq(status, liquidation) && isZero(status) && isWithdraw) {
+      return null;
+    }
+    if (gt(status, minus(liquidation, "0.0001"))) {
+      return "Position will liquidate.";
+    }
+
+    return null;
+  }
+
+  function validateIsLoggedIn(isLoggedIn) {
+    if (!isLoggedIn) {
+      return "Please connect to a web3 wallet.";
+    }
+
+    return null;
+  }
+
+  return {
+    validateAmount,
+    validateLiquidation,
+    validateIsLoggedIn
+  };
+}
diff --git a/composables/useWeb3.ts b/composables/useWeb3.ts
index eb7470b..9ba898f 100644
--- a/composables/useWeb3.ts
+++ b/composables/useWeb3.ts
@@ -85,6 +85,7 @@ export function useWeb3() {
   };
 
   return {
+    account,
     chainId,
     web3,
     active,
diff --git a/constant/atokens.ts b/constant/atokens.ts
index dba0137..87a738d 100644
--- a/constant/atokens.ts
+++ b/constant/atokens.ts
@@ -28,27 +28,12 @@ export default {
   ]),
   
   polygon : createTokenUtils([
-    { key: "aeth", "type": "atoken", "symbol": "AETH", "name": "Aave ETH", "address": "0x3a3A65aAb0dd2A17E3F1947bA16138cd37d08c04", "decimals": 18, "factor": 0.75, "root": "eth" },
-    { key: "adai", "type": "atoken", "symbol": "ADAI", "name": "Aave DAI", "address": "0xfC1E690f61EFd961294b3e1Ce3313fBD8aa4f85d", "decimals": 18, "factor": 0.75, "root": "dai" },
-    { key: "ausdc", "type": "atoken", "symbol": "AUSDC", "name": "Aave USDC", "address": "0x9bA00D6856a4eDF4665BcA2C2309936572473B7E", "decimals": 6, "factor": 0.75, "root": "usdc" },
-    { key: "ausdt", "type": "atoken", "symbol": "AUSDT", "name": "Aave USDT", "address": "0x71fc860F7D3A592A4a98740e39dB31d25db65ae8", "decimals": 6, "factor": 0, "root": "usdt" },
-    { key: "asusd", "type": "atoken", "symbol": "ASUSD", "name": "Aave SUSD", "address": "0x625aE63000f46200499120B906716420bd059240", "decimals": 18, "factor": 0, "root": "susd" },
-    { key: "atusd", "type": "atoken", "symbol": "ATUSD", "name": "Aave TUSD", "address": "0x4DA9b813057D04BAef4e5800E36083717b4a0341", "decimals": 18, "factor": 0.75, "root": "tusd" },
-    { key: "abusd", "type": "atoken", "symbol": "ABUSD", "name": "Aave BUSD", "address": "0x6Ee0f7BB50a54AB5253dA0667B0Dc2ee526C30a8", "decimals": 18, "factor": 0, "root": "busd" },
-    { key: "abat", "type": "atoken", "symbol": "ABAT", "name": "Aave BAT", "address": "0xE1BA0FB44CCb0D11b80F92f4f8Ed94CA3fF51D00", "decimals": 18, "factor": 0.6, "root": "bat" },
-    { key: "aknc", "type": "atoken", "symbol": "AKNC", "name": "Aave KNC", "address": "0x9D91BE44C06d373a8a226E1f3b146956083803eB", "decimals": 18, "factor": 0.6, "root": "knc" },
-    { key: "alend", "type": "atoken", "symbol": "ALEND", "name": "Aave LEND", "address": "0x7D2D3688Df45Ce7C552E19c27e007673da9204B8", "decimals": 18, "factor": 0.4, "root": "lend" },
-    { key: "aaave", "type": "atoken", "symbol": "AAAVE", "name": "Aave AAVE", "address": "0xba3D9687Cf50fE253cd2e1cFeEdE1d6787344Ed5", "decimals": 18, "factor": 0.5, "root": "aave" },
-    { key: "auni", "type": "atoken", "symbol": "AUNI", "name": "Aave UNI", "address": "0xB124541127A0A657f056D9Dd06188c4F1b0e5aab", "decimals": 18, "factor": 0.4, "root": "uni" },
-    { key: "alink", "type": "atoken", "symbol": "ALINK", "name": "Aave LINK", "address": "0xA64BD6C70Cb9051F6A9ba1F163Fdc07E0DfB5F84", "decimals": 18, "factor": 0.65, "root": "link" },
-    { key: "amana", "type": "atoken", "symbol": "AMANA", "name": "Aave MANA", "address": "0x6FCE4A401B6B80ACe52baAefE4421Bd188e76F6f", "decimals": 18, "factor": 0.6, "root": "mana" },
-    { key: "amkr", "type": "atoken", "symbol": "AMKR", "name": "Aave MKR", "address": "0x7deB5e830be29F91E298ba5FF1356BB7f8146998", "decimals": 18, "factor": 0.35, "root": "mkr" },
-    { key: "aren", "type": "atoken", "symbol": "AREN", "name": "Aave REN", "address": "0x69948cc03f478b95283f7dbf1ce764d0fc7ec54c", "decimals": 18, "factor": 0.5, "root": "ren" },
-    { key: "asnx", "type": "atoken", "symbol": "ASNX", "name": "Aave SNX", "address": "0x328C4c80BC7aCa0834Db37e6600A6c49E12Da4DE", "decimals": 18, "factor": 0, "root": "snx" },
-    { key: "awbtc", "type": "atoken", "symbol": "AWBTC", "name": "Aave WBTC", "address": "0xFC4B8ED459e00e5400be803A9BB3954234FD50e3", "decimals": 8, "factor": 0.6, "root": "wbtc" },
-    { key: "ayfi", "type": "atoken", "symbol": "AYFI", "name": "Aave YFI", "address": "0x12e51E77DAAA58aA0E9247db7510Ea4B46F9bEAd", "decimals": 18, "factor": 0.4, "root": "yfi" },
-    { key: "azrx", "type": "atoken", "symbol": "AZRX", "name": "Aave ZRX", "address": "0x6Fb0855c404E09c47C3fBCA25f08d4E41f9F062f", "decimals": 18, "factor": 0.6, "root": "zrx" },
-    { key: "arep", "type": "atoken", "symbol": "AREP", "name": "Aave REP", "address": "0x71010A9D003445aC60C4e6A7017c1E89A477B438", "decimals": 18, "factor": 0.35, "root": "rep" },
-    { key: "aenj", "type": "atoken", "symbol": "AENJ", "name": "Aave ENJ", "address": "0x712db54daa836b53ef1ecbb9c6ba3b9efb073f40", "decimals": 18, "factor": 0.55, "root": "enj" }
+    { key: "aeth", "type": "atoken", "symbol": "AETH", "name": "Aave ETH", "address": "0x28424507fefb6f7f8E9D3860F56504E4e5f5f390", "decimals": 18, "factor": 0.8, "root": "eth" },
+    { key: "adai", "type": "atoken", "symbol": "ADAI", "name": "Aave DAI", "address": "0x27F8D03b3a2196956ED754baDc28D73be8830A6e", "decimals": 18, "factor": 0.75, "root": "dai" },
+    { key: "ausdc", "type": "atoken", "symbol": "AUSDC", "name": "Aave USDC", "address": "0x1a13F4Ca1d028320A707D99520AbFefca3998b7F", "decimals": 6, "factor": 0.8, "root": "usdc" },
+    { key: "ausdt", "type": "atoken", "symbol": "AUSDT", "name": "Aave USDT", "address": "0x60D55F02A771d515e077c9C2403a1ef324885CeC", "decimals": 6, "factor": 0, "root": "usdt" },
+    { key: "awbtc", "type": "atoken", "symbol": "AWBTC", "name": "Aave WBTC", "address": "0x5c2ed810328349100A66B82b78a1791B101C9D61", "decimals": 8, "factor": 0.7, "root": "wbtc" },
+    { key: "aaave", "type": "atoken", "symbol": "AAAVE", "name": "Aave AAVE", "address": "0x1d2a0E5EC8E5bBDCA5CB219e649B565d8e5c3360", "decimals": 18, "factor": 0.5, "root": "aave" },
+    { key: "awmatic", "type": "atoken", "symbol": "AWMATIC", "name": "Aave WMATIC", "address": "0x8dF3aad3a84da6b69A4DA8aeC3eA40d9091B2Ac4", "decimals": 18, "factor": 0.5, "root": "matic" },
   ])
 }
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 5f59621..d9522ed 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -61,7 +61,7 @@ export default defineComponent({
 <style>
 :root {
   --min-width-app: 320px;
-  --width-sidebar-context: 360px;
+  --width-sidebar-context: 385px;
   --width-container-main: 1016px;
   --height-navbar: 64px;
   --height-top-banner: 32px;
diff --git a/utils/web3.ts b/utils/web3.ts
index 133795d..5a1048a 100644
--- a/utils/web3.ts
+++ b/utils/web3.ts
@@ -5,12 +5,12 @@ const polygonInfura = "https://polygon-mainnet.infura.io/v3/";
 
 export const polygonWeb3 = new Web3(
   new Web3.providers.HttpProvider(
-    polygonInfura + "5c8b888909a544e2ba6917322f0cca68"
+    polygonInfura + "19c4b8b779a343e6ac5a91f4eaf55b81"
   )
 );
 
 export const mainnetWeb3 = new Web3(
   new Web3.providers.HttpProvider(
-    mainnetInfura + "5c8b888909a544e2ba6917322f0cca68"
+    mainnetInfura + "19c4b8b779a343e6ac5a91f4eaf55b81"
   )
 );