chore: august 2nd release [at TEST]

.cursorrules

@@ -1,70 +1,92 @@
 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.
+Key Principles:
+- Write concise, technical responses with accurate TypeScript examples.
+- Use functional, declarative programming. 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
-
-DEPENDENCY VERSIONS
-- ALWAYS use Next.js 14 App Router.
-- ALWAYS use Wagmi v2.
-- ALWAYS use Viem v2.
-
-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 responsive tailwind css best practices.
-- ALWAYS use Tailwind CSS and Tailwind Aria attribute to animate components.
-- 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.
-
-IMPORTANT CONVENTIONS
-
-1. Always rely on the NextJS app router for state changes: Use the App Router for state changes through SSR and hydration first, and server actions as a second option. For example, pagination, filtering, sorting, etc., should use URL parameters and SSR.
-
-2. Pay special attention to Web Vitals: LCP, CLS, and FID are the most critical metrics. Learn more about Web Vitals and NextJS: Core Web Vitals. This website uses Static Site Generation for all pages to improve the initial load time.
-
-3. Avoid 'use client' as much as possible: Use it as a last resort when there's no other option. Server components are the default in NextJS 14. Always use Next.js app router parameters to fetch data using Next.js SSR features and let Next.js hydrate the React view. Do not use 'use client' to fetch data and set state, as this can cause issues with refreshing your application's view state, and that component won't be hydrated by the Next.js app router. Instead, use 'use client' when you need to use Web APIs like the camera. NEVER use 'use client' to do things the way you typically would in a React app with Vite, as it defeats the purpose of using Next.js. When you 'use client', make sure it is within small components like a button or icons. Refer to the Data Fetching, Rendering, and Routing guides for more information.
-
-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.
+- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
+- Use lowercase with dashes for directories (e.g., components/auth-wizard).
+- Favor named exports for components.
+- Use the Receive an Object, Return an Object (RORO) pattern.
+
+JavaScript/TypeScript:
+- Use "function" keyword for pure functions. Omit semicolons.
+- Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
+- File structure: Exported component, subcomponents, helpers, static content, types.
+- Avoid unnecessary curly braces in conditional statements.
+- For single-line statements in conditionals, omit curly braces.
+- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
+- Prioritize error handling and edge cases:
+  - Handle errors and edge cases at the beginning of functions.
+  - Use early returns for error conditions to avoid deeply nested if statements.
+  - Place the happy path last in the function for improved readability.
+  - Avoid unnecessary else statements; use if-return pattern instead.
+  - Use guard clauses to handle preconditions and invalid states early.
+  - Implement proper error logging and user-friendly error messages.
+  - Consider using custom error types or error factories for consistent error handling.
+
+Dependencies:
+- Next.js 14 App Router
+- Wagmi v2
+- Viem v2
+
+React/Next.js:
+- Use functional components and TypeScript interfaces.
+- Use declarative JSX.
+- Use function, not const, for components.
+- Use Shadcn UI, Radix, and Tailwind Aria for components and styling.
+- Implement responsive design with Tailwind CSS.
+- Use mobile-first approach for responsive design.
+- Place static content and interfaces at file end.
+- Use content variables for static content outside render functions.
+- Minimize 'use client', 'useEffect', and 'setState'. Favor RSC.
+- Use Zod for form validation.
+- Wrap client components in Suspense with fallback.
+- Use dynamic loading for non-critical components.
+- Optimize images: WebP format, size data, lazy loading.
+- Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.
+- Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.
+- Use useActionState with react-hook-form for form validation.
+- Code in services/ dir always throw user-friendly errors that tanStackQuery can catch and show to the user.
+- Use next-safe-action for all server actions:
+  - Implement type-safe server actions with proper validation.
+  - Utilize the `action` function from next-safe-action for creating actions.
+  - Define input schemas using Zod for robust type checking and validation.
+  - Handle errors gracefully and return appropriate responses.
+  - Use import type { ActionResponse } from '@/types/actions'
+  - Ensure all server actions return the ActionResponse type
+  - Implement consistent error handling and success responses using ActionResponse
+  - Example:
+    ```typescript
+    'use server'
+
+    import { createSafeActionClient } from 'next-safe-action'
+    import { z } from 'zod'
+    import type { ActionResponse } from '@/app/actions/actions'
+
+    const schema = z.object({
+      value: z.string()
+    })
+
+    export const someAction = createSafeActionClient()
+      .schema(schema)
+      .action(async (input): Promise<ActionResponse> => {
+        try {
+          // Action logic here
+          return { success: true, data: /* result */ }
+        } catch (error) {
+          return { success: false, error: error instanceof AppError ? error : appErrors.UNEXPECTED_ERROR, }
+        }
+      })
+    ```
+
+
+Key Conventions:
+1. Rely on Next.js App Router for state changes.
+2. Prioritize Web Vitals (LCP, CLS, FID).
+3. Minimize 'use client' usage:
+   - Prefer server components and Next.js SSR features.
+   - Use 'use client' only for Web API access in small components.
+   - Avoid using 'use client' for data fetching or state management.
+
+Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices.

