122 follow button errors when creating following contract

components/FollowButton.vue

@@ -30,11 +30,46 @@ const abc = useArtByCity()
 const errorFlag = ref(false)
 const creatingContract = ref(false)
 const loading = ref(false)
+const contractCheckAttempts = ref(0)
 
 const resetErrorFlag = () => {
   errorFlag.value = false
 }
 
+const timeout = (ms: number) => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+const checkContractAndFollow = async () => {
+
+  contractCheckAttempts.value += 1
+
+  const contract = await abc.connect().following.getContract(props.owner)
+
+  if (contract) {
+    creatingContract.value = false
+    try {
+      if (!isFollowing.value) {
+        await abc.connect().following.follow(props.address)
+      } else {
+        await abc.connect().following.unfollow(props.address)
+      }
+
+      console.log("Contract check attempts: ", contractCheckAttempts.value)
+      loading.value = false
+
+      await refresh()
+
+    } catch (error) {
+      errorFlag.value = true
+      console.log('Error when attempting to follow/unfollow.', error)
+    }
+  } else {
+    await timeout(5000)
+    await checkContractAndFollow()
+  }
+}
+
 const {
   data: following,
   pending,
@@ -45,6 +80,7 @@ const {
 
 const isFollowing = computed(() => {
   if (!following.value) { return false }
+  if (!props.owner) { return false }
 
   return following.value.includes(props.address)
 })
@@ -79,33 +115,51 @@ const onFollowClick = debounce(async (isHovering?: boolean) => {
     return
   }
 
+  let contract
   loading.value = true
-  const contract = await abc.connect().following.getContract(props.owner)
+  contractCheckAttempts.value = 0
+
+  try { // Check if contract exists
+    contractCheckAttempts.value += 1
+    contract = await abc.connect().following.getContract(props.owner)
+    console.log("Getting follow contract", contract)
+  } catch (error) {
+    console.log("Error getting follow contract", error)
+  }
 
-  if (!contract) {
+  if (!contract) { // Create contract if no exist
     try {
+      console.log("Creating follow contract")
       creatingContract.value = true
       await abc.connect().following.create({ following: [] })
-      creatingContract.value = false
+
+      await timeout(5000)
+      await checkContractAndFollow()
+
+      await refresh()
+
     } catch (createContractError) {
       errorFlag.value = true
       console.log('Error on creating follow contract: ', createContractError)
     }
-  }
-
-  try {
-    if (!isFollowing.value) {
-      await abc.connect().following.follow(props.address)
-    } else {
-      await abc.connect().following.unfollow(props.address)
+  } else {
+    try {
+      if (!isFollowing.value) {
+        await abc.connect().following.follow(props.address)
+      } else {
+        await abc.connect().following.unfollow(props.address)
+      }
+
+      console.log("Contract check attempts: ", contractCheckAttempts.value)
+      loading.value = false
+      await refresh()
+
+    } catch (error) {
+      errorFlag.value = true
+      console.log('Error when attempting to follow/unfollow.', error)
     }
-    await refresh()
-  } catch (error) {
-    errorFlag.value = true
-    console.log('Error when attempting to follow/unfollow.', error)
   }
 
-  loading.value = false
   if (errorFlag.value) {
     setTimeout(resetErrorFlag, 2000)
   }

pages/curations/[curationId]/edit.vue

@@ -106,12 +106,11 @@
                   :placeholder="curation.desc"
                 />
                 <v-btn
-                  class="mr-3"
+                  class="mr-3 mb-3"
                   color="primary"
                   elevation="2"
                   variant="outlined"
                   density="compact"
-                  class="mb-3"
                   :loading="loading"
                   @click="editDescription"
                 >