Liquity Trove Borrow

components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue

@@ -1,33 +1,55 @@
 <template>
   <SidebarContextRootContainer>
-    <template #title>Borrow {{ symbol }}</template>
+    <template #title>Borrow {{ debtToken.symbol }}</template>
 
-    <SidebarRateTypeSelect
+    <div class="flex justify-around items-center w-full">
-      class="flex flex-col items-center"
+      <SidebarSectionValueWithIcon class="" label="Debt" center>
-      v-model="rateType"
+        <template #icon
-      :items="annualPercentageRateTypes"
+          ><IconCurrency :currency="debtToken.key" class="w-16 h-16" noHeight
-      :borrow-stable-rate="borrowStableRate"
+        /></template>
-      :stable-borrow-enabled="stableBorrowEnabled"
+        <template #value
-    />
+          >{{ formatDecimal(changedDebt) }} {{ debtToken.symbol }}</template
+        >
+      </SidebarSectionValueWithIcon>
 
-    <SidebarSectionValueWithIcon class="mt-6" label="Borrowed" center>
+      <SidebarSectionValueWithIcon class="" label="Token Balance" center>
-      <template #icon
+        <template #icon
-        ><IconCurrency :currency="rootTokenKey" class="w-20 h-20" noHeight
+          ><IconCurrency :currency="debtToken.key" class="w-16 h-16" noHeight
-      /></template>
+        /></template>
-      <template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
+
-    </SidebarSectionValueWithIcon>
+        <template #value
+          >{{ formatDecimal(changedBalance) }} {{ debtToken.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">
+      <input-amount
-        Amount to borrow
-      </h3>
-
-      <input-numeric
         v-model="amount"
+        :token-key="debtToken.key"
+        :disabled="pending"
+        class="mt-4"
         placeholder="Amount to borrow"
         :error="errors.amount.message"
+      />
+
+      <ValueDisplay
+        label="Borrow Fee"
+        tooltip="This amount is deducted from the borrowed amount as a one-time fee. There are no recurring fees for borrowing, which is thus interest-free."
+        class="mt-4"
       >
-      </input-numeric>
+        <div class="flex items-center">
+          <div>
+            {{ formatDecimal(borrowFeeAmount, 2) }} {{ debtToken.symbol }}
+          </div>
+          <div class="ml-1 text-sm">({{ formatPercent(borrowFee) }})</div>
+        </div>
+      </ValueDisplay>
+      <ValueDisplay label="Debt with fee" class="mt-4">
+        <div>
+          {{ formatDecimal(inputAmountWithFee, 2) }} {{ debtToken.symbol }}
+        </div>
+      </ValueDisplay>
 
       <SidebarContextHeading class="mt-5">
         Projected Debt Position
@@ -35,7 +57,7 @@
 
       <SidebarSectionStatus
         class="mt-8"
-        :liquidation="maxLiquidation"
+        :liquidation="liquidation"
         :status="status"
       />
 
@@ -67,90 +89,72 @@
 <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 { 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 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'
+import { useLiquityPosition } from '~/composables/protocols/useLiquityPosition'
+import InputAmount from '~/components/common/input/InputAmount.vue'
+import ValueDisplay from '../components/ValueDisplay.vue'
 
 export default defineComponent({
-  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button, InputAmount, ValueDisplay },
-  props: {
+  setup() {
-    tokenKey: { type: String, required: true },
+    const { account } = useWeb3()
-  },
-  setup(props) {
     const { close } = useSidebar()
-    const { networkName, account } = useWeb3()
+    const { formatPercent, formatNumber, formatDecimal, formatUsdMax, formatUsd } = useFormatting()
-    const { dsa } = useDSA()
+    const { plus, times, isZero, max, min } = useBigNumber()
-    const { getTokenByKey, valInt } = useToken()
-    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
-    const { isZero, gt, plus } = useBigNumber()
     const { parseSafeFloat } = useParsing()
+    const { getBalanceByKey } = useBalances()
+    const { valInt } = useToken()
     const { showPendingTransaction, showWarning } = useNotification()
-    const { status, displayPositions, liquidation, maxLiquidation, liquidationPrice, liquidationMaxPrice, annualPercentageRateTypes } = useAaveV2Position({
+    const { dsa } = useDSA()
-      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 {
+      debt,
+      collateral,
+      collateralInWei,
+      liquidation,
+      liquidationMaxPrice,
+      debtToken,
+      collateralToken,
+      maxFeePercentageInWei,
+      getTrovePositionHints,
+      borrowFee,
+    } = useLiquityPosition()
 
-    const currentPosition = computed(() =>
+    const balance = computed(() => getBalanceByKey(debtToken.value.key))
-      displayPositions.value.find((position) => position.key === rootTokenKey.value)
-    )
 
-    const token = computed(() => getTokenByKey(rootTokenKey.value))
+    const changedBalance = computed(() => max(plus(balance.value, amountParsed.value), '0').toFixed())
-    const symbol = computed(() => token.value?.symbol)
+    const changedDebt = computed(() => max(plus(debt.value, inputAmountWithFee.value), '0').toFixed())
-    const decimals = computed(() => token.value?.decimals)
+    const { liquidationPrice, status } = useLiquityPosition(collateral, changedDebt)
-    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 borrowFeeAmount = computed(() => times(amountParsed.value, borrowFee.value).toFixed())
-    const borrowStableRate = computed(() => currentPosition.value?.borrowStableRate || '0')
+    const inputAmountWithFee = computed(() => plus(amountParsed.value, borrowFeeAmount.value).toFixed())
-    const stableBorrowEnabled = computed(
-      () => currentPosition.value?.stableBorrowEnabled && isZero(currentPosition.value?.supply)
-    )
 
-    const address = computed(() => token.value?.address)
+    const { validateAmount, validateLiquidation, validateIsLoggedIn, validateLiquityTroveExists } = useValidators()
 
-    const { validateAmount, validateLiquidation, validateLiquidity, validateIsLoggedIn } = useValidators()
     const errors = computed(() => {
       const hasAmountValue = !isZero(amount.value)
 
       return {
+        troveExists: { message: validateLiquityTroveExists(), show: true },
         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)
@@ -159,20 +163,24 @@ export default defineComponent({
 
     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 inputAmountInWei = valInt(amountParsed.value, debtToken.value.decimals)
+        const totalDebtAmountInWei = valInt(changedDebt.value, debtToken.value.decimals)
+
+        const { upperHint, lowerHint } = await getTrovePositionHints(collateralInWei.value, totalDebtAmountInWei)
+
+        const spells = dsa.value.Spell()
+
+        const getId = 0
+        const setId = 0
+
+
+        spells.add({
+          connector: 'LIQUITY-A',
+          method: 'borrow',
+          args: [maxFeePercentageInWei.value, inputAmountInWei, upperHint, lowerHint, getId, setId],
+        })
+
         const txHash = await dsa.value.cast({
           spells,
           from: account.value,
@@ -180,6 +188,7 @@ export default defineComponent({
 
         showPendingTransaction(txHash)
       } catch (error) {
+        console.log(error)
         showWarning(error.message)
       }
 
@@ -189,28 +198,27 @@ export default defineComponent({
     }
 
     return {
-      pending,
-      cast,
-      errors,
       amount,
       status,
-      rootTokenKey,
+      liquidation,
-      token,
-      symbol,
-      balance,
-      formatNumber,
-      formatUsdMax,
-      formatUsd,
-      maxLiquidation,
       liquidationPrice,
       liquidationMaxPrice,
+      formatUsd,
+      formatUsdMax,
+      formatDecimal,
+      formatPercent,
+      errors,
       errorMessages,
       isValid,
-      annualPercentageRateTypes,
+      cast,
-      availableLiquidity,
+      pending,
-      borrowStableRate,
+      debtToken,
-      stableBorrowEnabled,
+      collateralToken,
-      rateType,
+      borrowFee,
+      borrowFeeAmount,
+      inputAmountWithFee,
+      changedDebt,
+      changedBalance,
     }
   },
 })

components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue

@@ -2,20 +2,20 @@
   <SidebarContextRootContainer>
     <template #title>Payback {{ debtToken.symbol }}</template>
 
-    <div class="mt-6 flex justify-around items-center w-full">
+    <div class="flex justify-around items-center w-full">
       <SidebarSectionValueWithIcon class="" label="Debt" center>
         <template #icon
-          ><IconCurrency :currency="debtToken.key" class="w-20 h-20" noHeight
+          ><IconCurrency :currency="debtToken.key" class="w-16 h-16" noHeight
         /></template>
         <template #value>{{ formatDecimal(changedDebt) }} {{ debtToken.symbol }}</template>
       </SidebarSectionValueWithIcon>
 
       <SidebarSectionValueWithIcon class="" label="Token Balance" center>
         <template #icon
-          ><IconCurrency :currency="collateralToken.key" class="w-20 h-20" noHeight
+          ><IconCurrency :currency="debtToken.key" class="w-16 h-16" noHeight
         /></template>
 
-        <template #value>{{ formatDecimal(changedBalance) }} {{ collateralToken.symbol }}</template>
+        <template #value>{{ formatDecimal(changedBalance) }} {{ debtToken.symbol }}</template>
       </SidebarSectionValueWithIcon>
     </div>
 
@@ -155,7 +155,7 @@ export default defineComponent({
     async function cast() {
       pending.value = true
 
-      const inputAmountInWei = valInt(amountParsed.value, collateralToken.value.decimals)
+      const inputAmountInWei = valInt(amountParsed.value, debtToken.value.decimals)
       const totalDebtAmountInWei = valInt(changedDebt.value, debtToken.value.decimals)
       const { upperHint, lowerHint } = await getTrovePositionHints(collateralInWei.value, totalDebtAmountInWei)