mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
working state
This commit is contained in:
shmuel
parent
e61741f326
commit
1b4808be30
24
assets/icons/b-protocol.svg
Normal file
24
assets/icons/b-protocol.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
<svg viewBox="0 0 56 45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<polygon id="path-1" points="0.37603442 0.491832026 21.8015076 0.491832026 21.8015076 18.9725662 0.37603442 18.9725662"></polygon>
|
||||||
|
<polygon id="path-3" points="0.138736807 0.266976014 24.7335133 0.266976014 24.7335133 27.8069775 0.138736807 27.8069775"></polygon>
|
||||||
|
</defs>
|
||||||
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||||
|
<g id="BProtocol-|-Desktop-HP-Final" transform="translate(-88.000000, -3794.000000)">
|
||||||
|
<g id="Group-11" transform="translate(88.000000, 3794.000000)">
|
||||||
|
<path d="M22.9420524,19.9199747 L14.743556,11.7214782 L1.04094726,25.4227909 C-0.346420818,26.811455 -0.346420818,29.0626071 1.04094726,30.4512712 L9.24009169,38.6497676 L22.9420524,24.9484549 C24.3307165,23.5597908 24.3307165,21.3086387 22.9420524,19.9199747" id="Fill-1" fill="white">
|
||||||
|
</path><g id="Group-5" transform="translate(16.200001, 0.156298)">
|
||||||
|
<mask id="mask-2" fill="white">
|
||||||
|
<use xlink:href="#path-1"></use>
|
||||||
|
</mask>
|
||||||
|
<g id="Clip-4">
|
||||||
|
</g>
|
||||||
|
<path d="M13.6030111,17.9310682 L21.8015076,9.73257172 L13.6030111,1.53277928 C12.214347,0.144763208 9.96384293,0.144763208 8.57517885,1.53277928 L0.37603442,9.73257172 L8.57517885,17.9310682 C9.96384293,19.3197322 12.214347,19.3197322 13.6030111,17.9310682" id="Fill-3" fill="white" mask="url(#mask-2)">
|
||||||
|
</path>
|
||||||
|
</g>
|
||||||
|
<path d="M24.7753093,26.7809342 L16.5761649,34.9794307 L24.7753093,43.1792231 C26.1639734,44.5672392 28.4144775,44.5672392 29.8031416,43.1792231 L38.001638,34.9794307 L29.8031416,26.7809342 C28.4144775,25.3922701 26.1639734,25.3922701 24.7753093,26.7809342" id="Fill-6" fill="white">
|
||||||
|
</path>
|
||||||
|
<g id="Group-10" transform="translate(30.456002, 5.340298)">
|
||||||
|
<mask id="mask-4" fill="white"><use xlink:href="#path-3"></use></mask>
|
||||||
|
<g id="Clip-9"></g><path d="M23.6925661,8.46547245 L15.4940696,0.266976014 L1.17974886,14.5800008 C-0.208267211,15.9680168 -0.208267211,18.219817 1.17974886,19.607833 L9.3788933,27.8069775 L23.6925661,13.4933047 C25.0812301,12.1052886 25.0812301,9.85413652 23.6925661,8.46547245" id="Fill-8" fill="white" mask="url(#mask-4)"></path></g></g></g></g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
139
components/protocols/bprotocol/CardBprotocolBamm.vue
Normal file
139
components/protocols/bprotocol/CardBprotocolBamm.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
<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, 2) }}
|
||||||
|
</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 w-full px-4 mt-4">
|
||||||
|
<ButtonOutlined
|
||||||
|
class="flex-1"
|
||||||
|
:loading="pendingLqtyClaim"
|
||||||
|
:disabled="false"
|
||||||
|
@click="claimLqty"
|
||||||
|
>Claim LQTY
|
||||||
|
</ButtonOutlined>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="my-4" />
|
||||||
|
|
||||||
|
<div v-if="parseFloat(ethUserBalance) > 0.0001" class="flex items-center w-full px-4 mb-2">
|
||||||
|
<div class="flex items-start justify-between w-full">
|
||||||
|
<div
|
||||||
|
class="flex font-medium leading-none whitespace-no-wrap text-14"
|
||||||
|
>
|
||||||
|
<span>Your Deposit</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="flex items-center font-medium leading-none text-14 ">
|
||||||
|
<div class="flex items-center mr-1">
|
||||||
|
<IconCurrency currency="lusd" no-height class="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div class="mr-1">{{ formatDecimal(lusdUserBalance) }}</div>
|
||||||
|
<div>LUSD</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center font-medium leading-none text-14 mt-2">
|
||||||
|
<div class="flex items-center mr-1">
|
||||||
|
<IconCurrency currency="eth" no-height class="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div class="mr-1">{{ formatDecimal(ethUserBalance) }}</div>
|
||||||
|
<div>ETH</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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="$router.push({ hash: 'deposit'})"
|
||||||
|
>
|
||||||
|
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="$router.push({ hash: 'withdraw'})"
|
||||||
|
>
|
||||||
|
Withdraw
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
|
||||||
|
import { useFormatting } from '@/composables/useFormatting'
|
||||||
|
import { useBprotocolLqtyClaim } from '@/composables/protocols/useBprotocolLqtyClaim'
|
||||||
|
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' },
|
||||||
|
ethUserBalance: { type: String, default: '0' },
|
||||||
|
stabilityLqtyGain: { type: String, default: '0' },
|
||||||
|
lusdUserBalance: { type: String, default: '0' }
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props) {
|
||||||
|
const { app } = useContext()
|
||||||
|
const { formatUsd, formatDecimal } = useFormatting()
|
||||||
|
const { isZero } = useBigNumber()
|
||||||
|
|
||||||
|
const { claimLqty, pendingLqtyClaim } = useBprotocolLqtyClaim()
|
||||||
|
|
||||||
|
const claimLqtyDisabled = computed(() => isZero(props.amount) || pendingLqtyClaim.value)
|
||||||
|
|
||||||
|
const supplyNotZero = computed(() => !isZero(props.amount))
|
||||||
|
|
||||||
|
const badge = computed(() => (supplyNotZero.value ? 'Supplied' : 'No position'))
|
||||||
|
|
||||||
|
return {
|
||||||
|
formatUsd,
|
||||||
|
formatDecimal,
|
||||||
|
badge,
|
||||||
|
supplyNotZero,
|
||||||
|
pendingLqtyClaim,
|
||||||
|
claimLqty: () => claimLqtyDisabled.value ? null : claimLqty()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
216
components/sidebar/context/bprotocol/SidebarBprotocolDeposit.vue
Normal file
216
components/sidebar/context/bprotocol/SidebarBprotocolDeposit.vue
Normal file
|
|
@ -0,0 +1,216 @@
|
||||||
|
<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="USD balance" center>
|
||||||
|
<template #icon
|
||||||
|
><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
|
||||||
|
/></template>
|
||||||
|
<template #value
|
||||||
|
>{{ formatDecimal(changedBammDeposit, 2) }} USD</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 v-if="parseFloat(ethUserBalance) > 0.0001">
|
||||||
|
|
||||||
|
<div class="flex items-center w-full px-4 mb-2 mt-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>Balance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center w-full px-4 mb-2 mt-4">
|
||||||
|
<div class="flex items-center justify-between w-full">
|
||||||
|
<div class="flex items-center font-medium leading-none text-14">
|
||||||
|
<div class="flex items-center mr-1">
|
||||||
|
<IconCurrency currency="lusd" no-height class="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div class="mr-1">{{ formatDecimal(newLusdBalance) }}</div>
|
||||||
|
<div>LUSD</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 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(newEthBalance) }}</div>
|
||||||
|
<div>ETH</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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'
|
||||||
|
import { useBprotocolPosition } from '~/composables/protocols/useBprotocolPositions'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { ButtonCTA, InputNumeric },
|
||||||
|
setup() {
|
||||||
|
const { fetchUserData, userBammInUsd, ethUserBalance, lusdUserBalance, absolutlWithdrawAmountInLusd, absolutlWithdrawAmountInEth } = useBprotocolPosition()
|
||||||
|
const { account } = useWeb3()
|
||||||
|
const { dsa } = useDSA()
|
||||||
|
const { 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 newEthBalance = computed(() => plus(absolutlWithdrawAmountInEth(amountParsed.value), ethUserBalance.value))
|
||||||
|
const newLusdBalance = computed(() => plus(absolutlWithdrawAmountInLusd(amountParsed.value), lusdUserBalance.value))
|
||||||
|
|
||||||
|
const changedBammDeposit = computed(() => plus(userBammInUsd.value, amountParsed.value).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: 'B-LIQUITY-A',
|
||||||
|
method: 'deposit',
|
||||||
|
args: [supplyAmountInWei, 0, getDepositId, setDepositId],
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const txHash = await dsa.value.cast({
|
||||||
|
spells,
|
||||||
|
from: account.value,
|
||||||
|
onReceipt: async receipt => {
|
||||||
|
showConfirmedTransaction(receipt.transactionHash);
|
||||||
|
|
||||||
|
await fetchBalances(true);
|
||||||
|
await fetchUserData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
showPendingTransaction(txHash)
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
showWarning(error.message)
|
||||||
|
}
|
||||||
|
|
||||||
|
pending.value = false
|
||||||
|
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
symbol: computed(() => poolToken.value.symbol),
|
||||||
|
balance,
|
||||||
|
amount,
|
||||||
|
changedBammDeposit,
|
||||||
|
poolToken,
|
||||||
|
amountParsed,
|
||||||
|
formatDecimal,
|
||||||
|
errors,
|
||||||
|
errorMessages,
|
||||||
|
isMaxAmount,
|
||||||
|
isValid,
|
||||||
|
cast,
|
||||||
|
pending,
|
||||||
|
toggle,
|
||||||
|
newEthBalance,
|
||||||
|
newLusdBalance,
|
||||||
|
ethUserBalance
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
<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="USD balance" center>
|
||||||
|
<template #icon
|
||||||
|
><IconCurrency :currency="poolToken.key" class="w-16 h-16" noHeight
|
||||||
|
/></template>
|
||||||
|
<template #value
|
||||||
|
>{{ formatDecimal(changedPoolDeposit, 2) }} USD</template
|
||||||
|
>
|
||||||
|
</SidebarSectionValueWithIcon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="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>
|
||||||
|
|
||||||
|
<div v-if="parseFloat(ethUserBalance) > 0.0001">
|
||||||
|
|
||||||
|
<div class="flex items-center w-full px-4 mb-2 mt-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>Receive</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center w-full px-4 mb-2 mt-4">
|
||||||
|
<div class="flex items-center justify-between w-full">
|
||||||
|
<div class="flex items-center font-medium leading-none text-14">
|
||||||
|
<div class="flex items-center mr-1">
|
||||||
|
<IconCurrency currency="lusd" no-height class="w-5 h-5" />
|
||||||
|
</div>
|
||||||
|
<div class="mr-1">{{ formatDecimal(lusdWithdrawAmount) }}</div>
|
||||||
|
<div>LUSD</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 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(ethWithdrawAmount) }}</div>
|
||||||
|
<div>ETH</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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'
|
||||||
|
import { useBprotocolPosition } from '~/composables/protocols/useBprotocolPositions'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { ButtonCTA, InputNumeric },
|
||||||
|
setup() {
|
||||||
|
const { userBammInUsd, fetchUserData, userBamm, lusdWithdrawAmountToBamm, absolutlWithdrawAmountInLusd, absolutlWithdrawAmountInEth, ethUserBalance } = useBprotocolPosition()
|
||||||
|
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(userBammInUsd.value, amountParsed.value), '0').toFixed())
|
||||||
|
const ethWithdrawAmount = computed(() => absolutlWithdrawAmountInEth(amountParsed.value))
|
||||||
|
const lusdWithdrawAmount = computed(() => absolutlWithdrawAmountInLusd(amountParsed.value))
|
||||||
|
|
||||||
|
const { toggle, isMaxAmount } = useMaxAmountActive(amount, userBammInUsd)
|
||||||
|
|
||||||
|
const { validateAmount, validateIsLoggedIn } = useValidators()
|
||||||
|
|
||||||
|
const errors = computed(() => {
|
||||||
|
const hasAmountValue = !isZero(amount.value)
|
||||||
|
|
||||||
|
return {
|
||||||
|
amount: { message: validateAmount(amountParsed.value, userBammInUsd.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(lusdWithdrawAmountToBamm(amountParsed.value), 18)
|
||||||
|
debugger
|
||||||
|
const getDepositId = 0
|
||||||
|
const setDepositId = 0
|
||||||
|
const setEthGainId = 0
|
||||||
|
const setLqtyGainId = 0
|
||||||
|
|
||||||
|
const spells = dsa.value.Spell()
|
||||||
|
spells.add({
|
||||||
|
connector: 'B-LIQUITY-A',
|
||||||
|
method: 'withdraw',
|
||||||
|
args: [supplyAmountInWei, 0, setDepositId, setEthGainId],
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const txHash = await dsa.value.cast({
|
||||||
|
spells,
|
||||||
|
from: account.value,
|
||||||
|
onReceipt: async receipt => {
|
||||||
|
showConfirmedTransaction(receipt.transactionHash);
|
||||||
|
|
||||||
|
await fetchBalances(true);
|
||||||
|
await fetchUserData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
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,
|
||||||
|
changedPoolDeposit,
|
||||||
|
amountParsed,
|
||||||
|
isZero,
|
||||||
|
ethWithdrawAmount,
|
||||||
|
lusdWithdrawAmount,
|
||||||
|
ethUserBalance
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -26,7 +26,7 @@
|
||||||
|
|
||||||
<div class="mt-10 p-8">
|
<div class="mt-10 p-8">
|
||||||
<h3 class="text-primary-gray text-xs font-semibold mb-2.5">
|
<h3 class="text-primary-gray text-xs font-semibold mb-2.5">
|
||||||
Amount to supply
|
Amount to withdraw
|
||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<input-numeric
|
<input-numeric
|
||||||
|
|
|
||||||
62
composables/protocols/useBprotocolLqtyClaim.ts
Normal file
62
composables/protocols/useBprotocolLqtyClaim.ts
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import { useWeb3 } from "@instadapp/vue-web3";
|
||||||
|
import { ref, computed } from "@nuxtjs/composition-api";
|
||||||
|
import { useBalances } from "../useBalances";
|
||||||
|
import { useDSA } from "../useDSA";
|
||||||
|
import { useNotification } from "../useNotification";
|
||||||
|
import { useBprotocolPosition } from "./useBprotocolPositions";
|
||||||
|
|
||||||
|
export function useBprotocolLqtyClaim() {
|
||||||
|
const { account } = useWeb3();
|
||||||
|
const { dsa } = useDSA();
|
||||||
|
const {
|
||||||
|
fetchUserData
|
||||||
|
} = useBprotocolPosition();
|
||||||
|
|
||||||
|
const {
|
||||||
|
showConfirmedTransaction,
|
||||||
|
showPendingTransaction,
|
||||||
|
showWarning,
|
||||||
|
} = useNotification();
|
||||||
|
const { fetchBalances } = useBalances();
|
||||||
|
|
||||||
|
const pendingLqtyClaim = ref(false);
|
||||||
|
|
||||||
|
async function claimLqty() {
|
||||||
|
debugger
|
||||||
|
pendingLqtyClaim.value = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
const spells = dsa.value.Spell();
|
||||||
|
spells.add({
|
||||||
|
connector: 'B-LIQUITY-A',
|
||||||
|
method: 'withdraw',
|
||||||
|
args: [0, 0, 0, 0],
|
||||||
|
})
|
||||||
|
|
||||||
|
const tx = await dsa.value.cast({
|
||||||
|
spells,
|
||||||
|
from: account.value,
|
||||||
|
onReceipt: async receipt => {
|
||||||
|
showConfirmedTransaction(receipt.transactionHash);
|
||||||
|
|
||||||
|
await fetchBalances(true);
|
||||||
|
await fetchUserData();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
showPendingTransaction(tx);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
showWarning(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
pendingLqtyClaim.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
claimLqty,
|
||||||
|
pendingLqtyClaim,
|
||||||
|
};
|
||||||
|
}
|
||||||
155
composables/protocols/useBprotocolPositions.ts
Normal file
155
composables/protocols/useBprotocolPositions.ts
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
import { computed, Ref, ref, watch } from "@nuxtjs/composition-api";
|
||||||
|
import { useBalances } from "../useBalances";
|
||||||
|
import { useBigNumber } from "../useBigNumber";
|
||||||
|
import { useToken } from "../useToken";
|
||||||
|
import { useWeb3 } from "@instadapp/vue-web3";
|
||||||
|
import { AbiItem } from "web3-utils";
|
||||||
|
import BigNumber from "bignumber.js";
|
||||||
|
BigNumber.config({ POW_PRECISION: 200 });
|
||||||
|
import abis from "~/constant/abis";
|
||||||
|
import addresses from "~/constant/addresses";
|
||||||
|
import { useDSA } from "../useDSA";
|
||||||
|
import useEventBus from "../useEventBus";
|
||||||
|
|
||||||
|
export const userData = ref<any>({
|
||||||
|
bammTotalSupply: "0",
|
||||||
|
bammUserBalance: "0",
|
||||||
|
ethTotal: "0",
|
||||||
|
ethUserBalance: "0",
|
||||||
|
lusdPrice: "0",
|
||||||
|
lusdTotal: "0",
|
||||||
|
lusdUserBalance: "0",
|
||||||
|
unclaimedLqty: "0"
|
||||||
|
});
|
||||||
|
|
||||||
|
const fromWei = (n) => new BigNumber(n).dividedBy(1e18).toString();
|
||||||
|
const toWei = (n) => new BigNumber(n).multipliedBy(1e18).toString();
|
||||||
|
|
||||||
|
export function useBprotocolPosition (){
|
||||||
|
const { activeAccount } = useDSA();
|
||||||
|
const { library } = useWeb3();
|
||||||
|
const { onEvent } = useEventBus()
|
||||||
|
const { getTokenByKey } = useToken();
|
||||||
|
|
||||||
|
const bammToken = computed(() => getTokenByKey('lusd'))
|
||||||
|
const ethPrice = computed(() => fromWei(userData.value.lusdPrice)) // wrong mapping
|
||||||
|
const bammTotalSupply = computed(() => fromWei(userData.value.bammTotalSupply));
|
||||||
|
const bammUserBalance = computed(() => fromWei(userData.value.bammUserBalance));
|
||||||
|
const ethTotal = computed(() => fromWei(userData.value.ethTotal));
|
||||||
|
const ethUserBalance = computed(() => fromWei(userData.value.ethUserBalance));
|
||||||
|
const lusdTotal = computed(() => fromWei(userData.value.lusdTotal));
|
||||||
|
const lusdUserBalance = computed(() => fromWei(userData.value.lusdUserBalance));
|
||||||
|
const unclaimedLqty = computed(() => fromWei(userData.value.unclaimedLqty));
|
||||||
|
const userBammInUsd = computed(() => {
|
||||||
|
if(userData.value.bammTotalSupply === "0"){
|
||||||
|
return "0"
|
||||||
|
}
|
||||||
|
const userEthInUsd = new BigNumber(userData.value.ethUserBalance).multipliedBy(ethPrice.value)
|
||||||
|
return fromWei(userEthInUsd.plus(userData.value.lusdUserBalance))
|
||||||
|
});
|
||||||
|
const totalBammSupplyInUsd = computed(() => {
|
||||||
|
if(userData.value.bammTotalSupply === "0"){
|
||||||
|
return "0"
|
||||||
|
}
|
||||||
|
const userEthInUsd = new BigNumber(userData.value.ethTotal).multipliedBy(ethPrice.value)
|
||||||
|
return fromWei(userEthInUsd.plus(userData.value.lusdTotal))
|
||||||
|
});
|
||||||
|
const userBammInLusd = computed(() => {
|
||||||
|
if(userData.value.bammTotalSupply === "0"){
|
||||||
|
return "0"
|
||||||
|
}
|
||||||
|
return fromWei((new BigNumber(userData.value.bammUserBalance).dividedBy(userData.value.bammTotalSupply)).multipliedBy(userData.value.lusdTotal))
|
||||||
|
});
|
||||||
|
|
||||||
|
function lusdWithdrawAmountToBamm (lusd) {
|
||||||
|
const bammWithdrawRatio = new BigNumber(lusd).dividedBy(userBammInUsd.value)
|
||||||
|
const res = bammWithdrawRatio.multipliedBy(bammUserBalance.value).toString()
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
function absolutlWithdrawAmountInEth (lusd) {
|
||||||
|
const bammWithdrawRatio = new BigNumber(lusd).dividedBy(userBammInUsd.value)
|
||||||
|
const res = bammWithdrawRatio.multipliedBy(ethUserBalance.value).toString()
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
function absolutlWithdrawAmountInLusd (lusd) {
|
||||||
|
const bammWithdrawRatio = new BigNumber(lusd).dividedBy(userBammInUsd.value)
|
||||||
|
const res = bammWithdrawRatio.multipliedBy(lusdUserBalance.value).toString()
|
||||||
|
return res
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchUserData (){
|
||||||
|
if (!library.value || !activeAccount.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const struct = await getUserInfo(activeAccount.value.address, library.value)
|
||||||
|
const data = {}
|
||||||
|
Object.keys(struct).filter(k=> isNaN(Number(k))).forEach(k=> {
|
||||||
|
data[k] = struct[k]
|
||||||
|
})
|
||||||
|
userData.value = data
|
||||||
|
}
|
||||||
|
|
||||||
|
onEvent("protocol::bprotocol::refresh", fetchUserData);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
library,
|
||||||
|
async val => {
|
||||||
|
if (val) {
|
||||||
|
fetchUserData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
activeAccount,
|
||||||
|
async val => {
|
||||||
|
if (val) {
|
||||||
|
fetchUserData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
bammTotalSupply,
|
||||||
|
bammUserBalance,
|
||||||
|
ethTotal,
|
||||||
|
ethUserBalance,
|
||||||
|
ethPrice,
|
||||||
|
lusdTotal,
|
||||||
|
lusdUserBalance,
|
||||||
|
unclaimedLqty,
|
||||||
|
fetchUserData,
|
||||||
|
userBammInLusd,
|
||||||
|
lusdWithdrawAmountToBamm,
|
||||||
|
bammToken,
|
||||||
|
absolutlWithdrawAmountInEth,
|
||||||
|
absolutlWithdrawAmountInLusd,
|
||||||
|
userBammInUsd,
|
||||||
|
totalBammSupplyInUsd
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getUserInfo (user, web3){
|
||||||
|
try {
|
||||||
|
const resolveABI = abis.resolver.bprotocol;
|
||||||
|
const resolveAddr = addresses.mainnet.resolver.bprotocol;
|
||||||
|
const bammAddr = addresses.mainnet.bprotocolBamm;
|
||||||
|
const bprotocolInstance = new web3.eth.Contract(
|
||||||
|
resolveABI as AbiItem[],
|
||||||
|
resolveAddr
|
||||||
|
);
|
||||||
|
const userInfo = await bprotocolInstance.methods.getUserInfo(user, bammAddr, '0x6DEA81C8171D0bA574754EF6F8b412F2Ed88c54D').call()
|
||||||
|
debugger
|
||||||
|
return userInfo
|
||||||
|
|
||||||
|
}catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -37,6 +37,9 @@ import SidebarLiquityTrovePayback from '~/components/sidebar/context/liquity/Sid
|
||||||
import SidebarLiquityPoolSupply from '~/components/sidebar/context/liquity/SidebarLiquityPoolSupply.vue'
|
import SidebarLiquityPoolSupply from '~/components/sidebar/context/liquity/SidebarLiquityPoolSupply.vue'
|
||||||
import SidebarLiquityPoolWithdraw from '~/components/sidebar/context/liquity/SidebarLiquityPoolWithdraw.vue'
|
import SidebarLiquityPoolWithdraw from '~/components/sidebar/context/liquity/SidebarLiquityPoolWithdraw.vue'
|
||||||
|
|
||||||
|
import SidebarBprotocolDeposit from '~/components/sidebar/context/bprotocol/SidebarBprotocolDeposit.vue'
|
||||||
|
import SidebarBprotocolWithdraw from '~/components/sidebar/context/bprotocol/SidebarBprotocolWithdraw.vue'
|
||||||
|
|
||||||
import SidebarReflexerCollateral from '~/components/sidebar/context/reflexer/SidebarReflexerCollateral.vue'
|
import SidebarReflexerCollateral from '~/components/sidebar/context/reflexer/SidebarReflexerCollateral.vue'
|
||||||
import SidebarReflexerSupply from '~/components/sidebar/context/reflexer/SidebarReflexerSupply.vue'
|
import SidebarReflexerSupply from '~/components/sidebar/context/reflexer/SidebarReflexerSupply.vue'
|
||||||
import SidebarReflexerWithdraw from '~/components/sidebar/context/reflexer/SidebarReflexerWithdraw.vue'
|
import SidebarReflexerWithdraw from '~/components/sidebar/context/reflexer/SidebarReflexerWithdraw.vue'
|
||||||
|
|
@ -80,6 +83,9 @@ const sidebars = {
|
||||||
'/mainnet/liquity#pool-supply': { component: SidebarLiquityPoolSupply },
|
'/mainnet/liquity#pool-supply': { component: SidebarLiquityPoolSupply },
|
||||||
'/mainnet/liquity#pool-withdraw': { component: SidebarLiquityPoolWithdraw },
|
'/mainnet/liquity#pool-withdraw': { component: SidebarLiquityPoolWithdraw },
|
||||||
|
|
||||||
|
"/mainnet/bprotocol#deposit": { component: SidebarBprotocolDeposit },
|
||||||
|
"/mainnet/bprotocol#withdraw": { component: SidebarBprotocolWithdraw },
|
||||||
|
|
||||||
"/mainnet/reflexer": { component: null },
|
"/mainnet/reflexer": { component: null },
|
||||||
'/mainnet/reflexer#collateral': { component: SidebarReflexerCollateral },
|
'/mainnet/reflexer#collateral': { component: SidebarReflexerCollateral },
|
||||||
"/mainnet/reflexer#supply": { component: SidebarReflexerSupply },
|
"/mainnet/reflexer#supply": { component: SidebarReflexerSupply },
|
||||||
|
|
|
||||||
1
constant/abi/read/bprotocol.json
Normal file
1
constant/abi/read/bprotocol.json
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
[{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"add","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"address","name":"user","type":"address"},{"internalType":"contract BAMM","name":"bamm","type":"address"},{"internalType":"contract ERC20","name":"token","type":"address"}],"name":"getUnclaimedLqty","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"address","name":"user","type":"address"},{"internalType":"contract BAMM","name":"bamm","type":"address"},{"internalType":"contract ERC20","name":"lqty","type":"address"}],"name":"getUserInfo","outputs":[{"components":[{"internalType":"uint256","name":"unclaimedLqty","type":"uint256"},{"internalType":"uint256","name":"bammUserBalance","type":"uint256"},{"internalType":"uint256","name":"bammTotalSupply","type":"uint256"},{"internalType":"uint256","name":"lusdUserBalance","type":"uint256"},{"internalType":"uint256","name":"ethUserBalance","type":"uint256"},{"internalType":"uint256","name":"lusdTotal","type":"uint256"},{"internalType":"uint256","name":"ethTotal","type":"uint256"},{"internalType":"uint256","name":"lusdPrice","type":"uint256"}],"internalType":"struct BLens.UserInfo","name":"info","type":"tuple"}],"stateMutability":"nonpayable","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"mul","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"rdiv","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"rmul","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"rmulup","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"sub","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"wdiv","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"wdivup","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"},{"inputs":[{"internalType":"uint256","name":"x","type":"uint256"},{"internalType":"uint256","name":"y","type":"uint256"}],"name":"wmul","outputs":[{"internalType":"uint256","name":"z","type":"uint256"}],"stateMutability":"pure","type":"function"}]
|
||||||
|
|
@ -7,7 +7,9 @@ import makerABI from "./abi/read/maker.json";
|
||||||
import makerProxyRegistryABI from "./abi/makerProxyRegistry.json";
|
import makerProxyRegistryABI from "./abi/makerProxyRegistry.json";
|
||||||
import unipoolABI from "./abi/read/unipool.json";
|
import unipoolABI from "./abi/read/unipool.json";
|
||||||
import liquityABI from "./abi/read/liquity.json";
|
import liquityABI from "./abi/read/liquity.json";
|
||||||
import reflexerABI from './abi/read/reflexer.json'
|
import reflexerABI from './abi/read/reflexer.json';
|
||||||
|
import bprotocolABI from './abi/read/bprotocol.json';
|
||||||
|
|
||||||
const abis = {
|
const abis = {
|
||||||
makerProxyRegistry: makerProxyRegistryABI,
|
makerProxyRegistry: makerProxyRegistryABI,
|
||||||
resolver: {
|
resolver: {
|
||||||
|
|
@ -19,7 +21,8 @@ const abis = {
|
||||||
maker: makerABI,
|
maker: makerABI,
|
||||||
unipool: unipoolABI,
|
unipool: unipoolABI,
|
||||||
liquity: liquityABI,
|
liquity: liquityABI,
|
||||||
reflexer: reflexerABI
|
reflexer: reflexerABI,
|
||||||
|
bprotocol: bprotocolABI,
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
const addresses = {
|
const addresses = {
|
||||||
mainnet: {
|
mainnet: {
|
||||||
makerProxyRegistry: "0x4678f0a6958e4D2Bc4F1BAF7Bc52E8F3564f3fE4",
|
makerProxyRegistry: "0x4678f0a6958e4D2Bc4F1BAF7Bc52E8F3564f3fE4",
|
||||||
|
bprotocolBamm: "0x0d3AbAA7E088C2c82f54B2f47613DA438ea8C598",
|
||||||
resolver: {
|
resolver: {
|
||||||
aave: "0xA6Dc31dC10f8071c02099B05B76Ba15dfcD2B04c",
|
aave: "0xA6Dc31dC10f8071c02099B05B76Ba15dfcD2B04c",
|
||||||
aave_v2: "0xFb3a1D56eD56F046721B9aCa749895100754578b",
|
aave_v2: "0xFb3a1D56eD56F046721B9aCa749895100754578b",
|
||||||
|
|
@ -10,7 +11,8 @@ const addresses = {
|
||||||
maker: "0x84addce4fac0b6ee4b0cd132120d6d4b700e35c0",
|
maker: "0x84addce4fac0b6ee4b0cd132120d6d4b700e35c0",
|
||||||
unipool: "0x22bddA39D14eD0aafeee36B6e784602fdDE64723",
|
unipool: "0x22bddA39D14eD0aafeee36B6e784602fdDE64723",
|
||||||
liquity: "0xDAf2A39503463B0F41f899EDD82213b3c96b6Cf8",
|
liquity: "0xDAf2A39503463B0F41f899EDD82213b3c96b6Cf8",
|
||||||
reflexer: "0x016ca8d0993d1a7073b01802a2e22fd0df7e633a"
|
reflexer: "0x016ca8d0993d1a7073b01802a2e22fd0df7e633a",
|
||||||
|
bprotocol: "0x3843019c19259117ed473947007bcafc5c0c7129"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,7 @@ import CompoundIcon from "~/assets/icons/compound.svg?inline";
|
||||||
import MakerIcon from "~/assets/icons/makerdao.svg?inline";
|
import MakerIcon from "~/assets/icons/makerdao.svg?inline";
|
||||||
import OneInchIcon from "~/assets/icons/1inch.svg?inline";
|
import OneInchIcon from "~/assets/icons/1inch.svg?inline";
|
||||||
import LiquityIcon from "~/assets/icons/liquity.svg?inline";
|
import LiquityIcon from "~/assets/icons/liquity.svg?inline";
|
||||||
|
import BprotocolIcon from "~/assets/icons/b-protocol.svg?inline";
|
||||||
import ReflexerIcon from "~/assets/icons/reflexer.svg?inline";
|
import ReflexerIcon from "~/assets/icons/reflexer.svg?inline";
|
||||||
|
|
||||||
const appsPerNetwork = {
|
const appsPerNetwork = {
|
||||||
|
|
@ -76,6 +77,13 @@ const appsPerNetwork = {
|
||||||
url: "/mainnet/liquity",
|
url: "/mainnet/liquity",
|
||||||
description: "Collateralized LUSD Debt"
|
description: "Collateralized LUSD Debt"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "bprotocol",
|
||||||
|
icon: BprotocolIcon,
|
||||||
|
name: "B.Protocol",
|
||||||
|
url: "/mainnet/bprotocol",
|
||||||
|
description: "Stake LUSD"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "reflexer",
|
id: "reflexer",
|
||||||
icon: ReflexerIcon,
|
icon: ReflexerIcon,
|
||||||
|
|
@ -107,7 +115,6 @@ export default defineComponent({
|
||||||
const { activeNetworkId } = useNetwork();
|
const { activeNetworkId } = useNetwork();
|
||||||
|
|
||||||
const apps = computed(() => appsPerNetwork[activeNetworkId.value]);
|
const apps = computed(() => appsPerNetwork[activeNetworkId.value]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
apps
|
apps
|
||||||
};
|
};
|
||||||
|
|
|
||||||
115
pages/mainnet/bprotocol.vue
Normal file
115
pages/mainnet/bprotocol.vue
Normal file
|
|
@ -0,0 +1,115 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<nuxt-link
|
||||||
|
to="/"
|
||||||
|
class="text-[#C0C5D7] text-lg font-semibold flex items-center"
|
||||||
|
>
|
||||||
|
<BackIcon class="w-4 h-4 mr-3" />
|
||||||
|
Apps
|
||||||
|
</nuxt-link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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;"
|
||||||
|
class="w-16 h-16 rounded-full flex items-center justify-center border border-[#CCDCF3]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-12 h-12 rounded-full flex items-center justify-center bg-[#1874FF]"
|
||||||
|
>
|
||||||
|
<BprotocolIcon class="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 class="ml-4 text-primary-black text-2xl font-semibold">B.Protocol</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-[60px]">
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-col mt-6 sm:flex-row sm:items-center sm:justify-between xl:mt-4"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
|
||||||
|
<CardBprotocolBamm
|
||||||
|
:amount="userBammInLusd"
|
||||||
|
:amount-usd="userBammInUsd"
|
||||||
|
:ethUserBalance="ethUserBalance"
|
||||||
|
:stability-lqty-gain="unclaimedLqty"
|
||||||
|
price-in-usd="1"
|
||||||
|
:token="bammToken"
|
||||||
|
:lusdUserBalance="lusdUserBalance"
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, computed, useRouter } 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";
|
||||||
|
import SVGAdd from "~/assets/img/icons/add.svg?inline";
|
||||||
|
import BprotocolIcon from "~/assets/icons/b-protocol.svg?inline";
|
||||||
|
import ButtonDashed from "~/components/common/input/ButtonDashed.vue";
|
||||||
|
import { useFormatting } from "~/composables/useFormatting";
|
||||||
|
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 { useBprotocolPosition } from '~/composables/protocols/useBprotocolPositions'
|
||||||
|
import CardBprotocolBamm from '~/components/protocols/bprotocol/CardBprotocolBamm.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
BackIcon,
|
||||||
|
BprotocolIcon,
|
||||||
|
ButtonCTAOutlined,
|
||||||
|
SVGBalance,
|
||||||
|
SVGPercent,
|
||||||
|
CardBprotocolBamm
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const router = useRouter();
|
||||||
|
const {formatDecimal} = useFormatting();
|
||||||
|
const {
|
||||||
|
bammTotalSupply,
|
||||||
|
bammUserBalance,
|
||||||
|
ethTotal,
|
||||||
|
ethUserBalance,
|
||||||
|
lusdPrice,
|
||||||
|
lusdTotal,
|
||||||
|
lusdUserBalance,
|
||||||
|
unclaimedLqty,
|
||||||
|
userBammInLusd,
|
||||||
|
bammToken,
|
||||||
|
userBammInUsd,
|
||||||
|
totalBammSupplyInUsd
|
||||||
|
} = useBprotocolPosition()
|
||||||
|
|
||||||
|
return {
|
||||||
|
bammTotalSupply,
|
||||||
|
bammUserBalance,
|
||||||
|
ethTotal,
|
||||||
|
ethUserBalance,
|
||||||
|
lusdPrice,
|
||||||
|
lusdTotal,
|
||||||
|
lusdUserBalance,
|
||||||
|
unclaimedLqty,
|
||||||
|
formatDecimal,
|
||||||
|
userBammInLusd,
|
||||||
|
bammToken,
|
||||||
|
userBammInUsd,
|
||||||
|
totalBammSupplyInUsd
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user