Merge pull request #11 from Instadapp/simulation

Simulation

.env.example

@@ -1,2 +1,4 @@
 INFURA_ID=
 PORTIS_ID=
+TENDERLY_FORK_PATH=
+TENDERLY_KEY=

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/NetworkSwitcher.vue

@@ -100,16 +100,18 @@
 
 <script>
 import { defineComponent, nextTick, ref } from '@nuxtjs/composition-api'
-import { useModal } from '~/composables/useModal'
 import { useNetwork } from '~/composables/useNetwork'
+import { useTenderly } from '~/composables/useTenderly'
 
 export default defineComponent({
   setup() {
     const show = ref(false)
 
     const { networks, activeNetworkId, activeNetwork, checkForNetworkMismatch } = useNetwork()
+    const { stopSimulation } = useTenderly()
 
     const setActiveNetwork = async networkId => {
+      await stopSimulation()
       activeNetworkId.value = networkId;
       show.value = false
       await nextTick()

components/common/input/ToggleButton.vue

@@ -18,13 +18,13 @@
       }"
     />
     <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" />
+      <spinner v-if="loading" class="text-primary-blue-dark" />
     </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/useBalances.ts

@@ -2,7 +2,8 @@ import {
   computed,
   reactive,
   onMounted,
-  useContext
+  useContext,
+  watch
 } from "@nuxtjs/composition-api";
 import BigNumber from "bignumber.js";
 import abis from "~/constant/abis";
@@ -14,7 +15,6 @@ import { Network } from "./useNetwork";
 import { useWeb3 } from "./useWeb3";
 import Web3 from "web3";
 import { AbiItem } from "web3-utils";
-import { mainnetWeb3, polygonWeb3 } from "~/utils/web3";
 import { useToken } from "./useToken";
 import { useBigNumber } from "./useBigNumber";
 import { useSorting } from "./useSorting";
@@ -32,7 +32,7 @@ const prices = reactive({
 export function useBalances() {
   const { $axios } = useContext();
   const { times, plus, ensureValue } = useBigNumber();
-  const { account, networkName } = useWeb3();
+  const { account, networkName, web3 } = useWeb3();
   const { activeAccount } = useDSA();
   const { getTokenByKey } = useToken();
   const { by } = useSorting();
@@ -46,23 +46,35 @@ export function useBalances() {
   const fetchBalances = async (refresh = false) => {
     if (!balances.user || refresh) {
       balances.user = {
-        mainnet: await getBalances(account.value, Network.Mainnet, mainnetWeb3),
+        mainnet:
-        polygon: await getBalances(account.value, Network.Polygon, polygonWeb3)
+          networkName.value === Network.Mainnet
+            ? await getBalances(account.value, Network.Mainnet, web3.value)
+            : {},
+        polygon:
+          networkName.value === Network.Polygon
+            ? await getBalances(account.value, Network.Polygon, web3.value)
+            : {}
       };
     }
 
     if (!balances.dsa || refresh) {
       balances.dsa = {
-        mainnet: await getBalances(
+        mainnet:
-          activeAccount.value.address,
+          networkName.value === Network.Mainnet
-          Network.Mainnet,
+            ? await getBalances(
-          mainnetWeb3
+                activeAccount.value.address,
-        ),
+                Network.Mainnet,
-        polygon: await getBalances(
+                web3.value
-          activeAccount.value.address,
+              )
-          Network.Polygon,
+            : {},
-          polygonWeb3
+        polygon:
-        )
+          networkName.value === Network.Polygon
+            ? await getBalances(
+                activeAccount.value.address,
+                Network.Polygon,
+                web3.value
+              )
+            : {}
       };
     }
   };
@@ -110,6 +122,11 @@ export function useBalances() {
       .sort(by("-netWorth"));
   };
 
+  watch(web3, () => {
+    console.log("Fetch balances");
+
+    fetchBalances(true);
+  });
   return {
     balances,
     fetchBalances,
@@ -127,6 +144,8 @@ async function getBalances(
   web3: Web3,
   additionalTokens = []
 ) {
+  console.log("getBalances", owner, network, web3);
+
   try {
     const tokenResolverABI = abis.resolver.balance;
     const tokenResolverAddr = addresses[network].resolver.balance;

composables/useDSA.ts

@@ -38,6 +38,8 @@ export function useDSA() {
           activeAccount.value = accounts.value[0];
         }
       }
+      //@ts-ignore
+      window.dsa = dsa.value
     }
   );
 

composables/useNetwork.ts

@@ -23,7 +23,6 @@ export const activeNetwork = computed(
 );
 
 export function useNetwork() {
-  
   const { showWarning } = useNotification();
   const { account, networkName, refreshWeb3 } = useWeb3();
   const { showNetworksMismatchDialog } = useModal();
@@ -108,15 +107,18 @@ export function useNetwork() {
   }
 
   watch(activeNetworkId, () => {
-    localStorage.setItem('network', activeNetworkId.value)
+    localStorage.setItem("network", activeNetworkId.value);
-  })
+  });
 
-  onMounted( () => {
+  onMounted(() => {
+    if (activeNetworkId.value) {
+      return;
+    }
     //@ts-ignore
-    activeNetworkId.value = localStorage.getItem('network') || "mainnet";
+    activeNetworkId.value = localStorage.getItem("network") || "mainnet";
 
-    refreshWeb3()
+    refreshWeb3();
-  })
+  });
 
   return {
     networkMismatch,

composables/useTenderly.ts

@@ -0,0 +1,110 @@
+import { useContext, ref, onMounted, computed } from "@nuxtjs/composition-api";
+import axios from "axios";
+import { activeNetwork, useNetwork } from "./useNetwork";
+import { useWeb3 } from "./useWeb3";
+import Web3 from "web3";
+import { useDSA } from "./useDSA";
+
+const forkId = ref(null);
+export function useTenderly() {
+  const { $config } = useContext();
+  const { setWeb3, refreshWeb3 } = useWeb3();
+  const { accounts } = useDSA();
+  const canSimulate = computed(
+    () => $config.TENDERLY_FORK_PATH && $config.TENDERLY_KEY
+  );
+  const loading = ref(false);
+
+  onMounted(() => {
+    if (!canSimulate.value) {
+      return;
+    }
+
+    setTimeout(() => {
+      setForkId(window.localStorage.getItem("forkId"));
+    }, 1000);
+  });
+
+  const startSimulation = async () => {
+    loading.value = true;
+    try {
+      const { data } = await axios({
+        method: "post",
+        url: `https://api.tenderly.co/api/v1/account/${$config.TENDERLY_FORK_PATH}/fork`,
+        headers: {
+          "X-Access-key": $config.TENDERLY_KEY,
+          "Content-Type": "application/json"
+        },
+        data: JSON.stringify({
+          network_id: activeNetwork.value.chainId.toString()
+        })
+      });
+
+      setForkId(data?.simulation_fork?.id);
+      if (data?.simulation_fork?.id) {
+        addBalance();
+      }
+    } catch (error) {
+      stopSimulation();
+    }
+    loading.value = false;
+  };
+
+  const stopSimulation = async () => {
+    loading.value = true;
+    try {
+      await axios({
+        method: "delete",
+        url: `https://api.tenderly.co/api/v1/account/${$config.TENDERLY_FORK_PATH}/fork/${forkId.value}`,
+        headers: {
+          "X-Access-key": $config.TENDERLY_KEY,
+          "Content-Type": "application/json"
+        }
+      });
+    } catch (error) {}
+
+    forkId.value = null;
+    window.localStorage.removeItem("forkId");
+    refreshWeb3();
+    loading.value = false;
+  };
+
+  const setForkId = fork => {
+    if (!fork) {
+      stopSimulation();
+      return;
+    }
+
+    forkId.value = fork;
+    setWeb3(
+      new Web3(
+        new Web3.providers.HttpProvider(
+          `https://rpc.tenderly.co/fork/${forkId.value}`
+        )
+      )
+    );
+    window.localStorage.setItem("forkId", forkId.value);
+  };
+
+  const addBalance = async () => {
+    await axios({
+      method: "post",
+      url: `https://api.tenderly.co/api/v1/account/${$config.TENDERLY_FORK_PATH}/fork/${forkId.value}/balance`,
+      headers: {
+        "X-Access-key": $config.TENDERLY_KEY,
+        "Content-Type": "application/json"
+      },
+      data: JSON.stringify({
+        accounts: accounts.value.map(a => a.address)
+      })
+    });
+  };
+
+  return {
+    forkId,
+    canSimulate,
+    startSimulation,
+    stopSimulation,
+    loading,
+  };
+}

composables/useWeb3.ts

@@ -1,4 +1,4 @@
-import { computed, onMounted, ref } from "@nuxtjs/composition-api";
+import { computed, onMounted, ref, watch } from "@nuxtjs/composition-api";
 import Web3 from "web3";
 import Web3Modal from "web3modal";
 import { Network } from "./useNetwork";
@@ -122,6 +122,14 @@ export function useWeb3() {
     web3.value = newWeb3;
   };
 
+  const setWeb3 = (newWeb3: Web3) => {
+    web3.value = newWeb3;
+  }
+
+  watch(web3, () => {
+    window.web3 = web3.value;
+  })
+
   return {
     account,
     chainId,
@@ -130,6 +138,7 @@ export function useWeb3() {
     activate,
     deactivate,
     networkName,
-    refreshWeb3
+    refreshWeb3,
+    setWeb3,
   };
 }

layouts/default.vue

@@ -83,7 +83,7 @@
 </template>
 
 <script>
-import { defineComponent, nextTick, onErrorCaptured, useContext, useRoute, watch } from "@nuxtjs/composition-api";
+import { defineComponent, nextTick, onErrorCaptured, onMounted, useContext, useRoute, watch } from "@nuxtjs/composition-api";
 import MakerDAOIcon from '~/assets/icons/makerdao.svg?inline'
 import CompoundIcon from '~/assets/icons/compound.svg?inline'
 import AaveIcon from '~/assets/icons/aave.svg?inline'
@@ -91,6 +91,7 @@ import { useWeb3 } from '~/composables/useWeb3'
 import { init as initSidebars, useSidebar } from '~/composables/useSidebar'
 import { useBackdrop } from '@/composables/useBackdrop'
 import { useNetwork } from "~/composables/useNetwork";
+import { useTenderly } from "~/composables/useTenderly";
 
 export default defineComponent({
   components: {

nuxt.config.js

@@ -43,6 +43,8 @@ export default {
   publicRuntimeConfig: {
     INFURA_ID: process.env.INFURA_ID,
     PORTIS_ID: process.env.PORTIS_ID,
+    TENDERLY_FORK_PATH: process.env.TENDERLY_FORK_PATH,
+    TENDERLY_KEY: process.env.TENDERLY_KEY,
   },
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

utils/web3.ts

@@ -1,16 +0,0 @@
-import Web3 from "web3";
-
-const mainnetInfura = "https://mainnet.infura.io/v3/";
-const polygonInfura = "https://polygon-mainnet.infura.io/v3/";
-
-export const polygonWeb3 = new Web3(
-  new Web3.providers.HttpProvider(
-    polygonInfura + "19c4b8b779a343e6ac5a91f4eaf55b81"
-  )
-);
-
-export const mainnetWeb3 = new Web3(
-  new Web3.providers.HttpProvider(
-    mainnetInfura + "19c4b8b779a343e6ac5a91f4eaf55b81"
-  )
-);