const TOKENS = Storage.privateGet("tokens") || []; const Dialog = styled.div` position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: none; &.display { display: block; } `; const Overlay = styled.div` width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); position: absolute; z-index: 9999; display: flex; justify-content: center; align-items: center; `; const Content = styled.div` width: 460px; border-radius: 16px; border: 1px solid #2c334b; background-color: #181a27; `; const Header = styled.div` display: flex; justify-content: space-between; align-items: center; color: #fff; padding: 30px 30px 0px 30px; `; const InputWarpper = styled.div` height: 46px; border-bottom: 1px solid #332c4b; padding: 14px 30px 6px; `; const Input = styled.input` font-size: 16px; color: #fff; font-weight: 500; width: 100%; background-color: transparent; outline: none; border: none; `; const Title = styled.div` font-size: 18px; font-weight: 500; `; const CurrencyList = styled.div` padding: 0px 30px 20px; max-height: calc(80vh - 120px); `; State.init({ tokens: TOKENS, }); const handleSearch = (e) => { State.update({ tokens: e.data ? TOKENS.filter( (token) => token.address === e.data || token.name.toLowerCase().includes(e.data?.toLowerCase()) ) : TOKENS, }); }; return ( <Dialog className={props.display ? "display" : ""}> <Overlay> <Content> <Header> <Title>Select a token</Title> <Widget src="bluebiu.near/widget/Base.BaseCloseIcon" props={{ onClose: props.onClose }} /> </Header> <InputWarpper> <Input placeholder="Search name or paste address" onChange={handleSearch} /> </InputWarpper> <CurrencyList> {state.tokens.map((currency) => ( <Widget src="bluebiu.near/widget/Base.BaseCurrencyRow" props={{ selectedTokenAddress: props.selectedTokenAddress, currency, display: props.display, onClick: () => { props.onSelect?.(currency); props.onClose(); }, }} key={currency.address} /> ))} </CurrencyList> </Content> </Overlay> </Dialog> );