MakerDAO Borrow & Payback

components/sidebar/context/makerdao/SidebarMakerdaoBorrow.vue

@@ -0,0 +1,184 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Borrow {{ symbol }}</template>
+
+    <SidebarSectionValueWithIcon class="mt-6" label="Borrowed" center>
+      <template #icon
+        ><IconCurrency :currency="daiTokenKey" class="w-20 h-20" noHeight
+      /></template>
+      <template #value>{{ formatNumber(debt) }} {{ symbol }}</template>
+    </SidebarSectionValueWithIcon>
+
+    <div class="bg-[#C5CCE1] bg-opacity-[0.15] mt-10 p-8">
+      <h3 class="text-primary-gray text-xs font-semibold mb-2.5">
+        Amount to borrow
+      </h3>
+
+      <input-numeric
+        v-model="amount"
+        placeholder="Amount to borrow"
+        :error="errors.amount.message"
+      >
+      </input-numeric>
+
+      <SidebarContextHeading class="mt-5">
+        Projected Debt Position
+      </SidebarContextHeading>
+
+      <SidebarSectionStatus
+        class="mt-8"
+        :liquidation="liquidation"
+        :status="status"
+      />
+
+      <SidebarSectionValueWithIcon
+        class="mt-8"
+        :label="`Liquidation Price (${tokenSymbol})`"
+      >
+        <template #value>
+          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }}
+          <span class="text-primary-gray"
+            >/ {{ formatUsd(liquidationMaxPrice) }}</span
+          >
+        </template>
+      </SidebarSectionValueWithIcon>
+
+      <div class="flex flex-shrink-0 mt-10">
+        <ButtonCTA
+          class="w-full"
+          :disabled="!isValid || pending"
+          :loading="pending"
+          @click="cast"
+        >
+          Borrow
+        </ButtonCTA>
+      </div>
+
+      <ValidationErrors :error-messages="errorMessages" class="mt-6" />
+    </div>
+  </SidebarContextRootContainer>
+</template>
+
+<script>
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+import InputNumeric from '~/components/common/input/InputNumeric.vue'
+import { useBigNumber } from '~/composables/useBigNumber'
+import { useFormatting } from '~/composables/useFormatting'
+import { useValidators } from '~/composables/useValidators'
+import { useValidation } from '~/composables/useValidation'
+import { useToken } from '~/composables/useToken'
+import { useParsing } from '~/composables/useParsing'
+import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
+import { useWeb3 } from '~/composables/useWeb3'
+import ToggleButton from '~/components/common/input/ToggleButton.vue'
+import { useDSA } from '~/composables/useDSA'
+import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import { useNotification } from '~/composables/useNotification'
+import Button from '~/components/Button.vue'
+import { useSidebar } from '~/composables/useSidebar'
+import ctokens from '~/constant/ctokens'
+import { useMakerdaoPosition } from '~/composables/useMakerdaoPosition'
+
+export default defineComponent({
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
+  props: {
+    tokenKey: { type: String, required: true },
+  },
+  setup(props) {
+    const { close } = useSidebar()
+    const { networkName, account } = useWeb3()
+    const { dsa } = useDSA()
+    const { getTokenByKey, valInt } = useToken()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gt, div, plus } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction } = useNotification()
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+
+    const { debt, collateral, liquidation, liquidationMaxPrice, vault, vaultId, symbol: tokenSymbol } = useMakerdaoPosition({
+      overridePosition: (position) => {
+        return position;
+      },
+    })
+
+    const changedDebt = computed(() => plus(debt.value, amountParsed.value).toFixed())
+    const { liquidationPrice, status } = useMakerdaoPosition(collateral, changedDebt)
+
+    const daiTokenKey = ref('dai')
+    const daiToken = computed(() => getTokenByKey(daiTokenKey.value))
+    const symbol = computed(() => daiToken.value?.symbol)
+    const decimals = computed(() => daiToken.value?.decimals)
+
+    const {
+      validateAmount,
+      validateLiquidation,
+      validateIsLoggedIn,
+      validateMakerDebt,
+      validateMakerDebtCeiling,
+    } = useValidators()
+
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+        amount: { message: validateAmount(amountParsed.value), show: hasAmountValue },
+        liquidation: { message: validateLiquidation(status.value, liquidation.value), show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+        minDebt: { message: validateMakerDebt(changedDebt.value), show: hasAmountValue },
+        debtCeiling: { message: validateMakerDebtCeiling(vault.value.type, amountParsed.value), show: true },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+
+      const amount = valInt(amountParsed.value, decimals.value)
+
+      const spells = dsa.value.Spell()
+
+      spells.add({
+        connector: 'maker',
+        method: 'borrow',
+        args: [vaultId.value, amount, 0, 0],
+      })
+
+      const txHash = await dsa.value.cast({
+        spells,
+        from: account.value,
+      })
+
+      showPendingTransaction(txHash)
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      daiTokenKey,
+      symbol,
+      debt,
+      amount,
+      status,
+      liquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      formatUsd,
+      formatUsdMax,
+      formatNumber,
+      errors,
+      errorMessages,
+      isValid,
+      cast,
+      pending,
+      tokenSymbol,
+    }
+  },
+})
+</script>

