fix: [GPR-468][Sale Widget] Improve flow speed by removing unnecessar…

…y loaders (#1571)

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

@@ -266,12 +266,12 @@
           "caption": "The fastest way to pay, if you have coins in your balance.",
           "disabledCaption": "We can't see enough coins in your balance"
         },
-        "debit" : {
+        "debit": {
           "heading": "Debit Card",
           "caption": "The recommended way to pay with card.",
           "disabledCaption": null
         },
-        "credit" : {
+        "credit": {
           "heading": "Credit Card",
           "caption": "Not recommended since transactions may be blocked by your bank.",
           "disabledCaption": null
@@ -283,16 +283,12 @@
         "captionCTA": "add coins"
       },
       "loading": {
-        "ready": [
-          "Collecting your order",
-          "Talking to wallet",
-          "Readying assets"
-        ],
-        "processing": [
-          "Initialising payment",
-          "Securing your assets",
-          "Finalising payment"
-        ]
+        "ready1": "Collecting your order",
+        "ready2": "Talking to wallet",
+        "ready3": "Readying assets",
+        "processing1": "Initialising payment",
+        "processing2": "Securing your assets",
+        "processing3": "Finalising payment"
       }
     },
     "PAY_WITH_COINS": {

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

@@ -290,8 +290,12 @@
         "captionCTA": "コインを追加"
       },
       "loading": {
-        "ready": ["注文を受け取り中", "ウォレットと通信中", "資産を準備中"],
-        "processing": ["支払いを初期化中", "資産を確保中", "支払いを完了中"]
+        "ready1": "注文を受け取り中",
+        "ready2": "ウォレットと通信中",
+        "ready3": "資産を準備中",
+        "processing1": "支払いを初期化中",
+        "processing2": "資産を確保中",
+        "processing3": "支払いを完了中"
       }
     },
     "PAY_WITH_COINS": {

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

@@ -283,8 +283,12 @@
         "captionCTA": "코인 추가"
       },
       "loading": {
-        "ready": ["주문 수집 중", "지갑과 대화 중", "자산 준비 중"],
-        "processing": ["결제 초기화 중", "자산 보호 중", "결제 완료 중"]
+        "ready1": "주문 수집 중",
+        "ready2": "지갑과 대화 중",
+        "ready3": "자산 준비 중",
+        "processing1": "결제 초기화 중",
+        "processing2": "자산 보호 중",
+        "processing3": "결제 완료 중"
       }
     },
     "PAY_WITH_COINS": {

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

@@ -283,8 +283,12 @@
         "captionCTA": "添加硬币"
       },
       "loading": {
-        "ready": ["正在收集您的订单", "正在与钱包交流", "正在准备资产"],
-        "processing": ["正在初始化支付", "正在保护您的资产", "正在完成支付"]
+        "ready1": "正在收集您的订单",
+        "ready2": "正在与钱包交流",
+        "ready3": "正在准备资产",
+        "processing1": "正在初始化支付",
+        "processing2": "正在保护您的资产",
+        "processing3": "正在完成支付"
       }
     },
     "PAY_WITH_COINS": {

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

@@ -38,7 +38,6 @@ import { TopUpView } from '../../views/top-up/TopUpView';
 import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { sendSaleWidgetCloseEvent } from './SaleWidgetEvents';
 import { EventTargetContext } from '../../context/event-target-context/EventTargetContext';
-import { useClientConfig } from './hooks/useClientConfig';
 
 export interface SaleWidgetProps
   extends Required<Omit<SaleWidgetParams, 'walletProviderName'>> {
@@ -66,12 +65,6 @@ export default function SaleWidget(props: SaleWidgetProps) {
     () => ({ viewState, viewDispatch }),
     [viewState, viewDispatch],
   );
-  const { currency, clientConfig } = useClientConfig({
-    environmentId,
-    environment: config.environment,
-  });
-
-  const fromTokenAddress = currency?.erc20Address || '';
 
   const loadingText = viewState.view.data?.loadingText || t('views.LOADING_VIEW.text');
 
@@ -86,7 +79,7 @@ export default function SaleWidget(props: SaleWidgetProps) {
 
   const mounted = useRef(false);
   const onMount = useCallback(() => {
-    if (!checkout || !provider || fromTokenAddress === '') return;
+    if (!checkout || !provider) return;
 
     if (!mounted.current) {
       mounted.current = true;
@@ -99,13 +92,13 @@ export default function SaleWidget(props: SaleWidgetProps) {
         },
       });
     }
-  }, [checkout, provider, fromTokenAddress]);
+  }, [checkout, provider]);
 
   useEffect(() => {
     if (!checkout || !provider) return;
 
     onMount();
-  }, [checkout, provider, currency]);
+  }, [checkout, provider]);
 
   return (
     <ViewContext.Provider value={viewReducerValues}>
@@ -114,14 +107,12 @@ export default function SaleWidget(props: SaleWidgetProps) {
           config,
           items,
           amount,
-          fromTokenAddress,
           environment: config.environment,
           environmentId,
           provider,
           checkout,
           passport: checkout?.passport,
           collectionName,
-          clientConfig,
         }}
       >
         <CryptoFiatProvider environment={config.environment}>

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

