Eliminate underscores in URLs (#1007)

Fixes #988

lib/hooks/useNavItems.tsx

@@ -135,7 +135,7 @@ export default function useNavItems(): ReturnType {
       },
     ].filter(Boolean);
 
-    const mainNavItems = [
+    const mainNavItems: ReturnType['mainNavItems'] = [
       {
         text: 'Blockchain',
         icon: globeIcon,
@@ -171,9 +171,9 @@ export default function useNavItems(): ReturnType {
         icon: gearIcon,
         subItems: appConfig.otherLinks,
       } : null,
-    ].filter(Boolean) as Array<NavItem | NavGroupItem>;
+    ].filter(Boolean);
 
-    const accountNavItems = [
+    const accountNavItems: ReturnType['accountNavItems'] = [
       {
         text: 'Watch list',
         nextRoute: { pathname: '/account/watchlist' as const },
@@ -182,31 +182,31 @@ export default function useNavItems(): ReturnType {
       },
       {
         text: 'Private tags',
-        nextRoute: { pathname: '/account/tag_address' as const },
+        nextRoute: { pathname: '/account/tag-address' as const },
         icon: privateTagIcon,
-        isActive: pathname === '/account/tag_address',
+        isActive: pathname === '/account/tag-address',
       },
       {
         text: 'Public tags',
-        nextRoute: { pathname: '/account/public_tags_request' as const },
-        icon: publicTagIcon, isActive: pathname === '/account/public_tags_request',
+        nextRoute: { pathname: '/account/public-tags-request' as const },
+        icon: publicTagIcon, isActive: pathname === '/account/public-tags-request',
       },
       {
         text: 'API keys',
-        nextRoute: { pathname: '/account/api_key' as const },
-        icon: apiKeysIcon, isActive: pathname === '/account/api_key',
+        nextRoute: { pathname: '/account/api-key' as const },
+        icon: apiKeysIcon, isActive: pathname === '/account/api-key',
       },
       {
         text: 'Custom ABI',
-        nextRoute: { pathname: '/account/custom_abi' as const },
+        nextRoute: { pathname: '/account/custom-abi' as const },
         icon: abiIcon,
-        isActive: pathname === '/account/custom_abi',
+        isActive: pathname === '/account/custom-abi',
       },
       appConfig.contractInfoApi.endpoint && appConfig.adminServiceApi.endpoint && {
         text: 'Verified addrs',
-        nextRoute: { pathname: '/account/verified_addresses' as const },
+        nextRoute: { pathname: '/account/verified-addresses' as const },
         icon: verifiedIcon,
-        isActive: pathname === '/account/verified_addresses',
+        isActive: pathname === '/account/verified-addresses',
       },
     ].filter(Boolean);
 

lib/mixpanel/getPageType.ts

@@ -9,7 +9,7 @@ const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/accounts': 'Top accounts',
   '/address/[hash]': 'Address details',
   '/verified-contracts': 'Verified contracts',
-  '/address/[hash]/contract_verification': 'Contract verification',
+  '/address/[hash]/contract-verification': 'Contract verification',
   '/tokens': 'Tokens',
   '/token/[hash]': 'Token details',
   '/token/[hash]/instance/[id]': 'Token Instance',
@@ -21,11 +21,11 @@ const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/search-results': 'Search results',
   '/auth/profile': 'Profile',
   '/account/watchlist': 'Watchlist',
-  '/account/api_key': 'API keys',
-  '/account/custom_abi': 'Custom ABI',
-  '/account/public_tags_request': 'Public tags',
-  '/account/tag_address': 'Private tags',
-  '/account/verified_addresses': 'Verified addresses',
+  '/account/api-key': 'API keys',
+  '/account/custom-abi': 'Custom ABI',
+  '/account/public-tags-request': 'Public tags',
+  '/account/tag-address': 'Private tags',
+  '/account/verified-addresses': 'Verified addresses',
   '/withdrawals': 'Withdrawals',
   '/visualize/sol2uml': 'Solidity UML diagram',
   '/csv-export': 'Export data to CSV file',

pages/address/[hash]/contract_verification.tsx → pages/address/[hash]/contract-verification.tsx

@@ -7,8 +7,8 @@ import getSeo from 'lib/next/address/getSeo';
 import ContractVerification from 'ui/pages/ContractVerification';
 import Page from 'ui/shared/Page/Page';
 
-const ContractVerificationPage: NextPage<RoutedQuery<'/address/[hash]/contract_verification'>> =
-({ hash }: RoutedQuery<'/address/[hash]/contract_verification'>) => {
+const ContractVerificationPage: NextPage<RoutedQuery<'/address/[hash]/contract-verification'>> =
+({ hash }: RoutedQuery<'/address/[hash]/contract-verification'>) => {
   const { title, description } = getSeo({ hash });
 
   return (

types/nextjs-routes.d.ts

@@ -6,14 +6,14 @@
 // prettier-ignore
 declare module "nextjs-routes" {
   export type Route =
-    | StaticRoute<"/account/api_key">
-    | StaticRoute<"/account/custom_abi">
-    | StaticRoute<"/account/public_tags_request">
-    | StaticRoute<"/account/tag_address">
-    | StaticRoute<"/account/verified_addresses">
+    | StaticRoute<"/account/api-key">
+    | StaticRoute<"/account/custom-abi">
+    | StaticRoute<"/account/public-tags-request">
+    | StaticRoute<"/account/tag-address">
+    | StaticRoute<"/account/verified-addresses">
     | StaticRoute<"/account/watchlist">
     | StaticRoute<"/accounts">
-    | DynamicRoute<"/address/[hash]/contract_verification", { "hash": string }>
+    | DynamicRoute<"/address/[hash]/contract-verification", { "hash": string }>
     | DynamicRoute<"/address/[hash]", { "hash": string }>
     | StaticRoute<"/api/csrf">
     | StaticRoute<"/api/healthz">

ui/address/contract/ContractCode.tsx

@@ -75,7 +75,7 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
       ml="auto"
       mr={ 3 }
       as="a"
-      href={ route({ pathname: '/address/[hash]/contract_verification', query: { hash: addressHash || '' } }) }
+      href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }
     >
         Verify & publish
     </Button>
@@ -157,7 +157,7 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
               <AddressLink type="address" hash={ data.verified_twin_address_hash } truncation="constant" ml={ 2 }/>
             </Address>
             <chakra.span mt={ 1 }>All functions displayed below are from ABI of that contract. In order to verify current contract, proceed with </chakra.span>
-            <LinkInternal href={ route({ pathname: '/address/[hash]/contract_verification', query: { hash: addressHash || '' } }) }>
+            <LinkInternal href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: addressHash || '' } }) }>
               Verify & Publish
             </LinkInternal>
             <span> page</span>

ui/addressVerification/steps/AddressVerificationStepAddress.tsx

@@ -80,7 +80,7 @@ const AddressVerificationStepAddress = ({ defaultAddress, onContinue }: Props) =
         return <span>Ownership of this contract address is already verified by another account.</span>;
       }
       case 'SOURCE_CODE_NOT_VERIFIED_ERROR': {
-        const href = route({ pathname: '/address/[hash]/contract_verification', query: { hash: address } });
+        const href = route({ pathname: '/address/[hash]/contract-verification', query: { hash: address } });
         return (
           <Box>
             <span>The contract source code you entered is not yet verified. Please follow these steps to </span>

ui/pages/ContractVerification.tsx

@@ -49,7 +49,7 @@ const ContractVerification = () => {
 
   React.useEffect(() => {
     if (method && hash) {
-      router.replace({ pathname: '/address/[hash]/contract_verification', query: { hash } }, undefined, { scroll: false, shallow: true });
+      router.replace({ pathname: '/address/[hash]/contract-verification', query: { hash } }, undefined, { scroll: false, shallow: true });
     }
   // onMount only
   // eslint-disable-next-line react-hooks/exhaustive-deps

ui/pages/PublicTags.tsx

@@ -31,7 +31,7 @@ const PublicTagsComponent: React.FC = () => {
   useRedirectForInvalidAuthToken();
 
   React.useEffect(() => {
-    addressHash && 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

@@ -29,7 +29,7 @@ const VerifiedAddresses = () => {
   const [ selectedAddress, setSelectedAddress ] = React.useState<string | undefined>(addressHash);
 
   React.useEffect(() => {
-    addressHash && router.replace({ pathname: '/account/verified_addresses' });
+    addressHash && router.replace({ pathname: '/account/verified-addresses' });
   // componentDidMount
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ ]);

ui/shared/AddressActions/PrivateTagMenuItem.tsx

@@ -23,7 +23,7 @@ const PrivateTagMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   const addressData = queryClient.getQueryData<Address>(queryKey);
 
   const handleClick = React.useCallback(() => {
-    if (!onBeforeClick({ pathname: '/account/tag_address' })) {
+    if (!onBeforeClick({ pathname: '/account/tag-address' })) {
       return;
     }
 

ui/shared/AddressActions/PublicTagMenuItem.tsx

@@ -15,11 +15,11 @@ const PublicTagMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   const router = useRouter();
 
   const handleClick = React.useCallback(() => {
-    if (!onBeforeClick({ pathname: '/account/public_tags_request' })) {
+    if (!onBeforeClick({ pathname: '/account/public-tags-request' })) {
       return;
     }
 
-    router.push({ pathname: '/account/public_tags_request', query: { address: hash } });
+    router.push({ pathname: '/account/public-tags-request', query: { address: hash } });
   }, [ hash, onBeforeClick, router ]);
 
   return (

ui/shared/AddressActions/TokenInfoMenuItem.tsx

@@ -40,7 +40,7 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   });
 
   const handleAddAddressClick = React.useCallback(() => {
-    if (!onBeforeClick({ pathname: '/account/verified_addresses' })) {
+    if (!onBeforeClick({ pathname: '/account/verified-addresses' })) {
       return;
     }
 
@@ -48,7 +48,7 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   }, [ modal, onBeforeClick ]);
 
   const handleAddApplicationClick = React.useCallback(async() => {
-    router.push({ pathname: '/account/verified_addresses', query: { address: hash } });
+    router.push({ pathname: '/account/verified-addresses', query: { address: hash } });
   }, [ hash, router ]);
 
   const handleVerifiedAddressSubmit = React.useCallback(async() => {
@@ -56,7 +56,7 @@ const TokenInfoMenuItem = ({ className, hash, onBeforeClick }: Props) => {
   }, [ verifiedAddressesQuery ]);
 
   const handleShowMyAddressesClick = React.useCallback(async() => {
-    router.push({ pathname: '/account/verified_addresses' });
+    router.push({ pathname: '/account/verified-addresses' });
   }, [ router ]);
 
   const icon = <Icon as={ iconEdit } boxSize={ 6 } mr={ 2 } p={ 1 }/>;

ui/shared/logs/LogItem.tsx

@@ -47,7 +47,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash,
         <GridItem colSpan={{ base: 1, lg: 2 }}>
           <Alert status="warning" display="inline-table" whiteSpace="normal">
             To see accurate decoded input data, the contract must be verified.{ space }
-            <Link href={ route({ pathname: '/address/[hash]/contract_verification', query: { hash: address.hash } }) }>Verify the contract here</Link>
+            <Link href={ route({ pathname: '/address/[hash]/contract-verification', query: { hash: address.hash } }) }>Verify the contract here</Link>
           </Alert>
         </GridItem>
       ) }