chore: pull components form storybook

apps/storybook/package.json

@@ -17,6 +17,9 @@
 	},
 	"dependencies": {
 		"@ethereumjs/rlp": "^5.0.2",
+		"@geist/domain": "workspace:*",
+		"@geist/graphql": "workspace:*",
+		"@geist/ui-react": "workspace:*",
 		"@hookform/resolvers": "^3.9.0",
 		"@ipld/dag-ucan": "^3.4.0",
 		"@noble/ed25519": "2.1.0",
@@ -56,9 +59,6 @@
 		"@radix-ui/react-toggle": "^1.1.0",
 		"@radix-ui/react-toggle-group": "^1.0.4",
 		"@radix-ui/react-tooltip": "^1.1.2",
-		"@geist/domain": "workspace:*",
-		"@geist/graphql": "workspace:*",
-		"@geist/ui-react": "workspace:*",
 		"@scure/base": "^1.1.9",
 		"@storybook/components": "^8.3.6",
 		"@storybook/icons": "^1.2.12",
@@ -77,13 +77,13 @@
 		"embla-carousel-react": "^8.3.0",
 		"ethers": "^6.13.2",
 		"happy-dom": "^15.11.6",
-		"jotai": "^2.10.0",
 		"jsdom": "^25.0.1",
 		"ky": "^1.7.2",
 		"lodash": "^4.17.21",
 		"lucide-react": "^0.446.0",
 		"micro-packed": "^0.6.3",
 		"multiformats": "^13.3.0",
+		"nanostores": "0.11.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-dropzone": "^14.2.9",

apps/storybook/src/stories/attestations/AttestationFormWagmi.stories.tsx

@@ -1,78 +1,12 @@
-import { AttestationForm } from "@geist/ui-react/components/attestations/attestation-form";
-import { useAttestation } from "@geist/ui-react/hooks/eas/use-attestation";
-import {
-	SCHEMA_BY_NAME,
-	SCHEMA_FIXTURE_IS_A_FRIEND,
-} from "@geist/ui-react/lib/eas/attest.fixture";
-import type { AttestationRequestData } from "@geist/ui-react/lib/eas/viem/onchain";
+import { AttestationFormWagmi } from "@geist/ui-react/components/attestations/attestation-form-wagmi";
+import { SCHEMA_BY_NAME } from "@geist/ui-react/lib/eas/attest.fixture";
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-	type Account,
-	type Address,
-	type Chain,
-	type Hex,
-	stringToHex,
-	zeroHash,
-} from "viem";
+import { type Chain, type Hex, stringToHex, zeroHash } from "viem";
 import { sepolia } from "viem/chains";
 import { withToaster } from "../decorators/toaster";
 import { withMockAccount, withWagmiProvider } from "../decorators/wagmi";
 import { withWalletControlWagmi } from "../decorators/wallet-control";
 
