feat: redesign the home page

Author: edmoiseenkov

block-explorer/app/page.tsx

@@ -1,18 +1,11 @@
-import {
-  RiArrowRightUpLine,
-  RiTimerLine,
-  RiPencilLine,
-  RiArrowLeftRightLine,
-  RiWalletLine
-} from '@remixicon/react'
-
 import { LatestBlocks } from '@/components/homepage/latest-blocks';
 import { LatestExtrinsics } from '@/components/homepage/latest-extrinsics';
 import { LatestTransactions } from '@/components/homepage/latest-transactions';
 import { Search } from '@/components/homepage/search.tsx';
 import TargetTimeCountdown from '@/components/target-time-countdown';
 import { ApiCommand, request } from '@/lib/api';
 import { formatNumber, handleRequestResult } from '@/lib/utils';
+import { RiArrowLeftRightLine, RiArrowRightUpLine, RiPencilLine, RiTimerLine, RiWalletLine } from '@remixicon/react';
 
 export const dynamic = 'force-dynamic';
 
@@ -52,7 +45,7 @@ export default async function IndexPage() {
       value: Number(chainSummary?.addresses || 0),
       icon: RiWalletLine,
     },
-  ]
+  ];
 
   return (
     <div style={{ background: `url('/home-page-background.png') top / 100% no-repeat` }}>
@@ -68,19 +61,21 @@ export default async function IndexPage() {
             className="link-box rounded-[16px] p-px"
             style={{ background: 'linear-gradient(90deg, #8F9AE9 0%, #E0BC95 50%, #F78F50 100%)' }}
           >
-            <div
-              className="flex flex-col gap-1 rounded-[15px] bg-white p-6 pt-5 hover:bg-api-portal-banner dark:bg-black xl:max-w-[330px]"
-            >
+            <div className="flex flex-col gap-1 rounded-[15px] bg-white p-6 pt-5 hover:bg-api-portal-banner dark:bg-black xl:max-w-[330px]">
               <div className="flex items-center justify-between">
                 <a
                   href="https://build.rootscan.io/"
                   target="_blank"
                   className="link-overlay text-[18px]/[28px] font-semibold"
-                >API Portal</a>
+                >
+                  API Portal
+                </a>
                 <RiArrowRightUpLine className="size-6" />
               </div>
               <p className="text-xs font-normal text-foreground/60">
-                Kickstart your development on The Root Network with Rootscan’s <strong className="text-foreground">API</strong> and <strong className="text-foreground">RPC</strong> services
+                Kickstart your development on The Root Network with Rootscan’s{' '}
+                <strong className="text-foreground">API</strong> and <strong className="text-foreground">RPC</strong>{' '}
+                services
               </p>
             </div>
           </div>

block-explorer/components/address-display.tsx

@@ -1,10 +1,9 @@
+import { getAddressName, knownAddressNames } from '@/lib/constants/knownAddresses';
+import { cn } from '@/lib/utils';
 import { RiFileList3Line } from '@remixicon/react';
 import Link from 'next/link';
 import { Address, getAddress, isAddress } from 'viem';
 
-import { getAddressName, knownAddressNames } from '@/lib/constants/knownAddresses';
-import { cn } from '@/lib/utils';
-
 import { CopyButton } from './copy-button';
 import Logo from './logo';
 import Tooltip from './tooltip';

block-explorer/components/container.tsx

@@ -11,7 +11,5 @@ export default function Container({ children, className }: { children: React.Rea
 }
 
 export function ContainerV2({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div className={cn('container px-4 md:px-6 xl:px-14 lg:px-8', className)} {...props} />
-  );
+  return <div className={cn('container px-4 md:px-6 xl:px-14 lg:px-8', className)} {...props} />;
 }

block-explorer/components/copy-button.tsx

@@ -1,9 +1,9 @@
 'use client';
 
-import { RiFileCopyLine, RiCheckLine } from '@remixicon/react'
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { RiCheckLine, RiFileCopyLine } from '@remixicon/react';
 
 const copyToClipboardWithMeta = async (value: string) => {
   navigator.clipboard.writeText(value);

block-explorer/components/homepage/data-item-card.tsx

@@ -1,21 +1,21 @@
-'use client'
+'use client';
 
-import { RiArrowDownSLine } from '@remixicon/react'
 import { ReactNode, useState } from 'react';
 
-import { CardContent } from '@/components/ui/v2/card.tsx';
 import { Button } from '@/components/ui/button.tsx';
+import { CardContent } from '@/components/ui/v2/card.tsx';
 import { cn } from '@/lib/utils.ts';
+import { RiArrowDownSLine } from '@remixicon/react';
 
 type DataItemCardProps = {
   iconSrc: string;
   children: ReactNode;
-  summary: Array<[string, string | number | ReactNode]>
-}
+  summary: Array<[string, string | number | ReactNode]>;
+};
 export const DataItemCard = (props: DataItemCardProps) => {
-  const { iconSrc, summary, children } = props
+  const { iconSrc, summary, children } = props;
 
-  const [openSummary, setOpenSummary] = useState(false)
+  const [openSummary, setOpenSummary] = useState(false);
 
   return (
     <CardContent className="relative flex flex-col gap-3 pl-6 lg:flex-row lg:items-center lg:gap-6">
@@ -31,9 +31,7 @@ export const DataItemCard = (props: DataItemCardProps) => {
         <div className="shrink-0 rounded-[12px] bg-[#F5F5F5] p-3 dark:bg-[#1C1C1C]">
           <img src={iconSrc} alt="" className="size-10" />
         </div>
-        <div className="flex flex-col">
-          {children}
-        </div>
+        <div className="flex flex-col">{children}</div>
       </div>
       <div
         className={cn(
@@ -44,10 +42,14 @@ export const DataItemCard = (props: DataItemCardProps) => {
         {summary.map(([label, value], i) => (
           <div key={i} className="flex items-center justify-between gap-4">
             <p className="text-xs text-[#737373]">{label}</p>
-            {typeof value === 'string' || typeof value === 'number' ? <p className="text-xs font-semibold">{value}</p> : value}
+            {typeof value === 'string' || typeof value === 'number' ? (
+              <p className="text-xs font-semibold">{value}</p>
+            ) : (
+              value
+            )}
           </div>
         ))}
       </div>
     </CardContent>
-  )
-}
+  );
+};

block-explorer/components/homepage/latest-blocks.tsx

@@ -1,19 +1,19 @@
 'use client';
 
-import Link from 'next/link';
 import { ReactNode } from 'react';
 
 import { DataItemCard } from '@/components/homepage/data-item-card.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import { Card, CardHeader, CardTitle } from '@/components/ui/v2/card.tsx';
 import { IBlock } from '@/types/models';
+import Link from 'next/link';
 
 import AddressDisplay from '../address-display';
 import TimeAgoDate from '../time-ago-date';
 
 type LatestBlocksProps = {
-  latestBlocks: IBlock[]
-}
+  latestBlocks: IBlock[];
+};
 export const LatestBlocks = (props: LatestBlocksProps) => {
   const { latestBlocks } = props;
 
@@ -31,29 +31,28 @@ export const LatestBlocks = (props: LatestBlocksProps) => {
             ['Events', block.eventsCount],
             ['EVM Txs', block.transactionsCount],
             ['Extrinsics', block.extrinsicsCount],
-          ]
+          ];
 
           return (
             <DataItemCard key={block.number} iconSrc="/cube.png" summary={summary}>
-              <Link
-                href={`/blocks/${block.number}`}
-                className="text-[18px]/[28px] font-semibold"
-              >
+              <Link href={`/blocks/${block.number}`} className="text-[18px]/[28px] font-semibold">
                 {block.number}
               </Link>
               <div className="flex gap-1">
                 <span className="text-sm text-muted-foreground">Validator</span>
                 <AddressDisplay address={block.evmBlock.miner} useShortenedAddress />
               </div>
               {block?.isFinalized ? (
-                <span className="text-xs text-foreground/40"><TimeAgoDate date={block.timestamp} /></span>
+                <span className="text-xs text-foreground/40">
+                  <TimeAgoDate date={block.timestamp} />
+                </span>
               ) : (
                 <span className="text-xs text-[#FB923C]">Unfinalized</span>
               )}
             </DataItemCard>
-          )
+          );
         })}
       </div>
     </Card>
   );
