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

package/components/ListItemButton.tsx

@@ -2,11 +2,15 @@ import { ListItemButton as MuiListItemButton } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { getContrastAlphaColor } from '../utils';
 
-export const ListItemButton = styled(MuiListItemButton)(({ theme }) => ({
-  borderRadius: theme.shape.borderRadius,
-  paddingLeft: theme.spacing(1.5),
-  height: 56,
-  '&:hover': {
-    backgroundColor: getContrastAlphaColor(theme.palette.mode, '4%'),
-  },
-}));
+export const ListItemButton = styled(MuiListItemButton)(
+  ({ theme, disabled }) => ({
+    borderRadius: theme.shape.borderRadius,
+    paddingLeft: theme.spacing(1.5),
+    height: 56,
+    ...(disabled ? { opacity: 0.5, cursor: 'auto' } : {}),
+    '&:hover': {
+      backgroundColor:
+        !disabled && getContrastAlphaColor(theme.palette.mode, '4%'),
+    },
+  }),
+);

package/components/Menu.tsx

@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+import {
+  Menu as MuiMenu,
+  menuClasses,
+  menuItemClasses,
+  svgIconClasses,
+} from '@mui/material';
+
+export const Menu = styled(MuiMenu)(({ theme }) => ({
+  [`& .${menuClasses.paper}`]: {
+    borderRadius: theme.shape.borderRadius,
+    boxShadow: '0px 2px 4px rgb(0 0 0 / 8%), 0px 8px 16px rgb(0 0 0 / 8%)',
+    padding: theme.spacing(2),
+    [`& .${menuClasses.list}`]: {
+      padding: 0,
+    },
+    [`& .${menuItemClasses.root}`]: {
+      borderRadius: theme.shape.borderRadiusSecondary,
+      padding: theme.spacing(1, 2, 1, 1),
+      [`& .${svgIconClasses.root}`]: {
+        fontSize: 20,
+        color: theme.palette.text.primary,
+        marginRight: theme.spacing(1.5),
+      },
+    },
+  },
+}));

package/components/PageContainer.ts

