react-icons/bi#BiError JavaScript Examples
The following examples show how to use
react-icons/bi#BiError.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: allTransactions.js From rahat-vendor with GNU Affero General Public License v3.0 | 4 votes |
|
export default function AllTransactions() {
const { recentTx } = useContext(AppContext);
const [tx, setTx] = useState([]);
useEffect(() => {
(async () => {
setTx([]);
let txs = recentTx.length ? recentTx : await DataService.listTx();
// if (limit) txs = txs.slice(0, limit);
for (let t of txs) {
if (t.type === 'issued') {
t.name = `Token sent to:`;
t.phone = `${t.to}`;
t.icon = (
<div className="icon-box bg-success">
<GiTwoCoins className="ion-icon" />
</div>
);
}
// if (t.type === 'charge') {
// t.name = `Charge to ${t.from}`;
// t.icon = (
// <div className="icon-box bg-success">
// <GiReceiveMoney className="ion-icon" />
// </div>
// );
// }
if (t.type === 'send') {
t.name = 'Send Tokens';
t.icon = (
<div className="icon-box bg-warning">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.type === 'receive') {
t.name = 'Received Tokens';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.REDEEMED_PACKAGE) {
t.name = 'NFT Redeemed';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.REDEEMED_TOKEN) {
t.name = 'Token Redeemed';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_RECIEVED) {
t.name = 'Token Recieved';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_SENT) {
t.name = 'Token Sent';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.NFT_RECIEVED) {
t.name = 'NFT Recieved';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.NFT_SENT) {
t.name = 'NFT Sent';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
// if (t.type === 'redeem') {
// t.name = 'Redeem Tokens';
// t.icon = (
// <div className="icon-box bg-primary">
// <GiMoneyStack className="ion-icon" />
// </div>
// );
// }
if (t.status === 'error' || t.status === 'fail') {
t.icon = (
<div className="icon-box bg-danger">
<BiError className="ion-icon" />
</div>
);
}
}
setTx(txs);
})();
}, [recentTx]);
return (
<>
<div id="appCapsule">
<div className="section full">
<div className="appHeader" style={{ backgroundColor: '#2b7ec1' }}>
<div className="left">
<button className=" btn btn-text headerButton ">
<Link to="/" className="headerButton goBack">
<io5.IoChevronBackOutline className="ion-icon" style={{ color: 'white' }} />
</Link>
</button>
</div>
<div className="pageTitle" style={{ color: 'white' }}>
Transactions
</div>
<div className="right">
<Link to="/" className="headerButton">
<io5.IoHomeOutline className="ion-icon" style={{ color: 'white' }} />
</Link>
</div>
</div>
<div className="section pt-2">
<ul className="listview image-listview flush">
{tx.length > 0 &&
tx.map(tx => {
return (
<li key={tx.hash}>
<Link to={`/tx/${tx.hash}`} className="item">
{tx.icon}
<div className="in">
<div>
<div className="mb-05">
<strong>{tx.name}</strong>
<br />
<strong>{tx.phone}</strong>
</div>
<div className="text-xsmall">
<Moment date={tx.timestamp} format="YYYY/MM/DD hh:mm a" />
</div>
</div>
{tx.type === 'send' ? (
<span className="text-danger">{tx.amount}</span>
) : (
<span className="text-success">{tx.amount}</span>
)}
</div>
</Link>
</li>
);
})}
</ul>
</div>
</div>
</div>
</>
);
}
Example #2
| Source File: details.js From rahat-vendor with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Main(props) {
const hash = props.match.params.hash;
const [tx, setTx] = useState({});
const [tokenDetails, setTokenDetails] = useState(null);
const reorganizeTxn = useCallback(txn => {
if (!txn) return txn;
let t = txn;
if (t.type === 'issued') {
t.name = `Token sent to:`;
t.phone = `${t.to}`;
t.icon = (
<div className="iconbox bg-success">
<GiTwoCoins className="ion-icon" />
</div>
);
}
if (t.type === 'send') {
t.name = 'Send Tokens';
t.icon = (
<div className="iconbox bg-warning">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.type === 'receive') {
t.name = 'Received Tokens';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.REDEEMED_PACKAGE) {
t.name = 'NFT Redeemed';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.REDEEMED_TOKEN) {
t.name = 'Token Redeemed';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_RECIEVED) {
t.name = 'Token Recieved';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_SENT) {
t.name = 'Token Sent';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.NFT_RECIEVED) {
t.name = 'NFT Recieved';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.NFT_SENT) {
t.name = 'NFT Sent';
t.icon = (
<div className="iconbox bg-primary">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.status === 'error' || t.status === 'fail') {
t.icon = (
<div className="iconbox bg-danger">
<BiError className="ion-icon" />
</div>
);
}
t.hash = `${t.hash.slice(0, 10)}....`;
t.to = `${t.to.slice(0, 10)}....`;
return t;
}, []);
const getTokenDetails = useCallback(async tokenId => {
if (!tokenId) return;
const details = await DataService.getNft(tokenId);
if (!details) return;
setTokenDetails(details);
}, []);
const getTxnDetails = useCallback(async () => {
if (!hash) return;
let tnx = await DataService.getTx(hash);
if (!tnx) return;
tnx = reorganizeTxn(tnx);
await getTokenDetails(tnx?.tokenId);
setTx(tnx);
}, [hash, reorganizeTxn, getTokenDetails]);
useEffect(() => {
let isMounted = true;
if (isMounted) getTxnDetails();
return () => {
isMounted = false;
setTx({});
};
}, [getTxnDetails]);
return (
<>
<AppHeader currentMenu="Tx Details" />
<div id="appCapsule" className="full-height">
<div className="section mt-2 mb-2">
<div className="listed-detail mt-3">
<div className="icon-wrapper">{tx.icon}</div>
<h3 className="text-center mt-2">{tx.name}</h3>
</div>
<ul className="listview flush transparent simple-listview no-space mt-3">
<li>
<strong>Status</strong>
<span
className={tx.status === 'success' ? 'text-success' : 'text-danger'}
style={{ textTransform: 'capitalize' }}
>
{tx.status}
</span>
</li>
<li>
<strong>To</strong>
<span>{tx.to}</span>
</li>
<li>
<strong>Tx Hash</strong>
<span style={{ overflow: 'hidden' }}>{tx.hash}</span>
</li>
<li>
<strong>Date</strong>
<span>
<Moment date={tx.timestamp} format="YYYY/MM/DD hh:mm a" />
</span>
</li>
<li>
<strong>Amount</strong>
<h3 className="m-0">{tx.amount}</h3>
</li>
{tokenDetails && (
<>
<li>
<strong>Token Name</strong>
<h3 className="m-0">{tokenDetails?.name}</h3>
</li>
<li>
<strong>Token Description</strong>
<h3 className="m-0">{tokenDetails?.description}</h3>
</li>
<li>
<strong>Token Image</strong>
<img
src={tokenDetails?.imageUri || '/assets/img/brand/icon-72.png'}
width="75"
height="75"
alt="asset"
className="image"
/>
</li>
</>
)}
</ul>
</div>
</div>
</>
);
}
Example #3
| Source File: list.js From rahat-vendor with GNU Affero General Public License v3.0 | 4 votes |
|
TxList = ({ limit, transactions = [] }) => {
const [tx, setTx] = useState([]);
useEffect(() => {
(async () => {
let txs = transactions.length ? transactions : await DataService.listTx();
if (limit) txs = txs.slice(0, limit);
for (let t of txs) {
if (t.type === 'issued') {
t.name = `Token sent to:`;
t.phone = `${t.to}`;
t.icon = (
<div className="icon-box bg-success">
<GiTwoCoins className="ion-icon" />
</div>
);
}
// if (t.type === 'charge') {
// t.name = `Charge to ${t.from}`;
// t.icon = (
// <div className="icon-box bg-success">
// <GiReceiveMoney className="ion-icon" />
// </div>
// );
// }
if (t.type === 'send') {
t.name = 'Send Tokens';
t.icon = (
<div className="icon-box bg-warning">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.type === 'receive') {
t.name = 'Received Tokens';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_RECIEVED) {
t.name = 'Token Recieved';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_TRANSFER) {
t.name = 'Token Transferred';
t.icon = (
<div className="icon-box bg-primary">
<AiOutlineSend className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.PAKCAGE_TRANSFER) {
t.name = 'Package Transferred';
t.icon = (
<div className="icon-box bg-primary">
<AiOutlineSend className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.TOKEN_SENT) {
t.name = 'Token Sent';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.NFT_RECIEVED) {
t.name = 'NFT Recieved';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.REDEEMED_PACKAGE) {
t.name = 'NFT Redeemed';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.REDEEMED_TOKEN) {
t.name = 'Token Redeemed';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowDownOutline className="ion-icon" />
</div>
);
}
if (t.type === CHARGE_TYPES.NFT_SENT) {
t.name = 'NFT Sent';
t.icon = (
<div className="icon-box bg-primary">
<IoArrowForwardOutline className="ion-icon" />
</div>
);
}
// if (t.type === 'redeem') {
// t.name = 'Redeem Tokens';
// t.icon = (
// <div className="icon-box bg-primary">
// <GiMoneyStack className="ion-icon" />
// </div>
// );
// }
if (t.status === 'error' || t.status === 'fail') {
t.icon = (
<div className="icon-box bg-danger">
<BiError className="ion-icon" />
</div>
);
}
}
setTx(txs);
})();
}, [transactions, limit]);
return (
<>
<ul className="listview image-listview flush">
{tx.length > 0 &&
tx.map(tx => {
return (
<li key={tx.hash}>
<Link to={`/tx/${tx.hash}`} className="item">
{tx.icon}
<div className="in">
<div>
<div className="mb-05">
<strong>{tx.name}</strong>
</div>
<div className="text-xsmall">
<Moment date={tx.timestamp} format="YYYY/MM/DD hh:mm a" />
</div>
</div>
{tx.type === 'send' ? (
<span className="text-danger">{tx.amount}</span>
) : (
<span className="text-success">{tx.amount}</span>
)}
</div>
</Link>
</li>
);
})}
</ul>
</>
);
}
