diff --git a/apps/web/src/composables/breakdownMetrics.ts b/apps/web/src/composables/breakdownMetrics.ts index ce0b9b8da..691550c05 100644 --- a/apps/web/src/composables/breakdownMetrics.ts +++ b/apps/web/src/composables/breakdownMetrics.ts @@ -1,13 +1,11 @@ import { readonly, ref, toValue } from 'vue' import { ethers } from 'ethers' import { Account, BreakdownAmount, BreakdownString, ContractEventsByAddress, UserWithAccountsAndOperators } from '@casimir/types' -import useContracts from '@/composables/contracts' import useEnvironment from '@/composables/environment' import useFormat from '@/composables/format' import usePrice from '@/composables/price' -const { manager } = useContracts() -const { ethereumUrl } = useEnvironment() +const { ethereumUrl, manager } = useEnvironment() const { formatNumber } = useFormat() const { getCurrentPrice } = usePrice() diff --git a/apps/web/src/composables/environment.ts b/apps/web/src/composables/environment.ts index 0b4791602..f55e36cbc 100644 --- a/apps/web/src/composables/environment.ts +++ b/apps/web/src/composables/environment.ts @@ -1,33 +1,49 @@ +import { ethers } from 'ethers' +import { CasimirManager, CasimirRegistry, CasimirViews } from '@casimir/ethereum/build/@types' +import CasimirManagerAbi from '@casimir/ethereum/build/abi/CasimirManager.json' +import CasimirRegistryAbi from '@casimir/ethereum/build/abi/CasimirRegistry.json' +import CasimirViewsAbi from '@casimir/ethereum/build/abi/CasimirViews.json' + +const domain = window.location.host +const origin = window.location.origin +const usersUrl = import.meta.env.PUBLIC_USERS_URL || 'http://localhost:4000' +const ethereumUrl = import.meta.env.PUBLIC_ETHEREUM_RPC_URL || 'http://127.0.0.1:8545' +const ledgerType = import.meta.env.PUBLIC_SPECULOS_URL ? 'speculos' : 'usb' +const speculosUrl = import.meta.env.PUBLIC_SPECULOS_URL ? 'http://localhost:5001' : '' +const cryptoCompareApiKey = import.meta.env.PUBLIC_CRYPTO_COMPARE_API_KEY || '' +const ssvNetworkAddress = import.meta.env.PUBLIC_SSV_NETWORK_ADDRESS +const ssvViewsAddress = import.meta.env.PUBLIC_SSV_VIEWS_ADDRESS +const walletConnectProjectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID + +/* Contracts */ +const managerAddress = import.meta.env.PUBLIC_MANAGER_ADDRESS +if (!managerAddress) throw new Error('No manager address provided') +const viewsAddress = import.meta.env.PUBLIC_VIEWS_ADDRESS +if (!viewsAddress) throw new Error('No views address provided') +const registryAddress = import.meta.env.PUBLIC_REGISTRY_ADDRESS +if (!registryAddress) throw new Error('No registry address provided') +const provider = new ethers.providers.JsonRpcProvider(ethereumUrl) +const manager: CasimirManager & ethers.Contract = new ethers.Contract(managerAddress, CasimirManagerAbi, provider) as CasimirManager +const views: CasimirViews & ethers.Contract = new ethers.Contract(viewsAddress, CasimirViewsAbi, provider) as CasimirViews +const registry: CasimirRegistry & ethers.Contract = new ethers.Contract(registryAddress, CasimirRegistryAbi, provider) as CasimirRegistry + export default function useEnvironment() { - const domain = window.location.host - const origin = window.location.origin - const managerAddress = import.meta.env.PUBLIC_MANAGER_ADDRESS - if (!managerAddress) throw new Error('No manager address provided') - const viewsAddress = import.meta.env.PUBLIC_VIEWS_ADDRESS - if (!viewsAddress) throw new Error('No views address provided') - const registryAddress = import.meta.env.PUBLIC_REGISTRY_ADDRESS - if (!registryAddress) throw new Error('No registry address provided') - const usersUrl = import.meta.env.PUBLIC_USERS_URL || 'http://localhost:4000' - const ethereumUrl = import.meta.env.PUBLIC_ETHEREUM_RPC_URL || 'http://127.0.0.1:8545' - const ledgerType = import.meta.env.PUBLIC_SPECULOS_URL ? 'speculos' : 'usb' - const speculosUrl = import.meta.env.PUBLIC_SPECULOS_URL ? 'http://localhost:5001' : '' - const cryptoCompareApiKey = import.meta.env.PUBLIC_CRYPTO_COMPARE_API_KEY || '' - const ssvNetworkAddress = import.meta.env.PUBLIC_SSV_NETWORK_ADDRESS - const ssvViewsAddress = import.meta.env.PUBLIC_SSV_VIEWS_ADDRESS - const walletConnectProjectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID - return { domain, cryptoCompareApiKey, ethereumUrl, + manager, + provider, origin, ledgerType, managerAddress, registryAddress, + registry, speculosUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl, + views, viewsAddress, walletConnectProjectId } diff --git a/apps/web/src/composables/operators.ts b/apps/web/src/composables/operators.ts index 2b39dd992..b8520a811 100644 --- a/apps/web/src/composables/operators.ts +++ b/apps/web/src/composables/operators.ts @@ -1,6 +1,5 @@ import { readonly, ref } from 'vue' import useEnvironment from '@/composables/environment' -import useContracts from '@/composables/contracts' import { Operator, Scanner } from '@casimir/ssv' import { Account, Pool, RegisteredOperator, RegisterOperatorWithCasimirParams, UserWithAccountsAndOperators } from '@casimir/types' import { ethers } from 'ethers' @@ -8,8 +7,7 @@ import useEthers from '@/composables/ethers' import useLedger from '@/composables/ledger' import useTrezor from '@/composables/trezor' -const { manager, registry, views } = useContracts() -const { ethereumUrl, ssvNetworkAddress, ssvViewsAddress, usersUrl } = useEnvironment() +const { ethereumUrl, manager, registry, ssvNetworkAddress, ssvViewsAddress, usersUrl, views } = useEnvironment() const { ethersProviderList, getEthersBrowserSigner } = useEthers() const { getEthersLedgerSigner } = useLedger() const { getEthersTrezorSigner } = useTrezor() @@ -183,4 +181,46 @@ export default function useOperators() { initializeComposable, registerOperatorWithCasimir, } -} \ No newline at end of file +} + +// async function _getSSVOperators(): Promise { +// const ownerAddresses = (user?.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[] +// // const ownerAddressesTest = ['0x9725Dc287005CB8F11CA628Bb769E4A4Fc8f0309'] +// try { +// // const promises = ownerAddressesTest.map((address) => _querySSVOperators(address)) +// const promises = ownerAddresses.map((address) => _querySSVOperators(address)) +// const settledPromises = await Promise.allSettled(promises) as Array> +// const operators = settledPromises +// .filter((result) => result.status === 'fulfilled') +// .map((result) => result.value) + +// const ssvOperators = (operators[0] as Array).map((operator) => { +// const { id, fee, name, owner_address, performance } = operator +// return { +// id: id.toString(), +// fee: ethers.utils.formatEther(fee), +// name, +// ownerAddress: owner_address, +// performance +// } as SSVOperator +// }) + +// return ssvOperators +// } catch (err) { +// console.error(`There was an error in _getSSVOperators function: ${JSON.stringify(err)}`) +// return [] +// } +// } + +// async function _querySSVOperators(address: string) { +// try { +// const network = 'prater' +// const url = `https://api.ssv.network/api/v4/${network}/operators/owned_by/${address}` +// const response = await fetch(url) +// const { operators } = await response.json() +// return operators +// } catch (err) { +// console.error(`There was an error in _querySSVOperators function: ${JSON.stringify(err)}`) +// return [] +// } +// } \ No newline at end of file diff --git a/apps/web/src/composables/contracts.ts b/apps/web/src/composables/staking.ts similarity index 55% rename from apps/web/src/composables/contracts.ts rename to apps/web/src/composables/staking.ts index fb06259ea..48cf25150 100644 --- a/apps/web/src/composables/contracts.ts +++ b/apps/web/src/composables/staking.ts @@ -1,30 +1,18 @@ -import { ref, readonly } from 'vue' import { ethers } from 'ethers' -import { CasimirManager, CasimirRegistry, CasimirViews } from '@casimir/ethereum/build/@types' -import CasimirManagerAbi from '@casimir/ethereum/build/abi/CasimirManager.json' -import CasimirRegistryAbi from '@casimir/ethereum/build/abi/CasimirRegistry.json' -import CasimirViewsAbi from '@casimir/ethereum/build/abi/CasimirViews.json' +import { ProviderString } from '@casimir/types' import useEnvironment from './environment' import useEthers from '@/composables/ethers' import useLedger from '@/composables/ledger' import useTrezor from '@/composables/trezor' import useWalletConnectV2 from './walletConnectV2' -import { ProviderString } from '@casimir/types' -import { Operator } from '@casimir/ssv' - -const { ethereumUrl, managerAddress, registryAddress, viewsAddress } = useEnvironment() -const provider = new ethers.providers.JsonRpcProvider(ethereumUrl) -const manager: CasimirManager & ethers.Contract = new ethers.Contract(managerAddress, CasimirManagerAbi, provider) as CasimirManager -const views: CasimirViews & ethers.Contract = new ethers.Contract(viewsAddress, CasimirViewsAbi, provider) as CasimirViews -const registry: CasimirRegistry & ethers.Contract = new ethers.Contract(registryAddress, CasimirRegistryAbi, provider) as CasimirRegistry -const operators = ref([]) +const { manager } = useEnvironment() const { ethersProviderList, getEthersBrowserSigner } = useEthers() const { getEthersLedgerSigner } = useLedger() const { getEthersTrezorSigner } = useTrezor() const { getWalletConnectSignerV2 } = useWalletConnectV2() -export default function useContracts() { +export default function useStaking() { async function deposit({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) { try { @@ -64,35 +52,6 @@ export default function useContracts() { } } - // async function _getSSVOperators(): Promise { - // const ownerAddresses = (user?.value as UserWithAccountsAndOperators).accounts.map((account: Account) => account.address) as string[] - // // const ownerAddressesTest = ['0x9725Dc287005CB8F11CA628Bb769E4A4Fc8f0309'] - // try { - // // const promises = ownerAddressesTest.map((address) => _querySSVOperators(address)) - // const promises = ownerAddresses.map((address) => _querySSVOperators(address)) - // const settledPromises = await Promise.allSettled(promises) as Array> - // const operators = settledPromises - // .filter((result) => result.status === 'fulfilled') - // .map((result) => result.value) - - // const ssvOperators = (operators[0] as Array).map((operator) => { - // const { id, fee, name, owner_address, performance } = operator - // return { - // id: id.toString(), - // fee: ethers.utils.formatEther(fee), - // name, - // ownerAddress: owner_address, - // performance - // } as SSVOperator - // }) - - // return ssvOperators - // } catch (err) { - // console.error(`There was an error in _getSSVOperators function: ${JSON.stringify(err)}`) - // return [] - // } - // } - async function getUserStake(address: string): Promise { try { const bigNumber = await manager.getUserStake(address) @@ -104,19 +63,6 @@ export default function useContracts() { } } - async function _querySSVOperators(address: string) { - try { - const network = 'prater' - const url = `https://api.ssv.network/api/v4/${network}/operators/owned_by/${address}` - const response = await fetch(url) - const { operators } = await response.json() - return operators - } catch (err) { - console.error(`There was an error in _querySSVOperators function: ${JSON.stringify(err)}`) - return [] - } - } - async function withdraw({ amount, walletProvider }: { amount: string, walletProvider: ProviderString }) { const signerCreators = { 'Browser': getEthersBrowserSigner, @@ -140,10 +86,6 @@ export default function useContracts() { } return { - manager, - operators, - registry, - views, deposit, getDepositFees, getUserStake, diff --git a/apps/web/src/composables/walletConnectV2.ts b/apps/web/src/composables/walletConnectV2.ts index d53e8834b..5e68968e0 100644 --- a/apps/web/src/composables/walletConnectV2.ts +++ b/apps/web/src/composables/walletConnectV2.ts @@ -147,10 +147,7 @@ export default function useWalletConnectV2() { } function uninitializeWalletConnect() { - cleanupFunctions.forEach((cleanup) => { - console.log('cleaning up') - cleanup() - }) + cleanupFunctions.forEach((cleanup) => cleanup()) cleanupFunctions = [] // Reset the array componentIsMounted.value = false } diff --git a/apps/web/src/pages/overview/components/Staking.vue b/apps/web/src/pages/overview/components/Staking.vue index e1d22aa0a..5ffafee07 100644 --- a/apps/web/src/pages/overview/components/Staking.vue +++ b/apps/web/src/pages/overview/components/Staking.vue @@ -2,7 +2,7 @@ import { ref, onMounted, watch } from 'vue' import { FormattedWalletOption, ProviderString } from '@casimir/types' import VueFeather from 'vue-feather' -import useContracts from '@/composables/contracts' +import useStaking from '@/composables/staking' import useEthers from '@/composables/ethers' import useFormat from '@/composables/format' import usePrice from '@/composables/price' @@ -10,7 +10,7 @@ import useUser from '@/composables/user' import TermsOfService from '@/components/TermsOfService.vue' -const { deposit, getDepositFees, getUserStake } = useContracts() +const { deposit, getDepositFees, getUserStake } = useStaking() const { getEthersBalance } = useEthers() const { convertString } = useFormat() const { getCurrentPrice } = usePrice() @@ -576,4 +576,4 @@ const handleDeposit = async () => { box-shadow: 0px 0px 0px 4px rgba(237, 235, 255, 0.26); border-radius: 4px; } -@/composables/user \ No newline at end of file +@/composables/user@/composables/staking \ No newline at end of file