mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
Liquity Supply & Withdraw
This commit is contained in:
Georges KABBOUCHI
parent
ce18e4450e
commit
b5d680c043
217
components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue
Normal file
217
components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
205
components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue
Normal file
205
components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue
Normal file
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user