withdraw

components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue

@@ -44,7 +44,7 @@
 
       <SidebarSectionValueWithIcon class="mt-8" label="Liquidation Price (ETH)">
         <template #value>
-          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} <span class="">/
+          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} <span class="text-primary-gray">/
           {{ formatUsd(liquidationMaxPrice) }}</span>
         </template>
       </SidebarSectionValueWithIcon>
@@ -84,6 +84,7 @@ import { useDSA } from '~/composables/useDSA'
 import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
 import { useNotification } from '~/composables/useNotification'
 import Button from '~/components/Button.vue'
+import { useSidebar } from '~/composables/useSidebar'
 
 export default defineComponent({
   components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@@ -91,10 +92,11 @@ export default defineComponent({
     tokenKey: { type: String, required: true },
   },
   setup(props) {
+    const { close} = useSidebar()
     const { networkName, account } = useWeb3()
     const { dsa } = useDSA()
     const { getTokenByKey, valInt } = useToken()
-    const { getBalanceByKey } = useBalances()
+    const { getBalanceByKey, fetchBalances } = useBalances()
     const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
     const { isZero, gt, plus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
@@ -162,7 +164,11 @@ export default defineComponent({
         from: account.value,
       })
 
+      fetchBalances(true)
+
       pending.value = false
+      
+      close()
     }
 
     return {

components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue

@@ -0,0 +1,215 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Withdraw {{ symbol }}</template>
+
+    <SidebarSectionValueWithIcon label="Token Balance" center>
+      <template #icon
+        ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
+      /></template>
+      <template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
+    </SidebarSectionValueWithIcon>
+
+    <div class="bg-[#C5CCE1] bg-opacity-[0.15] mt-10 p-8">
+      <h3 class="text-primary-gray text-xs font-semibold mb-2.5">
+        Amount to supply
+      </h3>
+
+      <input-numeric
+        v-model="amount"
+        placeholder="Amount to supply"
+        :error="errors.amount.message"
+      >
+        <template v-if="!isMaxAmount" #suffix>
+          <div class="absolute mt-2 top-0 right-0 mr-4">
+            <button
+              type="button"
+              class="text-primary-blue-dark font-semibold text-sm hover:text-primary-blue-hover"
+              @click="toggle"
+            >
+              Max
+            </button>
+          </div>
+        </template>
+      </input-numeric>
+
+      <SidebarContextHeading class="mt-5">
+        Projected Debt Position
+      </SidebarContextHeading>
+
+      <SidebarSectionStatus
+        class="mt-8"
+        :liquidation="maxLiquidation"
+        :status="status"
+      />
+
+      <SidebarSectionValueWithIcon class="mt-8" label="Liquidation Price (ETH)">
+        <template #value>
+          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }}
+          <span class="text-primary-gray"
+            >/ {{ formatUsd(liquidationMaxPrice) }}</span
+          >
+        </template>
+      </SidebarSectionValueWithIcon>
+
+      <div class="flex flex-shrink-0 mt-10">
+        <ButtonCTA
+          class="w-full"
+          :disabled="!isValid || pending"
+          :loading="pending"
+          @click="cast"
+        >
+          Withdraw
+        </ButtonCTA>
+      </div>
+
+      <ValidationErrors :error-messages="errorMessages" class="mt-6" />
+    </div>
+  </SidebarContextRootContainer>
+</template>
+
+<script>
+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'
+import Button from '~/components/Button.vue'
+import { useSidebar } from '~/composables/useSidebar'
+
+export default defineComponent({
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
+  props: {
+    tokenKey: { type: String, required: true },
+  },
+  setup(props) {
+    const { close } = useSidebar()
+    const { networkName, account } = useWeb3()
+    const { dsa } = useDSA()
+    const { getTokenByKey, valInt } = useToken()
+    const { fetchBalances } = useBalances()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, plus, max, minus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+
+    const { stats, status, displayPositions, maxLiquidation, liquidationPrice, liquidationMaxPrice } = useAaveV2Position({
+      overridePosition: (position) => {
+        if (rootTokenKey.value !== position.key) return position
+
+        return {
+          ...position,
+          supply: max(minus(position.supply, amountParsed.value), '0').toFixed(),
+        }
+      },
+    })
+
+
+    const availableLiquidity = computed(
+      () => displayPositions.value.find((position) => position.key === rootTokenKey.value)?.availableLiquidity || '0'
+    )
+
+    const balance = computed(
+      () => displayPositions.value.find((position) => position.key === rootTokenKey.value)?.supply || '0'
+    )
+
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
+
+    const token = computed(() => getTokenByKey(rootTokenKey.value))
+    const symbol = computed(() => token.value?.symbol)
+    const decimals = computed(() => token.value?.decimals)
+    const address = computed(() => token.value?.address)
+
+    const factor = computed(
+      () => displayPositions.value?.find((position) => rootTokenKey.value === position.key)?.factor
+    )
+
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
+
+    const { validateAmount, validateLiquidation, validateIsLoggedIn, validateLiquidity } = useValidators()
+
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+      const liqValid = gt(factor.value, '0')
+        ? validateLiquidation(status.value, maxLiquidation.value, isZero(stats.value.totalBorrowInEth))
+        : null
+
+      return {
+        amount: { message: validateAmount(amountParsed.value, balance.value), show: hasAmountValue },
+        liquidation: { message: liqValid, show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+        liquidity: {
+          message: validateLiquidity(amountParsed.value, availableLiquidity.value, symbol.value, true),
+          show: hasAmountValue,
+        },
+      }
+    })
+    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: 'withdraw',
+        args: [address.value, amount, 0, 0],
+      })
+
+      window.dsa = dsa.value
+
+      const txHash = await dsa.value.cast({
+        spells,
+        from: account.value,
+      })
+
+      fetchBalances(true)
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      pending,
+      cast,
+      errors,
+      amount,
+      status,
+      rootTokenKey,
+      token,
+      symbol,
+      balance,
+      formatNumber,
+      formatUsdMax,
+      formatUsd,
+      toggle,
+      isMaxAmount,
+      maxLiquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      errorMessages,
+      isValid
+    }
+  },
+})
+</script>

