import React from "react"; import { Card, Row, Col } from "antd"; import { useDispatch } from "react-redux"; import { addExchangePending } from "store/actions/settings/addExchangePending"; export const ExchangeItem = ({ parametrs, status }) => { const { address, currency_from, address_from, id, amount_currency, amount_token, symbol, asset, } = parametrs; const dispatch = useDispatch(); return ( <Card bodyStyle={{ padding: 0 }} style={{ marginBottom: 20, cursor: "pointer" }} onClick={() => dispatch(addExchangePending(id))} > <Row gutter="10" style={{ paddingTop: 24, paddingLeft: 24, paddingRight: 24, }} > <Col lg={{ span: 11 }} md={{ span: 12 }} sm={{ span: 24 }} xs={{ span: 24 }} style={{ paddingBottom: 24, wordBreak: "break-all" }} > <div style={{ fontSize: 12, fontWeight: 600 }}>Sending</div> <div> {amount_currency} {currency_from.toUpperCase()} to {address_from} </div> </Col> <Col lg={{ span: 10 }} md={{ span: 12 }} style={{ paddingBottom: 24, wordBreak: "break-all" }} > <div style={{ fontSize: 12, fontWeight: 600 }}>Receiving</div> <div> ≈ {amount_token} {symbol || asset.slice(0, 5) + "..."} to {address} </div> </Col> <Col lg={{ span: 3 }} md={{ span: 12 }} sm={{ span: 24 }} xs={{ span: 24 }} style={{ paddingBottom: 24 }} > <div style={{ fontSize: 12, fontWeight: 600 }}>Status</div> <div style={{ textTransform: "uppercase" }}>{status}</div> </Col> </Row> </Card> ); };