Merge branch 'main' into GPR-477-fix-on-ramp-params-not-taken

packages/checkout/widgets-lib/src/locales/en.json

@@ -60,7 +60,7 @@
     "ERROR_VIEW": {
       "heading": "Something's gone wrong",
       "body": [
-        "You can try again or contact",
+        "You can try again or contagact",
         "support",
         "for help."
       ],
@@ -285,9 +285,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "Insufficient coin balance. Pay with card to proceed, or",
-        "captionEnd": "and try again.",
-        "captionCTA": "add coins"
+        "caption": "Insufficient coin balance. Pay with card to proceed, or <cta>add coins</cta> and try again.",
+        "gasCaption": "Insufficient IMX for gas fees. Pay with card to proceed, or <cta>add coins</cta> and try again."
       },
       "loading": {
         "ready1": "Collecting your order",

packages/checkout/widgets-lib/src/locales/ja.json

@@ -288,9 +288,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "コインの残高が不足しています。カードで支払うか、",
-        "captionEnd": "して再試行してください。",
-        "captionCTA": "コインを追加"
+        "caption": "コインの残高が不足しています。カードで支払うか、<cta>コインを追加</cta>して再試行してください。",
+        "gasCaption": "ガス料金に足りない IMX コイン。カードで支払うか、<cta>コインを追加</cta>して再試行してください。"
       },
       "loading": {
         "ready1": "注文を受け取り中",

packages/checkout/widgets-lib/src/locales/ko.json

@@ -285,9 +285,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "코인 잔액이 부족합니다. 카드로 결제하거나",
-        "captionEnd": "하고 다시 시도해 보세요.",
-        "captionCTA": "코인 추가"
+        "caption": "코인 잔액이 부족합니다. 카드로 결제하거나 <cta>코인 추가</cta>하고 다시 시도해 보세요.",
+        "gasCaption": "가스를 위한 IMX가 부족합니다. 카드로 결제하거나 <cta>코인 추가</cta>하고 다시 시도해 보세요."
       },
       "loading": {
         "ready1": "주문 수집 중",

packages/checkout/widgets-lib/src/locales/zh.json

@@ -285,9 +285,8 @@
         }
       },
       "insufficientCoinsBanner": {
-        "caption": "硬币余额不足。请使用卡支付，或",
-        "captionEnd": "再试一次。",
-        "captionCTA": "添加硬币"
+        "caption": "硬币余额不足。请使用卡支付，或 <cta>添加硬币</cta> 再试一次。",
+        "gasCaption": "IMX 币不足以支付汽油费。请使用卡支付，或 <cta>添加硬币</cta> 再试一次。"
       },
       "loading": {
         "ready1": "正在收集您的订单",

packages/checkout/widgets-lib/src/widgets/sale/SaleWidget.tsx

@@ -155,6 +155,8 @@ export default function SaleWidget(props: SaleWidgetProps) {
               showSwapOption={config.isSwapEnabled}
               showBridgeOption={config.isBridgeEnabled}
               onCloseButtonClick={() => sendSaleWidgetCloseEvent(eventTarget)}
+              amount={viewState.view.data?.amount}
+              tokenAddress={viewState.view.data?.tokenAddress}
             />
           )}
         </CryptoFiatProvider>

packages/checkout/widgets-lib/src/widgets/sale/components/InsufficientCoinsBanner.tsx

@@ -0,0 +1,64 @@
+import { Banner, Box, Link } from '@biom3/react';
+import {
+  SharedViews,
+  ViewActions,
+  ViewContext,
+} from 'context/view-context/ViewContext';
+import { useContext } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { ItemType } from '@imtbl/checkout-sdk';
+import { useSaleContext } from '../context/SaleContextProvider';
+import { SmartCheckoutErrorTypes } from '../types';
+
+export function InsufficientCoinsBanner() {
+  const { t } = useTranslation();
+  const { viewDispatch } = useContext(ViewContext);
+  const {
+    smartCheckoutError,
+    fromTokenAddress: tokenAddress,
+    amount,
+  } = useSaleContext();
+
+  if (
+    smartCheckoutError?.data?.error?.message
+    !== SmartCheckoutErrorTypes.FRACTIONAL_BALANCE_BLOCKED
+  ) {
+    return null;
+  }
+
+  const onClick = () => {
+    viewDispatch({
+      payload: {
+        type: ViewActions.UPDATE_VIEW,
+        view: {
+          type: SharedViews.TOP_UP_VIEW,
+          data: { tokenAddress, amount },
+        },
+      },
+    });
+  };
+
+  const hasEnough = smartCheckoutError?.data?.fractionalBalance || {};
+
+  let labelKey = t('views.PAYMENT_METHODS.insufficientCoinsBanner.caption');
+
+  if (!hasEnough[ItemType.NATIVE] && hasEnough[ItemType.ERC20]) {
+    labelKey = t('views.PAYMENT_METHODS.insufficientCoinsBanner.gasCaption');
+  }
+
+  return (
+    <Box sx={{ paddingX: 'base.spacing.x2' }}>
+      <Banner>
+        <Banner.Icon icon="InformationCircle" />
+        <Banner.Caption>
+          <Trans
+            i18nKey={labelKey}
+            components={{
+              cta: <Link sx={{ mx: 'base.spacing.x1' }} onClick={() => onClick()} />,
+            }}
+          />
+        </Banner.Caption>
+      </Banner>
+    </Box>
+  );
+}

