@imtbl/checkout-widgets 2.13.1-alpha.1 → 2.13.1-alpha.3

package/dist/types/widgets/sale/types.d.ts

@@ -47,7 +47,12 @@ export type SignOrderInput = {
 };
 export type SignOrderError = {
     type: SaleErrorTypes;
-    data?: Record<string, string>;
+    data?: Record<string, string> | {
+        vendorError: {
+            code: string;
+            message: string;
+        };
+    };
 };
 export type ExecutedTransaction = {
     method: string;
@@ -69,7 +74,8 @@ export declare enum SaleErrorTypes {
     WALLET_REJECTED = "WALLET_REJECTED",
     WALLET_REJECTED_NO_FUNDS = "WALLET_REJECTED_NO_FUNDS",
     WALLET_POPUP_BLOCKED = "WALLET_POPUP_BLOCKED",
-    FUNDING_ROUTE_EXECUTE_ERROR = "FUNDING_ROUTE_EXECUTE_ERROR"
+    FUNDING_ROUTE_EXECUTE_ERROR = "FUNDING_ROUTE_EXECUTE_ERROR",
+    SALE_AUTHORIZATION_REJECTED = "SALE_AUTHORIZATION_REJECTED"
 }
 export type OrderQuoteCurrency = {
     base: boolean;

package/dist/types/widgets/sale/views/SaleErrorView.d.ts

@@ -5,6 +5,7 @@ type SaleErrorViewProps = {
     errorType: SaleErrorTypes | undefined;
     transactionHash?: string;
     blockExplorerLink?: string;
+    vendorMessage?: string;
 };
-export declare function SaleErrorView({ biomeTheme, transactionHash, blockExplorerLink, errorType, }: SaleErrorViewProps): null;
+export declare function SaleErrorView({ biomeTheme, transactionHash, blockExplorerLink, errorType, vendorMessage, }: SaleErrorViewProps): null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imtbl/checkout-widgets",
-  "version": "2.13.1-alpha.1",
+  "version": "2.13.1-alpha.3",
   "browserslist": {
     "production": [
       ">0.2%",
@@ -18,12 +18,12 @@
     "@biom3/design-tokens": "^0.4.5",
     "@biom3/react": "^0.29.4",
     "@emotion/react": "^11.11.3",
-    "@imtbl/bridge-sdk": "2.13.1-alpha.1",
-    "@imtbl/checkout-sdk": "2.13.1-alpha.1",
-    "@imtbl/config": "2.13.1-alpha.1",
-    "@imtbl/cryptofiat": "2.13.1-alpha.1",
-    "@imtbl/dex-sdk": "2.13.1-alpha.1",
-    "@imtbl/passport": "2.13.1-alpha.1",
+    "@imtbl/bridge-sdk": "2.13.1-alpha.3",
+    "@imtbl/checkout-sdk": "2.13.1-alpha.3",
+    "@imtbl/config": "2.13.1-alpha.3",
+    "@imtbl/cryptofiat": "2.13.1-alpha.3",
+    "@imtbl/dex-sdk": "2.13.1-alpha.3",
+    "@imtbl/passport": "2.13.1-alpha.3",
     "@imtbl/react-analytics": "0.3.4-alpha",
     "@rive-app/react-canvas-lite": "^4.9.0",
     "@walletconnect/ethereum-provider": "^2.11.1",

package/src/context/view-context/SaleViewContextTypes.ts

@@ -43,6 +43,7 @@ interface SaleFailView extends ViewType {
   data?: {
     errorType: SaleErrorTypes;
     transactionHash?: string;
+    vendorError?: { code: string; message?: string };
     [key: string]: unknown;
   };
 }

package/src/locales/en.json

@@ -499,6 +499,10 @@
           "primaryAction": "Try again",
           "secondaryAction": "Cancel"
         },
+        "SALE_AUTHORIZATION_REJECTED": {
+          "description": "Sorry, your purchase could not be completed.",
+          "secondaryAction": "Dismiss"
+        },
         "DEFAULT_ERROR": {
           "description": "Sorry, something went wrong. Please try again.",
           "primaryAction": "Try again",

package/src/locales/ja.json

@@ -459,6 +459,10 @@
           "primaryAction": "もう一度試す",
           "secondaryAction": "キャンセル"
         },
+        "SALE_AUTHORIZATION_REJECTED": {
+          "description": "申し訳ございません。購入を完了できませんでした。",
+          "secondaryAction": "閉じる"
+        },
         "DEFAULT_ERROR": {
           "description": "申し訳ありませんが、何かがうまくいかなかったようです。もう一度お試しください。",
           "primaryAction": "もう一度試す",

package/src/locales/ko.json

@@ -456,6 +456,10 @@
           "primaryAction": "다시 시도",
           "secondaryAction": "취소"
         },
+        "SALE_AUTHORIZATION_REJECTED": {
+          "description": "죄송합니다, 구매를 완료할 수 없습니다.",
+          "secondaryAction": "닫기"
+        },
         "DEFAULT_ERROR": {
           "description": "죄송합니다, 문제가 발생했습니다. 다시 시도하세요.",
           "primaryAction": "다시 시도",

package/src/locales/zh.json

@@ -456,6 +456,10 @@
           "primaryAction": "再试一次",
           "secondaryAction": "取消"
         },
+        "SALE_AUTHORIZATION_REJECTED": {
+          "description": "抱歉，您的购买无法完成。",
+          "secondaryAction": "关闭"
+        },
         "DEFAULT_ERROR": {
           "description": "抱歉，出了点问题。请再试一次。",
           "primaryAction": "再试一次",

package/src/widgets/sale/SaleWidget.tsx

@@ -159,6 +159,7 @@ export default function SaleWidget(props: SaleWidgetProps) {
               biomeTheme={biomeTheme}
               errorType={viewState.view.data?.errorType}
               transactionHash={viewState.view.data?.transactionHash}
+              vendorMessage={viewState.view.data?.vendorError?.message}
               blockExplorerLink={BlockExplorerService.getTransactionLink(
                 chainId.current as ChainId,
                 viewState.view.data?.transactionHash!,

package/src/widgets/sale/context/SaleContextProvider.tsx

@@ -87,7 +87,7 @@ type SaleContextValues = SaleContextProps & {
     paymentMethod?: SalePaymentTypes | undefined,
     data?: Record<string, unknown>
   ) => void;
-  goToErrorView: (type: SaleErrorTypes, data?: Record<string, string>) => void;
+  goToErrorView: (type: SaleErrorTypes, data?: Record<string, unknown>) => void;
   goToSuccessView: (data?: Record<string, unknown>) => void;
   fundingRoutes: FundingRoute[];
   disabledPaymentTypes: SalePaymentTypes[];
@@ -284,14 +284,24 @@ export function SaleContextProvider(props: {
   );
 
   const goToErrorView = useCallback(
-    (errorType: SaleErrorTypes, data: Record<string, string> = {}) => {
+    (
+      errorType: SaleErrorTypes,
+      data: Record<string, unknown> & { vendorError?: { code: string; message?: string } } = {},
+    ) => {
       errorRetries.current += 1;
       if (errorRetries.current > MAX_ERROR_RETRIES) {
         errorRetries.current = 0;
         setPaymentMethod(undefined);
       }
 
-      trackError('commerce', 'saleError', new Error(errorType), data);
+      const { vendorError, ...errorData } = data;
+      trackError('commerce', 'saleError', new Error(errorType), {
+        ...errorData,
+        ...(vendorError ? { vendorCode: vendorError.code, vendorMessage: vendorError.message || '' } : {}),
+      });
+
+      // eslint-disable-next-line no-console
+      console.error('[IMTBL]: Sale error', errorType, data);
 
       viewDispatch({
         payload: {

package/src/widgets/sale/functions/fetchFundingBalances.ts

@@ -47,7 +47,6 @@ export const fetchFundingBalances = async (
     onFundingBalance,
     getAmountByCurrency,
     getIsGasless,
-    onComplete,
     onFundingRequirement,
     onUpdateGasFees,
   } = params;
@@ -85,10 +84,6 @@ export const fetchFundingBalances = async (
         ? undefined
         : getGasEstimate();
 
-      const handleOnComplete = () => {
-        onComplete?.(pushToFoundBalances([]));
-      };
-
       const handleOnFundingRoute = (route) => {
         updateFundingBalances(getAlternativeFundingSteps([route], environment));
       };
@@ -99,9 +94,6 @@ export const fetchFundingBalances = async (
         transactionOrGasAmount,
         routingOptions: { bridge: false, onRamp: false, swap: true },
         fundingRouteFullAmount: true,
-        onComplete: isBaseCurrency(currency.name)
-          ? handleOnComplete
-          : undefined,
         onFundingRoute: isBaseCurrency(currency.name)
           ? handleOnFundingRoute
           : undefined,

package/src/widgets/sale/hooks/useFundingBalances.ts

@@ -25,6 +25,7 @@ export const useFundingBalances = () => {
   >([]);
   const [loadingBalances, setLoadingBalances] = useState(false);
   const [gasFees, setGasFees] = useState<TokenBalance | undefined>();
+  const [fundingBalancesError, setFundingBalancesError] = useState<Error | null>(null);
 
   const queryFundingBalances = () => {
     if (
@@ -40,6 +41,7 @@ export const useFundingBalances = () => {
     (async () => {
       fetching.current = true;
       setLoadingBalances(true);
+      setFundingBalancesError(null);
       try {
         const results = await fetchFundingBalances({
           provider,
@@ -55,9 +57,6 @@ export const useFundingBalances = () => {
           onFundingBalance: (foundBalances) => {
             setFundingBalances([...foundBalances]);
           },
-          onComplete: () => {
-            setLoadingBalances(false);
-          },
           onFundingRequirement: (requirement) => {
             setTransactionRequirement(requirement);
           },
@@ -67,9 +66,10 @@ export const useFundingBalances = () => {
         });
 
         setFundingBalancesResult(results);
-      } catch {
-        setLoadingBalances(false);
+      } catch (err) {
+        setFundingBalancesError(err instanceof Error ? err : new Error(String(err)));
       } finally {
+        setLoadingBalances(false);
         fetching.current = false;
       }
     })();
@@ -79,6 +79,7 @@ export const useFundingBalances = () => {
     fundingBalances,
     loadingBalances,
     fundingBalancesResult,
+    fundingBalancesError,
     transactionRequirement,
     gasFees,
     queryFundingBalances,

package/src/widgets/sale/hooks/useQuoteOrder.ts

@@ -26,9 +26,38 @@ export const defaultOrderQuote: OrderQuote = {
 
 export type ConfigError = {
   type: SaleErrorTypes;
-  data?: Record<string, string>;
+  data?: Record<string, unknown>;
 };
 
+/**
+ * Validates the order quote response before use. Ensures:
+ * - Currencies are non-empty (empty usually indicates wrong project config or endpoint).
+ * - Products are non-empty.
+ * - Every sale item has a matching product in the quote (no missing productIds).
+ */
+function validateOrderQuote(
+  config: OrderQuote,
+  items: SaleItem[],
+): { valid: true } | { valid: false; reason: string } {
+  if (!config.currencies?.length) {
+    return { valid: false, reason: 'Quote returned no currencies' };
+  }
+
+  const productIds = Object.keys(config.products || {});
+  if (productIds.length === 0) {
+    return { valid: false, reason: 'Quote returned no products' };
+  }
+
+  const missing = items.filter((item) => !config.products![item.productId]);
+  if (missing.length > 0) {
+    return {
+      valid: false,
+      reason: `Quote missing products for: ${missing.map((m) => m.productId).join(', ')}`,
+    };
+  }
+  return { valid: true };
+}
+
 export const useQuoteOrder = ({
   items,
   environment,
@@ -53,6 +82,13 @@ export const useQuoteOrder = ({
     });
   };
 
+  const setQuoteValidationError = (reason: string) => {
+    setOrderQuoteError({
+      type: SaleErrorTypes.SERVICE_BREAKDOWN,
+      data: { reason: 'Invalid order quote response', error: reason },
+    });
+  };
+
   useEffect(() => {
     // Set request params
     if (!items?.length || !provider) return;
@@ -93,6 +129,16 @@ export const useQuoteOrder = ({
         });
 
         if (!response.ok) {
+          if (response.status === 400) {
+            const { code, message } = await response.json();
+            setOrderQuoteError({
+              type: SaleErrorTypes.SALE_AUTHORIZATION_REJECTED,
+              data: {
+                vendorError: { code: code || '', message: message || undefined },
+              },
+            });
+            return;
+          }
           throw new Error(`${response.status} - ${response.statusText}`);
         }
 
@@ -100,6 +146,13 @@ export const useQuoteOrder = ({
           await response.json(),
           preferredCurrency,
         );
+
+        const validation = validateOrderQuote(config, items);
+        if (!validation.valid) {
+          setQuoteValidationError(validation.reason);
+          return;
+        }
+
         setOrderQuote(config);
       } catch (error) {
         setError(errorToString(error));
@@ -107,7 +160,7 @@ export const useQuoteOrder = ({
         fetching.current = false;
       }
     })();
-  }, [environment, environmentId, queryParams]);
+  }, [environment, environmentId, queryParams, items]);
 
   useEffect(() => {
     // Set default currency

package/src/widgets/sale/hooks/useSignOrder.ts

@@ -291,11 +291,17 @@ export const useSignOrder = (input: SignOrderInput) => {
 
         const { ok, status } = response;
         if (!ok) {
-          const { code } = (await response.json()) as SignApiError;
+          const { code, message } = (await response.json()) as SignApiError;
           let errorType: SaleErrorTypes;
+          let errorData: { code: string; message: string } | undefined;
+
           switch (status) {
             case 400:
-              errorType = SaleErrorTypes.SERVICE_BREAKDOWN;
+              errorType = SaleErrorTypes.SALE_AUTHORIZATION_REJECTED;
+              errorData = {
+                code,
+                message,
+              };
               break;
             case 404:
               if (code === 'insufficient_stock') {
@@ -312,7 +318,7 @@ export const useSignOrder = (input: SignOrderInput) => {
               throw new Error('Unknown error');
           }
 
-          setSignError({ type: errorType });
+          setSignError({ type: errorType, data: errorData });
           return undefined;
         }
 

package/src/widgets/sale/types.ts

@@ -59,7 +59,9 @@ export type SignOrderInput = {
 
 export type SignOrderError = {
   type: SaleErrorTypes;
-  data?: Record<string, string>;
+  data?:
+  | Record<string, string>
+  | { vendorError: { code: string; message: string } };
 };
 
 export type ExecutedTransaction = {
@@ -85,6 +87,7 @@ export enum SaleErrorTypes {
   WALLET_REJECTED_NO_FUNDS = 'WALLET_REJECTED_NO_FUNDS',
   WALLET_POPUP_BLOCKED = 'WALLET_POPUP_BLOCKED',
   FUNDING_ROUTE_EXECUTE_ERROR = 'FUNDING_ROUTE_EXECUTE_ERROR',
+  SALE_AUTHORIZATION_REJECTED = 'SALE_AUTHORIZATION_REJECTED',
 }
 
 export type OrderQuoteCurrency = {

package/src/widgets/sale/views/OrderSummary.tsx

@@ -185,11 +185,21 @@ export function OrderSummary({ subView }: OrderSummaryProps) {
     fundingBalances,
     loadingBalances,
     fundingBalancesResult,
+    fundingBalancesError,
     transactionRequirement,
     gasFees,
     queryFundingBalances,
   } = useFundingBalances();
 
+  // If funding balances failed to load, transition to error view
+  useEffect(() => {
+    if (!fundingBalancesError) return;
+    closeHandover();
+    goToErrorView(SaleErrorTypes.SERVICE_BREAKDOWN, {
+      error: errorToString(fundingBalancesError),
+    });
+  }, [fundingBalancesError, goToErrorView, closeHandover]);
+
   // Initialise funding balances
   useEffect(() => {
     if (subView !== OrderSummarySubViews.INIT || !fromTokenAddress) return;

package/src/widgets/sale/views/SaleErrorView.tsx

@@ -36,6 +36,7 @@ type SaleErrorViewProps = {
   errorType: SaleErrorTypes | undefined;
   transactionHash?: string;
   blockExplorerLink?: string;
+  vendorMessage?: string;
 };
 
 export function SaleErrorView({
@@ -43,6 +44,7 @@ export function SaleErrorView({
   transactionHash,
   blockExplorerLink,
   errorType,
+  vendorMessage,
 }: SaleErrorViewProps) {
   const { t } = useTranslation();
   const {
@@ -198,6 +200,13 @@ export function SaleErrorView({
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.INFORMATION,
     },
+    [SaleErrorTypes.SALE_AUTHORIZATION_REJECTED]: {
+      onSecondaryActionClick: closeWidget,
+      statusType: StatusType.INFORMATION,
+      statusIconStyles: {
+        fill: biomeTheme.color.status.fatal.dim,
+      },
+    },
     [SaleErrorTypes.INVALID_PARAMETERS]: {
       onSecondaryActionClick: closeWidget,
       statusType: StatusType.ALERT,
@@ -222,11 +231,13 @@ export function SaleErrorView({
       ? t(`views.SALE_FAIL.errors.${currentErrorType}.secondaryAction`)
       : t(`views.SALE_FAIL.errors.${SaleErrorTypes.DEFAULT}.secondaryAction`);
 
+    const useVendorMessage = currentErrorType === SaleErrorTypes.SALE_AUTHORIZATION_REJECTED
+      && vendorMessage;
+
     return {
       headingText: t('views.PAYMENT_METHODS.handover.error.heading'),
-      subheadingText: t(
-        `views.SALE_FAIL.errors.${currentErrorType}.description`,
-      ),
+      subheadingText: useVendorMessage
+        || t(`views.SALE_FAIL.errors.${currentErrorType}.description`),
       primaryButtonText: t(
         `views.SALE_FAIL.errors.${currentErrorType}.primaryAction`,
       ),