-}
+};

block-explorer/components/homepage/latest-extrinsics.tsx

@@ -1,19 +1,19 @@
 'use client';
 
-import Link from 'next/link';
 import { ReactNode } from 'react';
 
 import { DataItemCard } from '@/components/homepage/data-item-card.tsx';
 import { Button } from '@/components/ui/button.tsx';
 import { Card, CardHeader, CardTitle } from '@/components/ui/v2/card';
 import { IExtrinsic } from '@/types/models';
+import Link from 'next/link';
 
 import AddressDisplay from '../address-display';
 import TimeAgoDate from '../time-ago-date';
 
 type LatestExtrinsicsProps = {
-  latestExtrinsics: IExtrinsic[]
-}
+  latestExtrinsics: IExtrinsic[];
+};
 export const LatestExtrinsics = (props: LatestExtrinsicsProps) => {
   const { latestExtrinsics } = props;
 
@@ -30,25 +30,23 @@ export const LatestExtrinsics = (props: LatestExtrinsicsProps) => {
           const summary: Array<[string, string | number | ReactNode]> = [
             ['Pallet', extrinsic?.section],
             ['Method', extrinsic?.method],
-            ['Signer', <AddressDisplay address={extrinsic?.signer} useShortenedAddress className="text-xs font-semibold" />],
-          ]
+            [
+              'Signer',
+              <AddressDisplay address={extrinsic?.signer} useShortenedAddress className="text-xs font-semibold" />,
+            ],
+          ];
           return (
-            <DataItemCard
-              key={extrinsic?.extrinsicId}
-              iconSrc="/layers.png"
-              summary={summary}
-            >
-              <Link
-                href={`/extrinsics/${extrinsic?.extrinsicId}`}
-                className="text-[18px]/[28px] font-semibold"
-              >
+            <DataItemCard key={extrinsic?.extrinsicId} iconSrc="/layers.png" summary={summary}>
+              <Link href={`/extrinsics/${extrinsic?.extrinsicId}`} className="text-[18px]/[28px] font-semibold">
                 {extrinsic?.extrinsicId}
               </Link>
-              <span className="text-xs text-foreground/40"><TimeAgoDate date={extrinsic?.timestamp * 1000} /></span>
+              <span className="text-xs text-foreground/40">
+                <TimeAgoDate date={extrinsic?.timestamp * 1000} />
+              </span>
             </DataItemCard>
-          )
+          );
         })}
       </div>
     </Card>
   );
