From 9da305d0297047b913d26c03185df96cae54446b Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 09:14:14 +0100 Subject: [PATCH 01/14] feat: DataBlock component --- src/components/requirements/DataBlock.tsx | 42 +++++++++++++++++++ .../requirements/DataBlock.stories.tsx | 37 ++++++++++++++++ src/styles/globals.css | 13 ++++++ tailwind.config.ts | 23 +++++++--- 4 files changed, 109 insertions(+), 6 deletions(-) create mode 100644 src/components/requirements/DataBlock.tsx create mode 100644 src/stories/requirements/DataBlock.stories.tsx diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx new file mode 100644 index 0000000000..a752611585 --- /dev/null +++ b/src/components/requirements/DataBlock.tsx @@ -0,0 +1,42 @@ +import { Skeleton } from "@/components/ui/Skeleton"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, +} from "@/components/ui/Tooltip"; +import { Warning } from "@phosphor-icons/react/dist/ssr"; +import type { PropsWithChildren } from "react"; + +type Props = { + isLoading?: boolean; + error?: string; +}; + +const DataBlock = ({ + isLoading, + error, + children, +}: PropsWithChildren): JSX.Element => { + if (isLoading) return ; + + return ( + + + + {error && ( + + )} + {children} + + + +

{error}

+ + + ); +}; + +export { DataBlock }; diff --git a/src/stories/requirements/DataBlock.stories.tsx b/src/stories/requirements/DataBlock.stories.tsx new file mode 100644 index 0000000000..825d267e97 --- /dev/null +++ b/src/stories/requirements/DataBlock.stories.tsx @@ -0,0 +1,37 @@ +import { DataBlock } from "@/components/requirements/DataBlock"; +import { Card } from "@/components/ui/Card"; +import { TooltipProvider } from "@/components/ui/Tooltip"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/DataBlock", + component: DataBlock, + decorators: (Story) => ( + + + {"This is a "} + + {" example"} + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "DataBlock", + error: "", + }, +}; + +export const ErrorState: Story = { + name: "Error state", + args: { + ...Default.args, + error: "An error occurred", + }, +}; diff --git a/src/styles/globals.css b/src/styles/globals.css index a618b6a950..e74452b9e7 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -63,6 +63,17 @@ html { --blue-800: #1e40af; --blue-900: #1e3a8a; + --orange-50: #fff7ed; + --orange-100: #ffedd5; + --orange-200: #fed7aa; + --orange-300: #fdba74; + --orange-400: #fb923c; + --orange-500: #f97316; + --orange-600: #ea580c; + --orange-700: #c2410c; + --orange-800: #9a3412; + --orange-900: #7c2d12; + --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; @@ -156,6 +167,7 @@ html { --icon-success: var(--green-500); --icon-error: var(--red-500); + --icon-warning: var(--orange-500); } .dark { @@ -213,6 +225,7 @@ html { --icon-success: var(--green-400); --icon-error: var(--red-400); + --icon-warning: var(--orange-300); } body { diff --git a/tailwind.config.ts b/tailwind.config.ts index d35465e192..85b633f1da 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -12,11 +12,11 @@ const config = { ], prefix: "", theme: { - fontFamily: { - sans: ["var(--font-inter,sans-serif)"], - display: ["var(--font-dystopian,sans-serif)"], - }, extend: { + fontFamily: { + sans: ["var(--font-inter,sans-serif)"], + display: ["var(--font-dystopian,sans-serif)"], + }, colors: { background: "var(--background)", foreground: { @@ -71,8 +71,19 @@ const config = { "scroll-thumb": "var(--scroll-thumb)", icon: { success: "var(--icon-success)", - error: "var(--icon-error)" - } + error: "var(--icon-error)", + warning: "var(--icon-warning)", + }, + blackAlpha: { + DEFAULT: "var(--blackAlpha)", + medium: "var(--blackAlpha-medium)", + hard: "var(--blackAlpha-hard)", + }, + whiteAlpha: { + DEFAULT: "var(--whiteAlpha)", + medium: "var(--whiteAlpha-medium)", + hard: "var(--whiteAlpha-hard)", + }, }, keyframes: { "collapse-open": { From 1a8cc142da6e60bfa97b5333f4dda8ace0762769 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 09:33:48 +0100 Subject: [PATCH 02/14] feat: ChainIndicator component --- public/chainLogos/eth.svg | 1 + .../requirements/ChainIndicator.tsx | 16 ++++++++++++++++ src/components/requirements/DataBlock.tsx | 4 +--- src/components/ui/Badge.tsx | 2 +- src/config/chains.ts | 19 +++++++++++++++++++ .../requirements/ChainIndicator.stories.tsx | 17 +++++++++++++++++ 6 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 public/chainLogos/eth.svg create mode 100644 src/components/requirements/ChainIndicator.tsx create mode 100644 src/config/chains.ts create mode 100644 src/stories/requirements/ChainIndicator.stories.tsx diff --git a/public/chainLogos/eth.svg b/public/chainLogos/eth.svg new file mode 100644 index 0000000000..1f9ad00f9f --- /dev/null +++ b/public/chainLogos/eth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/requirements/ChainIndicator.tsx b/src/components/requirements/ChainIndicator.tsx new file mode 100644 index 0000000000..bcc6d464da --- /dev/null +++ b/src/components/requirements/ChainIndicator.tsx @@ -0,0 +1,16 @@ +import { Badge } from "@/components/ui/Badge"; +import { CHAINS } from "@/config/chains"; +import type { Register } from "wagmi"; + +export const ChainIndicator = ({ + chain, +}: { chain: Register["config"]["chains"][number]["id"] }) => ( + + {CHAINS[chain].name} + {CHAINS[chain].name} + +); diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx index a752611585..6411a06eaf 100644 --- a/src/components/requirements/DataBlock.tsx +++ b/src/components/requirements/DataBlock.tsx @@ -12,7 +12,7 @@ type Props = { error?: string; }; -const DataBlock = ({ +export const DataBlock = ({ isLoading, error, children, @@ -38,5 +38,3 @@ const DataBlock = ({ ); }; - -export { DataBlock }; diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx index 10a0e1b0fd..f81b6a5e8d 100644 --- a/src/components/ui/Badge.tsx +++ b/src/components/ui/Badge.tsx @@ -7,7 +7,7 @@ export const badgeVariants = cva( { variants: { size: { - sm: "text-xs h-5", + sm: "text-xs h-5 gap-1", md: "text-sm h-6", lg: "text-base h-8", }, diff --git a/src/config/chains.ts b/src/config/chains.ts new file mode 100644 index 0000000000..71f2a3b953 --- /dev/null +++ b/src/config/chains.ts @@ -0,0 +1,19 @@ +import { mainnet, sepolia } from "viem/chains"; +import type { Register } from "wagmi"; + +export const CHAINS = { + [mainnet.id]: { + name: mainnet.name, + icon: "/chainLogos/eth.svg", + }, + [sepolia.id]: { + name: sepolia.name, + icon: "/chainLogos/eth.svg", + }, +} satisfies Record< + Register["config"]["chains"][number]["id"], + { + name: string; + icon: string; + } +>; diff --git a/src/stories/requirements/ChainIndicator.stories.tsx b/src/stories/requirements/ChainIndicator.stories.tsx new file mode 100644 index 0000000000..a032a29bdf --- /dev/null +++ b/src/stories/requirements/ChainIndicator.stories.tsx @@ -0,0 +1,17 @@ +import { ChainIndicator } from "@/components/requirements/ChainIndicator"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/ChainIndicator", + component: ChainIndicator, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + chain: 1, + }, +}; From b6bea92dd9ddb47a38c935fab0155c430901d1c7 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 10:51:57 +0100 Subject: [PATCH 03/14] feat: simplify the DataBlock component --- src/components/requirements/DataBlock.tsx | 30 ++++++------------- .../requirements/DataBlock.stories.tsx | 22 ++++---------- 2 files changed, 14 insertions(+), 38 deletions(-) diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx index 6411a06eaf..573fc270ab 100644 --- a/src/components/requirements/DataBlock.tsx +++ b/src/components/requirements/DataBlock.tsx @@ -1,9 +1,4 @@ import { Skeleton } from "@/components/ui/Skeleton"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/Tooltip"; import { Warning } from "@phosphor-icons/react/dist/ssr"; import type { PropsWithChildren } from "react"; @@ -20,21 +15,14 @@ export const DataBlock = ({ if (isLoading) return ; return ( - - - - {error && ( - - )} - {children} - - - -

