mirror of
https://github.com/Instadapp/assembly.git
synced 2024-07-29 22:37:06 +00:00
Add simulation toggle
This commit is contained in:
Georges KABBOUCHI
parent
c872ebe59c
commit
10f55b1b3d
|
|
@ -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]">
|
||||
<svg
|
||||
width="28"
|
||||
height="26"
|
||||
viewBox="0 0 28 26"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
<div class="flex items-center">
|
||||
<nuxt-link to="/" class="flex items-center text-[#1874FF]">
|
||||
<svg
|
||||
width="28"
|
||||
height="26"
|
||||
viewBox="0 0 28 26"
|
||||
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
|
||||
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>
|
||||
</toggle-button>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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-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-green-pure': 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"
|
||||
style="top: calc(50% - 0.625rem)"
|
||||
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.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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user