Merge pull request #60 from bitsnark/develop

UI Updates

Author: njaume

.env.sample

@@ -0,0 +1,4 @@
+VITE_WALLETCONNECT_PROJECT_ID=""
+VITE_RPC_URL=""
+VITE_API_BASE_URL=""
+VITE_EXPIRATION_HOURS=24

.github/workflows/ci.yml

@@ -22,10 +22,24 @@ jobs:
           rm -rf node_modules package-lock.json
 
       - name: Install deps
-        run: npm install
+        run: npm install --force
 
       - name: Lint
         run: npm run lint
 
+      - name: Test
+        run: npm run test
+        env:
+          CI: true # This ensures the process exits with a non-zero code if tests fail
+          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
+          VITE_RPC_URL: ${{ secrets.VITE_RPC_URL }}
+          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
+          VITE_EXPIRATION_HOURS: ${{ secrets.VITE_EXPIRATION_HOURS }}
+
       - name: Build
         run: npm run build
+        env:
+          VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
+          VITE_RPC_URL: ${{ secrets.VITE_RPC_URL }}
+          VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
+          VITE_EXPIRATION_HOURS: ${{ secrets.VITE_EXPIRATION_HOURS }}

.github/workflows/deploy.yml

@@ -27,16 +27,15 @@ jobs:
         run: npm install netlify-cli@17.10.1 -g
 
       - name: Install Dependencies
-        run: npm install
+        run: npm install --force
 
       - name: Build project
         run: npm run build
         env:
           VITE_WALLETCONNECT_PROJECT_ID: ${{ secrets.WALLETCONNECT_PROJECT_ID }}
           VITE_RPC_URL: ${{ secrets.VITE_RPC_URL }}
-          VITE_EXCHANGE_CONTRACT_ADDRESS: ${{ secrets.VITE_EXCHANGE_CONTRACT_ADDRESS }}
-          VITE_TOKEN_ADDRESS: ${{ secrets.VITE_TOKEN_ADDRESS }}
           VITE_API_BASE_URL: ${{ secrets.VITE_API_BASE_URL }}
+          VITE_EXPIRATION_HOURS: ${{ secrets.VITE_EXPIRATION_HOURS }}
       - name: Deploy to Netlify
         run: |
           DEPLOY_COMMAND="netlify deploy \

README.md

@@ -1,7 +1,111 @@
-# React + TypeScript + Vite
+# Florin Frontend
+
+## Overview
+Florin is a modern web application built with React and TypeScript. It provides a user-friendly interface for interacting with blockchain functionality, featuring components for wallet integration, QR code generation, and form handling.
+
+## Tech Stack
+- **Frontend Framework**: React 19
+- **Language**: TypeScript
+- **Build Tool**: Vite 6
+- **Styling**: Tailwind CSS 4
+- **State Management**: TanStack Query (React Query)
+- **Routing**: TanStack Router
+- **Form Handling**: React Hook Form with Zod validation
+- **UI Components**: Radix UI
+- **Blockchain Integration**: wagmi, viem
+- **Testing**: Vitest, React Testing Library
+- **Code Quality**: ESLint, Prettier
 
 ## Setup
 
-Run `yarn` or `npm install`
+### Prerequisites
+- Node.js (Latest LTS version recommended)
+- npm or yarn package manager
+
+### Installation
+1. Clone the repository:
+```bash
+git clone [repository-url]
+cd florin-fe
+```
+
+2. Install dependencies:
+```bash
+npm install
+# or
+yarn install
+```
+
+### Development
+To start the development server:
+```bash
+npm run dev
+# or
+yarn dev
+```
+The application will be available at `http://localhost:5173`
+
+### Production Build
+To create a production build:
+```bash
+npm run build
+# or
+yarn build
+```
+
+To preview the production build locally:
+```bash
+npm run preview
+# or
+yarn preview
+```
+
+## Environment Variables
+The application uses environment variables for configuration. Create a `.env` file in the root directory with the following variables:
+
+```env
+VITE_WALLETCONNECT_PROJECT_ID=""
+VITE_RPC_URL=""
+VITE_API_BASE_URL=""
+VITE_EXPIRATION_HOURS=24
+```
+
+## Main Scripts
+- `npm run dev` - Start development server
+- `npm run build` - Create production build
+- `npm run preview` - Preview production build
+- `npm run lint` - Run ESLint
+- `npm run format` - Format code with Prettier
+- `npm run test` - Run tests
+- `npm run test:coverage` - Run tests with coverage report
+- `npm run deploy-prod` - Deploy to production
+- `npm run deploy-staging` - Deploy to staging
+
+## Tests
+The project uses Vitest and React Testing Library for testing. To run tests:
+
+```bash
+# Run tests in watch mode
+npm run test
+
+# Run tests with coverage
+npm run test:coverage
+```
+
+## Deployment
+The project is deployed using github actions and netlify. Set the followings actions variables in order to correctly deploy to netlify: 
+
+NETLIFY_SITE_ID
+NETLIFY_AUTH_TOKEN
+
+### Continuous deployment trigger
+On every new commit to `develop` (netflify preview) and `main` (netlify production)
+
+## Contributing
+1. Create a new branch for your feature
+2. Make your changes
+3. Run tests and ensure they pass
+4. Submit a pull request
 
-Run `yarn dev` or `npm run dev`
+## License
+[Add your license information here]

index.html

@@ -2,6 +2,7 @@
 <html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
+    
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Florin</title>