[NO CHANGELOG] [Add Funds Widget] Add funds legal footer (#2340)

immutable · Oct 22, 2024 · a4353ff · a4353ff
1 parent fcca155
commit a4353ff
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 6 deletions.
diff --git 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 <squidLink>Squid</squidLink>."
       }
     }
   },

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
@@ -0,0 +1,26 @@
+import { Body, Link } from '@biom3/react';
+import { Trans, useTranslation } from 'react-i18next';
+
+export function SquidFooter() {
+  const { t } = useTranslation();
+
+  return (
+    <Body
+      size="xSmall"
+      sx={{
+        textAlign: 'center',
+        color: 'base.color.text.body.secondary',
+      }}
+    >
+      <Trans
+        i18nKey={t('views.ADD_FUNDS.footer.body')}
+        components={{
+          squidLink: <Link
+            size="xSmall"
+            rc={<a target="_blank" href=" https://app.squidrouter.com" rel="noreferrer" />}
+          />,
+        }}
+      />
+    </Body>
+  );
+}
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
@@ -30,6 +30,10 @@ export const fetchTokens = async (integratorId: string): Promise<Token[]> => {
 
   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
@@ -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
@@ -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({
 
               <HeroFormControl.Caption>
                 USD $
-                {selectedAmountUsd.toFixed(2)}
+                {getFormattedNumberWithDecimalPlaces(selectedAmountUsd)}
               </HeroFormControl.Caption>
             </HeroFormControl>
           )}
@@ -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"
         >
           <Stack gap="0px">
             <SelectedWallet
@@ -700,6 +704,9 @@ export function AddFunds({
           >
             Review
           </Button>
+
+          <SquidFooter />
+
           <PayWithWalletDrawer
             visible={showPayWithDrawer}
             walletOptions={walletOptions}

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
@@ -63,8 +63,10 @@ import { getRouteChains } from '../functions/getRouteChains';
 import {
   getFormattedAmounts,
   getFormattedNumber,
+  getFormattedNumberWithDecimalPlaces,
 } from '../functions/getFormattedNumber';
 import { convertToNetworkChangeableProvider } from '../functions/convertToNetworkChangeableProvider';
+import { SquidFooter } from '../components/SquidFooter';
 
 interface ReviewProps {
   data: AddFundsReviewData;
@@ -524,11 +526,12 @@ export function Review({
                     Powered by Squid
                     <br />
                     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}
                   </Body>
@@ -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'}
             </Button>
+
+            <SquidFooter />
           </>
         )}