hide add token in modal for non-token addresses

ui/addressVerification/AddressVerificationModal.tsx

@@ -11,6 +11,8 @@ import AddressVerificationStepAddress from './steps/AddressVerificationStepAddre
 import AddressVerificationStepSignature from './steps/AddressVerificationStepSignature';
 import AddressVerificationStepSuccess from './steps/AddressVerificationStepSuccess';
 
+type StateData = AddressVerificationFormFirstStepFields & AddressCheckStatusSuccess & { isToken?: boolean };
+
 interface Props {
   isOpen: boolean;
   onClose: () => void;
@@ -20,7 +22,7 @@ interface Props {
 
 const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoClick }: Props) => {
   const [ stepIndex, setStepIndex ] = React.useState(0);
-  const [ data, setData ] = React.useState<AddressVerificationFormFirstStepFields & AddressCheckStatusSuccess>({ address: '', signingMessage: '' });
+  const [ data, setData ] = React.useState<StateData>({ address: '', signingMessage: '' });
 
   const handleGoToSecondStep = React.useCallback((firstStepResult: typeof data) => {
     setData(firstStepResult);
@@ -30,6 +32,7 @@ const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoCli
   const handleGoToThirdStep = React.useCallback((address: VerifiedAddress) => {
     onSubmit(address);
     setStepIndex((prev) => prev + 1);
+    setData((prev) => ({ ...prev, isToken: Boolean(address.metadata.tokenName) }));
   }, [ onSubmit ]);
 
   const handleGoToPrevStep = React.useCallback(() => {
@@ -58,7 +61,14 @@ const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoCli
     },
     {
       title: 'Congrats! Address is verified.',
-      content: <AddressVerificationStepSuccess onShowListClick={ handleClose } onAddTokenInfoClick={ handleAddTokenInfoClick }/>,
+      content: (
+        <AddressVerificationStepSuccess
+          onShowListClick={ handleClose }
+          onAddTokenInfoClick={ handleAddTokenInfoClick }
+          isToken={ data.isToken }
+          address={ data.address }
+        />
+      ),
     },
   ];
   const step = steps[stepIndex];

ui/addressVerification/steps/AddressVerificationStepSuccess.tsx

@@ -4,24 +4,28 @@ import React from 'react';
 interface Props {
   onShowListClick: () => void;
   onAddTokenInfoClick: () => void;
+  isToken?: boolean;
+  address: string;
 }
 
-const AddressVerificationStepSuccess = ({ onAddTokenInfoClick, onShowListClick }: Props) => {
+const AddressVerificationStepSuccess = ({ onAddTokenInfoClick, onShowListClick, isToken, address }: Props) => {
   return (
     <Box>
       <Alert status="success" flexWrap="wrap" whiteSpace="pre-wrap" wordBreak="break-word" mb={ 3 } display="inline-block">
         <span>The address ownership for </span>
-        <chakra.span fontWeight={ 700 }>0xaba7161a7fb69c88e16ed9f455ce62b791ee4d03</chakra.span>
+        <chakra.span fontWeight={ 700 }>{ address }</chakra.span>
         <span> is verified.</span>
       </Alert>
       <p>You may now submit the “Add token information” request</p>
       <Flex alignItems="center" mt={ 8 } columnGap={ 5 } flexWrap="wrap" rowGap={ 5 }>
-        <Button size="lg" variant="outline" onClick={ onShowListClick }>
+        <Button size="lg" variant={ isToken ? 'outline' : 'solid' } onClick={ onShowListClick }>
           View my verified addresses
         </Button>
-        <Button size="lg" onClick={ onAddTokenInfoClick }>
-          Add token information
-        </Button>
+        { isToken && (
+          <Button size="lg" onClick={ onAddTokenInfoClick }>
+            Add token information
+          </Button>
+        ) }
       </Flex>
     </Box>
   );