@lifi/widget 3.7.0-beta.7 → 3.7.0

package/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,11 +1,8 @@
-import { Search } from '@mui/icons-material';
-import { FormControl, InputAdornment } from '@mui/material';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { InputCard } from '../../components/Card/InputCard.js';
+import { SearchInput } from '../../components/Search/SearchInput.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useFieldController } from '../../stores/form/useFieldController.js';
-import { Input } from './SearchTokenInput.style.js';
 
 export const SearchTokenInput = () => {
   const { t } = useTranslation();
@@ -22,27 +19,12 @@ export const SearchTokenInput = () => {
   );
 
   return (
-    <InputCard>
-      <FormControl fullWidth>
-        <Input
-          size="small"
-          placeholder={t(`main.tokenSearch`) as string}
-          endAdornment={
-            <InputAdornment position="end">
-              <Search />
-            </InputAdornment>
-          }
-          inputProps={{
-            inputMode: 'search',
-            onChange: (e) => onChange((e.target as HTMLInputElement).value),
-            onBlur,
-            name,
-            value,
-            maxLength: 128,
-          }}
-          autoComplete="off"
-        />
-      </FormControl>
-    </InputCard>
+    <SearchInput
+      name={name}
+      placeholder={t(`main.tokenSearch`)}
+      onChange={(e) => onChange((e.target as HTMLInputElement).value)}
+      onBlur={onBlur}
+      value={value as string | undefined}
+    />
   );
 };

package/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js';
-import { PageContainer } from '../../components/PageContainer.js';
+import { FullPageContainer } from '../../components/FullPageContainer.js';
 import { TokenList } from '../../components/TokenList/TokenList.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useNavigateBack } from '../../hooks/useNavigateBack.js';
@@ -40,7 +40,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   const hideChainSelect = swapOnly && formType === 'to';
 
   return (
-    <PageContainer disableGutters>
+    <FullPageContainer disableGutters>
       <Box pb={2} px={3} ref={headerRef}>
         {!hideChainSelect ? <ChainSelect formType={formType} /> : null}
         <Box mt={!hideChainSelect ? 2 : 0}>
@@ -55,6 +55,6 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           formType={formType}
         />
       </Box>
-    </PageContainer>
+    </FullPageContainer>
   );
 };

package/pages/SelectTokenPage/useTokenListHeight.ts

@@ -1,30 +1,21 @@
-import { useTheme } from '@mui/material';
+import { debounce, useTheme } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
 import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { ElementId, createElementId } from '../../utils/elements.js';
