Improve reactivity and UX of pending anchors

Signed-off-by: Sebastian Martinez <sebastinez@me.com>

src/base/orgs/View.svelte

@@ -331,7 +331,7 @@
           </Message>
         {/await}
 
-        <Projects {org} config={profile.seed ? config.withSeed(profile.seed) : config} />
+        <Projects {org} {account} config={profile.seed ? config.withSeed(profile.seed) : config} />
       {/await}
     </main>
   {:else}

src/base/orgs/View/Anchor.svelte

@@ -30,31 +30,32 @@
 
   const dispatch = createEventDispatcher();
   let state = State.Idle;
+  let error: string | null = null;
   let action: null | Action = null;
-  const isSigned = project.confirmations.includes(
-    ethers.utils.getAddress(account)
-  );
+
   const close = () => {
     action = null;
     state = State.Idle;
-    // Could eventually be a separate function if we want to handle a Cancel event differently.
-    dispatch("success");
   };
+
   const pending = safe.threshold - project.confirmations.length;
   const executeTransaction = async (safeTxHash: string) => {
     try {
       action = Action.Execute;
-      state = State.Confirm;
+      state = State.Signing;
       const txResult = await utils.executeSignedSafeTransaction(safe.address, safeTxHash, config);
 
       state = State.Submitting;
       await txResult.transactionResponse?.wait();
 
       state = State.Success;
-    } catch (err) {
+    } catch (err: any) {
       console.error(err);
+      error = err.message;
+      state = State.Failed;
     }
   };
+
   const confirmAnchor = async (safeTxHash: string) => {
     try {
       action = Action.Sign;
@@ -65,11 +66,16 @@
       await config.safe.client?.confirmTransaction(safeTxHash, signature.data);
 
       state = State.Success;
-    } catch (err) {
+    } catch (err: any) {
       console.error(err);
+      error = err.message;
       state = State.Failed;
     }
   };
+
+  $: isSigned = project.confirmations.includes(
+    ethers.utils.getAddress(account)
+  );
 </script>
 
 <style>
@@ -144,6 +150,8 @@
         <span>Transaction is being confirmed...</span>
       {:else if state == State.Success}
         <span>Transaction confirmed.</span>
+      {:else if state == State.Failed}
+        <span>Transaction failed</span>
       {/if}
     </span>
 
@@ -153,6 +161,8 @@
           <div>Project</div><code>{project.id}</code>
           <div>Hash</div><code>{project.anchor.stateHash}</code>
         </div>
+      {:else if state == State.Failed}
+        <div>{error}</div>
       {/if}
     </span>
 
@@ -164,8 +174,11 @@
         <button class="text" on:click={close}>
           Cancel
         </button>
-      {:else if state == State.Success}
-        <button on:click={close}>Done</button>
+      {:else if state == State.Success || state == State.Failed}
+        <button on:click={() => {
+          close();
+          dispatch("success");
+        }}>Done</button>
       {/if}
     </span>
   </Modal>
@@ -178,11 +191,15 @@
 
     <span slot="subtitle">
       {#if state == State.Confirm}
+        <span>Initiate the transaction...</span>
+      {:else if state == State.Signing}
         <span>Sign the transaction in your wallet...</span>
       {:else if state == State.Submitting}
         <span>Transaction is being confirmed...</span>
       {:else if state == State.Success}
         <span>Transaction confirmed.</span>
+      {:else if state == State.Failed}
+        <span>Transaction failed</span>
       {/if}
     </span>
 
@@ -192,6 +209,8 @@
           <div>TxHash</div><code>{utils.formatHash(project.safeTxHash)}</code>
           <div>Quorum</div><code>{project.confirmations.length} of {safe.threshold}</code>
         </div>
+      {:else if state == State.Failed}
+        <div>{error}</div>
       {/if}
     </span>
 
@@ -203,8 +222,11 @@
         <button class="text" on:click={close}>
           Cancel
         </button>
-      {:else if state == State.Success}
-        <button on:click={() => close}>Done</button>
+      {:else if state == State.Success || state == State.Failed}
+        <button on:click={() => {
+          close();
+          dispatch("success");
+        }}>Done</button>
       {/if}
     </span>
   </Modal>

src/base/orgs/View/Projects.svelte

@@ -2,7 +2,6 @@
   import type { Config } from "@app/config";
   import type { Org } from "@app/base/orgs/Org";
   import type { PendingProject, Project } from "@app/project";
-  import { session } from '@app/session';
   import Loading from "@app/Loading.svelte";
   import Message from "@app/Message.svelte";
   import Widget from '@app/base/projects/Widget.svelte';
@@ -11,20 +10,20 @@
 
   export let org: Org;
   export let config: Config;
+  export let account: string | null;
 
-  let getProjects = queryProjects;
-
-  function updateRecords() {
+  const updateRecords = () => {
     getProjects = queryProjects;
-  }
+  };
 
-  async function queryProjects(): Promise<(Project | PendingProject)[]> {
-    if ($session) {
-      const result = await org.isMember($session.address, config);
+  $: queryProjects = async (): Promise<(Project | PendingProject)[]> => {
+    if (account) {
+      const result = await org.isMember(account, config);
       return result ? org.getAllProjects(config) : org.getProjects(config);
     }
     return org.getProjects(config);
-  }
+  };
+  $: getProjects = queryProjects;
 </script>
 
 <style>
@@ -53,9 +52,8 @@
               <span class="desktop">commit {project.anchor.stateHash}</span>
             </span>
             <span class="anchor" slot="actions">
-              {#if org.safe && $session}
-                <Anchor {project} safe={org.safe} on:success={() => updateRecords()} account={$session.address} {config} />
-                <button on:click={() => updateRecords()}>Update projects</button>
+              {#if org.safe && account}
+                <Anchor {project} safe={org.safe} on:success={() => updateRecords()} {account} {config} />
               {/if}
             </span>
           </Widget>