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 #17 from Instadapp/vue-web3

Browse Source
This commit is contained in:
Georges KABBOUCHI 2021-09-06 19:52:45 +03:00 committed by GitHub
commit ae6002d219
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 1849 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/icons/coinbase.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

11
assets/icons/metamask.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 149 KiB

11
assets/icons/portis.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

9
assets/icons/wallet-connect-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

7
components/AccountDropdown.vue
View File

@ -143,7 +143,7 @@
</div>
<button
v-else-if="!active"
@click="activate"
@click="open"
class="hidden md:flex bg-primary-blue-dark hover:bg-primary-blue-hover shadow text-white p-3 rounded h-9 items-center justify-center w-40"
>
Connect
@ -155,12 +155,14 @@
import { defineComponent, ref, watch } from '@nuxtjs/composition-api'
import { useDSA } from "~/composables/useDSA";
import { useFormatting } from '~/composables/useFormatting';
import { useWeb3 } from '~/composables/useWeb3';
import { useWeb3Modal } from '~/composables/useWeb3Modal';
import { useWeb3 } from '@instadapp/vue-web3';
export default defineComponent({
setup() {
const { activeAccount } = useDSA()
const { active, deactivate, activate } = useWeb3()
const { open } = useWeb3Modal()
const { shortenHash } = useFormatting()
const show = ref(false)
@ -172,6 +174,7 @@ export default defineComponent({
return {
hide,
show,
open,
activeAccount,
active,
activate,

2
components/Navbar.vue
View File

@ -53,7 +53,7 @@
<script lang="ts">
import { defineComponent } from "@nuxtjs/composition-api";
import { useTenderly } from "~/composables/useTenderly";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import ToggleButton from "./common/input/ToggleButton.vue";
export default defineComponent({

10
components/NetworkSwitcher.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="relative w-1/2 md:w-[178px]" v-click-outside="hide">
<div v-if="!isGnosisSafe" class="relative w-1/2 md:w-[178px]" v-click-outside="hide">
<button
type="button"
class="bg-primary-blue-dark hover:bg-primary-blue-hover relative w-full border border-primary-blue-border rounded pl-2.5 pr-10 py-1.5 text-left focus:outline-none focus:ring-1 focus:ring-[#0846E4] focus:border-[#0846E4] sm:text-sm"
@ -99,16 +99,21 @@
</template>
<script>
import { defineComponent, nextTick, ref } from '@nuxtjs/composition-api'
import { defineComponent, nextTick, ref, computed } from '@nuxtjs/composition-api'
import { useNetwork } from '~/composables/useNetwork'
import { useTenderly } from '~/composables/useTenderly'
import { useWeb3 } from '@instadapp/vue-web3'
import { gnosisSafe } from '~/connectors'
export default defineComponent({
setup() {
const show = ref(false)
const { connector } = useWeb3()
const { networks, activeNetworkId, activeNetwork, checkForNetworkMismatch } = useNetwork()
const { stopSimulation } = useTenderly()
const isGnosisSafe = computed(() => connector.value === gnosisSafe)
const setActiveNetwork = async networkId => {
await stopSimulation()
@ -129,6 +134,7 @@ export default defineComponent({
activeNetwork,
setActiveNetwork,
activeNetworkId,
isGnosisSafe,
}
},

117
components/modal/web3/Web3Modal.vue Normal file
View File

@ -0,0 +1,117 @@
<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 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': !slim
}"
>
<div class="text-center">
<h3 id="modal-headline" class="font-bold text-2xl text-[#374253]">
Connect your wallet
</h3>
</div>
<div class="mt-8 w-full space-y-4">
<button
class="w-full px-6 py-3 text-left flex items-center h-[80px] border border-[#DBE5F4] rounded-[4px] text-lg text-[#374253] font-semibold hover:bg-background-light"
v-for="(wallet, key) in wallets"
:key="key"
@click="connect(wallet.connector)"
>
<div
style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
class="mr-5 w-14 h-14 flex-shrink-0 rounded-full flex items-center justify-center border border-[#CCDCF3]"
>
<div
class="w-10 h-10 rounded-full inline-flex items-center justify-center bg-white"
>
<component :is="wallet.iconURL" class="w-7 h-7 text-white" />
</div>
</div>
{{ wallet.name }}
</button>
</div>
<div class="mt-6 text-center text-sm hidden">
Need help connecting a wallet?
<nuxt-link to="/faqs" class="font-semibold text-ocean-blue-pure"
>Read our FAQ</nuxt-link
>
</div>
</div>
<button v-if="!slim" class="absolute top-0 right-0 p-4" @click="close">
<svg
width="10"
height="10"
viewBox="0 0 10 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0.279403 0.279336C-0.0930443 0.651784 -0.0930442 1.25564 0.279403 1.62809L3.65128 4.99997L0.279336 8.37191C-0.0931119 8.74436 -0.0931119 9.34822 0.279336 9.72066C0.651783 10.0931 1.25564 10.0931 1.62809 9.72066L5.00003 6.34872L8.37191 9.7206C8.74436 10.0931 9.34822 10.0931 9.72066 9.7206C10.0931 9.34816 10.0931 8.7443 9.72066 8.37185L6.34878 4.99997L9.7206 1.62815C10.093 1.2557 10.093 0.651844 9.7206 0.279396C9.34815 -0.0930521 8.74429 -0.093052 8.37184 0.279396L5.00003 3.65121L1.62816 0.279336C1.25571 -0.093112 0.651851 -0.093112 0.279403 0.279336Z"
fill="#1874FF"
/>
</svg>
</button>
</div>
</template>
<script>
import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
import Input from '~/components/common/input/Input.vue'
import { useModal } from '~/composables/useModal'
import { useWeb3 } from '@instadapp/vue-web3'
import { injected } from '~/connectors'
import { SUPPORTED_WALLETS } from '~/constant/wallet'
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()
const { activate } = useWeb3()
const connect = async (connector) => {
await activate(connector, console.log)
close()
}
const isMetamask = computed(() => window.ethereum && window.ethereum.isMetaMask)
const wallets = computed(() => Object.keys(SUPPORTED_WALLETS).map((key) => {
const wallet = SUPPORTED_WALLETS[key]
if (wallet.connector === injected && !isMetamask.value) {
return null
}
return wallet
}).filter(Boolean))
return {
close,
connect,
wallets,
isMetamask,
injected,
}
},
})
</script>

10
components/sidebar/context/SidebarWithdraw.vue
View File

@ -79,7 +79,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import atokens from '~/constant/atokens'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
@ -87,6 +87,7 @@ import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
import { useNotification } from '~/composables/useNotification'
import Button from '~/components/Button.vue'
import { useSidebar } from '~/composables/useSidebar'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, Input, ToggleButton, ButtonCTA, Button },
@ -95,7 +96,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account, web3 } = useWeb3()
const { account, library } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
@ -109,7 +111,7 @@ export default defineComponent({
const amount = ref('')
const amountParsed = computed(() => parseSafeFloat(amount.value))
const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const rootTokenKey = computed(() => atokens[activeNetworkId.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const token = computed(() => getTokenByKey(rootTokenKey.value))
const symbol = computed(() => token.value?.symbol)
@ -126,7 +128,7 @@ export default defineComponent({
return {
amount: { message: validateAmount(amountParsed.value, balance.value), show: hasAmountValue },
accountAddress: { message: web3.value && !web3.value.utils.isAddress(accountAddress.value) ? 'Enter valid address!' : null, show: accountAddress.value.length > 0 },
accountAddress: { message: library.value && !library.value.utils.isAddress(accountAddress.value) ? 'Enter valid address!' : null, show: accountAddress.value.length > 0 },
auth: { message: validateIsLoggedIn(!!account.value), show: true },
}
})

8
components/sidebar/context/aaveV2/SidebarAaveV2Borrow.vue
View File

@ -76,7 +76,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import atokens from '~/constant/atokens'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
@ -84,6 +84,7 @@ import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
import { useNotification } from '~/composables/useNotification'
import Button from '~/components/Button.vue'
import { useSidebar } from '~/composables/useSidebar'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -92,7 +93,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
@ -117,7 +119,7 @@ export default defineComponent({
const amount = ref('')
const amountParsed = computed(() => parseSafeFloat(amount.value))
const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const rootTokenKey = computed(() => atokens[activeNetworkId.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const currentPosition = computed(() =>
displayPositions.value.find((position) => position.key === rootTokenKey.value)

8
components/sidebar/context/aaveV2/SidebarAaveV2Payback.vue
View File

@ -99,7 +99,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import atokens from '~/constant/atokens'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
@ -107,6 +107,7 @@ import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
import { useNotification } from '~/composables/useNotification'
import Button from '~/components/Button.vue'
import { useSidebar } from '~/composables/useSidebar'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -115,7 +116,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { getBalanceByKey, getBalanceRawByKey, fetchBalances } = useBalances()
@ -139,7 +141,7 @@ export default defineComponent({
const amount = ref('')
const amountParsed = computed(() => parseSafeFloat(amount.value))
const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const rootTokenKey = computed(() => atokens[activeNetworkId.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const currentPosition = computed(() =>
displayPositions.value.find((position) => position.key === rootTokenKey.value)

8
components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue
View File

@ -80,7 +80,7 @@ import { useValidation } from "~/composables/useValidation";
import { useToken } from "~/composables/useToken";
import { useParsing } from "~/composables/useParsing";
import { useMaxAmountActive } from "~/composables/useMaxAmountActive";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import atokens from "~/constant/atokens";
import ToggleButton from "~/components/common/input/ToggleButton.vue";
import { useDSA } from "~/composables/useDSA";
@ -88,6 +88,7 @@ import ButtonCTA from "~/components/common/input/ButtonCTA.vue";
import Button from "~/components/Button.vue";
import { useSidebar } from "~/composables/useSidebar";
import DSA from "dsa-connect";
import { useNetwork } from "~/composables/useNetwork";
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
props: {
@ -95,7 +96,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar();
const { networkName, account } = useWeb3();
const { account } = useWeb3();
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA();
const { getTokenByKey, valInt } = useToken();
const { getBalanceByKey, fetchBalances } = useBalances();
@ -129,7 +131,7 @@ export default defineComponent({
const amountParsed = computed(() => parseSafeFloat(amount.value));
const rootTokenKey = computed(() =>
atokens[networkName.value].rootTokens.includes(props.tokenKey)
atokens[activeNetworkId.value].rootTokens.includes(props.tokenKey)
? props.tokenKey
: "eth"
);

8
components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue
View File

@ -81,7 +81,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import atokens from '~/constant/atokens'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
@ -89,6 +89,7 @@ import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
import { useNotification } from '~/composables/useNotification'
import Button from '~/components/Button.vue'
import { useSidebar } from '~/composables/useSidebar'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -97,7 +98,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { formatNumber, formatUsdMax, formatUsd } = useFormatting()
@ -132,7 +134,7 @@ export default defineComponent({
const amount = ref('')
const amountParsed = computed(() => parseSafeFloat(amount.value))
const rootTokenKey = computed(() => atokens[networkName.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const rootTokenKey = computed(() => atokens[activeNetworkId.value].rootTokens.includes(props.tokenKey) ? props.tokenKey : 'eth')
const token = computed(() => getTokenByKey(rootTokenKey.value))
const symbol = computed(() => token.value?.symbol)

8
components/sidebar/context/compound/SidebarCompoundBorrow.vue
View File

@ -65,7 +65,7 @@ import { useValidators } from '~/composables/useValidators'
import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -76,6 +76,7 @@ import { useCompoundPosition } from '~/composables/protocols/useCompoundPosition
import ctokens from '~/constant/ctokens'
import tokenIdMapping from '~/constant/tokenIdMapping'
import { useBalances } from '~/composables/useBalances'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -84,7 +85,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { fetchBalances } = useBalances()
@ -96,7 +98,7 @@ export default defineComponent({
const tokenId = computed(() => props.tokenId)
const tokenKey = computed(() => tokenIdMapping.idToToken[tokenId.value])
const rootTokenKey = computed(() => ctokens[networkName.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const rootTokenKey = computed(() => ctokens[activeNetworkId.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const { stats, status: initialStatus, position, displayPositions, liquidation, liquidationPrice, liquidationMaxPrice, refreshPosition } = useCompoundPosition({
overridePosition: (position) => {

8
components/sidebar/context/compound/SidebarCompoundPayback.vue
View File

@ -90,7 +90,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -100,6 +100,7 @@ import { useSidebar } from '~/composables/useSidebar'
import { useCompoundPosition } from '~/composables/protocols/useCompoundPosition'
import ctokens from '~/constant/ctokens'
import tokenIdMapping from '~/constant/tokenIdMapping'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -108,7 +109,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { getBalanceByKey, getBalanceRawByKey, fetchBalances } = useBalances()
@ -119,7 +121,7 @@ export default defineComponent({
const tokenId = computed(() => props.tokenId)
const tokenKey = computed(() => tokenIdMapping.idToToken[tokenId.value])
const rootTokenKey = computed(() => ctokens[networkName.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const rootTokenKey = computed(() => ctokens[activeNetworkId.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const { status, position, displayPositions, liquidation, liquidationPrice, liquidationMaxPrice, refreshPosition } = useCompoundPosition({

8
components/sidebar/context/compound/SidebarCompoundSupply.vue
View File

@ -79,7 +79,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -88,6 +88,7 @@ import { useSidebar } from '~/composables/useSidebar'
import tokenIdMapping from '~/constant/tokenIdMapping'
import ctokens from '~/constant/ctokens'
import { useCompoundPosition } from '~/composables/protocols/useCompoundPosition'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -96,7 +97,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { getBalanceByKey, fetchBalances } = useBalances()
@ -108,7 +110,7 @@ export default defineComponent({
const tokenId = computed(() => props.tokenId)
const tokenKey = computed(() => tokenIdMapping.idToToken[tokenId.value])
const rootTokenKey = computed(() => ctokens[networkName.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const rootTokenKey = computed(() => ctokens[activeNetworkId.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const { status, position, displayPositions, liquidation, liquidationPrice, liquidationMaxPrice, refreshPosition } = useCompoundPosition({
overridePosition: (position) => {

8
components/sidebar/context/compound/SidebarCompoundWithdraw.vue
View File

@ -79,7 +79,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -90,6 +90,7 @@ import tokenIdMapping from '~/constant/tokenIdMapping'
import ctokens from '~/constant/ctokens'
import { useCompoundPosition } from '~/composables/protocols/useCompoundPosition'
import { useBalances } from '~/composables/useBalances'
import { useNetwork } from '~/composables/useNetwork'
export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
@ -98,7 +99,8 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA()
const { fetchBalances } = useBalances()
const { getTokenByKey, valInt } = useToken()
@ -110,7 +112,7 @@ export default defineComponent({
const tokenId = computed(() => props.tokenId)
const tokenKey = computed(() => tokenIdMapping.idToToken[tokenId.value])
const rootTokenKey = computed(() => ctokens[networkName.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const rootTokenKey = computed(() => ctokens[activeNetworkId.value].rootTokens.includes(tokenKey.value) ? tokenKey.value : 'eth')
const { stats, status, position, displayPositions, liquidation, liquidationPrice, liquidationMaxPrice, refreshPosition } = useCompoundPosition({

2
components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue
View File

@ -97,7 +97,7 @@ import { useValidators } from '~/composables/useValidators'
import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'

2
components/sidebar/context/liquity/SidebarLiquityTroveOpenNew.vue
View File

@ -107,7 +107,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import atokens from '~/constant/atokens'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'

4
components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue
View File

@ -95,7 +95,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -108,7 +108,7 @@ export default defineComponent({
components: { InputNumeric, ToggleButton, ButtonCTA, Button },
setup() {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { dsa } = useDSA()
const { valInt } = useToken()
const { getBalanceByKey, fetchBalances } = useBalances()

2
components/sidebar/context/liquity/SidebarLiquityTroveSupply.vue
View File

@ -84,7 +84,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'

2
components/sidebar/context/liquity/SidebarLiquityTroveWithdraw.vue
View File

@ -96,7 +96,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'

4
components/sidebar/context/makerdao/SidebarMakerdaoBorrow.vue
View File

@ -69,7 +69,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -87,7 +87,7 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { fetchBalances } = useBalances()

4
components/sidebar/context/makerdao/SidebarMakerdaoPayback.vue
View File

@ -91,7 +91,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'
@ -107,7 +107,7 @@ export default defineComponent({
},
setup(props) {
const { close } = useSidebar()
const { networkName, account } = useWeb3()
const { account } = useWeb3()
const { dsa } = useDSA()
const { getTokenByKey, valInt } = useToken()
const { getBalanceByKey, getBalanceRawByKey, fetchBalances } = useBalances()

2
components/sidebar/context/makerdao/SidebarMakerdaoSupply.vue
View File

@ -79,7 +79,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'

2
components/sidebar/context/makerdao/SidebarMakerdaoWithdraw.vue
View File

@ -77,7 +77,7 @@ import { useValidation } from '~/composables/useValidation'
import { useToken } from '~/composables/useToken'
import { useParsing } from '~/composables/useParsing'
import { useMaxAmountActive } from '~/composables/useMaxAmountActive'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/vue-web3'
import ToggleButton from '~/components/common/input/ToggleButton.vue'
import { useDSA } from '~/composables/useDSA'
import ButtonCTA from '~/components/common/input/ButtonCTA.vue'

21
composables/protocols/useAaveV2Position.ts
View File

@ -3,11 +3,11 @@ import { AbiItem } from "web3-utils";
import aaveV2ABI from "~/abis/read/aaveV2.json";
import { computed, ref, watch } from "@nuxtjs/composition-api";
import { useDSA } from "~/composables/useDSA";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import BigNumber from "bignumber.js";
import atokensV2 from "~/constant/atokensV2";
import tokens from "~/constant/tokens";
import { Network } from "~/composables/useNetwork";
import { Network, useNetwork } from "~/composables/useNetwork";
import { useBigNumber } from "~/composables/useBigNumber";
import { usePosition } from "~/composables/usePosition";
import { useToken } from "~/composables/useToken";
@ -66,7 +66,8 @@ export function useAaveV2Position(
) {
overridePosition = overridePosition || (pos => pos);
const { web3, chainId, networkName } = useWeb3();
const { library, chainId } = useWeb3();
const { activeNetworkId } = useNetwork();
const { activeAccount } = useDSA();
const { getTokenByKey, allATokensV2 } = useToken();
const { byMaxSupplyOrBorrowDesc } = useSorting()
@ -79,7 +80,7 @@ export function useAaveV2Position(
);
const fetchPosition = async () => {
if (!web3.value) {
if (!library.value) {
return;
}
@ -87,20 +88,20 @@ export function useAaveV2Position(
return;
}
const aaveResolverInstance = new web3.value.eth.Contract(
const aaveResolverInstance = new library.value.eth.Contract(
aaveV2ABI as AbiItem[],
resolver.value
);
const aaveTokensArr = atokensV2[networkName.value].allTokens.map(
a => tokens[networkName.value].getTokenByKey(a.root).address
const aaveTokensArr = atokensV2[activeNetworkId.value].allTokens.map(
a => tokens[activeNetworkId.value].getTokenByKey(a.root).address
);
const aaveRawData = await aaveResolverInstance.methods
.getPosition(activeAccount.value.address, aaveTokensArr)
.call();
const newPos = calculateAavePosition(aaveRawData, networkName.value);
const newPos = calculateAavePosition(aaveRawData, activeNetworkId.value);
return newPos;
};
@ -112,7 +113,7 @@ export function useAaveV2Position(
onEvent("protocol::aaveV2::refresh", refreshPosition);
watch(
web3,
library,
async val => {
if (val) {
refreshPosition();
@ -168,7 +169,7 @@ export function useAaveV2Position(
);
const rewardTokenPriceInUsd = computed(() => {
if (networkName.value === Network.Polygon) {
if (activeNetworkId.value === Network.Polygon) {
return ensureValue(
position.value.data.find(position => position.key === "matic")
?.priceInUsd

19
composables/protocols/useCompoundPosition.ts
View File

@ -3,10 +3,10 @@ import { AbiItem } from "web3-utils";
import compoundABI from "~/abis/read/compound.json";
import { computed, ref, watch } from "@nuxtjs/composition-api";
import { useDSA } from "~/composables/useDSA";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import BigNumber from "bignumber.js";
import tokens from "~/constant/tokens";
import { Network } from "~/composables/useNetwork";
import { Network, useNetwork } from "~/composables/useNetwork";
import { useBigNumber } from "~/composables/useBigNumber";
import { usePosition } from "~/composables/usePosition";
import { useToken } from "~/composables/useToken";
@ -63,15 +63,16 @@ export function useCompoundPosition(
) {
overridePosition = overridePosition || (pos => pos);
const { library } = useWeb3();
const { activeNetworkId } = useNetwork()
const { onEvent } = useEventBus()
const { web3, networkName } = useWeb3();
const { activeAccount } = useDSA();
const { getTokenByKey } = useToken();
const { byMaxSupplyOrBorrowDesc } = useSorting()
const resolver = computed(() => addresses.mainnet.resolver.compound);
const fetchPosition = async () => {
if (!web3.value) {
if (!library.value) {
return;
}
@ -79,12 +80,12 @@ export function useCompoundPosition(
return;
}
const resolverInstance = new web3.value.eth.Contract(
const resolverInstance = new library.value.eth.Contract(
compoundABI as AbiItem[],
resolver.value
);
const tokensArr = ctokens[networkName.value].allTokens.map(a => a.address);
const tokensArr = ctokens[activeNetworkId.value].allTokens.map(a => a.address);
const compoundRawData = await resolverInstance.methods
.getPosition(activeAccount.value.address, tokensArr)
@ -92,7 +93,7 @@ export function useCompoundPosition(
const newPos = calculateCompoundPosition(
compoundRawData,
networkName.value
activeNetworkId.value
);
return newPos;
@ -105,7 +106,7 @@ export function useCompoundPosition(
onEvent("protocol::compound::refresh", refreshPosition);
watch(
web3,
library,
async val => {
if (val) {
refreshPosition();
@ -166,7 +167,7 @@ export function useCompoundPosition(
return [];
}
return ctokens[networkName.value].allTokens
return ctokens[activeNetworkId.value].allTokens
.flatMap(ctoken => {
const token = getTokenByKey(ctoken.root);
if (!token) {

14
composables/protocols/useLiquityPosition.ts
View File

@ -2,7 +2,7 @@ import { computed, Ref, ref, watch } from "@nuxtjs/composition-api";
import { useBalances } from "../useBalances";
import { useBigNumber } from "../useBigNumber";
import { useToken } from "../useToken";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import { AbiItem } from "web3-utils";
import BigNumber from "bignumber.js";
BigNumber.config({ POW_PRECISION: 200 });
@ -50,8 +50,8 @@ export function useLiquityPosition(
collateralAmountRef: Ref = null,
debtAmountRef: Ref = null
) {
const { library } = useWeb3();
const { onEvent } = useEventBus()
const { web3 } = useWeb3();
const { activeAccount } = useDSA();
const { isZero, times, div, max, minus, plus } = useBigNumber();
@ -139,22 +139,22 @@ export function useLiquityPosition(
);
const fetchPosition = async () => {
if (!web3.value) {
if (!library.value) {
return;
}
troveTypes.value = await getTroveTypes(web3.value);
troveTypes.value = await getTroveTypes(library.value);
if (!activeAccount.value) {
return;
}
trove.value = await getTrove(activeAccount.value.address, web3.value);
trove.value = await getTrove(activeAccount.value.address, library.value);
};
async function getTrovePositionHints(collateralInWei, debtInWei) {
try {
const liquityInstance = new web3.value.eth.Contract(
const liquityInstance = new library.value.eth.Contract(
abis.resolver.liquity as AbiItem[],
addresses.mainnet.resolver.liquity
);
@ -184,7 +184,7 @@ export function useLiquityPosition(
watch(
web3,
library,
async val => {
if (val) {
fetchPosition();

12
composables/protocols/useMakerdaoPosition.ts
View File

@ -7,7 +7,7 @@ import makerVaults from "~/constant/tokens/vaults";
import { useBigNumber } from "~/composables/useBigNumber";
import { useDSA } from "~/composables/useDSA";
import { useToken } from "~/composables/useToken";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import { AbiItem } from "web3-utils";
import useEventBus from "../useEventBus";
@ -55,8 +55,8 @@ export function useMakerdaoPosition(
collateralAmountRef: Ref = null,
debtAmountRef: Ref = null
) {
const { library } = useWeb3();
const { onEvent } = useEventBus()
const { web3, chainId, networkName } = useWeb3();
const { activeAccount } = useDSA();
const { isZero, ensureValue, times, div, max, gt } = useBigNumber();
const { getTokenByKey } = useToken();
@ -119,16 +119,16 @@ export function useMakerdaoPosition(
);
const fetchPosition = async () => {
if (!web3.value) {
if (!library.value) {
return;
}
vaultTypes.value = await getVaultTypes(web3.value);
vaultTypes.value = await getVaultTypes(library.value);
if (!activeAccount.value) {
return;
}
vaults.value = await getVaults(activeAccount.value.address, web3.value);
vaults.value = await getVaults(activeAccount.value.address, library.value);
if (vaults.value.length > 0 && !vaultId.value) {
vaultId.value = vaults.value[0].id;
}
@ -137,7 +137,7 @@ export function useMakerdaoPosition(
onEvent("protocol::makerdao::refresh", fetchPosition);
watch(
web3,
library,
async val => {
if (val) {
fetchPosition();

39
composables/useBalances.ts
View File

@ -11,8 +11,8 @@ import addresses from "~/constant/addresses";
import tokens from "~/constant/tokens";
import uniPoolTokens from "~/constant/uniPoolTokens";
import { useDSA } from "./useDSA";
import { Network } from "./useNetwork";
import { useWeb3 } from "./useWeb3";
import { Network, useNetwork } from "./useNetwork";
import { useWeb3 } from "@instadapp/vue-web3";
import Web3 from "web3";
import { AbiItem } from "web3-utils";
import { useToken } from "./useToken";
@ -38,7 +38,8 @@ const prices = reactive({
export function useBalances() {
const { $axios } = useContext();
const { times, plus, ensureValue } = useBigNumber();
const { account, networkName, web3 } = useWeb3();
const { account, library } = useWeb3();
const { activeNetworkId } = useNetwork()
const { activeAccount } = useDSA();
const { getTokenByKey } = useToken();
const { by } = useSorting();
@ -54,12 +55,12 @@ export function useBalances() {
if (!account.value) return;
balances.user = {
mainnet:
networkName.value === Network.Mainnet
? await getBalances(account.value, Network.Mainnet, web3.value)
activeNetworkId.value === Network.Mainnet
? await getBalances(account.value, Network.Mainnet, library.value)
: {},
polygon:
networkName.value === Network.Polygon
? await getBalances(account.value, Network.Polygon, web3.value)
activeNetworkId.value === Network.Polygon
? await getBalances(account.value, Network.Polygon, library.value)
: {}
};
}
@ -69,19 +70,19 @@ export function useBalances() {
balances.dsa = {
mainnet:
networkName.value === Network.Mainnet
activeNetworkId.value === Network.Mainnet
? await getBalances(
activeAccount.value.address,
Network.Mainnet,
web3.value
library.value
)
: {},
polygon:
networkName.value === Network.Polygon
activeNetworkId.value === Network.Polygon
? await getBalances(
activeAccount.value.address,
Network.Polygon,
web3.value
library.value
)
: {}
};
@ -94,27 +95,27 @@ export function useBalances() {
const getBalanceByAddress = (address, network = null, type = "dsa") => {
return (
balances[type]?.[network || networkName.value][address]?.balance || "0"
balances[type]?.[network || activeNetworkId.value][address]?.balance || "0"
);
};
const getBalanceRawByKey = (tokenKey, network = null, type = "dsa") => {
return (
balances[type]?.[network || networkName.value][
balances[type]?.[network || activeNetworkId.value][
getTokenByKey(tokenKey)?.address
]?.raw || "0"
);
};
const netWorth = (address, type = "dsa") => {
const balance = getBalanceByAddress(address, networkName.value, type);
const price = ensureValue(prices[networkName.value][address]).toFixed();
const balance = getBalanceByAddress(address, activeNetworkId.value, type);
const price = ensureValue(prices[activeNetworkId.value][address]).toFixed();
return times(balance, price).toFixed();
};
const balanceTotal = computed(() =>
tokens[networkName.value].allTokens.reduce(
tokens[activeNetworkId.value].allTokens.reduce(
(totalNetWorth, token) =>
plus(totalNetWorth, netWorth(token.address)).toFixed(),
"0"
@ -122,16 +123,16 @@ export function useBalances() {
);
const getAssets = (type = "dsa") => {
return tokens[networkName.value].allTokens
return tokens[activeNetworkId.value].allTokens
.map(token => ({
...token,
balance: getBalanceByAddress(token.address, networkName.value, type),
balance: getBalanceByAddress(token.address, activeNetworkId.value, type),
netWorth: netWorth(token.address, type)
}))
.sort(by("-netWorth"));
};
watch(web3, () => {
watch(library, () => {
fetchBalances(true);
});
return {

31
composables/useDSA.ts
View File

@ -1,10 +1,11 @@
import { computed, readonly, ref, watch } from "@nuxtjs/composition-api";
import { useWeb3 } from "./useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import DSA from "dsa-connect";
import addresses from "~/constant/addresses";
import abis from "~/constant/abis";
import { AbiItem } from "web3-utils";
import { useNotification } from "./useNotification";
import { useNetwork } from "./useNetwork";
const dsa = ref<DSA>();
const accounts = ref<any[]>([]);
@ -12,18 +13,28 @@ const activeAccount = ref<any>();
const authorities = ref<string[]>();
export function useDSA() {
const { web3, chainId, networkName, account } = useWeb3();
const { active, library, chainId, account } = useWeb3();
const { activeNetworkId } = useNetwork()
const { showWarning } = useNotification();
watch(web3, () => {
if (web3.value) {
dsa.value = new DSA(web3.value, chainId.value);
watch(library, () => {
if (library.value) {
dsa.value = new DSA(library.value, chainId.value);
}
});
watch(active, () => {
console.log("here");
if (library.value) {
dsa.value = new DSA(library.value, chainId.value);
}
});
watch(chainId, () => {
if (web3.value) {
dsa.value = new DSA(web3.value, chainId.value);
if (library.value) {
dsa.value = new DSA(library.value, chainId.value);
}
});
@ -82,9 +93,9 @@ export function useDSA() {
async function fethAuthorities() {
try {
const accountsResolverInstance = new web3.value.eth.Contract(
const accountsResolverInstance = new library.value.eth.Contract(
abis.resolver.accounts as AbiItem[],
addresses[networkName.value].resolver.accounts
addresses[activeNetworkId.value].resolver.accounts
);
const rawData = await accountsResolverInstance.methods
.getAccountAuthorities(activeAccount.value.address)
@ -170,7 +181,7 @@ export function useDSA() {
createAccount,
creatingAccount,
setAccount,
web3,
library,
chainId,
authorities,
createAuthority,

35
composables/useEagerConnect.ts Normal file
View File

@ -0,0 +1,35 @@
import { useWeb3 } from "@instadapp/vue-web3";
import { injected, gnosisSafe } from "../connectors";
import { onMounted, ref, watch, watchEffect } from "@nuxtjs/composition-api";
import { useSafeAppConnection } from "./useSafeAppConnection";
export function useEagerConnect() {
const { activate, active } = useWeb3();
const { tried: triedToConnectToSafe } = useSafeAppConnection(gnosisSafe);
const tried = ref(false);
watchEffect(() => {
if (triedToConnectToSafe.value && !active.value) {
injected.isAuthorized().then((isAuthorized: boolean) => {
if (isAuthorized) {
activate(injected, undefined, true).catch(() => {
tried.value = true;
});
} else {
tried.value = true;
}
});
}
});
// if the connection worked, wait until we get confirmation of that to flip the flag
watch([tried, active], () => {
if (!tried.value && active.value) {
tried.value = true;
}
});
return {
tried
};
}

29
composables/useLink.ts
View File

@ -1,22 +1,25 @@
import { computed } from '@nuxtjs/composition-api'
import { useWeb3 } from './useWeb3'
import { computed } from "@nuxtjs/composition-api";
import { useNetwork } from "./useNetwork";
export function useLink() {
const { networkName } = useWeb3()
const { activeNetworkId } = useNetwork();
const addressDetailsLink = computed(() => {
if (networkName.value === 'polygon') {
return 'https://polygonscan.com/address'
if (activeNetworkId.value === "polygon") {
return "https://polygonscan.com/address";
}
return 'https://etherscan.io/address'
})
return "https://etherscan.io/address";
});
return { addressDetailsLink }
return { addressDetailsLink };
}
export const getEtherscanLink = (transactionHash) => `https://etherscan.io/tx/${transactionHash}`
export const getMaticLink = (transactionHash) => `https://polygonscan.com/tx/${transactionHash}`
export const getPolygonLink = (transactionHash) => `https://polygonscan.com/tx/${transactionHash}`
export const getTenderlyLink = (simulationId) =>
`https://dashboard.tenderly.co/public/InstaDApp/dsa-simulations/fork-simulation/${simulationId}?hideSidebar=true`
export const getEtherscanLink = transactionHash =>
`https://etherscan.io/tx/${transactionHash}`;
export const getMaticLink = transactionHash =>
`https://polygonscan.com/tx/${transactionHash}`;
export const getPolygonLink = transactionHash =>
`https://polygonscan.com/tx/${transactionHash}`;
export const getTenderlyLink = simulationId =>
`https://dashboard.tenderly.co/public/InstaDApp/dsa-simulations/fork-simulation/${simulationId}?hideSidebar=true`;

8
composables/useNetwork.ts
View File

@ -5,7 +5,7 @@ import MainnetSVG from "~/assets/icons/mainnet.svg?inline";
import PolygonSVG from "~/assets/icons/polygon.svg?inline";
import { useModal } from "./useModal";
import { useNotification } from "./useNotification";
import { useWeb3 } from "./useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
export enum Network {
Mainnet = "mainnet",
@ -24,11 +24,11 @@ export const activeNetwork = computed(
export function useNetwork() {
const { showWarning } = useNotification();
const { account, networkName, refreshWeb3 } = useWeb3();
const { account, chainId } = useWeb3();
const { showNetworksMismatchDialog } = useModal();
const networkMismatch = computed(
() => networkName.value != activeNetworkId.value
() => chainId.value != activeNetwork.value?.chainId
);
const checkForNetworkMismatch = () => {
@ -117,7 +117,7 @@ export function useNetwork() {
//@ts-ignore
activeNetworkId.value = localStorage.getItem("network") || "mainnet";
refreshWeb3();
// refreshWeb3()
});
return {

37
composables/useSafeAppConnection.ts Normal file
View File

@ -0,0 +1,37 @@
import { useWeb3 } from "@instadapp/vue-web3";
import { injected } from "../connectors";
import { onMounted, ref, watch } from "@nuxtjs/composition-api";
import { SafeAppConnector } from "@gnosis.pm/safe-apps-web3-react";
import { Network, useNetwork } from "./useNetwork";
export function useSafeAppConnection(connector?: SafeAppConnector) {
const { activate, active } = useWeb3();
const { activeNetworkId} = useNetwork();
const tried = ref(false);
onMounted(() => {
connector?.isSafeApp().then(async (loadedInSafe: boolean) => {
if (loadedInSafe) {
await activate(connector, undefined, true).catch(() => {
tried.value = true;
});
activeNetworkId.value = (await connector.getChainId() === 1) ? Network.Mainnet : Network.Polygon;
} else {
tried.value = true;
}
});
});
// if the connection worked, wait until we get confirmation of that to flip the flag
watch([tried, active], () => {
if (!tried.value && active.value) {
tried.value = true;
}
});
return {
tried
};
}

2
composables/useSidebar.ts
View File

@ -8,7 +8,7 @@ import {
} from "@nuxtjs/composition-api";
import { useDSA } from "./useDSA";
import { useWeb3 } from "./useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import SidebarAaveV2Supply from "~/components/sidebar/context/aaveV2/SidebarAaveV2Supply.vue";
import SidebarAaveV2Withdraw from '~/components/sidebar/context/aaveV2/SidebarAaveV2Withdraw.vue'
import SidebarAaveV2Borrow from '~/components/sidebar/context/aaveV2/SidebarAaveV2Borrow.vue'

20
composables/useStrategy.ts
View File

@ -25,13 +25,15 @@ import useEventBus from "./useEventBus";
import { useNotification } from "./useNotification";
import { useSidebar } from "./useSidebar";
import { useToken } from "./useToken";
import { useWeb3 } from "./useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import { useBigNumber } from "./useBigNumber";
import tokenIdMapping from "~/constant/tokenIdMapping";
import { useFormatting } from "./useFormatting";
import { useNetwork } from "./useNetwork";
export function useStrategy(defineStrategy: DefineStrategy) {
const { web3, networkName, account } = useWeb3();
const { library, account } = useWeb3();
const { activeNetworkId } = useNetwork()
const { dsa } = useDSA();
const { prices, balances, fetchBalances } = useBalances();
const { close } = useSidebar();
@ -114,29 +116,29 @@ export function useStrategy(defineStrategy: DefineStrategy) {
{ immediate: true }
);
watch(web3, () => strategy.setWeb3(web3.value), { immediate: true });
watch(library, () => strategy.setWeb3(library.value), { immediate: true });
watch(dsa, () => strategy.setDSA(dsa.value), { immediate: true });
watch(
prices,
() => strategy.setProps({ prices: prices[networkName.value] }),
() => strategy.setProps({ prices: prices[activeNetworkId.value] }),
{ immediate: true }
);
watch(
balances,
() => {
strategy.setProps({
dsaBalances: balances.dsa[networkName.value],
userBalances: balances.user[networkName.value]
dsaBalances: balances.dsa[activeNetworkId.value],
userBalances: balances.user[activeNetworkId.value]
});
},
{ immediate: true }
);
watch(
networkName,
activeNetworkId,
() =>
strategy.setProps({
tokens: tokens[networkName.value].allTokens,
tokenKeys: tokens[networkName.value].tokenKeys
tokens: tokens[activeNetworkId.value].allTokens,
tokenKeys: tokens[activeNetworkId.value].tokenKeys
}),
{ immediate: true }
);

30
composables/useTenderly.ts
View File

@ -1,14 +1,14 @@
import { useContext, ref, onMounted, computed } from "@nuxtjs/composition-api";
import axios from "axios";
import { activeNetwork, useNetwork } from "./useNetwork";
import { useWeb3 } from "./useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import Web3 from "web3";
import { useDSA } from "./useDSA";
const forkId = ref(null);
export function useTenderly() {
const { $config } = useContext();
const { setWeb3, refreshWeb3 } = useWeb3();
const { activate, deactivate, connector, library } = useWeb3();
const { accounts, refreshAccounts } = useDSA();
const canSimulate = computed(
() => $config.TENDERLY_FORK_PATH && $config.TENDERLY_KEY
@ -21,7 +21,7 @@ export function useTenderly() {
}
setTimeout(() => {
setForkId(window.localStorage.getItem("forkId"));
setForkId(window.localStorage.getItem("forkId"), true);
}, 1000);
});
@ -51,8 +51,9 @@ export function useTenderly() {
loading.value = false;
};
const stopSimulation = async () => {
const stopSimulation = async (silent = false) => {
loading.value = true;
try {
if (forkId.value) {
await axios({
@ -68,24 +69,29 @@ 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 = fork => {
const setForkId = async (fork, silent = false) => {
if (!fork) {
stopSimulation();
stopSimulation(silent);
return;
}
forkId.value = fork;
setWeb3(
new Web3(
new Web3.providers.HttpProvider(
`https://rpc.tenderly.co/fork/${forkId.value}`
)
library.value = new Web3(
new Web3.providers.HttpProvider(
`https://rpc.tenderly.co/fork/${forkId.value}`
)
);
window.localStorage.setItem("forkId", forkId.value);
};

8
composables/useToken.ts
View File

@ -2,18 +2,18 @@ import { computed } from "@nuxtjs/composition-api";
import atokensV2 from "~/constant/atokensV2";
import tokens from "~/constant/tokens";
import { useBigNumber } from "./useBigNumber";
import { useWeb3 } from "./useWeb3";
import { useNetwork } from "./useNetwork";
export function useToken() {
const { networkName } = useWeb3();
const { activeNetworkId } = useNetwork();
const { toBN, times, minus, div, pow } = useBigNumber();
const getTokenByKey = key =>
tokens[networkName.value].allTokens.find(
tokens[activeNetworkId.value].allTokens.find(
token => String(token.key).toLowerCase() === String(key).toLowerCase()
);
const allATokensV2 = computed(() => atokensV2[networkName.value].allTokens);
const allATokensV2 = computed(() => atokensV2[activeNetworkId.value].allTokens);
function valInt(val, decimals) {
const num = toBN(val);

148
composables/useWeb3.ts
View File

@ -1,148 +0,0 @@
import { computed, onMounted, ref } from "@nuxtjs/composition-api";
import Web3 from "web3";
import { SafeAppWeb3Modal } from "@gnosis.pm/safe-apps-web3modal";
import { Network } from "./useNetwork";
let web3Modal: SafeAppWeb3Modal;
let web3Provider: any;
let providerOptions = {};
const chains = [
{
name: "mainnet" as Network,
chainId: 1,
displayName: "Mainnet"
},
{
name: "polygon" as Network,
chainId: 137,
node: "https://rpc-mainnet.matic.network",
displayName: "Polygon"
}
];
const active = ref(false);
const chainId = ref<1 | 137>();
const networkName = computed<Network>(
() => chains.find(c => c.chainId === chainId.value)?.name || Network.Mainnet
);
const account = ref<string>();
const web3 = ref<Web3>();
export function setProviders(providers: any) {
providerOptions = providers;
}
export function useWeb3() {
onMounted(async () => {
if (web3Modal) {
return;
}
web3Modal = new SafeAppWeb3Modal({
cacheProvider: true,
providerOptions
});
//@ts-ignore
window.web3Modal = web3Modal;
if (web3Modal.cachedProvider) {
await activate();
}
if (await web3Modal.isSafeApp()) {
await activate();
}
});
const activate = async () => {
web3Provider = await web3Modal.requestProvider();
active.value = true;
if (web3Provider.selectedAddress) {
account.value = web3Provider.selectedAddress;
} else if (web3Provider.accounts && web3Provider.accounts.length) {
account.value = web3Provider.accounts[0];
}
let newWeb3 = new Web3(web3Provider);
//@ts-ignore
chainId.value = await newWeb3.eth.getChainId();
web3.value = newWeb3;
setProvider(web3Provider);
};
const deactivate = async () => {
if (
web3.value &&
web3.value.currentProvider &&
typeof web3.value.currentProvider === "object"
) {
//@ts-ignore
if (typeof web3.value.currentProvider.disconnect === "function") {
//@ts-ignore
web3.value.currentProvider.disconnect();
}
}
web3Modal.clearCachedProvider();
web3Provider = undefined;
active.value = false;
web3.value = undefined;
account.value = undefined;
chainId.value = undefined;
};
const setProvider = provider => {
if (web3Modal.cachedProvider === "walletconnect") {
provider.on("accountsChanged", () => {
location.reload();
});
// Subscribe to networkId change
provider.on("networkChanged", () => {
location.reload();
});
// Subscribe to session connection/open
provider.on("open", () => {
location.reload();
});
// Subscribe to session disconnection/close
provider.on("close", () => {
location.reload();
});
}
// Subscribe to chainId change
provider.on("chainChanged", refreshWeb3);
provider.on("accountsChanged", refreshWeb3);
};
const refreshWeb3 = async () => {
if (!web3Provider) {
return;
}
let newWeb3 = new Web3(web3Provider);
//@ts-ignore
chainId.value = await newWeb3.eth.getChainId();
web3.value = newWeb3;
};
const setWeb3 = (newWeb3: Web3) => {
web3.value = newWeb3;
};
return {
account,
chainId,
web3,
active,
activate,
deactivate,
networkName,
refreshWeb3,
setWeb3
};
}

10
composables/useWeb3Modal.ts Normal file
View File

@ -0,0 +1,10 @@
import { useModal } from "./useModal";
import Web3Modal from "~/components/modal/web3/Web3Modal.vue";
export const useWeb3Modal = () => {
const { showComponent } = useModal();
return {
open: () => showComponent(Web3Modal)
};
};

46
connectors/index.ts Normal file
View File

@ -0,0 +1,46 @@
import { setWeb3LibraryCallback } from "@instadapp/vue-web3";
import { InjectedConnector } from "@web3-react/injected-connector";
import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
import { PortisConnector } from "@web3-react/portis-connector";
import { WalletLinkConnector } from "@web3-react/walletlink-connector";
import INSTADAPP_LOGO_URL from "~/assets/logo/instadapp-logo-icon.svg?inline";
import Web3 from "web3";
import { SafeAppConnector } from "@gnosis.pm/safe-apps-web3-react/dist/connector";
setWeb3LibraryCallback(provider => new Web3(provider));
export const injected = new InjectedConnector({
supportedChainIds: [1, 137]
});
export const walletconnect = new WalletConnectConnector({
rpc: {
1: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
137: "https://rpc-mainnet.maticvigil.com"
},
supportedChainIds: [1, 137]
});
// mainnet only
export const portis = new PortisConnector({
dAppId: process.env.PORTIS_ID as string,
networks: [1]
});
export const walletlink = new WalletLinkConnector({
url: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
appName: "Instadapp",
appLogoUrl: INSTADAPP_LOGO_URL
});
let gnosisSafe = null;
if (process.client) {
gnosisSafe = new SafeAppConnector({
supportedChainIds: [1, 137]
});
}
export { gnosisSafe };

38
constant/wallet.ts Normal file
View File

@ -0,0 +1,38 @@
import { AbstractConnector } from '@web3-react/abstract-connector'
import { injected, walletconnect, portis, walletlink } from '~/connectors'
import METAMASK_ICON_URL from '~/assets/icons/metamask.svg?inline'
import WALLETCONNECT_ICON_URL from '~/assets/icons/wallet-connect-icon.svg?inline'
import PORTIS_ICON_URL from '~/assets/icons/portis.svg?inline'
import COINBASE_ICON_URL from '~/assets/icons/coinbase.svg?inline'
interface WalletInfo {
connector?: AbstractConnector;
name: string;
iconURL: string;
}
export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
METAMASK: {
connector: injected,
name: 'MetaMask',
iconURL: METAMASK_ICON_URL,
},
WALLET_CONNECT: {
connector: walletconnect,
name: 'WalletConnect',
iconURL: WALLETCONNECT_ICON_URL,
},
Portis: {
connector: portis,
name: 'Portis',
iconURL: PORTIS_ICON_URL,
},
WALLET_LINK: {
connector: walletlink,
name: 'Coinbase Wallet',
iconURL: COINBASE_ICON_URL,
},
}

21
layouts/default.vue
View File

@ -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"
@ -80,18 +88,20 @@ import { defineComponent, nextTick, onErrorCaptured, onMounted, useContext, useR
import MakerDAOIcon from '~/assets/icons/makerdao.svg?inline'
import CompoundIcon from '~/assets/icons/compound.svg?inline'
import AaveIcon from '~/assets/icons/aave.svg?inline'
import { useWeb3 } from '~/composables/useWeb3'
import { useWeb3 } from '@instadapp/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();
@ -100,6 +110,7 @@ export default defineComponent({
const { redirect } = useContext()
const { showSidebarBalances } = useSidebar()
const { showNetworksMismatchDialog } = useModal()
useEagerConnect()
const route = useRoute()
watch(isBackdropShown, () => {

6
nuxt.config.js
View File

@ -39,6 +39,10 @@ export default {
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
],
env: {
PORTIS_ID: process.env.PORTIS_ID,
INFURA_ID: process.env.INFURA_ID,
},
publicRuntimeConfig: {
INFURA_ID: process.env.INFURA_ID,
@ -50,7 +54,7 @@ export default {
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"~/plugins/v-click-outside.js",
"~/plugins/web3modal.js",
// "~/plugins/web3modal.js",
{ src: '~/plugins/v-tooltip', mode: 'client' },
{ src: '~/plugins/v-clipboard2', mode: 'client' },
],

9
package.json
View File

@ -10,14 +10,21 @@
},
"dependencies": {
"@gnosis.pm/safe-apps-sdk": "^4.2.0",
"@gnosis.pm/safe-apps-web3-react": "^0.6.2",
"@gnosis.pm/safe-apps-web3modal": "^2.0.0",
"@instadapp/vue-web3": "^0.3.0",
"@nuxtjs/axios": "^5.13.6",
"@nuxtjs/composition-api": "^0.24.7",
"@nuxtjs/composition-api": "^0.27.0",
"@portis/web3": "^4.0.5",
"@tailwindcss/forms": "^0.3.3",
"@tailwindcss/typography": "^0.4.1",
"@vueuse/core": "^5.1.4",
"@walletconnect/web3-provider": "^1.4.1",
"@web3-react/core": "^6.1.9",
"@web3-react/injected-connector": "^6.0.7",
"@web3-react/portis-connector": "^6.1.9",
"@web3-react/walletconnect-connector": "^6.2.4",
"@web3-react/walletlink-connector": "^6.2.3",
"bignumber.js": "^9.0.1",
"core-js": "^3.15.1",
"css-color-function": "^1.3.3",

2
pages/1inch.vue
View File

@ -56,7 +56,7 @@ import { useBigNumber } from "~/composables/useBigNumber";
import { useNetwork } from "~/composables/useNetwork";
import { useDSA } from "~/composables/useDSA";
import { use1InchSwap } from "~/composables/swap/use1InchSwap";
import { useWeb3 } from "~/composables/useWeb3";
import { useWeb3 } from "@instadapp/vue-web3";
import { useNotification } from "~/composables/useNotification";
import { useBalances } from "~/composables/useBalances";

2
plugins/web3modal.js
View File

@ -1,5 +1,5 @@
import WalletConnectProvider from "@walletconnect/web3-provider";
import { setProviders } from "~/composables/useWeb3"
import { setProviders } from "@instadapp/vue-web3"
import WalletLink from 'walletlink'
import Portis from '@portis/web3'
import SVGcoinbase from '~/assets/coinbase.svg'

1338
yarn.lock
View File

File diff suppressed because it is too large Load Diff