feat: add disabledUI config option

packages/widget-embedded/src/config.ts

@@ -18,6 +18,7 @@ export const widgetBaseConfig: WidgetConfig = {
     deny: [],
   },
   buildSwapUrl: true,
+  // disabledUI: ['toAddress', 'fromAmount', 'toToken', 'fromToken'],
   // sdkConfig: {
   //   apiUrl: 'https://developkub.li.finance/v1/',
   // },

packages/widget/src/components/SelectChainAndToken.tsx

@@ -3,12 +3,14 @@ import { Box, useMediaQuery } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { ReverseTokensButton } from '../components/ReverseTokensButton';
 import { SelectTokenButton } from '../components/SelectTokenButton';
-import { SwapFormKey } from '../providers';
+import { SwapFormKey, useWidgetConfig } from '../providers';
+import { DisabledUI } from '../types';
 
 export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
   const prefersNarrowView = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down('sm'),
   );
+  const { disabledUI } = useWidgetConfig();
   const [fromChain, toChain, fromToken, toToken] = useWatch({
     name: [
       SwapFormKey.FromChain,
@@ -17,6 +19,11 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
       SwapFormKey.ToToken,
     ],
   });
+
+  const disabledReverse =
+    disabledUI?.includes(DisabledUI.FromToken) ||
+    disabledUI?.includes(DisabledUI.ToToken);
+
   const isCompact =
     fromChain && toChain && fromToken && toToken && !prefersNarrowView;
   return (
@@ -27,9 +34,11 @@ export const SelectChainAndToken: React.FC<BoxProps> = (props) => {
       <SelectTokenButton formType="from" compact={isCompact} />
       <Box
         sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
-        m={-1.25}
+        m={!disabledReverse ? -1.25 : 1}
       >
-        <ReverseTokensButton vertical={!isCompact} />
+        {!disabledReverse ? (
+          <ReverseTokensButton vertical={!isCompact} />
+        ) : null}
       </Box>
       <SelectTokenButton formType="to" compact={isCompact} />
     </Box>

packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useChain, useToken } from '../../hooks';
 import type { SwapFormTypeProps } from '../../providers';
-import { SwapFormKeyHelper } from '../../providers';
+import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { TokenAvatar } from '../TokenAvatar';
@@ -18,11 +18,10 @@ export const SelectTokenButton: React.FC<
 > = ({ formType, compact }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { disabledUI } = useWidgetConfig();
+  const tokenKey = SwapFormKeyHelper.getTokenKey(formType);
   const [chainId, tokenAddress] = useWatch({
-    name: [
-      SwapFormKeyHelper.getChainKey(formType),
-      SwapFormKeyHelper.getTokenKey(formType),
-    ],
+    name: [SwapFormKeyHelper.getChainKey(formType), tokenKey],
   });
   const { chain, isLoading: isChainLoading } = useChain(chainId);
   const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
@@ -36,9 +35,10 @@ export const SelectTokenButton: React.FC<
   };
 
   const isSelected = !!(chain && token);
+  const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
 
   return (
-    <Card flex={1} onClick={handleClick}>
+    <Card flex={1} onClick={onClick}>
       <CardTitle>{t(`swap.${formType}`)}</CardTitle>
       {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (
         <SelectTokenCardHeader

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

@@ -4,13 +4,15 @@ import { Collapse, FormHelperText } from '@mui/material';
 import { forwardRef, useEffect } from 'react';
 import { useFormContext, useFormState } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { SwapFormKey, useWallet } from '../../providers';
+import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
+import { DisabledUI } 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,
   );
@@ -21,6 +23,10 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
     trigger(SwapFormKey.ToAddress);
   }, [account.chainId, trigger]);
 
+  if (disabledUI?.includes(DisabledUI.ToAddress)) {
+    return null;
+  }
+
   const {
     onChange,
     onBlur,

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

@@ -2,18 +2,24 @@ import { WalletOutlined as WalletOutlinedIcon } from '@mui/icons-material';
 import { Button, Tooltip } from '@mui/material';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { SwapFormKey, useWallet } from '../../providers';
+import { SwapFormKey, useWallet, useWidgetConfig } from '../../providers';
 import { useSettings } from '../../stores';
+import { DisabledUI } from '../../types';
 import { useSendToWalletStore } from './store';
 
 export const SendToWalletButton: React.FC = () => {
   const { t } = useTranslation();
+  const { disabledUI } = useWidgetConfig();
   const { account } = useWallet();
   const { setValue } = useFormContext();
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
   const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
 
-  if (!showDestinationWallet || !account.isActive) {
+  if (
+    !showDestinationWallet ||
+    !account.isActive ||
+    disabledUI?.includes(DisabledUI.ToAddress)
+  ) {
     return null;
   }
 

packages/widget/src/components/SwapInput/SwapInput.tsx

@@ -4,7 +4,8 @@ import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useChain, useToken } from '../../hooks';
 import type { SwapFormTypeProps } from '../../providers';
-import { SwapFormKeyHelper } from '../../providers';
+import { SwapFormKeyHelper, useWidgetConfig } from '../../providers';
+import { DisabledUI } from '../../types';
 import { fitInputText, formatAmount } from '../../utils';
 import { Card, CardTitle } from '../Card';
 import { TokenAvatar } from '../TokenAvatar';
@@ -20,6 +21,7 @@ import { SwapInputAdornment } from './SwapInputAdornment';
 export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
   const { t } = useTranslation();
   const { setValue } = useFormContext();
+  const { disabledUI } = useWidgetConfig();
   const ref = useRef<HTMLInputElement>(null);
 
   const amountKey = SwapFormKeyHelper.getAmountKey(formType);
@@ -61,6 +63,8 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
     );
   }, [amount]);
 