apps/webapp/.gitignore

@@ -38,3 +38,4 @@ yarn-error.log*
 .env*.local
 
 .vercel
+.env*.local

apps/webapp/app/(routes)/[lang]/about/about-bitlauncher/page.tsx

@@ -32,7 +32,7 @@ const content: AboutBitlauncherPageContent = {
   synergy that enables these startups to overcome funding barriers, accelerate their growth, and harness global resources.
 
   Our platform is built on a foundation of transparency, inclusivity, and community-driven progress. We foster a collaborative
-  environment where developers, investors, and AI enthusiasts can come together to share resources, exchange ideas, and shape 
+  environment where developers, contributors, and AI enthusiasts can come together to share resources, exchange ideas, and shape 
   the future of technology.`,
   image: {
     alt: 'dBoard',

apps/webapp/app/(routes)/[lang]/about/investors/page.tsx

@@ -1,8 +1,7 @@
-import React from 'react'
-import { Metadata } from 'next'
-import { CommonPageProps } from '@/types/routing.type'
-import { getDictionary } from '@/dictionaries'
 import { LandingPage, LandingPageContent } from '@/components/_wip/landing-page'
+import { getDictionary } from '@/dictionaries'
+import { CommonPageProps } from '@/types/routing.type'
+import { Metadata } from 'next'
 
 export default async function InvestorsPage({ params }: CommonPageProps) {
   const dict = await getDictionary(params.lang)
@@ -15,9 +14,9 @@ export default async function InvestorsPage({ params }: CommonPageProps) {
 
 const content: LandingPageContent = {
   title: 'Robust Vetting Process',
-  header: 'Invest with Confidence',
+  header: 'Contribute with Confidence',
   description:
-    'Our rigorous vetting process ensures only the most promising web3 and AI projects make it onto the Bitlauncher platform. This gives investors peace of mind and helps them capitalize on the best opportunities.',
+    'Our rigorous vetting process ensures only the most promising web3 and AI projects make it onto the Bitlauncher platform. This gives contributors peace of mind and helps them capitalize on the best opportunities.',
   sections: [
     {
       subHeader: 'Thorough Audits',
@@ -28,26 +27,26 @@ const content: LandingPageContent = {
       text: 'Our team of industry experts carefully evaluates each project to ensure it meets our high standards.'
     },
     {
-      subHeader: 'Investor Protection',
-      text: 'Rigorous vetting protects investors from scams and low-quality projects, giving them confidence in their investments.'
+      subHeader: 'Contributor Protection',
+      text: 'Rigorous vetting protects contributors from scams and low-quality projects, giving them confidence in their investments.'
     },
     {
       subHeader: 'Curated Opportunities',
-      text: 'Our platform showcases only the most promising web3 and AI projects, saving investors time and effort.'
+      text: 'Our platform showcases only the most promising web3 and AI projects, saving contributors time and effort.'
     },
     {
       subHeader: 'Transparent Reporting',
-      text: 'We provide detailed and transparent reporting on all projects, ensuring investors have all the information they need.'
+      text: 'We provide detailed and transparent reporting on all projects, ensuring contributors have all the information they need.'
     },
     {
       subHeader: 'Community Feedback Integration',
-      text: 'We incorporate feedback from our investor community to continuously improve the projects and the platform.'
+      text: 'We incorporate feedback from our contributor community to continuously improve the projects and the platform.'
     }
   ]
 }
 
 export const metadata: Metadata = {
-  title: 'Investors | Bitlauncher',
+  title: 'Contributors | Bitlauncher',
   description:
     'Be part of the intelligent future and join the Ai/Web3 revolution now!'
 }

apps/webapp/app/(routes)/[lang]/about/investors/sitemap.ts

@@ -6,7 +6,7 @@ export default async function sitemap({
 }: CommonPageProps): Promise<MetadataRoute.Sitemap> {
   return [
     {
-      url: `https://${process.env.VERCEL_URL}/${params.lang}/about/investors`,
+      url: `https://${process.env.VERCEL_URL}/${params.lang}/about/contributors`,
       lastModified: new Date()
     }
   ]

apps/webapp/app/(routes)/[lang]/layout.tsx

@@ -1,4 +1,31 @@
 import '@/app/globals.css'
+import {
+  FuturaPTBold,
+  FuturaPTBook,
+  FuturaPTDemi,
+  FuturaPTExtraBold,
+  FuturaPTHeavy,
+  FuturaPTLight,
+  FuturaPTMedium,
+  LufgaBlack,
+  LufgaBlackItalic,
+  LufgaBold,
+  LufgaBoldItalic,
+  LufgaExtraBold,
+  LufgaExtraBoldItalic,
+  LufgaExtraLight,
+  LufgaExtraLightItalic,
+  LufgaItalic,
+  LufgaLight,
+  LufgaLightItalic,
+  LufgaMedium,
+  LufgaMediumItalic,
+  LufgaRegular,
+  LufgaSemiBold,
+  LufgaSemiBoldItalic,
+  LufgaThin,
+  LufgaThinItalic,
+} from "@/assets/fonts/fonts"
 import Footer from '@/components/layout/footer/footer'
 import { Header } from '@/components/layout/header'
 import { Providers } from '@/components/layout/providers'
