@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
71 lines (67 loc) • 2.15 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 /* @__PURE__ */ jsxs(FeesContainer, { children: [
feesUsd > 0 && /* @__PURE__ */ jsxs(FeeRow, { children: [
/* @__PURE__ */ jsx(ModalBody, { children: "Subtotal" }),
/* @__PURE__ */ jsxs(ModalBody, { children: [
"$",
subtotalUsd.toFixed(2)
] })
] }),
/* @__PURE__ */ jsxs(FeeRow, { children: [
/* @__PURE__ */ jsx(ModalBody, { children: "Fees" }),
feesUsd === 0 ? /* @__PURE__ */ jsx(Badge, { children: "Free" }) : /* @__PURE__ */ jsxs(ModalBody, { children: [
"$",
feesUsd.toFixed(2)
] })
] }),
/* @__PURE__ */ jsxs(FeeRow, { style: { marginTop: 8 }, children: [
/* @__PURE__ */ jsx(ModalBody, { style: { fontWeight: 600 }, children: "Total" }),
/* @__PURE__ */ 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