Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@ordinalspractice
ordinalspractice committed Jan 17, 2025
1 parent 12d413f commit bb0ca67
Show file tree
Hide file tree
Showing 5 changed files with 152 additions and 162 deletions.
257 changes: 128 additions & 129 deletions www/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,141 +176,140 @@ function App() {
}

return (
<div className="app-container">
<header className="hero">
<div className="min-h-screen flex flex-col">
<header className="hero mt-[calc(var(--common-spacing)*7.5)]">
<h1 onClick={() => window.location.reload()}>bip322</h1>
</header>

<section className="grid grid-cols-2 gap-12 items-center">
<AnimatedContainer isExpanded={isSignFormVisible}>
<div
className={`absolute inset-0 w-full h-full transition-opacity duration-300 ${
!isSignFormVisible
? "opacity-0 pointer-events-none"
: "opacity-100"
}`}
>
{connected && address ? (
<SignMessageForm
address={address}
message={signMessageState.message}
signedData={signMessageState.signedData}
onMessageChange={(message) =>
setSignMessageState((prev) => ({ ...prev, message }))
}
onSign={handleMessageSign}
onReset={resetSignMessageForm}
onBack={handleDisconnect}
/>
) : (
<ConnectWalletForm
provider={provider}
hasWallet={hasWallet}
onConnect={handleConnect}
onDisconnect={() => {
handleDisconnect();
setIsSignFormVisible(false);
}}
/>
)}
</div>
<Button
className={`
h-[calc(var(--font-large)+3rem)] w-full
text-[length:var(--font-md)]
md:text-[length:var(--font-md)]
bg-[hsl(var(--light-1))] text-[hsl(var(--dark-1))]
[box-shadow:0_0_7px_#fff]
hover:bg-[hsl(var(--light-2))]
hover:text-[hsl(var(--dark-1))]
hover:[box-shadow:0_0_15px_3px_#fff]
rounded-xl
transition-all duration-300
[text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)]
hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3),0_0_18px_rgba(0,0,0,0.2)]
${
isSignFormVisible
? "opacity-0 pointer-events-none"
: "opacity-100"
}
`}
variant="ghost"
onClick={() => setIsSignFormVisible(true)}
>
sign
</Button>
</AnimatedContainer>
<main className="flex-1 px-4 py-8 flex items-center">
<div className="w-full max-w-7xl mx-auto">
<div className="grid grid-cols-12 gap-8 lg:gap-12">
<div className="col-span-12 md:col-start-3 md:col-span-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 min-h-[50vh]">
<div className="h-full flex items-center">
<div className="w-full">
<AnimatedContainer isExpanded={isSignFormVisible}>
<div className="w-full">
{connected && address ? (
<SignMessageForm
address={address}
message={signMessageState.message}
signedData={signMessageState.signedData}
onMessageChange={(message) =>
setSignMessageState((prev) => ({
...prev,
message,
}))
}
onSign={handleMessageSign}
onReset={resetSignMessageForm}
onBack={handleDisconnect}
/>
) : (
<ConnectWalletForm
provider={provider}
hasWallet={hasWallet}
onConnect={handleConnect}
onDisconnect={() => {
handleDisconnect();
setIsSignFormVisible(false);
}}
/>
)}
</div>
<Button
className={`
h-32 w-full
text-[length:var(--font-md)]
bg-[hsl(var(--light-1))] text-[hsl(var(--dark-1))]
hover:bg-[hsl(var(--light-2))] hover:text-[hsl(var(--dark-1))]
[box-shadow:0_0_7px_#fff]
hover:[box-shadow:0_0_15px_3px_#fff]
rounded-xl
transition-all duration-300
[text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)]
hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3),0_0_18px_rgba(0,0,0,0.2)]
`}
variant="ghost"
onClick={() => setIsSignFormVisible(true)}
>
sign
</Button>
</AnimatedContainer>
</div>
</div>

<AnimatedContainer isExpanded={isVerifyFormVisible}>
<div
className={`absolute inset-0 w-full h-full transition-opacity duration-300 ${
!isVerifyFormVisible
? "opacity-0 pointer-events-none"
: "opacity-100"
}`}
>
<VerifyForm
formData={verifyFormState}
verificationResult={verifyFormState.verificationResult}
onSubmit={handleVerification}
onInputChange={handleVerifyFormChange}
onReset={resetVerifyForm}
onBack={() => setIsVerifyFormVisible(false)}
/>
<div className="h-full flex items-center">
<div className="w-full">
<AnimatedContainer isExpanded={isVerifyFormVisible}>
<div className="w-full">
<VerifyForm
formData={verifyFormState}
verificationResult={
verifyFormState.verificationResult
}
onSubmit={handleVerification}
onInputChange={handleVerifyFormChange}
onReset={resetVerifyForm}
onBack={() => setIsVerifyFormVisible(false)}
/>
</div>
<Button
className={`
h-32 w-full
text-[length:var(--font-md)]
bg-[hsl(var(--light-1))] text-[hsl(var(--dark-1))]
hover:bg-[hsl(var(--light-2))] hover:text-[hsl(var(--dark-1))]
[box-shadow:0_0_10px_#fff]
hover:[box-shadow:0_0_20px_3px_#fff]
rounded-xl
transition-all duration-300
[text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)]
hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3),0_0_18px_rgba(0,0,0,0.2)]
`}
variant="ghost"
onClick={() => setIsVerifyFormVisible(true)}
>
verify
</Button>
</AnimatedContainer>
</div>
</div>
</div>
</div>
</div>
<Button
className={`
h-[calc(var(--font-large)+3rem)] w-full
text-[length:var(--font-md)]
md:text-[length:var(--font-md)]
bg-[hsl(var(--light-1))] text-[hsl(var(--dark-1))]
[box-shadow:0_0_10px_#fff]
hover:bg-[hsl(var(--light-2))]
hover:text-[hsl(var(--dark-1))]
hover:[box-shadow:0_0_20px_3px_#fff]
rounded-xl
transition-all duration-300
[text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2),0_0_12px_rgba(0,0,0,0.1)]
hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3),0_0_18px_rgba(0,0,0,0.2)]
${
isVerifyFormVisible
? "opacity-0 pointer-events-none"
: "opacity-100"
}
`}
variant="ghost"
onClick={() => setIsVerifyFormVisible(true)}
>
verify
</Button>
</AnimatedContainer>
</section>
</div>
</main>

<nav className="flex justify-between items-center absolute inset-x-0 bottom-28 py-18 mb-20">
<Button
asChild
variant="link"
className="text-[length:var(--font-small)]"
>
<a href="https://github.com/bitcoin/bips/blob/master/bip-0322.mediawiki">
bip
</a>
</Button>
<Button
asChild
variant="link"
className="text-[length:var(--font-small)]"
>
<a href="https://github.com/rust-bitcoin/bip322">github</a>
</Button>
<Button
asChild
variant="link"
className="text-[length:var(--font-small)]"
>
<a href="https://crates.io/crates/bip322">crate</a>
</Button>
</nav>
<footer className="py-8 mb-[calc(var(--common-spacing)*7.5)]">
<nav className="flex items-center w-full lg:w-[80vw] mx-auto">
<div className="w-full px-4 flex justify-between [&>*:not(:first-child)]:ml-8">
<Button
asChild
variant="link"
className="text-center lg:px-8 text-[length:var(--font-md)] lg:text-[length:var(--font-small)]"
>
<a href="https://github.com/bitcoin/bips/blob/master/bip-0322.mediawiki">
bip
</a>
</Button>
<Button
asChild
variant="link"
className="text-center lg:px-8 text-[length:var(--font-md)] lg:text-[length:var(--font-small)]"
>
<a href="https://github.com/rust-bitcoin/bip322">github</a>
</Button>
<Button
asChild
variant="link"
className="text-center lg:px-8 text-[length:var(--font-md)] lg:text-[length:var(--font-small)]"
>
<a href="https://crates.io/crates/bip322">crate</a>
</Button>
</div>
</nav>
</footer>
</div>
);
}
Expand Down
36 changes: 14 additions & 22 deletions www/src/components/AnimatedContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useRef, useEffect, useState } from "react";
import React from "react";

