feat: Features Overview page (#105)

frontend/components/FeatureList.stories.js

@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/vue';
+import FeatureList from './FeatureList';
+
+storiesOf('FeatureList', module).add('Default', () => ({
+    components: { FeatureList },
+    template: `<FeatureList />`,
+}));

frontend/components/FeatureList.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="flex flex-col w-full space-y-10">
+        <div v-for="feature in features" :key="feature.name">
+            <TextBlock :title="feature.title">
+                <div class="mb-4">
+                    <span class="text-gray-700 dark:text-gray-200">URL:</span>
+                    <a v-if="feature.url" :href="feature.url"> {{ feature.url }} </a>
+                    <span v-else class="italic">Not yet implemented</span>
+                </div>
+                <h3 class="text-lg text-gray-700 font-semibold dark:text-gray-200 my-2">List of features:</h3>
+                <feature-items :items="feature.items" />
+            </TextBlock>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import FeatureItems from '~/components/utils/FeatureItems.vue';
+import TextBlock from '~/components/common/TextBlock.vue';
+import features from '~/data/FeatureTexts';
+
+export default Vue.extend({
+    components: {
+        TextBlock,
+        FeatureItems,
+    },
+    data() {
+        return {
+            features,
+        };
+    },
+});
+</script>
+
+<style scoped>
+ul >>> ul > ul {
+    @apply ml-8;
+
+    list-style-type: circle;
+}
+
+ul >>> ul ul ul {
+    list-style-type: square;
+}
+
+ul >>> ul ul ul ul {
+    list-style-type: disc;
+}
+</style>

frontend/components/FeaturesView.stories.js

@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/vue';
+import FeaturesView from './FeaturesView.vue';
+
+storiesOf('Features View', module).add('Default', () => ({
+    components: { FeaturesView },
+    template: '<FeaturesView />',
+}));

frontend/components/FeaturesView.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="flex flex-col items-center">
+        <LandingBlock class="LandingBlock">
+            <h1 class="text-gray-800 dark:text-gray-100">Features Overview</h1>
+        </LandingBlock>
+        <div class="mt-8 px-4 md:px-0">
+            <FeatureList class="max-w-screen-sm" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import LandingBlock from '~/components/layout/LandingBlock.vue';
+import FeatureList from '~/components/FeatureList.vue';
+
+export default Vue.extend({
+    components: {
+        LandingBlock,
+        FeatureList,
+    },
+});
+</script>
+
+<style scoped>
+.LandingBlock {
+    min-height: 33vh;
+}
+</style>

frontend/components/layout/Footer.vue

@@ -32,6 +32,9 @@
             <li>
                 <NuxtLink class="FooterLink" :to="`/dashboard?network=${pageNetwork}`">Dashboard</NuxtLink>
             </li>
+            <li>
+                <NuxtLink class="FooterLink" to="/features">Features</NuxtLink>
+            </li>
             <li class="flex items-center space-x-4">
                 <span class="FooterLink">Keep in touch:</span>
                 <a :href="githubURL" target="_blank"><icon type="github" class="text-xl" /></a>

frontend/components/utils/FeatureItems.stories.js

@@ -0,0 +1,34 @@
+import { storiesOf } from '@storybook/vue';
+import FeatureItems from './FeatureItems';
+import features from '~/data/FeatureTexts';
+
+const common = {
+    components: { FeatureItems },
+    data() {
+        return {
+            features,
+        };
+    },
+};
+
+storiesOf('Utils/FeatureItems', module)
+    .add('Collateral Auctions UI', () => ({
+        ...common,
+        template: '<FeatureItems :items="features[0].items"/>',
+    }))
+    .add('Unified auctions portal', () => ({
+        ...common,
+        template: '<FeatureItems :items="features[1].items"/>',
+    }))
+    .add('Collateral auctions - dashboard page', () => ({
+        ...common,
+        template: '<FeatureItems :items="features[2].items"/>',
+    }))
+    .add('Twitter Bot', () => ({
+        ...common,
+        template: '<FeatureItems :items="features[3].items"/>',
+    }))
+    .add('Auction Keeper', () => ({
+        ...common,
+        template: '<FeatureItems :items="features[4].items"/>',
+    }));

frontend/components/utils/FeatureItems.vue

@@ -0,0 +1,24 @@
+<template>
+    <ul class="list-disc list-inside text-gray-700 dark:text-gray-200">
+        <li v-if="text">{{ text }}</li>
+        <feature-items v-for="(item, index) in items" :key="index" :items="item.items" :text="item.text" />
+    </ul>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+    name: 'FeatureItems',
+    props: {
+        text: {
+            type: String,
+            default: '',
+        },
+        items: {
+            type: Array as Vue.PropType<FeatureItem[]>,
+            default: () => [],
+        },
+    },
+});
+</script>

frontend/containers/FeaturesContainer.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="FeaturesContainer">
+        <FeaturesView />
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import FeaturesView from '~/components/FeaturesView.vue';
+
+export default Vue.extend({
+    components: {
+        FeaturesView,
+    },
+});
+</script>
+
+<style scoped>
+.FeaturesContainer {
+    min-height: calc(100vh - 9.8rem);
+}
+</style>

frontend/data/FeatureTexts.ts

