aad01f7 Improve reactivity and UX of pending anchors — radicle-explorer

modified 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}

modified 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>

modified 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>