@@ -38,7 +65,10 @@ export default async function RootLayout({
       className={cn('tk-futura-pt max-w-full text-lg antialiased')}
       suppressHydrationWarning
     >
-      <body style={{ width: '100%', maxWidth: '100%' }}>
+      <body
+        style={{ width: '100%', maxWidth: '100%' }}
+        className={`${FuturaPTBook.variable} ${FuturaPTLight.variable} ${FuturaPTMedium.variable} ${FuturaPTDemi.variable} ${FuturaPTHeavy.variable} ${FuturaPTBold.variable} ${FuturaPTExtraBold.variable} ${LufgaRegular.variable} ${LufgaItalic.variable} ${LufgaThin.variable} ${LufgaThinItalic.variable} ${LufgaExtraLight.variable} ${LufgaExtraLightItalic.variable} ${LufgaLight.variable} ${LufgaLightItalic.variable} ${LufgaMedium.variable} ${LufgaMediumItalic.variable} ${LufgaSemiBold.variable} ${LufgaSemiBoldItalic.variable} ${LufgaBold.variable} ${LufgaBoldItalic.variable} ${LufgaExtraBold.variable} ${LufgaExtraBoldItalic.variable} ${LufgaBlack.variable} ${LufgaBlackItalic.variable}`}
+      >
         <Providers
           attribute="class"
           defaultTheme="system"

apps/webapp/app/(routes)/[lang]/page.tsx

@@ -1,16 +1,20 @@
-import { getProjects } from '@/lib/projects'
-import { getDictionary } from '@/dictionaries'
-import { Lang } from '@/dictionaries/locales'
-import { WhyChooseUs } from '@/components/routes/home/why-choose-us'
-import { Features } from '@/components/routes/home/features'
-import { appConfig } from '@/lib/config'
+import dynamic from 'next/dynamic'
 import { BannerOne } from '@/components/_wip/banner-one'
+import { Categories } from '@/components/_wip/categories'
 import { FeatureOne } from '@/components/_wip/feature-one'
-import { FeatureTwo } from '@/components/_wip/feature-two'
 import { FeatureThree } from '@/components/_wip/feature-three'
+import { FeatureTwo } from '@/components/_wip/feature-two'
 import { NewHomeHero } from '@/components/routes/home/hero/index'
-import { Upcoming } from '@/components/routes/home/upcoming'
-import { Categories } from '@/components/_wip/categories'
+import { getDictionary } from '@/dictionaries'
+import { Lang } from '@/dictionaries/locales'
+import { appConfig } from '@/lib/config'
+import { getProjects } from '@/lib/projects'
+
+const DynamicFeatures = dynamic(() => import('@/components/routes/home/features').then(mod => mod.Features), { ssr: false })
+
+const DynamicUpcoming = dynamic(() => import('@/components/routes/home/upcoming').then(mod => mod.Upcoming), { ssr: false })
+
+const DynamicWhyChooseUs = dynamic(() => import('@/components/routes/home/why-choose-us').then(mod => mod.WhyChooseUs), { ssr: false })
 
 export default async function IndexPage({ params: { lang } }: IndexPageProps) {
   const dict = await getDictionary(lang)
@@ -19,13 +23,13 @@ export default async function IndexPage({ params: { lang } }: IndexPageProps) {
   return (
     <div className="container max-w-[100vw] !overflow-hidden !px-4">
       <NewHomeHero />
-      <Upcoming projects={projects} dict={dict} />
+      <DynamicUpcoming projects={projects} dict={dict} />
 
       <div className="narrow-container">
         {appConfig.features.sections ? (
           <>
-            <Features lang={lang} dict={dict} />
-            <WhyChooseUs lang={lang} dict={dict} />
+            <DynamicFeatures lang={lang} dict={dict} />
+            <DynamicWhyChooseUs lang={lang} dict={dict} />
           </>
         ) : null}
 

apps/webapp/app/(routes)/[lang]/wallet/page.tsx

@@ -10,10 +10,9 @@ import {
   CardTitle
 } from '@/components/ui/card'
 
-import { BalancesTable } from '@/components/routes/wallet/balances-table'
-import { WalletTabs } from '@/components/routes/wallet/tabs'
-import { OrderCard } from '@/components/routes/wallet/order-card'
+import ReferralDashboard from '@/components/_wip/referral-dashboard'
 import { PresaleTransactionsCard } from '@/components/routes/project/presale/presale-transactions-card'
+import { BalancesTable } from '@/components/routes/wallet/balances-table'
 
 export default function WalletPage() {
   return (
@@ -28,8 +27,11 @@ export default function WalletPage() {
         </div>
       </div>
 
+      <ReferralDashboard />
+
       <PresaleTransactionsCard />
 
+
       {/* <main className="grid items-start flex-1 gap-4 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
         <div className="grid items-start gap-4 auto-rows-max md:gap-8 lg:col-span-2">
           <WalletTabs />