Instadapp/assembly
1
0
Fork 0
mirror of https://github.com/Instadapp/assembly.git synced 2024-07-29 22:37:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11 from Instadapp/simulation

Browse Source 
Simulation
This commit is contained in:
Georges KABBOUCHI 2021-08-19 19:34:39 +03:00 committed by GitHub
commit 9759cf860f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 235 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.example
View File

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

79
components/Navbar.vue
View File

@ -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,
};
}
});

4
components/NetworkSwitcher.vue
View File

@ -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()

8
components/common/input/ToggleButton.vue
View File

@ -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"
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" />
<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>

49
composables/useBalances.ts
View File

@ -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),
polygon: await getBalances(account.value, Network.Polygon, polygonWeb3)
mainnet:
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(
activeAccount.value.address,
Network.Mainnet,
mainnetWeb3
),
polygon: await getBalances(
activeAccount.value.address,
Network.Polygon,
polygonWeb3
)
mainnet:
networkName.value === Network.Mainnet
? await getBalances(
activeAccount.value.address,
Network.Mainnet,
web3.value
)
: {},
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;

4
composables/useDSA.ts
View File

@ -12,7 +12,7 @@ export function useDSA() {
watch(
web3,
() => {
() => {
if (web3.value) {
dsa.value = new DSA(web3.value, chainId.value);
}
@ -38,6 +38,8 @@ export function useDSA() {
activeAccount.value = accounts.value[0];
}
}
//@ts-ignore
window.dsa = dsa.value
}
);

16
composables/useNetwork.ts
View File

@ -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,

110
composables/useTenderly.ts Normal file
View File

@ -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,
};
}

13
composables/useWeb3.ts
View File

@ -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,
};
}

3
layouts/default.vue
View File

@ -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: {

2
nuxt.config.js
View File

@ -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

16
utils/web3.ts
View File

@ -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"
)
);