[NO CHANGELOG] [Add funds Widget] CM-991 - minor UI tweaks (#2308)

immutable · Oct 16, 2024 · eeb2946 · eeb2946
1 parent 7067a43
commit eeb2946
Show file tree

Hide file tree

Showing 12 changed files with 118 additions and 73 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx
@@ -74,7 +74,7 @@ export class AddFunds extends Base<WidgetType.ADD_FUNDS> {
                 <Suspense
                   fallback={
                     <LoadingView loadingText={t('views.LOADING_VIEW.text')} />
-                }
+                  }
                 >
                   <AddFundsWidget
                     config={this.strongConfig()}

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx
@@ -95,7 +95,9 @@ export default function AddFundsWidget({
 
   const squidSdk = useSquid(checkout);
   const tokensResponse = useTokens(checkout);
-  const { showErrorHandover } = useError(checkout.config.environment ?? Environment.SANDBOX);
+  const { showErrorHandover } = useError(
+    checkout.config.environment ?? Environment.SANDBOX,
+  );
 
   useEffect(() => {
     const isInvalidToTokenAddress = toTokenAddress && !isValidAddress(toTokenAddress);

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer.tsx
@@ -76,7 +76,10 @@ export function OnboardingDrawer({ environment }: OnboardingDrawerProps) {
           px: 'base.spacing.x6',
         }}
       >
-        <Box rc={<img src={src} alt={HERO_IMAGES[screenIndex - 1]} />} sx={{ userSelect: 'none' }} />
+        <Box
+          rc={<img src={src} alt={HERO_IMAGES[screenIndex - 1]} />}
+          sx={{ userSelect: 'none' }}
+        />
         <Divider
           size="xSmall"
           textAlign="center"

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx
@@ -36,7 +36,9 @@ export function OptionsDrawer({
   showBridgeOption,
   insufficientBalance,
 }: OptionsDrawerProps) {
-  const { addFundsState: { chains } } = useContext(AddFundsContext);
+  const {
+    addFundsState: { chains },
+  } = useContext(AddFundsContext);
 
   const {
     providersState: { fromProviderInfo, fromAddress },
@@ -72,6 +74,7 @@ export function OptionsDrawer({
             use={
               <img src={fromProviderInfo?.icon} alt={fromProviderInfo?.name} />
             }
+            sx={{ mx: 'base.spacing.x2' }}
           />
           <MenuItem.Label>Pay from</MenuItem.Label>
           <MenuItem.Caption>

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx
@@ -84,7 +84,6 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
 
           <MenuItem.FramedImage
             circularFrame
-            padded
             use={<img src={fromToken.iconUrl} alt={fromToken.name} />}
           />
         </Sticker>

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/SelectedRouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/SelectedRouteOption.tsx
@@ -161,7 +161,8 @@ export function SelectedRouteOption({
         <Sticker position={{ x: 'right', y: 'bottom' }}>
           <Sticker.FramedImage
             use={<img src={chain.iconUrl} alt={chain.name} />}
-            sx={{ w: 'base.icon.size.200' }}
+            size="xSmall"
+            sx={{ bottom: 'base.spacing.x2', right: 'base.spacing.x2' }}
           />
 
           <MenuItem.FramedImage

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/SelectedWallet.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/SelectedWallet.tsx
@@ -23,7 +23,12 @@ export function SelectedWallet({
   const size: MenuItemProps['size'] = selected ? 'xSmall' : 'small';
 
   return (
-    <MenuItem size={size} emphasized onClick={onClick}>
+    <MenuItem
+      size={size}
+      emphasized
+      onClick={onClick}
+      sx={selected ? { py: 'base.spacing.x3' } : undefined}
+    >
       {!providerInfo?.icon && (
         <MenuItem.FramedIcon icon="Wallet" variant="bold" emphasized={false} />
       )}

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/getRouteChains.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/getRouteChains.ts
@@ -7,7 +7,10 @@ import { Chain } from '../types';
  * @param chains - The chains to search through
  * @returns The chain with the matching id, or undefined if no chain is found
  */
-function findChainById(chainId: string | undefined, chains: Chain[] | null): Chain | undefined {
+function findChainById(
+  chainId: string | undefined,
+  chains: Chain[] | null,
+): Chain | undefined {
   return chains?.find((chain) => chain.id === chainId);
 }
 
@@ -17,7 +20,10 @@ function findChainById(chainId: string | undefined, chains: Chain[] | null): Cha
  * @param route - The route to get the chains from
  * @returns The chains from the route
  */
-export const getRouteChains = (chains: Chain[] | null, route: RouteResponse | undefined): {
+export const getRouteChains = (
+  chains: Chain[] | null,
+  route: RouteResponse | undefined,
+): {
   fromChain: Chain | undefined;
   toChain: Chain | undefined;
 } => ({

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useError.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useError.tsx
@@ -8,9 +8,15 @@ import { APPROVE_TXN_ANIMATION } from '../utils/config';
 import { HandoverContent } from '../../../components/Handover/HandoverContent';
 import { sendAddFundsCloseEvent } from '../AddFundsWidgetEvents';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
-import { ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
+import {
+  ViewActions,
+  ViewContext,
+} from '../../../context/view-context/ViewContext';
 import { AddFundsWidgetViews } from '../../../context/view-context/AddFundsViewContextTypes';
-import { useAnalytics, UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
+import {
+  useAnalytics,
+  UserJourney,
+} from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
 interface ErrorConfig {
   headingText: string;
@@ -58,13 +64,15 @@ export const useError = (environment: Environment) => {
     },
     [AddFundsErrorTypes.INVALID_PARAMETERS]: {
       headingText: 'Invalid parameters',
-      subHeadingText: 'The widget parameters provided are invalid. Please check again.',
+      subHeadingText:
+        'The widget parameters provided are invalid. Please check again.',
       secondaryButtonText: 'Close',
       onSecondaryButtonClick: closeWidget,
     },
     [AddFundsErrorTypes.SERVICE_BREAKDOWN]: {
       headingText: 'Our system is currently down',
-      subHeadingText: 'We are currently experiencing technical difficulties. Please try again later.',
+      subHeadingText:
+        'We are currently experiencing technical difficulties. Please try again later.',
       secondaryButtonText: 'Close',
       onSecondaryButtonClick: closeWidget,
     },
@@ -86,15 +94,17 @@ export const useError = (environment: Environment) => {
     },
     [AddFundsErrorTypes.WALLET_REJECTED]: {
       headingText: 'Transaction rejected',
-      subHeadingText: "You'll need to approve the transaction in your wallet to proceed.",
+      subHeadingText:
+        "You'll need to approve the transaction in your wallet to proceed.",
       primaryButtonText: 'Retry',
       onPrimaryButtonClick: goBackToAddFundsView,
       secondaryButtonText: 'Close',
       onSecondaryButtonClick: closeWidget,
     },
     [AddFundsErrorTypes.WALLET_REJECTED_NO_FUNDS]: {
       headingText: 'Insufficient funds',
-      subHeadingText: 'You do not have enough funds to complete the transaction.',
+      subHeadingText:
+        'You do not have enough funds to complete the transaction.',
       primaryButtonText: 'Retry',
       onPrimaryButtonClick: goBackToAddFundsView,
       secondaryButtonText: 'Close',
@@ -112,7 +122,10 @@ export const useError = (environment: Environment) => {
 
   const getErrorConfig = (errorType: AddFundsErrorTypes) => errorConfig[errorType];
 
-  const showErrorHandover = (errorType: AddFundsErrorTypes, data?: Record<string, unknown>) => {
+  const showErrorHandover = (
+    errorType: AddFundsErrorTypes,
+    data?: Record<string, unknown>,
+  ) => {
     page({
       userJourney: UserJourney.ADD_FUNDS,
       screen: 'Error',
@@ -123,19 +136,20 @@ export const useError = (environment: Environment) => {
     });
 
     addHandover({
-      animationUrl: getRemoteRive(
-        environment,
-        APPROVE_TXN_ANIMATION,
-      ),
+      animationUrl: getRemoteRive(environment, APPROVE_TXN_ANIMATION),
       inputValue: RiveStateMachineInput.ERROR,
-      children: <HandoverContent
-        headingText={getErrorConfig(errorType).headingText}
-        subheadingText={getErrorConfig(errorType).subHeadingText}
-        primaryButtonText={getErrorConfig(errorType).primaryButtonText}
-        onPrimaryButtonClick={getErrorConfig(errorType).onPrimaryButtonClick}
-        secondaryButtonText={getErrorConfig(errorType).secondaryButtonText}
-        onSecondaryButtonClick={getErrorConfig(errorType).onSecondaryButtonClick}
-      />,
+      children: (
+        <HandoverContent
+          headingText={getErrorConfig(errorType).headingText}
+          subheadingText={getErrorConfig(errorType).subHeadingText}
+          primaryButtonText={getErrorConfig(errorType).primaryButtonText}
+          onPrimaryButtonClick={getErrorConfig(errorType).onPrimaryButtonClick}
+          secondaryButtonText={getErrorConfig(errorType).secondaryButtonText}
+          onSecondaryButtonClick={
+            getErrorConfig(errorType).onSecondaryButtonClick
+          }
+        />
+      ),
     });
   };
 

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useExecute.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useExecute.ts
@@ -11,7 +11,9 @@ export const useExecute = (environment: Environment) => {
   const { showErrorHandover } = useError(environment);
 
   const handleTransactionError = (err: unknown) => {
-    const reason = `${(err as any)?.reason || (err as any)?.message || ''}`.toLowerCase();
+    const reason = `${
+      (err as any)?.reason || (err as any)?.message || ''
+    }`.toLowerCase();
 
     let errorType = AddFundsErrorTypes.WALLET_FAILED;
 
@@ -23,11 +25,17 @@ export const useExecute = (environment: Environment) => {
       errorType = AddFundsErrorTypes.WALLET_REJECTED;
     }
 
-    if (reason.includes('failed to submit') && reason.includes('highest gas limit')) {
+    if (
+      reason.includes('failed to submit')
+      && reason.includes('highest gas limit')
+    ) {
       errorType = AddFundsErrorTypes.WALLET_REJECTED_NO_FUNDS;
     }
 
-    if (reason.includes('status failed') || reason.includes('transaction failed')) {
+    if (
+      reason.includes('status failed')
+      || reason.includes('transaction failed')
+    ) {
       errorType = AddFundsErrorTypes.TRANSACTION_FAILED;
     }
 

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useRoutes.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useRoutes.ts
@@ -71,7 +71,12 @@ export const useRoutes = () => {
     }
     return {
       fromToken,
-      fromAmount: calculateFromAmount(fromToken, toToken, toAmount, additionalBuffer),
+      fromAmount: calculateFromAmount(
+        fromToken,
+        toToken,
+        toAmount,
+        additionalBuffer,
+      ),
       toToken,
       toAmount,
       balance,
@@ -107,14 +112,9 @@ export const useRoutes = () => {
     });
   };
 
-  const convertToFormattedAmount = (amount : string, decimals:number) => {
-    const parsedFromAmount = parseFloat(amount).toFixed(
-      decimals,
-    );
-    const formattedFromAmount = utils.parseUnits(
-      parsedFromAmount,
-      decimals,
-    );
+  const convertToFormattedAmount = (amount: string, decimals: number) => {
+    const parsedFromAmount = parseFloat(amount).toFixed(decimals);
+    const formattedFromAmount = utils.parseUnits(parsedFromAmount, decimals);
     return formattedFromAmount.toString();
   };
 
@@ -145,7 +145,10 @@ export const useRoutes = () => {
     },
   );
 
-  const isRouteToAmountGreaterThanToAmount = (routeResponse:RouteResponse, toAmount :string) => {
+  const isRouteToAmountGreaterThanToAmount = (
+    routeResponse: RouteResponse,
+    toAmount: string,
+  ) => {
     const routeToAmount = getFormattedNumber(
       routeResponse?.route.estimate.toAmount,
       routeResponse?.route.estimate.toToken.decimals,
@@ -177,9 +180,13 @@ export const useRoutes = () => {
       if (!routeResponse?.route) {
         return {};
       }
-      if (isRouteToAmountGreaterThanToAmount(routeResponse, toAmount)) { return { route: routeResponse }; }
+      if (isRouteToAmountGreaterThanToAmount(routeResponse, toAmount)) {
+        return { route: routeResponse };
+      }
 
-      const additionalBuffer = Math.abs(Number(routeResponse?.route.estimate.aggregatePriceImpact));
+      const additionalBuffer = Math.abs(
+        Number(routeResponse?.route.estimate.aggregatePriceImpact),
+      );
       const newFromAmount = calculateFromAmount(
         fromToken,
         toToken,

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
@@ -130,24 +130,27 @@ export function AddFunds({
     [tokens, inputValue, selectedToken],
   );
 
-  const setSelectedAmount = useMemo(() => debounce((value: string) => {
-    track({
-      userJourney: UserJourney.ADD_FUNDS,
-      screen: 'InputScreen',
-      control: 'AmountInput',
-      controlType: 'TextInput',
-      extras: {
-        toAmount: value,
-      },
-    });
+  const setSelectedAmount = useMemo(
+    () => debounce((value: string) => {
+      track({
+        userJourney: UserJourney.ADD_FUNDS,
+        screen: 'InputScreen',
+        control: 'AmountInput',
+        controlType: 'TextInput',
+        extras: {
+          toAmount: value,
+        },
+      });
 
-    addFundsDispatch({
-      payload: {
-        type: AddFundsActions.SET_SELECTED_AMOUNT,
-        selectedAmount: value,
-      },
-    });
-  }, 2500), []);
+      addFundsDispatch({
+        payload: {
+          type: AddFundsActions.SET_SELECTED_AMOUNT,
+          selectedAmount: value,
+        },
+      });
+    }, 2500),
+    [],
+  );
 
   const setSelectedToken = (token: TokenInfo | undefined) => {
     track({
@@ -484,10 +487,7 @@ export function AddFunds({
   const loading = (routeInputsReady || fetchingRoutes)
     && !(selectedRouteData || insufficientBalance);
 
-  const readyToReview = routeInputsReady
-    && !!toAddress
-    && !!selectedRouteData
-    && !loading;
+  const readyToReview = routeInputsReady && !!toAddress && !!selectedRouteData && !loading;
 
   const handleWalletConnected = (
     providerType: 'from' | 'to',
@@ -614,12 +614,11 @@ export function AddFunds({
                 placeholder="0"
                 maxTextSize="xLarge"
               />
-              {selectedAmountUsd > 0 && (
-                <HeroFormControl.Caption>
-                  USD $
-                  {selectedAmountUsd.toFixed(2)}
-                </HeroFormControl.Caption>
-              )}
+
+              <HeroFormControl.Caption>
+                USD $
+                {selectedAmountUsd.toFixed(2)}
+              </HeroFormControl.Caption>
             </HeroFormControl>
           )}
         </Stack>
@@ -646,9 +645,7 @@ export function AddFunds({
               }}
             >
               <MenuItem.BottomSlot.Divider
-                sx={{
-                  ml: fromAddress ? 'base.spacing.x2' : undefined,
-                }}
+                sx={fromAddress ? { ml: 'base.spacing.x4' } : undefined}
               />
               <SelectedRouteOption
                 checkout={checkout}