@lifi/widget 3.0.0-alpha.11 → 3.0.0-alpha.13

package/hooks/useTokenBalance.ts

@@ -11,37 +11,27 @@ export const useTokenBalance = (
   token?: Token,
   chain?: ExtendedChain,
 ) => {
-  const { account } = useAccount();
+  const { account, accounts } = useAccount();
   const queryClient = useQueryClient();
   const walletAddress =
     accountAddress ||
     // When we provide chain we want to be sure that account address used is from the same ecosystem as token
-    !chain
-      ? account.address
-      : chain.chainType === account.chainType
-        ? account.address
-        : undefined;
+    (chain
+      ? accounts.find((account) => account.chainType === chain.chainType)
+          ?.address
+      : account.address);
 
   const tokenBalanceQueryKey = useMemo(
-    () => ['token-balance', walletAddress, token?.chainId, token?.address],
+    () =>
+      ['token-balance', walletAddress, token?.chainId, token?.address] as const,
     [token?.address, token?.chainId, walletAddress],
   );
 
   const { data, isLoading, refetch } = useQuery({
     queryKey: tokenBalanceQueryKey,
-    queryFn: async ({ queryKey: [, accountAddress] }) => {
-      const cachedToken = queryClient
-        .getQueryData<Token[]>([
-          'token-balances',
-          accountAddress,
-          token!.chainId,
-        ])
-        ?.find((t) => t.address === token!.address);
-
-      if (cachedToken) {
-        return cachedToken as TokenAmount;
-      }
-
+    queryFn: async ({
+      queryKey: [, accountAddress, tokenChainId, tokenAddress],
+    }) => {
       const tokenBalances = await getTokenBalancesWithRetry(
         accountAddress as string,
         [token!],
@@ -64,12 +54,12 @@ export const useTokenBalance = (
       }
 
       queryClient.setQueriesData<TokenAmount[]>(
-        { queryKey: ['token-balances', accountAddress, token!.chainId] },
+        { queryKey: ['token-balances', accountAddress, tokenChainId] },
         (data) => {
           if (data) {
             const clonedData = [...data];
             const index = clonedData.findIndex(
-              (dataToken) => dataToken.address === token!.address,
+              (dataToken) => dataToken.address === tokenAddress,
             );
             clonedData[index] = {
               ...clonedData[index],

package/hooks/useTokenBalances.ts

@@ -83,6 +83,7 @@ export const useTokenBalances = (selectedChainId?: number) => {
     tokens,
     tokensWithBalance,
     featuredTokens,
+    chain,
     isLoading,
     isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
     refetch,

package/hooks/useTools.ts

@@ -1,7 +1,8 @@
 import { getTools, type ToolsResponse } from '@lifi/sdk';
 import { useQuery } from '@tanstack/react-query';
-import { isItemAllowed, useWidgetConfig } from '../providers';
+import { useWidgetConfig } from '../providers';
 import { useSettingsStore } from '../stores';
+import { isItemAllowed } from '../utils';
 
 export const useTools = () => {
   const { bridges, exchanges } = useWidgetConfig();

package/hooks/useTransactionHistory.ts

@@ -1,49 +1,59 @@
+import type { StatusResponse } from '@lifi/sdk';
 import { getTransactionHistory, type ExtendedTransactionInfo } from '@lifi/sdk';
-import { useQuery } from '@tanstack/react-query';
+import type { QueryFunction } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 import { useAccount } from './useAccount';
 
 export const useTransactionHistory = () => {
-  const { account } = useAccount();
+  const { accounts } = useAccount();
 
-  const { data, isLoading, refetch } = useQuery({
-    queryKey: ['transaction-history', account.address],
-    queryFn: async ({ queryKey: [, accountAddress], signal }) => {
-      if (!accountAddress) {
-        return [];
-      }
-      const date = new Date();
-      date.setFullYear(date.getFullYear() - 10);
+  const { data, isLoading } = useQueries({
+    queries: accounts.map((account) => ({
+      queryKey: ['transaction-history', account.address],
+      queryFn: (async ({ queryKey: [, accountAddress], signal }) => {
+        if (!accountAddress) {
+          return [];
+        }
+        const date = new Date();
+        date.setFullYear(date.getFullYear() - 10);
 
-      const response = await getTransactionHistory(
-        {
-          wallet: accountAddress,
-          fromTimestamp: date.getTime() / 1000,
-          toTimestamp: Date.now() / 1000,
-        },
-        { signal },
-      );
+        const response = await getTransactionHistory(
+          {
+            wallet: accountAddress,
+            fromTimestamp: date.getTime() / 1000,
+            toTimestamp: Date.now() / 1000,
+          },
+          { signal },
+        );
 
-      const filteredTransactions = response.transfers
+        return response.transfers;
+      }) as QueryFunction<StatusResponse[], (string | undefined)[], never>,
+      refetchInterval: 300000,
+      enabled: Boolean(account.address),
+    })),
+    combine: (results) => {
+      const data = results
+        .filter((result) => result.data)
+        .flatMap((result) => result.data)
         .filter(
           (transaction) =>
-            transaction.receiving.chainId && transaction.sending.chainId,
+            transaction?.receiving.chainId && transaction.sending.chainId,
         )
         .sort((a, b) => {
           return (
-            ((b.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
-            ((a.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
+            ((b?.sending as ExtendedTransactionInfo)?.timestamp ?? 0) -
+            ((a?.sending as ExtendedTransactionInfo)?.timestamp ?? 0)
           );
-        });
-
-      return filteredTransactions;
+        }) as StatusResponse[];
+      return {
+        data: data,
+        isLoading: results.some((result) => result.isLoading),
+      };
     },
-    refetchInterval: 300000,
-    enabled: Boolean(account.address),
   });
 
   return {
-    data: data ?? [],
+    data,
     isLoading,
-    refetch,
   };
 };

package/i18n/en.json

@@ -14,6 +14,7 @@
     "buyNow": "Buy now",
     "cancel": "Cancel",
     "changeWallet": "Change wallet",
+    "close": "Close",
     "connectWallet": "Connect wallet",
     "contactSupport": "Contact support",
     "continue": "Continue",
@@ -105,7 +106,7 @@
       "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
       "rateChanged": "The exchange rate has changed. By continuing the transaction, you'll accept the new rate.",
       "resetSettings": "This will reset your route priority, slippage, gas price, enabled bridges and exchanges.",
-      "slippageOutsideRecommendedLimits": "High tolerance may result in unfavorable trade caused by front running."
+      "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running."
     },
     "title": {
       "deleteActiveTransactions": "Delete all active transactions?",
@@ -149,8 +150,6 @@
     }
   },
   "tooltip": {
-    "additionalProviderFee": "Additional bridges, DEXs, and service fees.",
-    "estimatedNetworkFee": "Estimated network fee.",
     "estimatedTime": "Estimated execution time in minutes.",
     "notFound": {
       "text": "We couldn't find this page.",
@@ -166,13 +165,18 @@
   "main": {
     "crossStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "currentAmount": "Current amount",
-    "estimatedTime": "{{value}}m",
     "featuredTokens": "Featured tokens",
+    "fees": {
+      "estimated": "estimated fees",
+      "networkEstimated": "Estimated network fees:",
+      "networkPaid": "Paid network fees:",
+      "paid": "paid fees",
+      "providerEstimated": "Estimated provider fees:",
+      "providerPaid": "Paid provider fees:"
+    },
     "from": "From",
     "fromAmount": "You pay",
     "gasCost": "Gas cost",
-    "gasFeeEstimated": "estimated gas fee",
-    "gasFeePaid": "gas fee paid",
     "inProgress": "in progress",
     "nftStepDetails": "Purchase NFT via {{tool}}",
     "onChain": "on {{chainName}}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.0.0-alpha.11",
+  "version": "3.0.0-alpha.13",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./_cjs/index.js",
@@ -33,31 +33,31 @@
     "lifi"
   ],
   "dependencies": {
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@lifi/sdk": "^3.0.0-alpha.39",
-    "@lifi/wallet-management": "^3.0.0-alpha.7",
-    "@mui/icons-material": "^5.15.0",
-    "@mui/lab": "^5.0.0-alpha.156",
-    "@mui/material": "^5.15.0",
+    "@lifi/sdk": "^3.0.0-alpha.47",
+    "@lifi/wallet-management": "^3.0.0-alpha.9",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/lab": "^5.0.0-alpha.160",
+    "@mui/material": "^5.15.4",
     "@solana/wallet-adapter-base": "^0.9.23",
     "@solana/wallet-adapter-react": "^0.15.35",
-    "@solana/wallet-adapter-wallets": "^0.19.24",
-    "@solana/web3.js": "^1.87.6",
-    "@tanstack/react-query": "^5.13.4",
+    "@solana/wallet-adapter-wallets": "^0.19.25",
+    "@solana/web3.js": "^1.89.0",
+    "@tanstack/react-query": "^5.17.12",
     "@tanstack/react-virtual": "^3.0.1",
-    "i18next": "^23.7.9",
+    "i18next": "^23.7.16",
     "microdiff": "^1.3.2",
     "mitt": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.5.0",
+    "react-i18next": "^14.0.0",
     "react-intersection-observer": "^9.5.3",
-    "react-router-dom": "^6.21.0",
+    "react-router-dom": "^6.21.2",
     "react-timer-hook": "^3.0.7",
     "uuid": "^9.0.1",
-    "viem": "^2.0.0-beta.15",
-    "wagmi": "^2.0.0-beta.8",
+    "viem": "^2.0.10",
+    "wagmi": "^2.2.1",
     "zustand": "^4.4.7"
   },
   "peerDependencies": {

package/pages/ActiveTransactionsPage/ActiveTransactionsPage.tsx

@@ -1,7 +1,6 @@
 import DeleteIcon from '@mui/icons-material/DeleteOutline';
 import {
   Button,
-  Container,
   DialogActions,
   DialogContent,
   DialogContentText,
@@ -13,7 +12,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ActiveTransactionItem } from '../../components/ActiveTransactions';
 import { Dialog } from '../../components/Dialog';
-import { useAccount } from '../../hooks';
+import { PageContainer } from '../../components/PageContainer';
 import {
   useExecutingRoutesIds,
   useHeaderStoreContext,
@@ -23,8 +22,7 @@ import { ActiveTransactionsEmpty } from './ActiveTransactionsEmpty';
 
 export const ActiveTransactionsPage = () => {
   const { t } = useTranslation();
-  const { account } = useAccount();
-  const executingRoutes = useExecutingRoutesIds(account.address);
+  const executingRoutes = useExecutingRoutesIds();
   const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
   const headerStoreContext = useHeaderStoreContext();
   const [open, setOpen] = useState(false);
@@ -48,7 +46,7 @@ export const ActiveTransactionsPage = () => {
   }
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
           paddingLeft: 1.5,
@@ -77,6 +75,6 @@ export const ActiveTransactionsPage = () => {
           </Button>
         </DialogActions>
       </Dialog>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/LanguagesPage/LanguagesPage.tsx

@@ -1,7 +1,8 @@
 import CheckIcon from '@mui/icons-material/Check';
-import { Container, List } from '@mui/material';
+import { List } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { ListItemText } from '../../components/ListItemText';
+import { PageContainer } from '../../components/PageContainer';
 import { SettingsListItemButton } from '../../components/SettingsListItemButton';
 import { useLanguages } from '../../hooks';
 
@@ -16,7 +17,7 @@ export const LanguagesPage: React.FC = () => {
   }
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
           paddingLeft: 1.5,
@@ -33,6 +34,6 @@ export const LanguagesPage: React.FC = () => {
           </SettingsListItemButton>
         ))}
       </List>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/MainPage/MainPage.tsx

@@ -3,6 +3,7 @@ import { ActiveTransactions } from '../../components/ActiveTransactions';
 import { AmountInput } from '../../components/AmountInput';
 import { ContractComponent } from '../../components/ContractComponent';
 import { GasRefuelMessage } from '../../components/GasMessage';
+import { PageContainer } from '../../components/PageContainer';
 import { Routes } from '../../components/Routes';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken';
 import {
@@ -12,7 +13,6 @@ import {
 import { useExpandableVariant } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import { MainGasMessage } from './MainGasMessage';
-import { FormContainer } from './MainPage.style';
 import { ReviewButton } from './ReviewButton';
 
 export const MainPage: React.FC = () => {
@@ -20,23 +20,23 @@ export const MainPage: React.FC = () => {
   const { subvariant, contractComponent } = useWidgetConfig();
   const nft = subvariant === 'nft';
   return (
-    <FormContainer disableGutters>
-      <ActiveTransactions mx={3} mt={1} mb={1} />
+    <PageContainer>
+      <ActiveTransactions mt={1} mb={2} />
       {nft ? (
-        <ContractComponent mx={3} mt={1} mb={1}>
+        <ContractComponent mt={1} mb={2}>
           {contractComponent}
         </ContractComponent>
       ) : null}
-      <SelectChainAndToken mt={1} mx={3} mb={2} />
-      {!nft ? <AmountInput formType="from" mx={3} mb={2} /> : null}
-      {!expandable ? <Routes mx={3} mb={2} /> : null}
-      <SendToWallet mx={3} mb={2} />
-      <GasRefuelMessage mx={3} mb={2} />
-      <MainGasMessage mx={3} mb={2} />
-      <Box display="flex" mx={3} mb={1}>
+      <SelectChainAndToken mt={1} mb={2} />
+      {!nft ? <AmountInput formType="from" mb={2} /> : null}
+      {!expandable ? <Routes mb={2} /> : null}
+      <SendToWallet mb={2} />
+      <GasRefuelMessage mb={2} />
+      <MainGasMessage mb={2} />
+      <Box display="flex" mb={1}>
         <ReviewButton />
         <SendToWalletButton />
       </Box>
-    </FormContainer>
+    </PageContainer>
   );
 };

package/pages/RoutesPage/RoutesPage.tsx

@@ -46,7 +46,6 @@ export const RoutesPage: React.FC<BoxProps> = () => {
           onClick={() => refetch()}
           sx={{ marginRight: -1 }}
           size="medium"
-          edge="end"
         />,
       );
   }, [dataUpdatedAt, headerStoreContext, isFetching, refetch, refetchTime]);
@@ -68,7 +67,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
             route={route}
             onClick={() => handleRouteClick(route)}
             active={index === 0}
-            expanded={routes?.length <= 2}
+            expanded={routes?.length === 1}
           />
         ))
       )}

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,8 +1,9 @@
 import type { ExtendedChain } from '@lifi/sdk';
-import { Avatar, Container, List, ListItemAvatar } from '@mui/material';
+import { Avatar, List, ListItemAvatar } from '@mui/material';
 import { useChainSelect } from '../../components/ChainSelect';
 import { ListItemButton } from '../../components/ListItemButton';
 import { ListItemText } from '../../components/ListItemText';
+import { PageContainer } from '../../components/PageContainer';
 import { useTokenSelect } from '../../components/TokenList';
 import { useNavigateBack } from '../../hooks';
 import type { SelectChainPageProps } from './types';
@@ -25,7 +26,7 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   };
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
           paddingLeft: 1.5,
@@ -43,6 +44,6 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
           </ListItemButton>
         ))}
       </List>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SelectEnabledToolsPage/SelectEnabledToolsPage.tsx

@@ -4,7 +4,6 @@ import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
 import IndeterminateCheckBoxOutlinedIcon from '@mui/icons-material/IndeterminateCheckBoxOutlined';
 import {
   Avatar,
-  Container,
   IconButton,
   List,
   ListItemAvatar,
@@ -15,6 +14,7 @@ import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 import { ListItemText } from '../../components/ListItemText';
+import { PageContainer } from '../../components/PageContainer';
 import { SettingsListItemButton } from '../../components/SettingsListItemButton';
 import { useTools } from '../../hooks';
 import { useHeaderStoreContext, useSettingsStore } from '../../stores';
@@ -103,7 +103,7 @@ export const SelectEnabledToolsPage: React.FC<{
   }, [enabledTools.length, headerStoreContext, setTools, tools, type, typeKey]);
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
           paddingLeft: 1.5,
@@ -125,6 +125,6 @@ export const SelectEnabledToolsPage: React.FC<{
           </SettingsListItemButton>
         ))}
       </List>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SelectNativeTokenPage/SelectNativeTokenPage.tsx

@@ -1,7 +1,8 @@
-import { Container, List, ListItemAvatar } from '@mui/material';
+import { List, ListItemAvatar } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { ListItemButton } from '../../components/ListItemButton';
 import { ListItemText } from '../../components/ListItemText';
+import { PageContainer } from '../../components/PageContainer';
 import { TokenAvatar } from '../../components/TokenAvatar';
 import { useTokenSelect } from '../../components/TokenList';
 import { useChains, useNavigateBack } from '../../hooks';
@@ -16,7 +17,7 @@ export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
   const selectToken = useTokenSelect(formType, navigateBack);
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
           paddingLeft: 1.5,
@@ -38,6 +39,6 @@ export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
           </ListItemButton>
         ))}
       </List>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -3,8 +3,8 @@ import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../../components/Card';
-import { Input } from './SearchTokenInput.style';
 import { useFieldActions, useFieldController } from '../../stores';
+import { Input } from './SearchTokenInput.style';
 
 export const SearchTokenInput = () => {
   const { t } = useTranslation();
@@ -26,7 +26,6 @@ export const SearchTokenInput = () => {
         <Input
           size="small"
           placeholder={t(`main.tokenSearch`) as string}
-          defaultValue=""
           endAdornment={
             <InputAdornment position="end">
               <SearchIcon />

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,7 +1,8 @@
-import { Box, Container } from '@mui/material';
+import { Box } from '@mui/material';
 import type { FC } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
 import { ChainSelect } from '../../components/ChainSelect';
+import { PageContainer } from '../../components/PageContainer';
 import { TokenList } from '../../components/TokenList';
 import {
   useContentHeight,
@@ -34,7 +35,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   const hideChainSelect = swapOnly && formType === 'to';
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <Box pt={1} pb={2} px={3} ref={headerRef}>
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
         <Box mt={!hideChainSelect ? 2 : 0}>
@@ -46,6 +47,6 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
         onClick={navigateBack}
         formType={formType}
       />
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -2,7 +2,6 @@ import { isWalletInstalled } from '@lifi/wallet-management';
 import type { Theme } from '@mui/material';
 import {
   Button,
-  Container,
   DialogActions,
   DialogContent,
   DialogContentText,
@@ -17,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 import type { Connector } from 'wagmi';
 import { useConnect, useAccount as useWagmiAccount } from 'wagmi';
 import { Dialog } from '../../components/Dialog';
+import { PageContainer } from '../../components/PageContainer';
 import { EVMListItemButton } from './EVMListItemButton';
 import { SVMListItemButton } from './SVMListItemButton';
 import { walletComparator } from './utils';
@@ -85,7 +85,7 @@ export const SelectWalletPage = () => {
   }, [account.connector?.id, connectors, isDesktopView, solanaWallets]);
 
   return (
-    <Container disableGutters>
+    <PageContainer disableGutters>
       <List
         sx={{
           paddingLeft: 1.5,
@@ -122,6 +122,6 @@ export const SelectWalletPage = () => {
           </Button>
         </DialogActions>
       </Dialog>
-    </Container>
+    </PageContainer>
   );
 };

package/pages/SettingsPage/ResetSettingsButton.tsx

@@ -32,7 +32,7 @@ export const ResetSettingsButton: React.FC = () => {
   }
 
   return (
-    <Box px={3} mb={1}>
+    <Box my={1}>
       <ResetButtonContainer>
         <Box display="flex" marginBottom="12px">
           <InfoRounded

package/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -6,7 +6,7 @@ export const SettingsList = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(1),
-  padding: theme.spacing(1, 3, 2),
+  padding: theme.spacing(1, 0, 1),
 }));
 
 export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
@@ -15,18 +15,18 @@ export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
   gap: theme.spacing(1.5),
 }));
 
-export const SummaryRowContainer = styled(Box)({
+export const SummaryRowContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-});
+  padding: theme.spacing(1),
+}));
 
-export const SummaryRowButton = styled(ButtonBase)({
+export const SummaryRowButton = styled(ButtonBase)(({ theme }) => ({
   background: 'none',
   color: 'inherit',
   border: 'none',
-  padding: 0,
   font: 'inherit',
   cursor: 'pointer',
   outline: 'inherit',
@@ -34,7 +34,8 @@ export const SummaryRowButton = styled(ButtonBase)({
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-});
+  padding: theme.spacing(1),
+}));
 
 export const SummaryValue = styled(Typography)({
   lineHeight: '1.25',

package/pages/SettingsPage/SettingsCard/SettingCard.tsx

@@ -7,7 +7,7 @@ export const SettingCard: React.FC<PropsWithChildren> = ({ children }) => {
       variant="default"
       selectionColor="primary"
       sx={{
-        p: 2,
+        p: 1,
       }}
     >
       {children}