-
-const debounce = (func: Function, timeout = 300) => {
-  let timer: ReturnType<typeof setTimeout>;
-  return (...args: any[]) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, timeout);
-  };
-};
+import {
+  ElementId,
+  getAppContainer,
+  getHeaderElement,
+  getScrollableContainer,
+} from '../../utils/elements.js';
 
 const getContentHeight = (
   elementId: string,
   listParentRef: MutableRefObject<HTMLUListElement | null>,
 ) => {
-  const containerElement = document.getElementById(
-    createElementId(ElementId.ScrollableContainer, elementId),
-  );
+  const containerElement = getScrollableContainer(elementId);
 
-  const headerElement = document.getElementById(
-    createElementId(ElementId.Header, elementId),
-  );
+  const headerElement = getHeaderElement(elementId);
 
   const listParentElement = listParentRef?.current;
 
@@ -63,6 +54,10 @@ interface UseContentHeightProps {
 export const minTokenListHeight = 360;
 export const minMobileTokenListHeight = 160;
 
+// NOTE: this hook is implicitly tied to the widget height functionality in the
+//   AppExpandedContainer, RelativeContainer and CssBaselineContainer components as defined in AppContainer.ts
+//   CSS changes in those components can have implications for the functionality in this hook
+
 export const useTokenListHeight = ({
   listParentRef,
   headerRef,
@@ -81,9 +76,7 @@ export const useTokenListHeight = ({
     // calling this on initial mount prevents the lists resizing appearing glitchy
     handleResize();
 
-    const appContainer = document.getElementById(
-      createElementId(ElementId.AppExpandedContainer, elementId),
-    );
+    const appContainer = getAppContainer(elementId);
 
     let resizeObserver: ResizeObserver;
     if (appContainer) {

package/pages/SelectWalletPage/EVMListItemButton.tsx

@@ -0,0 +1,74 @@
+import { ChainType } from '@lifi/sdk';
+import type { CreateConnectorFnExtended } from '@lifi/wallet-management';
+import {
+  getConnectorIcon,
+  isWalletInstalledAsync,
+} from '@lifi/wallet-management';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import type { Connector } from 'wagmi';
+import { useConnect, useDisconnect } from 'wagmi';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
+
+interface EVMListItemButtonProps {
+  connectedConnector?: Connector;
+  connector: CreateConnectorFnExtended | Connector;
+  onNotInstalled(connector: Connector): void;
+}
+
+export const EVMListItemButton = ({
+  connectedConnector,
+  connector,
+  onNotInstalled,
+}: EVMListItemButtonProps) => {
+  const { navigateBack } = useNavigateBack();
+  const emitter = useWidgetEvents();
+  const { connectAsync } = useConnect();
+  const { disconnectAsync } = useDisconnect();
+
+  const handleEVMConnect = async () => {
+    const identityCheckPassed = await isWalletInstalledAsync(
+      (connector as Connector).id,
+    );
+    if (!identityCheckPassed) {
+      onNotInstalled(connector as Connector);
+      return;
+    }
+    if (connectedConnector) {
+      await disconnectAsync({ connector: connectedConnector });
+    }
+    await connectAsync(
+      { connector },
+      {
+        onSuccess(data) {
+          emitter.emit(WidgetEvent.WalletConnected, {
+            address: data.accounts[0],
+            chainId: data.chainId,
+            chainType: ChainType.EVM,
+          });
+        },
+      },
+    );
+    navigateBack();
+  };
+
+  const connectorName: string =
+    (connector as CreateConnectorFnExtended).displayName || connector.name;
+
+  return (
+    <ListItemButton key={connector.id} onClick={handleEVMConnect}>
+      <ListItemAvatar>
+        <Avatar
+          src={getConnectorIcon(connector as Connector)}
+          alt={connectorName}
+        >
+          {connectorName?.[0]}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={connectorName} />
+    </ListItemButton>
+  );
+};

package/pages/SelectWalletPage/SVMListItemButton.tsx

@@ -0,0 +1,47 @@
+import { ChainId, ChainType } from '@lifi/sdk';
+import { Avatar, ListItemAvatar } from '@mui/material';
+import type { Wallet } from '@solana/wallet-adapter-react';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { ListItemButton } from '../../components/ListItemButton.js';
+import { ListItemText } from '../../components/ListItemText.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
+import { WidgetEvent } from '../../types/events.js';
+
+interface SVMListItemButtonProps {
+  wallet: Wallet;
+}
+
+export const SVMListItemButton = ({ wallet }: SVMListItemButtonProps) => {
+  const { navigateBack } = useNavigateBack();
+  const emitter = useWidgetEvents();
+  const { select, disconnect, connected } = useWallet();
+
+  const connect = async () => {
+    if (connected) {
+      await disconnect();
+    }
+    select(wallet.adapter.name);
+    // We use autoConnect on wallet selection
+    // await solanaConnect();
+    wallet.adapter.once('connect', (publicKey) => {
+      emitter.emit(WidgetEvent.WalletConnected, {
+        address: publicKey?.toString(),
+        chainId: ChainId.SOL,
+        chainType: ChainType.SVM,
+      });
+    });
+    navigateBack();
+  };
+
+  return (
+    <ListItemButton key={wallet.adapter.name} onClick={connect}>
+      <ListItemAvatar>
+        <Avatar src={wallet.adapter.icon} alt={wallet.adapter.name}>
+          {wallet.adapter.name[0]}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={`${wallet.adapter.name} (Solana)`} />
+    </ListItemButton>
+  );
+};

package/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -0,0 +1,90 @@
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  List,
+} from '@mui/material';
+import type { Wallet } from '@solana/wallet-adapter-react';
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Connector } from 'wagmi';
+import { useAccount as useWagmiAccount } from 'wagmi';
+import { Dialog } from '../../components/Dialog.js';
+import { PageContainer } from '../../components/PageContainer.js';
+import { useHeader } from '../../hooks/useHeader.js';
+import { useWallets } from '../../hooks/useWallets.js';
+import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
+import { EVMListItemButton } from './EVMListItemButton.js';
+import { SVMListItemButton } from './SVMListItemButton.js';
+
+export const SelectWalletPage = () => {
+  const { t } = useTranslation();
+  const { chains, walletConfig } = useWidgetConfig();
+  const account = useWagmiAccount();
+  const [walletIdentity, setWalletIdentity] = useState<{
+    show: boolean;
+    connector?: Connector;
+  }>({ show: false });
+
+  useHeader(t(`header.selectWallet`));
+
+  const closeDialog = () => {
+    setWalletIdentity((state) => ({
+      ...state,
+      show: false,
+    }));
+  };
+
+  const handleNotInstalled = useCallback(async (connector: Connector) => {
+    setWalletIdentity({
+      show: true,
+      connector,
+    });
+  }, []);
+
+  const wallets = useWallets(walletConfig, chains);
+
+  return (
+    <PageContainer disableGutters>
+      <List
+        sx={{
+          paddingTop: 0,
+          paddingLeft: 1.5,
+          paddingRight: 1.5,
+          paddingBottom: 1.5,
+        }}
+      >
+        {wallets?.map((connector) =>
+          (connector as Connector).id ? (
+            <EVMListItemButton
+              key={(connector as Connector).id}
+              connector={connector as Connector}
+              connectedConnector={account.connector}
+              onNotInstalled={handleNotInstalled}
+            />
+          ) : (
+            <SVMListItemButton
+              key={(connector as Wallet).adapter.name}
+              wallet={connector as Wallet}
+            />
+          ),
+        )}
+      </List>
+      <Dialog open={walletIdentity.show} onClose={closeDialog}>
+        <DialogContent>
+          <DialogContentText>
+            {t('wallet.extensionNotFound', {
+              name: walletIdentity.connector?.name,
+            })}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" onClick={closeDialog} autoFocus>
+            {t('button.ok')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </PageContainer>
+  );
+};

package/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,5 +1,3 @@
-import type { Account } from '@lifi/wallet-management';
-import { useAccount } from '@lifi/wallet-management';
 import {
   ContentCopyRounded,
   MoreHoriz,
@@ -14,6 +12,8 @@ import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
+import type { Account } from '../../hooks/useAccount.js';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useExplorer } from '../../hooks/useExplorer.js';
 import { useHeader } from '../../hooks/useHeader.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';

package/pages/SendToWallet/SendToWalletPage.tsx

@@ -1,4 +1,3 @@
-import { useAccount } from '@lifi/wallet-management';
 import { Error, History, TurnedIn, Wallet } from '@mui/icons-material';
 import { Box, Tooltip, Typography } from '@mui/material';
 import type { ChangeEvent } from 'react';
@@ -8,6 +7,7 @@ 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 {
   AddressType,
   useAddressValidation,

package/pages/TransactionPage/StatusBottomSheet.tsx

@@ -301,7 +301,12 @@ export const StatusBottomSheetContent: React.FC<
         <Typography py={1}>{secondaryMessage}</Typography>
       ) : null}
       {VcComponent ? <VcComponent route={route} /> : null}
-      <Box mt={2}>
+      <Box sx={{ display: 'flex', marginTop: 2, gap: 1.5 }}>
+        {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
+          <Button variant="text" onClick={handleSeeDetails} fullWidth>
+            {t('button.seeDetails')}
+          </Button>
+        ) : null}
         <Button variant="contained" fullWidth onClick={handlePrimaryButton}>
           {status === RouteExecutionStatus.Idle ? t('button.ok') : null}
           {hasEnumFlag(status, RouteExecutionStatus.Done)
@@ -312,13 +317,6 @@ export const StatusBottomSheetContent: React.FC<
             : null}
         </Button>
       </Box>
-      {hasEnumFlag(status, RouteExecutionStatus.Done) ? (
-        <Box mt={2}>
-          <Button variant="text" onClick={handleSeeDetails} fullWidth>
-            {t('button.seeDetails')}
-          </Button>
-        </Box>
-      ) : null}
     </Box>
   );
 };

package/providers/I18nProvider/types.ts

@@ -12,14 +12,14 @@ export type LanguageResource = typeof languages.en;
 
 export type LanguageResources =
   | {
-      [K in LanguageKey]?: PartialResource<LanguageResource>;
+      [language in LanguageKey]?: PartialResource<LanguageResource>;
     }
   | {
       [language: string]: PartialResource<LanguageResource>;
     };
 
 export type LanguageTranslationResource = {
-  [N in 'translation']: PartialResource<LanguageResource>;
+  [namespace in 'translation']: PartialResource<LanguageResource>;
 };
 
 export type LanguageTranslationResources = {

package/providers/WalletProvider/SDKProviders.tsx

@@ -1,24 +1,16 @@
 import type { SDKProvider } from '@lifi/sdk';
-import { ChainType, EVM, Solana, UTXO, config } from '@lifi/sdk';
-import {
-  getConnectorClient as getBigmiConnectorClient,
-  useConfig as useBigmiConfig,
-} from '@lifi/wallet-management';
+import { ChainType, EVM, Solana, config } from '@lifi/sdk';
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base';
 import { useWallet } from '@solana/wallet-adapter-react';
-import {
-  getConnectorClient as getWagmiConnectorClient,
-  switchChain,
-} from '@wagmi/core';
+import { getWalletClient, switchChain } from '@wagmi/core';
 import { useEffect } from 'react';
-import { useConfig as useWagmiConfig } from 'wagmi';
+import { useConfig } from 'wagmi';
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
 
 export const SDKProviders = () => {
   const { sdkConfig } = useWidgetConfig();
   const { wallet } = useWallet();
-  const wagmiConfig = useWagmiConfig();
-  const bigmiConfig = useBigmiConfig();
+  const wagmiConfig = useConfig();
 
   useEffect(() => {
     // Configure SDK Providers
@@ -29,16 +21,13 @@ export const SDKProviders = () => {
     const hasConfiguredSVMProvider = sdkConfig?.providers?.some(
       (provider) => provider.type === ChainType.SVM,
     );
-    const hasConfiguredUTXOProvider = sdkConfig?.providers?.some(
-      (provider) => provider.type === ChainType.UTXO,
-    );
     if (!hasConfiguredEVMProvider) {
       providers.push(
         EVM({
-          getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
+          getWalletClient: () => getWalletClient(wagmiConfig),
           switchChain: async (chainId: number) => {
             const chain = await switchChain(wagmiConfig, { chainId });
-            return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id });
+            return getWalletClient(wagmiConfig, { chainId: chain.id });
           },
         }),
       );
@@ -52,18 +41,11 @@ export const SDKProviders = () => {
         }),
       );
     }
-    if (!hasConfiguredUTXOProvider) {
-      providers.push(
-        UTXO({
-          getWalletClient: () => getBigmiConnectorClient(bigmiConfig),
-        }),
-      );
-    }
     if (sdkConfig?.providers?.length) {
       providers.push(...sdkConfig?.providers);
     }
     config.setProviders(providers);
-  }, [bigmiConfig, sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
+  }, [sdkConfig?.providers, wagmiConfig, wallet?.adapter]);
 
   return null;
 };

