feat(block details): updated api

covalenthq · Feb 29, 2024 · 396443a · 396443a
1 parent 77a482e
commit 396443a
Showing 1 changed file with 29 additions and 29 deletions.
diff --git a/src/components/Molecules/BlockDetails/BlockDetails.tsx b/src/components/Molecules/BlockDetails/BlockDetails.tsx
@@ -39,7 +39,7 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
 
     return (
         <>
-            <Card className="flex w-full flex-col items-start gap-x-4 rounded border p-2 dark:bg-background-dark dark:text-white md:max-w-[20rem] lg:max-w-[20rem]">
+            <Card className="flex w-full flex-col items-start gap-x-4 rounded border p-2 dark:bg-background-dark dark:text-white">
                 <CardTitle className="">Overview</CardTitle>
                 {maybeResult.match({
                     None: () => (
@@ -51,7 +51,7 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
                         errorMessage ? (
                             <p className="mt-4">{errorMessage}</p>
                         ) : (
-                            <div className="mt-2 flex flex-col gap-y-2">
+                            <div className="mt-2 grid w-full grid-cols-3 gap-16 gap-y-4">
                                 <div>
                                     <CardDescription>HEIGHT</CardDescription>
 
@@ -67,7 +67,7 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
                                         <p>
                                             {timestampParser(
                                                 block.signed_at,
-                                                "relative"
+                                                "descriptive"
                                             )}
                                         </p>
                                     </div>
@@ -84,60 +84,60 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
                                 </div>
 
                                 <div>
-                                    <CardDescription>
-                                        BLOCK PARENT HASH
-                                    </CardDescription>
+                                    <CardDescription>GAS USED</CardDescription>
 
                                     <div className="flex items-center gap-x-2">
-                                        <Address
-                                            address={block.block_parent_hash}
-                                        />
+                                        {block.gas_used}{" "}
+                                        <CardDescription>
+                                            {(
+                                                (block.gas_used /
+                                                    block.gas_limit) *
+                                                100
+                                            ).toFixed(2)}
+                                            %
+                                        </CardDescription>
                                     </div>
                                 </div>
 
                                 <div>
-                                    <CardDescription>
-                                        EXTRA DATA
-                                    </CardDescription>
+                                    <CardDescription>GAS LIMIT</CardDescription>
 
                                     <div className="flex items-center gap-x-2">
-                                        {block.extra_data}
+                                        {block.gas_limit.toLocaleString()}
                                     </div>
                                 </div>
 
                                 <div>
-                                    <CardDescription>GAS LIMIT</CardDescription>
+                                    <CardDescription>
+                                        MINER ADDRESS
+                                    </CardDescription>
 
                                     <div className="flex items-center gap-x-2">
-                                        {block.gas_limit.toLocaleString()}
+                                        <Address
+                                            address={block.miner_address}
+                                        />
                                     </div>
                                 </div>
 
                                 <div>
-                                    <CardDescription>GAS USED</CardDescription>
+                                    <CardDescription>
+                                        BLOCK PARENT HASH
+                                    </CardDescription>
 
                                     <div className="flex items-center gap-x-2">
-                                        {block.gas_used}{" "}
-                                        <CardDescription>
-                                            {(
-                                                (block.gas_used /
-                                                    block.gas_limit) *
-                                                100
-                                            ).toFixed(2)}
-                                            %
-                                        </CardDescription>
+                                        <Address
+                                            address={block.block_parent_hash}
+                                        />
                                     </div>
                                 </div>
 
                                 <div>
                                     <CardDescription>
-                                        MINER ADDRESS
+                                        EXTRA DATA
                                     </CardDescription>
 
                                     <div className="flex items-center gap-x-2">
-                                        <Address
-                                            address={block.miner_address}
-                                        />
+                                        {block.extra_data}
                                     </div>
                                 </div>
                             </div>