refactor(vara-eth-idea/frontend): cleanup chain entity layouts

idea/vara-eth/frontend/src/components/ui/chain-entity/chain-entity.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import ArrowLeftSVG from '@/assets/icons/arrow-square-left.svg?react';
+import { formatDate } from '@/shared/utils';
 
 import { Button } from '../button';
 import { ExplorerLink } from '../explorer-link';
@@ -46,19 +47,27 @@ const Key = ({ children }: PropsWithChildren) => {
   return <h2 className={styles.key}>{children}</h2>;
 };
 
+type DateProps = {
+  value: string;
+};
+
+const Date = ({ value }: DateProps) => {
+  return <div className={styles.date}>{formatDate(value)}</div>;
+};
+
 type BlockProps = {
-  number: string;
+  value: string;
   date: string;
 };
 
-const Block = ({ number, date }: BlockProps) => {
+const BlockNumber = ({ value, date }: BlockProps) => {
   return (
     <div className={styles.block}>
       <div>
-        #{number} <ExplorerLink path="block" id={number} />
+        #{value} <ExplorerLink path="block" id={value} />
       </div>
 
-      <div>{new Date(date).toLocaleString()}</div>
+      <Date value={date} />
     </div>
   );
 };
@@ -86,7 +95,8 @@ const ChainEntity = {
   Title,
   Data,
   Key,
-  Block,
+  Date,
+  BlockNumber,
   NotFound,
 };
 

idea/vara-eth/frontend/src/components/ui/index.ts

@@ -6,7 +6,6 @@ export { ExpandableItem } from './expandable-item';
 export { HashLink } from './hash-link';
 export { UploadIdlButton } from './upload-idl-button';
 export { Loader } from './loader';
-export { NotFound } from './not-found';
 export { Pagination } from './pagination';
 export { SyntaxHighlighter } from './syntax-highlighter';
 export { Table } from './table';

idea/vara-eth/frontend/src/features/messages/components/message-data/message-data.tsx

@@ -27,7 +27,7 @@ const MessageRequestData = (props: MessageRequest) => {
       <HashLink hash={txHash} truncateSize="xxl" explorerLinkPath="tx" />
 
       <ChainEntity.Key>Block Number</ChainEntity.Key>
-      <ChainEntity.Block number={blockNumber} date={createdAt} />
+      <ChainEntity.BlockNumber value={blockNumber} date={createdAt} />
     </ChainEntity.Data>
   );
 };
@@ -60,7 +60,7 @@ const MessageSentData = ({ sourceProgramId, destination, value, isCall, stateTra
       )}
 
       <ChainEntity.Key>Created At</ChainEntity.Key>
-      <div>{new Date(createdAt).toLocaleString()}</div>
+      <ChainEntity.Date value={createdAt} />
     </ChainEntity.Data>
   );
 };
@@ -86,7 +86,7 @@ const ReplyRequestData = ({ sourceAddress, programId, value, txHash, blockNumber
       <HashLink hash={txHash} truncateSize="xxl" explorerLinkPath="tx" />
 
       <ChainEntity.Key>Block Number</ChainEntity.Key>
-      <ChainEntity.Block number={blockNumber} date={createdAt} />
+      <ChainEntity.BlockNumber value={blockNumber} date={createdAt} />
     </ChainEntity.Data>
   );
 };
@@ -127,7 +127,7 @@ const ReplySentData = (props: ReplySent) => {
       )}
 
       <ChainEntity.Key>Created At</ChainEntity.Key>
-      <div>{new Date(createdAt).toLocaleString()}</div>
+      <ChainEntity.Date value={createdAt} />
     </ChainEntity.Data>
   );
 };

idea/vara-eth/frontend/src/features/programs/lib/queries.ts

@@ -1,17 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
+import { HexString } from '@vara-eth/api';
 
 import { type Code } from '@/features/codes/lib/requests';
 import { EXPLORER_URL } from '@/shared/config';
 import { PaginatedResponse } from '@/shared/types';
 import { fetchWithGuard } from '@/shared/utils';
 
 export type Program = {
-  id: string;
+  id: HexString;
   blockNumber: string;
-  code: Code;
-  createdAt: number;
-  txHash: string;
-  abiInterfaceAddress: string | null;
+  createdAt: string;
+  txHash: HexString;
+  abiInterfaceAddress?: string | null;
+  code?: Code;
 };
 
 export type ProgramsResponse = PaginatedResponse<Program>;

idea/vara-eth/frontend/src/pages/code/code.module.scss

@@ -7,28 +7,6 @@
   border-radius: 0 0 4px 4px;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: space-between;
-
-  .leftSide {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 15px;
-  }
-
-  .link {
-    display: flex;
-  }
-
-  .arrowLeft {
-    margin-right: 4px;
-  }
-}
-
 .card {
   padding: 24px 24px 12px 24px;
 
@@ -37,13 +15,6 @@
   }
 }
 
