diff --git a/packages/widget-playground/src/config.ts b/packages/widget-playground/src/config.ts index 6f10215..ae72262 100644 --- a/packages/widget-playground/src/config.ts +++ b/packages/widget-playground/src/config.ts @@ -26,13 +26,13 @@ export const widgetBaseConfig: WidgetConfig = { variant: 'expandable', // subvariant: 'split', integrator: 'li.fi-playground', - // hiddenUI: ['poweredBy', 'language', 'appearance', 'drawerButton'], chains: { allow: [], // 1, 1285, 10, 56, 137 deny: [], }, // useRecommendedRoute: true, buildSwapUrl: true, + // hiddenUI: ['poweredBy', 'language', 'appearance', 'drawerButton'], // disabledUI: ['toAddress', 'fromAmount', 'toToken', 'fromToken'], // requiredUI: ['toAddress'], // slippage: 0.003, diff --git a/packages/widget/src/components/SelectChainAndToken.tsx b/packages/widget/src/components/SelectChainAndToken.tsx index d6ffd5c..9e48f90 100644 --- a/packages/widget/src/components/SelectChainAndToken.tsx +++ b/packages/widget/src/components/SelectChainAndToken.tsx @@ -4,13 +4,13 @@ import { useWatch } from 'react-hook-form'; import { ReverseTokensButton } from '../components/ReverseTokensButton'; import { SelectTokenButton } from '../components/SelectTokenButton'; import { SwapFormKey, useWidgetConfig } from '../providers'; -import { DisabledUI } from '../types'; +import { DisabledUI, HiddenUI } from '../types'; export const SelectChainAndToken: React.FC = (props) => { const prefersNarrowView = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'), ); - const { disabledUI, variant } = useWidgetConfig(); + const { disabledUI, hiddenUI, variant } = useWidgetConfig(); const [fromChain, toChain, fromToken, toToken] = useWatch({ name: [ SwapFormKey.FromChain, @@ -20,12 +20,14 @@ export const SelectChainAndToken: React.FC = (props) => { ], }); - const disabledReverse = + const hiddenReverse = variant === 'refuel' || disabledUI?.includes(DisabledUI.FromToken) || - disabledUI?.includes(DisabledUI.ToToken); + disabledUI?.includes(DisabledUI.ToToken) || + hiddenUI?.includes(HiddenUI.ToToken); - const nftVariant = variant === 'nft'; + const hiddenToToken = + variant === 'nft' || hiddenUI?.includes(HiddenUI.ToToken); const isCompact = fromChain && @@ -33,28 +35,28 @@ export const SelectChainAndToken: React.FC = (props) => { fromToken && toToken && !prefersNarrowView && - !nftVariant; + !hiddenToToken; return ( - {!nftVariant ? ( + {!hiddenToToken ? ( - {!disabledReverse ? ( + {!hiddenReverse ? ( ) : null} ) : null} - {!nftVariant ? ( + {!hiddenToToken ? ( ) : null} diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index b6922e3..fe0e39b 100644 --- a/packages/widget/src/types/widget.ts +++ b/packages/widget/src/types/widget.ts @@ -42,6 +42,7 @@ export enum HiddenUI { Language = 'language', PoweredBy = 'poweredBy', ToAddress = 'toAddress', + ToToken = 'toToken', WalletMenu = 'walletMenu', } export type HiddenUIType = `${HiddenUI}`;