{error}

- - + + {error && ( + + )} + {children} + ); }; diff --git a/src/stories/requirements/DataBlock.stories.tsx b/src/stories/requirements/DataBlock.stories.tsx index 825d267e97..83762cc5aa 100644 --- a/src/stories/requirements/DataBlock.stories.tsx +++ b/src/stories/requirements/DataBlock.stories.tsx @@ -1,19 +1,16 @@ import { DataBlock } from "@/components/requirements/DataBlock"; import { Card } from "@/components/ui/Card"; -import { TooltipProvider } from "@/components/ui/Tooltip"; import type { Meta, StoryObj } from "@storybook/react"; const meta: Meta = { title: "Requirement building blocks/DataBlock", component: DataBlock, decorators: (Story) => ( - - - {"This is a "} - - {" example"} - - + + {"This is a "} + + {" example"} + ), }; @@ -24,14 +21,5 @@ type Story = StoryObj; export const Default: Story = { args: { children: "DataBlock", - error: "", - }, -}; - -export const ErrorState: Story = { - name: "Error state", - args: { - ...Default.args, - error: "An error occurred", }, }; From f3b52f104dfff7e4f74b2df59fc739542ff5b0ca Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 11:07:25 +0100 Subject: [PATCH 04/14] feat: DataBlockWithCopy component --- .../requirements/DataBlockWithCopy.tsx | 55 +++++++++++++++++++ .../DataBlockWithCopy.stories.tsx | 29 ++++++++++ 2 files changed, 84 insertions(+) create mode 100644 src/components/requirements/DataBlockWithCopy.tsx create mode 100644 src/stories/requirements/DataBlockWithCopy.stories.tsx diff --git a/src/components/requirements/DataBlockWithCopy.tsx b/src/components/requirements/DataBlockWithCopy.tsx new file mode 100644 index 0000000000..940d16a9bd --- /dev/null +++ b/src/components/requirements/DataBlockWithCopy.tsx @@ -0,0 +1,55 @@ +import { + Tooltip, + TooltipContent, + TooltipPortal, + TooltipTrigger, +} from "@/components/ui/Tooltip"; +import { Check } from "@phosphor-icons/react/dist/ssr"; +import { useClipboard } from "foxact/use-clipboard"; +import { useDebouncedState } from "foxact/use-debounced-state"; +import { type PropsWithChildren, useEffect } from "react"; +import { DataBlock } from "./DataBlock"; + +type Props = { + text: string; +}; + +export const DataBlockWithCopy = ({ + text, + children, +}: PropsWithChildren): JSX.Element => { + const { copied, copy } = useClipboard({ + timeout: 1500, + }); + + /** + * Maintaining a debounced copied state too, so we can change the tooltip content only after the tooltip is actually invisible + */ + + const [debouncedCopied, debouncilySetState] = useDebouncedState(copied, 200); + + useEffect(() => { + debouncilySetState(copied); + }, [debouncilySetState, copied]); + + const tooltipInCopiedState = copied || debouncedCopied; + + return ( + + copy(text)} className="rounded-md"> + + {children ?? text} + + + + + + {tooltipInCopiedState && ( + + )} + {tooltipInCopiedState ? "Copied" : "Click to copy"} + + + + ); +}; diff --git a/src/stories/requirements/DataBlockWithCopy.stories.tsx b/src/stories/requirements/DataBlockWithCopy.stories.tsx new file mode 100644 index 0000000000..897ad4f055 --- /dev/null +++ b/src/stories/requirements/DataBlockWithCopy.stories.tsx @@ -0,0 +1,29 @@ +import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy"; +import { Card } from "@/components/ui/Card"; +import { TooltipProvider } from "@/components/ui/Tooltip"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/DataBlockWithCopy", + component: DataBlockWithCopy, + decorators: (Story) => ( + + + {"This is a "} + + {" example"} + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: "DataBlockWithCopy", + text: "DataBlockWithCopy", + }, +}; From 7eff16fa66254d47426daa7ff2610508efd237ee Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 11:31:18 +0100 Subject: [PATCH 05/14] feat: Requirement compound component --- src/components/requirements/Requirement.tsx | 48 ++++++++++++++++++ .../requirements/Requirement.stories.tsx | 49 +++++++++++++++++++ 2 files changed, 97 insertions(+) create mode 100644 src/components/requirements/Requirement.tsx create mode 100644 src/stories/requirements/Requirement.stories.tsx diff --git a/src/components/requirements/Requirement.tsx b/src/components/requirements/Requirement.tsx new file mode 100644 index 0000000000..5066d2d651 --- /dev/null +++ b/src/components/requirements/Requirement.tsx @@ -0,0 +1,48 @@ +import { cn } from "@/lib/cssUtils"; +import type { PropsWithChildren } from "react"; + +export const Requirement = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
+ {children} +
+); + +export const RequirementImage = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
+ {children} +
+); + +export const RequirementContent = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
+ {children} +
+); + +export const RequirementFooter = ({ + className, + children, +}: PropsWithChildren<{ className?: string }>) => ( +
*]:mt-1", + className, + )} + > + {children} +
+); diff --git a/src/stories/requirements/Requirement.stories.tsx b/src/stories/requirements/Requirement.stories.tsx new file mode 100644 index 0000000000..f88813ad7e --- /dev/null +++ b/src/stories/requirements/Requirement.stories.tsx @@ -0,0 +1,49 @@ +import { ChainIndicator } from "@/components/requirements/ChainIndicator"; +import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy"; +import { + Requirement, + RequirementContent, + RequirementFooter, + RequirementImage, +} from "@/components/requirements/Requirement"; +import { Card } from "@/components/ui/Card"; +import { TooltipProvider } from "@/components/ui/Tooltip"; +import { QuestionMark } from "@phosphor-icons/react/dist/ssr"; +import type { Meta, StoryObj } from "@storybook/react"; + +const RequirementExample = () => ( + + + + + + +

