@lifi/widget 3.0.0-alpha.31 → 3.0.0-alpha.32

package/pages/MainPage/MainPage.tsx

@@ -4,19 +4,23 @@ import { AmountInput } from '../../components/AmountInput/AmountInput.js';
 import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
 import { GasRefuelMessage } from '../../components/GasMessage/GasRefuelMessage.js';
 import { PageContainer } from '../../components/PageContainer.js';
+import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js';
 import { Routes } from '../../components/Routes/Routes.js';
 import { SelectChainAndToken } from '../../components/SelectChainAndToken.js';
 import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js';
 import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
 import { useExpandableVariant } from '../../hooks/useExpandableVariant.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { HiddenUI } from '../../types/widget.js';
 import { MainGasMessage } from './MainGasMessage.js';
 import { ReviewButton } from './ReviewButton.js';
 
 export const MainPage: React.FC = () => {
   const expandable = useExpandableVariant();
-  const { subvariant, contractComponent } = useWidgetConfig();
+  const { subvariant, contractComponent, hiddenUI } = useWidgetConfig();
   const nft = subvariant === 'nft';
+  const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy);
+
   return (
     <PageContainer>
       <ActiveTransactions mt={1} mb={2} />
@@ -28,13 +32,14 @@ export const MainPage: React.FC = () => {
       <SelectChainAndToken mt={1} mb={2} />
       {!nft ? <AmountInput formType="from" mb={2} /> : null}
       {!expandable ? <Routes mb={2} /> : null}
-      <SendToWalletButton />
+      <SendToWalletButton mb={2} />
       <GasRefuelMessage mb={2} />
       <MainGasMessage mb={2} />
-      <Box display="flex" mb={1}>
+      <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>
         <ReviewButton />
         <SendToWalletExpandButton />
       </Box>
+      {showPoweredBy ? <PoweredBy /> : null}
     </PageContainer>
   );
 };

package/pages/RoutesPage/RoutesPage.style.ts

@@ -2,5 +2,5 @@ import { Stack as MuiStack, styled } from '@mui/material';
 
 export const Stack = styled(MuiStack)(({ theme }) => ({
   position: 'relative',
-  padding: theme.spacing(1, 3),
+  padding: theme.spacing(1, 3, 3, 3),
 }));

package/pages/SelectChainPage/SelectChainPage.tsx

