smooth transition for NavLinks and AddressLink

lib/hooks/useNavItems.tsx

@@ -25,13 +25,13 @@ export default function useNavItems() {
 
   return React.useMemo(() => {
     const mainNavItems = [
-      { text: 'Blocks', url: link('blocks'), icon: blocksIcon, isActive: currentRoute.startsWith('block'), isNewUi: false },
-      { text: 'Transactions', url: link('txs'), icon: transactionsIcon, isActive: currentRoute.startsWith('tx'), isNewUi: false },
-      { text: 'Tokens', url: link('tokens'), icon: tokensIcon, isActive: currentRoute === 'tokens', isNewUi: false },
-      { text: 'Accounts', url: link('accounts'), icon: walletIcon, isActive: currentRoute === 'accounts', isNewUi: false },
+      { text: 'Blocks', url: link('blocks'), icon: blocksIcon, isActive: currentRoute.startsWith('block'), isNewUi: true },
+      { text: 'Transactions', url: link('txs'), icon: transactionsIcon, isActive: currentRoute.startsWith('tx'), isNewUi: true },
+      { text: 'Tokens', url: link('tokens'), icon: tokensIcon, isActive: currentRoute === 'tokens', isNewUi: true },
+      { text: 'Accounts', url: link('accounts'), icon: walletIcon, isActive: currentRoute === 'accounts', isNewUi: true },
       isMarketplaceFilled ?
         { text: 'Apps', url: link('apps'), icon: appsIcon, isActive: currentRoute === 'apps', isNewUi: true } : null,
-      { text: 'Charts & stats', url: link('stats'), icon: statsIcon, isActive: currentRoute === 'stats', isNewUi: false },
+      { text: 'Charts & stats', url: link('stats'), icon: statsIcon, isActive: currentRoute === 'stats', isNewUi: true },
       // there should be custom site sections like Stats, Faucet, More, etc but never an 'other'
       // examples https://explorer-edgenet.polygon.technology/ and https://explorer.celo.org/
       // at this stage custom menu items is under development, we will implement it later

ui/shared/address/AddressLink.tsx

 import { Link, chakra, shouldForwardProp, Tooltip, Box } from '@chakra-ui/react';
+import NextLink from 'next/link';
 import type { HTMLAttributeAnchorTarget } from 'react';
 import React from 'react';
 
@@ -93,15 +94,15 @@ const AddressLink = (props: Props) => {
   }
 
   return (
-    <Link
-      className={ className }
-      href={ url }
-      target={ target }
-      overflow="hidden"
-      whiteSpace="nowrap"
-    >
-      { content }
-    </Link>
+    <NextLink href={ url } passHref target={ target }>
+      <Link
+        className={ className }
+        overflow="hidden"
+        whiteSpace="nowrap"
+      >
+        { content }
+      </Link>
+    </NextLink>
   );
 };