Copy and integrate MarketPriceSelection

frontend/components/auction/collateral/CollateralAuctionSwapTransaction.vue

@@ -7,7 +7,11 @@
             type="error"
         />
         <Alert v-if="auctionTransaction.isFinished" message="This auction is finished" type="error" />
-        <CollateralAuctionSwapTransactionTable :auction-transaction="auctionTransaction" class="mt-4" />
+        <CollateralAuctionSwapTransactionTable
+            :auction-transaction="auctionTransaction"
+            :market-id.sync="marketId"
+            class="mt-4"
+        />
         <TextBlock class="TextBlock mt-4 mb-8">
             Please note, the transaction fee is a suggested value based on the current gas prices on the market; the
             Transaction Net Profit is also approximate, since it is extrapolated from the exchange rates and may change
@@ -87,7 +91,7 @@
             @execute="
                 $emit('execute', {
                     id: auctionTransaction.id,
-                    marketId: auctionTransaction.suggestedMarketId,
+                    marketId: marketSuggestionOrSelection,
                     alternativeDestinationAddress: $event,
                 })
             "
@@ -157,6 +161,7 @@ export default Vue.extend({
     },
     data() {
         return {
+            marketId: '',
             isWalletConnectedCheck: false,
             isWalletDAIAuthorizationCheckPassed: false,
             isWalletCollateralAuthorizationCheckPassed: false,
@@ -183,6 +188,9 @@ export default Vue.extend({
             }
             return fees;
         },
+        marketSuggestionOrSelection(): string | undefined {
+            return this.marketId || this.auctionTransaction.suggestedMarketId;
+        },
     },
 });
 </script>

frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue

@@ -21,16 +21,7 @@
                 <span class="uppercase">{{ auctionTransaction.collateralSymbol }}</span>
             </div>
         </div>
-        <div class="flex w-full justify-between">
-            <div>Price On Uniswap</div>
-            <div class="RightInfo">
-                <template v-if="auctionTransaction.isActive && auctionTransaction.marketUnitPrice">
-                    <FormatCurrency :value="auctionTransaction.marketUnitPrice" currency="DAI" /> per
-                    <span class="uppercase">{{ auctionTransaction.collateralSymbol }}</span>
-                </template>
-                <span v-else class="opacity-50">Unknown</span>
-            </div>
-        </div>
+        <MarketPriceSelection :auction-transaction="auctionTransaction" :market-id.sync="marketId" />
         <div class="flex w-full justify-between">
             <div>Market Difference</div>
             <div class="RightInfo">
@@ -98,19 +89,21 @@
 <script lang="ts">
 import Vue from 'vue';
 import PriceDropAnimation from '~/components/auction/collateral/PriceDropAnimation.vue';
+import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
+import MarketPriceSelection from '~/components/auction/collateral/MarketPriceSelection.vue';
 import TimeTillProfitable from '~/components/auction/collateral/TimeTillProfitable.vue';
 import TimeTill from '~/components/common/formatters/TimeTill.vue';
-import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
 import FormatMarketValue from '~/components/common/formatters/FormatMarketValue.vue';
 import TextBlock from '~/components/common/other/TextBlock.vue';
 import { AuctionTransaction } from '~/../core/src/types';
 
 export default Vue.extend({
     components: {
         PriceDropAnimation,
+        FormatCurrency,
+        MarketPriceSelection,
         TextBlock,
         TimeTill,
-        FormatCurrency,
         FormatMarketValue,
         TimeTillProfitable,
     },
@@ -119,6 +112,10 @@ export default Vue.extend({
             type: Object as Vue.PropType<AuctionTransaction>,
             required: true,
         },
+        marketId: {
+            type: String,
+            default: '',
+        },
     },
 });
 </script>

frontend/components/auction/collateral/MarketPriceSelection.stories.js

@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/vue';
+import MarketPriceSelection from './MarketPriceSelection';
+import { generateFakeAuctionTransaction } from '~/helpers/generateFakeAuction.ts';
+
+const fakeAuctionTransaction = generateFakeAuctionTransaction();
+
+const common = {
+    components: {
+        MarketPriceSelection,
+    },
+    data: () => ({
+        auctionTransaction: fakeAuctionTransaction,
+        marketId: '',
+    }),
+    template: `<MarketPriceSelection :auction-transaction="auctionTransaction" :market-id.sync="marketId" />`,
+};
+
+storiesOf('Auction/Collateral/MarketPriceSelection', module).add('Default', () => ({ ...common }));

frontend/components/auction/collateral/MarketPriceSelection.vue

