feat: add hiddenUI and extend disabledUI options

packages/widget/src/App.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import type { WidgetDrawer } from './AppDrawer';
 import { AppDrawer } from './AppDrawer';
 import { AppProvider } from './AppProvider';
@@ -16,7 +16,8 @@ import { useExpandableVariant } from './hooks';
 import type { WidgetProps } from './types';
 
 export const App: React.FC<WidgetProps> = forwardRef<WidgetDrawer, WidgetProps>(
-  ({ elementRef, open, config }, ref) => {
+  ({ elementRef, open, ...other }, ref) => {
+    const config = useMemo(() => ({ ...other, ...other.config }), [other]);
     return config?.variant !== 'drawer' ? (
       <AppProvider config={config}>
         <AppDefault />

packages/widget/src/components/ActiveSwaps/ActiveSwapItem.tsx

@@ -1,5 +1,7 @@
 import {
-  ArrowForward as ArrowForwardIcon, ErrorRounded as ErrorIcon, InfoRounded as InfoIcon
+  ArrowForward as ArrowForwardIcon,
+  ErrorRounded as ErrorIcon,
+  InfoRounded as InfoIcon,
 } from '@mui/icons-material';
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';

packages/widget/src/components/PoweredBy/PoweredBy.tsx

@@ -1,11 +1,14 @@
 import { Box, Tooltip, Typography } from '@mui/material';
 import { useLocation } from 'react-router-dom';
 import { version } from '../../config/version';
+import { useWidgetConfig } from '../../providers';
+import { HiddenUI } from '../../types';
 import { navigationRoutes } from '../../utils';
 import { LiFiLogo } from '../LiFiLogo';
 import { Link } from './PoweredBy.style';
 
 export const PoweredBy: React.FC = () => {
+  const { hiddenUI } = useWidgetConfig();
   const { pathname } = useLocation();
   if (
     pathname.includes(navigationRoutes.fromToken) ||
@@ -16,27 +19,28 @@ export const PoweredBy: React.FC = () => {
   return (
     <Box
       px={3}
-      pt={2}
-      pb={2}
+      py={hiddenUI?.includes(HiddenUI.PoweredBy) ? 1 : 2}
       sx={{
         display: 'flex',
         alignItems: 'flex-end',
         justifyContent: 'flex-end',
       }}
     >
-      <Tooltip title={`v${version}`} placement="top" enterDelay={3000} arrow>
-        <Link
-          href="https://li.fi"
-          target="_blank"
-          underline="none"
-          color="text.primary"
-        >
-          <Typography color="text.secondary" fontSize={12} px={0.5}>
-            Powered by
-          </Typography>
-          <LiFiLogo variant="full" style={{ height: 16, width: 42 }} />
-        </Link>
-      </Tooltip>
+      {!hiddenUI?.includes(HiddenUI.PoweredBy) ? (
+        <Tooltip title={`v${version}`} placement="top" enterDelay={3000} arrow>
+          <Link
+            href="https://li.fi"
+            target="_blank"
+            underline="none"
+            color="text.primary"
+          >
+            <Typography color="text.secondary" fontSize={12} px={0.5}>
+              Powered by
+            </Typography>
+            <LiFiLogo variant="full" style={{ height: 16, width: 42 }} />
+          </Link>
+        </Tooltip>
+      ) : null}
     </Box>
   );
 };

packages/widget/src/components/SendToWallet/SendToWallet.style.tsx

@@ -11,4 +11,10 @@ export const Input = styled(InputBase)(({ theme }) => ({
     height: 32,
     padding: theme.spacing(0, 0, 0, 2),
   },
+  [`&.${inputBaseClasses.disabled}`]: {
+    color: 'inherit',
+  },
+  [`.${inputBaseClasses.input}.${inputBaseClasses.disabled}`]: {
+    WebkitTextFillColor: 'unset',
+  },
 }));

packages/widget/src/components/SendToWallet/SendToWallet.tsx

@@ -5,25 +5,43 @@ import { forwardRef, useEffect } from 'react';
 import { useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
-import { DisabledUI } from '../../types';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI } from '../../types';
 import { Card, CardTitle } from '../Card';
 import { FormControl, Input } from './SendToWallet.style';
-import { useSendToWalletStore } from './store';
 
 export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
   const { t } = useTranslation();
-  const { disabledUI } = useWidgetConfig();
-  const showSendToWallet = useSendToWalletStore(
-    (state) => state.showSendToWallet,
-  );
-  const { account, provider } = useWallet();
   const { register, trigger } = useFormContext();
+  const { account, provider } = useWallet();
+  const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+  const { showSendToWallet, showSendToWalletDirty, setSendToWallet } =
+    useSendToWalletStore();
+  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
 
   useEffect(() => {
     trigger(SwapFormKey.ToAddress);
   }, [account.chainId, trigger]);
 
-  if (disabledUI?.includes(DisabledUI.ToAddress)) {
+  const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
+  const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+
+  // We want to show toAddress field if it is set via widget configuration, disabled for changes, but not hidden
+  const showInstantly = Boolean(
+    !showSendToWalletDirty &&
+      toAddress &&
+      disabledToAddress &&
+      showDestinationWallet &&
+      !hiddenToAddress,
+  );
+
+  useEffect(() => {
+    if (showInstantly) {
+      setSendToWallet(true);
+    }
+  }, [showInstantly, setSendToWallet]);
+
+  if (hiddenToAddress) {
     return null;
   }
 
@@ -51,7 +69,12 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
   });
 
   return (
-    <Collapse timeout={225} in={showSendToWallet} mountOnEnter unmountOnExit>
+    <Collapse
+      timeout={showInstantly ? 0 : 225}
+      in={showSendToWallet || showInstantly}
+      mountOnEnter
+      unmountOnExit
+    >
       <Card {...props} ref={ref}>
         <CardTitle>{t('swap.sendToWallet')}</CardTitle>
         <FormControl fullWidth sx={{ paddingTop: '6px', paddingBottom: '5px' }}>
@@ -66,6 +89,7 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
             onBlur={onBlur}
             name={name}
             placeholder={t('swap.walletAddressOrEns') as string}
+            disabled={Boolean(toAddress && disabledToAddress)}
           />
           <SendToWalletFormHelperText />
         </FormControl>

packages/widget/src/components/SendToWallet/SendToWalletButton.tsx

@@ -3,28 +3,27 @@ import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
-import { useSettings } from '../../stores';
-import { DisabledUI } from '../../types';
-import { useSendToWalletStore } from './store';
+import { useSendToWalletStore, useSettings } from '../../stores';
+import { DisabledUI, HiddenUI } from '../../types';
 
 export const SendToWalletButton: React.FC = () => {
   const { t } = useTranslation();
-  const { disabledUI } = useWidgetConfig();
-  const { account } = useWallet();
   const { setValue } = useFormContext();
-  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
+  const { account } = useWallet();
+  const { disabledUI, hiddenUI } = useWidgetConfig();
   const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
+  const { showDestinationWallet } = useSettings(['showDestinationWallet']);
 
   if (
     !showDestinationWallet ||
     !account.isActive ||
-    disabledUI?.includes(DisabledUI.ToAddress)
+    hiddenUI?.includes(HiddenUI.ToAddress)
   ) {
     return null;
   }
 
   const handleClick = () => {
-    if (showSendToWallet) {
+    if (showSendToWallet && !disabledUI?.includes(DisabledUI.ToAddress)) {
       setValue(SwapFormKey.ToAddress, '', { shouldTouch: true });
     }
     toggleSendToWallet();

packages/widget/src/pages/SettingsPage/ColorSchemeButtonGroup.tsx

@@ -7,14 +7,15 @@ import { Box, ToggleButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useWidgetConfig } from '../../providers';
 import { useAppearance } from '../../stores';
+import { HiddenUI } from '../../types';
 import { ToggleButton } from './ColorSchemeButtonGroup.style';
 
 export const ColorSchemeButtonGroup: React.FC = () => {
   const { t } = useTranslation();
-  const { disableAppearance } = useWidgetConfig();
+  const { disableAppearance, hiddenUI } = useWidgetConfig();
   const [appearance, setAppearance] = useAppearance();
 
-  if (disableAppearance) {
+  if (disableAppearance || hiddenUI?.includes(HiddenUI.Appearance)) {
     return null;
   }
 

packages/widget/src/pages/SettingsPage/LanguageSelect.tsx

@@ -6,15 +6,16 @@ import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
 import { useWidgetConfig } from '../../providers';
 import { useSettings, useSettingsStore } from '../../stores';
+import { HiddenUI } from '../../types';
 
 export const LanguageSelect: React.FC = () => {
   const { t } = useTranslation();
-  const { languages, disableI18n } = useWidgetConfig();
+  const { languages, hiddenUI } = useWidgetConfig();
   const { i18n } = useTranslation();
   const setValue = useSettingsStore((state) => state.setValue);
   const { language } = useSettings(['language']);
 
-  if (disableI18n) {
+  if (hiddenUI?.includes(HiddenUI.Language)) {
     return null;
   }
 

packages/widget/src/pages/SettingsPage/ShowDestinationWallet.tsx

@@ -3,21 +3,29 @@ import type { ChangeEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Switch } from '../../components/Switch';
 import { useWidgetConfig } from '../../providers';
-import { useSettings, useSettingsStore } from '../../stores';
-import { DisabledUI } from '../../types';
+import {
+  useSendToWalletStore,
+  useSettings,
+  useSettingsStore,
+} from '../../stores';
+import { HiddenUI } from '../../types';
 
 export const ShowDestinationWallet = () => {
   const { t } = useTranslation();
-  const { disabledUI } = useWidgetConfig();
+  const { hiddenUI } = useWidgetConfig();
+  const setSendToWallet = useSendToWalletStore(
+    (state) => state.setSendToWallet,
+  );
   const setValue = useSettingsStore((state) => state.setValue);
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
 
-  if (disabledUI?.includes(DisabledUI.ToAddress)) {
+  if (hiddenUI?.includes(HiddenUI.ToAddress)) {
     return null;
   }
 
   const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
     setValue('showDestinationWallet', checked);
+    setSendToWallet(false);
   };
 
   return (

packages/widget/src/stores/settings/index.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './useAppearance';
+export * from './useSendToWalletStore';
 export * from './useSettings';
 export * from './useSettingsStore';

packages/widget/src/stores/settings/types.ts

@@ -37,3 +37,13 @@ export interface SettingsStore extends SettingsState {
     availableTools: (Pick<Bridge, 'key'> | Pick<Exchange, 'key'>)[],
   ): void;
 }
+
+export interface SendToWalletState {
+  showSendToWallet: boolean;
+  showSendToWalletDirty: boolean;
+}
+
+export interface SendToWalletStore extends SendToWalletState {
+  toggleSendToWallet(): void;
+  setSendToWallet(value: boolean): void;
+}

packages/widget/src/components/SendToWallet/store.ts → packages/widget/src/stores/settings/useSendToWalletStore.ts

@@ -3,9 +3,15 @@ import type { SendToWalletStore } from './types';
 
 export const useSendToWalletStore = create<SendToWalletStore>((set) => ({
   showSendToWallet: false,
-  toggleSendToWallet: () => {
+  showSendToWalletDirty: false,
+  toggleSendToWallet: () =>
     set((state) => ({
       showSendToWallet: !state.showSendToWallet,
-    }));
-  },
+      showSendToWalletDirty: true,
+    })),
+  setSendToWallet: (value) =>
+    set({
+      showSendToWallet: value,
+      showSendToWalletDirty: true,
+    }),
 }));