const StyledContainer = styled.div` padding-top: 34px; width: 1244px; margin: 0 auto; `; const StyledHeader = styled.div` display: flex; align-items: center; justify-content: space-between; `; State.init({ tab: "Stake", chainId: -1, // loading: true, // isSupport: false, }); const { CHAIN_LIST, curChain, dexConfig, wethAddress, multicallAddress, multicall, prices, onSwitchChain, switchingChain, addAction, toast, chainId, nativeCurrency, account, chainIdNotSupport, isChainSupported, } = props; const { type } = dexConfig; useEffect(() => { State.update({ loading: !chainIdNotSupport, }); }, [chainIdNotSupport]); const tabsArray = [ { key: "Stake", label: "Stake" }, { key: "Unstake", label: "Unstake" }, ]; 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, }); }, }} /> <Widget src="bluebiu.near/widget/Lending.Chains" props={{ chains: CHAIN_LIST, curChain, onSwitchChain, onChange: (tab) => { State.update({ tab: tab.key, }); }, }} /> </StyledHeader> {state.loading ? ( <Widget src="bluebiu.near/widget/Lending.Spinner" /> ) : ( <Widget src="bluebiu.near/widget/Staking.Ledgity.Content" props={{ ...props, tab: state.tab, ...state, onSuccess: () => { State.update({ loading: true, }); }, }} /> )} <Widget src={dexConfig.data} props={{ update: state.loading, account, wethAddress, multicallAddress, multicall, prices, ...dexConfig, onLoad: (data) => { console.log("DATA_onLoad:", data); State.update({ loading: false, timestamp: Date.now(), ...data, }); }, }} /> {!isChainSupported && ( <Widget src="bluebiu.near/widget/Swap.ChainWarnigBox" props={{ chain: curChain, onSwitchChain: onSwitchChain, switchingChain: switchingChain, theme: dexConfig.theme?.button, }} /> )} </StyledContainer> );