const StyledContainer = styled.div` ` const { dapps, chainId, curChain, themeMapping, onChangeDapp } = props console.log('====props', props) const markets = dapps ? Object.keys(dapps).map(key => { return { key, ...dapps[key], } }) : [] console.log('====markets', markets) State.init({ currentMarket: markets[0], isChainSupported: false }) onChangeDapp && onChangeDapp(markets[0]) const handleChangeMarket = (dapp) => { State.update({ currentMarket: dapp }) } useEffect(() => { const isSupported = chainId === curChain.chainId; 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 style={themeMapping[state?.currentMarket?.key]?.theme}> { state.currentMarket && ( <Widget src={state?.currentMarket?.dappSrc} props={{ markets, currentMarket: state.currentMarket, isDapps: true, dexConfig: state.currentMarket, defaultDex: state?.currentMarket?.name, isChainSupported: state.isChainSupported, onChangeMarket: handleChangeMarket, ...props }} /> ) } </StyledContainer> ) }