static site configuration and typing

.eslintrc.json

@@ -0,0 +1,11 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+    "react-hooks/exhaustive-deps": "warn"
+  }
+} 

.github/workflows/deploy.yml

@@ -0,0 +1,36 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main  # Set this to your default branch
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        env:
+          NEXT_PUBLIC_BASE_PATH: '/${{ github.event.repository.name }}'
+
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: out
+          branch: gh-pages 

README.md

@@ -1,36 +1,87 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# TACo Playground
 
-## Getting Started
+A visual interface for building and testing Threshold Access Control conditions.
 
-First, run the development server:
+## Features
+
+- Visual block-based condition builder
+- Live JSON preview
+- Encryption and decryption testing
+- Support for multiple condition types:
+  - Time-based conditions
+  - ERC20 token balance
+  - ERC721 token ownership
+  - ERC1155 token balance
+  - Native token (ETH) balance
+  - Custom contract calls
+  - Compound conditions (AND/OR)
+
+## Development
 
 ```bash
+# Install dependencies
+npm install
+
+# Run development server
 npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Building for Production
+
+This project is configured to build as a static site, which can be deployed to any static hosting service.
+
+```bash
+# Build the static site
+npm run build
+
+# The static site will be generated in the 'out' directory
+```
+
+## Deployment
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+After building, the contents of the `out` directory can be deployed to any static hosting service. Here are some examples:
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+### GitHub Pages
 
-## Learn More
+1. Push the repository to GitHub
+2. Enable GitHub Pages in your repository settings
+3. Set the source to the `gh-pages` branch
+4. Run these commands to deploy:
 
-To learn more about Next.js, take a look at the following resources:
+```bash
+# Create and switch to gh-pages branch
+git checkout -b gh-pages
+
+# Build the static site
+npm run build
+
+# Add the out directory to git
+git add out/ -f
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+# Commit the changes
+git commit -m "Deploy to GitHub Pages"
+
+# Push to GitHub
+git push origin gh-pages
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+### Netlify/Vercel
 
-## Deploy on Vercel
+1. Connect your repository to Netlify/Vercel
+2. Set the build command to `npm run build`
+3. Set the publish directory to `out`
+
+## Environment Variables
+
+When deploying to a subdirectory (like GitHub Pages), you may need to set the base path. Create a `.env.local` file:
+
+```env
+NEXT_PUBLIC_BASE_PATH=/your-repo-name
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Notes
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- The site requires a Web3 wallet (like MetaMask) to function
+- Supported networks: Ethereum, Polygon, Polygon Amoy, Sepolia
+- All encryption/decryption happens client-side
+- No server-side functionality is required

next.config.mjs

@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',  // Enable static exports
+  images: {
+    unoptimized: true, // Required for static export
+  },
+  basePath: process.env.NEXT_PUBLIC_BASE_PATH || '',
+};
+
+export default nextConfig; 

src/app/layout.tsx

@@ -6,14 +6,19 @@ const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
   title: "TACo Playground",
-  description: "Build and test threshold access control conditions",
+  description: "Build and test Threshold Access Control conditions",
+  metadataBase: new URL(
+    process.env.NEXT_PUBLIC_BASE_PATH 
+      ? `https://${process.env.VERCEL_URL}${process.env.NEXT_PUBLIC_BASE_PATH}`
+      : `https://${process.env.VERCEL_URL || 'localhost:3000'}`
+  ),
 };
 
 export default function RootLayout({
   children,
-}: {
-  children: React.ReactNode
-}) {
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
   return (
     <html lang="en" className="bg-gray-950">
       <body className={`${inter.className} bg-gray-950`}>

src/app/page.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import TacoPlayground from '../components/TacoPlayground';
+import dynamic from 'next/dynamic';
+
+// Use dynamic import to avoid hydration issues with Web3 components
+const TacoPlayground = dynamic(
+  () => import('../components/TacoPlayground'),
+  { ssr: false }
+);
 
 export default function Home() {
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <TacoPlayground />
-    </div>
-  );
+  return <TacoPlayground />;
 }

src/components/ConditionBuilder.tsx

@@ -5,9 +5,10 @@ import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import BlockPalette from './blocks/BlockPalette';
 import BlockWorkspace from './blocks/BlockWorkspace';
+import { TacoCondition } from '../types/taco';
 
 interface ConditionBuilderProps {
-  onConditionChange: (condition: any) => void;
+  onConditionChange: (condition: TacoCondition | null) => void;
 }
 
 const ConditionBuilder: React.FC<ConditionBuilderProps> = ({ onConditionChange }) => {

src/components/DecryptionPanel.tsx

@@ -1,20 +1,20 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { conditions, decrypt, domains, initialize } from '@nucypher/taco';
+import { conditions, decrypt, domains, initialize, ThresholdMessageKit } from '@nucypher/taco';
 import { EIP4361AuthProvider, USER_ADDRESS_PARAM_DEFAULT } from '@nucypher/taco-auth';
 import { ethers } from 'ethers';
 
 interface DecryptionPanelProps {
-  messageKit: any;
+  messageKit: ThresholdMessageKit | null;
   onError: (error: string) => void;
 }
 
 const DecryptionPanel: React.FC<DecryptionPanelProps> = ({ messageKit, onError }) => {
   const [decryptedMessage, setDecryptedMessage] = useState('');
   const [isDecrypting, setIsDecrypting] = useState(false);
   const [customCiphertext, setCustomCiphertext] = useState('');
-  const [activeMessageKit, setActiveMessageKit] = useState<any>(null);
+  const [activeMessageKit, setActiveMessageKit] = useState<ThresholdMessageKit | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
 
   // Initialize TACo when component mounts
@@ -48,9 +48,9 @@ const DecryptionPanel: React.FC<DecryptionPanelProps> = ({ messageKit, onError }
         return;
       }
       // Try to parse the input as a messageKit
-      const parsedMessageKit = JSON.parse(atob(text));
+      const parsedMessageKit = JSON.parse(atob(text)) as ThresholdMessageKit;
       setActiveMessageKit(parsedMessageKit);
-    } catch (e) {
+    } catch {
       setActiveMessageKit(null);
       onError('Invalid ciphertext format. Please provide a valid base64-encoded messageKit.');
     }
@@ -119,9 +119,9 @@ const DecryptionPanel: React.FC<DecryptionPanelProps> = ({ messageKit, onError }
       );
 
       setDecryptedMessage(new TextDecoder().decode(decrypted));
-    } catch (error: any) {
+    } catch (error) {
       console.error('Decryption error:', error);
-      onError(error.message || 'Failed to decrypt message');
+      onError(error instanceof Error ? error.message : 'Failed to decrypt message');
     } finally {
       setIsDecrypting(false);
     }