Add simulation toggle

components/Navbar.vue

@@ -2,6 +2,7 @@
   <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"
   >
+    <div class="flex items-center">
       <nuxt-link to="/" class="flex items-center text-[#1874FF]">
         <svg
           width="28"
@@ -27,7 +28,20 @@
         <span class="ml-2 font-extrabold text-lg">ASSEMBLY</span>
       </nuxt-link>
 
-    <div class="mt-8 md:mt-0 ml-auto flex items-center justify-center space-x-2.5">
+      <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"
+      >
+      </toggle-button>
+    </div>
+
+    <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,
     }
   }