From eeb29468be87961124071332144ac8821b3efa72 Mon Sep 17 00:00:00 2001 From: Tim Paul Date: Wed, 16 Oct 2024 16:42:02 +1100 Subject: [PATCH] [NO CHANGELOG] [Add funds Widget] CM-991 - minor UI tweaks (#2308) --- .../src/widgets/add-funds/AddFundsRoot.tsx | 2 +- .../src/widgets/add-funds/AddFundsWidget.tsx | 4 +- .../add-funds/components/OnboardingDrawer.tsx | 5 +- .../add-funds/components/OptionsDrawer.tsx | 5 +- .../add-funds/components/RouteOption.tsx | 1 - .../components/SelectedRouteOption.tsx | 3 +- .../add-funds/components/SelectedWallet.tsx | 7 ++- .../add-funds/functions/getRouteChains.ts | 10 +++- .../src/widgets/add-funds/hooks/useError.tsx | 52 ++++++++++------- .../src/widgets/add-funds/hooks/useExecute.ts | 14 ++++- .../src/widgets/add-funds/hooks/useRoutes.ts | 31 ++++++---- .../src/widgets/add-funds/views/AddFunds.tsx | 57 +++++++++---------- 12 files changed, 118 insertions(+), 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 index d14183d9f0..a6c5bf72f9 100644 --- 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 { - } + } > { 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 index 78356be24b..9e278cbdac 100644 --- 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', }} > - } sx={{ userSelect: 'none' }} /> + } + sx={{ userSelect: 'none' }} + /> } + sx={{ mx: 'base.spacing.x2' }} /> Pay from 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 index b1a0c88875..08b916093c 100644 --- 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({ } /> 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 index 1ab9a791dd..1c6c43b173 100644 --- 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({ } - sx={{ w: 'base.icon.size.200' }} + size="xSmall" + sx={{ bottom: 'base.spacing.x2', right: 'base.spacing.x2' }} /> + {!providerInfo?.icon && ( )} 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 index 5301fb67a9..12d6f6c48a 100644 --- 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 index f599a46d18..b0b86a3ac4 100644 --- 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,7 +94,8 @@ 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', @@ -94,7 +103,8 @@ export const useError = (environment: Environment) => { }, [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) => { + const showErrorHandover = ( + errorType: AddFundsErrorTypes, + data?: Record, + ) => { 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: , + children: ( + + ), }); }; 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 index b2cbcd9630..b5c7b080b2 100644 --- 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 index 0099f3b245..25b6d316bd 100644 --- 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 index 674ae3f879..f5cfaf76a2 100644 --- 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 && ( - - USD $ - {selectedAmountUsd.toFixed(2)} - - )} + + + USD $ + {selectedAmountUsd.toFixed(2)} + )} @@ -646,9 +645,7 @@ export function AddFunds({ }} >