diff --git a/packages/interface/src/Pay.tsx b/packages/interface/src/Pay.tsx index 8622bea..3acec7e 100644 --- a/packages/interface/src/Pay.tsx +++ b/packages/interface/src/Pay.tsx @@ -772,32 +772,20 @@ const PayInner: React.FC = ({ checkoutSettings }) => { } , [checkoutVerbLowercase, checkoutVerbCapitalized, checkoutNounLowercase, startTransition, isConnected, checkoutSettings.note, checkoutSettings.proposedPayment.logicalAssetTickers.primary, checkoutSettings.proposedPayment.paymentMode.payWhatYouWant, checkoutSettings.requireInIframeOrErrorWith, proposedPaymentWithFixedAmount, receiverAddress, receiverAddressBlockExplorerLink, receiverEnsName, payWhatYouWantSelectedSuggestedAmount, setPayWhatYouWantSelectedSuggestedAmount, setRawPayWhatYouWantAmountFromInput, payWhatYouWantLogicalAssetTickerFromInput, payWhatYouWantLogicalAssetTickerSelectionInputElement, derivedPaymentWithFixedAmount, exchangeRates, proposedStrategies, strategies, bestStrategy, otherStrategies, canSelectNewStrategy, checkoutReadinessState, makeExecuteTokenTransferButton, showFullReceiverAddress, status?.activeTokenTransfer, statusIsSuccess, selectingPaymentMethod]); - const acceptedTokensAndChainsElement: false | JSX.Element = useMemo(() => !statusIsSuccess // NB here we must check statusIsSuccess because the sender may have no payment options after successful payment (eg. if they paid using their only payment method and it was exhausted by the payment) and so `checkoutReadinessState === 'senderHasNoPaymentOptions'` may be true after paying - && checkoutReadinessState === 'senderHasNoPaymentOptions' &&
+ const acceptedTokensAndChainsElement: false | JSX.Element = useMemo(() => !statusIsSuccess &&
{(() => { const allStrategiesTokenTickers: string[] = [... new Set(proposedStrategies.map(ps => ps.proposedTokenTransfer.token.ticker))]; const allStrategiesChainIds: number[] = [... new Set(proposedStrategies.map(ps => ps.proposedTokenTransfer.token.chainId))]; return <> -
Tokens accepted
-
{allStrategiesTokenTickers.join(", ")}
-
Chains accepted
-
{allStrategiesChainIds.map(getSupportedChainName).join(", ")}
+
Ways to pay
+
+ Tokens: {allStrategiesTokenTickers.join(", ")}
+ {/* on */} + Chains: {allStrategiesChainIds.map(getSupportedChainName).join(", ")} +
; })()} -
, [statusIsSuccess, checkoutReadinessState, proposedStrategies]); - - // TODO update acceptedTokensAndChainsSummaryElement to stop using "Instantly..." language and start using a summary of tokens and chains similar to acceptedTokensAndChainsElement but in a single payment method box - const acceptedTokensAndChainsSummaryElement: false | JSX.Element = useMemo(() => !statusIsSuccess // NB here we must check statusIsSuccess because success status may be preserved even if the sender disconnects their wallet after successful payment, so `!isConnected` may be true after successful payment - && !isConnected &&
- {(() => { - const allProposedStrategiesTokenTickers: string[] = [... new Set(proposedStrategies.map(ps => ps.proposedTokenTransfer.token.ticker))]; - const allProposedStrategiesChainIds: number[] = [... new Set(proposedStrategies.map(ps => ps.proposedTokenTransfer.token.chainId))]; - return <> -
{checkoutVerbCapitalized} with
-
{allProposedStrategiesTokenTickers.length} token{allProposedStrategiesTokenTickers.length > 1 ? 's' : ''} across {allProposedStrategiesChainIds.length} chain{allProposedStrategiesChainIds.length > 1 ? 's' : ''} accepted by this {checkoutNounLowercase}
- ; - })()} -
, [checkoutVerbCapitalized, checkoutNounLowercase, isConnected, statusIsSuccess, proposedStrategies]); +
, [statusIsSuccess, proposedStrategies]); const selectPaymentMethodScreen: false | JSX.Element = useMemo(() => bestStrategy !== undefined && otherStrategies !== undefined && otherStrategies.length > 0 &&
Select a {checkoutNounLowercase} method
@@ -942,7 +930,6 @@ const PayInner: React.FC = ({ checkoutSettings }) => {
{paymentScreen} {acceptedTokensAndChainsElement} - {acceptedTokensAndChainsSummaryElement} {selectPaymentMethodScreen} {paymentSuccessfulScreen}