@@ -33,7 +33,7 @@ export function PaymentOptions(props: PaymentOptionsProps) {
           disabled={disabledOptions.includes(type)}
           onClick={onClick}
           type={type}
-          key={type}
+          key={`${Math.random()}-${type}`}
         />
       ))}
     </Box>

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

@@ -40,7 +40,7 @@ import {
 } from '../types';
 
 import { useSmartCheckout } from '../hooks/useSmartCheckout';
-import { defaultClientConfig } from '../hooks/useClientConfig';
+import { useClientConfig, defaultClientConfig } from '../hooks/useClientConfig';
 
 type SaleContextProps = {
   config: StrongCheckoutWidgetsConfig;
@@ -49,11 +49,9 @@ type SaleContextProps = {
   items: SaleItem[];
   amount: string;
   collectionName: string;
-  fromTokenAddress: string;
   provider: ConnectLoaderState['provider'];
   checkout: ConnectLoaderState['checkout'];
   passport?: Passport;
-  clientConfig: ClientConfig;
 };
 
 type SaleContextValues = SaleContextProps & {
@@ -86,13 +84,15 @@ type SaleContextValues = SaleContextProps & {
   fundingRoutes: FundingRoute[];
   disabledPaymentTypes: SalePaymentTypes[];
   invalidParameters: boolean;
+  fromTokenAddress: string;
+  clientConfig: ClientConfig;
+  signTokenIds: string[];
 };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const SaleContext = createContext<SaleContextValues>({
   items: [],
   amount: '',
-  fromTokenAddress: '',
   collectionName: '',
   provider: undefined,
   checkout: undefined,
@@ -118,7 +118,9 @@ const SaleContext = createContext<SaleContextValues>({
   fundingRoutes: [],
   disabledPaymentTypes: [],
   invalidParameters: false,
+  fromTokenAddress: '',
   clientConfig: defaultClientConfig,
+  signTokenIds: [],
 });
 
 SaleContext.displayName = 'SaleSaleContext';
@@ -138,12 +140,10 @@ export function SaleContextProvider(props: {
       environmentId,
       items,
       amount,
-      fromTokenAddress,
       provider,
       checkout,
       passport,
       collectionName,
-      clientConfig,
     },
   } = props;
 
@@ -168,6 +168,13 @@ export function SaleContextProvider(props: {
 
   const [invalidParameters, setInvalidParameters] = useState<boolean>(false);
 
+  const { currency, clientConfig } = useClientConfig({
+    environmentId,
+    environment: config.environment,
+  });
+
+  const fromTokenAddress = currency?.erc20Address || '';
+
   const goBackToPaymentMethods = useCallback(
     (
       type?: SalePaymentTypes | undefined,
@@ -222,6 +229,12 @@ export function SaleContextProvider(props: {
       type: SignPaymentTypes,
       callback?: (r?: SignResponse) => void,
     ): Promise<SignResponse | undefined> => {
+      const invalidFromTokenAddress = !fromTokenAddress || !fromTokenAddress.startsWith('0x');
+      if (invalidFromTokenAddress) {
+        setInvalidParameters(true);
+        return undefined;
+      }
+
       const response = await signOrder(type, fromTokenAddress);
       if (!response) return undefined;
 
@@ -360,20 +373,11 @@ export function SaleContextProvider(props: {
   useEffect(() => {
     const invalidItems = !items || items.length === 0;
     const invalidAmount = !amount || amount === '0';
-    const invalidFromTokenAddress = !fromTokenAddress || !fromTokenAddress.startsWith('0x');
 
-    if (
-      invalidItems
-      || invalidAmount
-      || invalidFromTokenAddress
-      || !collectionName
-      || !environmentId
-    ) {
+    if (invalidItems || invalidAmount || !collectionName || !environmentId) {
       setInvalidParameters(true);
-    } else {
-      setInvalidParameters(false);
     }
-  }, [items, amount, fromTokenAddress, collectionName, environmentId]);
+  }, [items, amount, collectionName, environmentId]);
 
   const values = useMemo(
     () => ({
@@ -405,6 +409,7 @@ export function SaleContextProvider(props: {
       disabledPaymentTypes,
       invalidParameters,
       clientConfig,
+      signTokenIds: tokenIds,
     }),
     [
       config,
@@ -432,6 +437,7 @@ export function SaleContextProvider(props: {
       disabledPaymentTypes,
       invalidParameters,
       clientConfig,
+      tokenIds,
     ],
   );
 

packages/checkout/widgets-lib/src/widgets/sale/views/PayWithCoins.tsx

@@ -13,14 +13,25 @@ export function PayWithCoins() {
     sendTransactionSuccessEvent,
     sendFailedEvent,
     sendCloseEvent,
+    sendSuccessEvent,
   } = useSaleEvent();
-  const { execute, signResponse, executeResponse } = useSaleContext();
+  const {
+    execute, signResponse, executeResponse, signTokenIds,
+  } = useSaleContext();
   const executedTxns = executeResponse?.transactions.length || 0;
 
-  let loadingText = t('views.PAYMENT_METHODS.loading.ready');
+  let loadingText = [
+    t('views.PAYMENT_METHODS.loading.ready1'),
+    t('views.PAYMENT_METHODS.loading.ready2'),
+    t('views.PAYMENT_METHODS.loading.ready3'),
+  ];
 
   if (executedTxns >= 1) {
-    loadingText = t('views.PAYMENT_METHODS.loading.processing');
+    loadingText = [
+      t('views.PAYMENT_METHODS.loading.processing1'),
+      t('views.PAYMENT_METHODS.loading.processing2'),
+      t('views.PAYMENT_METHODS.loading.processing3'),
+    ];
   }
 
   const sendTransaction = async () => {
@@ -44,6 +55,7 @@ export function PayWithCoins() {
 
   useEffect(() => {
     if (executeResponse?.done === true) {
+      sendSuccessEvent(SaleWidgetViews.SALE_SUCCESS, executeResponse?.transactions, signTokenIds);
       sendCloseEvent(SaleWidgetViews.SALE_SUCCESS);
     }
   }, [executeResponse]);

packages/checkout/widgets-lib/src/widgets/sale/views/PaymentMethods.tsx

@@ -8,7 +8,10 @@ import { useTranslation } from 'react-i18next';
 import { FooterLogo } from '../../../components/Footer/FooterLogo';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
-import { FundWithSmartCheckoutSubViews, SaleWidgetViews } from '../../../context/view-context/SaleViewContextTypes';
+import {
+  FundWithSmartCheckoutSubViews,
+  SaleWidgetViews,
+} from '../../../context/view-context/SaleViewContextTypes';
 import {
   SharedViews,
   ViewActions,
@@ -40,7 +43,10 @@ export function PaymentMethods() {
       sendSelectedPaymentMethod(paymentMethod, SaleWidgetViews.PAYMENT_METHODS);
     }
 
-    if (paymentMethod === SalePaymentTypes.DEBIT || paymentMethod === SalePaymentTypes.CREDIT) {
+    if (
+      paymentMethod
+      && [SalePaymentTypes.DEBIT, SalePaymentTypes.CREDIT].includes(paymentMethod)
+    ) {
       sign(SignPaymentTypes.FIAT, () => {
         viewDispatch({
           payload: {
@@ -63,7 +69,7 @@ export function PaymentMethods() {
       });
     }
 
-    if (paymentMethod === SalePaymentTypes.CRYPTO) {
+    if (paymentMethod && paymentMethod === SalePaymentTypes.CRYPTO) {
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,
@@ -95,9 +101,7 @@ export function PaymentMethods() {
           {t('views.PAYMENT_METHODS.insufficientCoinsBanner.caption')}
           <Link
             sx={{ mx: 'base.spacing.x1' }}
-            onClick={
-              () => onClickInsufficientCoinsBanner()
-            }
+            onClick={() => onClickInsufficientCoinsBanner()}
           >
             {t('views.PAYMENT_METHODS.insufficientCoinsBanner.captionCTA')}
           </Link>
@@ -141,9 +145,14 @@ export function PaymentMethods() {
           {t('views.PAYMENT_METHODS.header.heading')}
         </Heading>
         <Box sx={{ paddingX: 'base.spacing.x2' }}>
-          <PaymentOptions disabledOptions={disabledPaymentTypes} onClick={handleOptionClick} />
+          <PaymentOptions
+            disabledOptions={disabledPaymentTypes}
+            onClick={handleOptionClick}
+          />
         </Box>
-        {viewState.view.data?.showInsufficientCoinsBanner ? insufficientCoinsBanner : null}
+        {viewState.view.data?.showInsufficientCoinsBanner
+          ? insufficientCoinsBanner
+          : null}
       </Box>
     </SimpleLayout>
   );