-.properties {
-  margin-top: 24px;
-  display: grid;
-  grid-template-columns: 145px 1fr;
-  gap: 20px 24px;
-}
-
 .programs {
   color: rgba(168, 245, 147, 1);
 }

idea/vara-eth/frontend/src/pages/code/code.tsx

@@ -1,12 +1,10 @@
 import { HexString } from '@vara-eth/api';
-import { useNavigate, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
-import ArrowLeftSVG from '@/assets/icons/arrow-square-left.svg?react';
-import { Badge, Button, HashLink, UploadIdlButton, NotFound, SyntaxHighlighter } from '@/components';
+import { Badge, UploadIdlButton, SyntaxHighlighter, ChainEntity } from '@/components';
 import { useGetCodeByIdQuery } from '@/features/codes/lib/queries';
 import { routes } from '@/shared/config';
 import { useIdlStorage } from '@/shared/hooks';
-import { formatDate } from '@/shared/utils';
 
 import styles from './code.module.scss';
 
@@ -15,67 +13,53 @@ type Params = {
 };
 
 const Code = () => {
-  const navigate = useNavigate();
-  const params = useParams<Params>();
-  const codeId = params?.codeId;
+  const { codeId } = useParams() as Params;
 
-  const { data: code, isLoading, error } = useGetCodeByIdQuery(codeId);
+  const { data: code, isLoading } = useGetCodeByIdQuery(codeId);
   const { idl, saveIdl } = useIdlStorage(codeId);
 
   if (isLoading) {
     return (
       <div className={styles.container}>
-        <div className={styles.card}>
-          <div>Loading...</div>
-        </div>
+        <div className={styles.card}>Loading...</div>
       </div>
     );
   }
 
-  if (error || !code || !codeId) {
-    return <NotFound entity="code" id={params?.codeId} />;
+  if (!code) {
+    return <ChainEntity.NotFound entity="code" id={codeId} />;
   }
 
-  const createdDateTime = formatDate(code.createdAt);
-
   return (
     <div className={styles.container}>
       <div className={styles.card}>
-        <div className={styles.header}>
-          <div className={styles.leftSide}>
-            <Button variant="icon" onClick={() => navigate(routes.programs)}>
-              <ArrowLeftSVG className={styles.arrowLeft} />
-            </Button>
-            <HashLink hash={codeId} truncateSize="xxl" />
-          </div>
-          {/* TODO: add after code verifier is implemented */}
-          {/* {isVerify && (
-              <Tooltip value="Verified">
-                <VerifySvg />
-              </Tooltip>
-            )} */}
-        </div>
-
-        <div className={styles.properties}>
-          <div>SERVICES</div>
+        <ChainEntity.Header>
+          <ChainEntity.BackButton />
+          <ChainEntity.Title id={codeId} />
+        </ChainEntity.Header>
+
+        <ChainEntity.Data>
+          <ChainEntity.Key>Services</ChainEntity.Key>
+
           <div className={styles.services}>
             <Badge color={1} size="sm">
               SERVICE 1
             </Badge>
+
             <Badge color={2} size="sm">
               SERVICE 2
             </Badge>
           </div>
 
-          <div>PROGRAMS</div>
-          {/* TODO: add filtered programs page */}
-          <a className={styles.programs} href={routes.programs}>
+          <ChainEntity.Key>Programs</ChainEntity.Key>
+
+          <Link to={routes.programs} className={styles.programs}>
             3 programs
-          </a>
+          </Link>
 
-          <div>CREATED AT</div>
-          <div>{createdDateTime}</div>
-        </div>
+          <ChainEntity.Key>Created at</ChainEntity.Key>
+          <ChainEntity.Date value={code.createdAt} />
+        </ChainEntity.Data>
       </div>
 
       <div className={styles.card}>

idea/vara-eth/frontend/src/pages/program/program.module.scss

@@ -7,28 +7,6 @@
   border-radius: 0 0 4px 4px;
 }
 
-.header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  justify-content: space-between;
-
-  .leftSide {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 16px;
-  }
-
-  .link {
-    display: flex;
-  }
-
-  .arrowLeft {
-    margin-right: 4px;
-  }
-}
-
 .card {
   padding: 24px;
 
@@ -37,30 +15,16 @@
   }
 }
 
-.name {
-  padding-left: 32px;
-  color: #fff;
-}
-
-.properties {
-  margin-top: 24px;
-  display: grid;
-  grid-template-columns: 136px 1fr;
-  gap: 20px 24px;
+.status {
+  margin-left: auto;
 }
 
-.property {
+.executableBalance {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.blockHash {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
 .emptyState {
   display: flex;
   flex-direction: column;