diff --git a/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx b/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx index c2128442fb..6138f3e86e 100644 --- a/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx +++ b/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx @@ -1,5 +1,4 @@ import { Box, BoxProps } from '@biom3/react'; -import merge from 'ts-deepmerge'; import { simpleLayoutStyle, headerStyle, @@ -19,7 +18,6 @@ export interface SimpleLayoutProps { floatHeader?: boolean; footerBackgroundColor?: string; bodyStyleOverrides?: BoxProps['sx']; - containerSx?: BoxProps['sx']; } export function SimpleLayout({ @@ -27,34 +25,33 @@ export function SimpleLayout({ footer, children, heroContent, - testId = 'container', + testId, floatHeader = false, footerBackgroundColor, bodyStyleOverrides, - containerSx = {}, }: SimpleLayoutProps) { return ( - - + + {header && ( - + {header} )} - + {heroContent && ( {heroContent} )} {children && ( - + {children} )} {footer && ( - + {footer} )} diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index 9ecd3b53a2..90d4fc8b12 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -641,23 +641,6 @@ } }, "ADD_FUNDS": { - "onboarding": { - "screen1": { - "title": "Payments on Immutable\nhave evolved", - "caption": "listen up", - "buttonText": "Next" - }, - "screen2": { - "title": "Deliver tokens to Passport\n& pay from any wallet", - "caption": "whats evolved", - "buttonText": "Next" - }, - "screen3": { - "title": "Pay with tokens on other chains,\nwe'll find you the best option", - "caption": "evolution", - "buttonText": "Choose the Wallet to Pay with" - } - }, "drawer": { "options": { "swap": { 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 39f66e19b4..0ba1744e3e 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx @@ -8,7 +8,6 @@ import { AddFundsWidgetParams, } from '@imtbl/checkout-sdk'; import React, { Suspense } from 'react'; -import { CloudImage, Stack } from '@biom3/react'; import { Base } from '../BaseWidgetRoot'; import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider'; import { HandoverProvider } from '../../context/handover-context/HandoverProvider'; @@ -21,11 +20,7 @@ import { } from '../../components/ConnectLoader/ConnectLoader'; import { getL1ChainId, getL2ChainId } from '../../lib'; import { sendAddFundsCloseEvent } from './AddFundsWidgetEvents'; -import { - isValidAddress, - isValidAmount, -} from '../../lib/validations/widgetValidators'; -import { getRemoteImage } from '../../lib/utils'; +import { isValidAddress, isValidAmount } from '../../lib/validations/widgetValidators'; const AddFundsWidget = React.lazy(() => import('./AddFundsWidget')); @@ -84,15 +79,14 @@ export class AddFunds extends Base { ], isCheckNetworkEnabled: false, }; - const config = this.strongConfig(); this.reactRoot.render( - + sendAddFundsCloseEvent(window)} > @@ -101,37 +95,17 @@ export class AddFunds extends Base { } > - - - )} - sx={{ - pos: 'absolute', - h: '100%', - w: '100%', - objectFit: 'cover', - objectPosition: 'center', - }} - /> - - + diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx index 04df46e04c..20e58942fc 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx @@ -8,26 +8,19 @@ import { AddFundsWidgetParams, Checkout } from '@imtbl/checkout-sdk'; import { sendAddFundsCloseEvent } from './AddFundsWidgetEvents'; import { EventTargetContext } from '../../context/event-target-context/EventTargetContext'; import { - AddFundsActions, - AddFundsContext, - addFundsReducer, - initialAddFundsState, + AddFundsActions, AddFundsContext, addFundsReducer, initialAddFundsState, } from './context/AddFundsContext'; import { AddFundsWidgetViews } from '../../context/view-context/AddFundsViewContextTypes'; import { initialViewState, - SharedViews, - ViewActions, + SharedViews, ViewActions, ViewContext, viewReducer, } from '../../context/view-context/ViewContext'; import { AddFunds } from './views/AddFunds'; import { ErrorView } from '../../views/error/ErrorView'; import { useSquid } from './hooks/useSquid'; -import { - useAnalytics, - UserJourney, -} from '../../context/analytics-provider/SegmentAnalyticsProvider'; +import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider'; import { fetchChains } from './functions/fetchChains'; import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; import { Review } from './views/Review'; @@ -67,12 +60,11 @@ export default function AddFundsWidget({ [viewState, viewReducer], ); - const [addFundsState, addFundsDispatch] = useReducer( - addFundsReducer, - initialAddFundsState, - ); + const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, initialAddFundsState); - const { squid, provider, chains } = addFundsState; + const { + squid, provider, chains, + } = addFundsState; const addFundsReducerValues = useMemo( () => ({ diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx index 5131e2fb40..505ebf4189 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx @@ -3,9 +3,7 @@ import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import { FiatOptionType } from '../types'; -export interface FiatOptionProps< - RC extends ReactElement | undefined = undefined, -> { +export interface FiatOptionProps { rc?: RC; type: FiatOptionType; onClick?: (type: FiatOptionType) => void; @@ -57,7 +55,7 @@ export function FiatOption({ {!disabled && } - {t( + { t( `views.ADD_FUNDS.drawer.options.${type}.${ disabled ? 'disabledCaption' : 'caption' }`, diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingDrawer.tsx deleted file mode 100644 index acca4c2cc8..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingDrawer.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { - Button, - Divider, - Drawer, - Heading, - OnboardingPagination, - vFlex, -} from '@biom3/react'; -import { - useCallback, useEffect, useMemo, useState, -} from 'react'; -import { useTranslation } from 'react-i18next'; -import { - getCacheItem, - SEEN_ONBOARDING_KEY, - setCacheItem, -} from '../../functions/onboardingState'; -import { OnboardingIllustration1 } from './OnboardingIllustration1'; -import { OnboardingIllustration2 } from './OnboardingIllustration2'; -import { OnboardingIllustration3 } from './OnboardingIllustration3'; - -const HERO_IMAGES = [ - OnboardingIllustration1, - OnboardingIllustration2, - OnboardingIllustration3, -]; - -export function OnboardingDrawer() { - const { t } = useTranslation(); - const [visible, setVisible] = useState(false); - const [screenIndex, setScreenIndex] = useState<1 | 2 | 3>(1); - - useEffect(() => { - async function checkToInitialiseDrawer() { - const cachedValue = await getCacheItem(SEEN_ONBOARDING_KEY); - return cachedValue ? setVisible(false) : setVisible(true); - } - - checkToInitialiseDrawer(); - }, []); - - const handleCtaOnClick = useCallback(() => { - switch (screenIndex) { - case 2: { - // @NOTE: once they have "seen" the final slide, mark it as such - // in the cache so that we don't show this to users again - setCacheItem(SEEN_ONBOARDING_KEY, true); - return setScreenIndex(3); - } - case 3: - // @NOTE: they have "seen" all slides - so this drawer can be closed - return setVisible(false); - - case 1: - default: - return setScreenIndex(2); - } - }, [screenIndex]); - - const ScreenHeroImage = useMemo( - () => HERO_IMAGES[screenIndex - 1], - [screenIndex], - ); - - return ( - - - - - {t(`views.ADD_FUNDS.onboarding.screen${screenIndex}.caption`)} - - - {t(`views.ADD_FUNDS.onboarding.screen${screenIndex}.title`)} - - - - - - ); -} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration1.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration1.tsx deleted file mode 100644 index 0a082744a5..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration1.tsx +++ /dev/null @@ -1,258 +0,0 @@ -/* eslint max-len: 0 */ - -export function OnboardingIllustration1() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration2.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration2.tsx deleted file mode 100644 index 54f75b5d05..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration2.tsx +++ /dev/null @@ -1,1351 +0,0 @@ -/* eslint max-len: 0 */ - -export function OnboardingIllustration2() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration3.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration3.tsx deleted file mode 100644 index 7c0b8a057f..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/OnboardingIllustration3.tsx +++ /dev/null @@ -1,385 +0,0 @@ -/* eslint max-len: 0 */ - -export function OnboardingIllustration3() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/index.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/index.ts deleted file mode 100644 index ca2930ca2c..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OnboardingDrawer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { OnboardingDrawer } from './OnboardingDrawer'; diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx index ef275f796a..761ad48e3d 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx @@ -1,4 +1,6 @@ -import { Box, LoadingOverlay, MenuItemSize } from '@biom3/react'; +import { + Box, LoadingOverlay, MenuItemSize, +} from '@biom3/react'; import { motion } from 'framer-motion'; import { TokenBalance } from '@0xsquid/sdk/dist/types'; import { @@ -35,10 +37,7 @@ export function Options({ size, showOnrampOption, }: OptionsProps) { - const getUsdBalance = ( - balance: TokenBalance | undefined, - route: RouteData, - ) => { + const getUsdBalance = (balance: TokenBalance | undefined, route: RouteData) => { if (!balance) return undefined; try { @@ -110,9 +109,7 @@ export function Options({ justifyContent: 'center', alignItems: 'flex-start', }} - rc={ - - } + rc={} > {routeOptions} {fiatOptions} 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 index 29b99d31a2..a29a8aa11a 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx @@ -44,7 +44,7 @@ export function OptionsDrawer({ - } + } > { +export interface RouteOptionProps { route: RouteData; onClick: (route: RouteData) => void; chain?: Chain; @@ -32,20 +31,12 @@ export function RouteOption({ const { estimate } = route.route.route; - const formattedFromAmount = useMemo( - () => Number( - ethers.utils.formatUnits( - estimate.fromAmount, - estimate.fromToken.decimals, - ), - ).toFixed(4), - [estimate.fromAmount, estimate.fromToken.decimals], - ); + const formattedFromAmount = useMemo(() => Number(ethers.utils.formatUnits( + estimate.fromAmount, + estimate.fromToken.decimals, + )).toFixed(4), [estimate.fromAmount, estimate.fromToken.decimals]); - const formattedUsdBalance = useMemo( - () => (usdBalance ? Number(usdBalance).toFixed(2) : undefined), - [usdBalance], - ); + const formattedUsdBalance = useMemo(() => (usdBalance ? Number(usdBalance).toFixed(2) : undefined), [usdBalance]); const estimatedDurationFormatted = useMemo(() => { const seconds = estimate.estimatedRouteDuration; @@ -83,41 +74,42 @@ export function RouteOption({ {fromToken.name} {formattedUsdBalance && ( - - {`Balance: $${formattedUsdBalance}`} - + + {`Balance: $${formattedUsdBalance}`} + )} {chain && ( - - } - sx={{ w: 'base.icon.size.200' }} - /> - - } - /> - + + } + sx={{ w: 'base.icon.size.200' }} + /> + + } + /> + )} {formattedFromAmount && estimate.fromAmountUSD && ( - - - {`USD $${estimate.fromAmountUSD}`} - - + + + {`USD $${estimate.fromAmountUSD}`} + + )} {isFastest && ( - + )} {' '} - {estimatedDurationFormatted} + { estimatedDurationFormatted } + ); } diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertTokenBalanceToUsd.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertTokenBalanceToUsd.ts index 4db24503c5..50a529f667 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertTokenBalanceToUsd.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/convertTokenBalanceToUsd.ts @@ -12,10 +12,7 @@ export function convertTokenBalanceToUsd( throw new Error('USD conversion rate not available'); } - const tokenBalance = ethers.utils.formatUnits( - balance.balance, - balance.decimals, - ); + const tokenBalance = ethers.utils.formatUnits(balance.balance, balance.decimals); const usdBalance = parseFloat(tokenBalance) * usdPrice; diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchBalances.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchBalances.ts index 2d900a6d91..8bfe0cfa73 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchBalances.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchBalances.ts @@ -3,11 +3,8 @@ import { Squid } from '@0xsquid/sdk'; import { CosmosBalance, TokenBalance } from '@0xsquid/sdk/dist/types'; import { Chain } from '../types'; -export const fetchBalances = async ( - squid: Squid, - chains: Chain[], - provider: Web3Provider, -): Promise => { +export const fetchBalances = async (squid: Squid, chains: Chain[], provider: Web3Provider) +: Promise => { const chainIds = chains.map((chain) => chain.id); const address = await provider?.getSigner().getAddress(); @@ -17,10 +14,7 @@ export const fetchBalances = async ( }>[] = []; for (const chainId of chainIds) { - const balancePromise = squid.getAllBalances({ - chainIds: [chainId], - evmAddress: address, - }); + const balancePromise = squid.getAllBalances({ chainIds: [chainId], evmAddress: address }); promises.push(balancePromise); } diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchTokens.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchTokens.ts index 152f487439..6887f3d316 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchTokens.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/fetchTokens.ts @@ -15,7 +15,7 @@ type SquidTokensResponse = { tokens: SquidTokenResponse[]; }; -export const fetchTokens = async (integratorId: string): Promise => { +export const fetchTokens = async (integratorId:string): Promise => { const url = `${SQUID_SDK_BASE_URL}/v2/sdk-info`; const response = await fetch(url, { diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/onboardingState.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/onboardingState.ts deleted file mode 100644 index ac48d8bf1e..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/onboardingState.ts +++ /dev/null @@ -1,32 +0,0 @@ -import localForage from 'localforage'; - -export const addFundsOnboardingCache = localForage.createInstance({ - name: 'AddFunds Onboarding State', - version: 1.0, - storeName: 'Internal state', - description: - 'A small IndexDB for storage of state relating to the AddFunds Onboarding Drawer', -}); - -export const SEEN_ONBOARDING_KEY = 'seen-onboarding'; - -type CacheItem = { - value: boolean; -} | null; - -export async function getCacheItem(key: string) { - const data: CacheItem = await addFundsOnboardingCache.getItem(key); - if (!data) return null; - const { value } = data; - return value; -} - -export async function setCacheItem(key: string, value: boolean) { - return addFundsOnboardingCache.setItem(key, { - value, - }); -} - -export async function clearCacheItems() { - return addFundsOnboardingCache.clear(); -} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/sortRoutesByFastestTime.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/sortRoutesByFastestTime.ts index 5a8b5bf6ce..858d8094cc 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/sortRoutesByFastestTime.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/sortRoutesByFastestTime.ts @@ -1,8 +1,6 @@ import { RouteData } from '../types'; -export const sortRoutesByFastestTime = ( - routes: RouteData[] | undefined, -): RouteData[] | undefined => { +export const sortRoutesByFastestTime = (routes: RouteData[] | undefined): RouteData[] | undefined => { if (!routes) return undefined; return routes.slice().sort((a, b) => { 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 6369d23f55..ede8544e61 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 @@ -7,7 +7,10 @@ import { isSquidNativeToken } from '../functions/isSquidNativeToken'; export const useExecute = () => { const convertToNetworkChangeableProvider = async ( provider: Web3Provider, - ): Promise => new ethers.providers.Web3Provider(provider.provider, 'any'); + ): Promise => new ethers.providers.Web3Provider( + provider.provider, + 'any', + ); const checkProviderChain = async ( provider: Web3Provider, @@ -56,10 +59,7 @@ export const useExecute = () => { throw new Error('transactionRequest target is undefined'); } - const allowance = await tokenContract.allowance( - ownerAddress, - transactionRequestTarget, - ); + const allowance = await tokenContract.allowance(ownerAddress, transactionRequestTarget); return allowance; } @@ -89,10 +89,7 @@ export const useExecute = () => { throw new Error('transactionRequest target is undefined'); } - const tx = await tokenContract.approve( - transactionRequestTarget, - fromAmount, - ); + const tx = await tokenContract.approve(transactionRequestTarget, fromAmount); await tx.wait(); } } catch (e) { @@ -121,10 +118,6 @@ export const useExecute = () => { }; return { - convertToNetworkChangeableProvider, - checkProviderChain, - getAllowance, - approve, - execute, + convertToNetworkChangeableProvider, checkProviderChain, getAllowance, approve, execute, }; }; 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 0db8fe4b11..04e68b7a59 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 @@ -15,20 +15,11 @@ export const useRoutes = () => { setRoutes(undefined); }; - const findToken = ( - tokens: Token[], - address: string, - chainId: string, - ): Token | undefined => tokens.find( - (value) => value.address.toLowerCase() === address.toLowerCase() - && value.chainId === chainId, - ); - - const calculateFromAmount = ( - fromToken: Token, - toToken: Token, - toAmount: string, - ) => { + const findToken = (tokens: Token[], address: string, chainId: string) + : Token | undefined => tokens.find((value) => value.address.toLowerCase() === address.toLowerCase() + && value.chainId === chainId); + + const calculateFromAmount = (fromToken: Token, toToken: Token, toAmount: string) => { const toAmountNumber = Number(toAmount); const toAmountInUsd = toAmountNumber * toToken.usdPrice; const baseFromAmount = toAmountInUsd / fromToken.usdPrice; @@ -43,11 +34,7 @@ export const useRoutes = () => { toChainId: string, toTokenAddress: string, ): AmountData | undefined => { - const fromToken = findToken( - tokens, - balance.address, - balance.chainId.toString(), - ); + const fromToken = findToken(tokens, balance.address, balance.chainId.toString()); const toToken = findToken(tokens, toTokenAddress, toChainId); if (!fromToken || !toToken) { return undefined; @@ -69,23 +56,19 @@ export const useRoutes = () => { toAmount: string, ): AmountData[] => { const filteredBalances = balances.filter( - (balance) => !( - balance.address.toLowerCase() === toTokenAddress.toLowerCase() - && balance.chainId === toChainId - ), + (balance) => !(balance.address.toLowerCase() === toTokenAddress.toLowerCase() && balance.chainId === toChainId), ); - const amountDataArray: AmountData[] = filteredBalances - .map((balance) => getAmountData(tokens, balance, toAmount, toChainId, toTokenAddress)) - .filter((value) => value !== undefined); + const amountDataArray: AmountData[] = filteredBalances.map((balance) => getAmountData( + tokens, + balance, + toAmount, + toChainId, + toTokenAddress, + )).filter((value) => value !== undefined); return amountDataArray.filter((data: AmountData) => { - const formattedBalance = utils.formatUnits( - data.balance.balance, - data.balance.decimals, - ); - return ( - parseFloat(formattedBalance.toString()) > parseFloat(data.fromAmount) - ); + const formattedBalance = utils.formatUnits(data.balance.balance, data.balance.decimals); + return parseFloat(formattedBalance.toString()) > parseFloat(data.fromAmount); }); }; @@ -99,9 +82,7 @@ export const useRoutes = () => { quoteOnly = true, ): Promise => { try { - const parsedFromAmount = parseFloat(fromAmount).toFixed( - fromToken.decimals, - ); + const parsedFromAmount = parseFloat(fromAmount).toFixed(fromToken.decimals); const formattedFromAmount = utils.parseUnits( parsedFromAmount, fromToken.decimals, @@ -134,21 +115,21 @@ export const useRoutes = () => { amountDataArray: AmountData[], toTokenAddress: string, ): Promise => { - const routePromises = amountDataArray.map((data) => getRoute( - squid, - data.fromToken, - data.toToken, - toTokenAddress, - data.fromAmount, - ).then((route) => ({ - amountData: data, - route, - }))); + const routePromises = amountDataArray.map( + (data) => getRoute( + squid, + data.fromToken, + data.toToken, + toTokenAddress, + data.fromAmount, + ).then((route) => ({ + amountData: data, + route, + })), + ); const routesData = await Promise.all(routePromises); - return routesData.filter( - (route): route is RouteData => route !== undefined, - ); + return routesData.filter((route): route is RouteData => route !== undefined); }; const fetchRoutesWithRateLimit = async ( @@ -176,10 +157,8 @@ export const useRoutes = () => { for (let i = 0; i < amountDataArray.length; i += bulkNumber) { const slicedAmountDataArray = amountDataArray.slice(i, i + bulkNumber); - allRoutes.push( - // eslint-disable-next-line no-await-in-loop - ...(await getRoutes(squid, slicedAmountDataArray, toTokenAddress)), - ); + // eslint-disable-next-line no-await-in-loop + allRoutes.push(...await getRoutes(squid, slicedAmountDataArray, toTokenAddress)); // eslint-disable-next-line no-await-in-loop await delay(delayMs); @@ -193,10 +172,6 @@ export const useRoutes = () => { }; return { - routes, - fetchRoutesWithRateLimit, - getAmountData, - getRoute, - resetRoutes, + routes, fetchRoutesWithRateLimit, getAmountData, getRoute, resetRoutes, }; }; diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts index e5ac17c834..44fbbbf88b 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts @@ -23,7 +23,7 @@ export type NativeCurrency = { name: string; symbol: string; decimals: number; - iconUrl: string; + iconUrl:string; }; export type AmountData = { 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 c5c512a78e..14838272a6 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 @@ -42,7 +42,6 @@ import { useRoutes } from '../hooks/useRoutes'; import { SQUID_NATIVE_TOKEN } from '../utils/config'; import { AddFundsWidgetViews } from '../../../context/view-context/AddFundsViewContextTypes'; import type { RouteData } from '../types'; -import { OnboardingDrawer } from '../components/OnboardingDrawer/OnboardingDrawer'; import { convertToUsd } from '../functions/convertToUsd'; import { validateToAmount } from '../functions/amountValidation'; @@ -316,7 +315,6 @@ export function AddFunds({ return ( Add Token ) : ( - + Add {' '} @@ -496,8 +488,6 @@ export function AddFunds({ onCardClick={onCardClick} onRouteClick={onRouteClick} /> - - diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx index e4a23cdaef..7bd46ed110 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx @@ -24,11 +24,7 @@ import { AddFundsReviewData } from '../../../context/view-context/AddFundsViewCo import { HeaderNavigation } from '../../../components/Header/HeaderNavigation'; import { Chain, RiveStateMachineInput } from '../types'; import { useExecute } from '../hooks/useExecute'; -import { - SharedViews, - ViewActions, - ViewContext, -} from '../../../context/view-context/ViewContext'; +import { SharedViews, ViewActions, ViewContext } from '../../../context/view-context/ViewContext'; import { SquidIcon } from '../components/SquidIcon'; import { useHandover } from '../../../lib/hooks/useHandover'; import { HandoverTarget } from '../../../context/handover-context/HandoverContext'; @@ -51,8 +47,7 @@ const EXECUTE_TXN_ANIMATION = '/swapping_coins.riv'; export function Review({ data, showBackButton = false, - onBackButtonClick, - onCloseButtonClick, + onBackButtonClick, onCloseButtonClick, }: ReviewProps) { const { viewDispatch } = useContext(ViewContext); const { @@ -63,9 +58,7 @@ export function Review({ const [route, setRoute] = useState(); const [fromAddress, setFromAddress] = useState(); - const [getRouteIntervalId, setGetRouteIntervalId] = useState< - NodeJS.Timer | undefined - >(); + const [getRouteIntervalId, setGetRouteIntervalId] = useState(); const [proceedDisabled, setProceedDisabled] = useState(true); const { getAmountData, getRoute } = useRoutes(); @@ -74,11 +67,7 @@ export function Review({ }); const { - convertToNetworkChangeableProvider, - checkProviderChain, - getAllowance, - approve, - execute, + convertToNetworkChangeableProvider, checkProviderChain, getAllowance, approve, execute, } = useExecute(); const getFromAmountAndRoute = async () => { @@ -94,9 +83,7 @@ export function Review({ data.balance, data.toAmount, data.toChainId, - data.toTokenAddress === 'native' - ? SQUID_NATIVE_TOKEN - : data.toTokenAddress, + data.toTokenAddress === 'native' ? SQUID_NATIVE_TOKEN : data.toTokenAddress, ); if (!amountData) return; @@ -127,19 +114,15 @@ export function Review({ }; }, []); - const getChain = (chainId: string | undefined): Chain | undefined => chains?.find((chain) => chain.id === chainId); + const getChain = (chainId: string | undefined) + : Chain | undefined => chains?.find((chain) => chain.id === chainId); - const getFeeCosts = (): number => route?.route.estimate.feeCosts.reduce( - (acc, fee) => acc + Number(fee.amountUsd), - 0, - ) ?? 0; + const getFeeCosts = (): number => route?.route.estimate.feeCosts.reduce((acc, fee) => acc + Number(fee.amountUsd), 0) + ?? 0; const getAmountInUSDText = (amount: string | undefined): string => (amount ? `USD $${amount}` : ''); - const getAmountFormatted = ( - amount: string | undefined, - decimals: number, - ): string => { + const getAmountFormatted = (amount: string | undefined, decimals: number): string => { if (!amount) { return '0'; } @@ -148,10 +131,7 @@ export function Review({ }; const getGasCostText = (): string => { - if ( - !route?.route.estimate.gasCosts - || route?.route.estimate.gasCosts.length === 0 - ) { + if (!route?.route.estimate.gasCosts || route?.route.estimate.gasCosts.length === 0) { return ''; } const totalGasFee = route?.route.estimate.gasCosts.reduce( @@ -159,10 +139,7 @@ export function Review({ BigNumber.from(0), ); - const formattedTotalGasFee = utils.formatUnits( - totalGasFee, - route?.route.estimate.gasCosts[0].token.decimals, - ); + const formattedTotalGasFee = utils.formatUnits(totalGasFee, route?.route.estimate.gasCosts[0].token.decimals); return `Gas Refuel +${route.route.estimate.gasCosts[0].token.name} ${formattedTotalGasFee}`; }; @@ -178,12 +155,7 @@ export function Review({ animationUrl: getRemoteRive(checkout?.config.environment, animationPath), inputValue: state, duration, - children: ( - - ), + children: , }); }; @@ -196,19 +168,10 @@ export function Review({ clearInterval(getRouteIntervalId); setProceedDisabled(true); - showHandover( - APPROVE_TXN_ANIMATION, - RiveStateMachineInput.START, - 'Preparing', - ); + showHandover(APPROVE_TXN_ANIMATION, RiveStateMachineInput.START, 'Preparing'); - const changeableProvider = await convertToNetworkChangeableProvider( - provider, - ); - await checkProviderChain( - changeableProvider, - route.route.params.fromChain, - ); + const changeableProvider = await convertToNetworkChangeableProvider(provider); + await checkProviderChain(changeableProvider, route.route.params.fromChain); const allowance = await getAllowance(changeableProvider, route); const { fromAmount } = route.route.params; @@ -241,36 +204,31 @@ export function Review({ const txReceipt = await execute(squid, changeableProvider, route); - showHandover( - EXECUTE_TXN_ANIMATION, - RiveStateMachineInput.PROCESSING, - 'Processing', - '', - FIXED_HANDOVER_DURATION, - ); + showHandover(EXECUTE_TXN_ANIMATION, RiveStateMachineInput.PROCESSING, 'Processing', '', FIXED_HANDOVER_DURATION); showHandover( EXECUTE_TXN_ANIMATION, RiveStateMachineInput.COMPLETED, - 'Funds added successfully', - <> - Go to - {' '} - + 'Funds added successfully', ( + <> + Go to + {' '} + )} - > - Axelarscan - - {' '} - for transaction details - , + > + Axelarscan + + {' '} + for transaction details + + ), ); } catch (e) { closeHandover(); @@ -291,7 +249,6 @@ export function Review({ return ( {!route && Loading...} {route && ( - + } justifyContent="center"> Review @@ -318,17 +272,13 @@ export function Review({ - )} + use={{route?.route.estimate.fromToken.name}} /> Pay with + {' '} {route?.route.estimate.fromToken.name} )} /> @@ -384,14 +329,8 @@ export function Review({ sx={{ w: 'base.icon.size.200' }} use={( { )} /> @@ -403,10 +342,7 @@ export function Review({ @@ -428,17 +364,13 @@ export function Review({ - )} + use={{route?.route.estimate.toToken.name}} /> Deliver + {' '} {route?.route.estimate.toToken.name} )} /> @@ -494,10 +422,7 @@ export function Review({ @@ -527,12 +452,9 @@ export function Review({ Powered by Squid - )}