packages/checkout/widgets-lib/src/widgets/sale/context/SaleContextProvider.tsx

@@ -36,6 +36,7 @@ import {
   SignOrderError,
   SignPaymentTypes,
   SignResponse,
+  SmartCheckoutError,
   SmartCheckoutErrorTypes,
 } from '../types';
 
@@ -74,14 +75,16 @@ type SaleContextValues = SaleContextProps & {
   paymentMethod: SalePaymentTypes | undefined;
   setPaymentMethod: (paymentMethod: SalePaymentTypes | undefined) => void;
   goBackToPaymentMethods: (
-    paymentMethod?: SalePaymentTypes | undefined
+    paymentMethod?: SalePaymentTypes | undefined,
+    data?: Record<string, unknown>
   ) => void;
   goToErrorView: (type: SaleErrorTypes, data?: Record<string, unknown>) => void;
   goToSuccessView: (data?: Record<string, unknown>) => void;
   querySmartCheckout: (
     callback?: (r?: SmartCheckoutResult) => void
   ) => Promise<SmartCheckoutResult | undefined>;
   smartCheckoutResult: SmartCheckoutResult | undefined;
+  smartCheckoutError: SmartCheckoutError | undefined;
   fundingRoutes: FundingRoute[];
   disabledPaymentTypes: SalePaymentTypes[];
   invalidParameters: boolean;
@@ -116,6 +119,7 @@ const SaleContext = createContext<SaleContextValues>({
   config: {} as StrongCheckoutWidgetsConfig,
   querySmartCheckout: () => Promise.resolve(undefined),
   smartCheckoutResult: undefined,
+  smartCheckoutError: undefined,
   fundingRoutes: [],
   disabledPaymentTypes: [],
   invalidParameters: false,
@@ -179,17 +183,15 @@ export function SaleContextProvider(props: {
   const goBackToPaymentMethods = useCallback(
     (
       type?: SalePaymentTypes | undefined,
-      showInsufficientCoinsBanner?: boolean,
+      data?: Record<string, unknown>,
     ) => {
       setPaymentMethod(type);
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,
           view: {
             type: SaleWidgetViews.PAYMENT_METHODS,
-            data: {
-              showInsufficientCoinsBanner,
-            },
+            data,
           },
         },
       });
@@ -312,7 +314,7 @@ export function SaleContextProvider(props: {
       === SmartCheckoutErrorTypes.FRACTIONAL_BALANCE_BLOCKED
     ) {
       setDisabledPaymentTypes([SalePaymentTypes.CRYPTO]);
-      goBackToPaymentMethods(undefined, true);
+      goBackToPaymentMethods(undefined);
       return;
     }
     goToErrorView(smartCheckoutError.type, smartCheckoutError.data);
@@ -331,6 +333,7 @@ export function SaleContextProvider(props: {
     if (!smartCheckoutResult) {
       return;
     }
+
     if (smartCheckoutResult.sufficient) {
       sign(SignPaymentTypes.CRYPTO);
       viewDispatch({
@@ -365,7 +368,7 @@ export function SaleContextProvider(props: {
           setFundingRoutes([]);
           setPaymentMethod(undefined);
           setDisabledPaymentTypes([SalePaymentTypes.CRYPTO]);
-          goBackToPaymentMethods(undefined, true);
+          goBackToPaymentMethods(undefined);
           break;
       }
     }
@@ -406,6 +409,7 @@ export function SaleContextProvider(props: {
       isPassportWallet: !!(provider?.provider as any)?.isPassport,
       querySmartCheckout,
       smartCheckoutResult,
+      smartCheckoutError,
       fundingRoutes,
       disabledPaymentTypes,
       invalidParameters,
@@ -434,6 +438,7 @@ export function SaleContextProvider(props: {
       sign,
       querySmartCheckout,
       smartCheckoutResult,
+      smartCheckoutError,
       fundingRoutes,
       disabledPaymentTypes,
       invalidParameters,