Files
edc54514f1 OP Superchain explorer: aggregated views (#3040)
* refactor widgets on home page

* coming soon placeholder component

* top accounts page

* contract data

* address ERC-20 tokens list

* chain filter for address ERC-20 tokens

* token select for address detailed view

* address details fields

* tokens table

* stats widgets on home page

* chain indicators graph on the home page

* quick search

* search results all tab

* tabs and chain select on search results page

* search results mobile view

* add contract info to search and address details

* add text filter for tokens and search improvements

* load all results inside tab on search results page

* token balance info

* add support for domains in the full search

* Multichain explorer

Resolves #2989

* add envs validator for multichain

* add some tests

* fix search bar on search results page on mobile

* home stats fixes

* fix ts

* optimize amount of queries on address page

* add more contract info on address page

* add enter key hint to search input

* fix tests

* fix test

* update bg.primary css-variable on color theme change

* sitemap for multichain

* txs page: render first tab if blob tab is not available on the chain

* filter out in active chains from chain select on address page and user ops page

* add chain icon to advanced filter table

* fix tooltip on entity with shield

* fix ts

* show contract implementations

* fixes

* add chain icon to all lists

* refactor zetachain chains config type

* use chain id as primary option instead of chain slug

* refactor chain config type for multichain and essential dapps

* refactor chain icon and chain select

* rename chain-slug in chain_slug

* change default radius of chain icon and update screenshots for multichain tests

* change conditions for "isContract" and "isVerified"

* test fixes

* make shield optional for external chain entities

* add chain icon to approvals lists

* add stats page for multichain

* add chain postfix to chart .png and .csv assets name

* fix tests

* sync verified contracts language filter and fix loading state in the search results page

* fix sol2uml diagram and csv export

* regcred from helmfile for review

* link fixes

* fix state for unknown address

* fix incorrect chain in the context during spa transition to the same route on different chain

* add links to stats widgets

* add mixpanel to L2 demo values

* show message of on-demand contract verification

* fix screenshots

---------

Co-authored-by: Nick Zenchik <[email protected]>
2025-11-18 09:44:22 +01:00

75 lines
1.9 KiB
TypeScript

import { useRouter } from 'next/router';
import React from 'react';
import type { ClusterChainConfig } from 'types/multichain';
import multichainConfig from 'configs/multichain';
import getChainIdFromSlug from 'lib/multichain/getChainIdFromSlug';
import getQueryParamString from 'lib/router/getQueryParamString';
interface MultichainProviderProps {
children: React.ReactNode;
chainId?: string;
}
export interface TMultichainContext {
chain: ClusterChainConfig;
}
export const MultichainContext = React.createContext<TMultichainContext | null>(null);
export function MultichainProvider({ children, chainId: chainIdProp }: MultichainProviderProps) {
const router = useRouter();
const chainSlugQueryParam = router.pathname.includes('chain_slug') ? getQueryParamString(router.query.chain_slug) : undefined;
const chainIdQueryParam = router.query.chain_id ? getQueryParamString(router.query.chain_id) : undefined;
const [ chainId, setChainId ] = React.useState<string | undefined>(
chainIdProp ??
chainIdQueryParam ??
(chainSlugQueryParam ? getChainIdFromSlug(chainSlugQueryParam) : undefined),
);
React.useEffect(() => {
if (chainIdProp) {
setChainId(chainIdProp);
}
}, [ chainIdProp ]);
const chain = React.useMemo(() => {
const config = multichainConfig();
if (!config) {
return;
}
if (!chainId) {
return;
}
return config.chains.find((chain) => chain.id === chainId);
}, [ chainId ]);
const value = React.useMemo(() => {
if (!chain) {
return null;
}
return {
chain,
};
}, [ chain ]);
return (
<MultichainContext.Provider value={ value }>
{ children }
</MultichainContext.Provider>
);
}
export function useMultichainContext(disabled: boolean = !multichainConfig) {
const context = React.useContext(MultichainContext);
if (context === undefined || disabled) {
return null;
}
return context;
}