assembly/components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue

221 lines
7.1 KiB
Vue
Raw Normal View History

2021-08-10 14:17:20 +00:00
<template>
<SidebarContextRootContainer>
<template #title>Payback {{ symbol }}</template>
<div class="mt-6 flex justify-around items-center w-full">
<SidebarSectionValueWithIcon class="" label="Borrowed" center>
<template #icon
><IconCurrency :currency="daiTokenKey" class="w-20 h-20" noHeight
/></template>
<template #value>{{ formatNumber(debt) }} {{ symbol }}</template>
</SidebarSectionValueWithIcon>
<SidebarSectionValueWithIcon class="" label="Token Balance" center>
<template #icon
><IconCurrency :currency="daiTokenKey" class="w-20 h-20" noHeight
/></template>
2021-08-23 19:57:11 +00:00
<template #value>{{ formatNumber(balance) }} {{ symbol }}</template>
2021-08-10 14:17:20 +00:00
</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="liquidation"
:status="status"
/>
2021-08-23 19:57:11 +00:00
<SidebarSectionValueWithIcon
class="mt-8"
:label="`Liquidation Price (${tokenSymbol})`"
>
2021-08-10 14:17:20 +00:00
<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 { 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 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'
2021-08-13 20:58:50 +00:00
import { useMakerdaoPosition } from '~/composables/protocols/useMakerdaoPosition'
2021-08-10 14:17:20 +00:00
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, gte, plus, max, minus, min } = useBigNumber()
const { parseSafeFloat } = useParsing()
2021-08-23 19:57:11 +00:00
const { showPendingTransaction, showConfirmedTransaction, showWarning } = useNotification()
2021-08-10 14:17:20 +00:00
2021-08-23 19:57:11 +00:00
const { debt, collateral, liquidation, liquidationMaxPrice, vaultId, symbol: tokenSymbol, fetchPosition, minDebt } = useMakerdaoPosition()
2021-08-10 14:17:20 +00:00
const amount = ref('')
const amountParsed = computed(() => parseSafeFloat(amount.value))
const daiTokenKey = ref('dai')
const tokenKey = computed(() => props.tokenKey)
const token = computed(() => getTokenByKey(tokenKey.value))
const symbol = computed(() => token.value?.symbol)
const decimals = computed(() => token.value?.decimals)
const balance = computed(() => getBalanceByKey(tokenKey.value))
const balanceRaw = computed(() => getBalanceRawByKey(tokenKey.value))
2021-08-23 19:57:11 +00:00
const changedDebt = computed(() => max(minus(debt.value, amountParsed.value), '0').toFixed())
2021-08-10 14:17:20 +00:00
const { liquidationPrice, status } = useMakerdaoPosition(collateral, changedDebt)
const maxBalance = computed(() => min(balance.value, debt.value).toFixed())
const { toggle, isMaxAmount } = useMaxAmountActive(amount, maxBalance)
const { validateAmount, validateLiquidation, validateIsLoggedIn, validateMakerDebt } = useValidators()
const errors = computed(() => {
const hasAmountValue = !isZero(amount.value)
return {
amount: { message: validateAmount(amountParsed.value, maxBalance.value), show: hasAmountValue },
liquidation: { message: validateLiquidation(status.value, liquidation.value), show: hasAmountValue },
auth: { message: validateIsLoggedIn(!!account.value), show: true },
minDebt: { message: validateMakerDebt(changedDebt.value), show: hasAmountValue },
}
})
const { errorMessages, isValid } = useValidation(errors)
const pending = ref(false)
async function cast() {
pending.value = true
const amount = isMaxAmount.value
? gte(balance.value, balance.value)
2021-08-23 19:57:11 +00:00
? dsa.value.maxValue
2021-08-10 14:17:20 +00:00
: balanceRaw.value
: valInt(amountParsed.value, decimals.value)
const spells = dsa.value.Spell()
spells.add({
connector: 'maker',
method: 'payback',
args: [vaultId.value, amount, 0, 0],
})
2021-08-10 17:59:51 +00:00
try {
const txHash = await dsa.value.cast({
spells,
from: account.value,
2021-08-23 19:57:11 +00:00
onReceipt: async receipt => {
showConfirmedTransaction(receipt.transactionHash);
await fetchBalances(true);
await fetchPosition();
}
2021-08-10 17:59:51 +00:00
})
2021-08-10 14:17:20 +00:00
2021-08-10 17:59:51 +00:00
showPendingTransaction(txHash)
} catch (error) {
2021-08-23 19:57:11 +00:00
console.log(error);
2021-08-10 17:59:51 +00:00
showWarning(error.message)
}
2021-08-10 14:17:20 +00:00
pending.value = false
close()
}
return {
daiTokenKey,
symbol,
debt,
balance,
amount,
status,
liquidation,
liquidationPrice,
liquidationMaxPrice,
formatUsd,
formatUsdMax,
formatNumber,
errors,
errorMessages,
isMaxAmount,
isValid,
cast,
pending,
toggle,
tokenSymbol,
2021-08-23 19:57:11 +00:00
minDebt,
2021-08-10 14:17:20 +00:00
}
},
})
</script>