diff --git a/src/constants/chains.ts b/src/constants/chains.ts index da0ea501..28ae92f8 100755 --- a/src/constants/chains.ts +++ b/src/constants/chains.ts @@ -9,6 +9,7 @@ import { import { ArrayOneOrMore, ChainExtended } from '@/types' import { CHAINS_IMG_PATH } from './images' import { RpcUrl } from '@/services/useink/chains/data/types' +import { WalletConnectionEvents } from '@/domain' export const DEFAULT_DECIMALS = 12 export const MAX_CUSTOM_NAME_LENGTH = 10 @@ -46,6 +47,11 @@ export const updateChain = (chains: ChainExtended[], chain: ChainExtended) => { chain => chain.id === OPTION_FOR_CUSTOM_NETWORK ) chains[chainIndex] = chain + + document.dispatchEvent( + new CustomEvent(WalletConnectionEvents.customChainNameChanged) + ) + return chains } diff --git a/src/domain/DomainEvents.ts b/src/domain/DomainEvents.ts index 8a488a1c..3223c876 100644 --- a/src/domain/DomainEvents.ts +++ b/src/domain/DomainEvents.ts @@ -1,7 +1,8 @@ export const enum WalletConnectionEvents { walletConnectInit = 'walletConnectInit', changeAccountAddress = 'changeAccountAddress', - networkChanged = 'networkChanged' + networkChanged = 'networkChanged', + customChainNameChanged = 'customChainNameChanged' } export const enum UserContractEvents { diff --git a/src/hooks/userContracts/useListUserContracts.ts b/src/hooks/userContracts/useListUserContracts.ts index 50e2662d..7a8525cd 100644 --- a/src/hooks/userContracts/useListUserContracts.ts +++ b/src/hooks/userContracts/useListUserContracts.ts @@ -1,11 +1,7 @@ import { useCallback, useEffect, useState } from 'react' import { useLocalDbContext } from '@/context/LocalDbContext' -import { - UserContractDetails, - WalletConnectionEvents, - UserContractEvents -} from '@/domain' +import { UserContractDetails, UserContractEvents } from '@/domain' import { useListDeployments } from '../deployments/useListDeployments' import { useMultiEventListener } from '@/hooks/useMultipleEventListener' import { ChainId } from '@/services/useink/chains' diff --git a/src/view/HomeView/ContractsTableWidget/index.tsx b/src/view/HomeView/ContractsTableWidget/index.tsx index 8e1d88ef..36e2fc15 100644 --- a/src/view/HomeView/ContractsTableWidget/index.tsx +++ b/src/view/HomeView/ContractsTableWidget/index.tsx @@ -5,6 +5,9 @@ import { useListUserContracts } from '@/hooks/userContracts/useListUserContracts import { Box, Typography, Paper } from '@mui/material' import NetworkBadge from '@/view/components/NetworkBadge' import { useDownloadMetadata } from '@/view/components/ContractsTable/useDownloadMetadata' +import { WalletConnectionEvents } from '@/domain' +import { useMultiEventListener } from '@/hooks/useMultipleEventListener' +import { useCallback, useEffect, useState } from 'react' export function ContractsTableWidget() { const { accountConnected, networkConnected } = useNetworkAccountsContext() @@ -12,7 +15,8 @@ export function ContractsTableWidget() { accountConnected?.address, networkConnected ) - const { logo, name: networkName } = getChain(networkConnected) + const [chain, setChain] = useState(getChain(networkConnected)) + const { userContractItems: items, onDownloadSource } = useDownloadMetadata(userContracts) @@ -21,6 +25,19 @@ export function ContractsTableWidget() { userContractItems = items.filter(item => item.hidden === false) } + const updateChain = useCallback(() => { + const chain = getChain(networkConnected) + setChain(chain) + }, [networkConnected]) + + useEffect(() => { + updateChain() + }, [updateChain]) + + useMultiEventListener([WalletConnectionEvents.customChainNameChanged], () => { + updateChain() + }) + return ( <> {accountConnected && userContracts && ( @@ -38,10 +55,10 @@ export function ContractsTableWidget() { on