+ {"Copy "} + + {" to your clipboard"} +

+ + + + + + + +); + +const meta: Meta = { + title: "Requirement building blocks/Requirement", + component: RequirementExample, + decorators: (Story) => ( + + + + ), +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; From 2c5717ff2f37c2b88425b2e43a8c2af6b589bcd8 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 11:52:42 +0100 Subject: [PATCH 06/14] feat: RequirementLink component --- src/components/SignInDialog.tsx | 4 ++-- .../requirements/RequirementLink.tsx | 18 ++++++++++++++++++ src/components/ui/Anchor.tsx | 2 +- src/stories/Anchor.stories.tsx | 6 +++--- .../requirements/Requirement.stories.tsx | 4 ++++ .../requirements/RequirementLink.stories.tsx | 18 ++++++++++++++++++ 6 files changed, 46 insertions(+), 6 deletions(-) create mode 100644 src/components/requirements/RequirementLink.tsx create mode 100644 src/stories/requirements/RequirementLink.stories.tsx diff --git a/src/components/SignInDialog.tsx b/src/components/SignInDialog.tsx index db34c3a5f7..f3bfc40c55 100644 --- a/src/components/SignInDialog.tsx +++ b/src/components/SignInDialog.tsx @@ -96,7 +96,7 @@ const WalletList = () => { {"By continuing, you agree to our "} setOpen(false)} > Privacy Policy @@ -104,7 +104,7 @@ const WalletList = () => { {" and "} setOpen(false)} > Terms of use diff --git a/src/components/requirements/RequirementLink.tsx b/src/components/requirements/RequirementLink.tsx new file mode 100644 index 0000000000..57d14f27d5 --- /dev/null +++ b/src/components/requirements/RequirementLink.tsx @@ -0,0 +1,18 @@ +import type { PropsWithChildren } from "react"; +import { Anchor } from "../ui/Anchor"; + +export const RequirementLink = ({ + href, + children, +}: PropsWithChildren<{ href: string }>) => ( + + {children} + +); diff --git a/src/components/ui/Anchor.tsx b/src/components/ui/Anchor.tsx index a712e42e15..11ead78fda 100644 --- a/src/components/ui/Anchor.tsx +++ b/src/components/ui/Anchor.tsx @@ -12,7 +12,7 @@ const anchorVariants = cva( variant: { default: "text-foreground hover:underline", highlighted: "text-blue-500 dark:text-blue-400 hover:underline", - muted: "text-muted-foreground hover:underline", + secondary: "text-foreground-secondary hover:underline", unstyled: "", }, }, diff --git a/src/stories/Anchor.stories.tsx b/src/stories/Anchor.stories.tsx index 0390308ceb..6032a0120f 100644 --- a/src/stories/Anchor.stories.tsx +++ b/src/stories/Anchor.stories.tsx @@ -35,11 +35,11 @@ export const Default: Story = { }, }; -export const Muted: Story = { +export const Secondary: Story = { args: { ...Default.args, - variant: "muted", - children: "Muted", + variant: "secondary", + children: "Secondary", }, argTypes: { ...Default.argTypes, diff --git a/src/stories/requirements/Requirement.stories.tsx b/src/stories/requirements/Requirement.stories.tsx index f88813ad7e..ce064e1b7c 100644 --- a/src/stories/requirements/Requirement.stories.tsx +++ b/src/stories/requirements/Requirement.stories.tsx @@ -6,6 +6,7 @@ import { RequirementFooter, RequirementImage, } from "@/components/requirements/Requirement"; +import { RequirementLink } from "@/components/requirements/RequirementLink"; import { Card } from "@/components/ui/Card"; import { TooltipProvider } from "@/components/ui/Tooltip"; import { QuestionMark } from "@phosphor-icons/react/dist/ssr"; @@ -26,6 +27,9 @@ const RequirementExample = () => ( + + View on explorer + diff --git a/src/stories/requirements/RequirementLink.stories.tsx b/src/stories/requirements/RequirementLink.stories.tsx new file mode 100644 index 0000000000..e701e8a6df --- /dev/null +++ b/src/stories/requirements/RequirementLink.stories.tsx @@ -0,0 +1,18 @@ +import { RequirementLink } from "@/components/requirements/RequirementLink"; +import type { Meta, StoryObj } from "@storybook/react"; + +const meta: Meta = { + title: "Requirement building blocks/RequirementLink", + component: RequirementLink, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + href: "https://polygonscan.com/token/0xff04820c36759c9f5203021fe051239ad2dcca8a", + children: "Guild Pin contract", + }, +}; From dcbf40c0ba6ed08873bd9943f9188188cb4f1eef Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 11:57:10 +0100 Subject: [PATCH 07/14] cleanup(DataBlock): remove unused stuff --- src/components/requirements/DataBlock.tsx | 25 +++-------------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx index 573fc270ab..77a56c16ab 100644 --- a/src/components/requirements/DataBlock.tsx +++ b/src/components/requirements/DataBlock.tsx @@ -1,28 +1,9 @@ -import { Skeleton } from "@/components/ui/Skeleton"; -import { Warning } from "@phosphor-icons/react/dist/ssr"; import type { PropsWithChildren } from "react"; -type Props = { - isLoading?: boolean; - error?: string; -}; - -export const DataBlock = ({ - isLoading, - error, - children, -}: PropsWithChildren): JSX.Element => { - if (isLoading) return ; - +export const DataBlock = ({ children }: PropsWithChildren): JSX.Element => { return ( - - {error && ( - - )} - {children} + + {children} ); }; From e1aa4a8df79e6fbecfc27f34236067f0ee87513a Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 12:04:38 +0100 Subject: [PATCH 08/14] cleanup: simplify DataBlock stories --- src/stories/requirements/DataBlock.stories.tsx | 8 -------- src/stories/requirements/DataBlockWithCopy.stories.tsx | 7 +------ 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/stories/requirements/DataBlock.stories.tsx b/src/stories/requirements/DataBlock.stories.tsx index 83762cc5aa..e277fe3657 100644 --- a/src/stories/requirements/DataBlock.stories.tsx +++ b/src/stories/requirements/DataBlock.stories.tsx @@ -1,17 +1,9 @@ import { DataBlock } from "@/components/requirements/DataBlock"; -import { Card } from "@/components/ui/Card"; import type { Meta, StoryObj } from "@storybook/react"; const meta: Meta = { title: "Requirement building blocks/DataBlock", component: DataBlock, - decorators: (Story) => ( - - {"This is a "} - - {" example"} - - ), }; export default meta; diff --git a/src/stories/requirements/DataBlockWithCopy.stories.tsx b/src/stories/requirements/DataBlockWithCopy.stories.tsx index 897ad4f055..672523e416 100644 --- a/src/stories/requirements/DataBlockWithCopy.stories.tsx +++ b/src/stories/requirements/DataBlockWithCopy.stories.tsx @@ -1,5 +1,4 @@ import { DataBlockWithCopy } from "@/components/requirements/DataBlockWithCopy"; -import { Card } from "@/components/ui/Card"; import { TooltipProvider } from "@/components/ui/Tooltip"; import type { Meta, StoryObj } from "@storybook/react"; @@ -8,11 +7,7 @@ const meta: Meta = { component: DataBlockWithCopy, decorators: (Story) => ( - - {"This is a "} - - {" example"} - + ), }; From 20286f60d3d6408f24fccb94e1417cbeec502e35 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 13:43:11 +0100 Subject: [PATCH 09/14] fix(DataBlockWithCopy): adjust height, add `"use client"` --- src/components/requirements/DataBlockWithCopy.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/requirements/DataBlockWithCopy.tsx b/src/components/requirements/DataBlockWithCopy.tsx index 940d16a9bd..7f8fb683fd 100644 --- a/src/components/requirements/DataBlockWithCopy.tsx +++ b/src/components/requirements/DataBlockWithCopy.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Tooltip, TooltipContent, @@ -36,7 +38,7 @@ export const DataBlockWithCopy = ({ return ( - copy(text)} className="rounded-md"> + copy(text)} className="rounded-md" asChild> {children ?? text} From 0ecff9ff3660eae4c6dbb08fbfa68a0be85d82c1 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 13:43:35 +0100 Subject: [PATCH 10/14] fix(Providers): add TooltipProvider --- src/components/Providers.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx index 6722b57a3a..4e3f8a2e22 100644 --- a/src/components/Providers.tsx +++ b/src/components/Providers.tsx @@ -7,6 +7,7 @@ import { Provider as JotaiProvider } from "jotai"; import { ThemeProvider } from "next-themes"; import type { FunctionComponent, PropsWithChildren } from "react"; import { WagmiProvider } from "wagmi"; +import { TooltipProvider } from "./ui/Tooltip"; const queryClient = new QueryClient(); @@ -21,12 +22,14 @@ export const Providers: FunctionComponent = ({ enableSystem disableTransitionOnChange > - - - {children} - - - + + + + {children} + + + + ); From a01ffb649b8e6c3c587f547376fe88118cfd745e Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 13:50:08 +0100 Subject: [PATCH 11/14] fix(DataBlockWithCopy): tooltip trigger --- src/components/requirements/DataBlock.tsx | 2 +- src/components/requirements/DataBlockWithCopy.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/requirements/DataBlock.tsx b/src/components/requirements/DataBlock.tsx index 77a56c16ab..cb9f1ad7c0 100644 --- a/src/components/requirements/DataBlock.tsx +++ b/src/components/requirements/DataBlock.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react"; export const DataBlock = ({ children }: PropsWithChildren): JSX.Element => { return ( - + {children} ); diff --git a/src/components/requirements/DataBlockWithCopy.tsx b/src/components/requirements/DataBlockWithCopy.tsx index 7f8fb683fd..90f57e5dc5 100644 --- a/src/components/requirements/DataBlockWithCopy.tsx +++ b/src/components/requirements/DataBlockWithCopy.tsx @@ -38,7 +38,10 @@ export const DataBlockWithCopy = ({ return ( - copy(text)} className="rounded-md" asChild> + copy(text)} + className="inline-flex rounded-md" + > {children ?? text} From b746210fc80f40bd975c390acd903e2638d24b80 Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 13:52:28 +0100 Subject: [PATCH 12/14] fix(DataBlockWithCopy): remove icon color --- src/components/requirements/DataBlockWithCopy.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/requirements/DataBlockWithCopy.tsx b/src/components/requirements/DataBlockWithCopy.tsx index 90f57e5dc5..cee1806e0b 100644 --- a/src/components/requirements/DataBlockWithCopy.tsx +++ b/src/components/requirements/DataBlockWithCopy.tsx @@ -49,9 +49,7 @@ export const DataBlockWithCopy = ({ - {tooltipInCopiedState && ( - - )} + {tooltipInCopiedState && } {tooltipInCopiedState ? "Copied" : "Click to copy"} From c46e396c3f5f98e1a9f5ba4ae59f4ad222c03bce Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 23:10:50 +0100 Subject: [PATCH 13/14] refactor: make a `SupportedChainID` type --- src/components/requirements/ChainIndicator.tsx | 7 ++----- src/config/chains.ts | 4 +++- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/requirements/ChainIndicator.tsx b/src/components/requirements/ChainIndicator.tsx index bcc6d464da..72953f0a4e 100644 --- a/src/components/requirements/ChainIndicator.tsx +++ b/src/components/requirements/ChainIndicator.tsx @@ -1,10 +1,7 @@ import { Badge } from "@/components/ui/Badge"; -import { CHAINS } from "@/config/chains"; -import type { Register } from "wagmi"; +import { CHAINS, type SupportedChainID } from "@/config/chains"; -export const ChainIndicator = ({ - chain, -}: { chain: Register["config"]["chains"][number]["id"] }) => ( +export const ChainIndicator = ({ chain }: { chain: SupportedChainID }) => ( ; + +export type SupportedChainID = Register["config"]["chains"][number]["id"]; From 6d25877e92198fd1fe0e91a8d35da3c2dc239aee Mon Sep 17 00:00:00 2001 From: BrickheadJohnny Date: Thu, 28 Nov 2024 23:13:36 +0100 Subject: [PATCH 14/14] fix(Button): adjust spacing for `sm` size --- src/components/ui/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 85917978cf..b59343d5da 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -32,7 +32,7 @@ const buttonVariants = cva( }, size: { xs: "h-6 px-2 text-xs gap-1", - sm: "h-8 px-3 text-sm", + sm: "h-8 px-3 text-sm gap-1", md: "h-11 px-4 py-2", lg: "h-12 px-6 py-4 text-lg", xl: "h-14 px-6 py-4 text-lg gap-2",