diff --git a/frontend/components/FeatureList.stories.js b/frontend/components/FeatureList.stories.js new file mode 100644 index 000000000..c9525e1d7 --- /dev/null +++ b/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: ``, +})); diff --git a/frontend/components/FeatureList.vue b/frontend/components/FeatureList.vue new file mode 100644 index 000000000..d47d69f77 --- /dev/null +++ b/frontend/components/FeatureList.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/frontend/components/FeaturesView.stories.js b/frontend/components/FeaturesView.stories.js new file mode 100644 index 000000000..468e1d9aa --- /dev/null +++ b/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: '', +})); diff --git a/frontend/components/FeaturesView.vue b/frontend/components/FeaturesView.vue new file mode 100644 index 000000000..782660692 --- /dev/null +++ b/frontend/components/FeaturesView.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/frontend/components/layout/Footer.vue b/frontend/components/layout/Footer.vue index 9edade3fc..406bce52d 100644 --- a/frontend/components/layout/Footer.vue +++ b/frontend/components/layout/Footer.vue @@ -32,6 +32,9 @@
  • Dashboard
  • +
  • + Features +
  • Keep in touch: diff --git a/frontend/components/utils/FeatureItems.stories.js b/frontend/components/utils/FeatureItems.stories.js new file mode 100644 index 000000000..36983338b --- /dev/null +++ b/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: '', + })) + .add('Unified auctions portal', () => ({ + ...common, + template: '', + })) + .add('Collateral auctions - dashboard page', () => ({ + ...common, + template: '', + })) + .add('Twitter Bot', () => ({ + ...common, + template: '', + })) + .add('Auction Keeper', () => ({ + ...common, + template: '', + })); diff --git a/frontend/components/utils/FeatureItems.vue b/frontend/components/utils/FeatureItems.vue new file mode 100644 index 000000000..70effe85c --- /dev/null +++ b/frontend/components/utils/FeatureItems.vue @@ -0,0 +1,24 @@ + + + diff --git a/frontend/containers/FeaturesContainer.vue b/frontend/containers/FeaturesContainer.vue new file mode 100644 index 000000000..98fa69d59 --- /dev/null +++ b/frontend/containers/FeaturesContainer.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/frontend/data/FeatureTexts.ts b/frontend/data/FeatureTexts.ts new file mode 100644 index 000000000..c03b7aa03 --- /dev/null +++ b/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; diff --git a/frontend/pages/features.vue b/frontend/pages/features.vue new file mode 100644 index 000000000..57d759b83 --- /dev/null +++ b/frontend/pages/features.vue @@ -0,0 +1,20 @@ + + + diff --git a/frontend/shims.d.ts b/frontend/shims.d.ts index f4e396655..1ea21f7b3 100644 --- a/frontend/shims.d.ts +++ b/frontend/shims.d.ts @@ -26,3 +26,14 @@ declare interface SelectOption { value: string; icon?: object; } + +declare interface FeatureItem { + text: string; + items?: FeatureItem[]; +} + +declare interface FeatureList { + title: string; + url: string | undefined; + items: FeatureItem[]; +}