add callbacks to success screen

ui/addressVerification/AddressVerificationModal.tsx

@@ -15,9 +15,10 @@ interface Props {
   isOpen: boolean;
   onClose: () => void;
   onSubmit: (address: VerifiedAddress) => void;
+  onAddTokenInfoClick: (address: string) => void;
 }
 
-const AddressVerificationModal = ({ isOpen, onClose, onSubmit }: Props) => {
+const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoClick }: Props) => {
   const [ stepIndex, setStepIndex ] = React.useState(0);
   const [ data, setData ] = React.useState<AddressVerificationFormFirstStepFields & AddressCheckStatusSuccess>({ address: '', signingMessage: '' });
 
@@ -38,12 +39,27 @@ const AddressVerificationModal = ({ isOpen, onClose, onSubmit }: Props) => {
   const handleClose = React.useCallback(() => {
     onClose();
     setStepIndex(0);
+    setData({ address: '', signingMessage: '' });
   }, [ onClose ]);
 
+  const handleAddTokenInfoClick = React.useCallback(() => {
+    onAddTokenInfoClick(data.address);
+    handleClose();
+  }, [ handleClose, data.address, onAddTokenInfoClick ]);
+
   const steps = [
-    { title: 'Verify new address ownership', content: <AddressVerificationStepAddress onContinue={ handleGoToSecondStep }/> },
-    { title: 'Copy and sign message', content: <AddressVerificationStepSignature { ...data } onContinue={ handleGoToThirdStep }/> },
-    { title: 'Congrats! Address is verified.', content: <AddressVerificationStepSuccess onShowListClick={ handleClose } onAddTokenClick={ handleClose }/> },
+    {
+      title: 'Verify new address ownership',
+      content: <AddressVerificationStepAddress onContinue={ handleGoToSecondStep }/>,
+    },
+    {
+      title: 'Copy and sign message',
+      content: <AddressVerificationStepSignature { ...data } onContinue={ handleGoToThirdStep }/>,
+    },
+    {
+      title: 'Congrats! Address is verified.',
+      content: <AddressVerificationStepSuccess onShowListClick={ handleClose } onAddTokenInfoClick={ handleAddTokenInfoClick }/>,
+    },
   ];
   const step = steps[stepIndex];
 

ui/addressVerification/steps/AddressVerificationStepSuccess.tsx

@@ -3,10 +3,10 @@ import React from 'react';
 
 interface Props {
   onShowListClick: () => void;
-  onAddTokenClick: () => void;
+  onAddTokenInfoClick: () => void;
 }
 
-const AddressVerificationStepSuccess = ({ onAddTokenClick, onShowListClick }: Props) => {
+const AddressVerificationStepSuccess = ({ onAddTokenInfoClick, onShowListClick }: Props) => {
   return (
     <Box>
       <Alert status="success" flexWrap="wrap" whiteSpace="pre-wrap" wordBreak="break-word" mb={ 3 } display="inline-block">
@@ -19,7 +19,7 @@ const AddressVerificationStepSuccess = ({ onAddTokenClick, onShowListClick }: Pr
         <Button size="lg" variant="outline" onClick={ onShowListClick }>
           View my verified addresses
         </Button>
-        <Button size="lg" onClick={ onAddTokenClick }>
+        <Button size="lg" onClick={ onAddTokenInfoClick }>
           Add token information
         </Button>
       </Flex>

ui/pages/VerifiedAddresses.tsx

@@ -29,6 +29,14 @@ const VerifiedAddresses = () => {
   });
   const applicationsQuery = useApiQuery('token_info_applications', {
     pathParams: { chainId: appConfig.network.id, id: undefined },
+    queryOptions: {
+      select: (data) => {
+        return {
+          ...data,
+          submissions: data.submissions.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)),
+        };
+      },
+    },
   });
   const queryClient = useQueryClient();
 
@@ -155,8 +163,8 @@ const VerifiedAddresses = () => {
         <chakra.p fontWeight={ 600 } mt={ 5 }>
           Before starting, make sure that:
         </chakra.p>
-        <OrderedList>
-          <ListItem>The source code for the smart contract is deployed on “Network Name”.</ListItem>
+        <OrderedList ml={ 6 }>
+          <ListItem>The source code for the smart contract is deployed on “{ appConfig.network.name }”.</ListItem>
           <ListItem>The source code is verified (if not yet verified, you can use this tool).</ListItem>
         </OrderedList>
         <chakra.div mt={ 5 }>
@@ -172,7 +180,12 @@ const VerifiedAddresses = () => {
         skeletonProps={{ customSkeleton: skeleton }}
       />
       { addButton }
-      <AddressVerificationModal isOpen={ modalProps.isOpen } onClose={ modalProps.onClose } onSubmit={ handleAddressSubmit }/>
+      <AddressVerificationModal
+        isOpen={ modalProps.isOpen }
+        onClose={ modalProps.onClose }
+        onSubmit={ handleAddressSubmit }
+        onAddTokenInfoClick={ handleItemAdd }
+      />
     </Page>
   );
 };