diff --git a/packages/widget-embedded/src/config.ts b/packages/widget-embedded/src/config.ts index 4dabe9178..422ea9d97 100644 --- a/packages/widget-embedded/src/config.ts +++ b/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/', // }, diff --git a/packages/widget/src/components/SelectChainAndToken.tsx b/packages/widget/src/components/SelectChainAndToken.tsx index 2f5980c08..1d6330fe6 100644 --- a/packages/widget/src/components/SelectChainAndToken.tsx +++ b/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 = (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 = (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 = (props) => { - + {!disabledReverse ? ( + + ) : null} diff --git a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx b/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx index a18c273a9..011b76bbc 100644 --- a/packages/widget/src/components/SelectTokenButton/SelectTokenButton.tsx +++ b/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 ( - + {t(`swap.${formType}`)} {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? ( = forwardRef((props, ref) => { const { t } = useTranslation(); + const { disabledUI } = useWidgetConfig(); const showSendToWallet = useSendToWalletStore( (state) => state.showSendToWallet, ); @@ -21,6 +23,10 @@ export const SendToWallet: React.FC = forwardRef((props, ref) => { trigger(SwapFormKey.ToAddress); }, [account.chainId, trigger]); + if (disabledUI?.includes(DisabledUI.ToAddress)) { + return null; + } + const { onChange, onBlur, diff --git a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx index f8f9ac467..97c8608bc 100644 --- a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx +++ b/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; } diff --git a/packages/widget/src/components/SwapInput/SwapInput.tsx b/packages/widget/src/components/SwapInput/SwapInput.tsx index 129cd1e97..f96b8c9ec 100644 --- a/packages/widget/src/components/SwapInput/SwapInput.tsx +++ b/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 = ({ formType }) => { const { t } = useTranslation(); const { setValue } = useFormContext(); + const { disabledUI } = useWidgetConfig(); const ref = useRef(null); const amountKey = SwapFormKeyHelper.getAmountKey(formType); @@ -61,6 +63,8 @@ export const SwapInput: React.FC = ({ formType }) => { ); }, [amount]); + const disabled = disabledUI?.includes(DisabledUI.FromAmount); + return ( {t('swap.fromAmount')} @@ -75,7 +79,9 @@ export const SwapInput: React.FC = ({ formType }) => { ) : null } - endAdornment={} + endAdornment={ + !disabled ? : undefined + } inputProps={{ inputMode: 'decimal', }} @@ -83,6 +89,7 @@ export const SwapInput: React.FC = ({ formType }) => { onBlur={handleBlur} value={amount} name={amountKey} + disabled={disabled} required /> diff --git a/packages/widget/src/pages/SettingsPage/ShowDestinationWallet.tsx b/packages/widget/src/pages/SettingsPage/ShowDestinationWallet.tsx index 495a3aaa5..39a660150 100644 --- a/packages/widget/src/pages/SettingsPage/ShowDestinationWallet.tsx +++ b/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, checked: boolean) => { setValue('showDestinationWallet', checked); }; diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index 2ddb25334..6cc46f895 100644 --- a/packages/widget/src/types/widget.ts +++ b/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 = {