handle add token info

ui/addressVerification/AddressVerificationModal.tsx

@@ -16,9 +16,11 @@ interface Props {
   onClose: () => void;
   onSubmit: (address: VerifiedAddress) => void;
   onAddTokenInfoClick: (address: string) => void;
+  onShowListClick: () => void;
+  defaultAddress?: string;
 }
 
-const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoClick }: Props) => {
+const AddressVerificationModal = ({ defaultAddress, isOpen, onClose, onSubmit, onAddTokenInfoClick, onShowListClick }: Props) => {
   const [ stepIndex, setStepIndex ] = React.useState(0);
   const [ data, setData ] = React.useState<AddressVerificationFormFirstStepFields & AddressCheckStatusSuccess>({ address: '', signingMessage: '' });
 
@@ -50,7 +52,7 @@ const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoCli
   const steps = [
     {
       title: 'Verify new address ownership',
-      content: <AddressVerificationStepAddress onContinue={ handleGoToSecondStep }/>,
+      content: <AddressVerificationStepAddress onContinue={ handleGoToSecondStep } defaultAddress={ defaultAddress }/>,
     },
     {
       title: 'Copy and sign message',
@@ -58,7 +60,7 @@ const AddressVerificationModal = ({ isOpen, onClose, onSubmit, onAddTokenInfoCli
     },
     {
       title: 'Congrats! Address is verified.',
-      content: <AddressVerificationStepSuccess onShowListClick={ handleClose } onAddTokenInfoClick={ handleAddTokenInfoClick }/>,
+      content: <AddressVerificationStepSuccess onShowListClick={ onShowListClick } onAddTokenInfoClick={ handleAddTokenInfoClick }/>,
     },
   ];
   const step = steps[stepIndex];

ui/addressVerification/steps/AddressVerificationStepAddress.tsx

@@ -21,12 +21,16 @@ import AddressVerificationFieldAddress from '../fields/AddressVerificationFieldA
 type Fields = RootFields & AddressVerificationFormFirstStepFields;
 
 interface Props {
+  defaultAddress?: string;
   onContinue: (data: AddressVerificationFormFirstStepFields & AddressCheckStatusSuccess) => void;
 }
 
-const AddressVerificationStepAddress = ({ onContinue }: Props) => {
+const AddressVerificationStepAddress = ({ defaultAddress, onContinue }: Props) => {
   const formApi = useForm<Fields>({
     mode: 'onBlur',
+    defaultValues: {
+      address: defaultAddress,
+    },
   });
   const { handleSubmit, formState, control, setError, clearErrors, watch } = formApi;
   const apiFetch = useApiFetch();

ui/pages/PublicTags.tsx

@@ -36,7 +36,8 @@ const PublicTagsComponent: React.FC = () => {
   useRedirectForInvalidAuthToken();
 
   React.useEffect(() => {
-    router.replace({ pathname: '/account/public_tags_request' });
+    addressHash && router.replace({ pathname: '/account/public_tags_request' });
+  // componentDidMount
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ ]);
 

ui/pages/VerifiedAddresses.tsx

 import { OrderedList, ListItem, chakra, Button, useDisclosure, Show, Hide, Skeleton, Box } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { VerifiedAddress, TokenInfoApplication, TokenInfoApplications, VerifiedAddressResponse } from 'types/api/account';
@@ -7,6 +8,7 @@ import type { VerifiedAddress, TokenInfoApplication, TokenInfoApplications, Veri
 import appConfig from 'configs/app/config';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal';
 import AccountPageDescription from 'ui/shared/AccountPageDescription';
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -21,7 +23,16 @@ import VerifiedAddressesTable from 'ui/verifiedAddresses/VerifiedAddressesTable'
 const VerifiedAddresses = () => {
   useRedirectForInvalidAuthToken();
 
-  const [ selectedAddress, setSelectedAddress ] = React.useState<string>();
+  const router = useRouter();
+  const addressHash = getQueryParamString(router.query.address);
+
+  const [ selectedAddress, setSelectedAddress ] = React.useState<string | undefined>(addressHash);
+
+  React.useEffect(() => {
+    addressHash && router.replace({ pathname: '/account/verified_addresses' });
+  // componentDidMount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
 
   const modalProps = useDisclosure();
   const addressesQuery = useApiQuery('verified_addresses', {
@@ -186,6 +197,7 @@ const VerifiedAddresses = () => {
         onClose={ modalProps.onClose }
         onSubmit={ handleAddressSubmit }
         onAddTokenInfoClick={ handleItemAdd }
+        onShowListClick={ modalProps.onClose }
       />
     </Page>
   );

ui/shared/AddressActions/Menu.tsx

-import { Button, Menu, MenuButton, MenuItem, MenuList, Icon, Flex } from '@chakra-ui/react';
+import { Button, Menu, MenuButton, MenuList, Icon, Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import appConfig from 'configs/app/config';
 import iconArrow from 'icons/arrows/east-mini.svg';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
 import PrivateTagMenuItem from './PrivateTagMenuItem';
 import PublicTagMenuItem from './PublicTagMenuItem';
+import TokenInfoMenuItem from './TokenInfoMenuItem';
 
 const AddressActions = () => {
   const router = useRouter();
@@ -27,9 +29,7 @@ const AddressActions = () => {
         </Flex>
       </MenuButton>
       <MenuList minWidth="180px" zIndex="popover">
-        <MenuItem py={ 2 } px={ 4 }>
-            Add token info
-        </MenuItem>
+        { appConfig.contractInfoApi.endpoint && appConfig.adminServiceApi.endpoint && <TokenInfoMenuItem py={ 2 } px={ 4 } hash={ hash }/> }
         <PublicTagMenuItem py={ 2 } px={ 4 } hash={ hash }/>
         <PrivateTagMenuItem py={ 2 } px={ 4 } hash={ hash }/>
       </MenuList>

ui/shared/AddressActions/TokenInfoMenuItem.tsx

+import { MenuItem, chakra, useDisclosure } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import appConfig from 'configs/app/config';
+import useApiQuery from 'lib/api/useApiQuery';
+import useRedirectIfNotAuth from 'lib/hooks/useRedirectIfNotAuth';
+import AddressVerificationModal from 'ui/addressVerification/AddressVerificationModal';
+
+interface Props {
+  className?: string;
+  hash: string;
+}
+
+const TokenInfoMenuItem = ({ className, hash }: Props) => {
+  const router = useRouter();
+  const modal = useDisclosure();
+  const redirectIfNotAuth = useRedirectIfNotAuth();
+
+  const verifiedAddressesQuery = useApiQuery('verified_addresses', {
+    pathParams: { chainId: appConfig.network.id },
+  });
+  const applicationsQuery = useApiQuery('token_info_applications', {
+    pathParams: { chainId: appConfig.network.id, id: undefined },
+  });
+
+  const handleAddAddressClick = React.useCallback(() => {
+    if (redirectIfNotAuth()) {
+      return;
+    }
+
+    modal.onOpen();
+  }, [ modal, redirectIfNotAuth ]);
+
+  const handleAddApplicationClick = React.useCallback(async() => {
+    router.push({ pathname: '/account/verified_addresses', query: { address: hash } });
+  }, [ hash, router ]);
+
+  const handleVerifiedAddressSubmit = React.useCallback(async() => {
+    await verifiedAddressesQuery.refetch();
+  }, [ verifiedAddressesQuery ]);
+
+  const handleShowMyAddressesClick = React.useCallback(async() => {
+    router.push({ pathname: '/account/verified_addresses' });
+  }, [ router ]);
+
+  const content = (() => {
+    if (!verifiedAddressesQuery.data?.verifiedAddresses.find(({ contractAddress }) => contractAddress === hash)) {
+      return (
+        <MenuItem className={ className } onClick={ handleAddAddressClick }>
+          Add token info
+        </MenuItem>
+      );
+    }
+
+    return (
+      <MenuItem className={ className } onClick={ handleAddApplicationClick }>
+        { applicationsQuery.data?.submissions.some(({ tokenAddress }) => tokenAddress === hash) ? 'Update token info' : 'Add token info' }
+      </MenuItem>
+    );
+  })();
+
+  return (
+    <>
+      { content }
+      <AddressVerificationModal
+        defaultAddress={ hash }
+        isOpen={ modal.isOpen }
+        onClose={ modal.onClose }
+        onSubmit={ handleVerifiedAddressSubmit }
+        onAddTokenInfoClick={ handleAddApplicationClick }
+        onShowListClick={ handleShowMyAddressesClick }
+      />
+    </>
+  );
+};
+
+export default React.memo(chakra(TokenInfoMenuItem));