Skip to content

Commit

Permalink
feat: New DebtFlow component (#406)
Browse files Browse the repository at this point in the history
aomafarag authored Aug 11, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 08f2322 commit 70a056b
Showing 3 changed files with 352 additions and 5 deletions.
11 changes: 6 additions & 5 deletions frontend/components/auction/debt/DebtAuction.vue
Original file line number Diff line number Diff line change
@@ -111,16 +111,17 @@
<TextBlock class="mt-4">
<template v-if="error !== 'This auction is finished'">
The debt auction requires you to bid
<format-currency :value="auction.receiveAmountDAI" currency="DAI" />.
<format-currency :value="auction.bidAmountDai" currency="DAI" />.
<span v-if="requiresRestart">
This auction requires to be restarted in order to determine prices properly.
This auction requires to be restarted in order to determine its prices.
</span>
<span v-else>
The lowest accepted amount to receive is
<format-currency :value="auction.bidAmountMKR" currency="MKR" />. This equals
The latest bid asks for
<format-currency :value="auction.receiveAmountMKR" currency="MKR" /> compensation to
receive in return. This equals to
<format-currency :value="auction.unitPrice" currency="DAI" />
per <format-currency currency="MKR" />, or approximately
<format-market-value :value="auction.marketUnitPriceToUnitPriceRatio" /> than if you
<format-market-value :value="auction.marketUnitPriceToUnitPriceRatio" /> market than if you
exchange <format-currency currency="DAI" /> to <format-currency currency="MKR" /> on an
exchange platform such as Uniswap.
</span>
110 changes: 110 additions & 0 deletions frontend/components/auction/debt/DebtFlow.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import { storiesOf } from '@storybook/vue';
import faker from 'faker';
import BigNumber from 'bignumber.js';
import DebtFlow from './DebtFlow';
import { generateFakeDebtAuctionTransactions } from '~/helpers/generateFakeDebtAuction';

const fakeAuctions = generateFakeDebtAuctionTransactions();
const randomSelectedAuctionId = faker.random.arrayElement(fakeAuctions).id;

const common = {
components: { DebtFlow },
data: () => ({
auctions: fakeAuctions,
lastUpdated: new Date(),
network: 'mainnet',
tokenAddress: faker.finance.ethereumAddress(),
walletAddress: faker.finance.ethereumAddress(),
walletDai: new BigNumber(faker.finance.amount(1001, 1200)),
allowanceDai: new BigNumber(faker.finance.amount(1001, 1200)),
}),
template: `
<DebtFlow
v-bind="$data"
/>`,
};

storiesOf('Auction/Debt/DebtFlow', module)
.add('Default', () => ({
...common,
}))
.add('Expert Mode', () => ({
...common,
data: () => ({
...common.data(),
isExplanationsShown: false,
}),
}))
.add('Selected Auction', () => ({
...common,
data: () => ({
...common.data(),
selectedAuctionId: randomSelectedAuctionId.toString(),
}),
template: `
<DebtFlow
:selectedAuctionId.sync="selectedAuctionId"
v-bind="$data"
/>`,
}))
.add('Selected Auction Loading', () => ({
...common,
data: () => ({
...common.data(),
selectedAuctionId: randomSelectedAuctionId.toString(),
}),
template: `
<DebtFlow
:auctions="[]"
:areAuctionsFetching="true"
:selectedAuctionId.sync="selectedAuctionId"
/>`,
}))
.add('Selected Auction Expert', () => ({
...common,
data: () => ({
...common.data(),
selectedAuctionId: randomSelectedAuctionId.toString(),
isExplanationsShown: false,
}),
template: `
<DebtFlow
:selectedAuctionId.sync="selectedAuctionId"
v-bind="$data"
/>`,
}))
.add('Selected Auction Not found', () => ({
...common,
data: () => ({
...common.data(),
selectedAuctionId: '-1',
}),
template: `
<DebtFlow
selectedAuctionId.sync="selectedAuctionId"
v-bind="$data"
/>`,
}))
.add('Selected Auction Not found Expert', () => ({
...common,
data: () => ({
...common.data(),
selectedAuctionId: '-1',
isExplanationsShown: false,
}),
template: `
<DebtFlow
selectedAuctionId.sync="selectedAuctionId"
v-bind="$data"
/>`,
}))
.add('No Auctions', () => ({
...common,
template: `
<DebtFlow />`,
}))
.add('No Auctions Expert', () => ({
...common,
template: `
<DebtFlow :isExplanationsShown="false" />`,
}));
236 changes: 236 additions & 0 deletions frontend/components/auction/debt/DebtFlow.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,236 @@
<template>
<div :class="isStagingEnvironment ? 'SplitLayoutStagingContainer' : 'SplitLayoutContainer'">
<SplitLayout :step.sync="step">
<template #step0>
<div v-if="isExplanationsShown" class="h-1/2">
<LandingBlock title="Debt auctions" @explanations="explanationsTrigger" />
</div>
<div class="mx-4 md:mx-0 DebtTextContainer">
<DebtText
ref="debtText"
:auctions="auctions"
:selected-auction-id="parsedSelectedAuctionId"
:are-auctions-fetching="areAuctionsFetching"
:last-updated="lastUpdated"
:auctions-error="auctionsError"
:is-explanations-shown="isExplanationsShown"
@selectedAuctionId:update="$emit('selectedAuctionId:update', $event)"
/>
</div>
</template>
<template #step1>
<DebtAuction
class="mt-6 mb-8 mx-8"
:auction="selectedAuction"
:auction-id="parsedSelectedAuctionId"
:auction-action-state="selectedAuctionActionState"
:are-auctions-fetching="areAuctionsFetching"
:is-explanations-shown="isExplanationsShown"
:error="selectedAuctionError"
:wallet-address="walletAddress"
:is-connecting="isConnectingWallet"
@restart="$emit('restart', $event)"
@connect="$emit('connectWallet')"
@disconnect="$emit('disconnectWallet')"
@bid="bid()"
/>
</template>
<template #step2>
<DebtAuctionTransactionFlow
v-if="selectedAuction"
class="mt-6 mb-8 mx-8"
:auction="selectedAuction"
:auction-action-state="selectedAuctionActionState"
:wallet-address="walletAddress"
:wallet-dai="walletDai"
:allowance-dai="allowanceDai"
:wallet-vat-dai="walletVatDai"
:network="network"
:token-address="tokenAddress"
:is-connecting-wallet="isConnectingWallet"
:is-refreshing-wallet="isRefreshingWallet"
:is-setting-allowance="isSettingAllowance"
:is-depositing="isDepositing"
:is-explanations-shown="isExplanationsShown"
@authorizeWallet="$emit('authorizeWallet')"
@connectWallet="$emit('connectWallet')"
@disconnectWallet="$emit('disconnectWallet')"
@refreshWallet="$emit('refreshWallet')"
@setAllowanceAmount="$emit('setAllowanceAmount', $event)"
@deposit="$emit('deposit', $event)"
@bid="$emit('bid', $event)"
@collect="$emit('collect', selectedAuction.id)"
/>
</template>
</SplitLayout>
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { CompensationAuctionActionStates, DebtAuctionTransaction, WalletBalances } from 'auctions-core/src/types';
import BigNumber from 'bignumber.js';
import DebtAuction from '~/components/auction/debt/DebtAuction.vue';
import DebtAuctionTransactionFlow from '~/components/auction/debt/DebtAuctionTransactionFlow.vue';
import LandingBlock from '~/components/layout/LandingBlock.vue';
import SplitLayout from '~/components/layout/SplitLayout.vue';
import DebtText from '~/components/auction/debt/DebtText.vue';
export default Vue.extend({
components: {
DebtAuctionTransactionFlow,
DebtAuction,
LandingBlock,
SplitLayout,
DebtText,
},
props: {
auctions: {
type: Array as Vue.PropType<DebtAuctionTransaction[]>,
default: () => [],
},
selectedAuctionId: {
type: String,
default: null,
},
walletAddress: {
type: String,
default: null,
},
walletBalances: {
type: Object as Vue.PropType<WalletBalances>,
default: null,
},
allowanceDai: {
type: Object as Vue.PropType<BigNumber>,
default: undefined,
},
isConnectingWallet: {
type: Boolean,
default: false,
},
isRefreshingWallet: {
type: Boolean,
default: false,
},
isSettingAllowance: {
type: Boolean,
default: false,
},
isDepositing: {
type: Boolean,
default: false,
},
areAuctionsFetching: {
type: Boolean,
default: false,
},
auctionsError: {
type: String,
default: null,
},
auctionErrors: {
type: Object as Vue.PropType<string, string>,
default: () => ({}),
},
auctionActionState: {
type: Object as Vue.PropType<string, CompensationAuctionActionStates>,
default: () => ({}),
},
lastUpdated: {
type: Date,
default: null,
},
tokenAddress: {
type: String,
default: null,
},
network: {
type: String,
default: 'mainnet',
},
isExplanationsShown: {
type: Boolean,
default: true,
},
},
data: () => ({
step: 0,
secondStep: '',
}),
computed: {
parsedSelectedAuctionId(): number | undefined {
return parseInt(this.selectedAuctionId) || undefined;
},
selectedAuction(): DebtAuctionTransaction | undefined {
return (
this.auctions.find(
auctionTransaction => auctionTransaction.id === parseInt(this.parsedSelectedAuctionId)
) || undefined
);
},
selectedAuctionError(): string | undefined {
return this.auctionErrors[this.selectedAuctionId] || undefined;
},
selectedAuctionActionState(): string | undefined {
return this.auctionActionState[this.selectedAuctionId] || undefined;
},
isStagingEnvironment(): boolean {
return !!process.env.STAGING_BANNER_URL;
},
walletDai(): BigNumber | undefined {
return this.walletBalances?.walletDAI || undefined;
},
walletVatDai(): BigNumber | undefined {
return this.walletBalances?.walletVatDAI || undefined;
},
},
watch: {
selectedAuctionId: {
immediate: true,
handler(newSelectedAuctionId) {
if (!newSelectedAuctionId) {
this.step = 0;
} else {
this.step = 1;
}
},
},
step: {
immediate: true,
handler(newStep) {
if (newStep === 0) {
this.$emit('update:selectedAuctionId', null);
}
},
},
},
methods: {
explanationsTrigger(event: boolean): void {
if (event === true && this.$refs.debtText) {
(this.$refs.debtText as Vue).$el.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
this.$emit('update:isExplanationsShown', event);
},
bid() {
this.step = 2;
this.secondStep = 'bid';
},
},
});
</script>

<style scoped>
.SplitLayoutContainer {
height: calc(100vh - 4rem);
}
.SplitLayoutStagingContainer {
margin-top: 2.3rem;
height: calc(100vh - 6.3rem);
}
.DebtTextContainer {
min-height: calc(100vh - 10rem);
}
</style>

0 comments on commit 70a056b

Please sign in to comment.