const StyledContainer = styled.div` ` const { dapps, chainId } = props const markets = Object.values(dapps) State.init({ currentMarket: markets[0], isChainSupported: false }) const handleChangeMarket = (dapp) => { State.update({ currentMarket: dapp }) } useEffect(() => { const isSupported = state?.currentMarket?.networks?.hasOwnProperty(chainId); State.update({ isChainSupported: isSupported }) }, [state.currentMarket, chainId]) 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], }, isChainSupported: state.isChainSupported, onChangeMarket: handleChangeMarket, ...props }} /> ) } </StyledContainer> )