@@ -0,0 +1,117 @@
+<template>
+    <div>
+        <div class="flex justify-between">
+            <button class="Title" type="button" @click="isExpanded = !isExpanded">
+                <Icon v-if="!isExpanded" type="caret-right" class="Icon" />
+                <Icon v-else type="caret-down" class="Icon" />
+                Market Unit Price
+                <span class="text-gray-300">({{ suggestionOrSelection }})</span>
+            </button>
+            <div v-show="!isExpanded">
+                <FormatCurrency :value="marketUnitPrice" currency="DAI" /> per
+                <span class="uppercase">{{ auctionTransaction.collateralSymbol }}</span>
+            </div>
+        </div>
+        <CollapseTransition>
+            <div v-show="isExpanded" class="Content overflow-x-auto">
+                <table class="table-auto">
+                    <tbody>
+                        <tr v-for="callee in callees" :key="callee[0]">
+                            <td class="pr-2 whitespace-nowrap">{{ callee[0] }}</td>
+                            <td class="pr-2 whitespace-nowrap">
+                                <span v-for="currency in callee[1].route" :key="currency"
+                                    >{{ currency }} &#8594;
+                                </span>
+                                DAI
+                            </td>
+                            <td class="w-full text-right whitespace-nowrap">
+                                <div v-if="callee[1].marketUnitPrice && !callee[1].marketUnitPrice.isNaN()">
+                                    <button type="button" @click="$emit('update:marketId', callee[0])">
+                                        <span v-if="marketId === callee[0]" class="opacity-50">Selected</span>
+                                        <span v-else class="text-green-500">Select</span>
+                                    </button>
+                                    <span class="pl-1">
+                                        <FormatCurrency :value="callee[1].marketUnitPrice" currency="DAI" /> per
+                                        <span class="uppercase">{{ auctionTransaction.collateralSymbol }}</span>
+                                    </span>
+                                </div>
+                                <div v-else class="opacity-50">Unknown</div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </CollapseTransition>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import BigNumber from 'bignumber.js';
+import { Icon } from 'ant-design-vue';
+import CollapseTransition from '@ivanv/vue-collapse-transition';
+import { AuctionTransaction, MarketData } from 'auctions-core/src/types';
+import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
+
+export default Vue.extend({
+    components: {
+        Icon,
+        FormatCurrency,
+        CollapseTransition,
+    },
+    props: {
+        auctionTransaction: {
+            type: Object as Vue.PropType<AuctionTransaction>,
+            required: true,
+        },
+        marketId: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {
+            isExpanded: false,
+        };
+    },
+    computed: {
+        suggestionOrSelection(): string | undefined {
+            return this.marketId || this.auctionTransaction.suggestedMarketId;
+        },
+        marketUnitPrice(): BigNumber | undefined {
+            if (this.auctionTransaction.marketDataRecords && this.suggestionOrSelection) {
+                return this.auctionTransaction.marketDataRecords[this.suggestionOrSelection].marketUnitPrice;
+            }
+            return undefined;
+        },
+        callees(): Array<Array<[string, MarketData]>> {
+            const sorted = [];
+            const unknown = [];
+            for (const marketId in this.auctionTransaction.marketDataRecords) {
+                if (
+                    this.auctionTransaction.marketDataRecords[marketId].marketUnitPrice &&
+                    !this.auctionTransaction.marketDataRecords[marketId].marketUnitPrice.isNaN()
+                ) {
+                    sorted.push([marketId, this.auctionTransaction.marketDataRecords[marketId]]);
+                } else {
+                    unknown.push([marketId, this.auctionTransaction.marketDataRecords[marketId]]);
+                }
+            }
+            sorted.sort((a, b) => a[1].marketUnitPrice.minus(b[1].marketUnitPrice).toNumber());
+            return [...sorted, ...unknown];
+        },
+    },
+});
+</script>
+
+<style scoped>
+.Title {
+    @apply text-left text-green-500;
+}
+.Icon {
+    @apply inline;
+}
+.Content {
+    @apply pl-4;
+}
+</style>

frontend/helpers/generateFakeAuction.ts

@@ -19,6 +19,25 @@ export const generateFakeAuction = function () {
     const marketUnitPrice = approximateUnitPrice.multipliedBy(
         new BigNumber(1).minus(marketUnitPriceToUnitPriceRatio || 0)
     );
+    const suggestedMarketId = 'Uniswap v3';
+    const marketDataRecords = {
+        'Uniswap v3': {
+            marketUnitPrice: marketUnitPrice.multipliedBy(
+                new BigNumber(faker.datatype.float({ min: 1.1, max: 1.5, precision: 0.001 }))
+            ),
+            route: [collateralObject.symbol, 'USDC'],
+        },
+        'Uniswap v2': {
+            marketUnitPrice: new BigNumber(NaN),
+            route: [collateralObject.symbol],
+        },
+        '1inch': {
+            marketUnitPrice: marketUnitPrice.multipliedBy(
+                new BigNumber(faker.datatype.float({ min: 1.1, max: 1.5, precision: 0.001 }))
+            ),
+            route: [collateralObject.symbol],
+        },
+    };
     const transactionGrossProfit = marketUnitPrice
         .multipliedBy(collateralAmount)
         .minus(approximateUnitPrice.multipliedBy(collateralAmount));
@@ -40,6 +59,8 @@ export const generateFakeAuction = function () {
         approximateUnitPrice,
         unitPrice: approximateUnitPrice,
         marketUnitPrice,
+        marketDataRecords,
+        suggestedMarketId,
         isActive,
         transactionGrossProfit,
         isFinished,