feat: Gas data in the dashboard (#203)

sidestream-tech · Apr 14, 2022 · bc4df66 · bc4df66
1 parent 7feb3f3
commit bc4df66
Show file tree

Hide file tree

Showing 9 changed files with 371 additions and 2 deletions.
diff --git a/core/src/constants/UNITS.ts b/core/src/constants/UNITS.ts
@@ -15,3 +15,4 @@ export const RAD_NUMBER_OF_DIGITS = 45;
 export const RAY_NUMBER_OF_DIGITS = 27;
 export const DAI_NUMBER_OF_DIGITS = 18;
 export const ETH_NUMBER_OF_DIGITS = 18;
+export const GWEI_NUMBER_OF_DIGITS = 9;
diff --git a/core/src/fees.ts b/core/src/fees.ts
@@ -25,6 +25,7 @@ export const getApproximateTransactionFees = async function (network: string): P
         authTransactionFeeETH,
         authTransactionFeeDAI: await convertETHtoDAI(network, authTransactionFeeETH),
         restartTransactionFeeETH,
+        restartTransactionFeeDAI: await convertETHtoDAI(network, restartTransactionFeeETH),
     };
 };
 

diff --git a/core/src/types.ts b/core/src/types.ts
@@ -52,6 +52,7 @@ export declare interface TransactionFees {
     authTransactionFeeETH: BigNumber;
     authTransactionFeeDAI: BigNumber;
     restartTransactionFeeETH: BigNumber;
+    restartTransactionFeeDAI: BigNumber;
 }
 
 export declare interface CollateralRow extends CollateralConfig, Partial<MakerParams> {

diff --git a/frontend/components/DashboardAuctionsView.vue b/frontend/components/DashboardAuctionsView.vue
@@ -18,7 +18,7 @@
             </TextBlock>
         </div>
         <div class="Block max-w-screen-lg">
-            <CollateralTable :collaterals="collaterals" class="overflow-x-scroll" />
+            <CollateralTable :collaterals="collaterals" class="overflow-x-auto" />
         </div>
         <div class="Block space-y-4 md:space-y-8 max-w-screen-sm">
             <TextBlock v-if="isExplanationsShown" title="Exchange Callee Contracts">
@@ -27,19 +27,32 @@
             </TextBlock>
             <CalleeTable :callees="callees" />
         </div>
+        <div class="Block space-y-4 md:space-y-8 max-w-screen-sm">
+            <TextBlock v-if="isExplanationsShown" title="Gas prices">
+                These are the current gas prices on your selected network.
+            </TextBlock>
+            <GasTable
+                :base-fee-per-gas="baseFeePerGas"
+                :gas-parameters="gasParameters"
+                :transaction-fees="transactionFees"
+            />
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import type { CollateralRow, CalleeAddresses } from 'auctions-core/src/types';
+import type { CollateralRow, CalleeAddresses, GasParameters, TransactionFees } from 'auctions-core/src/types';
 import Vue from 'vue';
+import BigNumber from 'bignumber.js';
 import CollateralTable from './CollateralTable.vue';
 import CalleeTable from './CalleeTable.vue';
+import GasTable from './GasTable.vue';
 import LandingBlock from '~/components/layout/LandingBlock.vue';
 import TextBlock from '~/components/common/TextBlock.vue';
 
 export default Vue.extend({
     components: {
+        GasTable,
         LandingBlock,
         TextBlock,
         CollateralTable,
@@ -58,6 +71,18 @@ export default Vue.extend({
             type: Object as Vue.PropType<CalleeAddresses>,
             default: () => ({}),
         },
+        baseFeePerGas: {
+            type: Object as Vue.PropType<BigNumber>,
+            default: undefined,
+        },
+        gasParameters: {
+            type: Object as Vue.PropType<GasParameters>,
+            default: undefined,
+        },
+        transactionFees: {
+            type: Object as Vue.PropType<TransactionFees>,
+            default: undefined,
+        },
     },
     computed: {
         exampleCollateral() {

diff --git a/frontend/components/GasTable.stories.js b/frontend/components/GasTable.stories.js
@@ -0,0 +1,20 @@
+import { storiesOf } from '@storybook/vue';
+import { BigNumber } from 'bignumber.js';
+import faker from 'faker';
+import GasTable from '~/components/GasTable';
+import { generateFakeGasParameters, generateFakeTransactionFees } from '~/helpers/generateFakeGas';
+
+const common = {
+    components: { GasTable },
+    data: () => ({
+        baseFeePerGas: new BigNumber(faker.datatype.number()),
+        gasParameters: generateFakeGasParameters(),
+        transactionFees: generateFakeTransactionFees(),
+    }),
+};
+
+storiesOf('GasTable', module).add('Default', () => ({
+    ...common,
+    template:
+        '<GasTable :baseFeePerGas="baseFeePerGas" :gasParameters="gasParameters" :transactionFees="transactionFees" />',
+}));
diff --git a/frontend/components/GasTable.vue b/frontend/components/GasTable.vue
@@ -0,0 +1,190 @@
+<template>
+    <div>
+        <table class="Table">
+            <tr>
+                <th class="Heading">Fee Parameter</th>
+                <th class="Heading">Value</th>
+                <th class="Heading">Value in DAI</th>
+            </tr>
+            <tbody>
+                <tr>
+                    <td class="Body">
+                        <span> Gas Price </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="gasParameters && gasParameters.gasPrice"
+                            :value="formatGasParameters(gasParameters.gasPrice)"
+                            currency="GWEI"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <span class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="Body">
+                        <span> Max Priority Fee Per Gas </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="gasParameters && gasParameters.maxPriorityFeePerGas"
+                            :value="formatGasParameters(gasParameters.maxPriorityFeePerGas)"
+                            currency="GWEI"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <span class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="Body">
+                        <span> Max Fee Per Gas </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="gasParameters && gasParameters.maxFeePerGas"
+                            :value="formatGasParameters(gasParameters.maxFeePerGas)"
+                            currency="GWEI"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <span class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="Body">
+                        <span> Base Fee Per Gas </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency v-if="baseFeePerGas" :value="baseFeePerGas" currency="GWEI" />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <span class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="Body">
+                        <span> Bidding Transaction Fee </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="transactionFees"
+                            :value="transactionFees.biddingTransactionFeeETH"
+                            currency="ETH"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="transactionFees"
+                            :value="transactionFees.biddingTransactionFeeDAI"
+                            currency="DAI"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="Body">
+                        <span> Auth Transaction Fee </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="transactionFees"
+                            :value="transactionFees.authTransactionFeeETH"
+                            currency="ETH"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="transactionFees"
+                            :value="transactionFees.authTransactionFeeDAI"
+                            currency="DAI"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="Body">
+                        <span> Restart Transaction Fee </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="transactionFees"
+                            :value="transactionFees.restartTransactionFeeETH"
+                            currency="ETH"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                    <td class="Body">
+                        <FormatCurrency
+                            v-if="transactionFees"
+                            :value="transactionFees.restartTransactionFeeDAI"
+                            currency="DAI"
+                        />
+                        <span v-else class="UnknownValue"> Unknown </span>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import BigNumber from 'bignumber.js';
+import type { GasParameters, TransactionFees } from 'auctions-core/src/types';
+import { GWEI_NUMBER_OF_DIGITS } from 'auctions-core/dist/src/constants/UNITS';
+import FormatCurrency from './utils/FormatCurrency.vue';
+
+export default Vue.extend({
+    name: 'GasTable',
+    components: { FormatCurrency },
+    props: {
+        baseFeePerGas: {
+            type: Object as Vue.PropType<BigNumber>,
+            default: undefined,
+        },
+        gasParameters: {
+            type: Object as Vue.PropType<GasParameters>,
+            default: undefined,
+        },
+        transactionFees: {
+            type: Object as Vue.PropType<TransactionFees>,
+            default: undefined,
+        },
+    },
+    methods: {
+        formatGasParameters(value): BigNumber {
+            return new BigNumber(value).shiftedBy(-GWEI_NUMBER_OF_DIGITS);
+        },
+    },
+});
+</script>
+
+<style scoped>
+.Table {
+    @apply w-full border-2 border-gray-300 dark:border-gray-600 bg-transparent;
+}
+
+.Element {
+    @apply p-2 h-8 border-r-2 border-b-2 border-gray-300 dark:border-gray-600;
+}
+
+.Body {
+    @apply Element text-gray-500 dark:text-gray-300;
+}
+
+.Heading {
+    @apply Element text-gray-700 dark:text-gray-100;
+}
+
+.UnknownValue {
+    @apply text-gray-400;
+}
+</style>
diff --git a/frontend/containers/DashboardContainer.vue b/frontend/containers/DashboardContainer.vue
@@ -3,6 +3,9 @@
         <DashboardAuctionsView
             :collaterals="collaterals"
             :callees="callees"
+            :base-fee-per-gas="baseFeePerGas"
+            :gas-parameters="gasParameters"
+            :transaction-fees="transactionFees"
             :is-explanations-shown.sync="isExplanationsShown"
         />
     </div>
@@ -22,6 +25,11 @@ export default Vue.extend({
         ...mapGetters('collaterals', {
             collaterals: 'collaterals',
         }),
+        ...mapGetters('gas', {
+            baseFeePerGas: 'getBaseFeePerGas',
+            gasParameters: 'getGasParameters',
+            transactionFees: 'getTransactionFees',
+        }),
         isExplanationsShown: {
             get(): boolean {
                 return this.$store.getters['preferences/getIsExplanationsShown'];
@@ -39,6 +47,7 @@ export default Vue.extend({
         },
     },
     async mounted() {
+        await this.$store.dispatch('gas/setup');
         await this.$store.dispatch('collaterals/setup');
     },
 });

diff --git a/frontend/helpers/generateFakeGas.ts b/frontend/helpers/generateFakeGas.ts
@@ -0,0 +1,29 @@
+import { GasParameters, TransactionFees } from 'auctions-core/src/types';
+import faker from 'faker';
+import BigNumber from 'bignumber.js';
+
+export function generateFakeGasParameters(): GasParameters {
+    return {
+        maxFeePerGas: faker.datatype.number({ min: 1000000, max: 1000000000 }).toString(),
+        maxPriorityFeePerGas: faker.datatype.number({ min: 1000000, max: 1000000000 }).toString(),
+        gasPrice: faker.datatype.number({ min: 1000000, max: 1000000000 }).toString(),
+    };
+}
+
+export function generateFakeTransactionFees(): TransactionFees {
+    const biddingTransactionFeeETH = new BigNumber(faker.datatype.float({ min: 0, max: 0.001, precision: 0.000001 }));
+    const biddingTransactionFeeDAI = biddingTransactionFeeETH.multipliedBy(1000);
+    const authTransactionFeeETH = new BigNumber(faker.datatype.float({ min: 0, max: 0.001, precision: 0.000001 }));
+    const authTransactionFeeDAI = authTransactionFeeETH.multipliedBy(1000);
+    const restartTransactionFeeETH = new BigNumber(faker.datatype.float({ min: 0, max: 0.001, precision: 0.000001 }));
+    const restartTransactionFeeDAI = restartTransactionFeeETH.multipliedBy(1000);
+
+    return {
+        biddingTransactionFeeETH,
+        biddingTransactionFeeDAI,
+        authTransactionFeeETH,
+        authTransactionFeeDAI,
+        restartTransactionFeeETH,
+        restartTransactionFeeDAI,
+    };
+}