@@ -1,7 +1,7 @@
 import { Container } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-interface PageContainerProps {
+export interface PageContainerProps {
   halfGutters?: boolean;
   topBottomGutters?: boolean;
 }

package/components/ReverseTokensButton/ReverseTokensButton.tsx

@@ -1,5 +1,6 @@
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { useAvailableChains, useToAddressReset } from '../../hooks';
 import { useFieldActions } from '../../stores';
 import { IconButton } from './ReverseTokensButton.style';
 
@@ -7,19 +8,27 @@ export const ReverseTokensButton: React.FC<{ vertical?: boolean }> = ({
   vertical,
 }) => {
   const { setFieldValue, getFieldValues } = useFieldActions();
+  const { getChainById } = useAvailableChains();
+  const { tryResetToAddress } = useToAddressReset();
 
   const handleClick = () => {
-    const [fromChain, fromToken, toChain, toToken] = getFieldValues(
+    const [fromChainId, fromToken, toChainId, toToken] = getFieldValues(
       'fromChain',
       'fromToken',
       'toChain',
       'toToken',
     );
     setFieldValue('fromAmount', '', { isTouched: true });
-    setFieldValue('fromChain', toChain, { isTouched: true });
+    setFieldValue('fromChain', toChainId, { isTouched: true });
     setFieldValue('fromToken', toToken, { isTouched: true });
-    setFieldValue('toChain', fromChain, { isTouched: true });
+    setFieldValue('toChain', fromChainId, { isTouched: true });
     setFieldValue('toToken', fromToken, { isTouched: true });
+
+    // fromChainId becomes toChainId after using reverse
+    const toChain = getChainById(fromChainId);
+    if (toChain) {
+      tryResetToAddress(toChain);
+    }
   };
   return (
     <IconButton onClick={handleClick} size="medium">

package/components/Routes/Routes.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { useValidation } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
@@ -14,7 +13,6 @@ export const Routes: React.FC<BoxProps> = (props) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { subvariant, useRecommendedRoute } = useWidgetConfig();
-  const { isValid, isValidating } = useValidation();
   const {
     routes,
     isLoading,
@@ -67,11 +65,7 @@ export const Routes: React.FC<BoxProps> = (props) => {
 
         <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter appear>
           <Box mt={2}>
-            <Button
-              onClick={handleCardClick}
-              disabled={isValidating || !isValid}
-              fullWidth
-            >
+            <Button onClick={handleCardClick} fullWidth>
               {t('button.showAll')}
             </Button>
           </Box>

package/components/Routes/RoutesExpanded.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useMatch, useNavigate } from 'react-router-dom';
 import { useRoutes } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
-import { useSetExecutableRoute, useValidation } from '../../stores';
+import { useSetExecutableRoute } from '../../stores';
 import { navigationRoutes } from '../../utils';
 import { PageContainer } from '../PageContainer';
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate';
@@ -39,7 +39,6 @@ export const RoutesExpandedElement = () => {
   const navigate = useNavigate();
   const setExecutableRoute = useSetExecutableRoute();
   const { subvariant, containerStyle } = useWidgetConfig();
-  const { isValid, isValidating } = useValidation();
   const {
     routes,
     isLoading,
@@ -53,12 +52,10 @@ export const RoutesExpandedElement = () => {
   const currentRoute = routes?.[0];
 
   const handleRouteClick = (route: Route) => {
-    if (isValid && !isValidating) {
-      setExecutableRoute(route);
-      navigate(navigationRoutes.transactionExecution, {
-        state: { routeId: route.id },
-      });
-    }
+    setExecutableRoute(route);
+    navigate(navigationRoutes.transactionExecution, {
+      state: { routeId: route.id },
+    });
   };
 
   const expanded = Boolean(

package/components/SendToWallet/SendToWallet.style.tsx

@@ -1,20 +1,30 @@
-import { FormControl as MuiFormControl, InputBase } from '@mui/material';
-import { inputBaseClasses } from '@mui/material/InputBase';
 import { styled } from '@mui/material/styles';
+import { CardHeader } from '../Card';
+import { cardHeaderClasses } from '@mui/material/CardHeader';
 
-export const FormControl = styled(MuiFormControl)(({ theme }) => ({
-  padding: theme.spacing(1.5, 2, 1.5, 0),
-}));
-
-export const Input = styled(InputBase)(({ theme }) => ({
-  [`.${inputBaseClasses.input}`]: {
-    height: 32,
-    padding: theme.spacing(0, 0, 0, 2),
-  },
-  [`&.${inputBaseClasses.disabled}`]: {
-    color: 'inherit',
+export const SendToWalletCardHeader = styled(CardHeader, {
+  shouldForwardProp: (prop) => !['selected'].includes(prop as string),
+})<{ selected?: boolean }>(({ theme, selected }) => ({
+  height: 64,
+  [`.${cardHeaderClasses.title}`]: {
+    color: selected ? theme.palette.text.primary : theme.palette.text.secondary,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 256,
+    textAlign: 'left',
+    [theme.breakpoints.down(392)]: {
+      width: 224,
+    },
   },
-  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
-    WebkitTextFillColor: 'unset',
+  [`.${cardHeaderClasses.subheader}`]: {
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    width: 256,
+    textAlign: 'left',
+    [theme.breakpoints.down(392)]: {
+      width: 224,
+    },
   },
 }));

package/components/SendToWallet/SendToWalletButton.tsx

@@ -1,62 +1,126 @@
-import WalletIcon from '@mui/icons-material/Wallet';
-import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
+import { Collapse } from '@mui/material';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useRequiredToAddress, useWidgetEvents } from '../../hooks';
+import { useNavigate } from 'react-router-dom';
+import { useAccount, useToAddressRequirements } from '../../hooks';
 import { useWidgetConfig } from '../../providers';
 import {
-  useFieldActions,
+  useBookmarks,
+  useFieldValues,
   useSendToWalletStore,
   useSettings,
 } from '../../stores';
-import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
+import { DisabledUI, HiddenUI } from '../../types';
+import {
+  defaultChainIdsByType,
+  getChainTypeFromAddress,
+  navigationRoutes,
+  shortenAddress,
+} from '../../utils';
+import { AccountAvatar } from '../AccountAvatar';
+import { Card, CardRowContainer, CardTitle } from '../Card';
+import { SendToWalletCardHeader } from './SendToWallet.style';
 
-export const SendToWalletButton: React.FC = () => {
+export const SendToWalletButton = () => {
   const { t } = useTranslation();
-  const { setFieldValue } = useFieldActions();
-  const emitter = useWidgetEvents();
-  const { disabledUI, hiddenUI } = useWidgetConfig();
-  const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+  const navigate = useNavigate();
+  const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+  const { showSendToWallet, showSendToWalletDirty, setSendToWallet } =
+    useSendToWalletStore();
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+  const [toAddressFieldValue] = useFieldValues('toAddress');
+  const { selectedBookmark } = useBookmarks();
+  const { accounts } = useAccount();
+  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+  const { requiredToAddress } = useToAddressRequirements();
 
-  const requiredToAddress = useRequiredToAddress();
+  const showInstantly =
+    Boolean(
+      !showSendToWalletDirty &&
+        showDestinationWallet &&
+        toAddress &&
+        !hiddenToAddress,
+    ) || requiredToAddress;
 
-  if (
-    !showDestinationWallet ||
-    hiddenUI?.includes(HiddenUI.ToAddress) ||
-    requiredToAddress
-  ) {
-    return null;
-  }
+  const address = toAddressFieldValue
+    ? shortenAddress(toAddressFieldValue)
+    : t('sendToWallet.enterAddress');
 
-  const handleClick = () => {
-    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
-      setFieldValue('toAddress', '', { isTouched: true });
-    }
-    toggleSendToWallet();
-    emitter.emit(
-      WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet,
-    );
+  const matchingConnectedAccount = accounts.find(
+    (account) => account.address === toAddressFieldValue,
+  );
+
+  const chainType = !matchingConnectedAccount
+    ? selectedBookmark?.chainType ||
+      (toAddressFieldValue
+        ? getChainTypeFromAddress(toAddressFieldValue)
+        : undefined)
+    : undefined;
+
+  const chainId = matchingConnectedAccount
+    ? matchingConnectedAccount.chainId
+    : chainType
+      ? defaultChainIdsByType[chainType]
+      : undefined;
+
+  const headerTitle = selectedBookmark?.isConnectedAccount
+    ? matchingConnectedAccount?.connector?.name || address
+    : selectedBookmark?.name || address;
+
+  const headerSubheader = selectedBookmark?.isConnectedAccount
+    ? !!matchingConnectedAccount && address
+    : !!selectedBookmark?.name && address;
+
+  const handleOnClick = () => {
+    navigate(navigationRoutes.sendToWallet);
   };
 
+  // Sync SendToWalletExpandButton state
+  // TODO: find better way
+  useEffect(() => {
+    if (showInstantly) {
+      setSendToWallet(true);
+    }
+  }, [showInstantly, setSendToWallet]);
+
   return (
-    <Tooltip
-      title={t('main.sendToWallet')}
-      placement="bottom-end"
-      enterDelay={400}
-      arrow
+    <Collapse
+      timeout={showInstantly ? 0 : 225}
+      in={showSendToWallet || showInstantly}
+      mountOnEnter
+      unmountOnExit
     >
-      <Button
-        variant={showSendToWallet ? 'contained' : 'text'}
-        onClick={handleClick}
-        sx={{
-          minWidth: 48,
-          marginLeft: 1,
-        }}
+      <Card
+        component="button"
+        onClick={!!toAddress && disabledToAddress ? undefined : handleOnClick}
+        sx={{ mb: 2 }}
       >
-        <WalletIcon />
-      </Button>
-    </Tooltip>
+        <CardRowContainer
+          sx={{
+            flexDirection: 'column',
+            padding: 0,
+            alignItems: 'flex-start',
+          }}
+        >
+          <CardTitle required={requiredToAddress}>
+            {t('header.sendToWallet')}
+          </CardTitle>
+          <SendToWalletCardHeader
+            avatar={
+              <AccountAvatar
+                chainId={chainId}
+                account={matchingConnectedAccount}
+              />
+            }
+            title={headerTitle}
+            subheader={headerSubheader}
+            selected={
+              !!toAddressFieldValue && !(toAddress && disabledToAddress)
+            }
+          />
+        </CardRowContainer>
+      </Card>
+    </Collapse>
   );
 };

package/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -0,0 +1,65 @@
+import WalletIcon from '@mui/icons-material/Wallet';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
+import { useTranslation } from 'react-i18next';
+import { useToAddressRequirements, useWidgetEvents } from '../../hooks';
+import { useWidgetConfig } from '../../providers';
+import {
+  useBookmarkActions,
+  useFieldActions,
+  useSendToWalletStore,
+  useSettings,
+} from '../../stores';
+import { DisabledUI, HiddenUI, WidgetEvent } from '../../types';
+
+export const SendToWalletExpandButton: React.FC = () => {
+  const { t } = useTranslation();
+  const { disabledUI, hiddenUI } = useWidgetConfig();
+  const { setFieldValue } = useFieldActions();
+  const { setSelectedBookmark } = useBookmarkActions();
+  const emitter = useWidgetEvents();
+  const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+
+  const { requiredToAddress } = useToAddressRequirements();
+
+  if (
+    !showDestinationWallet ||
+    requiredToAddress ||
+    hiddenUI?.includes(HiddenUI.ToAddress)
+  ) {
+    return null;
+  }
+
+  const handleClick = () => {
+    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
+      setFieldValue('toAddress', '', { isTouched: true });
+      setSelectedBookmark();
+    }
+    toggleSendToWallet();
+    emitter.emit(
+      WidgetEvent.SendToWalletToggled,
+      useSendToWalletStore.getState().showSendToWallet,
+    );
+  };
+
+  return (
+    <Tooltip
+      title={t('main.sendToWallet')}
+      placement="bottom-end"
+      enterDelay={400}
+      arrow
+    >
+      <Button
+        variant={showSendToWallet ? 'contained' : 'text'}
+        onClick={handleClick}
+        sx={{
+          minWidth: 48,
+          marginLeft: 1,
+        }}
+      >
+        <WalletIcon />
+      </Button>
+    </Tooltip>
+  );
+};

package/components/SendToWallet/index.ts

@@ -1,2 +1,3 @@
-export * from './SendToWallet';
 export * from './SendToWalletButton';
+export * from './SendToWalletExpandButton';
+export * from './SendToWallet.style';

package/components/TokenList/TokenList.style.tsx

@@ -1,41 +1,12 @@
 import type { IconButtonProps, LinkProps } from '@mui/material';
-import {
-  IconButton as MuiIconButton,
-  ListItem as MuiListItem,
-} from '@mui/material';
-import { listItemSecondaryActionClasses } from '@mui/material/ListItemSecondaryAction';
-import { listItemTextClasses } from '@mui/material/ListItemText';
+import { IconButton as MuiIconButton } from '@mui/material';
 import { alpha, styled } from '@mui/material/styles';
-import { ListItemButton as ListItemButtonBase } from '../ListItemButton';
+import { ListItem as ListItemBase } from '../ListItem';
 
-export const ListItemButton = styled(ListItemButtonBase)(({ theme }) => ({
-  paddingLeft: theme.spacing(1.5),
-  paddingRight: theme.spacing(1.5),
-  height: 64,
-  width: '100%',
-}));
-
-export const ListItem = styled(MuiListItem)(({ theme }) => ({
+export const ListItem = styled(ListItemBase)(({ theme }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
-  height: 64,
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  padding: theme.spacing(0, 1.5),
-  [`.${listItemSecondaryActionClasses.root}`]: {
-    right: theme.spacing(3),
-  },
-  [`& .${listItemTextClasses.secondary}`]: {
-    fontSize: 12,
-    fontWeight: 500,
-  },
-  [`& .${listItemTextClasses.primary}, & .${listItemTextClasses.secondary}`]: {
-    lineHeight: 1.3334,
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-  },
 }));
 
 export const IconButton = styled(MuiIconButton)<IconButtonProps & LinkProps>(

package/components/TokenList/TokenList.tsx

@@ -39,7 +39,8 @@ export const TokenList: FC<TokenListProps> = ({
   let filteredTokens = (tokensWithBalance ??
     chainTokens ??
     []) as TokenAmount[];
-  const searchFilter = tokenSearchFilter?.toUpperCase() ?? '';
+  const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '');
+  const searchFilter = normalizedSearchFilter?.toUpperCase() ?? '';
   filteredTokens = tokenSearchFilter
     ? filteredTokens.filter(
         (token) =>
@@ -56,7 +57,7 @@ export const TokenList: FC<TokenListProps> = ({
     !!selectedChainId;
 
   const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
+    useTokenSearch(selectedChainId, normalizedSearchFilter, tokenSearchEnabled);
 
   const isLoading =
     isTokensLoading ||

package/components/TokenList/TokenListItem.tsx

@@ -9,7 +9,8 @@ import {
   Slide,
   Typography,
 } from '@mui/material';
-import { MouseEventHandler, useRef, useState } from 'react';
+import type { MouseEventHandler } from 'react';
+import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { formatUnits } from 'viem';
 import {
@@ -17,7 +18,8 @@ import {
   formatTokenPrice,
   shortenAddress,
 } from '../../utils';
-import { IconButton, ListItem, ListItemButton } from './TokenList.style';
+import { ListItemButton } from '../ListItem';
+import { IconButton, ListItem } from './TokenList.style';
 import type { TokenListItemButtonProps, TokenListItemProps } from './types';
 
 export const TokenListItem: React.FC<TokenListItemProps> = ({
@@ -37,7 +39,6 @@ export const TokenListItem: React.FC<TokenListItemProps> = ({
   };
   return (
     <ListItem
-      disablePadding
       style={{
         height: `${size}px`,
         transform: `translateY(${start}px)`,

package/components/TokenList/VirtualizedTokenList.tsx

@@ -18,7 +18,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   showFeatured,
   onClick,
 }) => {
-  const { isConnected } = useAccount();
+  const { account } = useAccount({ chainType: chain?.chainType });
   const { t } = useTranslation();
 
   const hasFeaturedTokens = !!featuredTokensLength && showFeatured;
@@ -84,7 +84,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             token={token}
             chain={chain}
             isBalanceLoading={isBalanceLoading}
-            showBalance={isConnected}
+            showBalance={account.isConnected}
             startAdornment={
               hasFeaturedTokens && token.featured && item.index === 0 ? (
                 <Typography

package/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget';
-export const version = '3.0.0-alpha.16';
+export const version = '3.0.0-alpha.19';

package/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './useAccount';
+export * from './useAddressValidation';
 export * from './useAvailableChains';
 export * from './useChain';
 export * from './useChains';
@@ -15,12 +16,13 @@ export * from './useInitializer';
 export * from './useLanguages';
 export * from './useNavigateBack';
 export * from './useProcessMessage';
-export * from './useRequiredToAddress';
 export * from './useRouteExecution';
 export * from './useRoutes';
 export * from './useScrollableContainer';
 export * from './useSettingMonitor';
 export * from './useSwapOnly';
+export * from './useToAddressRequirements';
+export * from './useToAddressReset';
 export * from './useToken';
 export * from './useTokenAddressBalance';
 export * from './useTokenBalance';

package/hooks/useAccount.ts

@@ -29,7 +29,11 @@ export interface SVMAccount extends AccountBase {
   connector?: WalletAdapter;
 }
 
-export type Account = EVMAccount | SVMAccount;
+export interface DefaultAccount extends AccountBase {
+  connector?: never;
+}
+
+export type Account = EVMAccount | SVMAccount | DefaultAccount;
 
 export interface AccountResult {
   account: Account;
@@ -37,13 +41,33 @@ export interface AccountResult {
    * Connected accounts
    */
   accounts: Account[];
-  isConnected: boolean;
 }
 
-export const useAccount = (): AccountResult => {
+interface UseAccountArgs {
+  chainType?: ChainType;
+}
+
+const defaultAccount: AccountBase = {
+  isConnected: false,
+  isConnecting: false,
+  isReconnecting: false,
+  isDisconnected: true,
+  status: 'disconnected',
+};
+
+/**
+ *
+ * @param args When we provide args we want to return either account with corresponding chainType or default disconnected one
+ * @returns - Account result
+ */
+export const useAccount = (args?: UseAccountArgs): AccountResult => {
   const account = useWagmiAccount();
   const { wallet } = useWallet();
 
+  // We create a simple variable from the args object
+  // to avoid re-render useMemo on every object reference change.
+  const hasChainTypeArgs = Boolean(args);
+
   return useMemo(() => {
     const svm: Account = wallet?.adapter.publicKey
       ? {
@@ -66,13 +90,17 @@ export const useAccount = (): AccountResult => {
           status: 'disconnected',
         };
     const evm: Account = { ...account, chainType: ChainType.EVM };
-
-    const accounts = [evm, svm].filter((account) => account.isConnected);
+    const accounts = [evm, svm];
+    const connectedAccounts = [evm, svm].filter(
+      (account) => account.isConnected,
+    );
     return {
-      account: account.isConnected ? evm : svm,
+      account: hasChainTypeArgs
+        ? accounts.find((account) => account.chainType === args?.chainType) ??
+          defaultAccount
+        : accounts.find((account) => account.isConnected) ?? defaultAccount,
       // We need to return only connected account list
-      accounts,
-      isConnected: accounts.length > 0,
+      accounts: connectedAccounts,
     };
-  }, [account, wallet]);
+  }, [account, args?.chainType, hasChainTypeArgs, wallet]);
 };