Add simulation toggle

components/Navbar.vue

@@ -2,32 +2,46 @@
   <div
     class="px-4 md:px-8 py-4 border border-b-[#E7E8F1] shadow flex flex-col md:flex-row md:items-center md:justify-between"
   >
-    <nuxt-link to="/" class="flex items-center text-[#1874FF]">
+    <div class="flex items-center">
-      <svg
+      <nuxt-link to="/" class="flex items-center text-[#1874FF]">
-        width="28"
+        <svg
-        height="26"
+          width="28"
-        viewBox="0 0 28 26"
+          height="26"
-        fill="none"
+          viewBox="0 0 28 26"
-        xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.0779 0.655535C14.6014 -0.218507 13.3989 -0.218513 12.9224 0.655524L7.43746 10.7156C7.20102 11.1492 7.49979 11.6888 7.97635 11.6888L20.0238 11.6888C20.5004 11.6888 20.7991 11.1492 20.5627 10.7156L15.0779 0.655535Z"
+            fill="currentColor"
+          />
+          <path
+            d="M22.4164 14.1155C22.1793 13.6808 21.5821 13.678 21.3414 14.1105L15.2685 25.0217C15.0271 25.4554 15.3255 26 15.8046 26H26.7568C27.71 26 28.3075 24.9208 27.8346 24.0535L22.4164 14.1155Z"
+            fill="currentColor"
+          />
+          <path
+            d="M12.1952 26C12.6742 26 12.9727 25.4554 12.7313 25.0217L6.65864 14.1107C6.41791 13.6782 5.82069 13.6809 5.58364 14.1157L0.16539 24.0535C-0.307493 24.9208 0.290038 26 1.24316 26H12.1952Z"
+            fill="currentColor"
+          />
+        </svg>
+
+        <span class="ml-2 font-extrabold text-lg">ASSEMBLY</span>
+      </nuxt-link>
+
+      <toggle-button
+        v-if="active && canSimulate"
+        @change="checked => (checked ? startSimulation() : stopSimulation())"
+        :checked="forkId"
+        :loading="loading"
+        class="ml-4 border-l pl-4"
+        label="Simulation Mode"
       >
-        <path
+      </toggle-button>
-          d="M15.0779 0.655535C14.6014 -0.218507 13.3989 -0.218513 12.9224 0.655524L7.43746 10.7156C7.20102 11.1492 7.49979 11.6888 7.97635 11.6888L20.0238 11.6888C20.5004 11.6888 20.7991 11.1492 20.5627 10.7156L15.0779 0.655535Z"
+    </div>
-          fill="currentColor"
-        />
-        <path
-          d="M22.4164 14.1155C22.1793 13.6808 21.5821 13.678 21.3414 14.1105L15.2685 25.0217C15.0271 25.4554 15.3255 26 15.8046 26H26.7568C27.71 26 28.3075 24.9208 27.8346 24.0535L22.4164 14.1155Z"
-          fill="currentColor"
-        />
-        <path
-          d="M12.1952 26C12.6742 26 12.9727 25.4554 12.7313 25.0217L6.65864 14.1107C6.41791 13.6782 5.82069 13.6809 5.58364 14.1157L0.16539 24.0535C-0.307493 24.9208 0.290038 26 1.24316 26H12.1952Z"
-          fill="currentColor"
-        />
-      </svg>
 
-      <span class="ml-2 font-extrabold text-lg">ASSEMBLY</span>
+    <div
-    </nuxt-link>
+      class="mt-8 md:mt-0 ml-auto flex items-center justify-center space-x-2.5"
-
+    >
-    <div class="mt-8 md:mt-0 ml-auto flex items-center justify-center space-x-2.5">
       <button
         v-if="!active"
         @click="activate"
@@ -52,16 +66,31 @@
 </template>
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
+import { useTenderly } from "~/composables/useTenderly";
 import { useWeb3 } from "~/composables/useWeb3";
+import ToggleButton from "./common/input/ToggleButton.vue";
 
 export default defineComponent({
+  components: { ToggleButton },
   setup() {
     const { active, activate, deactivate } = useWeb3();
+    const {
+      canSimulate,
+      startSimulation,
+      stopSimulation,
+      forkId,
+      loading,
+    } = useTenderly();
 
     return {
       active,
       activate,
-      deactivate
+      deactivate,
+      canSimulate,
+      startSimulation,
+      stopSimulation,
+      forkId,
+      loading,
     };
   }
 });

