From b3e4fdc563439d5002fb060edfa4b7dc86607915 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Fri, 9 Sep 2022 13:05:58 +0200
Subject: [PATCH 01/15] Add VaultLiquidationTransactionTable component and
 stories

---
 ...VaultLiqudationTransactionTable.stories.js |  15 +++
 .../vault/VaultLiqudationTransactionTable.vue | 108 ++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 frontend/components/auction/vault/VaultLiqudationTransactionTable.stories.js
 create mode 100644 frontend/components/auction/vault/VaultLiqudationTransactionTable.vue

diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.stories.js b/frontend/components/auction/vault/VaultLiqudationTransactionTable.stories.js
new file mode 100644
index 000000000..7d6d4ca5a
--- /dev/null
+++ b/frontend/components/auction/vault/VaultLiqudationTransactionTable.stories.js
@@ -0,0 +1,15 @@
+import { storiesOf } from '@storybook/vue';
+import VaultLiqudationTransactionTable from './VaultLiqudationTransactionTable';
+import { generateFakeVaultNotLiquidatedTransaction } from '~/helpers/generateFakeVault';
+
+const common = {
+    components: { VaultLiqudationTransactionTable },
+    data: () => ({
+        auction: generateFakeVaultNotLiquidatedTransaction(),
+    }),
+    template: '<VaultLiqudationTransactionTable :auction="auction" />',
+};
+
+storiesOf('Auction/Vault/VaultLiqudationTransactionTable', module).add('Default', () => ({
+    ...common,
+}));
diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
new file mode 100644
index 000000000..184517cf7
--- /dev/null
+++ b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
@@ -0,0 +1,108 @@
+<template>
+    <div class="flex flex-col space-y-1 text-gray-700 dark:text-gray-100">
+        <div class="flex justify-between">
+            <div>Proximity to liquidation threshold</div>
+            <div>
+                <span v-if="auction.proximityToLiquidation < 0" class="text-green-500"
+                    >(Ready for liquidation) {{ auction.proximityToLiquidation }}%</span
+                >
+                <span v-else>{{ auction.proximityToLiquidation }}%</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Next price update</div>
+            <div>
+                <!--AnimatedArrow-->
+                in <TimeTill :date="auction.nextPriceChange" />
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Debt</div>
+            <div><FormatCurrency :value="auction.debtDai" currency="DAI" /></div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <Explain text="Liquidation incentive relative" />
+                <span v-if="auction.incentiveRelativeDai" class="opacity-50"
+                    >(~ {{ incentiveRelativePercentage }} for {{ auction.collateralType }})</span
+                >
+            </div>
+            <div>
+                <FormatCurrency
+                    v-if="auction.incentiveRelativeDai"
+                    :value="auction.incentiveRelativeDai"
+                    currency="DAI"
+                />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div><Explain text="Liquidation incentive constant" /></div>
+            <div>
+                <FormatCurrency
+                    v-if="auction.incentiveConstantDai"
+                    :value="auction.incentiveConstantDai"
+                    currency="DAI"
+                />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Potential gross profit</div>
+            <div>
+                <FormatCurrency v-if="auction.grossProfitDai" :value="auction.grossProfitDai" currency="DAI" />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <Explain text="Combined Transaction Fees" />
+                <span v-if="auction.transactionFeeLiquidationDai" class="opacity-50"
+                    >(~ <FormatCurrency :value="auction.transactionFeeLiquidationEth" currency="ETH" />)</span
+                >
+            </div>
+            <div>
+                <FormatCurrency
+                    v-if="auction.transactionFeeLiquidationDai"
+                    :value="auction.transactionFeeLiquidationDai"
+                    currency="DAI"
+                />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between font-bold">
+            <div>Potential net profit</div>
+            <div>
+                <FormatCurrency v-if="auction.netProfitDai" :value="auction.netProfitDai" currency="DAI" />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import type { VaultTransaction } from 'auctions-core/src/types';
+import TimeTill from '~/components/common/formatters/TimeTill.vue';
+import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
+import Explain from '~/components/common/other/Explain.vue';
+
+export default Vue.extend({
+    components: {
+        TimeTill,
+        FormatCurrency,
+        Explain,
+    },
+    props: {
+        auction: {
+            type: Object as Vue.PropType<VaultTransaction>,
+            required: true,
+        },
+    },
+    computed: {
+        incentiveRelativePercentage(): String {
+            return this.auction.incentiveRelativeDai.div(this.auction.debtDai).times(100).toFixed(2) + '%';
+        },
+    },
+});
+</script>

From 47d7e481dc58ac1cef93555defbe16d31a3fdbb8 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Fri, 9 Sep 2022 13:08:47 +0200
Subject: [PATCH 02/15] Use float for transaction fees and correct net profit
 calculation

---
 frontend/helpers/generateFakeVault.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/helpers/generateFakeVault.ts b/frontend/helpers/generateFakeVault.ts
