const StyledContainer = styled.div` ` const { dapps, chainId, currentChainId } = props console.log('=====222222=====', props) const markets = Object.values(dapps) State.init({ currentMarket: markets[0], isChainSupported: false }) const handleChangeMarket = (dapp) => { State.update({ currentMarket: dapp }) } useEffect(() => { const isSupported = chainId === currentChainId; State.update({ isChainSupported: isSupported }) }, [state.currentMarket, chainId]) if (props.from === 'layer') { return ( <StyledContainer> { state.currentMarket && ( <Widget src={state?.currentMarket?.basic?.dappSrc} props={{ markets, currentMarket: state.currentMarket, isDapps: true, dexConfig: { ...state?.currentMarket?.basic, ...state?.currentMarket?.networks[chainId], }, onChangeMarket: handleChangeMarket, ...props }} /> ) } </StyledContainer> ) } else { return ( <StyledContainer> { state.currentMarket && ( <Widget src={state?.currentMarket?.dappSrc} props={{ markets, currentMarket: state.currentMarket, isDapps: true, dexConfig: state.currentMarket, isChainSupported: state.isChainSupported, onChangeMarket: handleChangeMarket, ...props }} /> ) } </StyledContainer> ) }