Merge pull request #736 from clrfund/fix/slow-loading-join-success-page

Show the success page without waiting for the subgraph to sync

vue-app/src/locales/cn.json

@@ -728,10 +728,8 @@
     "div1": "您快要参加这筹款活动了。",
     "li1": "您的项目只需要经过一些最终检查来确保它符合筹款标准。您可以在这里",
     "link1": "了解更多关于注册流程的信息。",
-    "li2": "完成后，您的项目页面将上线。",
-    "li3": " 如果您的项目未通过检查，我们将电邮通知您并退回您的押金。",
-    "linkProjects": "查看项目",
-    "link2": "查看项目",
+    "li2": "完成后，您的项目页面将上线, 我们将退还您的押金。",
+    "li3": " 如果您的项目未通过检查，我们将退回您的押金。",
     "link3": "回首页"
   },
   "projectList": {

vue-app/src/locales/en.json

@@ -728,10 +728,8 @@
     "div1": "You’re almost on board this funding round.",
     "li1": "Your project just needs to go through some final checks to ensure it meets round criteria. You can",
     "link1": "learn more about the registration process here.",
-    "li2": "Once that's complete, your project page will go live.",
-    "li3": " If your project fails any checks, we'll let you know by email and return your deposit.",
-    "linkProjects": "View projects",
-    "link2": "View project",
+    "li2": "Once that's complete, your project page will go live and we'll refund your deposit.",
+    "li3": " If your project fails any checks, we'll return your deposit.",
     "link3": "Go home"
   },
   "projectList": {

vue-app/src/locales/es.json

@@ -728,10 +728,8 @@
     "div1": "Estás casi listo para unirte a esta ronda de financiamiento.",
     "li1": "Tu proyecto solo necesita pasar por algunas verificaciones finales para asegurarse de que cumpla con los criterios de la ronda. Puedes",
     "link1": "obtener más información sobre el proceso de registro aquí.",
-    "li2": "Una vez que se complete, la página de tu proyecto se publicará.",
-    "li3": "Si tu proyecto no pasa alguna verificación, te lo haremos saber por correo electrónico y te devolveremos tu depósito.",
-    "linkProjects": "Ver proyectos",
-    "link2": "Ver proyecto",
+    "li2": "Una vez que se complete, la página de tu proyecto se publicará y te devolveremos tu depósito.",
+    "li3": "Si tu proyecto no pasa alguna verificación, te devolveremos tu depósito.",
     "link3": "Ir a inicio"
   },
   "projectList": {

vue-app/src/utils/contracts.ts

@@ -47,39 +47,6 @@ export async function waitForTransaction(
   return transactionReceipt
 }
 
-/**
- * Wait for transaction to be mined and available on the subgraph
- * @param pendingTransaction transaction to wait and check for
- * @param checkFn the check function
- * @param onTransactionHash callback function with the transaction hash
- * @returns transaction receipt
- */
-export async function waitForTransactionAndCheck(
-  pendingTransaction: Promise<TransactionResponse>,
-  checkFn: (receipt: TransactionReceipt) => Promise<boolean>,
-  onTransactionHash?: (hash: string) => void,
-): Promise<TransactionReceipt> {
-  const receipt = await waitForTransaction(pendingTransaction, onTransactionHash)
-
-  return new Promise(resolve => {
-    async function checkAndWait(depth = 0) {
-      if (await checkFn(receipt)) {
-        resolve(receipt)
-      } else {
-        if (depth > MAX_WAIT_DEPTH) {
-          throw new Error('Time out waiting for transaction ' + receipt.hash)
-        }
-
-        const timeoutMs = 2 ** depth * 10
-        await new Promise(res => setTimeout(res, timeoutMs))
-        checkAndWait(depth + 1)
-      }
-    }
-
-    checkAndWait()
-  })
-}
-
 export async function isTransactionMined(hash: string): Promise<boolean> {
   const receipt = await provider.getTransactionReceipt(hash)
   return !!receipt

vue-app/src/views/JoinView.vue

@@ -717,12 +717,11 @@ import { useVuelidate } from '@vuelidate/core'
 import { required, requiredIf, email, maxLength, url, helpers } from '@vuelidate/validators'
 import type { RecipientApplicationData } from '@/api/types'
 import type { Project } from '@/api/projects'
-import { isTransactionInSubgraph } from '@/api/subgraph'
 import { formToProjectInterface } from '@/api/projects'
-import { chain, showComplianceRequirement, isOptimisticRecipientRegistry } from '@/api/core'
+import { chain, showComplianceRequirement } from '@/api/core'
 import { DateTime } from 'luxon'
 import { useRecipientStore, useAppStore, useUserStore } from '@/stores'
-import { waitForTransactionAndCheck } from '@/utils/contracts'
+import { waitForTransaction } from '@/utils/contracts'
 import { addRecipient as _addRecipient } from '@/api/recipient-registry'
 import { isValidEthAddress, resolveEns } from '@/utils/accounts'
 import { toReactive } from '@vueuse/core'
@@ -942,11 +941,8 @@ async function addRecipient() {
       }
 
       const signer = await userStore.getSigner()
-      await waitForTransactionAndCheck(
+      await waitForTransaction(
         _addRecipient(recipientRegistryAddress.value, recipient.value, recipientRegistryInfo.value.deposit, signer),
-        receipt => {
-          return isOptimisticRecipientRegistry ? isTransactionInSubgraph(receipt) : Promise.resolve(true)
-        },
         hash => (txHash.value = hash),
       )
 

vue-app/src/views/ProjectAdded.vue

@@ -2,9 +2,9 @@
   <div>
     <round-status-banner v-if="currentRound" />
     <div class="gradient">
-      <img src="@/assets/moon.png" class="moon" />
+      <img src="@/assets/moon.png" class="moon desktop" />
       <div class="hero">
-        <image-responsive title="newrings" />
+        <image-responsive class="desktop" title="newrings" />
         <div class="content">
           <span class="emoji">🎉</span>
           <div class="flex-title">
@@ -23,12 +23,6 @@
             </li>
           </ul>
           <div class="mt2 button-spacing">
-            <template v-if="isOptimisticRecipientRegistry">
-              <links v-if="recipientId" :to="`/recipients/${recipientId}`" class="btn-primary">{{
-                $t('projectAdded.link2')
-              }}</links>
-            </template>
-            <links v-else to="/projects" class="btn-primary">{{ $t('projectAdded.linkProjects') }}</links>
             <links to="/" class="btn-secondary">{{ $t('projectAdded.link3') }}</links>
           </div>
         </div>
@@ -121,7 +115,7 @@ ul {
     height: calc(100vh - 113px);
     @media (max-width: $breakpoint-m) {
       padding: 2rem 0rem;
-      padding-bottom: 16rem;
+      flex-direction: column;
     }
 
     img {
@@ -130,21 +124,21 @@ ul {
       right: 0;
       width: 66%;
       @media (max-width: $breakpoint-m) {
+        position: relative;
         right: 0;
-        width: 100%;
+        width: 90%;
       }
     }
 
     .content {
       position: relative;
       z-index: 1;
-      padding: $content-space;
-      width: min(100%, 512px);
+      width: min(80%, 512px);
       margin-left: 2rem;
       margin-top: 3rem;
       @media (max-width: $breakpoint-m) {
-        width: 100%;
-        margin: 0;
+        width: 90%;
+        padding: 0;
       }
 
       .flex-title {