Merge pull request #32 from Web3Camp-Labs/dev

upgrade to new version

Author: wendychaung

.github/workflows/publish.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-  pull_request:
 
 jobs:
   deploy:

.gitignore

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

cli/testaddress.csv

@@ -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/.babelrc

@@ -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/.eslintrc.json

@@ -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>