From 878ff3cb46b33a088863e7da01e5ad56c39fe3ad Mon Sep 17 00:00:00 2001 From: Yashvardhan Jagnani Date: Thu, 30 May 2024 02:40:42 +0530 Subject: [PATCH 1/4] nit --- src/components/Atoms/AddressCard/AddressCard.tsx | 5 +++-- .../Molecules/Block/LatestBlocks/LatestBlocks.tsx | 2 +- src/components/Molecules/GasCard/GasCard.tsx | 5 +++-- src/components/Molecules/LatestPrice/LatestPrice.tsx | 2 +- .../Molecules/NFT/NFTFloorPrice/NFTFloorPrice.tsx | 5 +++-- .../Molecules/NFT/NFTSalesCount/NFTSalesCount.tsx | 5 +++-- src/components/Molecules/NFT/NFTVolume/NFTVolume.tsx | 5 +++-- .../Transaction/LatestTransactions/LatestTransactions.tsx | 2 +- .../Transaction/TransactionReceipt/TransactionReceipt.tsx | 2 +- .../XYK/Pool/XYKPoolTimeseries/XYKPoolTimeseries.tsx | 8 ++++---- .../XYK/Token/XYKTokenTimeseries/XYKTokenTimeseries.tsx | 7 +++---- .../Molecules/XYK/XYKTimeseries/XYKTimeseries.tsx | 7 +++---- 12 files changed, 29 insertions(+), 26 deletions(-) diff --git a/src/components/Atoms/AddressCard/AddressCard.tsx b/src/components/Atoms/AddressCard/AddressCard.tsx index c0d941d3..840b04a0 100644 --- a/src/components/Atoms/AddressCard/AddressCard.tsx +++ b/src/components/Atoms/AddressCard/AddressCard.tsx @@ -9,6 +9,7 @@ import { } from "@/components/ui/dialog"; import QRCode from "react-qr-code"; import { IconWrapper } from "@/components/Shared"; +import { Card } from "@/components/ui/card"; export const AddressCard: React.FC = ({ address, @@ -19,7 +20,7 @@ export const AddressCard: React.FC = ({ actionable_address, }) => { return ( -
+ = ({ )}
- + ); }; diff --git a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx index bc31d1c6..f3367a9e 100644 --- a/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx +++ b/src/components/Molecules/Block/LatestBlocks/LatestBlocks.tsx @@ -50,7 +50,7 @@ export const LatestBlocks: React.FC = ({ }, [chain_name]); return ( - + {maybeResult.match({ None: () => new Array(5).fill(null).map(() => ( diff --git a/src/components/Molecules/GasCard/GasCard.tsx b/src/components/Molecules/GasCard/GasCard.tsx index ca6f2203..e8e4460f 100644 --- a/src/components/Molecules/GasCard/GasCard.tsx +++ b/src/components/Molecules/GasCard/GasCard.tsx @@ -11,6 +11,7 @@ import { } from "@/utils/constants/shared.constants"; import { type CovalentAPIError } from "@/utils/types/shared.types"; import { Button } from "@/components/ui/button"; +import { Card } from "@/components/ui/card"; export const GasCard: React.FC = ({ chain_name }) => { const [isErc20, setIsErc20] = useState(false); @@ -85,7 +86,7 @@ export const GasCard: React.FC = ({ chain_name }) => { ); return ( -
+ {maybeResult.match({ None: () => (
@@ -193,6 +194,6 @@ export const GasCard: React.FC = ({ chain_name }) => { ), })}
-
+ ); }; diff --git a/src/components/Molecules/LatestPrice/LatestPrice.tsx b/src/components/Molecules/LatestPrice/LatestPrice.tsx index d98569e8..7324c5e2 100644 --- a/src/components/Molecules/LatestPrice/LatestPrice.tsx +++ b/src/components/Molecules/LatestPrice/LatestPrice.tsx @@ -44,7 +44,7 @@ export const LatestPrice: React.FC = ({ chain_name }) => { }, [chain_name]); return ( - + {maybeResult.match({ None: () => ( <> diff --git a/src/components/Molecules/NFT/NFTFloorPrice/NFTFloorPrice.tsx b/src/components/Molecules/NFT/NFTFloorPrice/NFTFloorPrice.tsx index 981f213d..5420fc24 100644 --- a/src/components/Molecules/NFT/NFTFloorPrice/NFTFloorPrice.tsx +++ b/src/components/Molecules/NFT/NFTFloorPrice/NFTFloorPrice.tsx @@ -17,6 +17,7 @@ import { } from "@/utils/constants/shared.constants"; import { useGoldRush } from "@/utils/store"; import { type NFTFloorPriceProps } from "@/utils/types/molecules.types"; +import { Card } from "@/components/ui/card"; export const NFTFloorPrice: React.FC = ({ chain_name, @@ -110,7 +111,7 @@ export const NFTFloorPrice: React.FC = ({ }); return ( -
+
Floor Price
@@ -185,6 +186,6 @@ export const NFTFloorPrice: React.FC = ({
{body} - + ); }; diff --git a/src/components/Molecules/NFT/NFTSalesCount/NFTSalesCount.tsx b/src/components/Molecules/NFT/NFTSalesCount/NFTSalesCount.tsx index c17b0461..195311a9 100644 --- a/src/components/Molecules/NFT/NFTSalesCount/NFTSalesCount.tsx +++ b/src/components/Molecules/NFT/NFTSalesCount/NFTSalesCount.tsx @@ -12,6 +12,7 @@ import { } from "@/utils/constants/shared.constants"; import { useGoldRush } from "@/utils/store"; import { type NFTSalesCountProps } from "@/utils/types/molecules.types"; +import { Card } from "@/components/ui/card"; export const NFTSalesCount: React.FC = ({ chain_name, @@ -76,7 +77,7 @@ export const NFTSalesCount: React.FC = ({ }); return ( -
+
Sales History
@@ -115,6 +116,6 @@ export const NFTSalesCount: React.FC = ({
{body} - + ); }; diff --git a/src/components/Molecules/NFT/NFTVolume/NFTVolume.tsx b/src/components/Molecules/NFT/NFTVolume/NFTVolume.tsx index fabc7858..f37d67bd 100644 --- a/src/components/Molecules/NFT/NFTVolume/NFTVolume.tsx +++ b/src/components/Molecules/NFT/NFTVolume/NFTVolume.tsx @@ -14,6 +14,7 @@ import { import { useGoldRush } from "@/utils/store"; import { type NFTVolumeProps } from "@/utils/types/molecules.types"; import { prettifyCurrency } from "@covalenthq/client-sdk"; +import { Card } from "@/components/ui/card"; export const NFTVolume: React.FC = ({ chain_name, @@ -100,7 +101,7 @@ export const NFTVolume: React.FC = ({ }); return ( -
+
Volume
@@ -175,6 +176,6 @@ export const NFTVolume: React.FC = ({
{body} - + ); }; diff --git a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx index e3aad606..19532ccb 100644 --- a/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx +++ b/src/components/Molecules/Transaction/LatestTransactions/LatestTransactions.tsx @@ -71,7 +71,7 @@ export const LatestTransactions: React.FC = ({ }, [chain_name]); return ( - + {maybeResult.match({ None: () => new Array(5).fill(null).map(() => ( diff --git a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx index 36dec162..1e77b46d 100644 --- a/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx +++ b/src/components/Molecules/Transaction/TransactionReceipt/TransactionReceipt.tsx @@ -82,7 +82,7 @@ export const TransactionReceipt: React.FC = ({ ); return ( - +
diff --git a/src/components/Molecules/XYK/Pool/XYKPoolTimeseries/XYKPoolTimeseries.tsx b/src/components/Molecules/XYK/Pool/XYKPoolTimeseries/XYKPoolTimeseries.tsx index b807c922..ba85ff14 100644 --- a/src/components/Molecules/XYK/Pool/XYKPoolTimeseries/XYKPoolTimeseries.tsx +++ b/src/components/Molecules/XYK/Pool/XYKPoolTimeseries/XYKPoolTimeseries.tsx @@ -20,6 +20,7 @@ import { } from "@covalenthq/client-sdk"; import { capitalizeFirstLetter } from "@/utils/functions/capitalize"; import { type CovalentAPIError } from "@/utils/types/shared.types"; +import { Card } from "@/components/ui/card"; export const XYKPoolTimeseries: React.FC = ({ chain_name, @@ -105,13 +106,13 @@ export const XYKPoolTimeseries: React.FC = ({ }, [dex_name, pool_address, chain_name, initialMaybeResult]); return ( -
+ + {" "}
{`${capitalizeFirstLetter(activeChart)} (USD)`}
-
- {chartData.match({ None: () => { return ( @@ -200,6 +200,6 @@ export const XYKPoolTimeseries: React.FC = ({ } }, })} -
+ ); }; diff --git a/src/components/Molecules/XYK/Token/XYKTokenTimeseries/XYKTokenTimeseries.tsx b/src/components/Molecules/XYK/Token/XYKTokenTimeseries/XYKTokenTimeseries.tsx index 0f9306c7..f84029d1 100644 --- a/src/components/Molecules/XYK/Token/XYKTokenTimeseries/XYKTokenTimeseries.tsx +++ b/src/components/Molecules/XYK/Token/XYKTokenTimeseries/XYKTokenTimeseries.tsx @@ -20,6 +20,7 @@ import { } from "@covalenthq/client-sdk"; import { capitalizeFirstLetter } from "@/utils/functions/capitalize"; import { type CovalentAPIError } from "@/utils/types/shared.types"; +import { Card } from "@/components/ui/card"; export const XYKTokenTimeseries: React.FC = ({ chain_name, @@ -105,13 +106,12 @@ export const XYKTokenTimeseries: React.FC = ({ }, [dex_name, token_address, chain_name, initialMaybeResult]); return ( -
+
{`${capitalizeFirstLetter(activeChart)} (USD)`}
-
- {chartData.match({ None: () => { return ( @@ -200,6 +199,6 @@ export const XYKTokenTimeseries: React.FC = ({ } }, })} -
+ ); }; diff --git a/src/components/Molecules/XYK/XYKTimeseries/XYKTimeseries.tsx b/src/components/Molecules/XYK/XYKTimeseries/XYKTimeseries.tsx index c740281b..9e6f4c68 100644 --- a/src/components/Molecules/XYK/XYKTimeseries/XYKTimeseries.tsx +++ b/src/components/Molecules/XYK/XYKTimeseries/XYKTimeseries.tsx @@ -20,6 +20,7 @@ import { } from "@covalenthq/client-sdk"; import { capitalizeFirstLetter } from "@/utils/functions/capitalize"; import { type CovalentAPIError } from "@/utils/types/shared.types"; +import { Card } from "@/components/ui/card"; export const XYKTimeseries: React.FC = ({ chain_name, @@ -99,13 +100,12 @@ export const XYKTimeseries: React.FC = ({ }, [initialMaybeResult, dex_name, chain_name]); return ( -
+
{`${capitalizeFirstLetter(activeChart)} (USD)`}
-
- {chartData.match({ None: () => { return ( @@ -194,6 +193,6 @@ export const XYKTimeseries: React.FC = ({ } }, })} -
+ ); }; From aa19e0e8bb98e274d4593ff387a5ea30315acf99 Mon Sep 17 00:00:00 2001 From: Yashvardhan Jagnani Date: Thu, 30 May 2024 02:50:50 +0530 Subject: [PATCH 2/4] fix(chain selector): no chain options --- src/components/Molecules/ChainSelector/ChainSelector.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/Molecules/ChainSelector/ChainSelector.tsx b/src/components/Molecules/ChainSelector/ChainSelector.tsx index a95dd151..39ed5d84 100644 --- a/src/components/Molecules/ChainSelector/ChainSelector.tsx +++ b/src/components/Molecules/ChainSelector/ChainSelector.tsx @@ -32,6 +32,10 @@ export const ChainSelector: React.FC = ({ return null; } + if (!chain_options.length) { + return chains; + } + return chain_options.reduce((acc: ChainItem[], nameOrId) => { const foundChain: ChainItem | null = chains.find( From a7b247a72355bfdad46c656c860d74e8133650d4 Mon Sep 17 00:00:00 2001 From: Yashvardhan Jagnani Date: Thu, 30 May 2024 03:00:13 +0530 Subject: [PATCH 3/4] fix(timestamp) lag --- src/components/Atoms/Timestamp/Timestamp.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Atoms/Timestamp/Timestamp.tsx b/src/components/Atoms/Timestamp/Timestamp.tsx index 3eb3142b..e61bfdd4 100644 --- a/src/components/Atoms/Timestamp/Timestamp.tsx +++ b/src/components/Atoms/Timestamp/Timestamp.tsx @@ -1,6 +1,6 @@ import { timestampParser } from "@/utils/functions"; import { type TimestampProps } from "@/utils/types/atoms.types"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { ClockIcon } from "@radix-ui/react-icons"; export const Timestamp: React.FC = ({ @@ -36,11 +36,18 @@ export const Timestamp: React.FC = ({ }; }, [timestamp, relativeTime, dynamic]); + const handleToggle = useCallback((isRelative: boolean) => { + setRelativeTime(!isRelative); + setParsedTime( + timestampParser(timestamp, !isRelative ? "relative" : "descriptive") + ); + }, []); + return ( {parsedTime} - - - - ) : ( - <> - ), - })} - -
- {maybeResult.match({ - None: () => - Array(3) + <> + {Array(5) .fill(null) .map(() => (
- )), - Some: (result) => - errorMessage ? ( -

{errorMessage}

- ) : result ? ( - result[isErc20 ? "erc" : "native"].items + ))} + + ), + Some: (result) => + errorMessage ? ( +

{errorMessage}

+ ) : result ? ( + <> +
+

+ + + +

+ +
+

+ Base Fee +

+ +

+ {Math.round( + (Number( + result?.[ + isErc20 ? "erc" : "native" + ].base_fee + ) ?? 0) / Math.pow(10, 9) + )}{" "} + Gwei +

+
+
+ + {result[isErc20 ? "erc" : "native"].items .sort( (a, b) => parseInt(a.gas_price) - @@ -163,37 +185,59 @@ export const GasCard: React.FC = ({ chain_name }) => { ) => (
-

+

{copy[i].logo}

-

+ +

{copy[i].content} -

-

- {Math.round( - parseInt(gas_price) / - Math.pow(10, 9) - ).toFixed(0)}{" "} - Gwei - - ({pretty_total_gas_quote}) - -

+

+ {Math.round( + parseInt(gas_price) / + Math.pow(10, 9) + ).toFixed(0)}{" "} + Gwei + + ( + {pretty_total_gas_quote} + ) + +

-

- {interval} -

+

+ {interval} +

+
) - ) - ) : ( - <> - ), - })} -
+ )} + +
+ + +
+ + ) : ( + <> + ), + })} ); }; diff --git a/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx b/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx index 4ee1621c..6715902d 100644 --- a/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx +++ b/src/components/Molecules/NFT/NFTApprovalList/NFTApprovalList.tsx @@ -10,6 +10,7 @@ import type { ColumnDef } from "@tanstack/react-table"; import { Address } from "@/components/Atoms"; import { Button } from "@/components/ui/button"; import { TableHeader } from "@/components/ui/table"; +import { Badge } from "@/components/ui/badge"; export const NFTApprovalList: React.FC = ({ chain_name, @@ -117,17 +118,19 @@ export const NFTApprovalList: React.FC = ({ header: () => Risk Factor, cell: ({ row }) => { return ( - - {row.original.spenders[0].allowance === "Unlimited" + {row.original.spenders[0].allowance === + "CONSIDER REVOKING" ? "High" : "Low"} - + ); }, }, diff --git a/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx b/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx index 2ef4261e..37d8a21d 100644 --- a/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx +++ b/src/components/Molecules/Token/TokenApprovalList/TokenApprovalList.tsx @@ -13,6 +13,7 @@ import type { ColumnDef } from "@tanstack/react-table"; import { Address, TokenAvatar } from "@/components/Atoms"; import { Button } from "@/components/ui/button"; import { TableHeader } from "@/components/ui/table"; +import { Badge } from "@/components/ui/badge"; export const TokenApprovalList: React.FC = ({ chain_name, @@ -152,19 +153,19 @@ export const TokenApprovalList: React.FC = ({ header: () => Risk Factor, cell: ({ row }) => { return ( - {row.original.spenders[0].risk_factor === "CONSIDER REVOKING" ? "High" : "Low"} - + ); }, }, diff --git a/src/components/Shared/TableHeaderSorting.tsx b/src/components/Shared/TableHeaderSorting.tsx index 7017cd0d..7695f95b 100644 --- a/src/components/Shared/TableHeaderSorting.tsx +++ b/src/components/Shared/TableHeaderSorting.tsx @@ -12,7 +12,7 @@ export const TableHeaderSorting: ( : "sort"; return (
( : "" }`} > - {header} + + {header} + + {icon && ( [role=checkbox]]:translate-y-[2px]", + "h-10 px-2 text-left align-middle font-medium text-foreground-light opacity-75 dark:text-foreground-dark [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className )} {...props} diff --git a/src/utils/constants/shared.constants.ts b/src/utils/constants/shared.constants.ts index a3176ff0..4e64728f 100644 --- a/src/utils/constants/shared.constants.ts +++ b/src/utils/constants/shared.constants.ts @@ -46,7 +46,7 @@ export enum PERIOD { export const POOL_TRANSACTION_MAP: Record< string, - { name: string; color: "default" | "secondary" | "destructive" | "outline" } + { name: string; color: "default" | "secondary" | "danger" | "outline" } > = { SWAP: { name: "SWAP", @@ -54,7 +54,7 @@ export const POOL_TRANSACTION_MAP: Record< }, REMOVE_LIQUIDITY: { name: "REMOVE", - color: "destructive", + color: "danger", }, ADD_LIQUIDITY: { name: "ADD", diff --git a/src/utils/store/GoldRush.tsx b/src/utils/store/GoldRush.tsx index b256ff2b..e8460ef8 100644 --- a/src/utils/store/GoldRush.tsx +++ b/src/utils/store/GoldRush.tsx @@ -35,16 +35,16 @@ export const GoldRushProvider: React.FC = ({ borderRadius: 8, colors: { dark: { - primary: "#F7CD60", - background: "#0F172A", + primary: "#FF4C8B", + background: "#000426", foreground: "#FFFFFF", - secondary: "#B3B3B3", + secondary: "#868E96", }, light: { - primary: "#EA46CB", - background: "#F8F8F8", - foreground: "#090909", - secondary: "#94A3B8", + primary: "#00D8D5", + background: "#FFFFFF", + foreground: "#1C2024", + secondary: "#868E96", }, }, mode: "light", diff --git a/tailwind.config.ts b/tailwind.config.ts index abffd2f7..1060cee8 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -7,18 +7,10 @@ const config = { "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", ], theme: { - container: { - center: true, - padding: "2rem", - screens: { - "2xl": "1400px", - }, - }, extend: { colors: { - danger: "hsl(var(--grk-destructive))", - success: "hsl(var(--grk-success))", - + danger: "#FA3D1D", + success: "#4BD17E", primary: { dark: { DEFAULT: "var(--grk-primary-dark-DEFAULT)",