-}
+};

block-explorer/components/homepage/latest-transactions.tsx

@@ -1,22 +1,21 @@
 'use client';
 
-import { generateAvatarURL } from '@cfx-kit/wallet-avatar';
-import { RiArrowRightSLine } from '@remixicon/react'
-import Image from 'next/image';
-import Link from 'next/link';
-import { getAddress } from 'viem';
-
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button.tsx';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/v2/card';
 import { IEVMTransaction } from '@/types/models';
+import { generateAvatarURL } from '@cfx-kit/wallet-avatar';
+import { RiArrowRightSLine } from '@remixicon/react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { getAddress } from 'viem';
 
 import AddressDisplay from '../address-display';
 import TimeAgoDate from '../time-ago-date';
 
 type LatestTransactionsProps = {
-  latestTransactions: IEVMTransaction[]
-}
+  latestTransactions: IEVMTransaction[];
+};
 export const LatestTransactions = (props: LatestTransactionsProps) => {
   const { latestTransactions } = props;
 
@@ -35,23 +34,25 @@ export const LatestTransactions = (props: LatestTransactionsProps) => {
       </div>
     </Card>
   );
-}
+};
 
 type TransactionCardProps = {
   transaction: IEVMTransaction;
-}
+};
 export const TransactionCard = (props: TransactionCardProps) => {
   const { transaction } = props;
 
   const renderBadges = () => (
     <div className="flex flex-wrap items-center gap-2">
       {transaction?.toLookup?.isContract ? <Badge variant="info">Contract Call</Badge> : null}
       {transaction?.tags?.map((tag, _) => (
-        <Badge variant="info" key={_}>{tag}</Badge>
+        <Badge variant="info" key={_}>
+          {tag}
+        </Badge>
       ))}
       {transaction.status === 'success' ? <Badge variant="success">Confirmed</Badge> : null}
     </div>
-  )
+  );
 
   const renderDirection = () => (
     <div className="flex flex-wrap items-center gap-1.5 md:justify-start">
@@ -92,7 +93,7 @@ export const TransactionCard = (props: TransactionCardProps) => {
         useShortenedAddress
       />
     </div>
-  )
+  );
 
   return (
     <CardContent className="flex flex-col gap-3 p-4 md:gap-4 md:p-6">
@@ -125,5 +126,5 @@ export const TransactionCard = (props: TransactionCardProps) => {
 
       <div className="md:hidden">{renderDirection()}</div>
     </CardContent>
-  )
-}
+  );
+};

block-explorer/components/homepage/search.tsx

@@ -1,10 +1,10 @@
-'use client'
+'use client';
 
-import { RiSearchLine } from '@remixicon/react';
 import { ChangeEvent, KeyboardEvent, useState } from 'react';
 
 import { Button } from '@/components/ui/button.tsx';
 import { performSearchMainSearch } from '@/lib/helpers.ts';
+import { RiSearchLine } from '@remixicon/react';
 
 export const Search = () => {
   const [value, setValue] = useState('');
@@ -13,11 +13,11 @@ export const Search = () => {
     if (!value.trim()) return;
     await performSearchMainSearch(value);
     setValue('');
-  }
+  };
 
   const handlePress = async (e: KeyboardEvent) => {
     if (e?.key === 'Enter') {
-      handleSearch()
+      handleSearch();
     }
   };
 
@@ -38,5 +38,5 @@ export const Search = () => {
         <RiSearchLine className="size-5" />
       </Button>
     </div>
-  )
-}
+  );
+};

block-explorer/components/site-footer.tsx

@@ -1,4 +1,4 @@
-import { RiArrowRightUpLine, RiGithubFill, RiTwitterXFill, RiDiscordFill } from '@remixicon/react'
+import { RiArrowRightUpLine, RiDiscordFill, RiGithubFill, RiTwitterXFill } from '@remixicon/react';
 import Image from 'next/image';
 import Link from 'next/link';
 

block-explorer/components/site-header.tsx

@@ -1,10 +1,9 @@
 import { Fragment } from 'react';
 
+import { SiteTopBar } from '@/components/site-top-bar.tsx';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { SiteTopBar } from '@/components/site-top-bar.tsx';
-
 import { Navigation } from './navigation';
 import TestnetWarning from './testnet-warning';
 import { Badge } from './ui/badge';