@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
138 lines (135 loc) • 6.45 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { getChainExplorerTxUrl } from '@daimo/pay-common';
import { useState, useEffect } from 'react';
import { useChainId, useSwitchChain } from 'wagmi';
import { ROUTES } from '../../../constants/routes.js';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { getSupportUrl } from '../../../utils/supportUrl.js';
import Button from '../../Common/Button/index.js';
import { PageContent, ModalContent, ModalH1, Link } from '../../Common/Modal/styles.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["SwitchingChain"] = "Switching Chain";
PayState["RequestCancelled"] = "Payment Cancelled";
PayState["RequestSuccessful"] = "Payment Successful";
PayState["RequestFailed"] = "Payment Failed";
})(PayState || (PayState = {}));
const PayWithToken = () => {
const { triggerResize, paymentState, setRoute, log, trpc } = usePayContext();
const { payWithToken, selectedTokenOption } = paymentState;
const { order } = useDaimoPay();
const [payState, setPayStateInner] = useState(PayState.RequestingPayment);
const setPayState = (state) => {
if (state === payState)
return;
setPayStateInner(state);
log(`[PayWithToken] payState: ${state}`);
trpc.nav.mutate({
action: "pay-with-token-state",
data: { state },
});
};
const [txURL, setTxURL] = useState();
const walletChainId = useChainId();
const { switchChainAsync } = useSwitchChain();
const trySwitchingChain = async (option, forceSwitch = false) => {
if (walletChainId !== option.required.token.chainId || forceSwitch) {
const resultChain = await (async () => {
try {
return await switchChainAsync({
chainId: option.required.token.chainId,
});
}
catch (e) {
console.error("Failed to switch chain", e);
return null;
}
})();
if (resultChain?.id !== option.required.token.chainId) {
return false;
}
}
return true;
};
const handleTransfer = async (option) => {
// Switch chain if necessary
setPayState(PayState.SwitchingChain);
const switchChain = await trySwitchingChain(option);
if (!switchChain) {
console.error("Switching chain failed");
setPayState(PayState.RequestCancelled);
return;
}
setPayState(PayState.RequestingPayment);
try {
const result = await payWithToken(option);
setTxURL(getChainExplorerTxUrl(option.required.token.chainId, result.txHash));
if (result.success) {
setPayState(PayState.RequestSuccessful);
setTimeout(() => {
setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
}, 200);
}
else {
setPayState(PayState.RequestFailed);
}
}
catch (e) {
if (e?.name === "ConnectorChainMismatchError") {
// Workaround for Rainbow wallet bug -- user is able to switch chain without
// the wallet updating the chain ID for wagmi.
log("Chain mismatch detected, attempting to switch and retry");
const switchSuccessful = await trySwitchingChain(option, true);
if (switchSuccessful) {
try {
const retryResult = await payWithToken(option);
setTxURL(getChainExplorerTxUrl(option.required.token.chainId, retryResult.txHash));
if (retryResult.success) {
setPayState(PayState.RequestSuccessful);
setTimeout(() => {
setRoute(ROUTES.CONFIRMATION, { event: "wait-pay-with-token" });
}, 200);
}
else {
setPayState(PayState.RequestFailed);
}
return; // Payment handled after switching chain
}
catch (retryError) {
console.error("Failed to pay with token after switching chain", retryError);
throw retryError;
}
}
}
setPayState(PayState.RequestCancelled);
console.error("Failed to pay with token", e);
}
};
useEffect(() => {
if (!selectedTokenOption)
return;
const transferTimeout = setTimeout(() => {
handleTransfer(selectedTokenOption);
}, 100);
return () => {
clearTimeout(transferTimeout);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedTokenOption]);
useEffect(() => {
triggerResize();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [payState]);
if (selectedTokenOption == null) {
return jsx(PageContent, {});
}
return (jsxs(PageContent, { children: [jsx(TokenLogoSpinner, { token: selectedTokenOption.required.token }), jsxs(ModalContent, { style: { paddingBottom: 0 }, "$preserveDisplay": true, children: [txURL ? (jsx(ModalH1, { children: jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: payState }) })) : (jsx(ModalH1, { children: payState })), jsx(PaymentBreakdown, { paymentOption: selectedTokenOption }), payState === PayState.RequestCancelled && (jsx(Button, { onClick: () => handleTransfer(selectedTokenOption), children: "Retry Payment" })), payState === PayState.RequestFailed && (jsx(Button, { onClick: () => {
window.open(getSupportUrl(order?.id?.toString() ?? "", `Pay with token${txURL ? ` ${txURL}` : ""}`), "_blank");
}, children: "Contact Support" }))] })] }));
};
export { PayWithToken as default };
//# sourceMappingURL=index.js.map