@lifi/widget 3.0.0-alpha.17 → 3.0.0-alpha.19

package/pages/SettingsPage/SendToWalletOptionSetting.tsx

@@ -10,11 +10,11 @@ import {
 } from '../../stores';
 import { HiddenUI } from '../../types';
 import {
-  SettingCard,
-  SummaryRowContainer,
-  SummaryTitleContainer,
-  SummaryValue,
-} from './SettingsCard';
+  Card,
+  CardRowContainer,
+  CardTitleContainer,
+  CardValue,
+} from '../../components/Card';
 
 export const SendToWalletOptionSetting = () => {
   const { t } = useTranslation();
@@ -35,14 +35,14 @@ export const SendToWalletOptionSetting = () => {
   };
 
   return (
-    <SettingCard>
-      <SummaryRowContainer>
-        <SummaryTitleContainer>
+    <Card>
+      <CardRowContainer>
+        <CardTitleContainer>
           <WalletIcon />
-          <SummaryValue>{t(`settings.sendToWalletOption`)}</SummaryValue>
-        </SummaryTitleContainer>
+          <CardValue>{t(`settings.sendToWalletOption`)}</CardValue>
+        </CardTitleContainer>
         <Switch checked={showDestinationWallet} onChange={onChange} />
-      </SummaryRowContainer>
-    </SettingCard>
+      </CardRowContainer>
+    </Card>
   );
 };

package/pages/SettingsPage/SettingsCard/BadgedValue.tsx

@@ -1,6 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import type { BadgeProps } from '@mui/material';
-import { SummaryValue, Badge } from './SettingCard.style';
+import { CardValue } from '../../../components/Card';
+import { Badge } from './SettingCard.style';
 
 interface BadgedValueProps {
   showBadge: boolean;
@@ -14,8 +15,8 @@ export const BadgedValue: React.FC<PropsWithChildren<BadgedValueProps>> = ({
 }) =>
   showBadge && badgeColor ? (
     <Badge variant="dot" color={badgeColor}>
-      <SummaryValue>{children}</SummaryValue>
+      <CardValue>{children}</CardValue>
     </Badge>
   ) : (
-    <SummaryValue>{children}</SummaryValue>
+    <CardValue>{children}</CardValue>
   );

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

@@ -1,4 +1,4 @@
-import { Box, ButtonBase, Badge as MuiBadge, Typography } from '@mui/material';
+import { Box, Badge as MuiBadge } from '@mui/material';
 import { badgeClasses } from '@mui/material/Badge';
 import { styled } from '@mui/material/styles';
 
@@ -9,39 +9,14 @@ export const SettingsList = styled(Box)(({ theme }) => ({
   padding: theme.spacing(1, 0, 1),
 }));
 
-export const SummaryTitleContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(1.5),
-}));
-
 export const SummaryRowContainer = styled(Box)(({ theme }) => ({
   display: 'flex',
   width: '100%',
   justifyContent: 'space-between',
   alignItems: 'center',
-  padding: theme.spacing(1),
+  padding: theme.spacing(2),
 }));
 
-export const SummaryRowButton = styled(ButtonBase)(({ theme }) => ({
-  background: 'none',
-  color: 'inherit',
-  border: 'none',
-  font: 'inherit',
-  cursor: 'pointer',
-  outline: 'inherit',
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(1),
-}));
-
-export const SummaryValue = styled(Typography)({
-  lineHeight: '1.25',
-  fontWeight: 500,
-});
-
 export const Badge = styled(MuiBadge)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',

package/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -2,12 +2,12 @@ import type { PropsWithChildren, ReactNode } from 'react';
 import { useId } from 'react';
 import { Collapse } from '@mui/material';
 import type { SettingCardTitle } from './types';
