diff --git a/www/src/App.tsx b/www/src/App.tsx index 7e5e5320..76ab3c12 100644 --- a/www/src/App.tsx +++ b/www/src/App.tsx @@ -1,12 +1,11 @@ -import { useEffect, useState } from "react"; +import { useState, useEffect } from "react"; import { useLaserEyes, MAGIC_EDEN, ProviderType } from "@omnisat/lasereyes"; import init, { verify } from "@/bip322.js"; import VerifyForm from "@/components/VerifyForm"; import ConnectWalletForm from "@/components/ConnectWallet"; import SignMessageForm from "@/components/SignMessage"; -import "@/index.css"; -import { Button } from "@/components/ui/button"; -import AnimatedContainer from "./components/AnimatedContainer"; +import AnimatedContainer from "@/components/AnimatedContainer"; +import { BaseButton } from "@/components/ui/base-button"; export interface SignMessageState { message: string; @@ -26,15 +25,12 @@ export interface VerifyFormState { function App() { const [isWasmInitialized, setWasmInitialized] = useState(false); - const [isSignFormVisible, setIsSignFormVisible] = useState(false); const [isVerifyFormVisible, setIsVerifyFormVisible] = useState(false); - const [signMessageState, setSignMessageState] = useState({ message: "", signedData: null, }); - const [verifyFormState, setVerifyFormState] = useState({ address: "", message: "", @@ -176,137 +172,93 @@ function App() { } return ( -
-
-

window.location.reload()}>bip322

+
+
+
+

window.location.reload()}>bip322

+
-
-
-
-
-
-
-
- -
- {connected && address ? ( - - setSignMessageState((prev) => ({ - ...prev, - message, - })) - } - onSign={handleMessageSign} - onReset={resetSignMessageForm} - onBack={handleDisconnect} - /> - ) : ( - { - handleDisconnect(); - setIsSignFormVisible(false); - }} - /> - )} -
- - -
+
+
+
+
+ +
+ {connected && address ? ( + + setSignMessageState((prev) => ({ + ...prev, + message, + })) + } + onSign={handleMessageSign} + onReset={resetSignMessageForm} + onBack={handleDisconnect} + /> + ) : ( + { + handleDisconnect(); + setIsSignFormVisible(false); + }} + /> + )}
+ setIsSignFormVisible(true)} + > + sign + + +
-
-
- -
- setIsVerifyFormVisible(false)} - /> -
- - -
+
+ +
+ setIsVerifyFormVisible(false)} + />
-
+ setIsVerifyFormVisible(true)} + > + verify + +
- diff --git a/www/src/bip322_bg.wasm b/www/src/bip322_bg.wasm index b23a3b80..5f8e9482 100644 Binary files a/www/src/bip322_bg.wasm and b/www/src/bip322_bg.wasm differ diff --git a/www/src/components/AnimatedContainer.tsx b/www/src/components/AnimatedContainer.tsx index d5522476..f1ecccd5 100644 --- a/www/src/components/AnimatedContainer.tsx +++ b/www/src/components/AnimatedContainer.tsx @@ -12,19 +12,22 @@ const AnimatedContainer: React.FC = ({ const [formContent, button] = React.Children.toArray(children); return ( -
-
- {formContent} +
+
+
+
+ {formContent} +
+
+ {isExpanded ? null : button}
- {isExpanded ? null : button}
); }; diff --git a/www/src/components/ConnectWallet.tsx b/www/src/components/ConnectWallet.tsx index 8a7e2329..9e9c2caa 100644 --- a/www/src/components/ConnectWallet.tsx +++ b/www/src/components/ConnectWallet.tsx @@ -1,10 +1,10 @@ -import { Button } from "@/components/ui/button"; import { ProviderType, SUPPORTED_WALLETS, WalletIcon, } from "@omnisat/lasereyes"; -import FormWrapper from "./FormWrapper"; +import FormWrapper from "@/components/FormWrapper"; +import { BaseButton } from "@/components/ui/base-button"; interface ConnectWalletFormProps { provider: string | null; @@ -14,60 +14,47 @@ interface ConnectWalletFormProps { onConnect: (walletName: ProviderType) => Promise; onDisconnect: () => void; } + const ConnectWalletForm = ({ hasWallet, onConnect, onDisconnect, }: ConnectWalletFormProps) => { - const baseButtonClass = ` - w-full h-auto - border border-white/80 - transition-[all,box-shadow] duration-300 - p-2 - hover:bg-white hover:text-black - [&_svg]:!w-10 [&_svg]:!h-10 - rounded-xl - [box-shadow:var(--white-glow)] - hover:[box-shadow:var(--white-glow-large)] - `; return ( -
+
{Object.values(SUPPORTED_WALLETS) .filter( (wallet) => wallet.name !== "op_net" && wallet.name !== "wizz" ) .map((wallet) => { - console.log(wallet); const isMissingWallet = !hasWallet[wallet.name]; return (
{isMissingWallet ? ( - + ) : ( - + + )}
); })}
+
); }; diff --git a/www/src/components/FormWrapper.tsx b/www/src/components/FormWrapper.tsx index e23eb713..23c15199 100644 --- a/www/src/components/FormWrapper.tsx +++ b/www/src/components/FormWrapper.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Button } from "@/components/ui/button"; import { ChevronLeft, RotateCcw } from "lucide-react"; +import { BaseButton } from "@/components/ui/base-button"; interface FormWrapperProps { children: React.ReactNode; @@ -20,36 +20,32 @@ const FormWrapper = ({ return ( {title && ( - +
{onReset ? ( - + ) : ( onBack && ( - + ) )} - + {title}
)} - {children} + + {children} + ); }; diff --git a/www/src/components/SignMessage.tsx b/www/src/components/SignMessage.tsx index b273d168..08b39bdf 100644 --- a/www/src/components/SignMessage.tsx +++ b/www/src/components/SignMessage.tsx @@ -1,8 +1,8 @@ import React from "react"; -import FormWrapper from "./FormWrapper"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Textarea } from "@/components/ui/textarea"; +import FormWrapper from "@/components/FormWrapper"; +import { BaseInput } from "@/components/ui/base-input"; +import { BaseButton } from "@/components/ui/base-button"; +import { BaseTextarea } from "@/components/ui/base-textarea"; interface SignMessageFormProps { address: string; @@ -18,63 +18,6 @@ interface SignMessageFormProps { onBack: () => void; } -const inputClass = ` - font-mono - text-white - text-[length:var(--font-x-small)] - md:text-[length:var(--font-x-small)] - px-4 py-8 - border-[0.5px] border-white/80 - rounded-xl - [box-shadow:var(--white-glow)] - hover:[box-shadow:var(--white-glow-large)] - focus-visible:[box-shadow:var(--white-glow-large)] - focus:[box-shadow:var(--white-glow-large)] - [text-shadow:var(--white-glow-small)] - disabled:text-white/60 - disabled:opacity-100 - disabled:cursor-pointer - transition-[all,box-shadow] duration-300 - w-full -`; - -const textareaClass = ` - font-mono - text-white - text-[length:var(--font-x-small)] - md:text-[length:var(--font-x-small)] - px-4 py-4 - h-40 - resize-none - border-[0.5px] border-white/80 - rounded-xl - [box-shadow:var(--white-glow)] - hover:[box-shadow:var(--white-glow-large)] - focus-visible:[box-shadow:var(--white-glow-large)] - focus:[box-shadow:var(--white-glow-large)] - [text-shadow:var(--white-glow-small)] - disabled:text-white/60 - disabled:opacity-100 - disabled:cursor-pointer - transition-[all,box-shadow] duration-300 - w-full -`; - -const buttonClass = ` - w-full - font-mono - border-[0.5px] border-white/80 - hover:bg-white hover:text-black - transition-[all,box-shadow,text-shadow] duration-300 - text-[length:var(--font-x-small)] - rounded-xl - [box-shadow:var(--white-glow)] - 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 = ({ address, message, @@ -95,37 +38,37 @@ const SignMessageForm: React.FC = ({ onReset={signedData ? onReset : undefined} onBack={!signedData ? onBack : undefined} > -
- + -