components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue

@@ -0,0 +1,207 @@
+<template>
+  <SidebarContextRootContainer>
+    <template #title>Payback {{ symbol }}</template>
+
+    <div class="mt-6 flex justify-around items-center  w-full">
+      <SidebarSectionValueWithIcon class="" label="Borrowed" center>
+        <template #icon
+          ><IconCurrency :currency="daiTokenKey" class="w-20 h-20" noHeight
+        /></template>
+        <template #value>{{ formatNumber(debt) }} {{ symbol }}</template>
+      </SidebarSectionValueWithIcon>
+
+      <SidebarSectionValueWithIcon class="" label="Token Balance" center>
+        <template #icon
+          ><IconCurrency :currency="daiTokenKey" class="w-20 h-20" noHeight
+        /></template>
+
+        <template #value
+          >{{ formatNumber(balance) }} {{ symbol }}</template
+        >
+      </SidebarSectionValueWithIcon>
+    </div>
+
+    <div class="bg-[#C5CCE1] bg-opacity-[0.15] mt-10 p-8">
+      <h3 class="text-primary-gray text-xs font-semibold mb-2.5">
+        Amount to supply
+      </h3>
+
+      <input-numeric
+        v-model="amount"
+        placeholder="Amount to supply"
+        :error="errors.amount.message"
+      >
+        <template v-if="!isMaxAmount" #suffix>
+          <div class="absolute mt-2 top-0 right-0 mr-4">
+            <button
+              type="button"
+              class="text-primary-blue-dark font-semibold text-sm hover:text-primary-blue-hover"
+              @click="toggle"
+            >
+              Max
+            </button>
+          </div>
+        </template>
+      </input-numeric>
+
+      <SidebarContextHeading class="mt-5">
+        Projected Debt Position
+      </SidebarContextHeading>
+
+      <SidebarSectionStatus
+        class="mt-8"
+        :liquidation="liquidation"
+        :status="status"
+      />
+
+      <SidebarSectionValueWithIcon class="mt-8" :label="`Liquidation Price (${tokenSymbol})`">
+        <template #value>
+          {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }}
+          <span class="text-primary-gray"
+            >/ {{ formatUsd(liquidationMaxPrice) }}</span
+          >
+        </template>
+      </SidebarSectionValueWithIcon>
+
+      <div class="flex flex-shrink-0 mt-10">
+        <ButtonCTA
+          class="w-full"
+          :disabled="!isValid || pending"
+          :loading="pending"
+          @click="cast"
+        >
+          Payback
+        </ButtonCTA>
+      </div>
+
+      <ValidationErrors :error-messages="errorMessages" class="mt-6" />
+    </div>
+  </SidebarContextRootContainer>
+</template>
+
+<script>
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
+import InputNumeric from '~/components/common/input/InputNumeric.vue'
+import { useBalances } from '~/composables/useBalances'
+import { useBigNumber } from '~/composables/useBigNumber'
+import { useFormatting } from '~/composables/useFormatting'
+import { useValidators } from '~/composables/useValidators'
+import { useValidation } from '~/composables/useValidation'
+import { useToken } from '~/composables/useToken'
+import { useParsing } from '~/composables/useParsing'
+import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
+import { useWeb3 } from '~/composables/useWeb3'
+import ToggleButton from '~/components/common/input/ToggleButton.vue'
+import { useDSA } from '~/composables/useDSA'
+import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
+import { useNotification } from '~/composables/useNotification'
+import Button from '~/components/Button.vue'
+import { useSidebar } from '~/composables/useSidebar'
+import { useMakerdaoPosition } from '~/composables/useMakerdaoPosition'
+
+export default defineComponent({
+  components: { InputNumeric, ToggleButton, ButtonCTA, Button },
+  props: {
+    tokenKey: { type: String, required: true },
+  },
+  setup(props) {
+    const { close } = useSidebar()
+    const { networkName, account } = useWeb3()
+    const { dsa } = useDSA()
+    const { getTokenByKey, valInt } = useToken()
+    const { getBalanceByKey, getBalanceRawByKey, fetchBalances } = useBalances()
+    const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
+    const { isZero, gte, plus, max, minus, min } = useBigNumber()
+    const { parseSafeFloat } = useParsing()
+    const { showPendingTransaction } = useNotification()
+
+    const { debt, collateral, liquidation, liquidationMaxPrice, vaultId, symbol: tokenSymbol } = useMakerdaoPosition()
+
+    const amount = ref('')
+    const amountParsed = computed(() => parseSafeFloat(amount.value))
+
+    const daiTokenKey = ref('dai')
+    const tokenKey = computed(() => props.tokenKey)
+    const token = computed(() => getTokenByKey(tokenKey.value))
+    const symbol = computed(() => token.value?.symbol)
+    const decimals = computed(() => token.value?.decimals)
+
+    const balance = computed(() => getBalanceByKey(tokenKey.value))
+    const balanceRaw = computed(() => getBalanceRawByKey(tokenKey.value))
+
+    const changedDebt = computed(() => plus(debt.value, amountParsed.value).toFixed())
+    const { liquidationPrice, status } = useMakerdaoPosition(collateral, changedDebt)
+
+    const maxBalance = computed(() => min(balance.value, debt.value).toFixed())
+    const { toggle, isMaxAmount } = useMaxAmountActive(amount, maxBalance)
+
+    const { validateAmount, validateLiquidation, validateIsLoggedIn, validateMakerDebt } = useValidators()
+    const errors = computed(() => {
+      const hasAmountValue = !isZero(amount.value)
+
+      return {
+
+        amount: { message: validateAmount(amountParsed.value, maxBalance.value), show: hasAmountValue },
+        liquidation: { message: validateLiquidation(status.value, liquidation.value), show: hasAmountValue },
+        auth: { message: validateIsLoggedIn(!!account.value), show: true },
+        minDebt: { message: validateMakerDebt(changedDebt.value), show: hasAmountValue },
+      }
+    })
+    const { errorMessages, isValid } = useValidation(errors)
+
+    const pending = ref(false)
+
+    async function cast() {
+      pending.value = true
+
+      const amount = isMaxAmount.value
+        ? gte(balance.value, balance.value)
+          ? $dsa().maxValue
+          : balanceRaw.value
+        : valInt(amountParsed.value, decimals.value)
+
+      const spells = dsa.value.Spell()
+
+      spells.add({
+        connector: 'maker',
+        method: 'payback',
+        args: [vaultId.value, amount, 0, 0],
+      })
+
+      const txHash = await dsa.value.cast({
+        spells,
+        from: account.value,
+      })
+
+      showPendingTransaction(txHash)
+
+      pending.value = false
+
+      close()
+    }
+
+    return {
+      daiTokenKey,
+      symbol,
+      debt,
+      balance,
+      amount,
+      status,
+      liquidation,
+      liquidationPrice,
+      liquidationMaxPrice,
+      formatUsd,
+      formatUsdMax,
+      formatNumber,
+      errors,
+      errorMessages,
+      isMaxAmount,
+      isValid,
+      cast,
+      pending,
+      toggle,
+      tokenSymbol,
+    }
+  },
+})
+</script>