interface AnimatedContainerProps {
children: React.ReactNode;
Expand All @@ -9,30 +9,22 @@ const AnimatedContainer: React.FC<AnimatedContainerProps> = ({
children,
isExpanded,
}) => {
const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>;
const [height, setHeight] = useState("calc(var(--font-large) + 3rem)");

useEffect(() => {
const rafId = requestAnimationFrame(() => {
if (contentRef.current) {
const newHeight = contentRef.current?.scrollHeight;
setHeight(
isExpanded ? `${newHeight}px` : "calc(var(--font-large) + 3rem)"
);
}
});

return () => cancelAnimationFrame(rafId);
}, [isExpanded, children]);
const [formContent, button] = React.Children.toArray(children);

return (
<div
className="w-full transition-all duration-300 ease-in-out bg-primary/5 border-border/40 backdrop-blur rounded-xl"
style={{ height }}
>
<div ref={contentRef} className="relative w-full flex items-center">
{children}
<div className="w-full">
<div
className={`
w-full relative
transition-all duration-300 ease-in-out
bg-primary/5 border-border/40 backdrop-blur rounded-xl
${isExpanded ? "h-auto" : "h-0"}
overflow-hidden mb-0
`}
>
{formContent}
</div>
{isExpanded ? null : button}
</div>
);
};
Expand Down
5 changes: 2 additions & 3 deletions www/src/components/FormWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,11 @@ interface FormWrapperProps {
const FormWrapper = ({
children,
title,
className = "",
onBack,
onReset,
}: FormWrapperProps) => {
return (
<Card className={`bg-transparent border-0 shadow-none ${className}`}>
<Card className="bg-transparent border-0 shadow-none w-full">
{title && (
<CardHeader className="pb-6 relative">
<div className="flex items-center justify-center relative">
Expand All @@ -44,7 +43,7 @@ const FormWrapper = ({
</Button>
)
)}
<CardTitle className="font-mono font-normal text-[length:var(--font-small)] opacity-90 tracking-wider [text-shadow:var(--white-glow)]">
<CardTitle className="font-mono font-normal text-[length:var(--font-x-small)] opacity-90 tracking-wider [text-shadow:var(--white-glow)]">
{title}
</CardTitle>
</div>
Expand Down
9 changes: 6 additions & 3 deletions www/src/components/SignMessage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ const inputClass = `
disabled:opacity-100
disabled:cursor-pointer
transition-[all,box-shadow] duration-300
w-full
`;

const textareaClass = `
Expand All @@ -43,7 +44,7 @@ const textareaClass = `
text-[length:var(--font-x-small)]
md:text-[length:var(--font-x-small)]
px-4 py-4
min-h-[120px]
h-40
resize-none
border-[0.5px] border-white/80
rounded-xl
Expand All @@ -56,10 +57,11 @@ const textareaClass = `
disabled:opacity-100
disabled:cursor-pointer
transition-[all,box-shadow] duration-300
w-full
`;

const buttonClass = `
w-full h-auto
w-full
font-mono
border-[0.5px] border-white/80
hover:bg-white hover:text-black
Expand All @@ -70,6 +72,7 @@ const buttonClass = `
hover:[box-shadow:var(--white-glow-large)]
[text-shadow:0_0_4px_rgba(0,0,0,0.3),0_0_8px_rgba(0,0,0,0.2)]
hover:[text-shadow:0_0_6px_rgba(0,0,0,0.4),0_0_12px_rgba(0,0,0,0.3)]
py-8
`;

const SignMessageForm: React.FC<SignMessageFormProps> = ({
Expand All @@ -92,7 +95,7 @@ const SignMessageForm: React.FC<SignMessageFormProps> = ({
onReset={signedData ? onReset : undefined}
onBack={!signedData ? onBack : undefined}
>
<form onSubmit={handleSubmit} className="space-y-6">
<form onSubmit={handleSubmit} className="flex flex-col gap-6 h-full">
<Input
type="text"
id="connected-wallet"
Expand Down
Loading

0 comments on commit bb0ca67

Please sign in to comment.