feat: add requiredUI config option

lifinance · Feb 1, 2023 · 61a7960 · 61a7960
1 parent 88b7f6a
commit 61a7960
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 19 deletions.
diff --git a/packages/widget-playground/src/config.ts b/packages/widget-playground/src/config.ts
@@ -29,6 +29,7 @@ export const widgetBaseConfig: WidgetConfig = {
   // useRecommendedRoute: true,
   buildSwapUrl: true,
   // disabledUI: ['toAddress', 'fromAmount', 'toToken', 'fromToken'],
+  requiredUI: ['toAddress'],
   sdkConfig: {
     // apiUrl: 'https://staging.li.quest/v1/',
     defaultRouteOptions: {

diff --git a/packages/widget/src/components/Card/CardTitle.tsx b/packages/widget/src/components/Card/CardTitle.tsx
@@ -1,10 +1,16 @@
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
-export const CardTitle = styled(Typography)(({ theme }) => ({
+export const CardTitle = styled(Typography, {
+  shouldForwardProp: (prop) => !['required'].includes(prop as string),
+})<{ required?: boolean }>(({ theme, required }) => ({
   fontSize: '0.875rem',
   lineHeight: '1.286',
   letterSpacing: '0.01071em',
   fontWeight: 700,
   padding: theme.spacing(1.75, 2, 0, 2),
+  '&:after': {
+    content: required ? '" *"' : 'none',
+    color: theme.palette.error.main,
+  },
 }));
diff --git a/packages/widget/src/components/SendToWallet/SendToWallet.tsx b/packages/widget/src/components/SendToWallet/SendToWallet.tsx
@@ -12,35 +12,44 @@ import { FormControl, Input } from './SendToWallet.style';
 
 export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
   const { t } = useTranslation();
-  const { register, trigger } = useFormContext();
+  const { register, unregister, trigger, getValues, clearErrors } =
+    useFormContext();
   const { account, provider } = useWallet();
-  const { disabledUI, hiddenUI, toAddress } = useWidgetConfig();
+  const { disabledUI, hiddenUI, requiredUI, toAddress } = useWidgetConfig();
   const { showSendToWallet, showSendToWalletDirty, setSendToWallet } =
     useSendToWalletStore();
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
 
-  useEffect(() => {
-    trigger(SwapFormKey.ToAddress);
-  }, [account.chainId, trigger]);
-
   const hiddenToAddress = hiddenUI?.includes(HiddenUI.ToAddress);
   const disabledToAddress = disabledUI?.includes(DisabledUI.ToAddress);
+  const requiredToAddress = requiredUI?.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,
-  );
+  // We want to show toAddress field if it is set via widget configuration and not hidden
+  const showInstantly =
+    Boolean(
+      !showSendToWalletDirty &&
+        showDestinationWallet &&
+        toAddress &&
+        !hiddenToAddress,
+    ) || requiredToAddress;
 
   useEffect(() => {
     if (showInstantly) {
       setSendToWallet(true);
     }
   }, [showInstantly, setSendToWallet]);
 
+  useEffect(() => {
+    const value = getValues(SwapFormKey.ToAddress);
+    if (value) {
+      trigger(SwapFormKey.ToAddress);
+    }
+  }, [account.chainId, getValues, trigger]);
+
+  useEffect(() => {
+    unregister(SwapFormKey.ToAddress);
+  }, [requiredToAddress, unregister]);
+
   if (hiddenToAddress) {
     return null;
   }
@@ -51,6 +60,9 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
     name,
     ref: inputRef,
   } = register(SwapFormKey.ToAddress, {
+    required:
+      requiredToAddress &&
+      (t('swap.error.title.walletAddressRequired') as string),
     validate: async (value: string) => {
       try {
         if (!value) {
@@ -76,7 +88,9 @@ export const SendToWallet: React.FC<BoxProps> = forwardRef((props, ref) => {
       unmountOnExit
     >
       <Card {...props} ref={ref}>
-        <CardTitle>{t('swap.sendToWallet')}</CardTitle>
+        <CardTitle required={requiredToAddress}>
+          {t('swap.sendToWallet')}
+        </CardTitle>
         <FormControl fullWidth sx={{ paddingTop: '6px', paddingBottom: '5px' }}>
           <Input
             ref={inputRef}

diff --git a/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx b/packages/widget/src/components/SendToWallet/SendToWalletButton.tsx
@@ -10,14 +10,15 @@ export const SendToWalletButton: React.FC = () => {
   const { t } = useTranslation();
   const { setValue } = useFormContext();
   const { account } = useWallet();
-  const { disabledUI, hiddenUI } = useWidgetConfig();
+  const { disabledUI, hiddenUI, requiredUI } = useWidgetConfig();
   const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
   const { showDestinationWallet } = useSettings(['showDestinationWallet']);
 
   if (
     !showDestinationWallet ||
     !account.isActive ||
-    hiddenUI?.includes(HiddenUI.ToAddress)
+    hiddenUI?.includes(HiddenUI.ToAddress) ||
+    requiredUI?.includes(HiddenUI.ToAddress)
   ) {
     return null;
   }

diff --git a/packages/widget/src/i18n/en.json b/packages/widget/src/i18n/en.json
@@ -93,6 +93,7 @@
         "transactionUnprepared": "Unable to prepare transaction",
         "unknown": "Something went wrong",
         "walletAddressInvalid": "Wallet address is invalid.",
+        "walletAddressRequired": "Wallet address is required.",
         "walletEnsAddressInvalid": "Wallet address is invalid or network doesn't support ENS."
       }
     },

diff --git a/packages/widget/src/pages/MainPage/MainSwapButton.tsx b/packages/widget/src/pages/MainPage/MainSwapButton.tsx
@@ -27,7 +27,9 @@ export const MainSwapButton: React.FC = () => {
     <SwapButton
       onClick={handleClick}
       currentRoute={currentRoute}
-      disabled={isLoading || isFetching || isValidating || !isValid}
+      disabled={
+        currentRoute && (isLoading || isFetching || isValidating || !isValid)
+      }
     />
   );
 };
diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts
@@ -42,6 +42,11 @@ export enum HiddenUI {
 }
 export type HiddenUIType = `${HiddenUI}`;
 
+export enum RequiredUI {
+  ToAddress = 'toAddress',
+}
+export type RequiredUIType = `${RequiredUI}`;
+
 export type Appearance = PaletteMode | 'auto';
 export type ThemeConfig = {
   palette?: Pick<
@@ -114,6 +119,7 @@ export interface WidgetConfig {
   disableTelemetry?: boolean;
   disabledUI?: DisabledUIType[];
   hiddenUI?: HiddenUIType[];
+  requiredUI?: RequiredUIType[];
   useRecommendedRoute?: boolean;
 
   walletManagement?: WidgetWalletManagement;