+
) =>
+ setEnsName(
+ event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')
+ )
+ }
+ className="placeholder:text-muted-foreground/50 focus-visible:ring-primary/30 relative z-10 h-16 w-full rounded-[11px] border-0 bg-transparent px-6 pr-20 text-xl transition-colors focus-visible:ring-1 md:text-2xl"
/>
-
-
-
) =>
- setEnsName(
- event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')
- )
- }
- onFocus={() => setIsFocused(true)}
- onBlur={() => setIsFocused(false)}
- className="border-border/50 bg-background/80 placeholder:text-muted-foreground/80 h-16 w-full rounded-xl px-6 pr-20 text-xl shadow-xl backdrop-blur-xl transition-all focus-visible:border-transparent focus-visible:ring-0 md:text-2xl"
- />
-
-
- .eth
-
-
+
+
+ .eth
+
)
diff --git a/src/components/ens-name-checker/EnsNameChecker.tsx b/src/components/ens-name-checker/EnsNameChecker.tsx
index 569a398..9895a63 100644
--- a/src/components/ens-name-checker/EnsNameChecker.tsx
+++ b/src/components/ens-name-checker/EnsNameChecker.tsx
@@ -94,25 +94,28 @@ export function EnsNameChecker() {
const [ensName, setEnsName] = useState('')
return (
-
-
-
- {ready ? (
-
- ) : (
- {}}
- isAuthenticating={false}
- />
- )}
-
+
+
+ {!ensName && (
+
+ Type a name to check .eth availability
+
+ )}
+ {ready ? (
+
+ ) : (
+
{}}
+ isAuthenticating={false}
+ />
+ )}
)
}
diff --git a/src/components/ens-name-checker/EnsStatus.tsx b/src/components/ens-name-checker/EnsStatus.tsx
index 9121feb..4cb09c3 100644
--- a/src/components/ens-name-checker/EnsStatus.tsx
+++ b/src/components/ens-name-checker/EnsStatus.tsx
@@ -26,7 +26,7 @@ export function EnsStatus({
isAuthenticating,
}: EnsStatusProps) {
return (
-
+
0 ? 'mt-4' : ''}>
{normalizedName && isValidEnsName(ensName) && (
{isLoading ? (
@@ -89,7 +89,7 @@ export function EnsStatus({
>
) : (
<>
- Proceed to setup
+ Register
>
)}
diff --git a/src/style.css b/src/style.css
index e1db8a4..7c7a803 100644
--- a/src/style.css
+++ b/src/style.css
@@ -227,6 +227,40 @@
}
}
+@property --ens-border-angle {
+ syntax: '
';
+ inherits: false;
+ initial-value: 0deg;
+}
+
+@keyframes ens-border-orbit {
+ to {
+ --ens-border-angle: 360deg;
+ }
+}
+
+.ens-input-shell {
+ border: 1px solid transparent;
+ background:
+ linear-gradient(var(--card), var(--card)) padding-box,
+ conic-gradient(
+ from var(--ens-border-angle),
+ var(--border) 0deg,
+ var(--border) 280deg,
+ var(--primary) 312deg,
+ var(--border) 344deg,
+ var(--border) 360deg
+ )
+ border-box;
+ animation: ens-border-orbit 4.5s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .ens-input-shell {
+ animation: none;
+ }
+}
+
.animate-blob {
animation: blob 7s infinite;
}