index aaebfd97a..14cf2cbde 100644
--- a/frontend/helpers/generateFakeVault.ts
+++ b/frontend/helpers/generateFakeVault.ts
@@ -67,7 +67,7 @@ export const generateFakeVault = function (): Vault {
 };
 
 const generateFakeVaultTransactionFees = function (): VaultTransactionFees {
-    const transactionFeeLiquidationEth = new BigNumber(faker.datatype.number(0.5));
+    const transactionFeeLiquidationEth = new BigNumber(faker.datatype.float({ max: 0.5 }));
     const transactionFeeLiquidationDai = transactionFeeLiquidationEth.multipliedBy(1600);
 
     return {
@@ -120,7 +120,7 @@ export const generateFakeVaultNotLiquidatedTransaction = function (): VaultTrans
     const incentiveConstantDai = new BigNumber(faker.finance.amount());
     const incentiveCombinedDai = incentiveRelativeDai.plus(incentiveConstantDai);
 
-    const grossProfitDai = incentiveCombinedDai.minus(fakeTransactionFees.transactionFeeLiquidationDai);
+    const netProfitDai = incentiveCombinedDai.minus(fakeTransactionFees.transactionFeeLiquidationDai);
     const debtDai = new BigNumber(faker.finance.amount());
 
     return {
@@ -134,8 +134,8 @@ export const generateFakeVaultNotLiquidatedTransaction = function (): VaultTrans
         incentiveRelativeDai,
         incentiveConstantDai,
         incentiveCombinedDai,
-        grossProfitDai,
-        netProfitDai: incentiveCombinedDai,
+        grossProfitDai: incentiveCombinedDai,
+        netProfitDai,
         debtDai,
     };
 };

From 11dcdf0cf8c89e2ebd48fed45579acaed219b6e2 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Fri, 9 Sep 2022 18:12:36 +0200
Subject: [PATCH 03/15] Add signs in transaction table and remove extra space
 in FormatCurrency

---
 .../auction/vault/VaultLiqudationTransactionTable.vue         | 4 ++--
 frontend/components/common/formatters/FormatCurrency.vue      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
index 184517cf7..4147716bc 100644
--- a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
+++ b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
@@ -50,7 +50,7 @@
         <div class="flex justify-between">
             <div>Potential gross profit</div>
             <div>
-                <FormatCurrency v-if="auction.grossProfitDai" :value="auction.grossProfitDai" currency="DAI" />
+                +<FormatCurrency v-if="auction.grossProfitDai" :value="auction.grossProfitDai" currency="DAI" />
                 <span v-else class="opacity-50">Unknown</span>
             </div>
         </div>
@@ -62,7 +62,7 @@
                 >
             </div>
             <div>
-                <FormatCurrency
+                -<FormatCurrency
                     v-if="auction.transactionFeeLiquidationDai"
                     :value="auction.transactionFeeLiquidationDai"
                     currency="DAI"
diff --git a/frontend/components/common/formatters/FormatCurrency.vue b/frontend/components/common/formatters/FormatCurrency.vue
index be0dbe7d3..a355ceaf5 100644
--- a/frontend/components/common/formatters/FormatCurrency.vue
+++ b/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>

From 000870dbe06a501ab55112b4240cf1f0625a400a Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Mon, 12 Sep 2022 16:50:06 +0200
Subject: [PATCH 04/15] Add AnimatedArrow

---
 .../vault/VaultLiqudationTransactionTable.vue | 25 ++++++++++++++-----
 .../components/common/other/AnimatedArrow.vue |  2 +-
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
index 4147716bc..0049e8a77 100644
--- a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
+++ b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
@@ -11,9 +11,9 @@
         </div>
         <div class="flex justify-between">
             <div>Next price update</div>
-            <div>
-                <!--AnimatedArrow-->
-                in <TimeTill :date="auction.nextPriceChange" />
+            <div class="flex items-center space-x-1">
+                <AnimatedArrow :direction="getIsPriceGoingUpOrDown" class="h-3" />
+                <span>in <TimeTill :date="auction.nextPriceChange" /></span>
             </div>
         </div>
         <div class="flex justify-between">
@@ -82,26 +82,39 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import type { VaultTransaction } from 'auctions-core/src/types';
+import { VaultTransactionNotLiquidated } from 'auctions-core/src/types';
+import { formatToAutomaticDecimalPoints } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
 import TimeTill from '~/components/common/formatters/TimeTill.vue';
 import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
 import Explain from '~/components/common/other/Explain.vue';
+import AnimatedArrow, { ArrowDirections } from '~/components/common/other/AnimatedArrow.vue';
 
 export default Vue.extend({
     components: {
         TimeTill,
         FormatCurrency,
         Explain,
+        AnimatedArrow,
     },
     props: {
         auction: {
-            type: Object as Vue.PropType<VaultTransaction>,
+            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
             required: true,
         },
     },
     computed: {
         incentiveRelativePercentage(): String {
-            return this.auction.incentiveRelativeDai.div(this.auction.debtDai).times(100).toFixed(2) + '%';
+            return (
+                formatToAutomaticDecimalPoints(
+                    this.auction.incentiveRelativeDai.div(this.auction.debtDai).times(100)
+                ) + '%'
+            );
+        },
+        getIsPriceGoingUpOrDown(): ArrowDirections {
+            if (this.auction.nextUnitPrice.isGreaterThan(this.auction.currentUnitPrice)) {
+                return 'up';
+            }
+            return 'down';
         },
     },
 });
diff --git a/frontend/components/common/other/AnimatedArrow.vue b/frontend/components/common/other/AnimatedArrow.vue
index c3388f51d..2dd8523b1 100644
--- a/frontend/components/common/other/AnimatedArrow.vue
+++ b/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: {

From d7a2039721ef93518ff69df77ba4597b0e22dd38 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 13 Sep 2022 16:47:52 +0200
Subject: [PATCH 05/15] Add explanations for incentives

---
 .../vault/VaultLiqudationTransactionTable.vue | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
index 0049e8a77..27795e3ec 100644
--- a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
+++ b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
@@ -22,7 +22,14 @@
         </div>
         <div class="flex justify-between">
             <div>
-                <Explain text="Liquidation incentive relative" />
+                <Explain text="Liquidation incentive relative"
+                    >A variable collateral-based reward for liquidators set by the
+                    <a
+                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#liquidation-incentive-mechanism"
+                        target="blank"
+                        >incentive mechanism</a
+                    >, which scales linearly with the amount of debt associated with the liquidation</Explain
+                >
                 <span v-if="auction.incentiveRelativeDai" class="opacity-50"
                     >(~ {{ incentiveRelativePercentage }} for {{ auction.collateralType }})</span
                 >
@@ -37,7 +44,16 @@
             </div>
         </div>
         <div class="flex justify-between">
-            <div><Explain text="Liquidation incentive constant" /></div>
+            <div>
+                <Explain text="Liquidation incentive constant"
+                    >A constant collateral-based reward for liquidators set by the
+                    <a
+                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#liquidation-incentive-mechanism"
+                        target="blank"
+                        >incentive mechanism</a
+                    ></Explain
+                >
+            </div>
             <div>
                 <FormatCurrency
                     v-if="auction.incentiveConstantDai"

From 5ed7bc7639155845cc2df856962242704ee3d200 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 13 Sep 2022 17:37:35 +0200
Subject: [PATCH 06/15] Remove Explain block from transaction fee

---
 .../auction/vault/VaultLiqudationTransactionTable.vue           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
index 27795e3ec..ab90ea9fe 100644
--- a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
+++ b/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
@@ -72,7 +72,7 @@
         </div>
         <div class="flex justify-between">
             <div>
-                <Explain text="Combined Transaction Fees" />
+                Transaction fee
                 <span v-if="auction.transactionFeeLiquidationDai" class="opacity-50"
                     >(~ <FormatCurrency :value="auction.transactionFeeLiquidationEth" currency="ETH" />)</span
                 >

From 7a6e629feaeafa990c602b66b9880be79270ba48 Mon Sep 17 00:00:00 2001
From: Abdelrhman Farag <aomafarag@gmail.com>
Date: Tue, 13 Sep 2022 18:48:35 +0200
Subject: [PATCH 07/15] Move vault directory

---
 .../vault/VaultLiqudationTransactionTable.stories.js              | 0
 .../{auction => }/vault/VaultLiqudationTransactionTable.vue       | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename frontend/components/{auction => }/vault/VaultLiqudationTransactionTable.stories.js (100%)
 rename frontend/components/{auction => }/vault/VaultLiqudationTransactionTable.vue (100%)

diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.stories.js b/frontend/components/vault/VaultLiqudationTransactionTable.stories.js
similarity index 100%
rename from frontend/components/auction/vault/VaultLiqudationTransactionTable.stories.js
rename to frontend/components/vault/VaultLiqudationTransactionTable.stories.js
diff --git a/frontend/components/auction/vault/VaultLiqudationTransactionTable.vue b/frontend/components/vault/VaultLiqudationTransactionTable.vue
similarity index 100%
rename from frontend/components/auction/vault/VaultLiqudationTransactionTable.vue
rename to frontend/components/vault/VaultLiqudationTransactionTable.vue

From fe7c0f830c20ad39340b81d86f4bf95b52ac0ca7 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Wed, 14 Sep 2022 16:20:49 +0200
Subject: [PATCH 08/15] Added VaultLiquidationTransactionFlow and improved
 VaultLiquidationTransactionTable

---
 ...VaultLiqudationTransactionTable.stories.js |  15 --
 .../vault/VaultLiqudationTransactionTable.vue | 137 ---------------
 ...VaultLiquidationTransactionFlow.stories.js |  52 ++++++
 .../vault/VaultLiquidationTransactionFlow.vue | 113 +++++++++++++
 ...aultLiquidationTransactionTable.stories.js |  26 +++
 .../VaultLiquidationTransactionTable.vue      | 158 ++++++++++++++++++
 frontend/helpers/generateFakeVault.ts         |   4 +-
 7 files changed, 351 insertions(+), 154 deletions(-)
 delete mode 100644 frontend/components/vault/VaultLiqudationTransactionTable.stories.js
 delete mode 100644 frontend/components/vault/VaultLiqudationTransactionTable.vue
 create mode 100644 frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
 create mode 100644 frontend/components/vault/VaultLiquidationTransactionFlow.vue
 create mode 100644 frontend/components/vault/VaultLiquidationTransactionTable.stories.js
 create mode 100644 frontend/components/vault/VaultLiquidationTransactionTable.vue

diff --git a/frontend/components/vault/VaultLiqudationTransactionTable.stories.js b/frontend/components/vault/VaultLiqudationTransactionTable.stories.js
deleted file mode 100644
index 7d6d4ca5a..000000000
--- a/frontend/components/vault/VaultLiqudationTransactionTable.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { storiesOf } from '@storybook/vue';
-import VaultLiqudationTransactionTable from './VaultLiqudationTransactionTable';
-import { generateFakeVaultNotLiquidatedTransaction } from '~/helpers/generateFakeVault';
-
-const common = {
-    components: { VaultLiqudationTransactionTable },
-    data: () => ({
-        auction: generateFakeVaultNotLiquidatedTransaction(),
-    }),
-    template: '<VaultLiqudationTransactionTable :auction="auction" />',
-};
-
-storiesOf('Auction/Vault/VaultLiqudationTransactionTable', module).add('Default', () => ({
-    ...common,
-}));
diff --git a/frontend/components/vault/VaultLiqudationTransactionTable.vue b/frontend/components/vault/VaultLiqudationTransactionTable.vue
deleted file mode 100644
index ab90ea9fe..000000000
--- a/frontend/components/vault/VaultLiqudationTransactionTable.vue
+++ /dev/null
@@ -1,137 +0,0 @@
-<template>
-    <div class="flex flex-col space-y-1 text-gray-700 dark:text-gray-100">
-        <div class="flex justify-between">
-            <div>Proximity to liquidation threshold</div>
-            <div>
-                <span v-if="auction.proximityToLiquidation < 0" class="text-green-500"
-                    >(Ready for liquidation) {{ auction.proximityToLiquidation }}%</span
-                >
-                <span v-else>{{ auction.proximityToLiquidation }}%</span>
-            </div>
-        </div>
-        <div class="flex justify-between">
-            <div>Next price update</div>
-            <div class="flex items-center space-x-1">
-                <AnimatedArrow :direction="getIsPriceGoingUpOrDown" class="h-3" />
-                <span>in <TimeTill :date="auction.nextPriceChange" /></span>
-            </div>
-        </div>
-        <div class="flex justify-between">
-            <div>Debt</div>
-            <div><FormatCurrency :value="auction.debtDai" currency="DAI" /></div>
-        </div>
-        <div class="flex justify-between">
-            <div>
-                <Explain text="Liquidation incentive relative"
-                    >A variable collateral-based reward for liquidators set by the
-                    <a
-                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#liquidation-incentive-mechanism"
-                        target="blank"
-                        >incentive mechanism</a
-                    >, which scales linearly with the amount of debt associated with the liquidation</Explain
-                >
-                <span v-if="auction.incentiveRelativeDai" class="opacity-50"
-                    >(~ {{ incentiveRelativePercentage }} for {{ auction.collateralType }})</span
-                >
-            </div>
-            <div>
-                <FormatCurrency
-                    v-if="auction.incentiveRelativeDai"
-                    :value="auction.incentiveRelativeDai"
-                    currency="DAI"
-                />
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
-        </div>
-        <div class="flex justify-between">
-            <div>
-                <Explain text="Liquidation incentive constant"
-                    >A constant collateral-based reward for liquidators set by the
-                    <a
-                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#liquidation-incentive-mechanism"
-                        target="blank"
-                        >incentive mechanism</a
-                    ></Explain
-                >
-            </div>
-            <div>
-                <FormatCurrency
-                    v-if="auction.incentiveConstantDai"
-                    :value="auction.incentiveConstantDai"
-                    currency="DAI"
-                />
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
-        </div>
-        <div class="flex justify-between">
-            <div>Potential gross profit</div>
-            <div>
-                +<FormatCurrency v-if="auction.grossProfitDai" :value="auction.grossProfitDai" currency="DAI" />
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
-        </div>
-        <div class="flex justify-between">
-            <div>
-                Transaction fee
-                <span v-if="auction.transactionFeeLiquidationDai" class="opacity-50"
-                    >(~ <FormatCurrency :value="auction.transactionFeeLiquidationEth" currency="ETH" />)</span
-                >
-            </div>
-            <div>
-                -<FormatCurrency
-                    v-if="auction.transactionFeeLiquidationDai"
-                    :value="auction.transactionFeeLiquidationDai"
-                    currency="DAI"
-                />
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
-        </div>
-        <div class="flex justify-between font-bold">
-            <div>Potential net profit</div>
-            <div>
-                <FormatCurrency v-if="auction.netProfitDai" :value="auction.netProfitDai" currency="DAI" />
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import { VaultTransactionNotLiquidated } from 'auctions-core/src/types';
-import { formatToAutomaticDecimalPoints } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
-import TimeTill from '~/components/common/formatters/TimeTill.vue';
-import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
-import Explain from '~/components/common/other/Explain.vue';
-import AnimatedArrow, { ArrowDirections } from '~/components/common/other/AnimatedArrow.vue';
-
-export default Vue.extend({
-    components: {
-        TimeTill,
-        FormatCurrency,
-        Explain,
-        AnimatedArrow,
-    },
-    props: {
-        auction: {
-            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
-            required: true,
-        },
-    },
-    computed: {
-        incentiveRelativePercentage(): String {
-            return (
-                formatToAutomaticDecimalPoints(
-                    this.auction.incentiveRelativeDai.div(this.auction.debtDai).times(100)
-                ) + '%'
-            );
-        },
-        getIsPriceGoingUpOrDown(): ArrowDirections {
-            if (this.auction.nextUnitPrice.isGreaterThan(this.auction.currentUnitPrice)) {
-                return 'up';
-            }
-            return 'down';
-        },
-    },
-});
-</script>
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
new file mode 100644
index 000000000..fe20af5ac
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
@@ -0,0 +1,52 @@
+import { storiesOf } from '@storybook/vue';
+import faker from 'faker';
+import VaultLiquidationTransactionFlow from '~/components/vault/VaultLiquidationTransactionFlow';
+import {
+    generateFakeVaultLiquidatedTransaction,
+    generateFakeVaultNotLiquidatedTransaction,
+} from '~/helpers/generateFakeVault';
+
+const common = {
+    components: { VaultLiquidationTransactionFlow },
+    data: () => ({
+        vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
+        network: 'mainnet',
+
+        isConnectingWallet: false,
+        walletAddress: undefined,
+    }),
+    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);
+        },
+    },
+    template: `
+        <VaultLiquidationTransactionFlow 
+          v-bind="$data" 
+          @connectWallet="connect" 
+          @disconnectWallet="disconnect"
+        />`,
+};
+
+storiesOf('Vault/VaultLiquidationTransactionFlow', module)
+    .add('Default', () => ({
+        ...common,
+    }))
+    .add('Liquidated', () => ({
+        ...common,
+        data: () => ({
+            ...common.data(),
+            vaultTransaction: generateFakeVaultLiquidatedTransaction(),
+        }),
+    }));
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
new file mode 100644
index 000000000..b4a06722f
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -0,0 +1,113 @@
+<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="vaultLink">
+                        <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')"
+            />
+            <!-- LiquidationLimitsCheckPanel -->
+            <!-- LiquidationPanel -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Alert, Button } from 'ant-design-vue';
+import { 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 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: {
+        FormatAddress,
+        TimeTill,
+        TransactionFeesTable,
+        VaultLiquidationTransactionTable,
+        TextBlock,
+        Alert,
+        Button,
+        WalletConnectionCheckPanel,
+        Explain,
+    },
+    props: {
+        vaultTransaction: {
+            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
+            required: true,
+        },
+        walletAddress: {
+            type: String,
+            default: null,
+        },
+        isConnectingWallet: {
+            type: Boolean,
+            default: false,
+        },
+        network: {
+            type: String,
+            default: 'mainnet',
+        },
+        isExplanationsShown: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {
+            isWalletConnected: false,
+        };
+    },
+    computed: {
+        vaultLink(): string | undefined {
+            if (!this.vaultTransaction || !this.vaultTransaction.auctionId) {
+                return undefined;
+            }
+            const link = generateLink(this.network, 'collateral');
+            const formattedAuctionId = this.vaultTransaction.auctionId.replace(':', '%3A');
+            return `${link}&auction=${formattedAuctionId}`;
+        },
+    },
+});
+</script>
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.stories.js b/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
new file mode 100644
index 000000000..b163d5078
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
@@ -0,0 +1,26 @@
+import { storiesOf } from '@storybook/vue';
+import VaultLiquidationTransactionTable from '~/components/vault/VaultLiquidationTransactionTable';
+import {
+    generateFakeVaultLiquidatedTransaction,
+    generateFakeVaultNotLiquidatedTransaction,
+} from '~/helpers/generateFakeVault';
+
+const common = {
+    components: { VaultLiquidationTransactionTable },
+    data: () => ({
+        vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
+    }),
+    template: '<VaultLiquidationTransactionTable :vaultTransaction="vaultTransaction" />',
+};
+
+storiesOf('Vault/VaultLiquidationTransactionTable', module)
+    .add('Default', () => ({
+        ...common,
+    }))
+    .add('Liquidated', () => ({
+        ...common,
+        data: () => ({
+            ...common.data(),
+            vaultTransaction: generateFakeVaultLiquidatedTransaction(),
+        }),
+    }));
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.vue b/frontend/components/vault/VaultLiquidationTransactionTable.vue
new file mode 100644
index 000000000..b983492ab
--- /dev/null
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="flex flex-col space-y-1 text-gray-700 dark:text-gray-100">
+        <div class="flex justify-between">
+            <div>Proximity to liquidation threshold</div>
+            <div>
+                <span v-if="vaultTransaction.proximityToLiquidation < 0" class="text-green-500 mr-1">
+                    (Ready for liquidation)
+                </span>
+                <span v-if="vaultTransaction.proximityToLiquidation">
+                    {{ vaultTransaction.proximityToLiquidation }}%
+                </span>
+                <span v-else class="opacity-50"> </span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Next price update</div>
+            <div class="flex items-center space-x-1">
+                <template v-if="vaultTransaction.nextPriceChange">
+                    <AnimatedArrow :direction="getIsPriceGoingUpOrDown" class="h-3" />
+                    <span>in <TimeTill :date="vaultTransaction.nextPriceChange" /></span>
+                </template>
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Debt</div>
+            <div>
+                <FormatCurrency v-if="vaultTransaction.debtDai" :value="vaultTransaction.debtDai" currency="DAI" />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <Explain text="Liquidation incentive relative">
+                    The relative incentive parameter represents a reward in DAI paid to the user who liquidates the
+                    vault. It is relative to vault size. In maker terms it is called
+                    <a
+                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#clipper-chip-wad"
+                        target="_blank"
+                        >clip.chip</a
+                    >.
+                </Explain>
+                <span
+                    v-if="vaultTransaction.incentiveRelativeDai && vaultTransaction.collateralType"
+                    class="opacity-50"
+                    >(~ {{ incentiveRelativePercentage }} for {{ vaultTransaction.collateralType }})</span
+                >
+            </div>
+            <div>
+                <FormatCurrency
+                    v-if="vaultTransaction.incentiveRelativeDai"
+                    :value="vaultTransaction.incentiveRelativeDai"
+                    currency="DAI"
+                />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                <Explain text="Liquidation incentive constant">
+                    The constant incentive parameter represents a reward in DAI paid to the user who liquidates the
+                    vault. It is constant for all liquidations of the same collateral type. In maker terms it is called
+                    <a
+                        href="https://docs.makerdao.com/smart-contract-modules/dog-and-clipper-detailed-documentation#clipper-tip-rad"
+                        target="_blank"
+                    >
+                        clip.tip</a
+                    >.
+                </Explain>
+            </div>
+            <div>
+                <FormatCurrency
+                    v-if="vaultTransaction.incentiveConstantDai"
+                    :value="vaultTransaction.incentiveConstantDai"
+                    currency="DAI"
+                />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>Potential gross profit</div>
+            <div>
+                <template v-if="vaultTransaction.grossProfitDai">
+                    +<FormatCurrency :value="vaultTransaction.grossProfitDai" currency="DAI" />
+                </template>
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between">
+            <div>
+                Transaction fee
+                <span v-if="vaultTransaction.transactionFeeLiquidationDai" class="opacity-50"
+                    >(~ <FormatCurrency :value="vaultTransaction.transactionFeeLiquidationEth" currency="ETH" />)</span
+                >
+            </div>
+            <div>
+                <template v-if="vaultTransaction.transactionFeeLiquidationDai">
+                    -<FormatCurrency :value="vaultTransaction.transactionFeeLiquidationDai" currency="DAI" />
+                </template>
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+        <div class="flex justify-between font-bold">
+            <div>Potential net profit</div>
+            <div>
+                <FormatCurrency
+                    v-if="vaultTransaction.netProfitDai"
+                    :value="vaultTransaction.netProfitDai"
+                    currency="DAI"
+                />
+                <span v-else class="opacity-50">Unknown</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { VaultTransactionNotLiquidated } from 'auctions-core/src/types';
+import { formatToAutomaticDecimalPoints } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
+import TimeTill from '~/components/common/formatters/TimeTill.vue';
+import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
+import Explain from '~/components/common/other/Explain.vue';
+import AnimatedArrow, { ArrowDirections } from '~/components/common/other/AnimatedArrow.vue';
+
+export default Vue.extend({
+    components: {
+        TimeTill,
+        FormatCurrency,
+        Explain,
+        AnimatedArrow,
+    },
+    props: {
+        vaultTransaction: {
+            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
+            required: true,
+        },
+    },
+    computed: {
+        incentiveRelativePercentage(): String {
+            return (
+                formatToAutomaticDecimalPoints(
+                    this.vaultTransaction.incentiveRelativeDai.div(this.vaultTransaction.debtDai).times(100)
+                ) + '%'
+            );
+        },
+        getIsPriceGoingUpOrDown(): ArrowDirections {
+            if (!this.vaultTransaction.nextUnitPrice || !this.vaultTransaction.currentUnitPrice) {
+                return 'up';
+            }
+            if (this.vaultTransaction.nextUnitPrice.isGreaterThan(this.vaultTransaction.currentUnitPrice)) {
+                return 'up';
+            }
+            return 'down';
+        },
+    },
+});
+</script>
diff --git a/frontend/helpers/generateFakeVault.ts b/frontend/helpers/generateFakeVault.ts
index 14cf2cbde..067c4243f 100644
--- a/frontend/helpers/generateFakeVault.ts
+++ b/frontend/helpers/generateFakeVault.ts
@@ -88,7 +88,7 @@ const generateFakeOraclePrices = function (): OraclePrices {
     };
 };
 