@@ -31,6 +31,7 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
         sx={{
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {chains?.map((chain) => (

package/pages/SelectEnabledToolsPage.tsx

@@ -92,6 +92,7 @@ export const SelectEnabledToolsPage: React.FC<{
         sx={{
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {tools?.[typeKey].map((tool) => (

package/pages/SelectNativeTokenPage.tsx

@@ -23,6 +23,7 @@ export const SelectNativeTokenPage: React.FC<FormTypeProps> = ({
         sx={{
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {chains?.map((chain) => (

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -106,6 +106,7 @@ export const SelectWalletPage = () => {
         sx={{
           paddingLeft: 1.5,
           paddingRight: 1.5,
+          paddingBottom: 1.5,
         }}
       >
         {wallets?.map((connector) =>

package/pages/SendToWallet/EmptyListIndicator.tsx

@@ -1,9 +1,6 @@
+import { Typography } from '@mui/material';
 import type { PropsWithChildren, ReactNode } from 'react';
-import {
-  EmptyContainer,
-  EmptyListMessage,
-  IconContainer,
-} from './SendToWalletPage.style.js';
+import { EmptyContainer, IconContainer } from './SendToWalletPage.style.js';
 
 interface EmptyListIndicatorProps extends PropsWithChildren {
   icon: ReactNode;
@@ -14,6 +11,8 @@ export const EmptyListIndicator = ({
 }: EmptyListIndicatorProps) => (
   <EmptyContainer>
     <IconContainer>{icon}</IconContainer>
-    <EmptyListMessage>{children}</EmptyListMessage>
+    <Typography fontSize={14} fontWeight={700} color="text.secondary">
+      {children}
+    </Typography>
   </EmptyContainer>
 );

package/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -1,5 +1,3 @@
-import { LoadingButton, loadingButtonClasses } from '@mui/lab';
-import type { Theme } from '@mui/material';
 import {
   Alert,
   Box,
@@ -10,6 +8,7 @@ import {
   inputBaseClasses,
   styled,
 } from '@mui/material';
+import { ButtonTertiary } from '../../components/ButtonTertiary.js';
 import { Card } from '../../components/Card/Card.js';
 import { Input } from '../../components/Input.js';
 import type { PageContainerProps } from '../../components/PageContainer.js';
@@ -39,10 +38,10 @@ export const SendToWalletPageContainer = styled(
   gap: theme.spacing(1),
 }));
 
-export const SendToWalletCard = styled(Card)(({ theme }) => ({
+export const SendToWalletCard = styled(Card)({
   display: 'flex',
   flexDirection: 'column',
-}));
+});
 
 export const SendToWalletSheetContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
@@ -58,48 +57,11 @@ export const SendToWalletButtonRow = styled(Box)(({ theme }) => ({
   gap: theme.spacing(1),
 }));
 
-const tertiaryButtonStyles = (theme: Theme) => ({
-  color: theme.palette.text.primary,
-  height: 40,
-  fontSize: 14,
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[200]
-      : theme.palette.grey[800],
-  '&:hover, &:active': {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[300]
-        : theme.palette.grey[700],
-  },
-  [`&.${loadingButtonClasses.loading}:disabled`]: {
-    backgroundColor:
-      theme.palette.mode === 'light'
-        ? theme.palette.grey[200]
-        : theme.palette.grey[800],
-  },
-  [`.${loadingButtonClasses.loadingIndicator}`]: {
-    color: theme.palette.text.primary,
-  },
-});
-
-export const SendToWalletButton = styled(LoadingButton)(({ theme }) => ({
-  ...tertiaryButtonStyles(theme),
-}));
-
-export const SendToWalletIconButton = styled(LoadingButton)(({ theme }) => ({
-  ...tertiaryButtonStyles(theme),
+export const SendToWalletIconButton = styled(ButtonTertiary)(({ theme }) => ({
   padding: theme.spacing(1.25),
   minWidth: 40,
 }));
 
-export const WalletNumber = styled(Typography)(({ theme }) => ({
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[600]
-      : theme.palette.grey[400],
-}));
-
 export const IconContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   justifyContent: 'center',
@@ -131,7 +93,7 @@ export const ListContainer = styled(List)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   minHeight: 400,
-  paddingBottom: theme.spacing(3),
+  paddingBottom: theme.spacing(1.5),
 }));
 
 export const BookmarkButtonContainer = styled(Box)(({ theme }) => ({
@@ -155,15 +117,6 @@ export const EmptyContainer = styled(Box)(({ theme }) => ({
   gap: theme.spacing(2),
 }));
 
-export const EmptyListMessage = styled(Typography)(({ theme }) => ({
-  fontSize: 14,
-  fontWeight: 700,
-  color:
-    theme.palette.mode === 'light'
-      ? theme.palette.grey[600]
-      : theme.palette.grey[400],
-}));
-
 export const ValidationAlert = styled(Alert)(({ theme }) => ({
   backgroundColor: 'transparent',
   padding: 0,
@@ -180,6 +133,6 @@ export const OptionsMenuButton = styled(IconButton)(({ theme }) => ({
   top: theme.spacing(1.75),
   right: theme.spacing(2),
   '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
+    backgroundColor: getContrastAlphaColor(theme, 0.04),
   },
 }));

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,10 +1,11 @@
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
-import { Tooltip } from '@mui/material';
+import { Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { ButtonTertiary } from '../../components/ButtonTertiary.js';
 import { CardButton } from '../../components/Card/CardButton.js';
 import { useAccount } from '../../hooks/useAccount.js';
 import {
@@ -23,13 +24,11 @@ import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { ConfirmAddressSheet } from './ConfirmAddressSheet.js';
 import {
   AddressInput,
-  SendToWalletButton,
   SendToWalletButtonRow,
   SendToWalletCard,
   SendToWalletIconButton,
   SendToWalletPageContainer,
   ValidationAlert,
-  WalletNumber,
 } from './SendToWalletPage.style.js';
 
 export const SendToWalletPage = () => {
@@ -201,7 +200,7 @@ export const SendToWalletPage = () => {
           </ValidationAlert>
         ) : null}
         <SendToWalletButtonRow sx={{ paddingX: 2, paddingBottom: 2 }}>
-          <SendToWalletButton
+          <ButtonTertiary
             variant="text"
             onClick={handleDone}
             loading={isDoneButtonLoading}
@@ -209,7 +208,7 @@ export const SendToWalletPage = () => {
             sx={{ flexGrow: 1 }}
           >
             {t('button.done')}
-          </SendToWalletButton>
+          </ButtonTertiary>
           <Tooltip title={t('button.bookmark')} arrow>
             <SendToWalletIconButton
               onClick={handleBookmarkAddress}
@@ -237,7 +236,7 @@ export const SendToWalletPage = () => {
         onClick={handleRecentWalletsClick}
       >
         {!!recentWallets.length && (
-          <WalletNumber>{recentWallets.length}</WalletNumber>
+          <Typography color="text.secondary">{recentWallets.length}</Typography>
         )}
       </CardButton>
       <CardButton
@@ -246,7 +245,9 @@ export const SendToWalletPage = () => {
         onClick={handleConnectedWalletsClick}
       >
         {!!connectedWallets.length && (
-          <WalletNumber>{connectedWallets.length}</WalletNumber>
+          <Typography color="text.secondary">
+            {connectedWallets.length}
+          </Typography>
         )}
       </CardButton>
       <CardButton
@@ -254,7 +255,9 @@ export const SendToWalletPage = () => {
         icon={<TurnedIn />}
         onClick={handleBookmarkedWalletsClick}
       >
-        {!!bookmarks.length && <WalletNumber>{bookmarks.length}</WalletNumber>}
+        {!!bookmarks.length && (
+          <Typography color="text.secondary">{bookmarks.length}</Typography>
+        )}
       </CardButton>
     </SendToWalletPageContainer>
   );

package/pages/SettingsPage/ResetSettingsButton.style.tsx

@@ -2,11 +2,11 @@ import { Box, styled } from '@mui/material';
 import { getContrastAlphaColor } from '../../utils/colors.js';
 
 export const ResetButtonContainer = styled(Box)(({ theme }) => ({
-  background: getContrastAlphaColor(theme.palette.mode, '4%'),
+  background: getContrastAlphaColor(theme, 0.04),
   borderRadius: '16px',
   padding: '16px',
 
   [`svg`]: {
-    fill: getContrastAlphaColor(theme.palette.mode, '40%'),
+    fill: getContrastAlphaColor(theme, 0.4),
   },
 }));

package/pages/SettingsPage/ResetSettingsButton.tsx

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

package/pages/SettingsPage/RoutePrioritySettings.tsx

@@ -1,4 +1,4 @@
-import { Orders } from '@lifi/sdk';
+import type { Order } from '@lifi/sdk';
 import { Route } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs } from '../../components/Tabs/Tabs.style.js';
@@ -8,7 +8,7 @@ import { useSettingsStore } from '../../stores/settings/useSettingsStore.js';
 import { BadgedValue } from './SettingsCard/BadgedValue.js';
 import { SettingCardExpandable } from './SettingsCard/SettingCardExpandable.js';
 
-type SupportedRoute = (typeof Orders)[number];
+const Priorities: Order[] = ['CHEAPEST', 'FASTEST'];
 
 export const RoutePrioritySettings: React.FC = () => {
   const { t } = useTranslation();
@@ -19,7 +19,7 @@ export const RoutePrioritySettings: React.FC = () => {
 
   const handleRoutePriorityChange = (
     _: React.SyntheticEvent,
-    routePriority: SupportedRoute,
+    routePriority: Order,
   ) => {
     setValue('routePriority', routePriority);
   };
@@ -42,12 +42,12 @@ export const RoutePrioritySettings: React.FC = () => {
         orientation="vertical"
         sx={{ mt: 1.5 }}
       >
-        {Orders.map((order) => {
+        {Priorities.map((priority) => {
           return (
             <Tab
-              key={order}
-              label={t(`main.tags.${order.toLowerCase()}` as any)}
-              value={order}
+              key={priority}
+              label={t(`main.tags.${priority.toLowerCase()}` as any)}
+              value={priority}
               disableRipple
             />
           );

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

@@ -4,15 +4,6 @@ export const SettingsList = styled(Box)(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: theme.spacing(1),
-  padding: theme.spacing(1, 0, 1),
-}));
-
-export const SummaryRowContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(2),
 }));
 
 export const Badge = styled(MuiBadge)(({ theme }) => ({

package/pages/SettingsPage/SettingsPage.tsx

@@ -11,7 +11,7 @@ import { ThemeSettings } from './ThemeSettings.js';
 
 export const SettingsPage = () => {
   return (
-    <PageContainer>
+    <PageContainer topBottomGutters>
       <SettingsList>
         <SettingsCardAccordion>
           <ThemeSettings />

package/pages/SettingsPage/SlippageSettings/SlippageSettings.style.tsx

@@ -22,10 +22,7 @@ export const SettingsFieldSet = styled(Box)(({ theme }) => ({
 }));
 
 const slippageControlSelected = (theme: Theme) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark'
-      ? theme.palette.background.default
-      : theme.palette.common.white,
+  backgroundColor: theme.palette.background.paper,
   borderRadius: theme.shape.borderRadiusSecondary,
   boxShadow: `0px 2px 4px ${alpha(theme.palette.common.black, 0.04)}`,
 });

package/pages/TransactionDetailsPage/TransactionDetailsPage.tsx

@@ -145,7 +145,7 @@ export const TransactionDetailsPage: React.FC = () => {
           {supportId}
         </Typography>
       </Card>
-      <Box mt={2} mb={2.5}>
+      <Box mt={2}>
         <ContactSupportButton supportId={supportId} />
       </Box>
     </PageContainer>

package/stores/bookmarks/createBookmarkStore.ts

@@ -5,7 +5,8 @@ import type { ToAddress } from '../../types/widget.js';
 import type { PersistStoreProps } from '../types.js';
 import type { BookmarkState } from './types.js';
 
-const recentWalletsLimit = 5;
+const recentWalletsLimit = 10;
+
 interface PersistBookmarkProps extends PersistStoreProps {
   toAddress?: ToAddress;
 }

package/stores/form/useFieldController.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import type { FormFieldNames } from './types.js';
-import { useFieldValues } from './useFieldValues.js';
 import { useFieldActions } from './useFieldActions.js';
+import { useFieldValues } from './useFieldValues.js';
 
 interface UseFieldControllerProps {
   name: FormFieldNames;
@@ -13,7 +13,7 @@ export const useFieldController = ({ name }: UseFieldControllerProps) => {
 
   const onChange = useCallback(
     (newValue: string | number | undefined) => {
-      setFieldValue(name, newValue, { isDirty: true });
+      setFieldValue(name, newValue, { isDirty: true, isTouched: true });
     },
     [name, setFieldValue],
   );

package/stores/settings/useSettingsStore.ts

@@ -11,7 +11,7 @@ export const defaultConfigurableSettings: Pick<
   SettingsState,
   'routePriority' | 'slippage' | 'gasPrice'
 > = {
-  routePriority: 'RECOMMENDED',
+  routePriority: 'CHEAPEST',
   slippage: defaultSlippage,
   gasPrice: 'normal',
 };
@@ -111,7 +111,7 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
     }),
     {
       name: `li.fi-widget-settings`,
-      version: 3,
+      version: 4,
       partialize: (state) => {
         const { disabledBridges, disabledExchanges, ...partializedState } =
           state;
@@ -133,6 +133,9 @@ export const useSettingsStore = createWithEqualityFn<SettingsState>(
         if (version === 1) {
           persistedState.slippage = defaultConfigurableSettings.slippage;
         }
+        if (version <= 3) {
+          persistedState.routePriority = 'CHEAPEST';
+        }
         return persistedState as SettingsState;
       },
     },

package/types/widget.ts

@@ -39,7 +39,6 @@ export type DisabledUIType = `${DisabledUI}`;
 
 export enum HiddenUI {
   Appearance = 'appearance',
-  DrawerButton = 'drawerButton',
   DrawerCloseButton = 'drawerCloseButton',
   History = 'history',
   Language = 'language',

package/utils/colors.ts

@@ -1,11 +1,10 @@
-import type { PaletteMode, Theme } from '@mui/material';
+import type { Theme } from '@mui/material';
 import { alpha } from '@mui/material';
 
-export const getContrastAlphaColor = (
-  mode: PaletteMode,
-  alpha: string | number,
-) =>
-  mode === 'light' ? `rgb(0 0 0 / ${alpha})` : `rgb(255 255 255 / ${alpha})`;
+export const getContrastAlphaColor = (theme: Theme, value: number) =>
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.common.black, value)
+    : alpha(theme.palette.common.white, value);
 
 export const getWarningBackgroundColor = (theme: Theme) =>
   theme.palette.mode === 'light'
@@ -18,6 +17,6 @@ export const getInfoBackgroundColor = (theme: Theme) =>
     : alpha(theme.palette.info.main, 0.16);
 
 export const getCardFieldsetBackgroundColor = (theme: Theme) =>
-  theme.palette.mode === 'dark'
-    ? theme.palette.grey[800]
-    : alpha(theme.palette.common.black, 0.04);
+  theme.palette.mode === 'light'
+    ? alpha(theme.palette.common.black, 0.04)
+    : theme.palette.grey[800];