feat: add hiddenUI toToken option

lifinance · May 10, 2023 · 4e5376b · 4e5376b
1 parent 4aa5cef
commit 4e5376b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git 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
@@ -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<BoxProps> = (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,41 +20,43 @@ export const SelectChainAndToken: React.FC<BoxProps> = (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 &&
     toChain &&
     fromToken &&
     toToken &&
     !prefersNarrowView &&
-    !nftVariant;
+    !hiddenToToken;
   return (
     <Box
       sx={{ display: 'flex', flexDirection: isCompact ? 'row' : 'column' }}
       {...props}
     >
       <SelectTokenButton formType="from" compact={isCompact} />
-      {!nftVariant ? (
+      {!hiddenToToken ? (
         <Box
           sx={{
             display: 'flex',
             justifyContent: 'center',
             alignItems: 'center',
           }}
-          m={!disabledReverse ? -1.125 : 1}
+          m={!hiddenReverse ? -1.125 : 1}
         >
-          {!disabledReverse ? (
+          {!hiddenReverse ? (
             <ReverseTokensButton vertical={!isCompact} />
           ) : null}
         </Box>
       ) : null}
-      {!nftVariant ? (
+      {!hiddenToToken ? (
         <SelectTokenButton formType="to" compact={isCompact} />
       ) : null}
     </Box>

diff --git 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}`;