@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
93 lines (90 loc) • 3.97 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';
const PayWithSolanaToken = () => {
const { triggerResize, paymentState, setRoute, log, trpc } = usePayContext();
const { selectedSolanaTokenOption, payWithSolanaToken } = paymentState;
const { order } = useDaimoPay();
const [payState, setPayStateInner] = useState(
"Waiting For Payment" /* RequestingPayment */
);
const setPayState = (state) => {
setPayStateInner(state);
log(`[PAY SOLANA TOKEN] payState: ${state}`);
trpc.nav.mutate({
action: "pay-with-solana-token-state",
data: { state }
});
};
const [txURL, setTxURL] = useState();
const handleTransfer = async (option) => {
setPayState("Waiting For Payment" /* RequestingPayment */);
try {
const result = await payWithSolanaToken(option.required.token.token);
setTxURL(getChainExplorerTxUrl(solana.chainId, result.txHash));
if (result.success) {
setPayState("Payment Successful" /* RequestSuccessful */);
setTimeout(() => {
setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-solana" });
}, 200);
} else {
setPayState("Payment Failed" /* RequestFailed */);
}
} catch (error) {
console.error(error);
if (error instanceof WalletSignTransactionError || error instanceof WalletSendTransactionError) {
setPayState("Payment Cancelled" /* RequestCancelled */);
} else {
setPayState("Payment Failed" /* RequestFailed */);
}
}
};
useEffect(() => {
if (!selectedSolanaTokenOption) return;
const transferTimeout = setTimeout(
() => handleTransfer(selectedSolanaTokenOption),
100
);
return () => clearTimeout(transferTimeout);
}, [selectedSolanaTokenOption]);
useEffect(() => {
triggerResize();
}, [payState]);
if (selectedSolanaTokenOption == null) {
return /* @__PURE__ */ jsx(PageContent, {});
}
return /* @__PURE__ */ jsxs(PageContent, { children: [
selectedSolanaTokenOption && /* @__PURE__ */ jsx(TokenLogoSpinner, { token: selectedSolanaTokenOption.required.token }),
/* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [
txURL ? /* @__PURE__ */ jsx(ModalH1, { children: /* @__PURE__ */ jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: payState }) }) : /* @__PURE__ */ jsx(ModalH1, { children: payState }),
/* @__PURE__ */ jsx(PaymentBreakdown, { paymentOption: selectedSolanaTokenOption }),
payState === "Payment Cancelled" /* RequestCancelled */ && /* @__PURE__ */ jsx(Button, { onClick: () => handleTransfer(selectedSolanaTokenOption), children: "Retry Payment" }),
payState === "Payment Failed" /* RequestFailed */ && /* @__PURE__ */ 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