fix(client): NFT gating UI polish, config updates, and test fixes

- Update NFT protocol config components (Hats, Hypercert, POAP, Unlock)
- Polish NFTGatedWithdrawalSection with improved UX
- Update deployment config and supported networks
- Fix jar creation hook and token utils
- Add doc-links and blockchain constants
- Update tests for currency labels, token info, and jar transactions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Oba-One

client/__tests__/CurrencyLabel.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import type React from "react";
 import { vi } from "vitest";
+import { ETH_ADDRESS } from "@/lib/blockchain/constants";
 
 // CurrencyLabel component logic for testing
 const CurrencyLabel: React.FC<{
@@ -13,7 +14,7 @@ const CurrencyLabel: React.FC<{
 	formatAddress = (addr) => `${addr.slice(0, 6)}...${addr.slice(-4)}`,
 }) => {
 	if (!address) return null;
-	if (address === "0x0000000000000000000000000000000000000003")
+	if (address.toLowerCase() === ETH_ADDRESS.toLowerCase())
 		return <span>ETH</span>;
 
 	return <span>{tokenSymbol || formatAddress(address)}</span>;
@@ -26,9 +27,7 @@ describe("CurrencyLabel", () => {
 	});
 
 	it("renders ETH for ETH address", () => {
-		render(
-			<CurrencyLabel address="0x0000000000000000000000000000000000000003" />,
-		);
+		render(<CurrencyLabel address={ETH_ADDRESS} />);
 		expect(screen.getByText("ETH")).toBeInTheDocument();
 	});
 
@@ -55,7 +54,7 @@ describe("CurrencyLabel", () => {
 	it("handles different ETH address formats", () => {
 		render(
 			<CurrencyLabel
-				address="0x0000000000000000000000000000000000000003"
+				address={ETH_ADDRESS}
 				tokenSymbol="SHOULD_NOT_SHOW"
 			/>,
 		);

client/__tests__/TokenInfoHook.test.ts

@@ -1,9 +1,9 @@
 // Test for the token info resolution functionality
+import { ETH_ADDRESS } from "@/lib/blockchain/constants";
 
 describe("Token Info Hook Logic", () => {
 	// Mock the hook behavior for testing
 	const mockTokenInfo = (address: string, mockData: any) => {
-		const ETH_ADDRESS = "0x0000000000000000000000000000000000000003";
 		const _isERC20 = address && address !== ETH_ADDRESS;
 
 		if (address === ETH_ADDRESS) {
@@ -31,10 +31,7 @@ describe("Token Info Hook Logic", () => {
 
 	describe("Token Info Resolution", () => {
 		it("returns ETH info for ETH address", () => {
-			const result = mockTokenInfo(
-				"0x0000000000000000000000000000000000000003",
-				null,
-			);
+			const result = mockTokenInfo(ETH_ADDRESS, null);
 
 			expect(result).toEqual({
 				symbol: "ETH",

client/__tests__/hooks/jar/useJarTransactions.test.tsx

@@ -57,8 +57,8 @@ describe("useJarTransactions - Unit Tests", () => {
 			const validPurpose = "Team expenses for development work";
 			const invalidPurpose = "short";
 
-			expect(validPurpose.length).toBeGreaterThan(10);
-			expect(invalidPurpose.length).toBeLessThan(10);
+			expect(validPurpose.length).toBeGreaterThan(27);
+			expect(invalidPurpose.length).toBeLessThan(27);
 		});
 	});
 

client/__tests__/hooks/useJarCreation.test.ts

@@ -19,6 +19,7 @@ vi.mock("@/config/deployments.auto", () => ({
 }));
 
 import { useJarCreation } from "@/hooks/jar/useJarCreation";
+import { ETH_ADDRESS } from "@/lib/blockchain/constants";
 
 // Mock wagmi hooks
 vi.mock("wagmi", () => ({
@@ -98,17 +99,13 @@ describeOrSkip("useJarCreation", () => {
 		it("should use address(3) for ETH address", () => {
 			const { result } = renderHookWithProviders();
 
-			expect(result.current.ETH_ADDRESS).toBe(
-				"0x0000000000000000000000000000000000000003",
-			);
+			expect(result.current.ETH_ADDRESS).toBe(ETH_ADDRESS);
 		});
 
 		it("should initialize supportedCurrency with correct ETH address", () => {
 			const { result } = renderHookWithProviders();
 
-			expect(result.current.supportedCurrency).toBe(
-				"0x0000000000000000000000000000000000000003",
-			);
+			expect(result.current.supportedCurrency).toBe(ETH_ADDRESS);
 		});
 	});
 

client/__tests__/utils/ProtocolValidation.test.ts

@@ -263,10 +263,10 @@ describe("Protocol Validation Utilities", () => {
 					return { isValid: false, error: "Purpose is required" };
 				}
 
-				if (purpose.length < 10) {
+				if (purpose.length < 27) {
 					return {
 						isValid: false,
-						error: "Purpose must be at least 10 characters",
+						error: "Purpose must be at least 27 characters",
 					};
 				}
 

client/app/profile/page.tsx

@@ -38,6 +38,7 @@ import {
 	getExplorerAddressUrl,
 	getNetworkName,
 } from "@/lib/blockchain/networks";
+import { ETH_ADDRESS } from "@/lib/blockchain/token-utils";
 import { getAccessTypeName } from "@/lib/jar/access-types";
 
 export default function ProfilePage() {
@@ -253,8 +254,8 @@ function DesktopProfile() {
 													Currency:
 												</span>
 												<span className="text-[hsl(var(--cj-dark-brown))]">
-													{jar.currency ===
-													"0x0000000000000000000000000000000000000003"
+													{jar.currency?.toLowerCase() ===
+													ETH_ADDRESS.toLowerCase()
 														? `${nativeCurrency.symbol} (Native)`
 														: "ERC20"}
 												</span>

client/components/create/StepContent.tsx

@@ -127,7 +127,7 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 							</svg>
 						</Button>
 					</div>
-					<p className="text-sm text-gray-600 mt-1">
+					<p className="text-sm text-muted-foreground mt-1">
 						{formData.jarOwnerAddress &&
 						formData.jarOwnerAddress !==
 							"0x0000000000000000000000000000000000000000"
@@ -157,7 +157,7 @@ const BasicConfigStep: React.FC<{ formData: any }> = ({ formData }) => {
 								<SelectItem key={option.value} value={option.value}>
 									<div>
 										<div className="font-medium">{option.label}</div>
-										<div className="text-sm text-gray-600">
+										<div className="text-sm text-muted-foreground">
 											{option.description}
 										</div>
 									</div>
@@ -332,7 +332,7 @@ const WithdrawalSettingsStep: React.FC<{ formData: any }> = ({ formData }) => {
 							)}
 						/>
 						<Label htmlFor="strictPurpose" className="text-sm">
-							Require purpose description (minimum 20 characters)
+							Require purpose description (minimum 27 characters)
 						</Label>
 					</div>
 
@@ -381,6 +381,7 @@ const AccessControlStep: React.FC<{ formData: any }> = ({ formData }) => {
 			<ProtocolSelector
 				onConfigChange={formData.handleProtocolConfigChange}
 				initialConfig={formData.protocolConfig}
+				showViewToggle={false}
 			/>
 
 			{formData.accessType === AccessType.NFTGated && (

client/components/jar/AllowlistWithdrawalSection.tsx

@@ -13,6 +13,8 @@ import {
 	useTokenInfo,
 } from "@/lib/blockchain/token-utils";
 
+const PURPOSE_MIN_LENGTH = 27;
+
 interface AllowlistWithdrawalSectionProps {
 	config: any; // Ideally this would be more specifically typed
 	withdrawPurpose: string;
@@ -34,6 +36,7 @@ export const AllowlistWithdrawalSection: React.FC<
 	handleWithdrawAllowlist,
 	handleWithdrawAllowlistVariable,
 }) => {
+
 	// Get token information using the token utils
 	const { symbol: tokenSymbol, decimals: tokenDecimals } = useTokenInfo(
 		config?.currency || ETH_ADDRESS,
@@ -70,7 +73,7 @@ export const AllowlistWithdrawalSection: React.FC<
 						className="w-full bg-[#ff5e14] hover:bg-[#e54d00] text-white py-6 text-lg"
 						disabled={
 							!withdrawPurpose ||
-							withdrawPurpose.length < 10 ||
+							withdrawPurpose.length < PURPOSE_MIN_LENGTH ||
 							config.isWithdrawPending
 						}
 					>
@@ -210,7 +213,7 @@ export const AllowlistWithdrawalSection: React.FC<
 							!withdrawAmount ||
 							Number(withdrawAmount) <= 0 ||
 							!withdrawPurpose ||
-							withdrawPurpose.length < 10 ||
+							withdrawPurpose.length < PURPOSE_MIN_LENGTH ||
 							config.isWithdrawPending
 						}
 					>

client/components/jar/JarDepositSection.tsx

@@ -7,6 +7,7 @@ import { Input } from "@/components/ui/input";
 import { getNativeCurrency } from "@/config/supported-networks";
 import { useCookieJarConfig } from "@/hooks/jar/useJar";
 import { useJarTransactions } from "@/hooks/jar/useJarTransactions";
+import { ETH_ADDRESS } from "@/lib/blockchain/token-utils";
 
 export function JarDepositSection() {
 	const params = useParams();
@@ -27,6 +28,9 @@ export function JarDepositSection() {
 
 	if (!config) return null;
 
+	const isNativeCurrency =
+		config.currency?.toLowerCase() === ETH_ADDRESS.toLowerCase();
+
 	return (
 		<div className="space-y-6">
 			<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
@@ -61,7 +65,7 @@ export function JarDepositSection() {
 						id="fundAmount"
 						type="text"
 						placeholder={
-							config.currency === "0x0000000000000000000000000000000000000003"
+							isNativeCurrency
 								? `0.1 ${nativeCurrency.symbol}`
 								: `1${`.${"0".repeat(tokenDecimals > 0 ? 0 : tokenDecimals)}`} ${tokenSymbol || "Tokens"}`
 						}
@@ -81,7 +85,7 @@ export function JarDepositSection() {
 				</div>
 			</div>
 
-			{config.currency !== "0x0000000000000000000000000000000000000003" && (
+			{!isNativeCurrency && (
 				<div className="pt-2">
 					<p className="text-sm text-[#8b7355]">
 						Note: For ERC20 tokens, you&apos;ll need to approve the token