Merge pull request #361 from picsoritdidnthappen/database-migration

Database migration

README.md

@@ -1,28 +1,133 @@
-## Refactor Notes:
+## Contributing
 
-Steps:
+Thank you for your interest in contributing to POIDH! Before you start coding, please review this guide to ensure a smooth process from development to submitting a pull request.
 
-- Make sure everything is typed in a clean way
-- Fix linting and formatting errors
-- Fix hydration errors
-- Remove redundant code / Unused files
-- Rename everything with Proofs -> Claims
-- Make sure everything that can/should be rendered server side is (ie rpc requests, etc)
+If you're new or unsure where to begin, check the [Discussions](https://github.com/poidh/poidh-app/discussions) tab for ideas and help.
 
-Bugs Encountered:
+### Quick Start Guide
 
-Changes Made:
+This guide will help you set up your local environment for running and contributing to the POIDH app, including setting up automatic formatting and linting.
 
-# POIDH App
+#### Overview
 
-## Overview
+- [Cloning the Repository](#cloning-the-repository)
+- [Installing Node.js and pnpm](#installing-nodejs-and-pnpm)
+- [Installing Dependencies](#installing-dependencies)
+- [Running the Project](#running-the-project)
+- [Submitting Pull Requests](#submitting-pull-requests)
 
-POIDH App
+---
 
-## Installation
+### Cloning the Repository
 
-To install the dependencies, run the following command:
+1. Clone the repository to your local machine. Ensure you have Git installed. [Git installation guide](https://git-scm.com/docs).
 
-```sh
-npm install
-```
+   ```bash
+   git clone https://github.com/poidh/poidh-app.git
+   ```
+
+   Or, if you have the [GitHub CLI](https://cli.github.com) installed:
+
+   ```bash
+   gh repo clone picsoritdidnthappen/poidh-app
+   ```
+
+2. Navigate into the project directory.
+
+   ```bash
+   cd poidh-app
+   ```
+
+<div align="right">
+<a href="#quick-start-guide">↑ Back to Overview</a>
+</div>
+
+---
+
+### Installing Node.js and pnpm
+
+POIDH uses **pnpm** as a package manager and requires **Node.js v18.12 or higher**.
+
+1. Check your versions to confirm compatibility:
+
+   ```bash
+   node -v
+   pnpm -v
+   ```
+
+2. If you need to install or update:
+
+   - [Install Node.js](https://nodejs.org)
+   - [Install pnpm](https://pnpm.io/)
+
+<div align="right">
+<a href="#quick-start-guide">↑ Back to Overview</a>
+</div>
+
+---
+
+### Installing Dependencies
+
+1. In the project root directory, install all required dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+2. This command will update and install all necessary packages.
+
+<div align="right">
+<a href="#quick-start-guide">↑ Back to Overview</a>
+</div>
+
+---
+
+### Running the Project
+
+1. Start the POIDH app:
+
+   ```bash
+   pnpm start
+   ```
+
+   Or, if you're running a development build:
+
+   ```bash
+   pnpm dev
+   ```
+
+2. The app should now be running locally! Check your terminal output for any additional information or errors.
+
+<div align="right">
+<a href="#quick-start-guide">↑ Back to Overview</a>
+</div>
+
+---
+
+### Submitting Pull Requests
+
+To contribute code, follow these steps:
+
+1. **Style Guide**: Please review the POIDH style guide to maintain consistency in the codebase.
+
+2. **Code Check**: Before submitting, make sure your code is formatted and linted. GitHub Actions will automatically build, lint, and format your pull request, highlighting issues if they exist.
+
+3. **Commit Titles and Descriptions**: Keep titles and descriptions concise yet informative to help reviewers understand your changes.
+
+4. **Build Command**: Don’t forget to run the following to ensure your build is up to date:
+
+   ```bash
+   pnpm build
+   ```
+
+5. **Pull Request Review**: After submitting, if you see a ❌, review the error logs under the “Actions” tab to identify any issues.
+
+<div align="right">
+<a href="#quick-start-guide">↑ Back to Overview</a>
+</div>
+
+---
+
+### Thank You!
+
+We appreciate your contribution to POIDH. Happy coding and thank you for helping to make POIDH even better!

src/components/global/FormBounty.tsx

@@ -1,10 +1,14 @@
-import { Box, CircularProgress, Switch } from '@mui/material';
+import {
+  Box,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  Switch,
+} from '@mui/material';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 
-import GameButton from '@/components/global/GameButton';
-import { InfoIcon } from '@/components/global/Icons';
-import ButtonCTA from '@/components/ui/ButtonCTA';
 import { useGetChain } from '@/hooks/useGetChain';
 import { useAccount, useSwitchChain, useWriteContract } from 'wagmi';
 import { useMutation } from '@tanstack/react-query';
@@ -14,8 +18,17 @@ import abi from '@/constant/abi/abi';
 import { cn } from '@/utils';
 import Loading from '@/components/global/Loading';
 import { trpcClient } from '@/trpc/client';
+import GameButton from '@/components/global/GameButton';
+import ButtonCTA from '@/components/ui/ButtonCTA';
+import { InfoIcon } from '@/components/global/Icons';
 
-export default function FormBounty() {
+export default function FormBounty({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
   const [amount, setAmount] = useState('');
@@ -98,85 +111,106 @@ export default function FormBounty() {
   return (
     <>
       <Loading open={createBountyMutations.isPending} status={status} />
-      <div className='mt-10 flex text-left flex-col text-white rounded-[30px] border border-[#D1ECFF] p-5 w-full lg:min-w-[400px] justify-center backdrop-blur-sm bg-poidhBlue/60'>
-        <span>title</span>
-        <input
-          type='text'
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          className='border bg-transparent border-[#D1ECFF] py-2 px-2 rounded-md mb-4'
-        />
-        <span>description</span>
-        <textarea
-          rows={3}
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          className='border bg-transparent border-[#D1ECFF] py-2 px-2 rounded-md mb-4 max-h-28'
-        ></textarea>
-
-        <span>reward</span>
-        <input
-          type='number'
-          placeholder={`amount in ${chain.currency}`}
-          value={amount}
-          onChange={(e) => setAmount(e.target.value)}
-          className='border bg-transparent border-[#D1ECFF] py-2 px-2 rounded-md mb-4'
-        />
-        <div className='flex text-balance gap-2 text-xs mb-2 items-center'>
-          <InfoIcon width={18} height={18} /> a 2.5% fee is deducted from
-          completed bounties
-        </div>
-
-        <div className='flex items-center justify-start gap-2'>
-          <span>{isSoloBounty ? 'Solo Bounty' : 'Open Bounty'}</span>
-          <Switch
-            checked={isSoloBounty}
-            onClick={() => setIsSoloBounty(!isSoloBounty)}
-            inputProps={{ 'aria-label': 'controlled' }}
-          />
-        </div>
-        <div className=' text-xs'>
-          <span className='flex gap-2 items-center max-w-md '>
-            <InfoIcon width={18} height={18} />
-            {isSoloBounty
-              ? 'you are the sole bounty contributor'
-              : 'users can add additional funds to your bounty'}
-          </span>
-        </div>
-
-        {createBountyMutations.isPending ? (
-          <Box className='flex justify-center items-center mt-5'>
-            <CircularProgress />
-          </Box>
-        ) : (
-          <button
-            className={cn(
-              'flex flex-row items-center justify-center',
-              account.isDisconnected && 'opacity-50 cursor-not-allowed'
-            )}
-            onClick={() => {
-              if (account.isConnected && name && description && amount) {
-                createBountyMutations.mutate();
-              } else {
-                toast.error(
-                  'Please fill in all fields and check wallet connection.'
-                );
-              }
-            }}
-            disabled={account.isDisconnected}
-          >
-            {createBountyMutations.isPending && (
-              <Box sx={{ display: 'flex' }}>
-                <CircularProgress />
-              </Box>
-            )}
-            <div className='button'>
-              <GameButton />
+      <Dialog
+        open={open}
+        onClose={() => {
+          onClose();
+          setAmount('');
+        }}
+        maxWidth='xs'
+        fullWidth
+        PaperProps={{
+          className: 'bg-poidhBlue/50',
+          style: {
+            borderRadius: '30px',
+            color: 'white',
+            border: '1px solid #D1ECFF',
+          },
+        }}
+      >
+        <DialogContent>
+          <Box display='flex' flexDirection='column' width='100%'>
+            <span>title</span>
+            <input
+              type='text'
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className='border bg-transparent border-[#D1ECFF] py-2 px-2 rounded-md mb-4'
+            />
+            <span>description</span>
+            <textarea
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className='border bg-transparent border-[#D1ECFF] py-2 px-2 rounded-md mb-4 max-h-28'
+            ></textarea>
+
+            <span>reward</span>
+            <input
+              type='number'
+              placeholder={`amount in ${chain.currency}`}
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+              className='border bg-transparent border-[#D1ECFF] py-2 px-2 rounded-md mb-4 placeholder:text-slate-400'
+            />
+            <div className='flex text-balance gap-2 text-xs mb-2 items-center'>
+              <InfoIcon width={18} height={18} /> a 2.5% fee is deducted from
+              completed bounties
             </div>
-            <ButtonCTA>create bounty</ButtonCTA>
-          </button>
-        )}
-      </div>
+            <div className='flex items-center justify-start gap-2'>
+              <span>{isSoloBounty ? 'Solo Bounty' : 'Open Bounty'}</span>
+              <Switch
+                checked={isSoloBounty}
+                onClick={() => setIsSoloBounty(!isSoloBounty)}
+                inputProps={{ 'aria-label': 'controlled' }}
+              />
+            </div>
+            <div className=' text-xs'>
+              <span className='flex gap-2 items-center max-w-md '>
+                <InfoIcon width={18} height={18} />
+                {isSoloBounty
+                  ? 'you are the sole bounty contributor'
+                  : 'users can add additional funds to your bounty'}
+              </span>
+            </div>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          {createBountyMutations.isPending ? (
+            <Box className='flex justify-center items-center mt-5'>
+              <CircularProgress />
+            </Box>
+          ) : (
+            <button
+              className={cn(
+                'flex flex-row items-center justify-center',
+                account.isDisconnected && 'opacity-50 cursor-not-allowed'
+              )}
+              onClick={() => {
+                if (account.isConnected && name && description && amount) {
+                  onClose();
+                  createBountyMutations.mutate();
+                } else {
+                  toast.error(
+                    'Please fill in all fields and check wallet connection.'
+                  );
+                }
+              }}
+              disabled={account.isDisconnected}
+            >
+              {createBountyMutations.isPending && (
+                <Box sx={{ display: 'flex' }}>
+                  <CircularProgress />
+                </Box>
+              )}
+              <div className='button'>
+                <GameButton />
+              </div>
+              <ButtonCTA>create bounty</ButtonCTA>
+            </button>
+          )}
+        </DialogActions>
+      </Dialog>
     </>
   );
 }