Add trove position cards

assets/icons/currencies/lqty.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6978 29.3646C21.2543 29.3646 27.3801 23.2388 27.3801 15.6823C27.3801 8.12578 21.2543 2 13.6978 2C6.14128 2 0.0155029 8.12578 0.0155029 15.6823C0.0155029 23.2388 6.14128 29.3646 13.6978 29.3646Z" fill="#2EB6EA"/>
+<path d="M13.6316 29.3645C0.0228213 29.3645 -5.34748 11.4618 6.67176 3.91699C5.24269 18.8796 12.846 19.2106 19.9028 18.8796C21.388 18.6893 22.8967 18.819 24.3277 19.2598C25.7586 19.7007 27.0788 20.4425 28.1994 21.4356C29.3201 22.4286 30.2153 23.6499 30.8251 25.0175C31.4349 26.385 31.7451 27.8672 31.7348 29.3645H13.6316Z" fill="#1542CD"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6319 20.1584C25.598 22.8114 23.8056 25.1011 21.4784 26.7417C19.1513 28.3822 16.3924 29.3009 13.5463 29.3831C13.6867 29.3831 13.8276 29.3831 13.9691 29.3831H31.9604C31.9604 29.3831 31.957 22.9113 26.6319 20.1584Z" fill="#745DDF"/>
+</svg>

assets/icons/currencies/lusd.svg

