Yj-feat/block-details-v2 (#134)

covalenthq · Feb 29, 2024 · c929608 · c929608
1 parent d0881a9
commit c929608
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -85,7 +85,7 @@
         "react-dom": "^18.2.0"
     },
     "dependencies": {
-        "@covalenthq/client-sdk": "^0.9.2",
+        "@covalenthq/client-sdk": "^0.9.4",
         "@headlessui/react": "^1.7.17",
         "@radix-ui/react-avatar": "^1.0.4",
         "@radix-ui/react-checkbox": "^1.0.4",

diff --git a/src/components/Molecules/BlockDetails/BlockDetails.tsx b/src/components/Molecules/BlockDetails/BlockDetails.tsx
@@ -1,3 +1,4 @@
+import { Address } from "@/components/Atoms/Address/Address";
 import { Card, CardDescription, CardTitle } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { GRK_SIZES } from "@/utils/constants/shared.constants";
@@ -38,24 +39,24 @@ 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: () => (
                         <div className="mt-4">
                             <Skeleton size={GRK_SIZES.LARGE} />
                         </div>
                     ),
-                    Some: ({ height, signed_at }) =>
+                    Some: (block) =>
                         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>
 
                                     <p className="mt-1 flex items-center gap-x-1.5">
-                                        {height.toLocaleString()}
+                                        {block.height.toLocaleString()}
                                     </p>
                                 </div>
 
@@ -65,12 +66,80 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
                                     <div className="flex items-center gap-x-2">
                                         <p>
                                             {timestampParser(
-                                                signed_at,
-                                                "relative"
+                                                block.signed_at,
+                                                "descriptive"
                                             )}
                                         </p>
                                     </div>
                                 </div>
+
+                                <div>
+                                    <CardDescription>
+                                        BLOCK HASH
+                                    </CardDescription>
+
+                                    <div className="flex items-center gap-x-2">
+                                        <Address address={block.block_hash} />
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <CardDescription>GAS USED</CardDescription>
+
+                                    <div className="flex items-center gap-x-2">
+                                        {block.gas_used}{" "}
+                                        <CardDescription>
+                                            {(
+                                                (block.gas_used /
+                                                    block.gas_limit) *
+                                                100
+                                            ).toFixed(2)}
+                                            %
+                                        </CardDescription>
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <CardDescription>GAS LIMIT</CardDescription>
+
+                                    <div className="flex items-center gap-x-2">
+                                        {block.gas_limit.toLocaleString()}
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <CardDescription>
+                                        MINER ADDRESS
+                                    </CardDescription>
+
+                                    <div className="flex items-center gap-x-2">
+                                        <Address
+                                            address={block.miner_address}
+                                        />
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <CardDescription>
+                                        BLOCK PARENT HASH
+                                    </CardDescription>
+
+                                    <div className="flex items-center gap-x-2">
+                                        <Address
+                                            address={block.block_parent_hash}
+                                        />
+                                    </div>
+                                </div>
+
+                                <div>
+                                    <CardDescription>
+                                        EXTRA DATA
+                                    </CardDescription>
+
+                                    <div className="flex items-center gap-x-2">
+                                        {block.extra_data}
+                                    </div>
+                                </div>
                             </div>
                         ),
                 })}