package/providers/WalletProvider/WalletProvider.tsx

@@ -1,36 +1,15 @@
-import type { WalletManagementConfig } from '@lifi/wallet-management';
-import { WalletManagementProvider } from '@lifi/wallet-management';
-import { useMemo, type FC, type PropsWithChildren } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js';
+import { type FC, type PropsWithChildren } from 'react';
 import { EVMProvider } from './EVMProvider.js';
 import { SDKProviders } from './SDKProviders.js';
 import { SVMProvider } from './SVMProvider.js';
-import { UTXOProvider } from './UTXOProvider.js';
 
 export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   return (
     <EVMProvider>
       <SVMProvider>
-        <UTXOProvider>
-          <SDKProviders />
-          <WalletMenuProvider>{children}</WalletMenuProvider>
-        </UTXOProvider>
+        <SDKProviders />
+        {children}
       </SVMProvider>
     </EVMProvider>
   );
 };
-
-export const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
-  const { walletConfig } = useWidgetConfig();
-  const { i18n } = useTranslation();
-
-  const config: WalletManagementConfig = useMemo(() => {
-    return { locale: i18n.resolvedLanguage as never, ...walletConfig };
-  }, [i18n.resolvedLanguage, walletConfig]);
-  return (
-    <WalletManagementProvider config={config}>
-      {children}
-    </WalletManagementProvider>
-  );
-};

