@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
83 lines (80 loc) • 4.28 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { ROUTES } from '../../../../constants/routes.js';
import { usePayContext } from '../../../../hooks/usePayContext.js';
import { WalletSignTransactionError, WalletSendTransactionError } from '@solana/wallet-adapter-base';
import { PageContent, ModalContent, ModalH1, Link } from '../../../Common/Modal/styles.js';
import { getChainExplorerTxUrl, solana } from '@daimo/pay-common';
import { useDaimoPay } from '../../../../hooks/useDaimoPay.js';
import { getSupportUrl } from '../../../../utils/supportUrl.js';
import Button from '../../../Common/Button/index.js';
import PaymentBreakdown from '../../../Common/PaymentBreakdown/index.js';
import TokenLogoSpinner from '../../../Spinners/TokenLogoSpinner/index.js';
var PayState;
(function (PayState) {
PayState["RequestingPayment"] = "Waiting For Payment";
PayState["RequestCancelled"] = "Payment Cancelled";
PayState["RequestFailed"] = "Payment Failed";
PayState["RequestSuccessful"] = "Payment Successful";
})(PayState || (PayState = {}));
const PayWithSolanaToken = () => {
const { triggerResize, paymentState, setRoute, log, trpc } = usePayContext();
const { selectedSolanaTokenOption, payWithSolanaToken } = paymentState;
const { order } = useDaimoPay();
const [payState, setPayStateInner] = useState(PayState.RequestingPayment);
const setPayState = (state) => {
if (state === payState)
return;
setPayStateInner(state);
log(`[PayWithSolanaToken] payState: ${state}`);
trpc.nav.mutate({
action: "pay-with-solana-token-state",
data: { state },
});
};
const [txURL, setTxURL] = useState();
const handleTransfer = async (option) => {
setPayState(PayState.RequestingPayment);
try {
const result = await payWithSolanaToken(option.required.token.token);
setTxURL(getChainExplorerTxUrl(solana.chainId, result.txHash));
if (result.success) {
setPayState(PayState.RequestSuccessful);
setTimeout(() => {
setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-solana" });
}, 200);
}
else {
setPayState(PayState.RequestFailed);
}
}
catch (error) {
console.error(error);
if (error instanceof WalletSignTransactionError ||
error instanceof WalletSendTransactionError) {
setPayState(PayState.RequestCancelled);
}
else {
setPayState(PayState.RequestFailed);
}
}
};
useEffect(() => {
if (!selectedSolanaTokenOption)
return;
// Give user time to see the UI before opening
const transferTimeout = setTimeout(() => handleTransfer(selectedSolanaTokenOption), 100);
return () => clearTimeout(transferTimeout);
}, [selectedSolanaTokenOption]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
triggerResize();
}, [payState]); // eslint-disable-line react-hooks/exhaustive-deps
if (selectedSolanaTokenOption == null) {
return jsx(PageContent, {});
}
return (jsxs(PageContent, { children: [selectedSolanaTokenOption && (jsx(TokenLogoSpinner, { token: selectedSolanaTokenOption.required.token })), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [txURL ? (jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: payState }) })) : (jsx(ModalH1, { children: payState })), jsx(PaymentBreakdown, { paymentOption: selectedSolanaTokenOption }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => handleTransfer(selectedSolanaTokenOption), children: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => {
window.open(getSupportUrl(order?.id?.toString() ?? "", `Pay with Solana token${txURL ? ` ${txURL}` : ""}`), "_blank");
}, children: "Contact Support" }))] })] }));
};
export { PayWithSolanaToken as default };
//# sourceMappingURL=index.js.map