-const generateFakeVaultLiqudatedTransaction = function (): VaultTransactionLiquidated {
+export const generateFakeVaultLiquidatedTransaction = function (): VaultTransactionLiquidated {
     const fakeVault = generateFakeVault();
 
     const liqudiationDate = faker.date.recent();
@@ -149,7 +149,7 @@ export const generateFakeVaultTransactions = function (
     notLiquidatedVaultsAmount = random(5, 15)
 ) {
     const vaults = [];
-    vaults.push(Array(liquidatedVaultsAmount).fill(null).map(generateFakeVaultLiqudatedTransaction));
+    vaults.push(Array(liquidatedVaultsAmount).fill(null).map(generateFakeVaultLiquidatedTransaction));
     vaults.push(Array(notLiquidatedVaultsAmount).fill(null).map(generateFakeVaultNotLiquidatedTransaction));
     return vaults;
 };

From 580ae571c17cc9886ec8410aa42728af9baeccf7 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Wed, 14 Sep 2022 18:29:57 +0200
Subject: [PATCH 09/15] Requested changes

---
 .../common/formatters/FormatPercentage.vue        |  2 +-
 .../components/common/other/AnimatedArrow.vue     |  7 +++++--
 .../VaultLiquidationTransactionFlow.stories.js    |  1 -
 .../vault/VaultLiquidationTransactionFlow.vue     | 13 ++++---------
 .../vault/VaultLiquidationTransactionTable.vue    | 15 ++++++++-------
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/frontend/components/common/formatters/FormatPercentage.vue b/frontend/components/common/formatters/FormatPercentage.vue
index fef05c758..38fc18e2b 100644
--- a/frontend/components/common/formatters/FormatPercentage.vue
+++ b/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,
         },
     },
