upgrade to new version

.github/workflows/publish.yml

@@ -8,21 +8,21 @@ on:
 
 jobs:
   deploy:
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     concurrency:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '22'
 
       - name: Build
         run: |
           cd front-end
-          yarn install --frozen-lockfile
-          yarn build
-          yarn export
+          npm install --frozen-lockfile
+          npm run build
+          npm run export
 
       - name: Deploy to gh-pages
         uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -7,4 +7,5 @@ package-lock.json
 ./package-lock.json
 cache
 artifacts
-typechain
+typechain
+CLAUDE.md

front-end/.gitignore

@@ -1,35 +1,27 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
-
-# local env files
-.env*.local
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Build output
+build

front-end/README.md

@@ -1,34 +1,97 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Web3Camp MultiSender - React Implementation
+
+This is a React implementation of the Web3Camp MultiSender application, which allows sending ETH and ERC-20 tokens to multiple addresses in a single transaction.
+
+## Features
+
+- Send ETH and ERC-20 tokens to multiple addresses in a single transaction
+- Import addresses and amounts from Excel files
+- Support for multiple networks (Ethereum, BSC, Polygon)
+- Transaction history tracking
+- Modern, responsive UI
 
 ## Getting Started
 
-First, run the development server:
+### Prerequisites
 
+- Node.js (v14 or later)
+- npm or yarn
+- MetaMask or compatible Web3 wallet
+
+### Installation
+
+1. Clone the repository:
 ```bash
-npm run dev
+git clone https://github.com/Web3Camp-Labs/multisender.git
+cd multisender/react-app
+```
+
+2. Install dependencies:
+```bash
+npm install
+# or
+yarn install
+```
+
+3. Start the development server:
+```bash
+npm start
 # or
-yarn dev
+npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+4. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+
+### Build for Production
+
+```bash
+npm run build
+```
+
+The build output will be in the `build/` directory.
+
+## Usage
+
+1. **Connect Wallet**: Click the "Connect Wallet" button in the header to connect your Web3 wallet.
+
+2. **Step 1 - Prepare**:
+   - Enter the token address (use 0x000000000000000000000000000000000000bEEF for ETH)
+   - Import addresses and amounts from Excel or enter them manually in the format: `address,amount`
+   - Click "Next" to proceed
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+3. **Step 2 - Confirm**:
+   - Review the list of recipients and transaction summary
+   - For ERC-20 tokens, approve the token spending if needed
+   - Click "Send" to execute the transactions
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+4. **Step 3 - Result**:
+   - View the transaction history with links to block explorers
+   - Download a CSV file of any failed transactions (if applicable)
 
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+## Network Support
 
-## Learn More
+The application supports the following networks:
+- Ethereum Mainnet
+- Binance Smart Chain
+- Polygon
+- BSC Testnet
 
-To learn more about Next.js, take a look at the following resources:
+## Technical Details
 
-- [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.
+This application is built with:
+- React 18
+- TypeScript
+- Vite (fast build tool)
+- ethers.js for Web3 integration
+- React Bootstrap for UI components
+- Styled Components for styling
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+## License
 
-## Deploy on Vercel
+This project is licensed under the MIT License - see the LICENSE file for details.
 
-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.
+## Acknowledgments
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- Original Next.js implementation by Web3Camp
+- [ethers.js](https://docs.ethers.io/)
+- [React Bootstrap](https://react-bootstrap.github.io/)

front-end/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web3Camp MultiSender - Send ETH and ERC-20 tokens to multiple addresses in a single transaction"
+    />
+    <title>Web3Camp MultiSender</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

front-end/package.json

@@ -1,36 +1,32 @@
 {
-  "name": "front-end",
+  "name": "multisender-app",
   "version": "0.1.0",
   "private": true,
-  "homepage": ".",
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "export": "next export",
-    "start": "next start",
-    "lint": "next lint"
-  },
+  "type": "module",
   "dependencies": {
-    "@types/styled-components": "^5.1.24",
-    "bootstrap": "^5.1.3",
-    "next": "12.1.4",
-    "react": "18.0.0",
-    "react-bootstrap": "^2.2.2",
-    "react-dom": "18.0.0",
-    "styled-components": "^5.3.5"
+    "bootstrap": "^5.3.2",
+    "ethers": "^5.7.2",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.2",
+    "react-bootstrap-icons": "^1.11.2",
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8",
+    "web-vitals": "^3.5.1",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@types/node": "17.0.23",
-    "@types/react": "18.0.1",
-    "@types/react-dom": "17.0.14",
-    "eslint": "8.12.0",
-    "eslint-config-next": "12.1.4",
-    "ethers": "^5.6.2",
-    "react-bootstrap-icons": "^1.8.1",
-    "typescript": "4.6.3",
-    "xlsx": "^0.18.5"
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
+    "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
   },
-  "resolutions": {
-    "@types/react": "^18.0.1"
+  "scripts": {
+    "dev": "vite",
+    "start": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
   }
 }