components/common/input/ToggleButton.vue

@@ -11,20 +11,20 @@
     @click="toggle"
   >
     <div
-      class="box-content flex w-10 h-5 transition-colors duration-75 rounded-full p-2px"
+      class="box-content flex w-10 h-5 transition-colors duration-75 rounded-full p-0.5 shadow-inner"
       :class="{
-        'bg-green-pure dark:bg-opacity-75': checked,
+        'bg-green-pure': checked,
-        'bg-grey-light  group-hover:bg-grey-pure group-hover:bg-opacity-20 focus:bg-grey-pure focus:bg-opacity-20 dark:group-hover:bg-opacity-38 dark:bg-opacity-20 ': !checked
+        'bg-grey-light  group-hover:bg-grey-pure group-hover:bg-opacity-20 focus:bg-grey-pure focus:bg-opacity-20': !checked
       }"
     />
     <div
-      class="absolute flex items-center justify-center w-5 h-5 transition-transform duration-300 ease-out transform bg-white rounded-full  dark:bg-light"
+      class="absolute shadow flex items-center justify-center w-4 h-4 transition-transform duration-300 ease-out transform bg-white rounded-full"
-      style="top: calc(50% - 0.625rem)"
+      style="top: calc(50% - 0.5rem)"
       :style="{ transform }"
     >
       <spinner v-if="loading" class="text-green-pure" />
     </div>
-    <span v-if="label" class="ml-4 text-12">{{ label }}</span>
+    <span v-if="label" class="ml-2 font-semibold text-primary-gray">{{ label }}</span>
   </div>
 </template>
 

composables/useTenderly.ts

@@ -13,6 +13,7 @@ export function useTenderly() {
   const canSimulate = computed(
     () => $config.TENDERLY_FORK_PATH && $config.TENDERLY_KEY
   );
+  const loading = ref(false);
 
   onMounted(() => {
     if (!canSimulate.value) {
@@ -25,6 +26,7 @@ export function useTenderly() {
   });
 
   const startSimulation = async () => {
+    loading.value = true;
     try {
       const { data } = await axios({
         method: "post",
@@ -45,9 +47,11 @@ export function useTenderly() {
     } catch (error) {
       stopSimulation();
     }
+    loading.value = false;
   };
 
   const stopSimulation = async () => {
+    loading.value = true;
     try {
       await axios({
         method: "delete",
@@ -62,6 +66,7 @@ export function useTenderly() {
     forkId.value = null;
     window.localStorage.removeItem("forkId");
     refreshWeb3();
+    loading.value = false;
   };
 
   const setForkId = fork => {
@@ -99,6 +104,7 @@ export function useTenderly() {
     forkId,
     canSimulate,
     startSimulation,
-    stopSimulation
+    stopSimulation,
+    loading,
   };
 }

layouts/default.vue

@@ -79,23 +79,6 @@
         Balance
       </button>
     </div>
-
-    <div v-if="active && canSimulate" class="fixed bottom-0 left-0 ml-10 mb-16">
-      <button
-        v-if="forkId"
-        @click="stopSimulation"
-        class="px-9 h-[56px] bg-primary-blue-dark hover:bg-primary-blue-hover text-white rounded-[28px] text-lg font-semibold shadow flex items-center"
-      >
-        Stop Simulation
-      </button>
-      <button
-        v-else
-        @click="startSimulation"
-        class="px-9 h-[56px] bg-primary-blue-dark hover:bg-primary-blue-hover text-white rounded-[28px] text-lg font-semibold shadow flex items-center"
-      >
-        Start Simulation
-      </button>
-    </div>
   </div>
 </template>
 
@@ -122,7 +105,6 @@ export default defineComponent({
     const { isShown: isBackdropShown, close: closeBackdrop } = useBackdrop()
     const { redirect } = useContext()
     const { showSidebarBalances } = useSidebar()
-    const { canSimulate, startSimulation, stopSimulation, forkId } = useTenderly()
     const route = useRoute()
 
     watch(isBackdropShown, () => {
@@ -168,10 +150,6 @@ export default defineComponent({
       closeBackdrop,
       showSidebarBalances,
       activeNetworkId,
-      startSimulation,
-      forkId,
-      stopSimulation,
-      canSimulate,
     }
   }