diff --git a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/ColorInput.module.css b/apps/playground-web/src/app/connect/sign-in/components/ColorInput/ColorInput.module.css
deleted file mode 100644
index 678f4bcdfdb..00000000000
--- a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/ColorInput.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.ColorInput {
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-
- background-color: transparent;
- display: block;
- border: none;
- cursor: pointer;
- border-radius: 50%;
- flex-shrink: 0;
-}
-
-.ColorInput::-webkit-color-swatch {
- border-radius: 50%;
- border: none;
- padding: 0;
-}
-
-.ColorInput::-webkit-color-swatch-wrapper {
- border: none;
- border-radius: 50%;
- padding: 0;
-}
-
-.ColorInput::-moz-color-swatch {
- border-radius: 50%;
- border: none;
- padding: 0;
-}
diff --git a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx b/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
index 8905f2a14ef..77e0f79ac31 100644
--- a/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
+++ b/apps/playground-web/src/app/connect/sign-in/components/ColorInput/index.tsx
@@ -1,6 +1,11 @@
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import ColorPicker from "react-pick-color";
import { useDebouncedCallback } from "use-debounce";
import { cn } from "../../../../../lib/utils";
-import styles from "./ColorInput.module.css";
export function ColorInput(props: {
value: string;
@@ -8,18 +13,44 @@ export function ColorInput(props: {
onClick?: () => void;
className?: string;
}) {
- const debouncedOnChange = useDebouncedCallback((value) => {
+ const debouncedOnChange = useDebouncedCallback((value: string) => {
props.onChange(value);
}, 100);
return (
-
{
- debouncedOnChange(e.target.value);
- }}
- type="color"
- className={cn(styles.ColorInput, props.className)}
- value={props.value}
- />
+
+
+
+
+
+
+ debouncedOnChange(
+ `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s * 100)}%, ${Math.round(hsl.l * 100)}%)`,
+ )
+ }
+ theme={{
+ background: "hsl(var(--background))",
+ borderColor: "hsl(var(--border))",
+ borderRadius: "var(--radius)",
+ boxShadow: "var(--shadow)",
+ inputBackground: "hsl(var(--input))",
+ color: "hsl(var(--foreground))",
+ width: "300px",
+ }}
+ className="p-2"
+ />
+
+
);
}
diff --git a/apps/playground-web/src/components/ui/popover.tsx b/apps/playground-web/src/components/ui/popover.tsx
new file mode 100644
index 00000000000..8b6355dc66b
--- /dev/null
+++ b/apps/playground-web/src/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+ React.ElementRef
,
+ React.ComponentPropsWithoutRef
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+
+
+
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 124c0febf45..266b5e42ba8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -290,7 +290,7 @@ importers:
version: 2.5.4
tailwindcss-animate:
specifier: ^1.0.7
- version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3)))
+ version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3)))
thirdweb:
specifier: workspace:*
version: link:../../packages/thirdweb
@@ -414,7 +414,7 @@ importers:
version: 8.3.6(bufferutil@4.0.8)(utf-8-validate@5.0.10)
tailwindcss:
specifier: 3.4.14
- version: 3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ version: 3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
typescript:
specifier: 5.6.3
version: 5.6.3
@@ -436,6 +436,9 @@ importers:
'@radix-ui/react-label':
specifier: ^2.1.0
version: 2.1.0(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ '@radix-ui/react-popover':
+ specifier: ^1.1.2
+ version: 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
'@radix-ui/react-radio-group':
specifier: ^1.2.1
version: 1.2.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -487,6 +490,9 @@ importers:
react-dom:
specifier: 18.3.1
version: 18.3.1(react@18.3.1)
+ react-pick-color:
+ specifier: ^2.0.0
+ version: 2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
server-only:
specifier: ^0.0.1
version: 0.0.1
@@ -526,10 +532,10 @@ importers:
version: 8.4.47
tailwindcss:
specifier: 3.4.14
- version: 3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ version: 3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
tailwindcss-animate:
specifier: ^1.0.7
- version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3)))
+ version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3)))
typescript:
specifier: 5.6.3
version: 5.6.3
@@ -628,7 +634,7 @@ importers:
version: 2.5.4
tailwindcss-animate:
specifier: ^1.0.7
- version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3)))
+ version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3)))
thirdweb:
specifier: workspace:*
version: link:../../packages/thirdweb
@@ -695,7 +701,7 @@ importers:
version: 8.4.47
tailwindcss:
specifier: 3.4.14
- version: 3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ version: 3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
tsx:
specifier: ^4.19.1
version: 4.19.1
@@ -764,7 +770,7 @@ importers:
version: 2.5.4
tailwindcss-animate:
specifier: ^1.0.7
- version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3)))
+ version: 1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3)))
thirdweb:
specifier: workspace:*
version: link:../../packages/thirdweb
@@ -795,7 +801,7 @@ importers:
version: 8.4.47
tailwindcss:
specifier: 3.4.14
- version: 3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ version: 3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
typescript:
specifier: 5.6.3
version: 5.6.3
@@ -12111,6 +12117,12 @@ packages:
'@types/react':
optional: true
+ react-pick-color@2.0.0:
+ resolution: {integrity: sha512-GLYyUN1k60cxkrizqRDqfmCBNP6vJZDam5TfCMMxgxPjNul9zmunAZAJ8x9wy1yMb1NqMa/MI2np7oDQLCEbDg==}
+ peerDependencies:
+ react: '>=16.8.0'
+ react-dom: '>=16.8.0'
+
react-redux@9.1.2:
resolution: {integrity: sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==}
peerDependencies:
@@ -13252,6 +13264,9 @@ packages:
tinybench@2.9.0:
resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+ tinycolor2@1.6.0:
+ resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
+
tinyexec@0.3.0:
resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==}
@@ -24258,7 +24273,7 @@ snapshots:
dependencies:
fast-glob: 3.3.2
postcss: 8.4.47
- tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
eslint-scope@5.1.1:
dependencies:
@@ -28620,7 +28635,7 @@ snapshots:
camelcase-css: 2.0.1
postcss: 8.4.47
- postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3)):
+ postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3)):
dependencies:
lilconfig: 3.1.2
yaml: 2.5.1
@@ -29228,6 +29243,12 @@ snapshots:
- supports-color
- utf-8-validate
+ react-pick-color@2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ dependencies:
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ tinycolor2: 1.6.0
+
react-redux@9.1.2(@types/react@18.3.12)(react@18.3.1)(redux@5.0.1):
dependencies:
'@types/use-sync-external-store': 0.0.3
@@ -30476,11 +30497,11 @@ snapshots:
tailwind-merge@2.5.4: {}
- tailwindcss-animate@1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))):
+ tailwindcss-animate@1.0.7(tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))):
dependencies:
- tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ tailwindcss: 3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
- tailwindcss@3.4.14(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3)):
+ tailwindcss@3.4.14(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3)):
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2
@@ -30499,7 +30520,7 @@ snapshots:
postcss: 8.4.47
postcss-import: 15.1.0(postcss@8.4.47)
postcss-js: 4.0.1(postcss@8.4.47)
- postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@types/node@20.14.9)(typescript@5.6.3))
+ postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.39)(@types/node@20.14.9)(typescript@5.6.3))
postcss-nested: 6.2.0(postcss@8.4.47)
postcss-selector-parser: 6.1.2
resolve: 1.22.8
@@ -30669,6 +30690,8 @@ snapshots:
tinybench@2.9.0: {}
+ tinycolor2@1.6.0: {}
+
tinyexec@0.3.0: {}
tinyglobby@0.2.9: