Skip to content

Commit d9f8010

Browse files
fegbertfegbert
authored
feat: Features Overview page (#105)
1 parent 5a2e06e commit d9f8010

11 files changed

+412
-0
lines changed

‎frontend/components/FeatureList.stories.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { storiesOf } from '@storybook/vue';
2+
import FeatureList from './FeatureList';
3+
4+
storiesOf('FeatureList', module).add('Default', () => ({
5+
components: { FeatureList },
6+
template: `<FeatureList />`,
7+
}));

‎frontend/components/FeatureList.vue

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<template>
2+
<div class="flex flex-col w-full space-y-10">
3+
<div v-for="feature in features" :key="feature.name">
4+
<TextBlock :title="feature.title">
5+
<div class="mb-4">
6+
<span class="text-gray-700 dark:text-gray-200">URL:</span>
7+
<a v-if="feature.url" :href="feature.url"> {{ feature.url }} </a>
8+
<span v-else class="italic">Not yet implemented</span>
9+
</div>
10+
<h3 class="text-lg text-gray-700 font-semibold dark:text-gray-200 my-2">List of features:</h3>
11+
<feature-items :items="feature.items" />
12+
</TextBlock>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script lang="ts">
18+
import Vue from 'vue';
19+
import FeatureItems from '~/components/utils/FeatureItems.vue';
20+
import TextBlock from '~/components/common/TextBlock.vue';
21+
import features from '~/data/FeatureTexts';
22+
23+
export default Vue.extend({
24+
components: {
25+
TextBlock,
26+
FeatureItems,
27+
},
28+
data() {
29+
return {
30+
features,
31+
};
32+
},
33+
});
34+
</script>
35+
36+
<style scoped>
37+
ul >>> ul > ul {
38+
@apply ml-8;
39+
40+
list-style-type: circle;
41+
}
42+
43+
ul >>> ul ul ul {
44+
list-style-type: square;
45+
}
46+
47+
ul >>> ul ul ul ul {
48+
list-style-type: disc;
49+
}
50+
</style>

‎frontend/components/FeaturesView.stories.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { storiesOf } from '@storybook/vue';
2+
import FeaturesView from './FeaturesView.vue';
3+
4+
storiesOf('Features View', module).add('Default', () => ({
5+
components: { FeaturesView },
6+
template: '<FeaturesView />',
7+
}));

‎frontend/components/FeaturesView.vue

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="flex flex-col items-center">
3+
<LandingBlock class="LandingBlock">
4+
<h1 class="text-gray-800 dark:text-gray-100">Features Overview</h1>
5+
</LandingBlock>
6+
<div class="mt-8 px-4 md:px-0">
7+
<FeatureList class="max-w-screen-sm" />
8+
</div>
9+
</div>
10+
</template>
11+
12+
<script lang="ts">
13+
import Vue from 'vue';
14+
import LandingBlock from '~/components/layout/LandingBlock.vue';
15+
import FeatureList from '~/components/FeatureList.vue';
16+
17+
export default Vue.extend({
18+
components: {
19+
LandingBlock,
20+
FeatureList,
21+
},
22+
});
23+
</script>
24+
25+
<style scoped>
26+
.LandingBlock {
27+
min-height: 33vh;
28+
}
29+
</style>

‎frontend/components/layout/Footer.vue

+3
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
<li>
3333
<NuxtLink class="FooterLink" :to="`/dashboard?network=${pageNetwork}`">Dashboard</NuxtLink>
3434
</li>
35+
<li>
36+
<NuxtLink class="FooterLink" to="/features">Features</NuxtLink>
37+
</li>
3538
<li class="flex items-center space-x-4">
3639
<span class="FooterLink">Keep in touch:</span>
3740
<a :href="githubURL" target="_blank"><icon type="github" class="text-xl" /></a>

‎frontend/components/utils/FeatureItems.stories.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { storiesOf } from '@storybook/vue';
2+
import FeatureItems from './FeatureItems';
3+
import features from '~/data/FeatureTexts';
4+
5+
const common = {
6+
components: { FeatureItems },
7+
data() {
8+
return {
9+
features,
10+
};
11+
},
12+
};
13+
14+
storiesOf('Utils/FeatureItems', module)
15+
.add('Collateral Auctions UI', () => ({
16+
...common,
17+
template: '<FeatureItems :items="features[0].items"/>',
18+
}))
19+
.add('Unified auctions portal', () => ({
20+
...common,
21+
template: '<FeatureItems :items="features[1].items"/>',
22+
}))
23+
.add('Collateral auctions - dashboard page', () => ({
24+
...common,
25+
template: '<FeatureItems :items="features[2].items"/>',
26+
}))
27+
.add('Twitter Bot', () => ({
28+
...common,
29+
template: '<FeatureItems :items="features[3].items"/>',
30+
}))
31+
.add('Auction Keeper', () => ({
32+
...common,
33+
template: '<FeatureItems :items="features[4].items"/>',
34+
}));

‎frontend/components/utils/FeatureItems.vue

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<ul class="list-disc list-inside text-gray-700 dark:text-gray-200">
3+
<li v-if="text">{{ text }}</li>
4+
<feature-items v-for="(item, index) in items" :key="index" :items="item.items" :text="item.text" />
5+
</ul>
6+
</template>
7+
8+
<script lang="ts">
9+
import Vue from 'vue';
10+
11+
export default Vue.extend({
12+
name: 'FeatureItems',
13+
props: {
14+
text: {
15+
type: String,
16+
default: '',
17+
},
18+
items: {
19+
type: Array as Vue.PropType<FeatureItem[]>,
20+
default: () => [],
21+
},
22+
},
23+
});
24+
</script>

‎frontend/containers/FeaturesContainer.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div class="FeaturesContainer">
3+
<FeaturesView />
4+
</div>
5+
</template>
6+
7+
<script lang="ts">
8+
import Vue from 'vue';
9+
import FeaturesView from '~/components/FeaturesView.vue';
10+
11+
export default Vue.extend({
12+
components: {
13+
FeaturesView,
14+
},
15+
});
16+
</script>
17+
18+
<style scoped>
19+
.FeaturesContainer {
20+
min-height: calc(100vh - 9.8rem);
21+
}
22+
</style>

‎frontend/data/FeatureTexts.ts

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
const features: FeatureList[] = [
2+
{
3+
title: 'Collateral Auctions UI',
4+
url: 'https://auctions.makerdao.network/collateral',
5+
items: [
6+
{
7+
text: `The tool shows explanatory texts on different Maker Protocol related topics (e.g.
8+
What is the Maker Protocol, What are collateral auctions, Why a user should participate,
9+
What’s the catch of participation)`,
10+
},
11+
{
12+
text: `The tool enables the user to see detailed metrics of collateral auctions`,
13+
items: [
14+
{
15+
text: `Basic auction information is fetched from the blockchain via the Infura API and
16+
displayed in a structured way in the UI`,
17+
},
18+
{
19+
text: `For the following metrics computations are being made from the tool based on the fetched input parameters`,
20+
items: [
21+
{
22+
text: `Time till auction ends`,
23+
},
24+
{
25+
text: `Current auction price per collateral in DAI`,
26+
},
27+
{
28+
text: `Time till the next price drop`,
29+
},
30+
{
31+
text: `Estimated time till profitability`,
32+
},
33+
{
34+
text: `Current price on Uniswap per collateral in DAI`,
35+
items: [
36+
{
37+
text: `The price on Uniswap per collateral is determined via the Uniswap v2 SDK / Uniswap v3 SDK`,
38+
},
39+
],
40+
},
41+
{
42+
text: `Market difference between auction price and price on uniswap`,
43+
},
44+
{
45+
text: `Auction price total`,
46+
},
47+
{
48+
text: `Auction End (datetime)`,
49+
},
50+
{
51+
text: `Potential profit in DAI`,
52+
},
53+
{
54+
text: `Indicator on transaction fees (in ETH and DAI)`,
55+
},
56+
{
57+
text: `Transaction outcome in DAI`,
58+
},
59+
],
60+
},
61+
],
62+
},
63+
{
64+
text: `The tool provides a graphical user interface (GUI) to interact with smart contracts.
65+
However, all transactions are controlled through the user’s wallet. This is why the user is
66+
required to connect with a wallet in the first place. The user explicitly has to confirm each
67+
transaction that is prepared via the tool from within the wallet. Final execution happens
68+
from within the wallet and incurs transaction fees. The tool itself cannot be used to execute
69+
transactions. The tool enables the user to engage in the following blockchain based actions:`,
70+
items: [
71+
{
72+
text: `Prepare the restart of an expired auction`,
73+
},
74+
{
75+
text: `Prepare authorisation of DaiJoin contract`,
76+
items: [
77+
{
78+
text: `This is an authorisation step needs to be executed before being able to participate in auctions`,
79+
},
80+
{
81+
text: `It needs to be done once per wallet`,
82+
},
83+
],
84+
},
85+
{
86+
text: `Prepare authorisation of Clipper contract`,
87+
items: [
88+
{
89+
text: `This is an authorisation step needs to be executed before being able to participate in auctions`,
90+
},
91+
{
92+
text: `It needs to be done once per wallet for each collateral type`,
93+
},
94+
],
95+
},
96+
{
97+
text: `Prepare participation in an auction via flash lending functionality`,
98+
items: [
99+
{
100+
text: `Note that the underlying mechanics of the flash lending are not provided by the tool
101+
but facilitated through a smart contract not controlled by us (ie. exchange-callee contract)`,
102+
},
103+
{
104+
text: `High level explainer on flash lending: The auctioned collateral is swapped for DAI
105+
using a decentralized exchange, DAI is returned to the auction to cover the debt and spread
106+
in DAI is collected as a profit - all in one transaction. The transaction fees are the only
107+
capital requirement for the execution`,
108+
},
109+
],
110+
},
111+
{
112+
text: `Specify an outcome wallet other than the one connected to UI (ie. other than the one
113+
executing the transaction)`,
114+
},
115+
],
116+
},
117+
{
118+
text: `After successful auction participation through the user’s wallet, the tool provides a
119+
link to the respective transaction on etherscan`,
120+
},
121+
],
122+
},
123+
{
124+
title: `Unified auctions portal`,
125+
url: 'https://auctions.makerdao.network',
126+
items: [
127+
{
128+
text: `The tool provides an overview on different services related to the three core auction
129+
types (collateral auctions, surplus auctions, debt auctions) provided by the Maker protocol`,
130+
},
131+
{
132+
text: `The tool redirects the user to indicated services or github repos of indicated services`,
133+
},
134+
],
135+
},
136+
{
137+
title: `Collateral auctions - dashboard page`,
138+
url: `https://auctions.makerdao.network/dashboard`,
139+
items: [
140+
{
141+
text: `The tools shows a list of supported collateral types with auction related parameters`,
142+
items: [
143+
{
144+
text: `Uniswap price`,
145+
},
146+
{
147+
text: `step parameter`,
148+
},
149+
{
150+
text: `cut parameter`,
151+
},
152+
{
153+
text: `Token icon`,
154+
},
155+
{
156+
text: `Link to token contract on etherscan`,
157+
},
158+
],
159+
},
160+
],
161+
},
162+
{
163+
title: `Twitter Bot`,
164+
url: `https://twitter.com/MakerDAO_SAS`,
165+
items: [
166+
{
167+
text: `The bot informs via a tweet about each new started collateral auction`,
168+
items: [
169+
{
170+
text: `The message indicates the amount of collateral that is auctioned off`,
171+
},
172+
{
173+
text: `The message includes a link to the respective auction in the tool (ie.
174+
Collateral Auction UI)`,
175+
},
176+
],
177+
},
178+
],
179+
},
180+
{
181+
title: 'Auction Keeper',
182+
url: undefined,
183+
items: [
184+
{
185+
text: `The auction keeper is an open source tool provided by us for download`,
186+
},
187+
{
188+
text: `The keeper is not operated by us for or on behalf of the user`,
189+
},
190+
{
191+
text: `A user is able to download the code and run it themself`,
192+
items: [
193+
{
194+
text: `When a user runs the keeper it will read and write data via an RPC endpoint of the user`,
195+
},
196+
{
197+
text: `The code requires access to the private keys of a user`,
198+
},
199+
],
200+
},
201+
],
202+
},
203+
];
204+
205+
export default features;

0 commit comments

Comments
 (0)