From 61a7960b0524d0d96210d4e450028b80f0c58a5d Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Wed, 1 Feb 2023 17:19:22 +0700 Subject: [PATCH] feat: add requiredUI config option --- packages/widget-playground/src/config.ts | 1 + .../widget/src/components/Card/CardTitle.tsx | 8 +++- .../components/SendToWallet/SendToWallet.tsx | 44 ++++++++++++------- .../SendToWallet/SendToWalletButton.tsx | 5 ++- packages/widget/src/i18n/en.json | 1 + .../src/pages/MainPage/MainSwapButton.tsx | 4 +- packages/widget/src/types/widget.ts | 6 +++ 7 files changed, 50 insertions(+), 19 deletions(-) diff --git a/packages/widget-playground/src/config.ts b/packages/widget-playground/src/config.ts index f7e1ecaa8..45c0affcf 100644 --- 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 index 913cb3f36..60e7e2087 100644 --- 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 index 9bdee4d47..c81272e5d 100644 --- a/packages/widget/src/components/SendToWallet/SendToWallet.tsx +++ b/packages/widget/src/components/SendToWallet/SendToWallet.tsx @@ -12,28 +12,26 @@ import { FormControl, Input } from './SendToWallet.style'; export const SendToWallet: React.FC = 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) { @@ -41,6 +39,17 @@ export const SendToWallet: React.FC = forwardRef((props, ref) => { } }, [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 = 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 = forwardRef((props, ref) => { unmountOnExit > - {t('swap.sendToWallet')} + + {t('swap.sendToWallet')} + { 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 index 578522f81..adf9eaea4 100644 --- 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 index 5f510519a..f304547b0 100644 --- 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 = () => { ); }; diff --git a/packages/widget/src/types/widget.ts b/packages/widget/src/types/widget.ts index d8df5642e..0b82a4960 100644 --- 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;