mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
MakerDAO Supply & Withdraw
This commit is contained in:
Georges KABBOUCHI
parent
ba86d37761
commit
e79ad82e84
194
components/sidebar/context/makerdao/SidebarMakerdaoSupply.vue
Normal file
194
components/sidebar/context/makerdao/SidebarMakerdaoSupply.vue
Normal file
|
|
@ -0,0 +1,194 @@
|
||||||
|
<template>
|
||||||
|
<SidebarContextRootContainer>
|
||||||
|
<template #title>Supply {{ symbol }}</template>
|
||||||
|
|
||||||
|
<SidebarSectionValueWithIcon label="Token Balance" center>
|
||||||
|
<template #icon
|
||||||
|
><IconCurrency :currency="tokenKey" class="w-20 h-20" noHeight
|
||||||
|
/></template>
|
||||||
|
<template #value>{{ formatDecimal(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="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 { useMakerdaoPosition } from '~/composables/useMakerdaoPosition'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
|
||||||
|
setup(props) {
|
||||||
|
const { close } = useSidebar()
|
||||||
|
const { account } = useWeb3()
|
||||||
|
const { dsa } = useDSA()
|
||||||
|
const { valInt } = useToken()
|
||||||
|
const { getBalanceByKey } = useBalances()
|
||||||
|
const { formatUsdMax, formatUsd, formatDecimal } = useFormatting()
|
||||||
|
const { plus, isZero } = useBigNumber()
|
||||||
|
const { parseSafeFloat } = useParsing()
|
||||||
|
const { showPendingTransaction } = useNotification()
|
||||||
|
|
||||||
|
|
||||||
|
const amount = ref('')
|
||||||
|
const amountParsed = computed(() => parseSafeFloat(amount.value))
|
||||||
|
|
||||||
|
const { tokenKey, token, debt, collateral, liquidation, liquidationMaxPrice, isNewVault, vaultId, vaultType } = useMakerdaoPosition()
|
||||||
|
|
||||||
|
const symbol = computed(() => token.value?.symbol)
|
||||||
|
const decimals = computed(() => token.value?.decimals)
|
||||||
|
const balance = computed(() => getBalanceByKey(tokenKey.value))
|
||||||
|
|
||||||
|
const changedCollateral = computed(() => plus(collateral.value, amountParsed.value).toFixed())
|
||||||
|
const { liquidationPrice, status } = useMakerdaoPosition(changedCollateral, debt)
|
||||||
|
|
||||||
|
const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
|
||||||
|
|
||||||
|
const { validateAmount, validateLiquidation, validateIsLoggedIn } = useValidators()
|
||||||
|
const errors = computed(() => {
|
||||||
|
const hasAmountValue = !isZero(amount.value)
|
||||||
|
|
||||||
|
return {
|
||||||
|
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
|
||||||
|
|
||||||
|
const amount = isMaxAmount.value ? dsa.value.maxValue : valInt(amountParsed.value, decimals.value)
|
||||||
|
|
||||||
|
const spells = dsa.value.Spell()
|
||||||
|
|
||||||
|
if (isNewVault.value) {
|
||||||
|
spells.add({
|
||||||
|
connector: 'maker',
|
||||||
|
method: 'open',
|
||||||
|
args: [vaultType.value],
|
||||||
|
})
|
||||||
|
|
||||||
|
spells.add({
|
||||||
|
connector: 'maker',
|
||||||
|
method: 'deposit',
|
||||||
|
args: [0, amount, 0, 0],
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
|
||||||
|
spells.add({
|
||||||
|
connector: 'maker',
|
||||||
|
method: 'deposit',
|
||||||
|
args: [vaultId.value, amount, 0, 0],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const txHash = await dsa.value.cast({
|
||||||
|
spells,
|
||||||
|
from: account.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
showPendingTransaction(txHash)
|
||||||
|
|
||||||
|
pending.value = false
|
||||||
|
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tokenKey,
|
||||||
|
symbol,
|
||||||
|
balance,
|
||||||
|
amount,
|
||||||
|
status,
|
||||||
|
liquidation,
|
||||||
|
liquidationPrice,
|
||||||
|
liquidationMaxPrice,
|
||||||
|
formatUsd,
|
||||||
|
formatUsdMax,
|
||||||
|
formatDecimal,
|
||||||
|
errors,
|
||||||
|
errorMessages,
|
||||||
|
isMaxAmount,
|
||||||
|
isValid,
|
||||||
|
cast,
|
||||||
|
pending,
|
||||||
|
toggle,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
180
components/sidebar/context/makerdao/SidebarMakerdaoWithdraw.vue
Normal file
180
components/sidebar/context/makerdao/SidebarMakerdaoWithdraw.vue
Normal file
|
|
@ -0,0 +1,180 @@
|
||||||
|
<template>
|
||||||
|
<SidebarContextRootContainer>
|
||||||
|
<template #title>Withdraw {{ symbol }}</template>
|
||||||
|
|
||||||
|
<SidebarSectionValueWithIcon label="Supplied" center>
|
||||||
|
<template #icon
|
||||||
|
><IconCurrency :currency="tokenKey" class="w-20 h-20" noHeight
|
||||||
|
/></template>
|
||||||
|
<template #value>{{ formatNumber(collateral) }} {{ 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, 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 { useMakerdaoPosition } from '~/composables/useMakerdaoPosition'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
|
||||||
|
setup(props) {
|
||||||
|
const { close } = useSidebar()
|
||||||
|
const { account } = useWeb3()
|
||||||
|
const { dsa } = useDSA()
|
||||||
|
const { valInt } = useToken()
|
||||||
|
const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
|
||||||
|
const { isZero, gt, plus, max, minus } = useBigNumber()
|
||||||
|
const { parseSafeFloat } = useParsing()
|
||||||
|
const { showPendingTransaction } = useNotification()
|
||||||
|
|
||||||
|
const amount = ref('')
|
||||||
|
const amountParsed = computed(() => parseSafeFloat(amount.value))
|
||||||
|
|
||||||
|
const { tokenKey, token, debt, collateral, liquidation, liquidationMaxPrice, vaultId } = useMakerdaoPosition()
|
||||||
|
|
||||||
|
const symbol = computed(() => token.value?.symbol)
|
||||||
|
const decimals = computed(() => token.value?.decimals)
|
||||||
|
|
||||||
|
const changedCollateral = computed(() => max(minus(collateral.value, amountParsed.value), '0').toFixed())
|
||||||
|
const { liquidationPrice, status } = useMakerdaoPosition(changedCollateral, debt)
|
||||||
|
|
||||||
|
const { toggle, isMaxAmount } = useMaxAmountActive(amount, collateral)
|
||||||
|
|
||||||
|
const { validateAmount, validateLiquidation, validateIsLoggedIn } = useValidators()
|
||||||
|
|
||||||
|
const errors = computed(() => {
|
||||||
|
const hasAmountValue = !isZero(amount.value)
|
||||||
|
|
||||||
|
return {
|
||||||
|
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 amount = isMaxAmount.value ? dsa.value.maxValue : valInt(amountParsed.value, decimals.value)
|
||||||
|
|
||||||
|
const spells = dsa.value.Spell()
|
||||||
|
|
||||||
|
spells.add({
|
||||||
|
connector: 'maker',
|
||||||
|
method: 'withdraw',
|
||||||
|
args: [vaultId.value, amount, 0, 0],
|
||||||
|
})
|
||||||
|
|
||||||
|
const txHash = await dsa.value.cast({
|
||||||
|
spells,
|
||||||
|
from: account.value,
|
||||||
|
})
|
||||||
|
|
||||||
|
showPendingTransaction(txHash)
|
||||||
|
|
||||||
|
pending.value = false
|
||||||
|
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tokenKey,
|
||||||
|
symbol,
|
||||||
|
collateral,
|
||||||
|
debt,
|
||||||
|
amount,
|
||||||
|
status,
|
||||||
|
liquidation,
|
||||||
|
liquidationPrice,
|
||||||
|
liquidationMaxPrice,
|
||||||
|
formatUsd,
|
||||||
|
formatUsdMax,
|
||||||
|
formatNumber,
|
||||||
|
errors,
|
||||||
|
errorMessages,
|
||||||
|
isMaxAmount,
|
||||||
|
isValid,
|
||||||
|
cast,
|
||||||
|
pending,
|
||||||
|
toggle,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -110,9 +110,6 @@ export function useMakerdaoPosition(collateralAmountRef: Ref =null, debtAmountRe
|
||||||
if (!activeAccount.value) {
|
if (!activeAccount.value) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(activeAccount.value.address);
|
|
||||||
|
|
||||||
vaults.value = await getVaults(activeAccount.value.address, web3.value);
|
vaults.value = await getVaults(activeAccount.value.address, web3.value);
|
||||||
if (vaults.value.length > 0) {
|
if (vaults.value.length > 0) {
|
||||||
vaultId.value = vaults.value[0].id;
|
vaultId.value = vaults.value[0].id;
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,8 @@ import SidebarCompoundSupply from '~/components/sidebar/context/compound/Sidebar
|
||||||
import SidebarCompoundBorrow from '~/components/sidebar/context/compound/SidebarCompoundBorrow.vue'
|
import SidebarCompoundBorrow from '~/components/sidebar/context/compound/SidebarCompoundBorrow.vue'
|
||||||
import SidebarCompoundPayback from '~/components/sidebar/context/compound/SidebarCompoundPayback.vue'
|
import SidebarCompoundPayback from '~/components/sidebar/context/compound/SidebarCompoundPayback.vue'
|
||||||
|
|
||||||
|
import SidebarMakerdaoSupply from '~/components/sidebar/context/makerdao/SidebarMakerdaoSupply.vue'
|
||||||
|
import SidebarMakerdaoWithdraw from '~/components/sidebar/context/makerdao/SidebarMakerdaoWithdraw.vue'
|
||||||
import SidebarMakerdaoBorrow from '~/components/sidebar/context/makerdao/SidebarMakerdaoBorrow.vue'
|
import SidebarMakerdaoBorrow from '~/components/sidebar/context/makerdao/SidebarMakerdaoBorrow.vue'
|
||||||
import SidebarMakerdaoPayback from '~/components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue'
|
import SidebarMakerdaoPayback from '~/components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue'
|
||||||
|
|
||||||
|
|
@ -51,8 +53,8 @@ const sidebars = {
|
||||||
"/mainnet/compound#payback": { component: SidebarCompoundPayback },
|
"/mainnet/compound#payback": { component: SidebarCompoundPayback },
|
||||||
|
|
||||||
"/mainnet/maker": { component: null },
|
"/mainnet/maker": { component: null },
|
||||||
"/mainnet/maker#withdraw": { component: null },
|
"/mainnet/maker#supply": { component: SidebarMakerdaoSupply },
|
||||||
"/mainnet/maker#supply": { component: null },
|
"/mainnet/maker#withdraw": { component: SidebarMakerdaoWithdraw },
|
||||||
"/mainnet/maker#borrow": { component: SidebarMakerdaoBorrow },
|
"/mainnet/maker#borrow": { component: SidebarMakerdaoBorrow },
|
||||||
"/mainnet/maker#payback": { component: SidebarMakerdaoPayback },
|
"/mainnet/maker#payback": { component: SidebarMakerdaoPayback },
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -115,10 +115,10 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
}, { immediate: true })
|
}, { immediate: true })
|
||||||
|
|
||||||
onErrorCaptured(() => {
|
// onErrorCaptured(() => {
|
||||||
|
|
||||||
return false
|
// return false
|
||||||
})
|
// })
|
||||||
|
|
||||||
return {
|
return {
|
||||||
active,
|
active,
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<template>
|
<template>
|
||||||
<SidebarMakerdaoPayback tokenKey="dai" />
|
<SidebarMakerdaoWithdraw />
|
||||||
</template>
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user