From 0b8c23a83272f42e5eceed23ff3db00487cf7dff Mon Sep 17 00:00:00 2001 From: Mikhail Date: Fri, 8 Jul 2022 18:59:14 +0200 Subject: [PATCH 1/4] Check if the current state address equals input value before updating address state --- src/inputs/AddressInput/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/inputs/AddressInput/index.tsx b/src/inputs/AddressInput/index.tsx index b5c64b44..42ecd1c1 100644 --- a/src/inputs/AddressInput/index.tsx +++ b/src/inputs/AddressInput/index.tsx @@ -143,7 +143,12 @@ function AddressInput({ // when user switch the network we update the address state useEffect(() => { - updateAddressState(inputRef.current?.value); + // Because the `address` is going to change after we call `updateAddressState` + // To avoid calling `updateAddressState` twice, we check the value and the current address + const inputValue = inputRef.current?.value; + if (inputValue !== address) { + updateAddressState(inputRef.current?.value); + } }, [networkPrefix, address, updateAddressState]); // when user types we update the address state From 6016201fa6fbba24f6c24f89232c270dfe4539e7 Mon Sep 17 00:00:00 2001 From: Mikhail Date: Fri, 8 Jul 2022 20:11:48 +0200 Subject: [PATCH 2/4] disable minimizing --- babel.config.js | 2 +- webpack.config.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/babel.config.js b/babel.config.js index 19646cbe..7175faeb 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,6 @@ module.exports = { presets: [ - ['@babel/preset-env', { targets: { node: 'current' } }], + ['@babel/preset-env', { targets: '> 3%, not dead' }], '@babel/preset-typescript', '@babel/preset-react', ], diff --git a/webpack.config.js b/webpack.config.js index 9fea02cd..77da6380 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -62,4 +62,7 @@ module.exports = { fs: 'empty', child_process: 'empty', }, + optimization: { + minimize: false, + }, }; From 5965f27d929a91b4f4c95df60c62d4fe35773171 Mon Sep 17 00:00:00 2001 From: Mikhail Date: Fri, 8 Jul 2022 20:28:23 +0200 Subject: [PATCH 3/4] exclude updateAddressState from deps --- package.json | 2 +- src/inputs/AddressInput/index.tsx | 67 +++++++++++++++---------------- 2 files changed, 33 insertions(+), 36 deletions(-) diff --git a/package.json b/package.json index 4b180990..59050616 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "types": "yarn tsc", "start": "rimraf dist && webpack --mode production --watch", - "build": "rimraf dist && webpack --mode production", + "build": "rimraf dist && webpack --mode development", "build-storybook": "build-storybook --docs", "storybook": "start-storybook -p 9009 --docs", "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'", diff --git a/src/inputs/AddressInput/index.tsx b/src/inputs/AddressInput/index.tsx index 42ecd1c1..5d726ea4 100644 --- a/src/inputs/AddressInput/index.tsx +++ b/src/inputs/AddressInput/index.tsx @@ -36,25 +36,25 @@ type AddressInputProps = { } & TextFieldInputProps; function AddressInput({ - name, - address, - networkPrefix, - showNetworkPrefix = true, - disabled, - onChangeAddress, - getAddressFromDomain, - customENSThrottleDelay, - showLoadingSpinner, - InputProps, - inputProps, - hiddenLabel = false, - ...rest -}: AddressInputProps): ReactElement { + name, + address, + networkPrefix, + showNetworkPrefix = true, + disabled, + onChangeAddress, + getAddressFromDomain, + customENSThrottleDelay, + showLoadingSpinner, + InputProps, + inputProps, + hiddenLabel = false, + ...rest + }: AddressInputProps): ReactElement { const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false); const defaultInputValue = addPrefix( address, networkPrefix, - showNetworkPrefix + showNetworkPrefix, ); const inputRef = useRef({ value: defaultInputValue }); const throttle = useThrottle(); @@ -67,11 +67,11 @@ function AddressInput({ inputRef.current.value = addPrefix( checksumAddress, networkPrefix, - showNetworkPrefix + showNetworkPrefix, ); } }, - [networkPrefix, showNetworkPrefix] + [networkPrefix, showNetworkPrefix], ); const resolveDomainName = useCallback(async () => { @@ -123,23 +123,20 @@ function AddressInput({ }, [address, updateInputValue]); // we trim, checksum & remove valid network prefix when a valid address is typed by the user - const updateAddressState = useCallback( - (value) => { - const inputValue = trimSpaces(value); + const updateAddressState = (value: string) => { + const inputValue = trimSpaces(value); - const inputPrefix = getNetworkPrefix(inputValue); - const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue); + const inputPrefix = getNetworkPrefix(inputValue); + const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue); - // if the valid network prefix is present, we remove it from the address state - const isValidPrefix = networkPrefix === inputPrefix; - const checksumAddress = checksumValidAddress( - isValidPrefix ? inputWithoutPrefix : inputValue - ); + // if the valid network prefix is present, we remove it from the address state + const isValidPrefix = networkPrefix === inputPrefix; + const checksumAddress = checksumValidAddress( + isValidPrefix ? inputWithoutPrefix : inputValue, + ); - onChangeAddress(checksumAddress); - }, - [networkPrefix, onChangeAddress] - ); + onChangeAddress(checksumAddress); + }; // when user switch the network we update the address state useEffect(() => { @@ -149,7 +146,7 @@ function AddressInput({ if (inputValue !== address) { updateAddressState(inputRef.current?.value); } - }, [networkPrefix, address, updateAddressState]); + }, [networkPrefix, address]); // when user types we update the address state function onChange(e: ChangeEvent) { @@ -197,8 +194,8 @@ export default AddressInput; function LoaderSpinnerAdornment() { return ( - - + + ); } @@ -216,7 +213,7 @@ function checksumValidAddress(address: string) { function addPrefix( address: string, networkPrefix: string | undefined, - showNetworkPrefix = false + showNetworkPrefix = false, ): string { if (!address) { return ''; From 6494f081082eb2827aae47784cb0570fbc5b15d5 Mon Sep 17 00:00:00 2001 From: Mikhail Date: Fri, 8 Jul 2022 20:32:12 +0200 Subject: [PATCH 4/4] Revert "exclude updateAddressState from deps" This reverts commit 5965f27d929a91b4f4c95df60c62d4fe35773171. --- package.json | 2 +- src/inputs/AddressInput/index.tsx | 67 ++++++++++++++++--------------- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 59050616..4b180990 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "scripts": { "types": "yarn tsc", "start": "rimraf dist && webpack --mode production --watch", - "build": "rimraf dist && webpack --mode development", + "build": "rimraf dist && webpack --mode production", "build-storybook": "build-storybook --docs", "storybook": "start-storybook -p 9009 --docs", "lint:check": "eslint './src/**/*.{js,jsx,ts,tsx}'", diff --git a/src/inputs/AddressInput/index.tsx b/src/inputs/AddressInput/index.tsx index 5d726ea4..42ecd1c1 100644 --- a/src/inputs/AddressInput/index.tsx +++ b/src/inputs/AddressInput/index.tsx @@ -36,25 +36,25 @@ type AddressInputProps = { } & TextFieldInputProps; function AddressInput({ - name, - address, - networkPrefix, - showNetworkPrefix = true, - disabled, - onChangeAddress, - getAddressFromDomain, - customENSThrottleDelay, - showLoadingSpinner, - InputProps, - inputProps, - hiddenLabel = false, - ...rest - }: AddressInputProps): ReactElement { + name, + address, + networkPrefix, + showNetworkPrefix = true, + disabled, + onChangeAddress, + getAddressFromDomain, + customENSThrottleDelay, + showLoadingSpinner, + InputProps, + inputProps, + hiddenLabel = false, + ...rest +}: AddressInputProps): ReactElement { const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false); const defaultInputValue = addPrefix( address, networkPrefix, - showNetworkPrefix, + showNetworkPrefix ); const inputRef = useRef({ value: defaultInputValue }); const throttle = useThrottle(); @@ -67,11 +67,11 @@ function AddressInput({ inputRef.current.value = addPrefix( checksumAddress, networkPrefix, - showNetworkPrefix, + showNetworkPrefix ); } }, - [networkPrefix, showNetworkPrefix], + [networkPrefix, showNetworkPrefix] ); const resolveDomainName = useCallback(async () => { @@ -123,20 +123,23 @@ function AddressInput({ }, [address, updateInputValue]); // we trim, checksum & remove valid network prefix when a valid address is typed by the user - const updateAddressState = (value: string) => { - const inputValue = trimSpaces(value); + const updateAddressState = useCallback( + (value) => { + const inputValue = trimSpaces(value); - const inputPrefix = getNetworkPrefix(inputValue); - const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue); + const inputPrefix = getNetworkPrefix(inputValue); + const inputWithoutPrefix = getAddressWithoutNetworkPrefix(inputValue); - // if the valid network prefix is present, we remove it from the address state - const isValidPrefix = networkPrefix === inputPrefix; - const checksumAddress = checksumValidAddress( - isValidPrefix ? inputWithoutPrefix : inputValue, - ); + // if the valid network prefix is present, we remove it from the address state + const isValidPrefix = networkPrefix === inputPrefix; + const checksumAddress = checksumValidAddress( + isValidPrefix ? inputWithoutPrefix : inputValue + ); - onChangeAddress(checksumAddress); - }; + onChangeAddress(checksumAddress); + }, + [networkPrefix, onChangeAddress] + ); // when user switch the network we update the address state useEffect(() => { @@ -146,7 +149,7 @@ function AddressInput({ if (inputValue !== address) { updateAddressState(inputRef.current?.value); } - }, [networkPrefix, address]); + }, [networkPrefix, address, updateAddressState]); // when user types we update the address state function onChange(e: ChangeEvent) { @@ -194,8 +197,8 @@ export default AddressInput; function LoaderSpinnerAdornment() { return ( - - + + ); } @@ -213,7 +216,7 @@ function checksumValidAddress(address: string) { function addPrefix( address: string, networkPrefix: string | undefined, - showNetworkPrefix = false, + showNetworkPrefix = false ): string { if (!address) { return '';