Added VaultLiquidationTransactionTable and VaultLiquidationTransactionFlow

frontend/components/common/formatters/FormatCurrency.vue

@@ -1,7 +1,7 @@
 <template>
     <span>
         <span v-if="isNotANumber">Unknown</span>
-        <span v-else> {{ sign }}<animated-number :value="value" :decimal-places="decimalPlaces" /> </span>
+        <span v-else>{{ sign }}<animated-number :value="value" :decimal-places="decimalPlaces" /> </span>
         <span class="uppercase">{{ currency }}</span>
     </span>
 </template>

frontend/components/common/formatters/FormatPercentage.vue

@@ -9,7 +9,7 @@ export default Vue.extend({
     name: 'FormatPercentage',
     props: {
         value: {
-            type: Number,
+            type: [Number, String],
             required: true,
         },
     },

frontend/components/common/other/AnimatedArrow.vue

@@ -6,7 +6,7 @@
 import Vue from 'vue';
 import UpArrow from '~/assets/icons/uparrow.svg';
 
-type ArrowDirections = 'up' | 'down' | 'left' | 'right';
+export type ArrowDirections = 'up' | 'down' | 'left' | 'right';
 
 export default Vue.extend({
     components: {

frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue

@@ -9,31 +9,31 @@
         </TextBlock>
         <div class="flex justify-between mt-4">
             <span>Current global limit</span>
-            <span v-if="!isGlobalLimitMissing"
-                ><Explain :text="format(liquidationLimits.maximumProtocolDebtDai)"
-                    >The maximum allowed amount of DAI needed to cover the debt and liquidation incentives of all
-                    active auctions. In maker terms it is called
+            <span v-if="!isGlobalLimitMissing">
+                <Explain :text="format(liquidationLimits.maximumProtocolDebtDai)">
+                    The maximum allowed amount of DAI needed to cover the debt and liquidation incentives of all active
+                    auctions. In maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#dog-hole-rad"
                         target="_blank"
                         >dog.Hole</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(liquidationLimits.currentProtocolDebtDai)"
-                    >The amount of DAI needed to cover the debt and liquidation incentives of all active auctions. In
+                <Explain :text="format(liquidationLimits.currentProtocolDebtDai)">
+                    The amount of DAI needed to cover the debt and liquidation incentives of all active auctions. In
                     maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#limits-on-dai-needed-to-cover-debt-and-fees-of-active-auctions"
                         target="_blank"
                         >dog.Dirt</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(debtAndIncentives)"
-                    >The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
-                    of this auction</Explain
-                >
+                <Explain :text="format(debtAndIncentives)">
+                    The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
+                    of this auction
+                </Explain>
                 = <FormatCurrency :value="globalDifference" currency="DAI"
             /></span>
             <div v-else>
@@ -43,31 +43,31 @@
         </div>
         <div class="flex justify-between">
             <span>Current {{ collateralType }} limit</span>
-            <span v-if="!isCollateralLimitMissing"
-                ><Explain :text="format(liquidationLimits.maximumCollateralDebtDai)"
-                    >The amount of DAI needed to cover the debt and liquidation incentives of active
+            <span v-if="!isCollateralLimitMissing">
+                <Explain :text="format(liquidationLimits.maximumCollateralDebtDai)">
+                    The amount of DAI needed to cover the debt and liquidation incentives of active
                     {{ collateralType }} auctions. In maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#dog-ilk.hole-rad"
                         target="_blank"
                         >ilk.hole</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(liquidationLimits.currentCollateralDebtDai)"
-                    >The amount of DAI needed to cover the debt and liquidation incentives of active
+                <Explain :text="format(liquidationLimits.currentCollateralDebtDai)">
+                    The amount of DAI needed to cover the debt and liquidation incentives of active
                     {{ collateralType }} auctions. In maker terms it is called
                     <a
                         href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#limits-on-dai-needed-to-cover-debt-and-fees-of-active-auctions"
                         target="_blank"
                         >ilk.dirt</a
-                    ></Explain
-                >
+                    >
+                </Explain>
                 -
-                <Explain :text="format(debtAndIncentives)"
-                    >The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
-                    of this auction</Explain
-                >
+                <Explain :text="format(debtAndIncentives)">
+                    The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
+                    of this auction
+                </Explain>
                 = <FormatCurrency :value="collateralDifference" currency="DAI"
             /></span>
             <div v-else>
@@ -113,6 +113,10 @@ export default Vue.extend({
             type: Object as Vue.PropType<LiquidationLimits>,
             required: true,
         },
+        collateralType: {
+            type: String,
+            required: true,
+        },
         debtDai: {
             type: BigNumber,
             required: true,
@@ -125,10 +129,6 @@ export default Vue.extend({
             type: BigNumber,
             required: true,
         },
-        collateralType: {
-            type: String,
-            required: true,
-        },
         isRefreshing: {
             type: Boolean,
             default: false,
@@ -161,7 +161,7 @@ export default Vue.extend({
             );
         },
         currentStateAndTitle(): PanelProps {
-            if (this.isGlobalLimitMissing || this.isCollateralLimitMissing) {
+            if (this.isGlobalLimitMissing || this.isCollateralLimitMissing || !this.debtAndIncentives) {
                 return {
                     name: 'inactive',
                     title: 'Current liquidation limits are unknown',
@@ -185,6 +185,14 @@ export default Vue.extend({
             };
         },
     },
+    watch: {
+        currentStateAndTitle: {
+            immediate: true,
+            handler(newCurrentStateAndTitle) {
+                this.$emit('update:isCorrect', newCurrentStateAndTitle.name === 'correct');
+            },
+        },
+    },
     methods: {
         format(value: BigNumber): string {
             return formatToAutomaticDecimalPoints(value);

frontend/components/vault/VaultLiquidationTransactionFlow.stories.js

@@ -0,0 +1,78 @@
+import { storiesOf } from '@storybook/vue';
+import faker from 'faker';
+import BigNumber from 'bignumber.js';
+import VaultLiquidationTransactionFlow from '~/components/vault/VaultLiquidationTransactionFlow';
+import {
+    generateFakeLiquidationLimits,
+    generateFakeVaultLiquidatedTransaction,
+    generateFakeVaultNotLiquidatedTransaction,
+} from '~/helpers/generateFakeVault';
+
+const common = {
+    components: { VaultLiquidationTransactionFlow },
+    data: () => ({
+        vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
+        liquidationLimits: generateFakeLiquidationLimits(),
+
+        isConnectingWallet: false,
+        walletAddress: undefined,
+
+        isRefreshingLimits: false,
+        isLiquidating: false,
+    }),
+    methods: {
+        connect() {
+            this.isConnectingWallet = true;
+            setTimeout(() => {
+                this.walletAddress = faker.finance.ethereumAddress();
+                this.isConnectingWallet = false;
+            }, 1000);
+        },
+        disconnect() {
+            this.isConnectingWallet = true;
+            setTimeout(() => {
+                this.walletAddress = undefined;
+                this.isConnectingWallet = false;
+            }, 1000);
+        },
+        refreshLimits() {
+            this.isRefreshingLimits = true;
+            setTimeout(() => {
+                this.liquidationLimits = {
+                    maximumProtocolDebtDai: new BigNumber(1000000),
+                    maximumCollateralDebtDai: new BigNumber(1000000),
+                    currentProtocolDebtDai: new BigNumber(0),
+                    currentCollateralDebtDai: new BigNumber(0),
+                };
+                this.isRefreshingLimits = false;
+            }, 1000);
+        },
+        liquidate() {
+            this.isLiquidating = true;
+            setTimeout(() => {
+                this.vaultTransaction = generateFakeVaultLiquidatedTransaction();
+                this.isLiquidating = false;
+            }, 1000);
+        },
+    },
+    template: `
+        <VaultLiquidationTransactionFlow 
+          v-bind="$data" 
+          @connectWallet="connect" 
+          @disconnectWallet="disconnect"
+          @refreshLimits='refreshLimits'
+          @liquidate='liquidate'
+        />`,
+};
+
+storiesOf('Vault/VaultLiquidationTransactionFlow', module)
+    .add('Default', () => ({
+        ...common,
+    }))
+    .add('Liquidated', () => ({
+        ...common,
+        data: () => ({
+            ...common.data(),
+            vaultTransaction: generateFakeVaultLiquidatedTransaction(),
+        }),
+    }));

frontend/components/vault/VaultLiquidationTransactionFlow.vue

@@ -0,0 +1,147 @@
+<template>
+    <div>
+        <TextBlock title="Vault Liquidation transaction" />
+        <Alert v-if="wasLiquidated" show-icon type="warning">
+            <div slot="message">
+                <p>This vault has been liquidated into a collateral auction</p>
+                <div class="flex justify-end mt-2">
+                    <nuxt-link :to="auctionLink">
+                        <Button> View collateral auction {{ vaultTransaction.auctionId }} </Button>
+                    </nuxt-link>
+                </div>
+            </div>
+        </Alert>
+        <VaultLiquidationTransactionTable v-if="!wasLiquidated" class="my-4" :vault-transaction="vaultTransaction" />
+        <TextBlock class="mt-4">
+            <template v-if="wasLiquidated">
+                This vault was liquidated <TimeTill :date="vaultTransaction.liqudiationDate" /> in the transaction
+                <FormatAddress :value="vaultTransaction.transactionHash" />.
+            </template>
+            <template v-else>
+                Please note, the
+                <Explain text="transaction fee" width="350px">
+                    <TransactionFeesTable
+                        :fees="{ LiquidationFee: vaultTransaction.transactionFeeLiquidationEth }"
+                        :combined-fees-eth="vaultTransaction.transactionFeeLiquidationEth"
+                    />
+                </Explain>
+                is a suggested value based on the current gas prices on the market; the “potential net profit” is also
+                approximate, since it is extrapolated from the exchange rates and may change during the transaction. If
+                you’re executing transactions with other participants at the same time, the one who pays a higher
+                transaction fee has more chances to receive the incentive. In case your transaction will be rejected,
+                it will only result in the loss of the transaction fee.
+            </template>
+        </TextBlock>
+        <div v-if="!wasLiquidated" class="my-4">
+            <WalletConnectionCheckPanel
+                :wallet-address="walletAddress"
+                :is-loading="isConnectingWallet"
+                :is-explanations-shown="isExplanationsShown"
+                :is-correct.sync="isWalletConnected"
+                @connectWallet="$emit('connectWallet')"
+                @disconnectWallet="$emit('disconnectWallet')"
+            />
+            <VaultLiquidationLimitsCheckPanel
+                :liquidation-limits="liquidationLimits"
+                :collateral-type="vaultTransaction.collateralType"
+                :debt-dai="vaultTransaction.debtDai"
+                :incentive-relative-dai="vaultTransaction.incentiveRelativeDai"
+                :incentive-constant-dai="vaultTransaction.incentiveConstantDai"
+                :is-refreshing="isRefreshingLimits"
+                :is-explanations-shown="isExplanationsShown"
+                :is-correct.sync="areLimitsNotReached"
+                @refreshLimits="$emit('refreshLimits')"
+            />
+            <VaultLiquidationPanel
+                :vault-id="vaultTransaction.id"
+                :network="vaultTransaction.network"
+                :vault-state="vaultTransaction.state"
+                :wallet-address="walletAddress"
+                :disabled="!isWalletConnected || !areLimitsNotReached"
+                :is-liquidating="isLiquidating"
+                :is-explanations-shown="isExplanationsShown"
+                @liquidate="$emit('liquidate', $event)"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Alert, Button } from 'ant-design-vue';
+import { LiquidationLimits, VaultTransaction } from 'auctions-core/dist/src/types';
+import TransactionFeesTable from '../auction/TransactionFeesTable.vue';
+import { generateLink } from '../../helpers/generateLink';
+import TimeTill from '../common/formatters/TimeTill.vue';
+import FormatAddress from '../common/formatters/FormatAddress.vue';
+import VaultLiquidationLimitsCheckPanel from '../panels/VaultLiquidationLimitsCheckPanel.vue';
+import VaultLiquidationPanel from '../panels/VaultLiquidationPanel.vue';
+import VaultLiquidationTransactionTable from './VaultLiquidationTransactionTable.vue';
+import WalletConnectionCheckPanel from '~/components/panels/WalletConnectionCheckPanel.vue';
+import TextBlock from '~/components/common/other/TextBlock.vue';
+import Explain from '~/components/common/other/Explain.vue';
+
+export default Vue.extend({
+    components: {
+        VaultLiquidationPanel,
+        VaultLiquidationLimitsCheckPanel,
+        FormatAddress,
+        TimeTill,
+        TransactionFeesTable,
+        VaultLiquidationTransactionTable,
+        TextBlock,
+        Alert,
+        Button,
+        WalletConnectionCheckPanel,
+        Explain,
+    },
+    props: {
+        vaultTransaction: {
+            type: Object as Vue.PropType<VaultTransaction>,
+            required: true,
+        },
+        liquidationLimits: {
+            type: Object as Vue.PropType<LiquidationLimits>,
+            required: true,
+        },
+        walletAddress: {
+            type: String,
+            default: null,
+        },
+        isConnectingWallet: {
+            type: Boolean,
+            default: false,
+        },
+        isRefreshingLimits: {
+            type: Boolean,
+            default: false,
+        },
+        isLiquidating: {
+            type: Boolean,
+            default: false,
+        },
+        isExplanationsShown: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            isWalletConnected: false,
+            areLimitsNotReached: false,
+        };
+    },
+    computed: {
+        auctionLink(): string | undefined {
+            if (!this.vaultTransaction || !this.vaultTransaction.auctionId) {
+                return undefined;
+            }
+            const link = generateLink(this.vaultTransaction.network, 'collateral');
+            return `${link}&auction=${encodeURIComponent(this.vaultTransaction.auctionId)}`;
+        },
+        wasLiquidated(): boolean {
+            return this.vaultTransaction.state === 'liquidated';
+        },
+    },
+});
+</script>