From b5d680c043ab462d5a8796406a5345b9a2eeab43 Mon Sep 17 00:00:00 2001
From: Georges KABBOUCHI <georges.kabbouchi@gmail.com>
Date: Sat, 21 Aug 2021 15:36:15 +0300
Subject: [PATCH] Liquity Supply & Withdraw

---
 .../liquity/SidebarLiquityTroveBorrow.vue     | 217 +++++++++++++++
 .../liquity/SidebarLiquityTrovePayback.vue    | 257 ++++++++++++++++++
 .../liquity/SidebarLiquityTroveSupply.vue     | 205 ++++++++++++++
 .../liquity/SidebarLiquityTroveWithdraw.vue   | 217 +++++++++++++++
 composables/protocols/useLiquityPosition.ts   |   5 +-
 composables/useSidebar.ts                     |   8 +
 6 files changed, 908 insertions(+), 1 deletion(-)
 create mode 100644 components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue
 create mode 100644 components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue
 create mode 100644 components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue
 create mode 100644 components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue

diff --git a/components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue b/components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue
new file mode 100644
index 0000000..2c32f5e
--- /dev/null
+++ b/components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue
@@ -0,0 +1,217 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Borrow {{ symbol }}</template>
+
+    <SidebarRateTypeSelect
+      class="flex flex-col items-center"
+      v-model="rateType"
+      :items="annualPercentageRateTypes"
+      :borrow-stable-rate="borrowStableRate"
+      :stable-borrow-enabled="stableBorrowEnabled"
+    />
+
+    <SidebarSectionValueWithIcon class="mt-6" label="Borrowed" 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 borrow
+      </h3>
+
+      <input-numeric
+        v-model="amount"
+        placeholder="Amount to borrow"
+        :error="errors.amount.message"
+      >
+      </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"
+        >
+          Borrow
+        </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/protocols/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 { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, plus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction, showWarning } = useNotification()
+    const { status, displayPositions, liquidation, maxLiquidation, liquidationPrice, liquidationMaxPrice, annualPercentageRateTypes } = useAaveV2Position({
+      overridePosition: (position) => {
+        if (rootTokenKey.value !== position.key) return position
+
+        return {
+          ...position,
+          borrow: plus(position.borrow, amountParsed.value).toFixed(),
+        }
+      },
+    })
+
+    const rateType = ref(null)
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
+
+    const currentPosition = computed(() =>
+      displayPositions.value.find((position) => position.key === rootTokenKey.value)
+    )
+
+    const token = computed(() => getTokenByKey(rootTokenKey.value))
+    const symbol = computed(() => token.value?.symbol)
+    const decimals = computed(() => token.value?.decimals)
+    const balance = computed(() => {
+      if (rateType.value?.value === 'stable') {
+        return currentPosition.value?.borrowStable || '0'
+      }
+      return currentPosition.value?.borrow || '0'
+    })
+
+    const availableLiquidity = computed(() => currentPosition.value?.availableLiquidity || '0')
+    const borrowStableRate = computed(() => currentPosition.value?.borrowStableRate || '0')
+    const stableBorrowEnabled = computed(
+      () => currentPosition.value?.stableBorrowEnabled && isZero(currentPosition.value?.supply)
+    )
+
+    const address = computed(() => token.value?.address)
+
+    const { validateAmount, validateLiquidation, validateLiquidity, validateIsLoggedIn } = useValidators()
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+        amount: { message: validateAmount(amountParsed.value), show: hasAmountValue },
+        liquidation: { message: validateLiquidation(status.value, liquidation.value), show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+        liquidity: {
+          message: validateLiquidity(amountParsed.value, availableLiquidity.value, symbol.value),
+          show: hasAmountValue,
+        },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+
+      const amount = valInt(amountParsed.value, decimals.value)
+
+      const spells = dsa.value.Spell()
+
+      const rateMode = rateType.value?.rateMode
+
+      spells.add({
+        connector: 'aave_v2',
+        method: 'borrow',
+        args: [address.value, amount, rateMode, 0, 0],
+      })
+
+      try {
+        const txHash = await dsa.value.cast({
+          spells,
+          from: account.value,
+        })
+
+        showPendingTransaction(txHash)
+      } catch (error) {
+        showWarning(error.message)
+      }
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      pending,
+      cast,
+      errors,
+      amount,
+      status,
+      rootTokenKey,
+      token,
+      symbol,
+      balance,
+      formatNumber,
+      formatUsdMax,
+      formatUsd,
+      maxLiquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      errorMessages,
+      isValid,
+      annualPercentageRateTypes,
+      availableLiquidity,
+      borrowStableRate,
+      stableBorrowEnabled,
+      rateType,
+    }
+  },
+})
+</script>
diff --git a/components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue b/components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue
new file mode 100644
index 0000000..68344d8
--- /dev/null
+++ b/components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue
@@ -0,0 +1,257 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Payback {{ symbol }}</template>
+
+    <SidebarRateTypeSelect
+      class="flex flex-col items-center"
+      v-model="rateType"
+      :items="annualPercentageRateTypes"
+      :borrow-stable-rate="borrowStableRate"
+      :stable-borrow-enabled="stableBorrowEnabled"
+    />
+
+    <div class="mt-6 flex justify-around items-center  w-full">
+      <SidebarSectionValueWithIcon class="" label="Borrowed" center>
+        <template #icon
+          ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
+        /></template>
+        <template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
+      </SidebarSectionValueWithIcon>
+
+      <SidebarSectionValueWithIcon class="" label="Token Balance" center>
+        <template #icon
+          ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
+        /></template>
+
+        <template #value
+          >{{ formatNumber(tokenMaxBalance) }} {{ symbol }}</template
+        >
+      </SidebarSectionValueWithIcon>
+    </div>
+
+    <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"
+        >
+          Payback
+        </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/protocols/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 { getBalanceByKey, getBalanceRawByKey, fetchBalances } = useBalances()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, plus, max, minus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction, showWarning } = useNotification()
+    const { status, displayPositions, liquidation, maxLiquidation, liquidationPrice, liquidationMaxPrice, annualPercentageRateTypes } = useAaveV2Position({
+      overridePosition: (position) => {
+        if (rootTokenKey.value !== position.key) return position
+
+        return {
+          ...position,
+          borrow: max(minus(position.borrow, amountParsed.value), '0').toFixed(),
+        }
+      },
+    })
+
+    const rateType = ref(null)
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
+
+    const currentPosition = computed(() =>
+      displayPositions.value.find((position) => position.key === rootTokenKey.value)
+    )
+
+    const token = computed(() => getTokenByKey(rootTokenKey.value))
+    const symbol = computed(() => token.value?.symbol)
+    const decimals = computed(() => token.value?.decimals)
+    const balance = computed(() => {
+      if (rateType.value?.value === 'stable') {
+        return currentPosition.value?.borrowStable || '0'
+      }
+      return currentPosition.value?.borrow || '0'
+    })
+
+    const tokenMaxBalance = computed(() => getBalanceByKey(rootTokenKey.value))
+    const tokenMaxBalanceRaw = computed(() => getBalanceRawByKey(rootTokenKey.value))
+
+    const availableLiquidity = computed(() => currentPosition.value?.availableLiquidity || '0')
+    const borrowStableRate = computed(() => currentPosition.value?.borrowStableRate || '0')
+    const stableBorrowEnabled = computed(
+      () => currentPosition.value?.stableBorrowEnabled && isZero(currentPosition.value?.supply)
+    )
+
+    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, validateLiquidity, validateIsLoggedIn } = useValidators()
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+        amount: { message: validateAmount(amountParsed.value), show: hasAmountValue },
+        liquidation: { message: validateLiquidation(status.value, liquidation.value), show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+        liquidity: {
+          message: validateLiquidity(amountParsed.value, availableLiquidity.value, symbol.value),
+          show: hasAmountValue,
+        },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+
+      const amount = isMaxAmount.value
+        ? gte(tokenMaxBalance.value, balance.value)
+          ? $dsa().maxValue
+          : tokenMaxBalanceRaw.value
+        : valInt(amountParsed.value, decimals.value)
+
+      const spells = dsa.value.Spell()
+
+      const rateMode = rateType.value?.rateMode
+
+      spells.add({
+        connector: 'aave_v2',
+        method: 'payback',
+        args: [address.value, amount, rateMode, 0, 0],
+      })
+
+      try {
+        const txHash = await dsa.value.cast({
+          spells,
+          from: account.value,
+        })
+
+        showPendingTransaction(txHash)
+      } catch (error) {
+        showWarning(error.message)
+      }
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      pending,
+      cast,
+      errors,
+      amount,
+      status,
+      rootTokenKey,
+      token,
+      symbol,
+      balance,
+      formatNumber,
+      formatUsdMax,
+      formatUsd,
+      toggle,
+      isMaxAmount,
+      maxLiquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      errorMessages,
+      isValid,
+      annualPercentageRateTypes,
+      availableLiquidity,
+      borrowStableRate,
+      stableBorrowEnabled,
+      rateType,
+      tokenMaxBalance,
+    }
+  },
+})
+</script>
diff --git a/components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue b/components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue
new file mode 100644
index 0000000..d23d9a9
--- /dev/null
+++ b/components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue
@@ -0,0 +1,205 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Supply {{ collateralToken.symbol }}</template>
+
+    <SidebarSectionValueWithIcon label="Token Balance" center>
+      <template #icon
+        ><IconCurrency
+          :currency="collateralToken.key"
+          class="w-20 h-20"
+          noHeight
+      /></template>
+      <template #value
+        >{{ formatDecimal(balance) }} {{ collateralToken.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="liquidation"
+        :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"
+        >
+          Supply
+        </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 { useBalances } from '~/composables/useBalances'
+import { useNotification } from '~/composables/useNotification'
+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 ToggleButton from '~/components/common/input/ToggleButton.vue'
+import { useDSA } from '~/composables/useDSA'
+import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import Button from '~/components/Button.vue'
+import { useSidebar } from '~/composables/useSidebar'
+import { useLiquityPosition } from '~/composables/protocols/useLiquityPosition'
+
+export default defineComponent({
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
+  setup() {
+    const { close } = useSidebar()
+    const { account } = useWeb3()
+    const { dsa } = useDSA()
+    const { valInt } = useToken()
+    const { getBalanceByKey } = useBalances()
+    const { formatDecimal, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, plus, max, minus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction, showWarning } = useNotification()
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const {
+      collateralToken,
+      debt,
+      debtInWei,
+      collateral,
+      collateralInWei,
+      liquidation,
+      liquidationMaxPrice,
+      getTrovePositionHints,
+    } = useLiquityPosition()
+
+    const changedCollateral = computed(() => max(plus(collateral.value, amountParsed.value), '0').toFixed())
+    const changedBalance = computed(() => max(minus(balance.value, amountParsed.value), '0').toFixed())
+
+    const { liquidationPrice, status } = useLiquityPosition(changedCollateral, debt)
+
+    const balance = computed(() => getBalanceByKey(collateralToken.value.key))
+
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
+
+    const { validateAmount, validateLiquidation, validateIsLoggedIn, validateLiquityTroveExists } = useValidators()
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+        troveExists: { message: validateLiquityTroveExists(), show: true },
+        amount: { message: validateAmount(amountParsed.value, balance.value), show: hasAmountValue },
+        liquidation: { message: validateLiquidation(status.value, liquidation.value), show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+      try {
+        const inputAmountInWei = valInt(amountParsed.value, collateralToken.value.decimals)
+        console.log(inputAmountInWei);
+        const totalDepositAmountInWei = plus(inputAmountInWei, collateralInWei.value).toFixed()
+        const { upperHint, lowerHint } = await getTrovePositionHints(totalDepositAmountInWei, debtInWei.value)
+
+        const spells = dsa.value.Spell()
+
+        const getId = 0
+        const setId = 0
+
+
+        spells.add({
+          connector: 'LIQUITY-A',
+          method: 'deposit',
+          args: [inputAmountInWei, upperHint, lowerHint, getId, setId],
+        })
+
+        const txHash = await dsa.value.cast({
+          spells,
+          from: account.value,
+        })
+
+        showPendingTransaction(txHash)
+      } catch (error) {
+        console.log(error);
+        showWarning(error.message)
+      }
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      collateralToken,
+      balance,
+      amount,
+      status,
+      liquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      formatUsd,
+      formatUsdMax,
+      formatDecimal,
+      errors,
+      errorMessages,
+      isMaxAmount,
+      isValid,
+      cast,
+      pending,
+      toggle,
+      changedCollateral,
+      changedBalance,
+    }
+  },
+})
+</script>
diff --git a/components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue b/components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue
new file mode 100644
index 0000000..94fcfc6
--- /dev/null
+++ b/components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue
@@ -0,0 +1,217 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Withdraw {{ collateralToken.symbol }}</template>
+
+    <SidebarSectionValueWithIcon label="Supplied" center>
+      <template #icon
+        ><IconCurrency
+          :currency="collateralToken.key"
+          class="w-20 h-20"
+          noHeight
+      /></template>
+      <template #value
+        >{{ formatDecimal(changedCollateral) }}
+        {{ collateralToken.symbol }}</template
+      >
+    </SidebarSectionValueWithIcon>
+
+    <SidebarSectionValueWithIcon label="Token Balance" center>
+      <template #icon
+        ><IconCurrency
+          :currency="collateralToken.key"
+          class="w-20 h-20"
+          noHeight
+      /></template>
+      <template #value
+        >{{ formatDecimal(changedBalance) }}
+        {{ collateralToken.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 withdraw
+      </h3>
+
+      <input-numeric
+        v-model="amount"
+        placeholder="Amount to withdraw"
+        :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="liquidation"
+        :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, onMounted, ref } from '@nuxtjs/composition-api'
+import InputNumeric from '~/components/common/input/InputNumeric.vue'
+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 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'
+import { useLiquityPosition } from '~/composables/protocols/useLiquityPosition'
+
+export default defineComponent({
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
+  setup() {
+    const { close } = useSidebar()
+    const { account } = useWeb3()
+    const { dsa } = useDSA()
+    const { valInt } = useToken()
+    const { showPendingTransaction, showWarning } = useNotification()
+    const { formatUsd, formatUsdMax, formatDecimal, formatNumber } = useFormatting()
+    const { parseSafeFloat } = useParsing()
+    const { isZero, minus, max, plus } = useBigNumber()
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const {
+      collateralToken,
+      debt,
+      debtInWei,
+      collateral,
+      collateralInWei,
+      liquidation,
+      liquidationMaxPrice,
+      getTrovePositionHints,
+    } = useLiquityPosition()
+
+    const changedCollateral = computed(() => max(minus(collateral.value, amountParsed.value), '0').toFixed())
+    const changedBalance = computed(() => max(plus(balance.value, amountParsed.value), '0').toFixed())
+    const { liquidationPrice, status } = useLiquityPosition(changedCollateral, debt)
+
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, collateral)
+
+    const { validateAmount, validateLiquidation, validateIsLoggedIn, validateLiquityTroveExists } = useValidators()
+
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+        troveExists: { message: validateLiquityTroveExists(), show: true },
+        amount: { message: validateAmount(amountParsed.value, collateral.value), show: hasAmountValue },
+        liquidation: {
+          message: validateLiquidation(status.value, liquidation.value, isZero(debt.value)),
+          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 inputAmountInWei = valInt(amountParsed.value,collateralToken.value.decimals)
+      const totalDepositAmountInWei = minus(collateralInWei.value, inputAmountInWei).toFixed()
+      const { upperHint, lowerHint } = await getTrovePositionHints(totalDepositAmountInWei, debtInWei.value)
+
+      const getId = 0
+      const setId = 0
+
+      const spells = dsa.value.Spell()
+      
+      spells.add({
+        connector: 'LIQUITY-A',
+        method: 'withdraw',
+        args: [inputAmountInWei, upperHint, lowerHint, getId, setId],
+      })
+
+      try {
+        const txHash = await dsa.value.cast({
+          spells,
+          from: account.value,
+        })
+
+        showPendingTransaction(txHash)
+      } catch (error) {
+        showWarning(error.message)
+      }
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      collateralToken,
+      collateral,
+      debt,
+      amount,
+      status,
+      liquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      formatUsd,
+      formatUsdMax,
+      formatDecimal,
+      errors,
+      errorMessages,
+      isMaxAmount,
+      isValid,
+      cast,
+      pending,
+      toggle,
+      changedBalance,
+      changedCollateral,
+    }
+  },
+})
+</script>
diff --git a/composables/protocols/useLiquityPosition.ts b/composables/protocols/useLiquityPosition.ts
index 56fba3d..b6a1d06 100644
--- a/composables/protocols/useLiquityPosition.ts
+++ b/composables/protocols/useLiquityPosition.ts
@@ -67,6 +67,7 @@ export function useLiquityPosition(
   const priceInUsd = computed(() => trove.value.price);
   const ratio = computed(() => trove.value.ratio);
   const debt = computed(() => trove.value.debt);
+  const debtInWei = computed(() => valInt(debt.value, debtToken.value?.decimals))
   const collateralUsd = computed(() =>
     times(collateral.value, priceInUsd.value).toFixed()
   );
@@ -212,9 +213,11 @@ export function useLiquityPosition(
     maxFeePercentageInWei,
     getTrovePositionHints,
     collateral,
+    collateralInWei,
     collateralUsd,
     priceInUsd,
-    debt
+    debt,
+    debtInWei,
   };
 }
 
diff --git a/composables/useSidebar.ts b/composables/useSidebar.ts
index c90ad02..9cd856e 100644
--- a/composables/useSidebar.ts
+++ b/composables/useSidebar.ts
@@ -30,6 +30,10 @@ import SidebarMakerdaoBorrow from '~/components/sidebar/context/makerdao/Sidebar
 import SidebarMakerdaoPayback from '~/components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue'
 
 import SidebarLiquityTroveOpenNew from '~/components/sidebar/context/liquity/SidebarLiquityTroveOpenNew.vue'
+import SidebarLiquityTroveSupply from '~/components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue'
+import SidebarLiquityTroveWithdraw from '~/components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue'
+import SidebarLiquityTroveBorrow from '~/components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue'
+import SidebarLiquityTrovePayback from '~/components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue'
 
 
 const sidebars = {
@@ -64,6 +68,10 @@ const sidebars = {
   "/mainnet/maker#payback": { component: SidebarMakerdaoPayback },
 
   '/mainnet/liquity#trove-new': { component: SidebarLiquityTroveOpenNew },
+  '/mainnet/liquity#trove-supply': { component: SidebarLiquityTroveSupply },
+  '/mainnet/liquity#trove-withdraw': { component: SidebarLiquityTroveWithdraw },
+  '/mainnet/liquity#trove-borrow': { component: SidebarLiquityTroveBorrow },
+  '/mainnet/liquity#trove-payback': { component: SidebarLiquityTrovePayback },
 };
 
 const sidebar = ref(null);