@@ -0,0 +1,15 @@
+<svg  viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M300 600C465.685 600 600 465.685 600 300C600 134.315 465.685 0 300 0C134.315 0 0 134.315 0 300C0 465.685 134.315 600 300 600Z" fill="url(#paint0_radial)"/>
+<path d="M600 300C600 465.685 465.685 600 300 600L363 360.5L249 210L300 0C465.685 0 600 134.315 600 300Z" fill="url(#paint1_radial)"/>
+<path d="M340 597.357C326.915 599.1 313.562 600 300 600C287.128 600 274.445 599.189 262 597.616V477.694C212.011 460.846 183.312 409.537 176 375.156L242.885 355.534C247.249 373.668 260.951 400.568 283 410.5C300.714 418.479 326.652 413.303 336 400.5C356.984 371.762 349 340.5 270.426 308.441C210.153 283.849 199.607 245.651 199.607 214.256C199.607 188.709 212.632 142.374 262 123.883V2.38379C274.445 0.810688 287.128 0 300 0C313.562 0 326.915 0.899963 340 2.64343V120.602C380.767 132.965 401.957 167.283 408.131 186.783L356.984 222.103C344.5 178.5 286.164 169.529 270.426 197C251.759 229.584 287.294 244.077 318.112 256.646C322.004 258.234 325.82 259.79 329.443 261.348C363.5 276 409.521 307.913 414 363C418.26 415.393 400.455 461.225 340 477.384V597.357Z" fill="white"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(196 143.5) rotate(54.1675) scale(497.082)">
+<stop stop-color="#AFE9FF"/>
+<stop offset="1" stop-color="#2EB6EA"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(196 143.5) rotate(54.1675) scale(497.082)">
+<stop stop-color="#CFC5FF"/>
+<stop offset="1" stop-color="#745DDF"/>
+</radialGradient>
+</defs>
+</svg>

components/IconCurrency.vue

@@ -35,7 +35,9 @@
     <SVGknc v-else-if="currency === 'knc'" class="h-full" />
     <SVGlend v-else-if="currency === 'lend'" class="h-full" />
     <SVGlink v-else-if="currency === 'link'" class="h-full" />
+    <SVGlqty v-else-if="currency === 'lqty'" class="h-full" />
     <SVGlrc v-else-if="currency === 'lrc'" class="h-full" />
+    <SVGlusd v-else-if="currency === 'lusd'" class="h-full" />
     <SVGmana v-else-if="currency === 'mana'" class="h-full" />
     <SVGmatic v-else-if="currency === 'matic'" class="h-full" />
     <SVGmkr v-else-if="currency === 'mkr'" class="h-full" />
@@ -157,6 +159,9 @@ import SVGyfi from '@/assets/icons/currencies/yfi.svg?inline'
 import SVGzil from '@/assets/icons/currencies/zil.svg?inline'
 import SVGzrx from '@/assets/icons/currencies/zrx.svg?inline'
 import SVGCustom from '@/assets/icons/currencies/custom.svg?inline'
+import SVGlqty from '@/assets/icons/currencies/lqty.svg?inline'
+import SVGlusd from '@/assets/icons/currencies/lusd.svg?inline'
+
 export default defineComponent({
   props: {
     currency: { type: String, default: '' },
@@ -232,6 +237,8 @@ export default defineComponent({
     SVGyfi,
     SVGzil,
     SVGzrx,
+    SVGlqty,
+    SVGlusd,
     SVGCustom,
   },
 })

components/protocols/liquity/CardLiquityTrove.vue

@@ -0,0 +1,120 @@
+<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="positionType === 'supply' ? 'green' : 'yellow'"
+          class="w-16"
+          >{{ badge }}</Badge
+        >
+      </div>
+    </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="supplyOrBorrow"
+      >
+        {{ buttonOne }}
+      </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"
+        @click="withdrawOrPayback"
+      >
+        {{ buttonTwo }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, defineComponent, useContext } from '@nuxtjs/composition-api'
+import { useFormatting } from '@/composables/useFormatting'
+import { useBigNumber } from '~/composables/useBigNumber'
+
+export default defineComponent({
+  props: {
+    collateral: { type: String, default: '0' },
+    debt: { type: String, default: '0' },
+    amountUsd: { type: String, default: '0' },
+    positionType: { type: String, default: 'no' },
+    token: { type: Object, default: () => { } },
+    priceInUsd: { type: String, default: '0' },
+  },
+
+  setup(props) {
+    const { app } = useContext()
+    const { formatUsd, formatDecimal } = useFormatting()
+    const { isZero } = useBigNumber()
+
+    const amount = computed(() => (props.positionType === 'supply' ? props.collateral : props.debt))
+    const withdrawOrPaybackDisabled = computed(() => isZero(amount.value))
+
+    const buttonOne = computed(() => (props.positionType === 'supply' ? 'Supply' : 'Borrow'))
+    const buttonTwo = computed(() => (props.positionType === 'supply' ? 'Withdraw' : 'Payback'))
+    const badge = computed(() => (props.positionType === 'supply' ? 'Collateral' : 'Debt'))
+
+    function showSupply() {
+      app.router.push({ hash: 'trove-supply' })
+    }
+
+    function showBorrow() {
+      if (isZero(props.collateral)) return
+
+      app.router.push({ hash: 'trove-borrow' })
+    }
+
+    function showPayback() {
+      if (isZero(amount.value)) return
+
+      app.router.push({ hash: 'trove-payback' })
+    }
+
+    function showWithdraw() {
+      if (isZero(amount.value)) return
+
+      app.router.push({ hash: 'trove-withdraw' })
+    }
+
+    function supplyOrBorrow() {
+      props.positionType === 'supply' ? showSupply() : showBorrow()
+    }
+    function withdrawOrPayback() {
+      props.positionType === 'supply' ? showWithdraw() : showPayback()
+    }
+
+    return {
+      formatUsd,
+      formatDecimal,
+      buttonOne,
+      buttonTwo,
+      badge,
+      supplyOrBorrow,
+      withdrawOrPayback,
+      withdrawOrPaybackDisabled,
+      amount,
+    }
+  },
+})
+</script>

composables/protocols/useLiquityPosition.ts

@@ -210,7 +210,11 @@ export function useLiquityPosition(
     minDebt,
     liquidationReserve,
     maxFeePercentageInWei,
-    getTrovePositionHints
+    getTrovePositionHints,
+    collateral,
+    collateralUsd,
+    priceInUsd,
+    debt
   };
 }
 

pages/mainnet/liquity.vue

@@ -102,6 +102,25 @@
       <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"
@@ -121,10 +140,7 @@
 <script lang="ts">
 import { defineComponent, computed, useRouter } from "@nuxtjs/composition-api";
 import BackIcon from "~/assets/icons/back.svg?inline";
-import SVGIncoming from "@/assets/img/icons/incoming.svg?inline";
 import SVGBalance from "@/assets/img/icons/balance.svg?inline";
-import SVGEarnings from "@/assets/img/icons/earnings.svg?inline";
-import SVGArrowRight from "@/assets/img/icons/arrow-right.svg?inline";
 import SVGPercent from "@/assets/img/icons/percent.svg?inline";
 import SVGAdd from "~/assets/img/icons/add.svg?inline";
 import LiquityIcon from "~/assets/icons/liquity.svg?inline";
@@ -133,6 +149,7 @@ import { useLiquityPosition } from "~/composables/protocols/useLiquityPosition";
 import { useFormatting } from "~/composables/useFormatting";
 import { useStatus } from "~/composables/useStatus";
 import { useBigNumber } from "~/composables/useBigNumber";
+import CardLiquityTrove from "~/components/protocols/liquity/CardLiquityTrove.vue";
 
 export default defineComponent({
   components: {
@@ -142,6 +159,7 @@ export default defineComponent({
     SVGAdd,
     SVGBalance,
     SVGPercent,
+    CardLiquityTrove
   },
   setup() {
     const router = useRouter();
@@ -162,7 +180,13 @@ export default defineComponent({
       status,
       liquidation,
       liquidationPrice,
-      liquidationMaxPrice
+      liquidationMaxPrice,
+      collateral,
+      collateralUsd,
+      priceInUsd,
+      debt,
+      debtToken,
+      collateralToken
     } = useLiquityPosition();
 
     const statusLiquidationRatio = computed(() =>
@@ -191,6 +215,12 @@ export default defineComponent({
       liquidation,
       liquidationPrice,
       liquidationMaxPrice,
+      collateral,
+      collateralUsd,
+      priceInUsd,
+      debt,
+      debtToken,
+      collateralToken,
 
       openNewTrove
     };