-const AttestationFormWagmi = ({
-	schemaId,
-	schemaIndex,
-
-	account,
-	isOffchain,
-	schemaString,
-	chain,
-	data,
-	attestData,
-}: {
-	schemaId: string;
-	schemaIndex: string;
-	account: Account;
-	isOffchain: boolean;
-	schemaString: string;
-	chain: Chain;
-	data: any;
-	attestData: Omit<AttestationRequestData, "recipient">;
-}) => {
-	if (!account) {
-		return;
-	}
-
-	console.log("schemaString", schemaString);
-
-	const { signAttestation } = useAttestation({
-		account,
-		isOffchain,
-		schemaId,
-		schemaString,
-		chain,
-	});
-
-	const recipient = "0xFD50b031E778fAb33DfD2Fc3Ca66a1EeF0652165" as Address;
-
-	return (
-		<AttestationForm
-			chainId={chain.id}
-			schemaId={schemaId}
-			schemaIndex={schemaIndex}
-			isOffchain={isOffchain}
-			signAttestation={async () =>
-				signAttestation({
-					...attestData,
-					data,
-					recipient,
-					// attester: account.address,
-				})
-			}
-		/>
-	);
-};
-
 const meta = {
 	title: "Attestations/AttestationFormWagmi",
 	component: AttestationFormWagmi,

apps/storybook/src/stories/codec/CodecForm.stories.tsx

@@ -1,6 +1,7 @@
+import { CodecForm } from "@geist/ui-react/components/codec/CodecForm";
 import type { Meta, StoryObj } from "@storybook/react";
-import { atom } from "jotai";
-import { CodecForm } from "./CodecForm";
+
+import { map } from "nanostores";
 
 const meta = {
 	title: "Codec/Multibase",
@@ -18,15 +19,19 @@ type Story = StoryObj<typeof meta>;
 
 export const Multibase64: Story = {
 	args: {
-		inputAtom: atom(""),
-		codecAtom: atom("multibase64"),
+		$codec: map({
+			input: "",
+			codec: "multibase64",
+		}),
 	},
 };
 
 export const Multibase16: Story = {
 	args: {
-		inputAtom: atom(""),
-		codecAtom: atom("multibase16"),
+		$codec: map({
+			input: "",
+			codec: "multibase16",
+		}),
 	},
 };
 

apps/storybook/src/stories/signature/SignatureForm.stories.tsx

@@ -1,18 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { type Atom, atom, useAtom } from "jotai";
 
 import { TYPED_DATA } from "@geist/domain/signature/type-data";
 import { SignatureForm } from "@geist/ui-react/components/signature/signature-form";
-import { useMemo } from "react";
-import {
-	http,
-	type Account,
-	createPublicClient,
-	createWalletClient,
-	verifyMessage,
-} from "viem";
-import { sepolia } from "viem/chains";
-import { useSignMessage } from "wagmi";
+
+import { http, type Account } from "viem";
 import { withMockAccount, withWagmiProvider } from "../decorators/wagmi";
 
 import {
@@ -22,134 +13,30 @@ import {
 } from "@geist/domain/signature/sign";
 import { ScrollableCodeBlock } from "@geist/ui-react/components/scrollable-code-block";
 import { SignatureVerifyBadge } from "@geist/ui-react/components/signature/signature-verify-badge";
+import { useSignWagmi } from "@geist/ui-react/hooks/signature/use-sign-wagmi";
+import { type MapStore, map } from "nanostores";
 
 const { types, primaryType, domain } = TYPED_DATA;
 
-// TODO wagmi style
-type UseSignReturnType = {
-	isReady: boolean;
-	messageToVerify?: any;
-	signature?: any;
-	signMessage?: (message: Hex) => Promise<Hex>;
-	verifySignature?: (args: { address: Hex; message: any }) => Promise<boolean>;
-};
-
-const useSign = ({
-	account,
-	signType,
-	messageAtom,
-	signatureAtom,
-}: {
-	account: Account | undefined;
-	signType: SignType;
-	messageAtom: Atom<string>;
-	signatureAtom: Atom<Hex>;
-}): UseSignReturnType => {
-	if (!account) {
-		return {
-			isReady: false,
-		};
-	}
-	// temp workaround before account hoisting
-	const walletClient = createWalletClient({
-		account,
-		chain: sepolia,
-		transport: http(),
-	});
-
-	const publicClient = createPublicClient({
-		chain: sepolia,
-		transport: http(),
-	});
-
-	const [message] = useAtom(messageAtom);
-	const [signature] = useAtom(signatureAtom);
-	const { signMessageAsync } = useSignMessage();
-
-	// type satisfies TypedData here
-	const { messageToVerify, typedData } = useMemo(() => {
-		const messageToVerify =
-			signType === SignType.EIP191
-				? message
-				: {
-						...TYPED_DATA.message,
-						contents: message,
-					};
-
-		const typedData = {
-			types,
-			primaryType,
-			domain,
-			message: messageToVerify,
-		};
-		return {
-			messageToVerify,
-			typedData,
-		};
-	}, [signType, account, message]);
-
-	const signMessage = async (message: Hex) => {
-		if (signType === SignType.EIP712) {
-			return walletClient.signTypedData(typedData as any);
-		}
-		return await signMessageAsync({
-			account,
-			message,
-		});
-	};
-
-	const verifySignature = async ({
-		address,
-		message,
-	}: {
-		address: Hex;
-		message: any;
-	}) => {
-		if (signType === SignType.EIP712) {
-			return publicClient.verifyTypedData({
-				address,
-				domain,
-				types,
-				primaryType,
-				message,
-				signature,
-			} as any);
-		}
-		return verifyMessage({
-			address,
-			message,
-			signature,
-		});
-	};
-
-	return {
-		isReady: true,
-		messageToVerify,
-		signature,
-		signMessage,
-		verifySignature,
-	} satisfies UseSignReturnType;
-};
-
 const SignatureFormWagmi = ({
 	account,
 	signType,
-	messageAtom,
-	signatureAtom,
+	$input,
 	signAccountType = SignAccountType.EOA,
 }: {
 	account?: Account;
 	signType: SignType;
-	messageAtom: ReturnType<typeof atom<string>>;
-	signatureAtom: ReturnType<typeof atom<Hex>>;
+	$input: MapStore<{
+		message: string;
+		signature: Hex;
+	}>;
 	signAccountType?: SignAccountType;
 }) => {
 	const { signMessage, verifySignature, messageToVerify, signature, isReady } =
-		useSign({
+		useSignWagmi({
 			account,
 			signType,
-			messageAtom,
-			signatureAtom,
+			$input,
 		});
 
 	return (
@@ -158,8 +45,7 @@ const SignatureFormWagmi = ({
 				Type: {signType} - {signAccountType}
 				{signMessage && (
 					<SignatureForm
-						messageAtom={messageAtom}
-						signatureAtom={signatureAtom}
+						$input={$input}
 						signMessage={async (message: Hex) => {
 							return signMessage(message);
 						}}
@@ -202,12 +88,16 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const initInput = {
+	message: "",
+	signature: "" as Hex,
+};
+
 export const Wagmi: Story = {
 	args: {
 		signType: SignType.EIP191,
 		signAccountType: SignAccountType.EOA,
-		messageAtom: atom(""),
-		signatureAtom: atom("" as Hex),
+		$input: map(initInput),
 	},
 	decorators: [withMockAccount(), withWagmiProvider()],
 };
@@ -216,8 +106,7 @@ export const EIP712EOAWagmi: Story = {
 	args: {
 		signType: SignType.EIP712,
 		signAccountType: SignAccountType.EOA,
-		messageAtom: atom(""),
-		signatureAtom: atom("" as Hex),
+		$input: map(initInput),
 	},
 	decorators: [withMockAccount(), withWagmiProvider()],
 };