Enhance the management of 'confirm' button state in components that use TokenSelector & update copy

src/modules/core/components/TokenEditDialog/TokenEditDialog.tsx

@@ -79,9 +79,11 @@ const TokenEditDialog = ({
   const [tokenSelectorHasError, setTokenSelectorHasError] = useState<boolean>(
     false,
   );
+  const [isLoadingAddress, setisLoadingAddress] = useState<boolean>(false);
 
-  const handleTokenSelect = (token: OneToken) => {
+  const handleTokenSelect = (checkingAddress: boolean, token: OneToken) => {
     setTokenData(token);
+    setisLoadingAddress(checkingAddress);
   };
 
   const handleTokenSelectError = (hasError: boolean) => {
@@ -184,8 +186,10 @@ const TokenEditDialog = ({
         </Paragraph>
         <TokenSelector
           tokenAddress={values.tokenAddress as string}
-          onTokenSelect={(token: OneToken) => handleTokenSelect(token)}
+          onTokenSelect={handleTokenSelect}
           onTokenSelectError={handleTokenSelectError}
+          tokenSelectorHasError={tokenSelectorHasError}
+          isLoadingAddress={isLoadingAddress}
           tokenData={tokenData}
           label={MSG.fieldLabel}
           appearance={{ colorSchema: 'grey', theme: 'fat' }}
@@ -238,7 +242,8 @@ const TokenEditDialog = ({
             tokenSelectorHasError ||
             !isValid ||
             inputDisabled ||
-            !hasTokensListChanged(values)
+            !hasTokensListChanged(values) ||
+            isLoadingAddress
           }
           type="submit"
           style={{ width: styles.wideButton }}

src/modules/dashboard/components/CreateColonyWizard/StepSelectToken.tsx

@@ -101,13 +101,25 @@ const StepSelectToken = ({
 }: Props) => {
   const [tokenData, setTokenData] = useState<OneToken | undefined>();
   const { formatMessage } = useIntl();
+  const [isLoadingAddress, setisLoadingAddress] = useState<boolean>(false);
+  const [tokenSelectorHasError, setTokenSelectorHasError] = useState<boolean>(
+    false,
+  );
 
-  const handleTokenSelect = (token: OneToken, setFieldValue: SetFieldValue) => {
+  const handleTokenSelect = (
+    checkingAddress: boolean,
+    token: OneToken,
+    setFieldValue: SetFieldValue,
+  ) => {
     setTokenData(token);
-    if (token) {
-      setFieldValue('tokenName', token.name);
-      setFieldValue('tokenSymbol', token.symbol);
-    }
+    setisLoadingAddress(checkingAddress);
+
+    setFieldValue('tokenName', token?.name || '');
+    setFieldValue('tokenSymbol', token?.symbol || '');
+  };
+
+  const handleTokenSelectError = (hasError: boolean) => {
+    setTokenSelectorHasError(hasError);
   };
 
   const goToTokenCreate = useCallback(() => {
@@ -158,9 +170,12 @@ const StepSelectToken = ({
           <div>
             <TokenSelector
               tokenAddress={values.tokenAddress}
-              onTokenSelect={(token: OneToken) =>
-                handleTokenSelect(token, setFieldValue)
-              }
+              onTokenSelect={(checkingAddress: boolean, token: OneToken) => {
+                handleTokenSelect(checkingAddress, token, setFieldValue);
+              }}
+              onTokenSelectError={handleTokenSelectError}
+              tokenSelectorHasError={tokenSelectorHasError}
+              isLoadingAddress={isLoadingAddress}
               tokenData={tokenData}
               extra={
                 <button
@@ -198,8 +213,13 @@ const StepSelectToken = ({
               <Button
                 appearance={{ theme: 'primary', size: 'large' }}
                 type="submit"
-                disabled={!isValid || (!dirty && !stepCompleted)}
                 text={MSG.continue}
+                disabled={
+                  tokenSelectorHasError ||
+                  !isValid ||
+                  (!dirty && !stepCompleted) ||
+                  isLoadingAddress
+                }
               />
             </div>
           </div>

src/modules/dashboard/components/CreateColonyWizard/TokenSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState, ReactNode } from 'react';
+import React, { useCallback, useEffect, ReactNode } from 'react';
 import { defineMessages, MessageDescriptor, useIntl } from 'react-intl';
 import { useApolloClient } from '@apollo/client';
 
@@ -36,14 +36,17 @@ const MSG = defineMessages({
   },
   statusNotFound: {
     id: 'dashboard.CreateColonyWizard.TokenSelector.statusNotFound',
-    defaultMessage: 'Token data not found. Please type in token details',
+    defaultMessage:
+      'Token data not found. Please check the token contract address.',
   },
 });
 
 interface Props {
   tokenAddress: string;
-  onTokenSelect: (arg0: OneToken | null | void) => any;
-  onTokenSelectError?: (arg: boolean) => any;
+  onTokenSelect: (checkingAddress: boolean, token?: OneToken | null) => void;
+  onTokenSelectError: (arg: boolean) => void;
+  tokenSelectorHasError: boolean;
+  isLoadingAddress: boolean;
   tokenData?: OneToken;
   label?: string | MessageDescriptor;
   appearance?: Appearance;
@@ -53,8 +56,15 @@ interface Props {
   disabled?: boolean;
 }
 
-const getStatusText = (isLoading: boolean, tokenData?: OneToken) => {
-  if (isLoading) {
+const getStatusText = (
+  hasError: boolean,
+  isLoadingAddress: boolean,
+  tokenData?: OneToken,
+) => {
+  if (hasError) {
+    return {};
+  }
+  if (isLoadingAddress) {
     return { status: MSG.statusLoading };
   }
   if (tokenData === null) {
@@ -76,6 +86,8 @@ const TokenSelector = ({
   tokenAddress,
   onTokenSelect,
   onTokenSelectError,
+  tokenSelectorHasError,
+  isLoadingAddress,
   tokenData,
   extra,
   label,
@@ -92,31 +104,23 @@ const TokenSelector = ({
     return data && data.token;
   }, [apolloClient, tokenAddress]);
 
-  const [isLoading, setLoading] = useState(false);
-
   const handleGetTokenSuccess = useCallback(
     (token: OneToken) => {
-      const { name, symbol } = token;
-      setLoading(false);
+      const { name, symbol } = token || {};
       if (!name || !symbol) {
-        onTokenSelect(null);
+        onTokenSelect(false, null);
+        onTokenSelectError(true);
         return;
       }
-      onTokenSelect(token);
-      if (onTokenSelectError) {
-        onTokenSelectError(false);
-      }
+      onTokenSelect(false, token);
     },
     [onTokenSelect, onTokenSelectError],
   );
 
   const handleGetTokenError = useCallback(
     (error: Error) => {
-      setLoading(false);
-      onTokenSelect(null);
-      if (onTokenSelectError) {
-        onTokenSelectError(true);
-      }
+      onTokenSelect(false, null);
+      onTokenSelectError(true);
       log.error(error);
     },
     [onTokenSelect, onTokenSelectError],
@@ -127,27 +131,27 @@ const TokenSelector = ({
   useEffect(() => {
     // Guard against updates that don't include a new, valid `tokenAddress`,
     // or if the form is submitting or loading.
-    if (tokenAddress === prevTokenAddress || isLoading) return;
+    if (tokenAddress === prevTokenAddress || isLoadingAddress) return;
     if (!tokenAddress || !tokenAddress.length || !isAddress(tokenAddress)) {
-      onTokenSelect();
+      onTokenSelect(false);
       return;
     }
     // For a valid address, attempt to load token info.
     // This is setting state during `componentDidUpdate`, which is
     // generally a bad idea, but we are guarding against it by checking the
     // state first.
-    setLoading(true);
-    onTokenSelect();
-
+    onTokenSelectError(false);
+    onTokenSelect(true);
     // Get the token address and handle success/error
     getToken()
       .then((token: OneToken) => handleGetTokenSuccess(token))
       .catch((error) => handleGetTokenError(error));
   }, [
     tokenAddress,
     getToken,
-    isLoading,
+    isLoadingAddress,
     onTokenSelect,
+    onTokenSelectError,
     prevTokenAddress,
     handleGetTokenSuccess,
     handleGetTokenError,
@@ -165,9 +169,12 @@ const TokenSelector = ({
         name="tokenAddress"
         label={labelText || MSG.inputLabel}
         extra={extra}
-        {...getStatusText(isLoading, tokenData)}
+        {...getStatusText(tokenSelectorHasError, isLoadingAddress, tokenData)}
         appearance={appearance}
         disabled={disabled}
+        forcedFieldError={
+          tokenSelectorHasError ? MSG.statusNotFound : undefined
+        }
       />
     </div>
   );

src/modules/dashboard/components/Wallet/UserTokenEditDialogForm.tsx

@@ -76,15 +76,17 @@ const UserTokenEditDialogForm = ({
   const [tokenSelectorHasError, setTokenSelectorHasError] = useState<boolean>(
     false,
   );
+  const [isLoadingAddress, setisLoadingAddress] = useState<boolean>(false);
   const { formatMessage } = useIntl();
 
   const sortedTokenIds = useMemo(
     () => tokensList.map((token) => token.id).sort(),
     [tokensList],
   );
 
-  const handleTokenSelect = (token: OneToken) => {
+  const handleTokenSelect = (checkingAddress: boolean, token: OneToken) => {
     setTokenData(token);
+    setisLoadingAddress(checkingAddress);
   };
 
   const handleTokenSelectError = (hasError: boolean) => {
@@ -177,8 +179,10 @@ const UserTokenEditDialogForm = ({
               </Paragraph>
               <TokenSelector
                 tokenAddress={values.tokenAddress as string}
-                onTokenSelect={(token: OneToken) => handleTokenSelect(token)}
+                onTokenSelect={handleTokenSelect}
                 onTokenSelectError={handleTokenSelectError}
+                tokenSelectorHasError={tokenSelectorHasError}
+                isLoadingAddress={isLoadingAddress}
                 tokenData={tokenData}
                 label={MSG.fieldLabel}
                 appearance={{ colorSchema: 'grey', theme: 'fat' }}
@@ -207,7 +211,8 @@ const UserTokenEditDialogForm = ({
                   !isValid ||
                   !hasRegisteredProfile ||
                   !hasTokensListChanged(values) ||
-                  isSubmitting
+                  isSubmitting ||
+                  isLoadingAddress
                 }
                 type="submit"
                 style={{ width: styles.wideButton }}