package/providers/WalletProvider/useHasExternalWalletProvider.ts

@@ -2,35 +2,29 @@ import { ChainType } from '@lifi/sdk';
 import { useContext, useMemo } from 'react';
 import { EVMExternalContext } from './EVMExternalContext.js';
 import { SVMExternalContext } from './SVMExternalContext.js';
-import { UTXOExternalContext } from './UTXOExternalContext.js';
 
 interface ExternalWalletProvider {
   hasExternalProvider: boolean;
-  availableChainTypes: ChainType[];
+  providers: ChainType[];
 }
 
 export function useHasExternalWalletProvider(): ExternalWalletProvider {
   const hasExternalEVMContext = useContext(EVMExternalContext);
   const hasExternalSVMContext = useContext(SVMExternalContext);
-  const hasExternalUTXOContext = useContext(UTXOExternalContext);
 
   const providers = useMemo(() => {
-    const providers: ChainType[] = [];
+    const providers = [];
     if (hasExternalEVMContext) {
       providers.push(ChainType.EVM);
     }
     if (hasExternalSVMContext) {
       providers.push(ChainType.SVM);
     }
-    if (hasExternalUTXOContext) {
-      providers.push(ChainType.UTXO);
-    }
     return providers;
-  }, [hasExternalEVMContext, hasExternalSVMContext, hasExternalUTXOContext]);
+  }, [hasExternalEVMContext, hasExternalSVMContext]);
 
   return {
-    hasExternalProvider:
-      hasExternalEVMContext || hasExternalSVMContext || hasExternalUTXOContext,
-    availableChainTypes: providers,
+    hasExternalProvider: hasExternalEVMContext || hasExternalSVMContext,
+    providers,
   };
 }

