fixes

components/modal/web3/Web3Modal.vue

@@ -1,11 +1,18 @@
 <template>
   <div
-    class="relative inline-block w-full max-w-md px-8 py-8 overflow-hidden text-left align-bottom transition-all transform bg-white border border-opacity-50 rounded-lg shadow-xl  dark:bg-dark-400 sm:my-16 sm:align-middle sm:p-6 border-green-light"
+    class="relative inline-block w-full max-w-md px-8 py-8 overflow-hidden text-left align-bottom transition-all transform bg-white  sm:my-16 sm:align-middle sm:p-6 "
+    :class="{
+      'border border-opacity-50 rounded-lg shadow-xl border-green-light': !slim
+    }"
     role="dialog"
     aria-modal="true"
     aria-labelledby="modal-headline"
   >
-    <div class="py-8">
+    <div
+      :class="{
+        'py-8': !slim
+      }"
+    >
       <div class="text-center">
         <h3 id="modal-headline" class="font-bold text-2xl text-[#374253]">
           Connect your wallet
@@ -42,7 +49,7 @@
       </div>
     </div>
 
-    <button class="absolute top-0 right-0 p-4" @click="close">
+    <button v-if="!slim" class="absolute top-0 right-0 p-4" @click="close">
       <svg
         width="10"
         height="10"
@@ -70,6 +77,12 @@ import ButtonCTA from '../../common/input/ButtonCTA.vue'
 import ButtonCTAOutlined from '../../common/input/ButtonCTAOutlined.vue'
 
 export default defineComponent({
+  props: {
+    slim: {
+      type: Boolean,
+      default: false
+    }
+  },
   components: { ButtonCTA, ButtonCTAOutlined, Input },
   setup() {
     const { close } = useModal()

composables/useTenderly.ts

@@ -4,7 +4,6 @@ import { activeNetwork, useNetwork } from "./useNetwork";
 import { useWeb3 } from "@kabbouchi/vue-web3";
 import Web3 from "web3";
 import { useDSA } from "./useDSA";
-import { injected } from "~/connectors";
 
 const forkId = ref(null);
 export function useTenderly() {
@@ -22,7 +21,7 @@ export function useTenderly() {
     }
 
     setTimeout(() => {
-      setForkId(window.localStorage.getItem("forkId"));
+      setForkId(window.localStorage.getItem("forkId"), true);
     }, 1000);
   });
 
@@ -52,14 +51,8 @@ export function useTenderly() {
     loading.value = false;
   };
 
-  const stopSimulation = async () => {
+  const stopSimulation = async (silent = false) => {
     loading.value = true;
-    if (connector.value) {
-      deactivate();
-      activate(connector.value);
-    } else {
-      deactivate();
-    }
 
     try {
       await axios({
@@ -74,13 +67,18 @@ export function useTenderly() {
 
     forkId.value = null;
     window.localStorage.removeItem("forkId");
-    // await refreshWeb3();
+
+    if (!silent && connector.value) {
+      deactivate();
+      activate(connector.value);
+    }
+
     loading.value = false;
   };
 
-  const setForkId = async fork => {
+  const setForkId = async (fork, silent = false) => {
     if (!fork) {
-      stopSimulation();
+      stopSimulation(silent);
       return;
     }
 

layouts/default.vue

@@ -5,8 +5,13 @@
     <div class="min-h-screen flex flex-col">
       <Navbar />
       <div v-if="activeNetworkId" class="flex-1 overflow-x-hidden ">
-        <div class="px-8 md:px-4 max-w-6xl mx-auto py-12">
-          <Nuxt />
+        <div
+          class="px-8 md:px-4 max-w-6xl mx-auto"
+          :class="{ 'text-center': !active, 'py-12': active }"
+        >
+          <Nuxt v-if="active" />
+
+          <web-3-modal slim v-else />
         </div>
       </div>
       <div class="flex-1 flex items-center justify-center" v-else>
@@ -43,7 +48,10 @@
 
     <NotificationBar />
 
-    <div class="fixed bottom-0 right-0 mr-5 md:mr-10 mb-5 md:mb-28">
+    <div
+      v-if="active"
+      class="fixed bottom-0 right-0 mr-5 md:mr-10 mb-5 md:mb-28"
+    >
       <button
         @click="showSidebarBalances"
         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"
@@ -84,15 +92,16 @@ import { useWeb3 } from '@kabbouchi/vue-web3'
 import { init as initSidebars, useSidebar } from '~/composables/useSidebar'
 import { useBackdrop } from '@/composables/useBackdrop'
 import { useNetwork } from "~/composables/useNetwork";
-import { useTenderly } from "~/composables/useTenderly";
 import { useModal } from "~/composables/useModal";
 import { useEagerConnect } from "~/composables/useEagerConnect";
+import Web3Modal from "~/components/modal/web3/Web3Modal.vue";
 
 export default defineComponent({
   components: {
     MakerDAOIcon,
     CompoundIcon,
     AaveIcon,
+    Web3Modal,
   },
   setup() {
     const { active, activate, deactivate, chainId } = useWeb3();
@@ -101,7 +110,7 @@ export default defineComponent({
     const { redirect } = useContext()
     const { showSidebarBalances } = useSidebar()
     const { showNetworksMismatchDialog } = useModal()
-    useEagerConnect()
+    // useEagerConnect()
     const route = useRoute()
 
     watch(isBackdropShown, () => {