update is osnap enabled on window focus

Signed-off-by: ryanwolhuter <[email protected]>
UMAprotocol · Oct 9, 2023 · c33870f · c33870f
1 parent 787b1aa
commit c33870f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 38 deletions.
diff --git a/src/components/ModalOsnap.vue b/src/components/ModalOsnap.vue
@@ -17,7 +17,7 @@ const href = computed(() =>
     spaceUrl,
     spaceName: props.spaceName,
     safeAddress: props.treasury.address,
-    network: props.treasury.network,
+    network: props.treasury.network
   })
 );
 </script>
@@ -28,14 +28,18 @@ const href = computed(() =>
       <h3 v-text="'Configure oSnap'" />
     </template>
     <div class="m-4 grid grid-cols-[auto,auto] gap-2">
-        <i-ho-information-circle class="text-sm mt-1" />
-        <p class="text-sm">
-          oSnap seamlessly integrates with Snapshot and your treasury,
-          automatically executing governance votes on-chain. Bypass the need for
-          privileged signers to create a DAO that's more efficient and truly
-          decentralized.
-      <BaseLink class="text-[hsl(240,83%,58%)] block mt-1" link="https://uma.xyz/osnap">Learn more</BaseLink>
-        </p>
+      <i-ho-information-circle class="mt-1 text-sm" />
+      <p class="text-sm">
+        oSnap seamlessly integrates with Snapshot and your treasury,
+        automatically executing governance votes on-chain. Bypass the need for
+        privileged signers to create a DAO that's more efficient and truly
+        decentralized.
+        <BaseLink
+          class="mt-1 block text-[hsl(240,83%,58%)]"
+          link="https://uma.xyz/osnap"
+          >Learn more</BaseLink
+        >
+      </p>
     </div>
 
     <template #footer>
@@ -46,11 +50,14 @@ const href = computed(() =>
         :class="
           isOsnapEnabled ? 'bg-[hsl(349,65%,52%)]' : 'bg-[hsl(240,83%,58%)]'
         "
+        @click.stop="$emit('close')"
       >
         {{ isOsnapEnabled ? 'Deactivate' : 'Activate' }} oSnap
         <i-ho-external-link class="mb-[2px] ml-1 inline-block text-xs" />
       </a>
-      <p class="text-black/50 text-xs mt-2">Note that the deactivation process takes place in the Safe app</p>
+      <p class="mt-2 text-xs text-black/50">
+        Note that the deactivation process takes place in the Safe app
+      </p>
     </template>
   </BaseModal>
 </template>
diff --git a/src/components/SettingsTreasuriesBlockItemButton.vue b/src/components/SettingsTreasuriesBlockItemButton.vue
@@ -10,41 +10,56 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  removeTreasury: [index: number]
-  editTreasury: [index: number]
-  configureOsnap: [index: number, isEnabled: boolean]
+  removeTreasury: [index: number];
+  editTreasury: [index: number];
+  configureOsnap: [index: number, isEnabled: boolean];
 }>();
 
 const isOsnapEnabled = ref(false);
 
-onMounted(async () => {
+async function updateIsOsnapEnabled() {
+  console.log('updateIsOsnapEnabled')
   if (!props.hasOsnapPlugin) return;
-  isOsnapEnabled.value = await getIsOsnapEnabled(props.treasury.network, props.treasury.address);
-})
+  isOsnapEnabled.value = await getIsOsnapEnabled(
+    props.treasury.network,
+    props.treasury.address
+  );
+}
+
+onMounted(async () => {
+  await updateIsOsnapEnabled();
+  window.addEventListener('focus', updateIsOsnapEnabled);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('focus', updateIsOsnapEnabled);
+});
 </script>
 
 <template>
   <button
-      class="flex h-full truncate w-full items-center justify-between rounded-md border p-4"
-      :class="{ 'cursor-default': isViewOnly }"
-      @click="emit('editTreasury', treasuryIndex)"
+    class="flex h-full w-full items-center justify-between truncate rounded-md border p-4"
+    :class="{ 'cursor-default': isViewOnly }"
+    @click="emit('editTreasury', treasuryIndex)"
+  >
+    <div class="flex items-center gap-2 truncate pr-[20px] text-left">
+      <h4 class="truncate">{{ treasury.name }}</h4>
+    </div>
+    <div class="ml-auto mr-3">
+      <SettingsTreasuryActivateOsnapButton
+        v-show="hasOsnapPlugin"
+        :is-osnap-enabled="isOsnapEnabled"
+        @click.stop="
+          !isViewOnly && emit('configureOsnap', treasuryIndex, isOsnapEnabled)
+        "
+      />
+    </div>
+    <BaseButtonIcon
+      v-show="!isViewOnly"
+      class="-mr-2"
+      @click.stop="emit('removeTreasury', treasuryIndex)"
     >
-      <div class="flex items-center gap-2 truncate pr-[20px] text-left">
-        <h4 class="truncate">{{ treasury.name }}</h4>
-      </div>
-      <div class="ml-auto mr-3">
-        <SettingsTreasuryActivateOsnapButton
-        v-show="hasOsnapPlugin" 
-        :is-osnap-enabled="isOsnapEnabled" 
-        @click.stop="!isViewOnly && emit('configureOsnap', treasuryIndex, isOsnapEnabled)" 
-        />
-      </div>
-      <BaseButtonIcon
-        v-show="!isViewOnly"
-        class="-mr-2"
-        @click.stop="emit('removeTreasury', treasuryIndex)"
-      >
-        <BaseIcon name="close" size="14" />
-      </BaseButtonIcon>
-    </button>
-</template>
+      <BaseIcon name="close" size="14" />
+    </BaseButtonIcon>
+  </button>
+</template>