diff --git a/apps/web/src/components/ConnectWalletsFlow.vue b/apps/web/src/components/ConnectWalletsFlow.vue index fc8b31479..4f0d84658 100644 --- a/apps/web/src/components/ConnectWalletsFlow.vue +++ b/apps/web/src/components/ConnectWalletsFlow.vue @@ -3,6 +3,7 @@ import { onMounted, ref, watch, onUnmounted } from 'vue' import { CryptoAddress, Currency, LoginCredentials, ProviderString } from '@casimir/types' import VueFeather from 'vue-feather' import useAuth from '@/composables/auth' +import useEnvironment from '@/composables/environment' import useEthers from '@/composables/ethers' import useFormat from '@/composables/format' import useLedger from '@/composables/ledger' @@ -24,6 +25,7 @@ const supportedWalletProviders = [ ] as ProviderString[] const { login, loginWithSecondaryAddress } = useAuth() +const { requiredNetwork } = useEnvironment() const { ethersProviderList, getEthersAddressesWithBalances } = useEthers() const { convertString, trimAndLowercaseAddress } = useFormat() const { getLedgerAddress } = useLedger() @@ -134,8 +136,8 @@ async function selectProvider(provider: ProviderString, currency: Currency = 'ET selectedProvider.value = provider selectProviderLoading.value = true if (provider === 'WalletConnect') { - // TODO: Clarify this. - walletProviderAddresses.value = await connectWalletConnectV2('5') as CryptoAddress[] + // TODO: @@cali1 - pass in the network id dynamically + walletProviderAddresses.value = await connectWalletConnectV2(requiredNetwork) as CryptoAddress[] } else if (ethersProviderList.includes(provider)) { walletProviderAddresses.value = await getEthersAddressesWithBalances(provider) as CryptoAddress[] } else if (provider === 'Ledger') { diff --git a/apps/web/src/composables/environment.ts b/apps/web/src/composables/environment.ts index d0b62c82d..42a0beafc 100644 --- a/apps/web/src/composables/environment.ts +++ b/apps/web/src/composables/environment.ts @@ -14,6 +14,9 @@ const provider = new ethers.providers.JsonRpcProvider(ethereumUrl) const usersUrl = import.meta.env.PUBLIC_USERS_URL || 'http://localhost:4000' const walletConnectProjectId = import.meta.env.PUBLIC_WALLET_CONNECT_PROJECT_ID +/** Network */ +const requiredNetwork: '1' | '5' = origin.includes('localhost') ? '5' : origin.includes('app.dev') ? '5' : '1' + /* Addresses */ const factoryAddress = import.meta.env.PUBLIC_FACTORY_ADDRESS const factory = new ethers.Contract(factoryAddress, ICasimirFactoryAbi, provider) as CasimirFactory @@ -37,6 +40,7 @@ export default function useEnvironment() { provider, origin, ledgerType, + requiredNetwork, speculosUrl, ssvNetworkAddress, ssvViewsAddress, diff --git a/apps/web/src/composables/ethers.ts b/apps/web/src/composables/ethers.ts index 7766ae55a..94ca19f6b 100644 --- a/apps/web/src/composables/ethers.ts +++ b/apps/web/src/composables/ethers.ts @@ -4,6 +4,7 @@ import { TransactionRequest } from '@casimir/types' import { GasEstimate, LoginCredentials, MessageRequest, ProviderString } from '@casimir/types' import useEnvironment from '@/composables/environment' import useSiwe from '@/composables/siwe' +import useWallets from '@/composables/wallets' interface ethereumWindow extends Window { ethereum: any; @@ -12,6 +13,7 @@ declare const window: ethereumWindow const { ethereumUrl, provider } = useEnvironment() const { createSiweMessage, signInWithEthereum } = useSiwe() +const { installedWallets } = useWallets() export default function useEthers() { const ethersProviderList = ['BraveWallet', 'CoinbaseWallet', 'MetaMask', 'OkxWallet', 'TrustWallet'] @@ -261,9 +263,10 @@ export default function useEthers() { function getBrowserProvider(providerString: ProviderString) { try { const { ethereum } = window + const isInstalled = installedWallets.value.includes(providerString) if (providerString === 'CoinbaseWallet') { - if (!ethereum.providerMap) return alert('TrustWallet or another wallet may be interfering with CoinbaseWallet. Please disable other wallets and try again.') - if (ethereum?.providerMap.get(providerString)) return ethereum.providerMap.get(providerString) + if (!ethereum.providerMap && isInstalled) return alert('TrustWallet or another wallet may be interfering with CoinbaseWallet. Please disable other wallets and try again.') + if (ethereum?.providerMap) return ethereum.providerMap.get(providerString) else window.open('https://www.coinbase.com/wallet/downloads', '_blank') } else if (providerString === 'MetaMask') { if (ethereum.providerMap && ethereum.providerMap.get('MetaMask')) { @@ -308,6 +311,8 @@ function getTrustWallet() { for (const provider of providers) { if (provider.isTrustWallet) return provider } + } else { + window.open('https://trustwallet.com/download', '_blank') } } diff --git a/apps/web/src/pages/operators/Operator.vue b/apps/web/src/pages/operators/Operator.vue index f3fbded39..bbe544fc5 100644 --- a/apps/web/src/pages/operators/Operator.vue +++ b/apps/web/src/pages/operators/Operator.vue @@ -44,13 +44,6 @@ function toggleEigenLayerSupport() { toggleBackgroundColor.value = eigenIsToggled.value ? 'green' : '#eee' operatorType.value = eigenIsToggled.value ? 'eigen' : 'default' - console.log('nonregisteredDefaultOperators.value :>> ', nonregisteredDefaultOperators.value) - console.log('registeredDefaultOperators.value :>> ', registeredDefaultOperators.value) - - console.log('nonregisteredEigenOperators.value :>> ', nonregisteredEigenOperators.value) - console.log('registeredEigenOperators.value :>> ', registeredEigenOperators.value) - - console.log('operatorType.value :>> ', operatorType.value) // Update stakeType // stakeType.value = eigenIsToggled.value ? 'eigen' : 'default' } @@ -100,17 +93,18 @@ const operatorTableHeaders = ref( title: 'Node URL', value: 'nodeURL' }, - { - title: '', - value: 'deactivate' - }, - { - title: '', - value: 'withdraw_collateral' - }, + // { + // title: '', + // value: 'deactivate' + // }, + // { + // title: '', + // value: 'withdraw_collateral' + // }, ] ) +const allInputsValid = ref(false) const tableData = ref([]) const filteredData = ref(tableData.value) const checkedItems = ref([] as any) @@ -163,23 +157,9 @@ watch(selectedWallet, async () =>{ } }) -watch(registeredDefaultOperators, () => { - openAddOperatorModal.value = false - tableData.value = [...registeredDefaultOperators.value].map((operator: any) => { - return { - id: operator.id, - walletAddress: operator.ownerAddress, - collateral: operator.collateral + ' ETH', - poolCount: operator.poolCount, - nodeURL: operator.url - } - }) - filterData() -}) - -watch(registeredEigenOperators, () => { +watch([registeredDefaultOperators, registeredEigenOperators], () => { openAddOperatorModal.value = false - tableData.value = [...registeredEigenOperators.value].map((operator: any) => { + tableData.value = [...registeredDefaultOperators.value, ...registeredEigenOperators.value].map((operator: any) => { return { id: operator.id, walletAddress: operator.ownerAddress, @@ -201,8 +181,6 @@ watch([searchInput, selectedHeader, selectedOrientation, currentPage], ()=>{ filterData() }) - - const openWalletsModal = () => { const el = document.getElementById('connect_wallet_button') if (el) { @@ -266,8 +244,6 @@ const removeItemFromCheckedList = (item:any) => { } } -const allInputsValid = ref(false) - watch([selectedWallet, selectedOperatorID, selectedPublicNodeURL, selectedCollateral], ()=>{ if(selectedWallet.value.address !== '' && selectedOperatorID.value !== undefined && selectedPublicNodeURL.value !== '' && selectedCollateral.value !== undefined) { allInputsValid.value = true @@ -483,11 +459,15 @@ watch([loadingSessionLogin || loadingInitializeOperators], () =>{
Add Eigen Support to Your Validator (Optional)
-
+
+ COMING SOON! +
+
{ >
-
+
@@ -748,6 +728,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () =>{ @@ -1021,12 +1002,13 @@ watch([loadingSessionLogin || loadingInitializeOperators], () =>{ justify-content: flex-start; padding-left: 10px; /* space from the left edge */ position: relative; + width: 100%; /* takes full width of parent container */ height: 44px; /* adjust as needed if required */ background-color: rgb(26 12 109); - overflow: hidden; + /* overflow: hidden; */ text-align: center; color: #fff; /* or any suitable color for better visibility */ - font-size: 14px; /* adjust based on preference */ + font-size: 14px; border-radius: 8px; transition: background-color 0.3s; /* This will animate the color change */ } @@ -1036,7 +1018,40 @@ watch([loadingSessionLogin || loadingInitializeOperators], () =>{ /* cursor: not-allowed; This changes the cursor to indicate the button is not clickable */ } -.shine-effect { +.tooltip_container { + position: absolute; + bottom: 100%; /* position it above the button */ + left: 50%; /* center it horizontally */ + transform: translateX(-50%); /* shift it back by half its width to truly center it */ + padding: 8px 12px; /* space around the text */ + background-color: #000; /* or any desired tooltip color */ + color: #fff; /* text color */ + border-radius: 4px; /* round the corners */ + opacity: 0; /* starts hidden */ + transition: opacity 0.3s; /* smooth fade in */ + white-space: nowrap; /* prevents the text from wrapping */ + font-size: 12px; + pointer-events: none; /* ensures it doesn't block any interactions */ + z-index: 10; /* positions it above other elements */ +} + +.toggle_container:hover .tooltip_container { + opacity: 1; /* show on hover */ +} + +.tooltip_triangle { + position: absolute; + bottom: -5px; /* position at the bottom of the tooltip */ + left: 50%; /* center it horizontally */ + transform: translateX(-50%); /* shift it back by half its width to truly center it */ + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid #000; /* same color as the tooltip background */ +} + +/* .shine-effect { content: ''; position: absolute; top: -50%; @@ -1047,9 +1062,9 @@ watch([loadingSessionLogin || loadingInitializeOperators], () =>{ transform: rotate(30deg); pointer-events: none; animation: shine 2.5s infinite; -} +} */ -@keyframes shine { +/* @keyframes shine { 0% { left: -150%; } @@ -1059,7 +1074,7 @@ watch([loadingSessionLogin || loadingInitializeOperators], () =>{ 100% { left: 150%; } -} +} */ .toggle-button { position: absolute; top: 50%;