@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
73 lines (70 loc) • 2.75 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { ROUTES } from '../../../constants/routes.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { PageContent, ModalContent, ModalH1 } from '../../Common/Modal/styles.js';
import { DaimoPayOrderMode, DepositAddressPaymentOptions } from '@daimo/pay-common';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import { OptionsList } from '../../Common/OptionsList/index.js';
import { OrderHeader } from '../../Common/OrderHeader/index.js';
import SelectAnotherMethodButton from '../../Common/SelectAnotherMethodButton/index.js';
const SelectDepositAddressChain = () => {
const { setRoute, paymentState } = usePayContext();
const pay = useDaimoPay();
const { order } = pay;
const {
isDepositFlow,
setSelectedDepositAddressOption,
depositAddressOptions,
untronAvailable
} = paymentState;
return /* @__PURE__ */ jsxs(PageContent, { children: [
/* @__PURE__ */ jsx(OrderHeader, { minified: true }),
!depositAddressOptions.loading && depositAddressOptions.options?.length === 0 && /* @__PURE__ */ jsxs(
ModalContent,
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingTop: 16,
paddingBottom: 16
},
children: [
/* @__PURE__ */ jsx(ModalH1, { children: "Chains unavailable." }),
/* @__PURE__ */ jsx(SelectAnotherMethodButton, {})
]
}
),
/* @__PURE__ */ jsx(
OptionsList,
{
requiredSkeletons: 4,
isLoading: depositAddressOptions.loading,
options: (depositAddressOptions.options ?? []).map((option) => {
const disabled = (
// Disable if usd below min
option.minimumUsd > 0 && order?.mode === DaimoPayOrderMode.HYDRATED && order.usdValue < option.minimumUsd || // Disable if TRON_USDT unavailable
option.id === DepositAddressPaymentOptions.TRON_USDT && untronAvailable === false
);
return {
id: option.id,
title: option.id,
icons: [option.logoURI],
disabled,
onClick: () => {
setSelectedDepositAddressOption(option);
const meta = { event: "click-option", option: option.id };
if (isDepositFlow) {
setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);
} else {
setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, meta);
}
}
};
}).sort((a, b) => Number(a.disabled) - Number(b.disabled))
}
)
] });
};
export { SelectDepositAddressChain as default };
//# sourceMappingURL=index.js.map