Merge pull request #257 from xuhcc/contribute-matching

Frontend: Enable contributions to matching pool

vue-app/src/App.vue

@@ -274,15 +274,15 @@ a {
 
 .modal-body {
   background-color: $bg-light-color;
-  padding: 20px;
+  padding: $modal-space;
   text-align: center;
 }
 
 .loader {
   display: block;
   width: 40px;
   height: 40px;
-  margin: 20px auto;
+  margin: $modal-space auto;
 }
 
 .loader:after {

vue-app/src/components/BrightIdModal.vue

@@ -174,6 +174,6 @@ export default class BrightIdModal extends Vue {
 }
 
 .close-btn {
-  margin-top: 20px;
+  margin-top: $modal-space;
 }
 </style>

vue-app/src/components/ClaimModal.vue

@@ -86,6 +86,6 @@ export default class ClaimModal extends Vue {
 @import '../styles/vars';
 
 .close-btn {
-  margin-top: 20px;
+  margin-top: $modal-space;
 }
 </style>

vue-app/src/components/ContributionModal.vue

@@ -222,17 +222,15 @@ export default class ContributionModal extends Vue {
 <style scoped lang="scss">
 @import '../styles/vars';
 
-$button-space: 20px;
-
 .btn-row {
-  margin: $button-space auto 0;
+  margin: $modal-space auto 0;
 
   .btn {
-    margin: 0 $button-space;
+    margin: 0 $modal-space;
   }
 }
 
 .close-btn {
-  margin-top: $button-space;
+  margin-top: $modal-space;
 }
 </style>

vue-app/src/components/KlerosGTCRAdapterModal.vue

@@ -66,6 +66,6 @@ export default class KlerosGTCRAdapterModal extends Vue {
 @import '../styles/vars';
 
 .close-btn {
-  margin-top: 20px;
+  margin-top: $modal-space;
 }
 </style>

vue-app/src/components/MatchingFundsModal.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="modal-body">
+    <div v-if="step === 1">
+      <h3>Contribute matching funds to the {{ isRoundFinished() ? 'next' : 'current' }} round</h3>
+      <form class="contribution-form">
+        <div>Please enter amount:</div>
+        <input
+          v-model="amount"
+          class="input"
+          :class="{ invalid: !isAmountValid() }"
+          name="amount"
+          placeholder="Amount"
+        >
+        <div>{{ tokenSymbol }}</div>
+      </form>
+      <div class="btn-row">
+        <button class="btn" @click="$emit('close')">Go back</button>
+        <button class="btn" :disabled="!isAmountValid()" @click="contributeMatchingFunds()">Continue</button>
+      </div>
+    </div>
+    <div v-if="step === 2">
+      <h3>Contribute matching funds to the {{ isRoundFinished() ? 'next' : 'current' }} round</h3>
+      <transaction
+        :hash="transferTxHash"
+        :error="transferTxError"
+        @close="$emit('close')"
+      ></transaction>
+    </div>
+    <div v-if="step === 3">
+      <h3>Success!</h3>
+      <div>Tokens has been sent to the matching pool.</div>
+      <button class="btn close-btn" @click="$emit('close')">OK</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { BigNumber, Contract } from 'ethers'
+import { parseFixed } from '@ethersproject/bignumber'
+
+import Transaction from '@/components/Transaction.vue'
+import { waitForTransaction } from '@/utils/contracts'
+
+import { ERC20 } from '@/api/abi'
+import { factory } from '@/api/core'
+import { RoundStatus } from '@/api/round'
+
+@Component({
+  components: {
+    Transaction,
+  },
+})
+export default class MatchingFundsModal extends Vue {
+
+  step = 1
+
+  amount = '100'
+  transferTxHash = ''
+  transferTxError = ''
+
+  isRoundFinished(): boolean {
+    const { status } = this.$store.state.currentRound
+    return [RoundStatus.Finalized, RoundStatus.Cancelled].includes(status)
+  }
+
+  isAmountValid(): boolean {
+    const { nativeTokenDecimals } = this.$store.state.currentRound
+    let amount
+    try {
+      amount = parseFixed(this.amount, nativeTokenDecimals)
+    } catch {
+      return false
+    }
+    if (amount.lte(BigNumber.from(0))) {
+      return false
+    }
+    return true
+  }
+
+  get tokenSymbol(): string {
+    return this.$store.state.currentRound.nativeTokenSymbol
+  }
+
+  async contributeMatchingFunds() {
+    this.step += 1
+    const signer = this.$store.state.currentUser.walletProvider.getSigner()
+    const { nativeTokenAddress, nativeTokenDecimals } = this.$store.state.currentRound
+    const token = new Contract(nativeTokenAddress, ERC20, signer)
+    const amount = parseFixed(this.amount, nativeTokenDecimals)
+    try {
+      await waitForTransaction(
+        token.transfer(factory.address, amount),
+        (hash) => this.transferTxHash = hash,
+      )
+    } catch (error) {
+      this.transferTxError = error.message
+      return
+    }
+    this.step += 1
+  }
+}
+</script>
+
+<style scoped lang="scss">
+@import '../styles/vars';
+
+.contribution-form {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: $modal-space;
+
+  input {
+    margin: 0 7px;
+    width: 100px;
+  }
+}
+
+.btn-row {
+  margin: $modal-space auto 0;
+
+  .btn {
+    margin: 0 $modal-space;
+  }
+}
+
+.close-btn {
+  margin-top: $modal-space;
+}
+
+</style>

vue-app/src/components/ReallocationModal.vue

@@ -88,6 +88,6 @@ export default class ReallocationModal extends Vue {
 @import '../styles/vars';
 
 .close-btn {
-  margin-top: 20px;
+  margin-top: $modal-space;
 }
 </style>

vue-app/src/styles/_vars.scss

@@ -11,6 +11,7 @@ $error-color: #BD6B5E;
 
 $border: 2px solid $border-color;
 $content-space: 30px;
+$modal-space: 20px;
 
 $nav-header-height-sm: 40px;
 $profile-image-size: 50px;

vue-app/src/views/ProjectList.vue

@@ -26,7 +26,16 @@
       </div>
       <div class="round-info-item">
         <div class="round-info-title">Matching Pool:</div>
-        <div class="round-info-value">{{ currentRound.matchingPool | formatAmount }} {{ currentRound.nativeTokenSymbol }}</div>
+        <div class="round-info-value">
+          {{ currentRound.matchingPool | formatAmount }} {{ currentRound.nativeTokenSymbol }}
+          <a
+            @click="addMatchingFunds()"
+            class="add-matching-funds-btn"
+            title="Add matching funds"
+          >
+            <img src="@/assets/add.svg" >
+          </a>
+        </div>
       </div>
       <div class="round-info-item">
         <div class="round-info-title">Contributions:</div>
@@ -57,6 +66,7 @@ import { RoundInfo } from '@/api/round'
 import { Project, getProjects } from '@/api/projects'
 
 import ProjectListItem from '@/components/ProjectListItem.vue'
+import MatchingFundsModal from '@/components/MatchingFundsModal.vue'
 import { LOAD_ROUND_INFO } from '@/store/action-types'
 import { SET_CURRENT_ROUND_ADDRESS } from '@/store/mutation-types'
 
@@ -136,6 +146,22 @@ export default class ProjectList extends Vue {
     }
     return FixedNumber.fromValue(contribution, decimals)
   }
+
+  addMatchingFunds(): void {
+    if (!this.$store.state.currentUser) {
+      return
+    }
+    this.$modal.show(
+      MatchingFundsModal,
+      { },
+      { },
+      {
+        closed: () => {
+          this.$store.dispatch(LOAD_ROUND_INFO)
+        },
+      },
+    )
+  }
 }
 </script>
 
@@ -181,6 +207,17 @@ export default class ProjectList extends Vue {
   gap: $content-space;
 }
 
+.add-matching-funds-btn {
+  display: inline-block;
+  line-height: 1;
+  margin-left: 5px;
+
+  img {
+    height: 1em;
+    vertical-align: bottom;
+  }
+}
+
 @media (max-width: 1150px) {
   .round-info-item {
     flex: 0 0 50%;