const StyledContainer = styled.div``; const StyledHeader = styled.div` display: flex; align-items: center; justify-content: space-between; `; const { isDapps, dexConfig, CHAIN_LIST, curChain, onSwitchChain, markets, currentMarket, onChangeMarket } = props; console.log('=isDapps', isDapps) let tabsArray = [ { key: "LP", label: "LP" }, { key: "MANAGED", label: "Managed" }, ]; State.init({ tab: "LP", }); return ( <StyledContainer style={dexConfig.theme}> <StyledHeader> <Widget src="bluebiu.near/widget/Lending.CardTabs" props={{ tabs: tabsArray, active: state.tab, onChange: (tab) => { State.update({ tab: tab.key, }); }, }} /> { isDapps ? ( <Widget src={"bluebiu.near/widget/Liquidity.Bridge.Markets"} props={{ markets, currentMarket, onChangeMarket }} /> ) : ( <Widget src="bluebiu.near/widget/Lending.Chains" props={{ chains: CHAIN_LIST, curChain, onSwitchChain, onChange: (tab) => { State.update({ tab: tab.key, }); }, }} /> ) } </StyledHeader> <Widget src="bluebiu.near/widget/Staking.Teahouse.Content" props={{ ...props, isDapps, tab: state.tab, }} /> </StyledContainer> );