-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
3 changed files
with
352 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" />`, | ||
})); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |