Add multi-callee support to the frontend

core/src/types.ts

@@ -6,6 +6,11 @@ export declare interface GasParameters {
     gasPrice?: string;
 }
 
+export type MarketData = {
+    unitPrice: BigNumber;
+    route: string[];
+};
+
 export declare interface AuctionInitialInfo {
     network: string;
     id: string;
@@ -21,6 +26,8 @@ export declare interface AuctionInitialInfo {
     isFinished: boolean;
     isRestarting: boolean;
     marketUnitPrice?: BigNumber;
+    suggestedMarketId?: string;
+    marketData?: Record<string, MarketData>;
     marketUnitPriceToUnitPriceRatio?: BigNumber;
     transactionGrossProfit?: BigNumber;
     transactionAddress?: string;

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
@@ -84,7 +88,13 @@
             :is-collateral-authed="isWalletCollateralAuthorizationCheckPassed"
             :fees="fees"
             :transaction-gross-profit="auctionTransaction.transactionGrossProfit"
-            @execute="$emit('execute', { id: auctionTransaction.id, alternativeDestinationAddress: $event })"
+            @execute="
+                $emit('execute', {
+                    id: auctionTransaction.id,
+                    marketId: marketSuggestionOrSelection,
+                    alternativeDestinationAddress: $event,
+                })
+            "
         />
     </div>
 </template>
@@ -151,6 +161,7 @@ export default Vue.extend({
     },
     data() {
         return {
+            marketId: '',
             isWalletConnectedCheck: false,
             isWalletDAIAuthorizationCheckPassed: false,
             isWalletCollateralAuthorizationCheckPassed: false,
@@ -177,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].unitPrice && !callee[1].unitPrice.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].unitPrice" 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.marketData && this.suggestionOrSelection) {
+                return this.auctionTransaction.marketData[this.suggestionOrSelection].unitPrice;
+            }
+            return undefined;
+        },
+        callees(): Array<Array<[string, MarketData]>> {
+            const sorted = [];
+            const unknown = [];
+            for (const callee in this.auctionTransaction.marketData) {
+                if (
+                    this.auctionTransaction.marketData[callee].unitPrice &&
+                    !this.auctionTransaction.marketData[callee].unitPrice.isNaN()
+                ) {
+                    sorted.push([callee, this.auctionTransaction.marketData[callee]]);
+                } else {
+                    unknown.push([callee, this.auctionTransaction.marketData[callee]]);
+                }
+            }
+            sorted.sort((a, b) => a[1].unitPrice.minus(b[1].unitPrice).toNumber());
+            return [...sorted, ...unknown];
+        },
+    },
+});
+</script>
+
+<style scoped>
+.Title {
+    @apply text-left text-green-500;
+}
+.Icon {
+    @apply inline;
+}
+.Content {
+    @apply pl-4;
+}
+</style>

frontend/containers/AuctionsContainer.vue

@@ -39,8 +39,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import BigNumber from 'bignumber.js';
 import { mapGetters, mapActions } from 'vuex';
-import CollateralAuctionFlow from '~/components/auction/collateral/CollateralAuctionFlow';
+import { Auction } from 'auctions-core/src/types';
+import CollateralAuctionFlow from '~/components/auction/collateral/CollateralAuctionFlow.vue';
 
 export default Vue.extend({
     components: {

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 marketData = {
+        'Uniswap v3': {
+            unitPrice: marketUnitPrice.multipliedBy(
+                new BigNumber(faker.datatype.float({ min: 1.1, max: 1.5, precision: 0.001 }))
+            ),
+            route: [collateralObject.symbol, 'USDC'],
+        },
+        'Uniswap v2': {
+            unitPrice: new BigNumber(NaN),
+            route: [collateralObject.symbol],
+        },
+        '1inch': {
+            unitPrice: 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,
+        marketData,
+        suggestedMarketId,
         isActive,
         transactionGrossProfit,
         isFinished,

frontend/store/auctions.ts

@@ -233,8 +233,13 @@ export const actions = {
     },
     async bidWithCallee(
         { getters, commit, rootGetters }: ActionContext<State, State>,
-        { id, alternativeDestinationAddress }: { id: string; alternativeDestinationAddress: string | undefined }
+        {
+            id,
+            marketId,
+            alternativeDestinationAddress,
+        }: { id: string; marketId: string; alternativeDestinationAddress: string | undefined }
     ) {
+        console.info(marketId); // to be removed after core implementation
         const auction = getters.getAuctionById(id);
         if (!auction) {
             message.error(`Bidding error: can not find auction with id "${id}"`);