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

@@ -1,12 +1,12 @@
 <template>
-    <UpArrow :style="style" />
+    <UpArrow v-if="direction" :style="style" />
 </template>
 
 <script lang="ts">
 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: {
@@ -15,11 +15,14 @@ export default Vue.extend({
     props: {
         direction: {
             type: String as Vue.PropType<ArrowDirections>,
-            required: true,
+            default: undefined,
         },
     },
     computed: {
         style(): Object {
+            if (!this.direction) {
+                return undefined;
+            }
             let rotationDegree = 0;
             if (this.direction === 'down') {
                 rotationDegree = 180;

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 && debtAndIncentives">
+                <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 && debtAndIncentives">
+                <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>
@@ -111,23 +111,23 @@ export default Vue.extend({
     props: {
         liquidationLimits: {
             type: Object as Vue.PropType<LiquidationLimits>,
+            default: undefined,
+        },
+        collateralType: {
+            type: String,
             required: true,
         },
         debtDai: {
             type: BigNumber,
-            required: true,
+            default: undefined,
         },
         incentiveRelativeDai: {
             type: BigNumber,
-            required: true,
+            default: undefined,
         },
         incentiveConstantDai: {
             type: BigNumber,
-            required: true,
-        },
-        collateralType: {
-            type: String,
-            required: true,
+            default: undefined,
         },
         isRefreshing: {
             type: Boolean,
@@ -139,7 +139,10 @@ export default Vue.extend({
         },
     },
     computed: {
-        debtAndIncentives(): BigNumber {
+        debtAndIncentives(): BigNumber | undefined {
+            if (!this.debtDai || !this.incentiveConstantDai || !this.incentiveRelativeDai) {
+                return undefined;
+            }
             return this.debtDai.plus(this.incentiveRelativeDai).plus(this.incentiveConstantDai);
         },
         globalDifference(): BigNumber {
@@ -161,7 +164,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',

frontend/components/vault/VaultLiquidationTransactionFlow.stories.js

@@ -0,0 +1,69 @@
+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,
+    }),
+    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);
+        },
+    },
+    template: `
+        <VaultLiquidationTransactionFlow 
+          v-bind="$data" 
+          @connectWallet="connect" 
+          @disconnectWallet="disconnect"
+          @refreshLimits='refreshLimits'
+        />`,
+};
+
+storiesOf('Vault/VaultLiquidationTransactionFlow', module)
+    .add('Default', () => ({
+        ...common,
+    }))
+    .add('Liquidated', () => ({
+        ...common,
+        data: () => ({
+            ...common.data(),
+            vaultTransaction: generateFakeVaultLiquidatedTransaction(),
+        }),
+    }));

frontend/components/vault/VaultLiquidationTransactionFlow.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <TextBlock title="Vault Liquidation transaction" />
+        <Alert v-if="vaultTransaction.state === 'liquidated'" 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 class="my-4" :vault-transaction="vaultTransaction" />
+        <TextBlock class="mb-8">
+            <template v-if="vaultTransaction.state === 'liquidated'">
+                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 class="mb-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"
+                @refreshLimits="$emit('refreshLimits')"
+            />
+            <!-- LiquidationPanel -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Alert, Button } from 'ant-design-vue';
+import { LiquidationLimits, VaultTransactionNotLiquidated } 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 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: {
+        VaultLiquidationLimitsCheckPanel,
+        FormatAddress,
+        TimeTill,
+        TransactionFeesTable,
+        VaultLiquidationTransactionTable,
+        TextBlock,
+        Alert,
+        Button,
+        WalletConnectionCheckPanel,
+        Explain,
+    },
+    props: {
+        vaultTransaction: {
+            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
+            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,
+        },
+        isExplanationsShown: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            isWalletConnected: 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)}`;
+        },
+    },
+});
+</script>