@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
49 lines (45 loc) • 1.85 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import defaultTheme from '../../../constants/defaultTheme.js';
import styled from '../../../styles/styled/index.js';
import { ModalBody } from '../Modal/styles.js';
const PaymentBreakdown = ({ paymentOption }) => {
const subtotalUsd = paymentOption.required.usd;
const feesUsd = paymentOption.fees.usd;
const totalUsd = subtotalUsd + feesUsd;
return (jsxs(FeesContainer, { children: [feesUsd > 0 && (jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Subtotal" }), jsxs(ModalBody, { children: ["$", subtotalUsd.toFixed(2)] })] })), jsxs(FeeRow, { children: [jsx(ModalBody, { children: "Fees" }), feesUsd === 0 ? (jsx(Badge, { children: "Free" })) : (jsxs(ModalBody, { children: ["$", feesUsd.toFixed(2)] }))] }), jsxs(FeeRow, { style: { marginTop: 8 }, children: [jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }), jsxs(ModalBody, { style: { fontWeight: 600 }, children: ["$", totalUsd.toFixed(2)] })] })] }));
};
const FeesContainer = styled.div `
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 4px;
margin: 16px 0;
@media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
& ${ModalBody} {
margin: 0 !important;
max-width: 100% !important;
text-align: left !important;
}
}
`;
const FeeRow = styled.div `
display: flex;
justify-content: space-between;
align-items: center;
width: 50%;
`;
const Badge = styled.span `
display: inline-block;
padding: 3px 8px;
border-radius: var(--ck-primary-button-border-radius);
font-size: 14px;
font-weight: 400;
background: var(
--ck-secondary-button-background,
var(--ck-body-background-secondary)
);
color: var(--ck-body-color-muted);
`;
export { PaymentBreakdown as default };
//# sourceMappingURL=index.js.map