add screens transition

ui/pages/VerifiedAddresses.tsx

@@ -11,18 +11,27 @@ import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import SkeletonListAccount from 'ui/shared/skeletons/SkeletonListAccount';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
+import TokenInfoForm from 'ui/tokenInfo/TokenInfoForm';
 import VerifiedAddressesTable from 'ui/verifiedAddresses/VerifiedAddressesTable';
 
 const VerifiedAddresses = () => {
   useRedirectForInvalidAuthToken();
 
+  const [ submissionId, setSubmissionId ] = React.useState<number>();
+
   const modalProps = useDisclosure();
   const { data, isLoading, isError } = useApiQuery('verified_addresses', {
     pathParams: { chainId: appConfig.network.id },
   });
 
+  const handleGoBack = React.useCallback(() => {
+    setSubmissionId(undefined);
+  }, []);
+
+  const handleItemAdd = React.useCallback(() => {
+    setSubmissionId(NaN);
+  }, []);
   const handleItemEdit = React.useCallback(() => {}, []);
-  const handleItemDelete = React.useCallback(() => {}, []);
 
   const addButton = (
     <Button size="lg" onClick={ modalProps.onOpen } marginTop={ 8 }>
@@ -43,14 +52,34 @@ const VerifiedAddresses = () => {
     </>
   );
 
+  const backLink = React.useMemo(() => {
+    if (submissionId === undefined) {
+      return;
+    }
+
+    return {
+      label: 'Back to my verified addresses',
+      onClick: handleGoBack,
+    };
+  }, [ handleGoBack, submissionId ]);
+
+  if (submissionId !== undefined) {
+    return (
+      <Page>
+        <PageTitle text="Token info application form" backLink={ backLink }/>
+        <TokenInfoForm id={ submissionId }/>
+      </Page>
+    );
+  }
+
   const content = data?.verifiedAddresses ? (
     <>
       <Show below="lg" key="content-mobile" ssr={ false }>
-        mobile view
+        <div>mobile view</div>
         { addButton }
       </Show>
       <Hide below="lg" key="content-desktop" ssr={ false }>
-        <VerifiedAddressesTable data={ data.verifiedAddresses } onItemEdit={ handleItemEdit } onItemDelete={ handleItemDelete }/>
+        <VerifiedAddressesTable data={ data.verifiedAddresses } onItemEdit={ handleItemEdit } onItemAdd={ handleItemAdd }/>
         { addButton }
       </Hide>
     </>

ui/tokenInfo/TokenInfoForm.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  id: number;
+}
+
+const TokenInfoForm = ({ id }: Props) => {
+  return <Box>TokenInfoForm for { id }</Box>;
+};
+
+export default TokenInfoForm;

ui/tokenInstance/TokenInstanceContent.tsx

@@ -32,8 +32,6 @@ const TokenInstanceContent = () => {
   const id = router.query.id?.toString();
   const tab = router.query.tab?.toString();
 
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
-
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const tokenInstanceQuery = useApiQuery('token_instance', {
@@ -50,6 +48,19 @@ const TokenInstanceContent = () => {
     },
   });
 
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes(`/token/${ hash }`) && !appProps.referrer.includes('instance');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to token page',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer, hash ]);
+
   const tabs: Array<RoutedTab> = [
     { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } tokenId={ id }/> },
     // there is no api for this tab yet
@@ -104,8 +115,7 @@ const TokenInstanceContent = () => {
       <TextAd mb={ 6 }/>
       <PageTitle
         text={ `${ tokenInstanceQuery.data.token.name || 'Unnamed token' } #${ tokenInstanceQuery.data.id }` }
-        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-        backLinkLabel="Back to token page"
+        backLink={ backLink }
         additionalsLeft={ nftShieldIcon }
         additionalsRight={ tokenTag }
       />

ui/verifiedAddresses/VerifiedAddressesTable.tsx

@@ -7,11 +7,11 @@ import VerifiedAddressesTableItem from './VerifiedAddressesTableItem';
 
 interface Props {
   data: Array<VerifiedAddress>;
+  onItemAdd: (address: string) => void;
   onItemEdit: (item: VerifiedAddress) => void;
-  onItemDelete: (item: VerifiedAddress) => void;
 }
 
-const VerifiedAddressesTable = ({ data, onItemEdit, onItemDelete }: Props) => {
+const VerifiedAddressesTable = ({ data, onItemEdit, onItemAdd }: Props) => {
   return (
     <Table variant="simple">
       <Thead>
@@ -27,8 +27,8 @@ const VerifiedAddressesTable = ({ data, onItemEdit, onItemDelete }: Props) => {
           <VerifiedAddressesTableItem
             key={ item.contractAddress }
             item={ item }
+            onAdd={ onItemAdd }
             onEdit={ onItemEdit }
-            onDelete={ onItemDelete }
           />
         )) }
       </Tbody>

ui/verifiedAddresses/VerifiedAddressesTableItem.tsx

@@ -1,37 +1,32 @@
-import { Td, Tr } from '@chakra-ui/react';
+import { Td, Tr, Link } from '@chakra-ui/react';
 import React from 'react';
 
 import type { VerifiedAddress } from 'types/api/account';
 
 import AddressSnippet from 'ui/shared/AddressSnippet';
-import TableItemActionButtons from 'ui/shared/TableItemActionButtons';
 
 interface Props {
   item: VerifiedAddress;
+  onAdd: (address: string) => void;
   onEdit: (item: VerifiedAddress) => void;
-  onDelete: (item: VerifiedAddress) => void;
 }
 
-const VerifiedAddressesTableItem = ({ item, onEdit, onDelete }: Props) => {
+const VerifiedAddressesTableItem = ({ item, onAdd }: Props) => {
 
-  const handleEditClick = React.useCallback(() => {
-    onEdit(item);
-  }, [ item, onEdit ]);
-
-  const handleDeleteClick = React.useCallback(() => {
-    onDelete(item);
-  }, [ item, onDelete ]);
+  const handleAddClick = React.useCallback(() => {
+    onAdd(item.contractAddress);
+  }, [ item, onAdd ]);
 
   return (
     <Tr>
       <Td>
         <AddressSnippet address={{ hash: item.contractAddress, is_contract: true, implementation_name: null }}/>
       </Td>
-      <Td>Add details</Td>
-      <Td></Td>
       <Td>
-        <TableItemActionButtons onDeleteClick={ handleDeleteClick } onEditClick={ handleEditClick }/>
+        <Link onClick={ handleAddClick }>Add details</Link>
       </Td>
+      <Td></Td>
+      <Td></Td>
     </Tr>
   );
 };