chore: initial cursor ai rules

.cursorrules

@@ -0,0 +1,59 @@
+You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria.
+
+GENERAL RULES
+
+- Your responses should be concise, straightforward, and highly technical, focusing on accurate and applicable TypeScript code examples.
+- Always use a functional declarative approach, avoid classes.
+- Prefer iteration and modularization over duplication.
+- When naming variables, be descriptive and use auxiliary verbs such as `does`, `has`, `is`, and `should`. For example, `isDisabled`, `isLoading`.
+- Use lowercase with dash separators for directories and names, e.g., `components/auth-wizard`.
+- Favor named exports over default exports in components.
+- Favor Receive an Object, Return an Object (RORO) pattern.
+
+JAVASCRIPT RULES
+
+- Utilize the "function" keyword for defining pure functions and avoid semicolons at the end of statements.
+- Use TypeScript for all code generations, adhering to functional programming principles.
+- Favor TypeScript interface over type and avoid TypeScript enums, use maps instead.
+- Prefer the following code order in your files:
+  - Exported Function component
+  - Subcomponents
+  - Helper functions
+  - Static content variables
+  - TypeScript types
+
+NEXTJS RULES
+
+- Always use functional React components and TypeScript interfaces.
+- Always use a declarative approach in JSX.
+- Never use const for React components, only function.
+- Always use Shadcn UI, Radix, and CSS Aria APIs. Shadcn UI inherits APIs from Radix and extends its functionality.
+- ALWAYS use Next.js 14 App Router.
+- ALWAYS use Wagmi v2.
+- ALWAYS use Viem v2.
+- ALWAYS use Tailwind CSS and Tailwind Aria.
+- Always put static content and TypeScript interfaces at the end of the file.
+- Always use content variables for static content outside the render function of React components.
+- Always use React components for dynamic content inside the render function of React components.
+- Avoid 'use client', 'useEffect', 'setState' when possible, favor Tailwind Aria and Radix UI APIs exposed on Shadcn UI components.
+- Always use Zod for form validation, import relevant Zod schemas before duplicating.
+- Always wrap client components around a Suspense tag with fallback.
+- Always use dynamic loading for components that are not relevant on the first print.
+- Always set priority=1 to the largest image on the first print.
+- Always use WebP extension and provide image size data set, lazy load all images not relevant on the first page print.
+
+MONOREPO APPS for additional information
+
+Faucet (/apps/faucet)
+The Faucet application serves as a utility for distributing test tokens or currencies in a blockchain network. It is typically used in test environments to provide developers and users with a means to obtain tokens for testing purposes.
+
+Indexer (/apps/indexer)
+The Indexer application is responsible for indexing blockchain data. It listens to the blockchain network, extracts relevant data from blocks, transactions, and events, and stores it in a structured format for easy querying and analysis.
+
+Supabase (/apps/supabase)
+This application integrates with Supabase, a scalable and open-source Firebase alternative, providing real-time database functionality, authentication, storage, and more. It's designed to leverage Supabase services for backend functionalities.
+
+For more database schema details, refer to the Database Schema diagram.
+
+Webapp (/apps/webapp)
+The Webapp is a front-end application that provides a user interface for interacting with the project's services. It includes features such as displaying blockchain data, interacting with smart contracts, and utilizing the Faucet for test tokens.

apps/supabase/README.md

@@ -1,81 +1,17 @@
-# Supabase Integration Guide
+# Supabase 
 
-Welcome to the Supabase integration guide for the SmartEVM project. This document aims to provide developers with a clear and concise set of instructions for working with Supabase within our project environment. Supabase is a powerful, open-source Firebase alternative that offers database, authentication, and storage solutions, among other features. By adhering to these guidelines, we ensure a consistent and efficient development process.
-
-## Getting Started
-
-Before diving into the specifics of working with Supabase, ensure you have the following prerequisites met:
-
-- A Supabase account and project created at [Supabase.io](https://supabase.io/)
-- The latest version of [Node.js](https://nodejs.org/) and [bun](https://bun.sh) installed
-- Access to the project's repository and the `apps/supabase` directory
-
-## Setting Up Your Local Environment
-
-1. Navigate to the `apps/supabase` directory in your terminal.
-2. Install the project dependencies by running `bun install`.
-3. Within the `apps/webapp` folder, make sure to do `vercel env pull .env` to pull the env vars or copy the `.env.example` file to `.env` and fill in your Supabase project credentials (URL and anonKey).
+This module encapsulates all supabase source code for schema defintions, migrations, automatic typescript generation and related functionalities. [Supabase.io](https://supabase.io/)
 
 ## Working with the Supabase Client
 
-The project utilizes two main Supabase clients: one for server-side operations and another for browser-based interactions. These clients are initialized with the project's Supabase URL and anonKey, which are securely stored in the project's configuration files.
-
-### Server-Side Client
-
-The server-side client is used for backend operations, such as fetching data from Supabase or performing server-side authentication. To use the server-side client, import the `createSupabaseServerClient` function from `apps/webapp/services/supabase/server.ts`.
-
-Example usage:
-
-```ts
-import { createSupabaseServerClient } from './services/supabase/server'
-
-async function fetchData() {
-  const supabase = await createSupabaseServerClient()
-  const { data, error } = await supabase
-    .from('your_table')
-    .select('*')
-
-  if (error) throw error
-  return data
-}
-```
-
-## Browser Client
-
-For client-side operations, such as fetching data in a React component, use the getSupabaseBrowserClient function from apps/webapp/services/supabase/client.ts.
-
-Example usage:
-
-```ts
-import { getSupabaseBrowserClient } from './services/supabase/client'
-
-function useData() {
-  const supabase = getSupabaseBrowserClient()
-  const [data, setData] = useState(null)
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const { data, error } = await supabase
-        .from('your_table')
-        .select('*')
-      if (error) console.error(error)
-      else setData(data)
-    }
-
-    fetchData()
-  }, [])
-
-  return data
-}
-```
-
-## Building The Typescript Code
+The project utilizes two main Supabase clients: one for server-side operations and another for browser-based interactions. These clients are initialized with the project's Supabase URL and anonKey, which are securely stored in the project's configuration files. See [webapp/services/supabase](https://github.com/smartevm/smartevm/blob/main/apps/webapp/services/supabase) for more details.
 
-To build the Supabase typescript code, run the following command:
+## Scripts
 
-```bash
-bun run build
-```
+- Generate typescript types `bun run types`
+- Generate zod schemas `bun run schemas`
+- Generate both with `bun run build`
+- Use supabase cli as for schema, migration, deployment, etc.
 
 ## Database Squema Diagram