From a4353ffea65221a570d0d3553c1c4013eb43bac8 Mon Sep 17 00:00:00 2001 From: Mimi Tran <80493680+mimi-imtbl@users.noreply.github.com> Date: Wed, 23 Oct 2024 09:08:49 +1100 Subject: [PATCH] [NO CHANGELOG] [Add Funds Widget] Add funds legal footer (#2340) --- .../checkout/widgets-lib/src/locales/en.json | 3 +++ .../add-funds/components/SquidFooter.tsx | 26 +++++++++++++++++++ .../add-funds/functions/fetchTokens.ts | 4 +++ .../add-funds/functions/getFormattedNumber.ts | 9 +++++++ .../src/widgets/add-funds/views/AddFunds.tsx | 13 +++++++--- .../src/widgets/add-funds/views/Review.tsx | 11 +++++--- 6 files changed, 60 insertions(+), 6 deletions(-) create mode 100644 packages/checkout/widgets-lib/src/widgets/add-funds/components/SquidFooter.tsx diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json index b063beb3e5..c241aed494 100644 --- a/packages/checkout/widgets-lib/src/locales/en.json +++ b/packages/checkout/widgets-lib/src/locales/en.json @@ -676,6 +676,9 @@ "caption": "evolution", "buttonText": "Choose the Wallet to Pay with" } + }, + "footer": { + "body": "Swap functionality is powered by a third party, Squid. Immutable neither builds, owns, operates or deploys Squid." } } }, diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/SquidFooter.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/SquidFooter.tsx new file mode 100644 index 0000000000..11862ef22b --- /dev/null +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/SquidFooter.tsx @@ -0,0 +1,26 @@ +import { Body, Link } from '@biom3/react'; +import { Trans, useTranslation } from 'react-i18next'; + +export function SquidFooter() { + const { t } = useTranslation(); + + return ( + + } + />, + }} + /> + + ); +} 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..055346303d 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 @@ -30,6 +30,10 @@ export const fetchTokens = async (integratorId: string): Promise => { const data: SquidTokensResponse = await response.json(); + if (!data.tokens) { + return []; + } + return data.tokens.map((tokenResponse: SquidTokenResponse) => ({ chainId: tokenResponse.chainId.toString(), address: tokenResponse.address, diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/getFormattedNumber.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/getFormattedNumber.ts index b7f83e3300..edbcbe6cb4 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/getFormattedNumber.ts +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/getFormattedNumber.ts @@ -45,3 +45,12 @@ export function getFormattedNumber( return getFormattedAmounts(formattedValue, maxDecimals); } + +export function getFormattedNumberWithDecimalPlaces(value: string | number, decimals = 2) : string { + const amount = typeof value === 'number' ? value : parseFloat(value); + + return amount.toLocaleString('en-US', { + minimumFractionDigits: 0, + maximumFractionDigits: decimals, + }); +} 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 422437c7d0..219decd6f4 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 @@ -62,6 +62,10 @@ import { import { validateToAmount } from '../functions/amountValidation'; import { OnboardingDrawer } from '../components/OnboardingDrawer'; import { useError } from '../hooks/useError'; +import { SquidFooter } from '../components/SquidFooter'; +import { + getFormattedNumberWithDecimalPlaces, +} from '../functions/getFormattedNumber'; interface AddFundsProps { checkout: Checkout; @@ -620,7 +624,7 @@ export function AddFunds({ USD $ - {selectedAmountUsd.toFixed(2)} + {getFormattedNumberWithDecimalPlaces(selectedAmountUsd)} )} @@ -630,12 +634,12 @@ export function AddFunds({ sx={{ alignSelf: 'stretch', p: 'base.spacing.x3', - pb: 'base.spacing.x10', + pb: 'base.spacing.x5', bg: 'base.color.neutral.800', bradtl: 'base.borderRadius.x8', bradtr: 'base.borderRadius.x8', }} - gap="base.spacing.x6" + gap="base.spacing.x4" > Review + + + 1 - {route.route.estimate.fromToken.name} + {' '} + {route.route.estimate.fromToken.symbol} {' '} = {' '} - {route.route.estimate.exchangeRate} + {getFormattedNumberWithDecimalPlaces(route.route.estimate.exchangeRate)} {' '} {route.route.estimate.toToken.name} @@ -666,10 +669,12 @@ export function Review({ size="large" onClick={handleTransaction} disabled={proceedDisabled} - sx={{ mt: 'auto', mb: 'base.spacing.x4', mx: 'base.spacing.x3' }} + sx={{ mx: 'base.spacing.x3' }} > {proceedDisabled ? 'Processing' : 'Proceed'} + + )}