const arrowDown = ( <svg width="17" height="9" viewBox="0 0 17 9" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M1 1L8.5 7.5L16 1" stroke="#13DDC8" stroke-width="2" stroke-linecap="round" /> </svg> ); const ArrowDownWrapper = styled.div` position: absolute; right: 16px; top: 8px; `; const Wrapper = styled.div` .seperator { background: #2c4a4b; border: 1px solid #2c4a4b; height: 1px; } .frcs { display: flex; align-items: center; justify-content: start; } .frcc { display: flex; align-items: center; justify-content: center; } .frcb { display: flex; align-items: center; justify-content: space-between; } .value-wrapper { color: #4f7375; font-family: Gantari; font-size: 14px; font-weight: 500; line-height: 17px; letter-spacing: 0em; .balance-value { text-decoration: underline; cursor: pointer; } padding-top: 10px; } .token-field { cursor: pointer; background: linear-gradient(0deg, #1f3a3e, #1f3a3e), linear-gradient(0deg, #2c4a4b, #2c4a4b); border: 1px solid #2c4a4b; border-radius: 23px; position: relative; width: 159px; padding: 6px; .token-icon { height: 31px; width: 31px; border-radius: 100%; } .token-symbol { font-family: Gantari; padding-left: 8px; font-size: 18px; font-weight: 500; line-height: 22px; letter-spacing: 0em; text-align: left; color: white; } } `; const Seperator = styled.div` background: #2c4a4b; border: 1px solid #2c4a4b; height: 1px; width: 327px; position: absolute; bottom: 0px; `; const Input = styled.input` background: none; color: #fff; text-align: left; border: none; outline: none; font-style: normal; font-weight: 600; font-size: 26px; line-height: 19px; padding: 8px 0px 8px 8px; width: 100%; ::placeholder { color: #40435c; } `; const { config, curToken, amount, onChangeAmount, readOnly, onLoadBalance, balance, sender, onTokenSelect, } = props; State.init({ showModal: false, }); const handleShow = () => { State.update({ showModal: true, }); }; return ( <Wrapper> <div className="frcb"> <div className="frcs" style={{ position: "relative", }} > <Input type="text" placeholder="0" value={amount} onChange={(e) => onChangeAmount(e.target.value)} readOnly={!!readOnly} /> {!readOnly && <Seperator></Seperator>} </div> <div className="token-field" onClick={handleShow}> <div className="frcs"> <img src={curToken.icon} class="token-icon" style={{ width: "32px", }} /> <div class="token-symbol">{curToken.symbol}</div> <ArrowDownWrapper>{arrowDown}</ArrowDownWrapper> </div> </div> </div> <div className="frcb value-wrapper"> <div>≈ $-</div> <div> Balance: {" "} <span className="balance-value" onClick={() => onChangeAmount(balance)}> {balance} </span> </div> </div> <Widget src="bluebiu.near/widget/Mantle.getBalance" props={{ address: curToken.address, onLoad: onLoadBalance, isNative: currency.symbol === config.NATIVE_TOKEN_SYMBOL, }} ></Widget> {state.showModal && ( <Widget src="bluebiu.near/widget/Mantle.TokenList" props={{ config, sender, curToken: curToken, onClose: () => { State.update({ showModal: false, }); }, onClick: onTokenSelect, hidden: !state.showModal, }} /> )} </Wrapper> );