+  const disabled = disabledUI?.includes(DisabledUI.FromAmount);
+
   return (
     <Card>
       <CardTitle>{t('swap.fromAmount')}</CardTitle>
@@ -75,14 +79,17 @@ export const SwapInput: React.FC<SwapFormTypeProps> = ({ formType }) => {
               <TokenAvatar token={token} sx={{ marginLeft: 2 }} />
             ) : null
           }
-          endAdornment={<SwapInputAdornment formType={formType} />}
+          endAdornment={
+            !disabled ? <SwapInputAdornment formType={formType} /> : undefined
+          }
           inputProps={{
             inputMode: 'decimal',
           }}
           onChange={handleChange}
           onBlur={handleBlur}
           value={amount}
           name={amountKey}
+          disabled={disabled}
           required
         />
         <FormPriceHelperText selected={isSelected} formType={formType} />

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

@@ -2,13 +2,20 @@ import { Box, Typography } from '@mui/material';
 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';
 
 export const ShowDestinationWallet = () => {
   const { t } = useTranslation();
+  const { disabledUI } = useWidgetConfig();
   const setValue = useSettingsStore((state) => state.setValue);
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
 
+  if (disabledUI?.includes(DisabledUI.ToAddress)) {
+    return null;
+  }
+
   const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {
     setValue('showDestinationWallet', checked);
   };

packages/widget/src/types/widget.ts

@@ -5,7 +5,15 @@ import type { Signer } from 'ethers';
 import type { CSSProperties, RefObject } from 'react';
 import type { LanguageKey, LanguageResources } from '../providers';
 
-export type WidgetVariant = 'default' | 'expandable' | 'drawer';
+export type WidgetVariant = 'default' | 'expandable' | 'drawer' | 'refuel';
+
+export enum DisabledUI {
+  FromToken = 'fromToken',
+  ToToken = 'toToken',
+  FromAmount = 'fromAmount',
+  ToAddress = 'toAddress',
+}
+export type DisabledUIType = `${DisabledUI}`;
 
 export type Appearance = PaletteMode | 'auto';
 export type ThemeConfig = {
@@ -31,21 +39,17 @@ export interface WidgetConfig {
   toAddress?: string;
   fromAmount?: number | string;
 
+  integrator?: string;
+
+  variant?: WidgetVariant;
+
   appearance?: Appearance;
   theme?: ThemeConfig;
   containerStyle?: CSSProperties;
 
   disableAppearance?: boolean;
   disableTelemetry?: boolean;
-
-  /** @deprecated Use chains.deny instead */
-  disabledChains?: number[];
-  /** @deprecated Use tokens.featured instead */
-  featuredTokens?: Token[];
-
-  integrator?: string;
-
-  variant?: WidgetVariant;
+  disabledUI?: DisabledUIType[];
 
   walletManagement?: WidgetWalletManagement;
   sdkConfig?: ConfigUpdate;
@@ -76,6 +80,11 @@ export interface WidgetConfig {
   };
   languageResources?: LanguageResources;
   disableI18n?: boolean;
+
+  /** @deprecated Use chains.deny instead */
+  disabledChains?: number[];
+  /** @deprecated Use tokens.featured instead */
+  featuredTokens?: Token[];
 }
 
 export type WidgetProps = {