package/providers/WidgetProvider/WidgetProvider.tsx

@@ -50,8 +50,7 @@ export const WidgetProvider: React.FC<
         },
         disableVersionCheck: true,
         widgetVersion: version,
-        // preloadChains: false,
-        // debug: true,
+        preloadChains: false,
       };
       if (!sdkInitialized) {
         createConfig(_config);

package/providers/WidgetProvider/types.ts

@@ -1,6 +1,8 @@
 import type { WidgetConfig } from '../../types/widget.js';
 
 export type WidgetContextProps = WidgetConfig & {
+  fromChain?: number;
+  toChain?: number;
   elementId: string;
 };
 

package/stores/form/FormUpdater.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useAccount } from '@lifi/wallet-management';
 import { useEffect } from 'react';
+import { useAccount } from '../../hooks/useAccount.js';
 import { useChains } from '../../hooks/useChains.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';

package/stores/form/types.ts

@@ -35,17 +35,17 @@ export type FormFieldArray<T extends FormFieldNames[]> = {
   [K in keyof T]: ExtractValueType<FormValues[T[K]]>;
 };
 
-export type TouchedFields = { [K in FormFieldNames]?: boolean };
+export type TouchedFields = { [key in FormFieldNames]?: boolean };
 
 type ValidationFn = (value: any) => Promise<boolean | string>;
 export interface ValidationProps {
   isValid: boolean;
   isValidating: boolean;
   errors: {
-    [K in FormFieldNames]?: string;
+    [key in FormFieldNames]?: string;
   };
   validation: {
-    [K in FormFieldNames]?: ValidationFn;
+    [key in FormFieldNames]?: ValidationFn;
   };
 }
 
@@ -61,7 +61,7 @@ export interface ValidationActions {
 export interface FormProps {
   defaultValues: FormValues;
   userValues: FormValues;
-  touchedFields: { [K in FormFieldNames]?: boolean };
+  touchedFields: { [key in FormFieldNames]?: boolean };
 }
 
 interface ResetOptions {

package/stores/header/types.ts

@@ -6,6 +6,7 @@ export type HeaderStore = UseBoundStoreWithEqualityFn<StoreApi<HeaderState>>;
 export interface HeaderStateBase {
   element?: React.ReactNode | null;
   title?: string;
+  headerHeight: number;
 }
 
 export interface HeaderState extends HeaderStateBase {
@@ -13,4 +14,5 @@ export interface HeaderState extends HeaderStateBase {
   setTitle(title?: string): () => void;
   removeAction(): void;
   removeTitle(): void;
+  setHeaderHeight(headerHeight: number): void;
 }