-import { SettingCard } from './SettingCard';
 import {
-  SummaryRowButton,
-  SummaryValue,
-  SummaryTitleContainer,
-} from './SettingCard.style';
+  Card,
+  CardRowButton,
+  CardValue,
+  CardTitleContainer,
+} from '../../../components/Card';
 import { useSettingsCardExpandable } from './SettingsAccordian';
 
 interface SettingCardExpandableProps extends SettingCardTitle {
@@ -22,20 +22,21 @@ export const SettingCardExpandable: React.FC<
   const collapseId = useId();
 
   return (
-    <SettingCard>
-      <SummaryRowButton
+    <Card sx={{ p: 1 }}>
+      <CardRowButton
         id={buttonId}
         aria-expanded={expanded}
         aria-controls={collapseId}
         onClick={toggleExpanded}
         disableRipple
+        sx={{ p: 1 }}
       >
-        <SummaryTitleContainer>
+        <CardTitleContainer>
           {icon}
-          <SummaryValue>{title}</SummaryValue>
-        </SummaryTitleContainer>
+          <CardValue>{title}</CardValue>
+        </CardTitleContainer>
         {!expanded && value}
-      </SummaryRowButton>
+      </CardRowButton>
       <Collapse
         id={collapseId}
         role="region"
@@ -44,6 +45,6 @@ export const SettingCardExpandable: React.FC<
       >
         {children}
       </Collapse>
-    </SettingCard>
+    </Card>
   );
 };

package/pages/SettingsPage/SettingsCard/index.ts

@@ -1,6 +1,4 @@
-export * from './SettingCard';
 export * from './SettingCard.style';
-export * from './SettingCardButton';
 export * from './SettingCardExpandable';
 export * from './BadgedValue';
 export * from './SettingsAccordian';

