From 73c53afa4eb3851702d0f1045c191920d3498ec4 Mon Sep 17 00:00:00 2001 From: samuelea Date: Thu, 8 May 2025 16:42:23 -0400 Subject: [PATCH] made the transakApiKey field of transakConfig optional --- examples/react/src/components/Connected.tsx | 3 +- .../checkout/src/contexts/CheckoutModal.ts | 2 +- .../useCheckoutUI/useCreditCardPayment.tsx | 5 ++-- .../views/PendingCreditCardTransaction.tsx | 5 ++-- packages/connect/src/styles.ts | 28 +++++++++++++++++++ 5 files changed, 36 insertions(+), 7 deletions(-) diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index 2d6dbef31..183e36cc2 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -399,8 +399,7 @@ export const Connected = () => { creditCardProviders: [checkoutProvider || 'transak'], onRampProvider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak, transakConfig: { - contractId, - apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf' + contractId }, copyrightText: 'ⓒ2024 Sequence', onSuccess: (txnHash: string) => { diff --git a/packages/checkout/src/contexts/CheckoutModal.ts b/packages/checkout/src/contexts/CheckoutModal.ts index f7a529aed..239b22d68 100644 --- a/packages/checkout/src/contexts/CheckoutModal.ts +++ b/packages/checkout/src/contexts/CheckoutModal.ts @@ -18,7 +18,7 @@ interface OrderSummaryItem { } export interface TransakConfig { - apiKey: string + apiKey?: string contractId: string callDataOverride?: string } diff --git a/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx b/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx index 4f78fbe34..7a68b1fa3 100644 --- a/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx +++ b/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx @@ -82,7 +82,7 @@ export const useCreditCardPayment = ({ const { env } = useConfig() const disableSardineClientTokenFetch = isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'sardine' - const { transakApiUrl, sardineCheckoutUrl: sardineProxyUrl } = useEnvironmentContext() + const { transakApiUrl, sardineCheckoutUrl: sardineProxyUrl, transakApiKey: transakGlobalApiKey } = useEnvironmentContext() const network = findSupportedNetwork(chain) const error = errorCollectionInfo || errorTokenMetadata || errorCurrencyInfo const isLoading = isLoadingCollectionInfo || isLoadingTokenMetadatas || isLoadingCurrencyInfo @@ -121,6 +121,7 @@ export const useCreditCardPayment = ({ const missingCreditCardProvider = !creditCardProvider const missingTransakConfig = !transakConfig && creditCardProvider === 'transak' + const transakApiKey = transakConfig?.apiKey || transakGlobalApiKey if (missingCreditCardProvider || missingTransakConfig) { return { @@ -183,7 +184,7 @@ export const useCreditCardPayment = ({ // Note: the network name might not always line up with Transak. A conversion function might be necessary const network = findSupportedNetwork(chain) const networkName = network?.name.toLowerCase() - const transakLink = `${transakApiUrl}?apiKey=${transakConfig?.apiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}&network=${networkName}` + const transakLink = `${transakApiUrl}?apiKey=${transakApiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}&network=${networkName}` return { error: null, diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx index 2d61581d0..893d41815 100644 --- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx +++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx @@ -44,7 +44,7 @@ export const PendingCreditCardTransaction = () => { } export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => { - const { transakApiUrl } = useEnvironmentContext() + const { transakApiUrl, transakApiKey: transakGlobalApiKey } = useEnvironmentContext() const { analytics } = useAnalyticsContext() const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() @@ -80,6 +80,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen const tokenMetadata = tokensMetadata ? tokensMetadata[0] : undefined const transakConfig = settings?.creditCardCheckout?.transakConfig + const transakApiKey = transakConfig?.apiKey || transakGlobalApiKey // Transak requires the recipient address to be the proxy address // so we need to replace the recipient address with the proxy address in the calldata @@ -121,7 +122,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen // Note: the network name might not always line up with Transak. A conversion function might be necessary const networkName = network?.name.toLowerCase() - const transakLink = `${transakApiUrl}?apiKey=${transakConfig?.apiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${creditCardCheckout.currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${creditCardCheckout.recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}&network=${networkName}` + const transakLink = `${transakApiUrl}?apiKey=${transakApiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${creditCardCheckout.currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${creditCardCheckout.recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}&network=${networkName}` const isLoading = isLoadingTokenMetadata || isLoadingCollectionInfo const isError = isErrorTokenMetadata || isErrorCollectionInfo diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts index 49d0de0d8..492f9137c 100644 --- a/packages/connect/src/styles.ts +++ b/packages/connect/src/styles.ts @@ -304,6 +304,9 @@ export const styles = String.raw` .my-4 { margin-block: calc(var(--spacing) * 4); } + .mt-0 { + margin-top: calc(var(--spacing) * 0); + } .mt-0\.5 { margin-top: calc(var(--spacing) * 0.5); } @@ -379,6 +382,9 @@ export const styles = String.raw` .inline-flex { display: inline-flex; } + .table { + display: table; + } .aspect-square { aspect-ratio: 1 / 1; } @@ -472,6 +478,9 @@ export const styles = String.raw` .min-h-full { min-height: 100%; } + .w-1 { + width: calc(var(--spacing) * 1); + } .w-1\/2 { width: calc(1/2 * 100%); } @@ -568,12 +577,21 @@ export const styles = String.raw` .min-w-full { min-width: 100%; } + .flex-shrink { + flex-shrink: 1; + } .shrink-0 { flex-shrink: 0; } + .flex-grow { + flex-grow: 1; + } .grow { flex-grow: 1; } + .border-collapse { + border-collapse: collapse; + } .origin-top { transform-origin: top; } @@ -951,6 +969,9 @@ export const styles = String.raw` .pt-0 { padding-top: calc(var(--spacing) * 0); } + .pt-1 { + padding-top: calc(var(--spacing) * 1); + } .pt-1\.5 { padding-top: calc(var(--spacing) * 1.5); } @@ -1243,6 +1264,9 @@ export const styles = String.raw` .ring-border-normal { --tw-ring-color: var(--seq-color-border-normal); } + .ring-white { + --tw-ring-color: var(--color-white); + } .ring-white\/10 { --tw-ring-color: color-mix(in srgb, #fff 10%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1281,6 +1305,10 @@ export const styles = String.raw` -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); + } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));