Merge pull request #21 from Instadapp/liquity-stability-pool

Liquity Stability Pool

components/common/input/ButtonOutlined.vue

@@ -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>

components/common/input/ButtonRadio.vue

@@ -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>

components/protocols/liquity/CardLiquityStabilityPool.vue

@@ -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>

components/sidebar/context/liquity/SidebarLiquityPoolSupply.vue

@@ -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>

components/sidebar/context/liquity/SidebarLiquityPoolWithdraw.vue

@@ -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>

composables/protocols/useLiquityClaim.ts

@@ -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
+  };
+}

composables/protocols/useLiquityPosition.ts

@@ -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,
   };
 }
 

composables/useSidebar.ts

@@ -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 },

pages/mainnet/liquity.vue

@@ -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
+      <div class="mt-3">
-          v-if="troveOpened"
+        <div class="flex flex-col">
-          :debt="debt"
+          <div class="flex mt-3 space-x-4 h-7">
-          :collateral="collateral"
+            <ButtonRadio
-          :amount-usd="debt"
+              class="relative overflow-hidden w-24 sm:w-28"
-          price-in-usd="1"
+              :active="isActive(Sections.TROVE)"
-          position-type="borrow"
+              @click="selectSection(Sections.TROVE)"
-          :token="debtToken"
+            >
-        />
+              Trove
-
+            </ButtonRadio>
-        <button-dashed
+            <ButtonRadio
-          v-if="!troveOpened"
+              class="relative overflow-hidden w-24 sm:w-28"
-          color="ocean-blue"
+              :active="isActive(Sections.POOL)"
-          class="col-span-full"
+              @click="selectSection(Sections.POOL)"
-          height="80px"
+            >
-          full-width
+              Stability Pool
-          @click="openNewTrove"
+            </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" />
+          <CardLiquityTrove
-          Open Trove
+            v-if="troveOpened"
-        </button-dashed>
+            :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,
     };
   }
 });