use popover for a less cluttered look

UMAprotocol · Feb 19, 2024 · 381b6bb · 381b6bb
1 parent dbcd796
commit 381b6bb
Showing 1 changed file with 45 additions and 27 deletions.
diff --git a/src/plugins/oSnap/components/BotSupportWarning.vue b/src/plugins/oSnap/components/BotSupportWarning.vue
@@ -2,6 +2,7 @@
 import { Network, SpaceConfigResponse } from '../types';
 import { onMounted } from 'vue';
 import { isConfigCompliant } from '../utils';
+import BasePopoverHover from '../../../components/BasePopoverHover.vue';
 
 const props = defineProps<{
   safeAddress: string;
@@ -25,33 +26,50 @@ watch([props.chainId, props.safeAddress], getConfigStatus);
 
 <template>
   <div v-if="configStatus">
-    <div v-if="configStatus.automaticExecution">
-      <p class="text-green/75 text-sm">
-        <BaseIcon name="warning" class="mr-1 text-sm text-inherit" />
-        Warning! You are using the default settings. If your proposal passes,
-        your transaction will be <strong>automatically executed</strong> and
-        verified by the UMA Optimistic Oracle.
-      </p>
-    </div>
+    <BasePopoverHover v-if="configStatus.automaticExecution">
+      <template v-slot:button>
+        <span class="text-green">
+          <BaseIcon name="check" :size="'14'" class="mr-1" /> Bot Support
+        </span>
+      </template>
+      <template v-slot:content>
+        <div class="p-3 text-green text-sm">
+          <p>
+            You are using the default settings. If your proposal passes, your
+            transaction will be
+            <strong>automatically executed</strong> and verified by the UMA
+            Optimistic Oracle.
+          </p>
+        </div>
+      </template>
+    </BasePopoverHover>
 
-    <div v-else class="text-red/75 text-sm">
-      <p>
-        <BaseIcon name="warning" class="mr-1" />
-        Warning! You are <strong>not</strong> using the default settings. If
-        your proposal passes, you will be required to <strong>manually</strong>
-        request transaction execution and post a bond to the UMA Optimistic
-        Oracle for verification.
-      </p>
-      <p class="mt-2">Reasons:</p>
-      <ul class="pl-4 [&>li]:list-disc">
-        <li v-if="!configStatus.bondAmount">Bond Amount (Should be 2)</li>
-        <li v-if="!configStatus.bondToken">Bond Token (Should be WETH)</li>
-        <li v-if="!configStatus.rules">
-          Space URL (only snapshot.org <strong>production</strong> spaces are
-          supported with automated execution. There is no bot support for
-          testnets.)
-        </li>
-      </ul>
-    </div>
+    <BasePopoverHover v-else>
+      <template v-slot:button>
+        <span class="text-red">
+          <BaseIcon name="warning" :size="'14'" class="mr-1" /> No Bot Support
+        </span>
+      </template>
+      <template v-slot:content>
+        <div class="p-3 text-red text-sm">
+          <p>
+            You are <strong>not</strong> using the default settings. If your
+            proposal passes, you will be required to <strong>manually</strong>
+            request transaction execution and post a bond to the UMA Optimistic
+            Oracle for verification.
+          </p>
+          <p class="mt-2">Reasons:</p>
+          <ul class="pl-4 [&>li]:list-disc">
+            <li v-if="!configStatus.bondAmount">Bond Amount (Should be 2)</li>
+            <li v-if="!configStatus.bondToken">Bond Token (Should be WETH)</li>
+            <li v-if="!configStatus.rules">
+              Space URL (only snapshot.org <strong>production</strong> spaces
+              are supported with automated execution. There is no bot support
+              for testnets.)
+            </li>
+          </ul>
+        </div>
+      </template>
+    </BasePopoverHover>
   </div>
 </template>