composables/useAaveV2Position.ts

@@ -306,6 +306,7 @@ export function useAaveV2Position(
   });
 
   return {
+    stats,
     displayPositions,
     position,
     fetchPosition,

composables/useSidebar.ts

@@ -7,12 +7,12 @@ import {
   watch
 } from "@nuxtjs/composition-api";
 
-import SidebarAaveV2Supply from "~/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue";
 import { useDSA } from "./useDSA";
 import { useWeb3 } from "./useWeb3";
+import SidebarAaveV2Supply from "~/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue";
+import SidebarAaveV2Withdraw from '~/components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue'
 // import SidebarAaveV2Borrow from '~/components/sidebar/context/aaveV2/SidebarAaveV2Borrow.vue'
 // import SidebarAaveV2Payback from '~/components/sidebar/context/aaveV2/SidebarAaveV2Payback.vue'
-// import SidebarAaveV2Withdraw from '~/components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue'
 
 const sidebars = {
   "/polygon/aave-v2": { component: null },
@@ -20,7 +20,7 @@ const sidebars = {
   "/polygon/aave-v2#supply": { component: SidebarAaveV2Supply },
   "/polygon/aave-v2#borrow": { component: null },
   "/polygon/aave-v2#payback": { component: null },
-  "/polygon/aave-v2#withdraw": { component: null },
+  "/polygon/aave-v2#withdraw": { component: SidebarAaveV2Withdraw },
   "/polygon/aave-v2#withdraw-token": {
     component: null,
     back: { hash: "withdraw-overview" }

composables/useValidators.ts

@@ -1,6 +1,8 @@
 import { useBigNumber } from "./useBigNumber";
+import { useFormatting } from "./useFormatting";
 
 export function useValidators() {
+  const { formatNumber } = useFormatting()
   const { isZero, minus, eq, gt } = useBigNumber();
 
   function validateAmount(amountParsed, balance = null, options = null) {
@@ -37,9 +39,21 @@ export function useValidators() {
     return null;
   }
 
+  function validateLiquidity(borrow, availableLiquidity, tokenSymbol, withdraw = false) {
+    if (gt(borrow, availableLiquidity)) {
+      let action = 'borrow'
+      if (withdraw) {
+        action = 'withdraw'
+      }
+      return `Not enough liquidity to ${action} ${formatNumber(borrow, 2)} ${tokenSymbol}`
+    }
+    return null
+  }
+
   return {
     validateAmount,
     validateLiquidation,
-    validateIsLoggedIn
+    validateIsLoggedIn,
+    validateLiquidity
   };
 }