const StyledLayerCurrentChain = styled.div` display: flex; align-items: center; gap: 8px; padding: 0 35px 0 12px; height: 40px; border-radius: 30px; border: 1px solid #000; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); cursor: pointer; img { width: 26px; } span { color: #000; font-family: "Inter Tight"; font-size: 16px; font-style: normal; font-weight: 500; line-height: normal; } svg { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); } `; const StyledLayerChainsWrap = styled.div` display: none; z-index: 2; position: absolute; left: -11px; bottom: 0; padding-top: 8px; transform: translateY(100%); `; const StyledLayerChains = styled.div` padding: 5px 0; width: 228px; border-radius: 12px; border: 1px solid #f0f0f0; background: #fff; box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.3); `; const StyledLayerChainsContainer = styled.div` position: relative; &:hover { ${StyledLayerChainsWrap} { display: flex; flex-direction: column; } } `; const StyledLayerChain = styled.div` display: flex; align-items: center; gap: 9px; position: relative; height: 45px; padding-left: 20px; cursor: pointer; &:hover { background: #f2f2f2; backdrop-filter: blur(10px); } img { width: 20px; } span { color: #000; font-family: "Inter Tight"; font-size: 16px; font-style: normal; font-weight: 500; line-height: 100%; /* 16px */ } svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } `; const { from, chains, chainIndex, onChangeChainIndex } = props; const currentChain = chains[chainIndex]; return ( <StyledLayerChainsContainer> <StyledLayerCurrentChain> <img src={currentChain?.logo} alt={currentChain?.name} /> <span>{currentChain?.name}</span> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none" > <path d="M1 1L6 5L11 1" stroke="black" stroke-width="2" stroke-linecap="round" /> </svg> </StyledLayerCurrentChain> <StyledLayerChainsWrap> <StyledLayerChains> {chains && chains.map((chain, index) => { return ( <StyledLayerChain key={index} className={index === chainIndex ? "active" : ""} onClick={() => onChangeChainIndex(index)} > <img src={chain.logo} alt={chain.name} /> <span>{chain?.name}</span> {currentChain.id === chain.id && ( <svg xmlns="http://www.w3.org/2000/svg" width="13" height="10" viewBox="0 0 13 10" fill="none" > <path d="M1 3.72727L5 8L12 1" stroke="black" stroke-width="2" /> </svg> )} </StyledLayerChain> ); })} </StyledLayerChains> </StyledLayerChainsWrap> </StyledLayerChainsContainer> );