Skip to content

Explain to users that they can contribute only once during the round #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 3, 2020
Merged

Explain to users that they can contribute only once during the round #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
830d1f7
Frontend: Explain to user that they can contribute only once
xuhcc Oct 31, 2020
cec59b0
Frontend: Change headers in popups
xuhcc Oct 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions vue-app/src/components/ClaimModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<template>
<div class="modal-body">
<div v-if="step === 1">
<h3>Step 1 of 2: Claim funds</h3>
<h3>Claim funds</h3>
<transaction
:hash="claimTxHash"
:error="claimTxError"
@close="$emit('close')"
></transaction>
</div>
<div v-if="step === 2">
<h3>Step 2 of 2: Success</h3>
<h3>Success!</h3>
<div>{{ amount | formatAmount }} {{ currentRound.nativeTokenSymbol }} has been sent to <code>{{ project.address }}</code></div>
<button class="btn close-btn" @click="$emit('close')">OK</button>
</div>
Expand Down
65 changes: 44 additions & 21 deletions vue-app/src/components/ContributionModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,42 @@
<template>
<div class="modal-body">
<div v-if="step === 0">
<h3>Contributing</h3>
<div>
You are about to contribute {{ contribution | formatAmount }} {{ currentRound.nativeTokenSymbol }} to {{ votes.length }} projects.
You can re-allocate contributed funds later to different projects but it is not possible to increase the total contribution amount.
</div>
<div class="btn-row">
<button class="btn" @click="$emit('close')">Go back</button>
<button class="btn" @click="contribute()">Continue</button>
</div>
</div>
<div v-if="step === 1">
<h3>Step 1 of 4: Approve</h3>
<h3>Step 1 of 3: Approve</h3>
<transaction
:hash="approvalTxHash"
:error="approvalTxError"
@close="$emit('close')"
></transaction>
</div>
<div v-if="step === 2">
<h3>Step 2 of 4: Contribute</h3>
<h3>Step 2 of 3: Contribute</h3>
<transaction
:hash="contributionTxHash"
:error="contributionTxError"
@close="$emit('close')"
></transaction>
</div>
<div v-if="step === 3">
<h3>Step 3 of 4: Vote</h3>
<h3>Step 3 of 3: Vote</h3>
<transaction
:hash="voteTxHash"
:error="voteTxError"
@close="$emit('close')"
></transaction>
</div>
<div v-if="step === 4">
<h3>Step 4 of 4: Success</h3>
<h3>Success!</h3>
<div>
Successfully contributed {{ contribution | formatAmount }} {{ currentRound.nativeTokenSymbol }} to the funding round. Only the coordinator can know which projects you have supported.
<br>
Expand Down Expand Up @@ -85,7 +96,7 @@ export default class ContributionModal extends Vue {
@Prop()
votes!: [number, BigNumber][]

step = 1
step = 0

approvalTxHash = ''
approvalTxError = ''
Expand All @@ -94,15 +105,26 @@ export default class ContributionModal extends Vue {
voteTxHash = ''
voteTxError = ''

mounted() {
this.contribute()
}

get currentRound(): RoundInfo {
return this.$store.state.currentRound
}

private async contribute() {
getTotal(): BigNumber {
const { voiceCreditFactor } = this.currentRound
return this.votes.reduce((total: BigNumber, [, voiceCredits]) => {
return total.add(voiceCredits.mul(voiceCreditFactor))
}, BigNumber.from(0))
}

get contribution(): FixedNumber {
return FixedNumber.fromValue(
this.getTotal(),
this.currentRound.nativeTokenDecimals,
)
}

async contribute() {
this.step += 1
const signer: Signer = this.$store.state.currentUser.walletProvider.getSigner()
const {
coordinatorPubKey,
Expand All @@ -111,9 +133,7 @@ export default class ContributionModal extends Vue {
maciAddress,
fundingRoundAddress,
} = this.currentRound
const total = this.votes.reduce((total: BigNumber, [, voiceCredits]) => {
return total.add(voiceCredits.mul(voiceCreditFactor))
}, BigNumber.from(0))
const total = this.getTotal()
const token = new Contract(nativeTokenAddress, ERC20, signer)
// Approve transfer (step 1)
const allowance = await token.allowance(signer.getAddress(), fundingRoundAddress)
Expand Down Expand Up @@ -199,20 +219,23 @@ export default class ContributionModal extends Vue {
}
this.step += 1
}

get contribution(): FixedNumber {
return FixedNumber.fromValue(
this.$store.state.currentUser.contribution,
this.currentRound.nativeTokenDecimals,
)
}
}
</script>

<style scoped lang="scss">
@import '../styles/vars';

$button-space: 20px;

.btn-row {
margin: $button-space auto 0;

.btn {
margin: 0 $button-space;
}
}

.close-btn {
margin-top: 20px;
margin-top: $button-space;
}
</style>
4 changes: 2 additions & 2 deletions vue-app/src/components/ReallocationModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
<template>
<div class="modal-body">
<div v-if="step === 1">
<h3>Step 1 of 2: Vote</h3>
<h3>Reallocate funds</h3>
<transaction
:hash="voteTxHash"
:error="voteTxError"
@close="$emit('close')"
></transaction>
</div>
<div v-if="step === 2">
<h3>Step 2 of 2: Success</h3>
<h3>Success!</h3>
<div>Contributed funds have been successfully reallocated.</div>
<button class="btn close-btn" @click="$emit('close')">OK</button>
</div>
Expand Down