Merge pull request #741 from clrfund/fix/modal-click-to-close

Refactor modals and disable click on modal background

vue-app/src/App.vue

@@ -486,6 +486,7 @@ summary:focus {
   padding: $modal-space;
   text-align: center;
   box-shadow: var(--box-shadow);
+  border: 2px solid rgba(115, 117, 166, 0.3);
   width: 400px;
   .loader {
     margin: $modal-space auto;

vue-app/src/components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     AddToCartButton: typeof import('./components/AddToCartButton.vue')['default']
     BackLink: typeof import('./components/BackLink.vue')['default']
     BalanceItem: typeof import('./components/BalanceItem.vue')['default']
+    BaseModal: typeof import('./components/BaseModal.vue')['default']
     Breadcrumbs: typeof import('./components/Breadcrumbs.vue')['default']
     BrightIdWidget: typeof import('./components/BrightIdWidget.vue')['default']
     CallToActionCard: typeof import('./components/CallToActionCard.vue')['default']

vue-app/src/components/BaseModal.vue

@@ -0,0 +1,9 @@
+<template>
+  <vue-final-modal class="modal-container" :click-to-close="false" :esc-to-close="false">
+    <slot></slot>
+  </vue-final-modal>
+</template>
+
+<script setup>
+import { VueFinalModal } from 'vue-final-modal'
+</script>

vue-app/src/components/Cart.vue

@@ -605,7 +605,7 @@ function submitCart(event: any) {
 }
 
 const canWithdrawContribution = computed(
-  () => currentRound.value?.status === RoundStatus.Cancelled && !contribution.value,
+  () => currentRound.value?.status === RoundStatus.Cancelled && contribution.value > 0n,
 )
 
 const showCollapseCart = computed(() => route.name !== 'cart')

vue-app/src/components/ClaimModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="step === 1">
         <h2>{{ $t('claimModal.h2_1') }}</h2>
@@ -24,7 +24,7 @@
         </button>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
@@ -33,8 +33,6 @@ import { Contract } from 'ethers'
 import { FundingRound } from '@/api/abi'
 import type { Project } from '@/api/projects'
 import Transaction from '@/components/Transaction.vue'
-// @ts-ignore
-import { VueFinalModal } from 'vue-final-modal'
 import { formatAmount as _formatAmount } from '@/utils/amounts'
 import { waitForTransaction, getEventArg } from '@/utils/contracts'
 import { getRecipientClaimData } from '@clrfund/common'

vue-app/src/components/ContributionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="step === 0">
         <h2>
@@ -116,7 +116,7 @@
         ></transaction>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
@@ -128,8 +128,6 @@ import Transaction from '@/components/Transaction.vue'
 import { formatAmount } from '@/utils/amounts'
 import { waitForTransaction, getEventArg, getPollContract } from '@/utils/contracts'
 import ProgressBar from '@/components/ProgressBar.vue'
-// @ts-ignore
-import { VueFinalModal } from 'vue-final-modal'
 import { FundingRound, ERC20, MACI } from '@/api/abi'
 import { useAppStore, useUserStore } from '@/stores'
 import { storeToRefs } from 'pinia'

vue-app/src/components/ErrorModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="errorMessage">
         <div class="error">{{ errorMessage }}</div>
@@ -8,12 +8,10 @@
         </button>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
-// @ts-ignore
-import { VueFinalModal } from 'vue-final-modal'
 interface Props {
   errorMessage: string
 }

vue-app/src/components/MatchingFundsModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="step === 1">
         <h3>{{ $t('matchingFundsModal.title', { nativeTokenSymbol }) }}</h3>
@@ -57,7 +57,7 @@
         <button class="btn-primary" @click="$emit('close')">{{ $t('matchingFundsModal.button3') }}</button>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
@@ -72,7 +72,6 @@ import { formatUnits } from 'ethers'
 
 import { ERC20 } from '@/api/abi'
 import { clrFundContract } from '@/api/core'
-import { VueFinalModal } from 'vue-final-modal'
 import { useAppStore, useUserStore } from '@/stores'
 
 const appStore = useAppStore()

vue-app/src/components/ReallocationModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="step === 1">
         <h3>{{ $t('reallocationModal.h3') }}</h3>
@@ -17,16 +17,14 @@
         ></transaction>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script lang="ts" setup>
-import { Contract } from 'ethers'
 import type { PubKey, Message } from '@clrfund/common'
 import Transaction from '@/components/Transaction.vue'
 import { waitForTransaction, getPollContract } from '@/utils/contracts'
 import { createMessage } from '@clrfund/common'
-import { VueFinalModal } from 'vue-final-modal'
 
 import { useAppStore, useUserStore } from '@/stores'
 import { useRouter } from 'vue-router'

vue-app/src/components/SignatureModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="requestingSignature" class="loading">
         <loader />
@@ -12,12 +12,10 @@
         </button>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
-// @ts-ignore
-import { VueFinalModal } from 'vue-final-modal'
 import { useUserStore } from '@/stores'
 
 const userStore = useUserStore()

vue-app/src/components/TransactionModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <transaction
         :hash="txHash"
@@ -17,13 +17,11 @@
         {{ $t('transactionModal.button1') }}
       </button>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
 import type { TransactionResponse } from 'ethers'
-// @ts-ignore
-import { VueFinalModal } from 'vue-final-modal'
 import Transaction from '@/components/Transaction.vue'
 import { waitForTransaction } from '@/utils/contracts'
 

vue-app/src/components/WalletModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div v-if="connectingWallet" class="modal-body loading">
       <loader />
       <p>{{ $t('walletModal.p1') }}</p>
@@ -25,13 +25,12 @@
       </button>
       <div v-if="error" class="error">{{ error }}</div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
 import Loader from '@/components/Loader.vue'
 import { useWalletStore, type WalletProvider } from '@/stores'
-import { VueFinalModal } from 'vue-final-modal'
 
 const error = ref('')
 const connectingWallet = ref(false)

vue-app/src/components/WithdrawalModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-final-modal class="modal-container" background="interactive">
+  <base-modal>
     <div class="modal-body">
       <div v-if="step === 1">
         <h3>{{ $t('withdrawalModal.h3_1') }}</h3>
@@ -18,13 +18,11 @@
         </button>
       </div>
     </div>
-  </vue-final-modal>
+  </base-modal>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
-// @ts-ignore
-import { VueFinalModal } from 'vue-final-modal'
 import { withdrawContribution } from '@/api/contributions'
 import Transaction from '@/components/Transaction.vue'
 import { waitForTransaction } from '@/utils/contracts'