mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
Merge pull request #21 from Instadapp/liquity-stability-pool
Liquity Stability Pool
This commit is contained in:
Thrilok kumar
GitHub
commit
ec28145684
31
components/common/input/ButtonOutlined.vue
Normal file
31
components/common/input/ButtonOutlined.vue
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<button
|
||||
class="flex items-center justify-center flex-shrink-0 font-semibold whitespace-no-wrap transition-colors duration-75 ease-out select-none disabled:opacity-50 focus:outline-none rounded text-sm px-2 bg-white border dark:bg-dark-500"
|
||||
:disabled="disabled"
|
||||
:class="{
|
||||
'text-ocean-blue-pure border-grey-light dark:text-ocean-blue-pale dark:hover:border-ocean-blue-pale hover:border-ocean-blue-pure hover:bg-ocean-blue-light hover:bg-opacity-38 dark:hover:bg-ocean-blue-pure dark:hover:bg-opacity-25 active:bg-opacity-100 dark:active:bg-opacity-38': !disabled,
|
||||
'border-grey-light dark:border-opacity-50 text-grey-pure': disabled,
|
||||
'h-8': size === 'md',
|
||||
'h-6': size === 'sm'
|
||||
}"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<SVGSpinner v-if="loading" class="h-3 animate-spin-loading" />
|
||||
<slot v-else />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from '@nuxtjs/composition-api'
|
||||
import SVGSpinner from '@/assets/img/icons/spinner.svg?inline'
|
||||
|
||||
export default defineComponent({
|
||||
components : {SVGSpinner},
|
||||
props: {
|
||||
disabled: { type: Boolean, default: false },
|
||||
loading: { type: Boolean, default: false },
|
||||
size: { type: String, default: 'md' },
|
||||
},
|
||||
})
|
||||
</script>
|
||||
28
components/common/input/ButtonRadio.vue
Normal file
28
components/common/input/ButtonRadio.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<button
|
||||
:disabled="disabled"
|
||||
class="flex items-center justify-center flex-shrink-0 font-semibold whitespace-no-wrap transition-colors duration-75 ease-out select-none disabled:opacity-50 focus:outline-none rounded text-sm bg-white border"
|
||||
:class="{
|
||||
'text-ocean-blue-pure border-ocean-blue-pure dark:text-ocean-blue-pale dark:border-ocean-blue-pale':
|
||||
active && !disabled,
|
||||
'border-grey-light text-navi hover:text-ocean-blue-pure hover:border-ocean-blue-pure focus:text-ocean-blue-pure focus:border-ocean-blue-pure':
|
||||
!active && !disabled,
|
||||
'border-grey-pure text-grey-pure': disabled,
|
||||
}"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from '@nuxtjs/composition-api'
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
active: { type: Boolean, default: false },
|
||||
disabled: { type: Boolean, default: false },
|
||||
},
|
||||
})
|
||||
</script>
|
||||
164
components/protocols/liquity/CardLiquityStabilityPool.vue
Normal file
164
components/protocols/liquity/CardLiquityStabilityPool.vue
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<template>
|
||||
<div
|
||||
class="flex-shrink-0 bg-white rounded-lg relative flex flex-col flex-1 px-4 pt-4 pb-6 dark:bg-dark-500"
|
||||
style="box-shadow: -1px -3px 10px rgba(12, 25, 91, 0.03), 2px 4px 12px rgba(12, 25, 91, 0.05)"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<IconCurrency :currency="token.key" class="w-12 h-12" no-height />
|
||||
<div class="flex flex-col flex-grow mx-4">
|
||||
<div class="mb-1 font-medium leading-none whitespace-no-wrap text-19">
|
||||
{{ formatUsd(amountUsd) }}
|
||||
</div>
|
||||
<div class="flex leading-none whitespace-no-wrap">
|
||||
<span class="text-grey-pure text-14"
|
||||
>{{ formatDecimal(amount) }} {{ token.symbol }}</span
|
||||
>
|
||||
<Info
|
||||
:text="`${formatUsd(priceInUsd, 2)}/${token.symbol}`"
|
||||
icon="price"
|
||||
class="ml-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="self-start">
|
||||
<Badge :color="supplyNotZero ? 'green' : 'grey'" class="w-20">{{
|
||||
badge
|
||||
}}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<div class="flex items-center w-full px-4 mb-2">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div
|
||||
class="flex items-center font-medium leading-none whitespace-no-wrap text-14"
|
||||
>
|
||||
<span>Rewards</span>
|
||||
</div>
|
||||
<div class="flex items-center font-medium leading-none text-14">
|
||||
<div class="flex items-center mr-1">
|
||||
<IconCurrency currency="lqty" no-height class="w-5 h-5" />
|
||||
</div>
|
||||
<div class="mr-1">{{ formatDecimal(stabilityLqtyGain) }}</div>
|
||||
<div>LQTY</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center w-full px-4">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<div
|
||||
class="flex items-center font-medium leading-none whitespace-no-wrap text-14"
|
||||
>
|
||||
<span>Liquidation gain </span>
|
||||
</div>
|
||||
<div class="flex items-center font-medium leading-none text-14">
|
||||
<div class="flex items-center mr-1">
|
||||
<IconCurrency currency="eth" no-height class="w-5 h-5" />
|
||||
</div>
|
||||
<div class="mr-1">{{ formatDecimal(stabilityEthGain) }}</div>
|
||||
<div>ETH</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full px-4 mt-4">
|
||||
<ButtonOutlined
|
||||
class="flex-1"
|
||||
:loading="pendingStabilityClaimOnly"
|
||||
:disabled="claimOnlyDisabled"
|
||||
@click="stabilityClaimOnly"
|
||||
>Claim LQTY and ETH
|
||||
</ButtonOutlined>
|
||||
</div>
|
||||
<div class="flex w-full px-4 mt-2">
|
||||
<ButtonOutlined
|
||||
class="flex-1"
|
||||
:loading="pendingStabilityClaimAndMove"
|
||||
:disabled="claimAndMoveDisabled"
|
||||
@click="stabilityClaimAndMove"
|
||||
>Claim LQTY and move ETH to Trove</ButtonOutlined
|
||||
>
|
||||
</div>
|
||||
|
||||
<hr class="mt-4" />
|
||||
|
||||
<div class="flex items-center justify-around px-4 mt-6">
|
||||
<button
|
||||
class="mr-4 h-10 w-full bg-primary-blue-dark shadow text-white rounded-[4px] hover:bg-primary-blue-hover"
|
||||
@click="showSupply"
|
||||
>
|
||||
Supply
|
||||
</button>
|
||||
<button
|
||||
class="h-10 w-full text-primary-blue-dark shadow border border-primary-blue-dark hover:border-primary-blue-hover rounded-[4px] hover:text-primary-blue-hover"
|
||||
:disabled="!supplyNotZero"
|
||||
@click="showWithdraw"
|
||||
>
|
||||
Withdraw
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
|
||||
import { useFormatting } from '@/composables/useFormatting'
|
||||
import { useLiquityClaim } from '@/composables/protocols/useLiquityClaim'
|
||||
import { useBigNumber } from '~/composables/useBigNumber'
|
||||
import ButtonOutlined from '~/components/common/input/ButtonOutlined.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: { ButtonOutlined },
|
||||
props: {
|
||||
amount: { type: String, default: '0' },
|
||||
amountUsd: { type: String, default: '0' },
|
||||
token: { type: Object, default: () => { } },
|
||||
priceInUsd: { type: String, default: '0' },
|
||||
stabilityEthGain: { type: String, default: '0' },
|
||||
stabilityLqtyGain: { type: String, default: '0' },
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
const { app } = useContext()
|
||||
const { formatUsd, formatDecimal } = useFormatting()
|
||||
const { isZero } = useBigNumber()
|
||||
|
||||
const { stabilityClaimAndMove, pendingStabilityClaimAndMove, pendingStabilityClaimOnly, stabilityClaimOnly } =
|
||||
useLiquityClaim()
|
||||
|
||||
const claimAndMoveDisabled = computed(() => isZero(props.amount) || pendingStabilityClaimOnly.value)
|
||||
const claimOnlyDisabled = computed(() => isZero(props.amount) || pendingStabilityClaimAndMove.value)
|
||||
|
||||
const supplyNotZero = computed(() => !isZero(props.amount))
|
||||
|
||||
const badge = computed(() => (supplyNotZero.value ? 'Supplied' : 'No position'))
|
||||
|
||||
function showSupply() {
|
||||
app.router.push({ hash: 'pool-supply' })
|
||||
}
|
||||
|
||||
function showWithdraw() {
|
||||
if (!supplyNotZero.value) return
|
||||
|
||||
app.router.push({ hash: 'pool-withdraw' })
|
||||
}
|
||||
|
||||
return {
|
||||
formatUsd,
|
||||
formatDecimal,
|
||||
badge,
|
||||
showSupply,
|
||||
showWithdraw,
|
||||
supplyNotZero,
|
||||
stabilityClaimAndMove,
|
||||
pendingStabilityClaimAndMove,
|
||||
claimAndMoveDisabled,
|
||||
pendingStabilityClaimOnly,
|
||||
claimOnlyDisabled,
|
||||
stabilityClaimOnly,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
186
components/sidebar/context/liquity/SidebarLiquityPoolSupply.vue
Normal file
186
components/sidebar/context/liquity/SidebarLiquityPoolSupply.vue
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<SidebarContextRootContainer class="bg-[#C5CCE1] bg-opacity-[0.15]">
|
||||
<template #title>Supply to Stability Pool</template>
|
||||
|
||||
<div class="flex justify-around items-center w-full">
|
||||
<SidebarSectionValueWithIcon class="" label="Stability Pool Balance" center>
|
||||
<template #icon
|
||||
><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
|
||||
/></template>
|
||||
<template #value
|
||||
>{{ formatDecimal(changedPoolDeposit) }} {{ poolToken.symbol }}</template
|
||||
>
|
||||
</SidebarSectionValueWithIcon>
|
||||
|
||||
<SidebarSectionValueWithIcon class="" label="Token Balance" center>
|
||||
<template #icon
|
||||
><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
|
||||
/></template>
|
||||
|
||||
<template #value
|
||||
>{{ formatDecimal(changedBalance) }} {{ poolToken.symbol }}</template
|
||||
>
|
||||
</SidebarSectionValueWithIcon>
|
||||
</div>
|
||||
|
||||
<div class="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>
|
||||
|
||||
<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, ref, defineComponent } from '@nuxtjs/composition-api'
|
||||
import { useFormatting } from '~/composables/useFormatting'
|
||||
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
|
||||
import { useValidators } from '~/composables/useValidators'
|
||||
import { useValidation } from '~/composables/useValidation'
|
||||
import { useParsing } from '~/composables/useParsing'
|
||||
import { useBigNumber } from '~/composables/useBigNumber'
|
||||
import { useLiquityPosition } from '~/composables/protocols/useLiquityPosition'
|
||||
import { useBalances } from '~/composables/useBalances'
|
||||
import { useWeb3 } from '@instadapp/vue-web3'
|
||||
import { useNotification } from '~/composables/useNotification'
|
||||
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
|
||||
import InputNumeric from '~/components/common/input/InputNumeric.vue'
|
||||
import { useToken } from '~/composables/useToken'
|
||||
import { useDSA } from '~/composables/useDSA'
|
||||
import { useSidebar } from '~/composables/useSidebar'
|
||||
|
||||
export default defineComponent({
|
||||
components: { ButtonCTA, InputNumeric },
|
||||
setup() {
|
||||
const { account } = useWeb3()
|
||||
const { dsa } = useDSA()
|
||||
const { formatUsd, formatUsdMax, formatDecimal } = useFormatting()
|
||||
const { parseSafeFloat } = useParsing()
|
||||
const { plus, isZero, max, minus } = useBigNumber()
|
||||
const { getBalanceByKey, fetchBalances } = useBalances()
|
||||
const { valInt } = useToken()
|
||||
const { close } = useSidebar()
|
||||
const { showPendingTransaction, showConfirmedTransaction, showWarning } = useNotification()
|
||||
|
||||
const amount = ref('')
|
||||
const amountParsed = computed(() => parseSafeFloat(amount.value))
|
||||
|
||||
const { poolToken, stabilityAmount, fetchPosition } = useLiquityPosition()
|
||||
const balance = computed(() => getBalanceByKey(poolToken.value.key))
|
||||
|
||||
const changedPoolDeposit = computed(() => plus(stabilityAmount.value, amountParsed.value).toFixed())
|
||||
const changedBalance = computed(() => max(minus(balance.value, amountParsed.value), '0').toFixed())
|
||||
|
||||
const { toggle, isMaxAmount } = useMaxAmountActive(amount, balance)
|
||||
|
||||
const { validateAmount, validateIsLoggedIn } = useValidators()
|
||||
const errors = computed(() => {
|
||||
const hasAmountValue = !isZero(amount.value)
|
||||
|
||||
return {
|
||||
amount: { message: validateAmount(amountParsed.value, balance.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 supplyAmountInWei = valInt(amountParsed.value, poolToken.value.decimals)
|
||||
const getDepositId = 0
|
||||
const setDepositId = 0
|
||||
const setEthGainId = 0
|
||||
const setLqtyGainId = 0
|
||||
|
||||
const frontendTag = '0x0000000000000000000000000000000000000000'
|
||||
|
||||
const spells = dsa.value.Spell()
|
||||
|
||||
spells.add({
|
||||
connector: 'LIQUITY-A',
|
||||
method: 'stabilityDeposit',
|
||||
args: [supplyAmountInWei, frontendTag, getDepositId, setDepositId, setEthGainId, setLqtyGainId],
|
||||
})
|
||||
|
||||
|
||||
const txHash = await dsa.value.cast({
|
||||
spells,
|
||||
from: account.value,
|
||||
onReceipt: async receipt => {
|
||||
showConfirmedTransaction(receipt.transactionHash);
|
||||
|
||||
await fetchBalances(true);
|
||||
await fetchPosition();
|
||||
}
|
||||
})
|
||||
|
||||
showPendingTransaction(txHash)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showWarning(error.message)
|
||||
}
|
||||
|
||||
pending.value = false
|
||||
|
||||
close()
|
||||
}
|
||||
|
||||
return {
|
||||
symbol: computed(() => poolToken.value.symbol),
|
||||
balance,
|
||||
amount,
|
||||
changedPoolDeposit,
|
||||
poolToken,
|
||||
amountParsed,
|
||||
|
||||
isZero,
|
||||
formatUsd,
|
||||
formatUsdMax,
|
||||
formatDecimal,
|
||||
errors,
|
||||
errorMessages,
|
||||
isMaxAmount,
|
||||
isValid,
|
||||
cast,
|
||||
pending,
|
||||
toggle,
|
||||
changedBalance,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<template>
|
||||
<SidebarContextRootContainer class="bg-[#C5CCE1] bg-opacity-[0.15]">
|
||||
<template #title>Withdraw from Stability Pool</template>
|
||||
|
||||
<div class="flex justify-around items-center w-full">
|
||||
<SidebarSectionValueWithIcon class="" label="Stability Pool Balance" center>
|
||||
<template #icon
|
||||
><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
|
||||
/></template>
|
||||
<template #value
|
||||
>{{ formatDecimal(changedPoolDeposit) }}
|
||||
{{ poolToken.symbol }}</template
|
||||
>
|
||||
</SidebarSectionValueWithIcon>
|
||||
|
||||
<SidebarSectionValueWithIcon class="" label="Token Balance" center>
|
||||
<template #icon
|
||||
><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
|
||||
/></template>
|
||||
|
||||
<template #value
|
||||
>{{ formatDecimal(changedBalance) }} {{ poolToken.symbol }}</template
|
||||
>
|
||||
</SidebarSectionValueWithIcon>
|
||||
</div>
|
||||
|
||||
<div class="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>
|
||||
|
||||
<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, ref, defineComponent } from '@nuxtjs/composition-api'
|
||||
import { useFormatting } from '~/composables/useFormatting'
|
||||
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
|
||||
import { useValidators } from '~/composables/useValidators'
|
||||
import { useValidation } from '~/composables/useValidation'
|
||||
import { useParsing } from '~/composables/useParsing'
|
||||
import { useBigNumber } from '~/composables/useBigNumber'
|
||||
import { useLiquityPosition } from '~/composables/protocols/useLiquityPosition'
|
||||
import { useBalances } from '~/composables/useBalances'
|
||||
import { useWeb3 } from '@instadapp/vue-web3'
|
||||
import { useNotification } from '~/composables/useNotification'
|
||||
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
|
||||
import InputNumeric from '~/components/common/input/InputNumeric.vue'
|
||||
import { useToken } from '~/composables/useToken'
|
||||
import { useDSA } from '~/composables/useDSA'
|
||||
import { useSidebar } from '~/composables/useSidebar'
|
||||
|
||||
export default defineComponent({
|
||||
components: { ButtonCTA, InputNumeric },
|
||||
setup() {
|
||||
const { account } = useWeb3()
|
||||
const { dsa } = useDSA()
|
||||
const { formatUsd, formatUsdMax, formatDecimal } = useFormatting()
|
||||
const { parseSafeFloat } = useParsing()
|
||||
const { isZero, minus, max, plus } = useBigNumber()
|
||||
const { getBalanceByKey, fetchBalances } = useBalances()
|
||||
const { valInt } = useToken()
|
||||
const { close } = useSidebar()
|
||||
const { showPendingTransaction, showConfirmedTransaction, showWarning } = useNotification()
|
||||
|
||||
|
||||
const amount = ref('')
|
||||
const amountParsed = computed(() => parseSafeFloat(amount.value))
|
||||
|
||||
const { poolToken, stabilityAmount, fetchPosition } = useLiquityPosition()
|
||||
const balance = computed(() => getBalanceByKey(poolToken.value.key))
|
||||
|
||||
const changedPoolDeposit = computed(() => max(minus(stabilityAmount.value, amountParsed.value), '0').toFixed())
|
||||
const changedBalance = computed(() => plus(balance.value, amountParsed.value).toFixed())
|
||||
|
||||
const { toggle, isMaxAmount } = useMaxAmountActive(amount, stabilityAmount)
|
||||
|
||||
const { validateAmount, validateIsLoggedIn } = useValidators()
|
||||
|
||||
const errors = computed(() => {
|
||||
const hasAmountValue = !isZero(amount.value)
|
||||
|
||||
return {
|
||||
amount: { message: validateAmount(amountParsed.value, stabilityAmount.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 supplyAmountInWei = valInt(amountParsed.value, poolToken.value.decimals)
|
||||
|
||||
const getDepositId = 0
|
||||
const setDepositId = 0
|
||||
const setEthGainId = 0
|
||||
const setLqtyGainId = 0
|
||||
|
||||
const spells = dsa.value.Spell()
|
||||
spells.add({
|
||||
connector: 'LIQUITY-A',
|
||||
method: 'stabilityWithdraw',
|
||||
args: [supplyAmountInWei, getDepositId, setDepositId, setEthGainId, setLqtyGainId],
|
||||
})
|
||||
|
||||
|
||||
const txHash = await dsa.value.cast({
|
||||
spells,
|
||||
from: account.value,
|
||||
onReceipt: async receipt => {
|
||||
showConfirmedTransaction(receipt.transactionHash);
|
||||
|
||||
await fetchBalances(true);
|
||||
await fetchPosition();
|
||||
}
|
||||
})
|
||||
|
||||
showPendingTransaction(txHash)
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showWarning(error.message)
|
||||
}
|
||||
|
||||
pending.value = false
|
||||
|
||||
close()
|
||||
}
|
||||
|
||||
return {
|
||||
symbol: computed(() => poolToken.value.symbol),
|
||||
amount,
|
||||
status,
|
||||
formatUsd,
|
||||
formatUsdMax,
|
||||
formatDecimal,
|
||||
errors,
|
||||
errorMessages,
|
||||
isMaxAmount,
|
||||
isValid,
|
||||
cast,
|
||||
pending,
|
||||
toggle,
|
||||
poolToken,
|
||||
stabilityAmount,
|
||||
changedPoolDeposit,
|
||||
amountParsed,
|
||||
changedBalance,
|
||||
isZero,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
139
composables/protocols/useLiquityClaim.ts
Normal file
139
composables/protocols/useLiquityClaim.ts
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
import { useWeb3 } from "@instadapp/vue-web3";
|
||||
import { ref, computed } from "@nuxtjs/composition-api";
|
||||
import { useBalances } from "../useBalances";
|
||||
import { useBigNumber } from "../useBigNumber";
|
||||
import { useDSA } from "../useDSA";
|
||||
import { useNotification } from "../useNotification";
|
||||
import { useToken } from "../useToken";
|
||||
import { useLiquityPosition } from "./useLiquityPosition";
|
||||
|
||||
export function useLiquityClaim() {
|
||||
const { account } = useWeb3();
|
||||
const { getTokenByKey, valInt } = useToken();
|
||||
const { dsa } = useDSA();
|
||||
const { plus } = useBigNumber();
|
||||
const {
|
||||
stabilityEthGain,
|
||||
getTrovePositionHints,
|
||||
debtInWei,
|
||||
collateralInWei,
|
||||
fetchPosition
|
||||
} = useLiquityPosition();
|
||||
|
||||
const {
|
||||
showConfirmedTransaction,
|
||||
showPendingTransaction,
|
||||
showWarning,
|
||||
} = useNotification();
|
||||
const { fetchBalances } = useBalances();
|
||||
|
||||
const ethToken = computed(() => getTokenByKey("eth"));
|
||||
|
||||
const pendingStabilityClaimAndMove = ref(false);
|
||||
|
||||
async function stabilityClaimAndMove() {
|
||||
pendingStabilityClaimAndMove.value = true;
|
||||
|
||||
try {
|
||||
const amountInWei = valInt(
|
||||
stabilityEthGain.value,
|
||||
ethToken.value.decimals
|
||||
);
|
||||
const totalDepositAmountInWei = plus(
|
||||
collateralInWei.value,
|
||||
amountInWei
|
||||
).toFixed();
|
||||
|
||||
const { upperHint, lowerHint } = await getTrovePositionHints(
|
||||
totalDepositAmountInWei,
|
||||
debtInWei.value
|
||||
);
|
||||
|
||||
console.log({
|
||||
connector: "LIQUITY-A",
|
||||
method: "stabilityMoveEthGainToTrove",
|
||||
args: [upperHint, lowerHint]
|
||||
});
|
||||
|
||||
const spells = dsa.value.Spell();
|
||||
spells.add({
|
||||
connector: "LIQUITY-A",
|
||||
method: "stabilityMoveEthGainToTrove",
|
||||
args: [upperHint, lowerHint]
|
||||
});
|
||||
|
||||
const tx = await dsa.value.cast({
|
||||
spells,
|
||||
from: account.value,
|
||||
onReceipt: async receipt => {
|
||||
showConfirmedTransaction(receipt.transactionHash);
|
||||
|
||||
await fetchBalances(true);
|
||||
await fetchPosition();
|
||||
}
|
||||
});
|
||||
|
||||
showPendingTransaction(tx);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showWarning(error.message);
|
||||
}
|
||||
|
||||
pendingStabilityClaimAndMove.value = false;
|
||||
}
|
||||
|
||||
const pendingStabilityClaimOnly = ref(false);
|
||||
|
||||
async function stabilityClaimOnly() {
|
||||
pendingStabilityClaimOnly.value = true;
|
||||
|
||||
try {
|
||||
const supplyAmountInWei = 0;
|
||||
|
||||
const getDepositId = 0;
|
||||
const setDepositId = 0;
|
||||
const setEthGainId = 0;
|
||||
const setLqtyGainId = 0;
|
||||
|
||||
const spells = dsa.value.Spell();
|
||||
spells.add({
|
||||
connector: "LIQUITY-A",
|
||||
method: "stabilityWithdraw",
|
||||
args: [
|
||||
supplyAmountInWei,
|
||||
getDepositId,
|
||||
setDepositId,
|
||||
setEthGainId,
|
||||
setLqtyGainId
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
const tx = await dsa.value.cast({
|
||||
spells,
|
||||
from: account.value,
|
||||
onReceipt: async receipt => {
|
||||
showConfirmedTransaction(receipt.transactionHash);
|
||||
|
||||
await fetchBalances(true);
|
||||
await fetchPosition();
|
||||
}
|
||||
});
|
||||
|
||||
showPendingTransaction(tx);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
showWarning(error.message);
|
||||
}
|
||||
|
||||
pendingStabilityClaimOnly.value = false;
|
||||
}
|
||||
|
||||
return {
|
||||
stabilityClaimAndMove,
|
||||
pendingStabilityClaimAndMove,
|
||||
pendingStabilityClaimOnly,
|
||||
stabilityClaimOnly
|
||||
};
|
||||
}
|
||||
|
|
@ -60,6 +60,7 @@ export function useLiquityPosition(
|
|||
|
||||
const collateralToken = computed(() => getTokenByKey("eth"));
|
||||
const debtToken = computed(() => getTokenByKey("lusd"));
|
||||
const poolToken = computed(() => getTokenByKey('lusd'))
|
||||
const stakingToken = computed(() => getTokenByKey("lqty"));
|
||||
|
||||
const collateral = computed(() => trove.value.collateral);
|
||||
|
|
@ -74,6 +75,9 @@ export function useLiquityPosition(
|
|||
times(collateral.value, priceInUsd.value).toFixed()
|
||||
);
|
||||
const stabilityAmount = computed(() => trove.value.stabilityAmount);
|
||||
const stabilityEthGain = computed(() => trove.value.stabilityEthGain)
|
||||
const stabilityLqtyGain = computed(() => trove.value.stabilityLqtyGain)
|
||||
|
||||
const debtUsd = computed(() => times(debt.value, "1").toFixed());
|
||||
const stabilityAmountUsd = computed(() =>
|
||||
times(stabilityAmount.value, "1").toFixed()
|
||||
|
|
@ -224,6 +228,10 @@ export function useLiquityPosition(
|
|||
priceInUsd,
|
||||
debt,
|
||||
debtInWei,
|
||||
poolToken,
|
||||
stabilityAmount,
|
||||
stabilityEthGain,
|
||||
stabilityLqtyGain,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ import SidebarLiquityTroveSupply from '~/components/sidebar/context/liquity/Side
|
|||
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'
|
||||
import SidebarLiquityPoolSupply from '~/components/sidebar/context/liquity/SidebarLiquityPoolSupply.vue'
|
||||
import SidebarLiquityPoolWithdraw from '~/components/sidebar/context/liquity/SidebarLiquityPoolWithdraw.vue'
|
||||
|
||||
import SidebarReflexerCollateral from '~/components/sidebar/context/reflexer/SidebarReflexerCollateral.vue'
|
||||
import SidebarReflexerSupply from '~/components/sidebar/context/reflexer/SidebarReflexerSupply.vue'
|
||||
|
|
@ -78,6 +80,8 @@ const sidebars = {
|
|||
'/mainnet/liquity#trove-withdraw': { component: SidebarLiquityTroveWithdraw },
|
||||
'/mainnet/liquity#trove-borrow': { component: SidebarLiquityTroveBorrow },
|
||||
'/mainnet/liquity#trove-payback': { component: SidebarLiquityTrovePayback },
|
||||
'/mainnet/liquity#pool-supply': { component: SidebarLiquityPoolSupply },
|
||||
'/mainnet/liquity#pool-withdraw': { component: SidebarLiquityPoolWithdraw },
|
||||
|
||||
"/mainnet/reflexer": { component: null },
|
||||
'/mainnet/reflexer#collateral': { component: SidebarReflexerCollateral },
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</nuxt-link>
|
||||
</div>
|
||||
|
||||
<div class="mt-10 flex items-center justify-between">
|
||||
<div class="mt-10 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
|
||||
|
|
@ -124,46 +124,89 @@
|
|||
>
|
||||
<h2 class="text-primary-gray text-lg font-semibold">Your Positions</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content px-1"
|
||||
>
|
||||
<CardLiquityTrove
|
||||
v-if="troveOpened"
|
||||
:collateral="collateral"
|
||||
:amount-usd="collateralUsd"
|
||||
:price-in-usd="priceInUsd"
|
||||
position-type="supply"
|
||||
:token="collateralToken"
|
||||
/>
|
||||
|
||||
<CardLiquityTrove
|
||||
v-if="troveOpened"
|
||||
:debt="debt"
|
||||
:collateral="collateral"
|
||||
:amount-usd="debt"
|
||||
price-in-usd="1"
|
||||
position-type="borrow"
|
||||
:token="debtToken"
|
||||
/>
|
||||
|
||||
<button-dashed
|
||||
v-if="!troveOpened"
|
||||
color="ocean-blue"
|
||||
class="col-span-full"
|
||||
height="80px"
|
||||
full-width
|
||||
@click="openNewTrove"
|
||||
<div class="mt-3">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex mt-3 space-x-4 h-7">
|
||||
<ButtonRadio
|
||||
class="relative overflow-hidden w-24 sm:w-28"
|
||||
:active="isActive(Sections.TROVE)"
|
||||
@click="selectSection(Sections.TROVE)"
|
||||
>
|
||||
Trove
|
||||
</ButtonRadio>
|
||||
<ButtonRadio
|
||||
class="relative overflow-hidden w-24 sm:w-28"
|
||||
:active="isActive(Sections.POOL)"
|
||||
@click="selectSection(Sections.POOL)"
|
||||
>
|
||||
Stability Pool
|
||||
</ButtonRadio>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="isActive(Sections.TROVE)"
|
||||
:key="Sections.TROVE"
|
||||
class="mt-3 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content"
|
||||
>
|
||||
<SVGAdd class="w-3 mr-2" />
|
||||
Open Trove
|
||||
</button-dashed>
|
||||
<CardLiquityTrove
|
||||
v-if="troveOpened"
|
||||
:collateral="collateral"
|
||||
:amount-usd="collateralUsd"
|
||||
:price-in-usd="priceInUsd"
|
||||
position-type="supply"
|
||||
:token="collateralToken"
|
||||
/>
|
||||
|
||||
<CardLiquityTrove
|
||||
v-if="troveOpened"
|
||||
:debt="debt"
|
||||
:collateral="collateral"
|
||||
:amount-usd="debt"
|
||||
price-in-usd="1"
|
||||
position-type="borrow"
|
||||
:token="debtToken"
|
||||
/>
|
||||
|
||||
<button-dashed
|
||||
v-if="!troveOpened"
|
||||
color="ocean-blue"
|
||||
class="col-span-full"
|
||||
height="80px"
|
||||
full-width
|
||||
@click="openNewTrove"
|
||||
>
|
||||
<SVGAdd class="w-3 mr-2" />
|
||||
Open Trove
|
||||
</button-dashed>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isActive(Sections.POOL)"
|
||||
:key="Sections.POOL"
|
||||
class="mt-3 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xxl:gap-6 min-w-max-content"
|
||||
>
|
||||
<card-liquity-stability-pool
|
||||
:amount="stabilityAmount"
|
||||
:amount-usd="stabilityAmount"
|
||||
:stability-eth-gain="stabilityEthGain"
|
||||
:stability-lqty-gain="stabilityLqtyGain"
|
||||
price-in-usd="1"
|
||||
:token="poolToken"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, useRouter } from "@nuxtjs/composition-api";
|
||||
import {
|
||||
defineComponent,
|
||||
computed,
|
||||
useRouter,
|
||||
ref
|
||||
} from "@nuxtjs/composition-api";
|
||||
import BackIcon from "~/assets/icons/back.svg?inline";
|
||||
import SVGBalance from "@/assets/img/icons/balance.svg?inline";
|
||||
import SVGPercent from "@/assets/img/icons/percent.svg?inline";
|
||||
|
|
@ -176,6 +219,14 @@ import { useStatus } from "~/composables/useStatus";
|
|||
import { useBigNumber } from "~/composables/useBigNumber";
|
||||
import CardLiquityTrove from "~/components/protocols/liquity/CardLiquityTrove.vue";
|
||||
import ButtonCTAOutlined from "~/components/common/input/ButtonCTAOutlined.vue";
|
||||
import ButtonRadio from "~/components/common/input/ButtonRadio.vue";
|
||||
import CardLiquityStabilityPool from "~/components/protocols/liquity/CardLiquityStabilityPool.vue";
|
||||
|
||||
const Sections = Object.freeze({
|
||||
TROVE: "trove",
|
||||
POOL: "pool"
|
||||
// STAKING: 'staking',
|
||||
});
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
|
|
@ -187,11 +238,13 @@ export default defineComponent({
|
|||
SVGPercent,
|
||||
CardLiquityTrove,
|
||||
ButtonCTAOutlined,
|
||||
ButtonRadio,
|
||||
CardLiquityStabilityPool
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
|
||||
const { div, isZero, gt, lt } = useBigNumber();
|
||||
const { div } = useBigNumber();
|
||||
|
||||
const {
|
||||
formatUsd,
|
||||
|
|
@ -213,9 +266,23 @@ export default defineComponent({
|
|||
priceInUsd,
|
||||
debt,
|
||||
debtToken,
|
||||
collateralToken
|
||||
collateralToken,
|
||||
poolToken,
|
||||
stabilityAmount,
|
||||
stabilityEthGain,
|
||||
stabilityLqtyGain,
|
||||
} = useLiquityPosition();
|
||||
|
||||
const currentSection = ref(Sections.TROVE);
|
||||
|
||||
function isActive(section) {
|
||||
return currentSection.value === section;
|
||||
}
|
||||
|
||||
function selectSection(section) {
|
||||
currentSection.value = section;
|
||||
}
|
||||
|
||||
const statusLiquidationRatio = computed(() =>
|
||||
div(status.value, liquidation.value).toFixed()
|
||||
);
|
||||
|
|
@ -248,8 +315,15 @@ export default defineComponent({
|
|||
debt,
|
||||
debtToken,
|
||||
collateralToken,
|
||||
poolToken,
|
||||
stabilityAmount,
|
||||
stabilityEthGain,
|
||||
stabilityLqtyGain,
|
||||
|
||||
openNewTrove
|
||||
Sections,
|
||||
openNewTrove,
|
||||
isActive,
|
||||
selectSection,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user