@@ -0,0 +1,205 @@
+const features: FeatureList[] = [
+    {
+        title: 'Collateral Auctions UI',
+        url: 'https://auctions.makerdao.network/collateral',
+        items: [
+            {
+                text: `The tool shows explanatory texts on different Maker Protocol related topics (e.g.
+                What is the Maker Protocol, What are collateral auctions, Why a user should participate,
+                What’s the catch of participation)`,
+            },
+            {
+                text: `The tool enables the user to see detailed metrics of collateral auctions`,
+                items: [
+                    {
+                        text: `Basic auction information is fetched from the blockchain via the Infura API and
+                        displayed in a structured way in the UI`,
+                    },
+                    {
+                        text: `For the following metrics computations are being made from the tool based on the fetched input parameters`,
+                        items: [
+                            {
+                                text: `Time till auction ends`,
+                            },
+                            {
+                                text: `Current auction price per collateral in DAI`,
+                            },
+                            {
+                                text: `Time till the next price drop`,
+                            },
+                            {
+                                text: `Estimated time till profitability`,
+                            },
+                            {
+                                text: `Current price on Uniswap per collateral in DAI`,
+                                items: [
+                                    {
+                                        text: `The price on Uniswap per collateral is determined via the Uniswap v2 SDK / Uniswap v3 SDK`,
+                                    },
+                                ],
+                            },
+                            {
+                                text: `Market difference between auction price and price on uniswap`,
+                            },
+                            {
+                                text: `Auction price total`,
+                            },
+                            {
+                                text: `Auction End (datetime)`,
+                            },
+                            {
+                                text: `Potential profit in DAI`,
+                            },
+                            {
+                                text: `Indicator on transaction fees (in ETH and DAI)`,
+                            },
+                            {
+                                text: `Transaction outcome in DAI`,
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                text: `The tool provides a graphical user interface (GUI) to interact with smart contracts.
+                However, all transactions are controlled through the user’s wallet. This is why the user is
+                required to connect with a wallet in the first place. The user explicitly has to confirm each
+                transaction that is prepared  via the tool from within the wallet. Final execution happens
+                from within the wallet and incurs transaction fees. The tool itself cannot be used to execute
+                transactions. The tool enables the user to engage in the following blockchain based actions:`,
+                items: [
+                    {
+                        text: `Prepare the restart of an expired auction`,
+                    },
+                    {
+                        text: `Prepare authorisation of DaiJoin contract`,
+                        items: [
+                            {
+                                text: `This is an authorisation step needs to be executed before being able to participate in auctions`,
+                            },
+                            {
+                                text: `It needs to be done once per wallet`,
+                            },
+                        ],
+                    },
+                    {
+                        text: `Prepare authorisation of Clipper contract`,
+                        items: [
+                            {
+                                text: `This is an authorisation step needs to be executed before being able to participate in auctions`,
+                            },
+                            {
+                                text: `It needs to be done once per wallet for each collateral type`,
+                            },
+                        ],
+                    },
+                    {
+                        text: `Prepare participation in an auction via flash lending functionality`,
+                        items: [
+                            {
+                                text: `Note that the underlying mechanics of the flash lending are not provided by the tool
+                                but facilitated through a smart contract not controlled by us (ie. exchange-callee contract)`,
+                            },
+                            {
+                                text: `High level explainer on flash lending: The auctioned collateral is swapped for DAI
+                                using a decentralized exchange, DAI is returned to the auction to cover the debt and spread
+                                in DAI is collected as a profit - all in one transaction. The transaction fees are the only
+                                capital requirement for the execution`,
+                            },
+                        ],
+                    },
+                    {
+                        text: `Specify an outcome wallet other than the one connected to UI (ie. other than the one
+                        executing the transaction)`,
+                    },
+                ],
+            },
+            {
+                text: `After successful auction participation through the user’s wallet, the tool provides a
+                link to the respective transaction on etherscan`,
+            },
+        ],
+    },
+    {
+        title: `Unified auctions portal`,
+        url: 'https://auctions.makerdao.network',
+        items: [
+            {
+                text: `The tool provides an overview on different services related to the three core auction
+                types (collateral auctions, surplus auctions, debt auctions) provided by the Maker protocol`,
+            },
+            {
+                text: `The tool redirects the user to indicated services or github repos of indicated services`,
+            },
+        ],
+    },
+    {
+        title: `Collateral auctions - dashboard page`,
+        url: `https://auctions.makerdao.network/dashboard`,
+        items: [
+            {
+                text: `The tools shows a list of supported collateral types with auction related parameters`,
+                items: [
+                    {
+                        text: `Uniswap price`,
+                    },
+                    {
+                        text: `step parameter`,
+                    },
+                    {
+                        text: `cut parameter`,
+                    },
+                    {
+                        text: `Token icon`,
+                    },
+                    {
+                        text: `Link to token contract on etherscan`,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        title: `Twitter Bot`,
+        url: `https://twitter.com/MakerDAO_SAS`,
+        items: [
+            {
+                text: `The bot informs via a tweet about each new started collateral auction`,
+                items: [
+                    {
+                        text: `The message indicates the amount of collateral that is auctioned off`,
+                    },
+                    {
+                        text: `The message includes a link to the respective auction in the tool (ie. 
+                        Collateral Auction UI)`,
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        title: 'Auction Keeper',
+        url: undefined,
+        items: [
+            {
+                text: `The auction keeper is an open source tool provided by us for download`,
+            },
+            {
+                text: `The keeper is not operated by us for or on behalf of the user`,
+            },
+            {
+                text: `A user is able to download the code and run it themself`,
+                items: [
+                    {
+                        text: `When a user runs the keeper it will read and write data via an RPC endpoint of the user`,
+                    },
+                    {
+                        text: `The code requires access to the private keys of a user`,
+                    },
+                ],
+            },
+        ],
+    },
+];
+
+export default features;