diff --git a/frontend/components/common/other/AnimatedArrow.vue b/frontend/components/common/other/AnimatedArrow.vue
index 2dd8523b1..1bdb6dbd0 100644
--- a/frontend/components/common/other/AnimatedArrow.vue
+++ b/frontend/components/common/other/AnimatedArrow.vue
@@ -1,5 +1,5 @@
 <template>
-    <UpArrow :style="style" />
+    <UpArrow v-if="direction" :style="style" />
 </template>
 
 <script lang="ts">
@@ -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;
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
index fe20af5ac..2308a795a 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
@@ -10,7 +10,6 @@ const common = {
     components: { VaultLiquidationTransactionFlow },
     data: () => ({
         vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
-        network: 'mainnet',
 
         isConnectingWallet: false,
         walletAddress: undefined,
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
index b4a06722f..fd4183452 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -5,7 +5,7 @@
             <div slot="message">
                 <p>This vault has been liquidated into a collateral auction</p>
                 <div class="flex justify-end mt-2">
-                    <nuxt-link :to="vaultLink">
+                    <nuxt-link :to="auctionLink">
                         <Button> View collateral auction {{ vaultTransaction.auctionId }} </Button>
                     </nuxt-link>
                 </div>
@@ -85,10 +85,6 @@ export default Vue.extend({
             type: Boolean,
             default: false,
         },
-        network: {
-            type: String,
-            default: 'mainnet',
-        },
         isExplanationsShown: {
             type: Boolean,
             default: true,
@@ -100,13 +96,12 @@ export default Vue.extend({
         };
     },
     computed: {
-        vaultLink(): string | undefined {
+        auctionLink(): string | undefined {
             if (!this.vaultTransaction || !this.vaultTransaction.auctionId) {
                 return undefined;
             }
-            const link = generateLink(this.network, 'collateral');
-            const formattedAuctionId = this.vaultTransaction.auctionId.replace(':', '%3A');
-            return `${link}&auction=${formattedAuctionId}`;
+            const link = generateLink(this.vaultTransaction.network, 'collateral');
+            return `${link}&auction=${encodeURIComponent(this.vaultTransaction.auctionId)}`;
         },
     },
 });
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.vue b/frontend/components/vault/VaultLiquidationTransactionTable.vue
index b983492ab..cf680de6b 100644
--- a/frontend/components/vault/VaultLiquidationTransactionTable.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.vue
@@ -43,7 +43,8 @@
                 <span
                     v-if="vaultTransaction.incentiveRelativeDai && vaultTransaction.collateralType"
                     class="opacity-50"
-                    >(~ {{ incentiveRelativePercentage }} for {{ vaultTransaction.collateralType }})</span
+                    >(~ <format-percentage :value="incentiveRelativePercentage" /> for
+                    {{ vaultTransaction.collateralType }})</span
                 >
             </div>
             <div>
@@ -118,6 +119,7 @@
 import Vue from 'vue';
 import { VaultTransactionNotLiquidated } from 'auctions-core/src/types';
 import { formatToAutomaticDecimalPoints } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
+import FormatPercentage from '../common/formatters/FormatPercentage.vue';
 import TimeTill from '~/components/common/formatters/TimeTill.vue';
 import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
 import Explain from '~/components/common/other/Explain.vue';
@@ -125,6 +127,7 @@ import AnimatedArrow, { ArrowDirections } from '~/components/common/other/Animat
 
 export default Vue.extend({
     components: {
+        FormatPercentage,
         TimeTill,
         FormatCurrency,
         Explain,
@@ -137,16 +140,14 @@ export default Vue.extend({
         },
     },
     computed: {
-        incentiveRelativePercentage(): String {
-            return (
-                formatToAutomaticDecimalPoints(
-                    this.vaultTransaction.incentiveRelativeDai.div(this.vaultTransaction.debtDai).times(100)
-                ) + '%'
+        incentiveRelativePercentage(): string {
+            return formatToAutomaticDecimalPoints(
+                this.vaultTransaction.incentiveRelativeDai.div(this.vaultTransaction.debtDai).times(100)
             );
         },
         getIsPriceGoingUpOrDown(): ArrowDirections {
             if (!this.vaultTransaction.nextUnitPrice || !this.vaultTransaction.currentUnitPrice) {
-                return 'up';
+                return undefined;
             }
             if (this.vaultTransaction.nextUnitPrice.isGreaterThan(this.vaultTransaction.currentUnitPrice)) {
                 return 'up';

From 5a83a515e4a0a7fd49ced414bd4bc7f8b1894eeb Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Wed, 14 Sep 2022 19:06:00 +0200
Subject: [PATCH 10/15] Integrated VaultLiquidationLimitsCheck into
 VaultLiquidationTransactionFlow

---
 ...VaultLiquidationTransactionFlow.stories.js | 18 +++++++++++++++
 .../vault/VaultLiquidationTransactionFlow.vue | 23 +++++++++++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
index 2308a795a..6c298757c 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
@@ -1,7 +1,9 @@
 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';
@@ -10,9 +12,12 @@ const common = {
     components: { VaultLiquidationTransactionFlow },
     data: () => ({
         vaultTransaction: generateFakeVaultNotLiquidatedTransaction(),
+        liquidationLimits: generateFakeLiquidationLimits(),
 
         isConnectingWallet: false,
         walletAddress: undefined,
+
+        isRefreshingLimits: false,
     }),
     methods: {
         connect() {
@@ -29,12 +34,25 @@ const common = {
                 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'
         />`,
 };
 
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
index fd4183452..33146d046 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -41,7 +41,16 @@
                 @connectWallet="$emit('connectWallet')"
                 @disconnectWallet="$emit('disconnectWallet')"
             />
-            <!-- LiquidationLimitsCheckPanel -->
+            <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>
@@ -50,11 +59,12 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Alert, Button } from 'ant-design-vue';
-import { VaultTransactionNotLiquidated } from 'auctions-core/dist/src/types';
+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';
@@ -62,6 +72,7 @@ import Explain from '~/components/common/other/Explain.vue';
 
 export default Vue.extend({
     components: {
+        VaultLiquidationLimitsCheckPanel,
         FormatAddress,
         TimeTill,
         TransactionFeesTable,
@@ -77,6 +88,10 @@ export default Vue.extend({
             type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
             required: true,
         },
+        liquidationLimits: {
+            type: Object as Vue.PropType<LiquidationLimits>,
+            required: true,
+        },
         walletAddress: {
             type: String,
             default: null,
@@ -85,6 +100,10 @@ export default Vue.extend({
             type: Boolean,
             default: false,
         },
+        isRefreshingLimits: {
+            type: Boolean,
+            default: false,
+        },
         isExplanationsShown: {
             type: Boolean,
             default: true,

From d016be5e27efc5e259419e983fbf28e8dd53d307 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 15 Sep 2022 09:13:54 +0200
Subject: [PATCH 11/15] Updated VaultLiquidationLimitsCheckPanel with more
 fallbacks

---
 .../VaultLiquidationLimitsCheckPanel.vue      | 75 ++++++++++---------
 1 file changed, 39 insertions(+), 36 deletions(-)

diff --git a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
index bc97080f0..32c305f79 100644
--- a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
+++ b/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',

From 254fb5a4cc1d0894ce287767ab0f86c3b4c48b9a Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 15 Sep 2022 09:30:15 +0200
Subject: [PATCH 12/15] Sync is-correct with VaultLiquidationLimitsCheckPanel

---
 .../panels/VaultLiquidationLimitsCheckPanel.vue           | 8 ++++++++
 .../components/vault/VaultLiquidationTransactionFlow.vue  | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
index 32c305f79..6b7a6f71f 100644
--- a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
+++ b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
@@ -188,6 +188,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);
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
index 33146d046..a5525e0b5 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -49,6 +49,7 @@
                 :incentive-constant-dai="vaultTransaction.incentiveConstantDai"
                 :is-refreshing="isRefreshingLimits"
                 :is-explanations-shown="isExplanationsShown"
+                :is-correct.sync="areLimitsNotReached"
                 @refreshLimits="$emit('refreshLimits')"
             />
             <!-- LiquidationPanel -->
@@ -112,6 +113,7 @@ export default Vue.extend({
     data() {
         return {
             isWalletConnected: false,
+            areLimitsNotReached: false,
         };
     },
     computed: {

From 79a887efcd24008574754561e1f41d18266658ad Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 15 Sep 2022 15:18:44 +0200
Subject: [PATCH 13/15] Added final changes and panel

---
 .../components/common/other/AnimatedArrow.vue |  2 +-
 ...VaultLiquidationTransactionFlow.stories.js |  9 +++
 .../vault/VaultLiquidationTransactionFlow.vue | 30 ++++++++--
 ...aultLiquidationTransactionTable.stories.js | 19 ++----
 .../VaultLiquidationTransactionTable.vue      | 60 ++++---------------
 5 files changed, 51 insertions(+), 69 deletions(-)

diff --git a/frontend/components/common/other/AnimatedArrow.vue b/frontend/components/common/other/AnimatedArrow.vue
index 1bdb6dbd0..be4816e51 100644
--- a/frontend/components/common/other/AnimatedArrow.vue
+++ b/frontend/components/common/other/AnimatedArrow.vue
@@ -15,7 +15,7 @@ export default Vue.extend({
     props: {
         direction: {
             type: String as Vue.PropType<ArrowDirections>,
-            default: undefined,
+            required: true,
         },
     },
     computed: {
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
index 6c298757c..1a403eebf 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.stories.js
@@ -18,6 +18,7 @@ const common = {
         walletAddress: undefined,
 
         isRefreshingLimits: false,
+        isLiquidating: false,
     }),
     methods: {
         connect() {
@@ -46,6 +47,13 @@ const common = {
                 this.isRefreshingLimits = false;
             }, 1000);
         },
+        liquidate() {
+            this.isLiquidating = true;
+            setTimeout(() => {
+                this.vaultTransaction = generateFakeVaultLiquidatedTransaction();
+                this.isLiquidating = false;
+            }, 1000);
+        },
     },
     template: `
         <VaultLiquidationTransactionFlow 
@@ -53,6 +61,7 @@ const common = {
           @connectWallet="connect" 
           @disconnectWallet="disconnect"
           @refreshLimits='refreshLimits'
+          @liquidate='liquidate'
         />`,
 };
 
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
index a5525e0b5..305da05a3 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <TextBlock title="Vault Liquidation transaction" />
-        <Alert v-if="vaultTransaction.state === 'liquidated'" show-icon type="warning">
+        <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">
@@ -11,9 +11,9 @@
                 </div>
             </div>
         </Alert>
-        <VaultLiquidationTransactionTable class="my-4" :vault-transaction="vaultTransaction" />
-        <TextBlock class="mb-8">
-            <template v-if="vaultTransaction.state === 'liquidated'">
+        <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>
@@ -32,7 +32,7 @@
                 it will only result in the loss of the transaction fee.
             </template>
         </TextBlock>
-        <div class="mb-4">
+        <div v-if="!wasLiquidated" class="mb-4">
             <WalletConnectionCheckPanel
                 :wallet-address="walletAddress"
                 :is-loading="isConnectingWallet"
@@ -52,7 +52,16 @@
                 :is-correct.sync="areLimitsNotReached"
                 @refreshLimits="$emit('refreshLimits')"
             />
-            <!-- LiquidationPanel -->
+            <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>
@@ -66,6 +75,7 @@ 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';
@@ -73,6 +83,7 @@ import Explain from '~/components/common/other/Explain.vue';
 
 export default Vue.extend({
     components: {
+        VaultLiquidationPanel,
         VaultLiquidationLimitsCheckPanel,
         FormatAddress,
         TimeTill,
@@ -105,6 +116,10 @@ export default Vue.extend({
             type: Boolean,
             default: false,
         },
+        isLiquidating: {
+            type: Boolean,
+            default: false,
+        },
         isExplanationsShown: {
             type: Boolean,
             default: true,
@@ -124,6 +139,9 @@ export default Vue.extend({
             const link = generateLink(this.vaultTransaction.network, 'collateral');
             return `${link}&auction=${encodeURIComponent(this.vaultTransaction.auctionId)}`;
         },
+        wasLiquidated(): boolean {
+            return this.vaultTransaction.state === 'liquidated';
+        },
     },
 });
 </script>
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.stories.js b/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
index b163d5078..ab7a9e24b 100644
--- a/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.stories.js
@@ -1,9 +1,6 @@
 import { storiesOf } from '@storybook/vue';
 import VaultLiquidationTransactionTable from '~/components/vault/VaultLiquidationTransactionTable';
-import {
-    generateFakeVaultLiquidatedTransaction,
-    generateFakeVaultNotLiquidatedTransaction,
-} from '~/helpers/generateFakeVault';
+import { generateFakeVaultNotLiquidatedTransaction } from '~/helpers/generateFakeVault';
 
 const common = {
     components: { VaultLiquidationTransactionTable },
@@ -13,14 +10,6 @@ const common = {
     template: '<VaultLiquidationTransactionTable :vaultTransaction="vaultTransaction" />',
 };
 
-storiesOf('Vault/VaultLiquidationTransactionTable', module)
-    .add('Default', () => ({
-        ...common,
-    }))
-    .add('Liquidated', () => ({
-        ...common,
-        data: () => ({
-            ...common.data(),
-            vaultTransaction: generateFakeVaultLiquidatedTransaction(),
-        }),
-    }));
+storiesOf('Vault/VaultLiquidationTransactionTable', module).add('Default', () => ({
+    ...common,
+}));
diff --git a/frontend/components/vault/VaultLiquidationTransactionTable.vue b/frontend/components/vault/VaultLiquidationTransactionTable.vue
index cf680de6b..95b19587d 100644
--- a/frontend/components/vault/VaultLiquidationTransactionTable.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionTable.vue
@@ -6,27 +6,20 @@
                 <span v-if="vaultTransaction.proximityToLiquidation < 0" class="text-green-500 mr-1">
                     (Ready for liquidation)
                 </span>
-                <span v-if="vaultTransaction.proximityToLiquidation">
-                    {{ vaultTransaction.proximityToLiquidation }}%
-                </span>
-                <span v-else class="opacity-50"> </span>
+                {{ vaultTransaction.proximityToLiquidation }}%
             </div>
         </div>
         <div class="flex justify-between">
             <div>Next price update</div>
             <div class="flex items-center space-x-1">
-                <template v-if="vaultTransaction.nextPriceChange">
-                    <AnimatedArrow :direction="getIsPriceGoingUpOrDown" class="h-3" />
-                    <span>in <TimeTill :date="vaultTransaction.nextPriceChange" /></span>
-                </template>
-                <span v-else class="opacity-50">Unknown</span>
+                <AnimatedArrow v-if="getIsPriceGoingUpOrDown" :direction="getIsPriceGoingUpOrDown" class="h-3" />
+                <span>in <TimeTill :date="vaultTransaction.nextPriceChange" /></span>
             </div>
         </div>
         <div class="flex justify-between">
             <div>Debt</div>
             <div>
-                <FormatCurrency v-if="vaultTransaction.debtDai" :value="vaultTransaction.debtDai" currency="DAI" />
-                <span v-else class="opacity-50">Unknown</span>
+                <FormatCurrency :value="vaultTransaction.debtDai" currency="DAI" />
             </div>
         </div>
         <div class="flex justify-between">
@@ -40,20 +33,13 @@
                         >clip.chip</a
                     >.
                 </Explain>
-                <span
-                    v-if="vaultTransaction.incentiveRelativeDai && vaultTransaction.collateralType"
-                    class="opacity-50"
+                <span class="opacity-50"
                     >(~ <format-percentage :value="incentiveRelativePercentage" /> for
                     {{ vaultTransaction.collateralType }})</span
                 >
             </div>
             <div>
-                <FormatCurrency
-                    v-if="vaultTransaction.incentiveRelativeDai"
-                    :value="vaultTransaction.incentiveRelativeDai"
-                    currency="DAI"
-                />
-                <span v-else class="opacity-50">Unknown</span>
+                <FormatCurrency :value="vaultTransaction.incentiveRelativeDai" currency="DAI" />
             </div>
         </div>
         <div class="flex justify-between">
@@ -70,46 +56,26 @@
                 </Explain>
             </div>
             <div>
-                <FormatCurrency
-                    v-if="vaultTransaction.incentiveConstantDai"
-                    :value="vaultTransaction.incentiveConstantDai"
-                    currency="DAI"
-                />
-                <span v-else class="opacity-50">Unknown</span>
+                <FormatCurrency :value="vaultTransaction.incentiveConstantDai" currency="DAI" />
             </div>
         </div>
         <div class="flex justify-between">
             <div>Potential gross profit</div>
-            <div>
-                <template v-if="vaultTransaction.grossProfitDai">
-                    +<FormatCurrency :value="vaultTransaction.grossProfitDai" currency="DAI" />
-                </template>
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
+            <div>+<FormatCurrency :value="vaultTransaction.grossProfitDai" currency="DAI" /></div>
         </div>
         <div class="flex justify-between">
             <div>
                 Transaction fee
-                <span v-if="vaultTransaction.transactionFeeLiquidationDai" class="opacity-50"
-                    >(~ <FormatCurrency :value="vaultTransaction.transactionFeeLiquidationEth" currency="ETH" />)</span
-                >
-            </div>
-            <div>
-                <template v-if="vaultTransaction.transactionFeeLiquidationDai">
-                    -<FormatCurrency :value="vaultTransaction.transactionFeeLiquidationDai" currency="DAI" />
-                </template>
-                <span v-else class="opacity-50">Unknown</span>
+                <span class="opacity-50">
+                    (~ <FormatCurrency :value="vaultTransaction.transactionFeeLiquidationEth" currency="ETH" />)
+                </span>
             </div>
+            <div>-<FormatCurrency :value="vaultTransaction.transactionFeeLiquidationDai" currency="DAI" /></div>
         </div>
         <div class="flex justify-between font-bold">
             <div>Potential net profit</div>
             <div>
-                <FormatCurrency
-                    v-if="vaultTransaction.netProfitDai"
-                    :value="vaultTransaction.netProfitDai"
-                    currency="DAI"
-                />
-                <span v-else class="opacity-50">Unknown</span>
+                <FormatCurrency :value="vaultTransaction.netProfitDai" currency="DAI" />
             </div>
         </div>
     </div>

From 39abfe3b31593062528621a38b9b7e5dd0080029 Mon Sep 17 00:00:00 2001
From: Zoey Kaiser <zoeykaiser8@gmail.com>
Date: Thu, 15 Sep 2022 18:02:03 +0200
Subject: [PATCH 14/15] Made more props required in
 VaultLiquidationLimitsCheckPanel

---
 .../components/common/other/AnimatedArrow.vue   |  5 +----
 .../panels/VaultLiquidationLimitsCheckPanel.vue | 17 +++++++----------
 .../vault/VaultLiquidationTransactionFlow.vue   |  4 ++--
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/frontend/components/common/other/AnimatedArrow.vue b/frontend/components/common/other/AnimatedArrow.vue
index be4816e51..2dd8523b1 100644
--- a/frontend/components/common/other/AnimatedArrow.vue
+++ b/frontend/components/common/other/AnimatedArrow.vue
@@ -1,5 +1,5 @@
 <template>
-    <UpArrow v-if="direction" :style="style" />
+    <UpArrow :style="style" />
 </template>
 
 <script lang="ts">
@@ -20,9 +20,6 @@ export default Vue.extend({
     },
     computed: {
         style(): Object {
-            if (!this.direction) {
-                return undefined;
-            }
             let rotationDegree = 0;
             if (this.direction === 'down') {
                 rotationDegree = 180;
diff --git a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
index 6b7a6f71f..6c40a22a8 100644
--- a/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
+++ b/frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue
@@ -9,7 +9,7 @@
         </TextBlock>
         <div class="flex justify-between mt-4">
             <span>Current global limit</span>
-            <span v-if="!isGlobalLimitMissing && debtAndIncentives">
+            <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
@@ -43,7 +43,7 @@
         </div>
         <div class="flex justify-between">
             <span>Current {{ collateralType }} limit</span>
-            <span v-if="!isCollateralLimitMissing && debtAndIncentives">
+            <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
@@ -111,7 +111,7 @@ export default Vue.extend({
     props: {
         liquidationLimits: {
             type: Object as Vue.PropType<LiquidationLimits>,
-            default: undefined,
+            required: true,
         },
         collateralType: {
             type: String,
@@ -119,15 +119,15 @@ export default Vue.extend({
         },
         debtDai: {
             type: BigNumber,
-            default: undefined,
+            required: true,
         },
         incentiveRelativeDai: {
             type: BigNumber,
-            default: undefined,
+            required: true,
         },
         incentiveConstantDai: {
             type: BigNumber,
-            default: undefined,
+            required: true,
         },
         isRefreshing: {
             type: Boolean,
@@ -139,10 +139,7 @@ export default Vue.extend({
         },
     },
     computed: {
-        debtAndIncentives(): BigNumber | undefined {
-            if (!this.debtDai || !this.incentiveConstantDai || !this.incentiveRelativeDai) {
-                return undefined;
-            }
+        debtAndIncentives(): BigNumber {
             return this.debtDai.plus(this.incentiveRelativeDai).plus(this.incentiveConstantDai);
         },
         globalDifference(): BigNumber {
diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
index 305da05a3..1d6f7c659 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -69,7 +69,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Alert, Button } from 'ant-design-vue';
-import { LiquidationLimits, VaultTransactionNotLiquidated } from 'auctions-core/dist/src/types';
+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';
@@ -97,7 +97,7 @@ export default Vue.extend({
     },
     props: {
         vaultTransaction: {
-            type: Object as Vue.PropType<VaultTransactionNotLiquidated>,
+            type: Object as Vue.PropType<VaultTransaction>,
             required: true,
         },
         liquidationLimits: {

From f3022ab97c8b67f3a8cf7f83527a9d32d8211936 Mon Sep 17 00:00:00 2001
From: valia fetisov <contact@valiafetisov.com>
Date: Thu, 15 Sep 2022 18:52:09 +0200
Subject: [PATCH 15/15] Update
 frontend/components/vault/VaultLiquidationTransactionFlow.vue

---
 frontend/components/vault/VaultLiquidationTransactionFlow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/vault/VaultLiquidationTransactionFlow.vue b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
index 1d6f7c659..f0aab696b 100644
--- a/frontend/components/vault/VaultLiquidationTransactionFlow.vue
+++ b/frontend/components/vault/VaultLiquidationTransactionFlow.vue
@@ -32,7 +32,7 @@
                 it will only result in the loss of the transaction fee.
             </template>
         </TextBlock>
-        <div v-if="!wasLiquidated" class="mb-4">
+        <div v-if="!wasLiquidated" class="my-4">
             <WalletConnectionCheckPanel
                 :wallet-address="walletAddress"
                 :is-loading="isConnectingWallet"