composables/useMakerdaoPosition.ts

@@ -1,4 +1,4 @@
-import { computed, ref, watch } from "@nuxtjs/composition-api";
+import { computed, Ref, ref, watch } from "@nuxtjs/composition-api";
 import BigNumber from "bignumber.js";
 BigNumber.config({ POW_PRECISION: 200 });
 import abis from "~/constant/abis";
@@ -50,7 +50,7 @@ const vault = computed(() => {
   return defaultVault;
 });
 
-export function useMakerdaoPosition() {
+export function useMakerdaoPosition(collateralAmountRef: Ref =null, debtAmountRef: Ref = null) {
   const { web3, chainId, networkName } = useWeb3();
   const { activeAccount } = useDSA();
   const { isZero, ensureValue, times, div, max, gt } = useBigNumber();
@@ -77,14 +77,20 @@ export function useMakerdaoPosition() {
   const rate = computed(() => ensureValue(vault.value.rate).toFixed());
   const netValue = computed(() => ensureValue(vault.value.netValue).toFixed());
 
-  const status = computed(() => ensureValue(vault.value.status).toFixed());
+  const status = computed(() => {
+    if (!collateralAmountRef || !debtAmountRef) return ensureValue(vault.value.status).toFixed()
+    return isZero(collateralAmountRef.value) && !isZero(debtAmountRef.value)
+      ? '1.1'
+      : div(debtAmountRef.value, times(collateralAmountRef.value, price.value)).toFixed()
+  })
 
   const liquidationPrice = computed(() => {
-    return max(
-      div(div(debt.value, collateral.value), liquidation.value),
-      "0"
-    ).toFixed();
-  });
+    if (!collateralAmountRef || !debtAmountRef)
+      return max(div(div(debt.value, collateral.value), liquidation.value), '0').toFixed()
+    return isZero(collateralAmountRef.value) && !isZero(debtAmountRef.value)
+      ? times(price.value, '1.1').toFixed()
+      : max(div(div(debtAmountRef.value, collateralAmountRef.value), liquidation.value), '0').toFixed()
+  })
 
   const debt = computed(() => ensureValue(vault.value.debt).toFixed());
   const minDebt = computed(() => vaultTypes.value[0]?.totalFloor || "5000");

composables/useSidebar.ts

@@ -23,6 +23,8 @@ import SidebarCompoundSupply from '~/components/sidebar/context/compound/Sidebar
 import SidebarCompoundBorrow from '~/components/sidebar/context/compound/SidebarCompoundBorrow.vue'
 import SidebarCompoundPayback from '~/components/sidebar/context/compound/SidebarCompoundPayback.vue'
 
+import SidebarMakerdaoBorrow from '~/components/sidebar/context/makerdao/SidebarMakerdaoBorrow.vue'
+import SidebarMakerdaoPayback from '~/components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue'
 
 const sidebars = {
   "#overview" :  {component: SidebarOverview, back : false, close : true },
@@ -47,6 +49,12 @@ const sidebars = {
   "/mainnet/compound#supply": { component: SidebarCompoundSupply },
   "/mainnet/compound#borrow": { component: SidebarCompoundBorrow },
   "/mainnet/compound#payback": { component: SidebarCompoundPayback },
+
+  "/mainnet/maker": { component: null },
+  "/mainnet/maker#withdraw": { component: null },
+  "/mainnet/maker#supply": { component: null },
+  "/mainnet/maker#borrow": { component: SidebarMakerdaoBorrow },
+  "/mainnet/maker#payback": { component: SidebarMakerdaoPayback },
 };
 
 const sidebar = ref(null);

composables/useValidators.ts

@@ -1,9 +1,11 @@
 import { useBigNumber } from "./useBigNumber";
 import { useFormatting } from "./useFormatting";
+import { useMakerdaoPosition } from "./useMakerdaoPosition";
 
 export function useValidators() {
-  const { formatNumber } = useFormatting()
-  const { isZero, minus, eq, gt } = useBigNumber();
+  const { formatNumber } = useFormatting();
+  const { isZero, minus, eq, gt, lt, gte, plus } = useBigNumber();
+  const { minDebt: makerMinDebt, vaultTypes } = useMakerdaoPosition();
 
   function validateAmount(amountParsed, balance = null, options = null) {
     const mergedOptions = Object.assign(
@@ -39,21 +41,61 @@ export function useValidators() {
     return null;
   }
 
-  function validateLiquidity(borrow, availableLiquidity, tokenSymbol, withdraw = false) {
+  function validateLiquidity(
+    borrow,
+    availableLiquidity,
+    tokenSymbol,
+    withdraw = false
+  ) {
     if (gt(borrow, availableLiquidity)) {
-      let action = 'borrow'
+      let action = "borrow";
       if (withdraw) {
-        action = 'withdraw'
+        action = "withdraw";
       }
-      return `Not enough liquidity to ${action} ${formatNumber(borrow, 2)} ${tokenSymbol}`
+      return `Not enough liquidity to ${action} ${formatNumber(
+        borrow,
+        2
+      )} ${tokenSymbol}`;
     }
-    return null
+    return null;
+  }
+
+  function validateMakerDebt(
+    debtParsed,
+    minDebt = makerMinDebt.value,
+    vaultId
+  ) {
+    if (lt(debtParsed, minDebt) && gt(debtParsed, "0")) {
+      const vaultText = vaultId
+        ? vaultId !== "0"
+          ? `on vault #${vaultId}`
+          : `on new vault`
+        : "";
+      return `Minimum debt requirement is ${minDebt} DAI ${vaultText}`;
+    }
+
+    return null;
+  }
+
+  function validateMakerDebtCeiling(vaultType, debtParsed = 0) {
+    const vault = vaultTypes.value.find(v => v.type === vaultType);
+    const { debtCeiling, totalDebt } = vault || {};
+
+    if (!isZero(debtCeiling) && !isZero(totalDebt)) {
+      const total = plus(totalDebt, debtParsed);
+      return gte(total, debtCeiling)
+        ? `${vaultType} Collateral reached debt ceiling`
+        : null;
+    }
+    return null;
   }
 
   return {
     validateAmount,
     validateLiquidation,
     validateIsLoggedIn,
-    validateLiquidity
+    validateLiquidity,
+    validateMakerDebt,
+    validateMakerDebtCeiling
   };
 }

pages/mainnet/maker.vue

@@ -84,12 +84,16 @@
         <div class="shadow rounded-lg py-8 px-6 flex">
           <div class="flex-1">
             <h3 class="text-2xl text-primary-black font-medium">
-              {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} / {{ formatUsd(liquidationMaxPrice) }}
+              {{ formatUsdMax(liquidationPrice, liquidationMaxPrice) }} /
+              {{ formatUsd(liquidationMaxPrice) }}
             </h3>
             <p class="mt-4 text-primary-gray font-medium">Liquidation (ETH)</p>
           </div>
           <div class="flex items-center">
-             <IconBackground name="receipt-tax" class="bg-light-brown-pure text-light-brown-pure" />
+            <IconBackground
+              name="receipt-tax"
+              class="bg-light-brown-pure text-light-brown-pure"
+            />
           </div>
         </div>
       </div>
@@ -131,7 +135,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api";
+import { computed, defineComponent, 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";
@@ -143,6 +147,7 @@ import { useBigNumber } from "~/composables/useBigNumber";
 import { useFormatting } from "~/composables/useFormatting";
 import { useMakerdaoPosition } from "~/composables/useMakerdaoPosition";
 import { useStatus } from "~/composables/useStatus";
+import { useNotification } from "~/composables/useNotification";
 
 export default defineComponent({
   components: {
@@ -155,12 +160,22 @@ export default defineComponent({
     SVGPercent
   },
   setup() {
-    const { div } = useBigNumber();
+    const router = useRouter();
 
-    const { formatUsd, formatUsdMax, formatPercent, formatDecimal } = useFormatting();
+    const { div, isZero, gt, lt } = useBigNumber();
+
+    const {
+      formatUsd,
+      formatUsdMax,
+      formatPercent,
+      formatDecimal
+    } = useFormatting();
+
+    const { showWarning } = useNotification();
 
     const {
       status,
+      vaults,
       vaultTokenType,
       collateral,
       collateralUsd,
@@ -183,13 +198,40 @@ export default defineComponent({
 
     const { color, text } = useStatus(statusLiquidationRatio);
 
-    function showWithdraw() {}
+    function showSupply() {
+      if (gt(debt.value, "0") && lt(debt.value, minDebt.value)) {
+        // select("depositAndBorrow");
+      } else if (vaults.value.length === 0) {
+        router.push({ hash: "collateral" });
+      } else {
+        router.push({ hash: "supply" });
+      }
+    }
+    function showWithdraw() {
+      if (isZero(collateral.value)) {
+        showWarning("MakerDAO", "No collateral supplied!!");
+      } else if (gt(debt.value, "0") && lt(debt.value, minDebt.value)) {
+        // select("paybackAndWithdraw");
+      } else {
+        router.push({ hash: "withdraw" });
+      }
+    }
 
-    function showPayback() {}
+    function showPayback() {
+      if (isZero(collateral.value)) {
+        showWarning("MakerDAO", "No collateral supplied!!");
+      } else {
+        router.push({ hash: "payback?tokenKey=dai" });
+      }
+    }
 
-    function showBorrow() {}
-
-    function showSupply() {}
+    function showBorrow() {
+      if (isZero(collateral.value)) {
+        showWarning("MakerDAO", "Deposit collateral before borrowing!!");
+      } else {
+        router.push({ hash: "borrow?tokenKey=dai" });
+      }
+    }
 
     return {
       formatUsd,

pages/test.vue

@@ -0,0 +1,3 @@
+<template>
+    <SidebarMakerdaoPayback tokenKey="dai" />
+</template>