Skip to content

Commit

Permalink
wip: responsiveness (#166)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jagnani73
jagnani73 committed May 8, 2024
1 parent cdbf539 commit b08b6f3
Show file tree
Hide file tree
Showing 33 changed files with 1,421 additions and 2,450 deletions.
347 changes: 171 additions & 176 deletions src/components/Molecules/AddressDetails/AddressDetails.tsx
View file

Large diffs are not rendered by default.

159 changes: 74 additions & 85 deletions src/components/Molecules/BlockDetails/BlockDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import { Address } from "@/components/Atoms";
import { Card, CardDescription } from "@/components/ui/card";
import { CardDetail } from "@/components/Shared";
import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { timestampParser } from "@/utils/functions";
import { None, Some, type Option } from "@/utils/option";
import { useGoldRush } from "@/utils/store";
import { type BlockDetailsProps } from "@/utils/types/molecules.types";
import { type CardDetailProps } from "@/utils/types/shared.types";
import { type Block } from "@covalenthq/client-sdk";
import { useEffect, useState } from "react";

Expand Down Expand Up @@ -39,94 +41,81 @@ export const BlockDetails: React.FC<BlockDetailsProps> = ({
}, [chain_name, height]);

return (
<Card className="flex w-full flex-col items-start gap-x-4 rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white">
<Card className="grid w-full grid-cols-1 items-start gap-4 break-all border p-2 md:grid-cols-3">
{maybeResult.match({
None: () => <Skeleton size={GRK_SIZES.LARGE} />,
None: () => (
<>
{Array(8)
.fill(null)
.map(() => (
<div key={Math.random()}>
<Skeleton size={GRK_SIZES.LARGE} />
</div>
))}
</>
),
Some: (block) =>
errorMessage ? (
<p className="mt-4">{errorMessage}</p>
<p className="col-span-3">{errorMessage}</p>
) : (
<div className="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">
{block.height.toLocaleString()}
</p>
</div>

<div>
<CardDescription>SIGNED AT</CardDescription>

<div className="flex items-center gap-x-2">
<p>
{timestampParser(
block.signed_at,
"descriptive"
)}
</p>
</div>
</div>

<div>
<CardDescription>BLOCK HASH</CardDescription>

<div className="flex items-end 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>
(
[
{
heading: "HEIGHT",
content: block.height.toLocaleString(),
},
{
heading: "SIGNED AT",
content: timestampParser(
block.signed_at,
"descriptive"
),
},
{
heading: "BLOCK HASH",
content: (
<Address address={block.block_hash} />
),
},
{
heading: "GAS USED",
content: block.gas_used,
subtext: `${(
(block.gas_used / block.gas_limit) *
100
).toFixed(2)}%`,
},
{
heading: "GAS LIMIT",
content: block.gas_limit.toLocaleString(),
},
{
heading: "MINER ADDRESS",
content: (
<Address
address={block.miner_address}
/>
),
},
{
heading: "BLOCK PARENT HASH",
content: (
<Address
address={block.block_parent_hash}
/>
),
},
{
heading: "EXTRA DATA",
content: block.extra_data,
},
] as CardDetailProps[]
).map((props) => (
<CardDetail
key={props.heading?.toString()}
{...props}
/>
))
),
})}
</Card>
Expand Down
30 changes: 15 additions & 15 deletions src/components/Molecules/GasCard/GasCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,22 @@ export const GasCard: React.FC<GasCardProps> = ({ chain_name, event_type }) => {

return (
<div className="flex w-full flex-col gap-4 rounded border border-secondary-light p-2 dark:border-secondary-dark">
<div className="flex flex-col items-center justify-center gap-2">
{maybeResult.match({
None: () => <Skeleton size={GRK_SIZES.LARGE} />,
Some: ({ base_fee }) => (
<p className="text-xl">
⛽ Base Fee:{" "}
{Math.round(
(Number(base_fee) ?? 0) / Math.pow(10, 9)
)}{" "}
Gwei
</p>
),
})}
</div>
{maybeResult.match({
None: () => (
<div className="mx-auto">
<Skeleton size={GRK_SIZES.LARGE} />
</div>
),
Some: ({ base_fee }) => (
<p className="text-center text-xl">
⛽ Base Fee:{" "}
{Math.round((Number(base_fee) ?? 0) / Math.pow(10, 9))}{" "}
Gwei
</p>
),
})}

<div className="grid grid-cols-3 items-center">
<div className="grid grid-cols-1 items-center gap-4 md:grid-cols-3">
{maybeResult.match({
None: () =>
Array(3)
Expand Down
83 changes: 44 additions & 39 deletions src/components/Molecules/LatestBlocks/LatestBlocks.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { Address } from "@/components/Atoms";
import { CardDetail } from "@/components/Shared";
import { Button } from "@/components/ui/button";
import { Card, CardDescription } from "@/components/ui/card";
import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { timestampParser } from "@/utils/functions";
import { None, Some, type Option } from "@/utils/option";
import { useGoldRush } from "@/utils/store";
import { type LatestBlocksProps } from "@/utils/types/molecules.types";
import { type CardDetailProps } from "@/utils/types/shared.types";
import { type Block } from "@covalenthq/client-sdk";
import { ExternalLinkIcon } from "@radix-ui/react-icons";
import { useEffect, useState } from "react";
Expand Down Expand Up @@ -62,52 +64,55 @@ export const LatestBlocks: React.FC<LatestBlocksProps> = ({
key={block.height}
className="flex w-full flex-col rounded border border-secondary-light p-2 dark:border-secondary-dark dark:bg-background-dark dark:text-white"
>
<div className="flex w-full justify-between">
<CardDescription>BLOCK HEIGHT</CardDescription>

<p className="text-sm">
{block.height.toLocaleString()}
</p>
</div>

<div className="flex w-full justify-between">
<CardDescription>SIGNED AT</CardDescription>

<p className="text-sm">
{timestampParser(block.signed_at, "relative")}
</p>
</div>

<div className="flex w-full justify-between text-sm">
<CardDescription>BLOCK HASH</CardDescription>

<Address
address={block.block_hash}
show_copy_icon={false}
{(
[
{
heading: "BLOCK HEIGHT",
content: block.height.toLocaleString(),
},
{
heading: "SIGNED AT",
content: timestampParser(
block.signed_at,
"relative"
),
},
{
heading: "BLOCK HASH",
content: (
<Address
address={block.block_hash}
show_copy_icon={false}
/>
),
},
{
heading: "GAS USED",
content: `${(
(block.gas_used / block.gas_limit) *
100
).toFixed(2)}%`,
},
{
heading: "GAS LIMIT",
content: block.gas_limit.toLocaleString(),
},
] as CardDetailProps[]
).map((props) => (
<CardDetail
key={props.heading?.toString()}
wrapperClassName="flex justify-between"
{...props}
/>
</div>

<div className="flex w-full justify-between text-sm">
<CardDescription>GAS USED</CardDescription>
{((block.gas_used / block.gas_limit) * 100).toFixed(
2
)}
%
</div>

<div className="flex w-full justify-between text-sm">
<CardDescription>GAS LIMIT</CardDescription>

{block.gas_limit.toLocaleString()}
</div>
))}

{on_view_details ? (
<Button
variant="ghost"
className="mx-auto mb-2 mt-4 flex items-center justify-center gap-x-2 text-sm"
onClick={() => on_view_details(block)}
>
<span> View Block Details</span>
View Block Details
<ExternalLinkIcon />
</Button>
) : (
Expand Down
16 changes: 6 additions & 10 deletions src/components/Molecules/LatestPrice/LatestPrice.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Card, CardDescription } from "@/components/ui/card";
import { CardDetail } from "@/components/Shared";
import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { GRK_SIZES } from "@/utils/constants/shared.constants";
import { None, Some, type Option } from "@/utils/option";
Expand Down Expand Up @@ -46,15 +47,10 @@ export const LatestPrice: React.FC<LatestPriceProps> = ({ chain_name }) => {
<p className="mt-4">{errorMessage}</p>
) : (
<div className="w-full">
<div>
<CardDescription>
{contract_ticker_symbol} PRICE
</CardDescription>

<p className="mt-1 flex items-center gap-x-1.5">
{pretty_price}
</p>
</div>
<CardDetail
heading={`${contract_ticker_symbol} PRICE`}
content={pretty_price}
/>
</div>
),
})}
Expand Down
17 changes: 17 additions & 0 deletions src/components/Molecules/LatestTransactions/LatestTransactions.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { type Meta, type StoryObj } from "@storybook/react";
import { LatestTransactions as LatestTransactionsComponent } from "./LatestTransactions";

type Story = StoryObj<typeof LatestTransactionsComponent>;

const meta: Meta<typeof LatestTransactionsComponent> = {
title: "Molecules/Latest Transactions",
component: LatestTransactionsComponent,
};

export default meta;

export const LatestTransactions: Story = {
args: {
chain_name: "eth-mainnet",
},
};
Loading

0 comments on commit b08b6f3

Please sign in to comment.