Skip to content

Commit

Permalink
Feat: Debt auctions integrated to UI (#407)
Browse files Browse the repository at this point in the history
  • Loading branch information
valiafetisov authored Aug 12, 2022
1 parent 70a056b commit d8d895b
Show file tree
Hide file tree
Showing 15 changed files with 658 additions and 24 deletions.
444 changes: 444 additions & 0 deletions core/src/abis/MCD_FLOP.json

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions core/src/contracts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import MCD_CLIP_CALC from './abis/MCD_CLIP_CALC.json';
import MCD_CLIP from './abis/MCD_CLIP.json';
import MCD_DOG from './abis/MCD_DOG.json';
import MCD_FLAP from './abis/MCD_FLAP.json';
import MCD_FLOP from './abis/MCD_FLOP.json';
import MCD_GOV from './abis/MCD_GOV.json';
import WSTETH from './abis/WSTETH.json';
import WETH from './abis/WETH.json';
Expand Down Expand Up @@ -44,6 +45,9 @@ const getContractInterfaceByName = async function (contractName: string): Promis
if (contractName === 'MCD_FLAP') {
return MCD_FLAP;
}
if (contractName === 'MCD_FLOP') {
return MCD_FLOP;
}
if (contractName === 'WSTETH') {
return WSTETH;
}
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/auction/debt/DebtAuctionsTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ export default Vue.extend({
},
getAuctionLink(auction: SurplusAuctionTransaction) {
const searchParams = new URLSearchParams({ network: auction.network, auction: auction.id.toString() });
return `/surplus?${searchParams.toString()}`;
return `/debt?${searchParams.toString()}`;
},
getIsAuctionFinished(auction: SurplusAuctionTransaction) {
return auction.state !== 'ready-for-collection' && auction.state !== 'collected';
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/common/other/BasePanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<Icon v-if="currentState === 'inactive'" type="close" />
<Icon v-else-if="currentState === 'incorrect'" type="warning" theme="filled" />
<Icon v-else-if="currentState === 'correct'" type="check" />
<Icon v-else-if="currentState === 'notice'" type="warning" theme="filled" />
<Icon v-else-if="currentState === 'notice'" type="info-circle" theme="filled" />
</div>
<slot name="title" />
</button>
Expand Down
10 changes: 7 additions & 3 deletions frontend/components/layout/HeaderLogo.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<div class="flex items-center">
<nuxt-link to="/" class="hidden md:block text-gray-700 hover:text-gray-600 no-underline">
<nuxt-link :to="rootUrl" class="hidden md:block text-gray-700 hover:text-gray-600 no-underline">
<branding-icon class="h-12 w-12" />
</nuxt-link>
<Select :options="options" :value="pageName" title="Unified Auction" class="md:ml-2 mb-0">
<Select :options="options" :value="pageName" title="Unified Auctions" class="md:ml-2 mb-0">
<template #text-prefix>
<branding-icon class="md:hidden h-12 w-12" />
</template>
Expand Down Expand Up @@ -31,11 +31,15 @@ export default Vue.extend({
},
},
computed: {
rootUrl() {
return generateLink(this.network, '');
},
options(): SelectOption[] {
return [
{ label: 'Maker Auction Services', value: '', href: generateLink(this.network, '') },
{ label: 'Unified auctions', value: '', href: this.rootUrl },
{ label: 'Collateral auctions', value: 'collateral', href: generateLink(this.network, 'collateral') },
{ label: 'Surplus auctions', value: 'surplus', href: generateLink(this.network, 'surplus') },
{ label: 'Debt auctions', value: 'debt', href: generateLink(this.network, 'debt') },
];
},
},
Expand Down
10 changes: 9 additions & 1 deletion frontend/components/panels/DebtLatestBidCheckPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@
</TextBlock>

<div class="flex justify-between my-3">
<span> Current compensation </span>
<span>
Latest bid placed
<span v-if="auction.receiverAddress"
>by <FormatAddress :value="auction.receiverAddress" type="address" shorten
/></span>
asked for
</span>
<span v-if="!wasThereAnyBids" class="text-gray-400"> Unknown </span>
<FormatCurrency v-else :value="auction.receiveAmountMKR" currency="MKR" />
</div>
Expand Down Expand Up @@ -40,6 +46,7 @@ import BasePanel from '~/components/common/other/BasePanel.vue';
import TextBlock from '~/components/common/other/TextBlock.vue';
import BaseButton from '~/components/common/inputs/BaseButton.vue';
import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
import FormatAddress from '~/components/common/formatters/FormatAddress.vue';
export default Vue.extend({
name: 'DebtLatestBidCheckPanel',
Expand All @@ -48,6 +55,7 @@ export default Vue.extend({
BaseButton,
TextBlock,
BasePanel,
FormatAddress,
},
props: {
auction: {
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/panels/WalletDepositFlowCheckPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export default Vue.extend({
},
tokenAddress: {
type: String,
default: '',
required: true,
},
currency: {
type: String,
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/panels/WalletVATCheckPanel.vue
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ export default Vue.extend({
},
tokenAddress: {
type: String,
default: '',
required: true,
},
currency: {
type: String,
Expand Down
131 changes: 131 additions & 0 deletions frontend/containers/DebtContainer.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<template>
<DebtFlow
:auctions="auctions"
:selected-auction-id.sync="selectedAuctionId"
:auctions-error="auctionsError"
:auction-errors="auctionErrors"
:auction-action-state="auctionActionStates"
:are-auctions-fetching="areAuctionsFetching"
:wallet-address="walletAddress"
:wallet-balances="walletBalances"
:allowance-dai="allowanceDai"
:is-connecting-wallet="isConnectingWallet"
:is-refreshing-wallet="isRefreshingWallet"
:is-authorizing="isAuthorizing"
:is-wallet-authorized="isWalletAuthorized"
:is-setting-allowance="isAuthorizationLoading"
:last-updated="lastUpdated"
:is-explanations-shown.sync="isExplanationsShown"
:network="network"
:token-address="tokenAddress"
:is-withdrawing="isWithdrawing"
:dai-vat-balance="daiVatBalance"
@connectWallet="openSelectWalletModal"
@disconnectWallet="disconnectWallet"
@refreshWallet="refreshWallet"
@withdrawAllDaiFromVat="withdrawAllDaiFromVat"
@restart="restartAuction"
@setAllowanceAmount="setAllowanceAmountDai"
@collect="collect"
@bid="bid"
/>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapActions, mapGetters } from 'vuex';
import BigNumber from 'bignumber.js';
import DebtFlow from '~/components/auction/debt/DebtFlow.vue';
export default Vue.extend({
components: {
DebtFlow,
},
props: {
network: {
type: String,
default: null,
},
},
computed: {
...mapGetters('debt', {
auctions: 'auctions',
areAuctionsFetching: 'areAuctionsFetching',
auctionErrors: 'getAuctionErrors',
auctionActionStates: 'auctionStates',
auctionsError: 'error',
lastUpdated: 'lastUpdated',
tokenAddress: 'getTokenAddress',
isAuthorizationLoading: 'isAuthorizationLoading',
}),
...mapGetters('wallet', {
walletAddress: 'getAddress',
walletBalances: 'walletBalances',
isConnectingWallet: 'isLoading',
isRefreshingWallet: 'isFetchingBalances',
isWithdrawing: 'isDepositingOrWithdrawing',
}),
...mapGetters('authorizations', {
isAuthorizing: 'isWalletAuthorizationLoading',
isWalletAuthorized: 'isWalletAuthorizationDone',
allowanceDai: 'allowanceAmount',
}),
daiVatBalance(): BigNumber | undefined {
return this.walletBalances?.walletVatDAI;
},
selectedAuctionId: {
get(): string | null {
const auctionGetParameter = this.$route.query.auction;
if (Array.isArray(auctionGetParameter)) {
return auctionGetParameter[0];
} else {
return auctionGetParameter;
}
},
set(newAuctionId: string): void {
if (!newAuctionId) {
const network = this.$route.query.network;
this.$router.push({ query: { network } });
this.updateAllAuctions();
}
},
},
hasAcceptedTerms(): boolean {
return this.$store.getters['cookies/hasAcceptedTerms'];
},
isExplanationsShown: {
get(): boolean {
return this.$store.getters['preferences/getIsExplanationsShown'];
},
set(newIsExplanationsShown): void {
this.$store.dispatch('preferences/setExplanationsAction', newIsExplanationsShown);
},
},
},
methods: {
...mapActions('debt', {
updateAllAuctions: 'fetchDebtAuctions',
restartAuction: 'restartAuction',
collect: 'collectAuction',
bid: 'bidToDebtAuction',
}),
...mapActions('authorizations', {
setAllowanceAmountDai: 'setAllowanceAmount',
}),
...mapActions('wallet', {
refreshWallet: 'fetchWalletBalances',
disconnectWallet: 'disconnect',
}),
withdrawAllDaiFromVat() {
this.$store.dispatch('wallet/withdrawFromVAT', this.daiVatBalance);
},
openSelectWalletModal(): void {
if (!this.hasAcceptedTerms) {
this.$store.commit('modals/setTermsModal', true);
return;
}
this.$store.commit('modals/setSelectWalletModal', true);
},
},
});
</script>
4 changes: 2 additions & 2 deletions frontend/helpers/generateFakeCompensationAuction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import BigNumber from 'bignumber.js';

const NETWORKS = ['mainnet', 'kovan', 'goerli'];

export const generateFakeCompensationAuctionBase = function (): CompensationAuctionBase {
export const generateFakeCompensationAuctionBase = function (network?: string): CompensationAuctionBase {
return {
id: faker.datatype.number(),
network: faker.helpers.randomize(NETWORKS),
network: network ?? faker.helpers.randomize(NETWORKS),
fetchedAt: new Date(),
};
};
Expand Down
29 changes: 21 additions & 8 deletions frontend/helpers/generateFakeDebtAuction.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const DEBT_AUCTION_STATES: DebtAuctionStates[] = [
'requires-restart',
];

export const generateFakeDebtAuction = function (state?: DebtAuctionStates): DebtAuction {
const auctionBaseData = generateFakeCompensationAuctionBase();
export const generateFakeDebtAuction = function (state?: DebtAuctionStates, network?: string): DebtAuction {
const auctionBaseData = generateFakeCompensationAuctionBase(network);
const generatedState: DebtAuctionStates = state || faker.helpers.randomize(DEBT_AUCTION_STATES);

if (generatedState === 'collected') {
Expand Down Expand Up @@ -52,9 +52,10 @@ export const generateFakeDebtAuction = function (state?: DebtAuctionStates): Deb
};

export const generateFakeDebtAuctionTransaction = function (
state?: DebtAuctionStates
state?: DebtAuctionStates,
network?: string
): DebtAuctionCollected | DebtAuctionTransaction {
const auction = generateFakeDebtAuction(state);
const auction = generateFakeDebtAuction(state, network);

if (auction.state === 'collected') {
return auction;
Expand Down Expand Up @@ -84,10 +85,22 @@ export const generateFakeDebtAuctionTransaction = function (
};
};

export const generateFakeDebtAuctions = function (number = random(5, 15)) {
return Array(number).fill(null).map(generateFakeDebtAuction);
export const generateFakeDebtAuctions = function (
state?: DebtAuctionStates,
network?: string,
number = random(5, 15)
) {
return Array(number)
.fill(null)
.map(() => generateFakeDebtAuction(state, network));
};

export const generateFakeDebtAuctionTransactions = function (number = random(5, 15)) {
return Array(number).fill(null).map(generateFakeDebtAuctionTransaction);
export const generateFakeDebtAuctionTransactions = function (
state?: DebtAuctionStates,
network?: string,
number = random(5, 15)
) {
return Array(number)
.fill(null)
.map(() => generateFakeDebtAuctionTransaction(state, network));
};
20 changes: 20 additions & 0 deletions frontend/pages/debt.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<template>
<DebtContainer :network="network" />
</template>

<script lang="ts">
import Vue from 'vue';
import DebtContainer from '~/containers/DebtContainer.vue';
export default Vue.extend({
components: {
DebtContainer,
},
layout: process.env.DEMO_MODE ? 'demoMode' : 'default',
computed: {
network() {
return this.$store.getters['network/getPageNetwork'];
},
},
});
</script>
13 changes: 11 additions & 2 deletions frontend/store/debt.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
fetchActiveDebtAuctions,
restartDebtAuction,
} from 'auctions-core/src/debt';
import { getTokenAddressByNetworkAndSymbol } from 'auctions-core/src/tokens';
import notifier from '~/lib/notifier';

const REFETCH_INTERVAL = 30 * 1000;
Expand All @@ -21,7 +22,6 @@ interface State {
isAuthorizationLoading: boolean;
error: string | null;
lastUpdated: Date | undefined;
allowanceAmount?: BigNumber;
auctionErrors: Record<string, string | undefined>;
tokenAddress: string | undefined;
}
Expand Down Expand Up @@ -115,13 +115,22 @@ export const mutations = {
export const actions = {
async setup({ dispatch, commit }: ActionContext<State, State>) {
commit('reset');
await dispatch('getMKRTokenAddress');
await dispatch('fetchDebtAuctions');
await dispatch('getDaiTokenAddress');
await dispatch('authorizations/fetchAllowanceAmount', undefined, { root: true });
if (refetchIntervalId) {
clearInterval(refetchIntervalId);
}
refetchIntervalId = setInterval(() => dispatch('fetchDebtAuctions'), REFETCH_INTERVAL);
},
async getDaiTokenAddress({ commit, rootGetters }: ActionContext<State, State>) {
const network = rootGetters['network/getMakerNetwork'];
if (!network) {
return;
}
const tokenAddress = await getTokenAddressByNetworkAndSymbol(network, 'DAI');
commit('setTokenAddress', tokenAddress);
},
async fetchDebtAuctions({ rootGetters, commit }: ActionContext<State, State>) {
const network = rootGetters['network/getMakerNetwork'];
if (!network) {
Expand Down
5 changes: 3 additions & 2 deletions frontend/store/network.ts
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,11 @@ export const actions = {
async setup({ dispatch }: ActionContext<State, State>, isDev?: boolean): Promise<void> {
await dispatch('setupNetworks', isDev);
await dispatch('wallet/setup', undefined, { root: true });
await dispatch('surplus/setup', undefined, { root: true });
await dispatch('gas/setup', undefined, { root: true });
await dispatch('auctions/setup', undefined, { root: true });
await dispatch('authorizations/setup', undefined, { root: true });
await dispatch('gas/setup', undefined, { root: true });
await dispatch('surplus/setup', undefined, { root: true });
await dispatch('debt/setup', undefined, { root: true });
},
async setupNetworks({ commit }: ActionContext<State, State>, isDev?: boolean) {
commit('setIsChangingNetwork', true);
Expand Down
Loading

0 comments on commit d8d895b

Please sign in to comment.