package/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -26,7 +26,7 @@ export const SlippageSettings: React.FC = () => {
   const { slippage } = useSettings(['slippage']);
   const setValue = useSettingsStore((state) => state.setValue);
   const defaultValue = useRef(slippage);
-  const [focused, setFocused] = useState<'input' | 'button' | undefined>();
+  const [focused, setFocused] = useState<'input' | 'button'>();
 
   const handleDefaultClick = () => {
     setValue('slippage', formatSlippage(defaultSlippage, defaultValue.current));

package/pages/SettingsPage/ThemeSettings.tsx

@@ -4,11 +4,12 @@ import NightlightIcon from '@mui/icons-material/Nightlight';
 import { Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { Tab, Tabs } from '../../components/Tabs';
+import { CardValue } from '../../components/Card';
 import { useWidgetConfig } from '../../providers';
 import { useAppearance } from '../../stores';
 import type { Appearance } from '../../types';
 import { HiddenUI } from '../../types';
-import { SettingCardExpandable, SummaryValue } from './SettingsCard';
+import { SettingCardExpandable } from './SettingsCard';
 
 const themeIcons = {
   light: LightModeIcon,
@@ -55,7 +56,7 @@ export const ThemeSettings: React.FC = () => {
 
   return (
     <SettingCardExpandable
-      value={<SummaryValue>{t(`button.${appearance}`)} </SummaryValue>}
+      value={<CardValue>{t(`button.${appearance}`)} </CardValue>}
       icon={<ThemeIcon />}
       title={t('settings.theme')}
     >

package/providers/I18nProvider/I18nProvider.tsx

@@ -1,7 +1,7 @@
 import type { i18n } from 'i18next';
 import { createInstance } from 'i18next';
 import { useMemo } from 'react';
-import { I18nextProvider, initReactI18next } from 'react-i18next';
+import { I18nextProvider } from 'react-i18next';
 import * as supportedLanguages from '../../i18n';
 import { useSettings } from '../../stores';
 import { deepMerge, isItemAllowed } from '../../utils';
@@ -58,7 +58,7 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
       returnEmptyString: false,
     });
 
-    i18n.use(initReactI18next).init();
+    i18n.init();
 
     return i18n;
   }, [language, languageResources, languages]);

package/providers/WalletProvider/SDKProviders.tsx

@@ -1,4 +1,5 @@
-import { EVM, SDKProvider, Solana, config } from '@lifi/sdk';
+import type { SDKProvider } from '@lifi/sdk';
+import { EVM, Solana, config } from '@lifi/sdk';
 import type { WalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { getWalletClient, switchChain } from '@wagmi/core';

package/stores/StoreProvider.tsx

@@ -5,6 +5,7 @@ import { FormStoreProvider } from './form';
 import { HeaderStoreProvider } from './header';
 import { RouteExecutionStoreProvider } from './routes';
 import { SplitSubvariantStoreProvider } from './settings';
+import { BookmarkStoreProvider } from './bookmarks';
 
 export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   children,
@@ -20,11 +21,13 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     >
       <HeaderStoreProvider namePrefix={config?.keyPrefix}>
         <FormStoreProvider>
-          <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
-            <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
-              {children}
-            </RouteExecutionStoreProvider>
-          </ChainOrderStoreProvider>
+          <BookmarkStoreProvider namePrefix={config?.keyPrefix}>
+            <ChainOrderStoreProvider namePrefix={config?.keyPrefix}>
+              <RouteExecutionStoreProvider namePrefix={config?.keyPrefix}>
+                {children}
+              </RouteExecutionStoreProvider>
+            </ChainOrderStoreProvider>
+          </BookmarkStoreProvider>
         </FormStoreProvider>
       </HeaderStoreProvider>
     </SplitSubvariantStoreProvider>

package/stores/bookmarks/BookmarkStore.tsx

@@ -0,0 +1,39 @@
+import { createContext, useContext, useRef } from 'react';
+import { shallow } from 'zustand/shallow';
+import type { PersistStoreProviderProps } from '../types';
+import { createBookmarksStore } from './createBookmarkStore';
+import type { BookmarkState, BookmarkStore } from './types';
+
+export const BookmarkStoreContext = createContext<BookmarkStore | null>(null);
+
+export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
+  children,
+  ...props
+}) => {
+  const storeRef = useRef<BookmarkStore>();
+
+  if (!storeRef.current) {
+    storeRef.current = createBookmarksStore(props);
+  }
+
+  return (
+    <BookmarkStoreContext.Provider value={storeRef.current}>
+      {children}
+    </BookmarkStoreContext.Provider>
+  );
+};
+
+export function useBookmarkStore<T>(
+  selector: (store: BookmarkState) => T,
+  equalityFunction = shallow,
+) {
+  const useStore = useContext(BookmarkStoreContext);
+
+  if (!useStore) {
+    throw new Error(
+      `You forgot to wrap your component in <${BookmarkStoreProvider.name}>.`,
+    );
+  }
+
+  return useStore(selector, equalityFunction);
+}

package/stores/bookmarks/createBookmarkStore.ts

@@ -0,0 +1,63 @@
+import type { StateCreator } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { createWithEqualityFn } from 'zustand/traditional';
+import type { PersistStoreProps } from '../types';
+import type { BookmarkState } from './types';
+
+const recentWalletsLimit = 5;
+
+export const createBookmarksStore = ({ namePrefix }: PersistStoreProps) =>
+  createWithEqualityFn<BookmarkState>(
+    persist(
+      (set, get) => ({
+        selectedBookmark: undefined,
+        bookmarks: [],
+        recentWallets: [],
+        getBookmark: (address) =>
+          get().bookmarks.find((bookmark) => bookmark.address === address),
+        addBookmark: (bookmark) => {
+          set((state) => ({
+            bookmarks: [bookmark, ...state.bookmarks],
+          }));
+        },
+        removeBookmark: (address) => {
+          set((state) => ({
+            bookmarks: state.bookmarks.filter(
+              (storedBookmark) => storedBookmark.address !== address,
+            ),
+          }));
+        },
+        setSelectedBookmark: (bookmark) => {
+          set((state) => ({
+            selectedBookmark: bookmark,
+          }));
+        },
+        addRecentWallet: (bookmark) => {
+          set((state) => ({
+            recentWallets: [
+              bookmark,
+              ...state.recentWallets.filter(
+                (recentWallet) => recentWallet.address !== bookmark.address,
+              ),
+            ].slice(0, recentWalletsLimit),
+          }));
+        },
+        removeRecentWallet: (address) => {
+          set((state) => ({
+            recentWallets: state.recentWallets.filter(
+              (storedRecent) => storedRecent.address !== address,
+            ),
+          }));
+        },
+      }),
+      {
+        name: `${namePrefix || 'li.fi'}-bookmarks`,
+        version: 0,
+        partialize: (state) => ({
+          bookmarks: state.bookmarks,
+          recentWallets: state.recentWallets,
+        }),
+      },
+    ) as StateCreator<BookmarkState, [], [], BookmarkState>,
+    Object.is,
+  );

package/stores/bookmarks/index.ts

@@ -0,0 +1,5 @@
+export * from './BookmarkStore';
+export * from './createBookmarkStore';
+export * from './types';
+export * from './useBookmarkActions';
+export * from './useBookmarks';

package/stores/bookmarks/types.ts

@@ -0,0 +1,31 @@
+import type { ChainType } from '@lifi/sdk';
+import type { StoreApi } from 'zustand';
+import type { UseBoundStoreWithEqualityFn } from 'zustand/esm/traditional';
+
+export interface Bookmark {
+  address: string;
+  chainType: ChainType;
+  name?: string;
+  isConnectedAccount?: boolean;
+}
+
+export interface BookmarkProps {
+  selectedBookmark?: Bookmark;
+  bookmarks: Bookmark[];
+  recentWallets: Bookmark[];
+}
+
+export interface BookmarkActions {
+  getBookmark: (address: string) => Bookmark | undefined;
+  addBookmark: (bookmark: Bookmark) => void;
+  removeBookmark: (address: string) => void;
+  setSelectedBookmark: (bookmark?: Bookmark) => void;
+  addRecentWallet: (bookmark: Bookmark) => void;
+  removeRecentWallet: (address: string) => void;
+}
+
+export type BookmarkState = BookmarkProps & BookmarkActions;
+
+export type BookmarkStore = UseBoundStoreWithEqualityFn<
+  StoreApi<BookmarkState>
+>;

package/stores/bookmarks/useBookmarkActions.ts

@@ -0,0 +1,19 @@
+import { shallow } from 'zustand/shallow';
+import { useBookmarkStore } from './BookmarkStore';
+import type { BookmarkActions } from './types';
+
+export const useBookmarkActions = () => {
+  const actions = useBookmarkStore<BookmarkActions>(
+    (store) => ({
+      getBookmark: store.getBookmark,
+      addBookmark: store.addBookmark,
+      removeBookmark: store.removeBookmark,
+      setSelectedBookmark: store.setSelectedBookmark,
+      addRecentWallet: store.addRecentWallet,
+      removeRecentWallet: store.removeRecentWallet,
+    }),
+    shallow,
+  );
+
+  return actions;
+};

package/stores/bookmarks/useBookmarks.ts

@@ -0,0 +1,16 @@
+import { shallow } from 'zustand/shallow';
+import { useBookmarkStore } from './BookmarkStore';
+import type { BookmarkProps } from './types';
+
+export const useBookmarks = (): BookmarkProps => {
+  const [bookmarks, selectedBookmark, recentWallets] = useBookmarkStore(
+    (store) => [store.bookmarks, store.selectedBookmark, store.recentWallets],
+    shallow,
+  );
+
+  return {
+    bookmarks,
+    selectedBookmark,
+    recentWallets,
+  };
+};

package/stores/form/FormStore.tsx

@@ -2,6 +2,7 @@ import type { PropsWithChildren } from 'react';
 import { createContext, useContext, useMemo, useRef } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
 import { FormUpdater } from './FormUpdater';
 import { createFormStore, formDefaultValues } from './createFormStore';
 import type { FormStoreStore, FormValuesState } from './types';
@@ -11,10 +12,19 @@ export const FormStoreContext = createContext<FormStoreStore | null>(null);
 export const FormStoreProvider: React.FC<PropsWithChildren> = ({
   children,
 }) => {
-  const { fromChain, fromToken, fromAmount, toChain, toToken, toAddress } =
-    useWidgetConfig();
+  const {
+    fromChain,
+    fromToken,
+    fromAmount,
+    toChain,
+    toToken,
+    toAddress,
+    hiddenUI,
+  } = useWidgetConfig();
   const storeRef = useRef<FormStoreStore>();
 
+  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+
   const defaultValues = useMemo(
     () => ({
       ...formDefaultValues,
@@ -26,9 +36,20 @@ export const FormStoreProvider: React.FC<PropsWithChildren> = ({
         (typeof fromAmount === 'number'
           ? fromAmount?.toPrecision()
           : fromAmount) || formDefaultValues.fromAmount,
-      toAddress: toAddress || formDefaultValues.toAddress,
+      // Prevent setting address when the field is hidden
+      toAddress: hiddenToAddress
+        ? formDefaultValues.toAddress
+        : toAddress || formDefaultValues.toAddress,
     }),
-    [fromAmount, fromChain, fromToken, toAddress, toChain, toToken],
+    [
+      fromAmount,
+      fromChain,
+      fromToken,
+      hiddenToAddress,
+      toAddress,
+      toChain,
+      toToken,
+    ],
   );
 
   if (!storeRef.current) {

package/stores/form/types.ts

@@ -39,9 +39,8 @@ export interface FormValues {
 }
 
 export type FormFieldNames = keyof FormValues;
-export type ExtractValueType<T> = T extends FormValueControl<infer U>
-  ? U
-  : never;
+export type ExtractValueType<T> =
+  T extends FormValueControl<infer U> ? U : never;
 export type FormFieldArray<T extends FormFieldNames[]> = {
   [K in keyof T]: ExtractValueType<FormValues[T[K]]>;
 };

package/stores/index.ts

@@ -4,3 +4,4 @@ export * from './header';
 export * from './routes';
 export * from './settings';
 export * from './form';
+export * from './bookmarks';

package/utils/chainType.ts

@@ -0,0 +1,25 @@
+import { ChainId, ChainType } from '@lifi/sdk';
+import { isAddress as isEVMAddress } from 'viem';
+import { isSVMAddress } from './svm';
+
+const chainTypeAddressValidation = {
+  [ChainType.EVM]: isEVMAddress,
+  [ChainType.SVM]: isSVMAddress,
+};
+
+export const getChainTypeFromAddress = (
+  address: string,
+): ChainType | undefined => {
+  for (const chainType in chainTypeAddressValidation) {
+    const isChainType =
+      chainTypeAddressValidation[chainType as ChainType](address);
+    if (isChainType) {
+      return chainType as ChainType;
+    }
+  }
+};
+
+export const defaultChainIdsByType = {
+  [ChainType.EVM]: ChainId.ETH,
+  [ChainType.SVM]: ChainId.SOL,
+};

package/utils/index.ts

@@ -4,6 +4,7 @@ export * from './elements';
 export * from './enum';
 export * from './fees';
 export * from './format';
+export * from './chainType';
 export * from './input';
 export * from './item';
 export * from './navigationRoutes';

package/utils/navigationRoutes.ts

@@ -15,6 +15,10 @@ export const navigationRoutes = {
   transactionDetails: 'transaction-details',
   transactionExecution: 'transaction-execution',
   transactionHistory: 'transaction-history',
+  sendToWallet: 'send-to-wallet',
+  bookmarks: 'bookmarks',
+  recentWallets: 'recent-wallets',
+  connectedWallets: 'connected-wallets',
 };
 
 export const navigationRoutesValues = Object.values(navigationRoutes);
@@ -33,6 +37,10 @@ export const stickyHeaderRoutes = [
   navigationRoutes.transactionDetails,
   navigationRoutes.transactionExecution,
   navigationRoutes.transactionHistory,
+  navigationRoutes.sendToWallet,
+  navigationRoutes.bookmarks,
+  navigationRoutes.recentWallets,
+  navigationRoutes.connectedWallets,
 ];
 
 export const backButtonRoutes = [
@@ -51,6 +59,10 @@ export const backButtonRoutes = [
   navigationRoutes.transactionDetails,
   navigationRoutes.transactionExecution,
   navigationRoutes.transactionHistory,
+  navigationRoutes.sendToWallet,
+  navigationRoutes.bookmarks,
+  navigationRoutes.recentWallets,
+  navigationRoutes.connectedWallets,
 ];
 
 export type NavigationRouteType = keyof typeof navigationRoutes;

package/_cjs/components/SendToWallet/SendToWallet.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import type { BoxProps } from '@mui/material';
-export declare const SendToWallet: React.FC<BoxProps>;
-export declare const SendToWalletFormHelperText: React.FC;