Skip to content

Commit e7533cc

Browse files
ChaoLing140ChaoLing140
committed
feat: setup Next.js frontend development environment
- Initialized Next.js 14 project with TypeScript and App Router - Configured Tailwind CSS with Stellar brand colors - Added ESLint and Prettier configuration - Created project structure with components, hooks, lib, and types - Implemented blockchain utility libraries (Ethereum, Bitcoin, Stellar) - Added custom hooks (useLocalStorage, useAsync) - Created basic home page with project overview - Added comprehensive README with setup instructions - Configured environment variables with .env.example
1 parent 1226566 commit e7533cc

19 files changed

Lines changed: 653 additions & 3 deletions

‎frontend/.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
NEXT_PUBLIC_API_URL=http://localhost:8000
2+
NEXT_PUBLIC_STELLAR_NETWORK=testnet
3+
NEXT_PUBLIC_BITCOIN_NETWORK=testnet

‎frontend/.eslintrc.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": ["next/core-web-vitals", "prettier"],
3+
"rules": {
4+
"react/no-unescaped-entities": "off",
5+
"@next/next/no-page-custom-font": "off"
6+
}
7+
}

‎frontend/.prettierignore‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
node_modules
2+
.next
3+
out
4+
dist
5+
build
6+
.env
7+
.env.local
8+
.env.development.local
9+
.env.test.local
10+
.env.production.local
11+
*.log
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
.pnpm-debug.log*
16+
.vercel
17+
*.tsbuildinfo
18+
next-env.d.ts

‎frontend/.prettierrc‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "es5",
4+
"singleQuote": false,
5+
"printWidth": 100,
6+
"tabWidth": 2,
7+
"useTabs": false,
8+
"bracketSpacing": true,
9+
"arrowParens": "always",
10+
"endOfLine": "lf"
11+
}

‎frontend/README.md‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
# ChainBridge Frontend
2+
3+
Next.js 14 frontend for the ChainBridge cross-chain atomic swap protocol.
4+
5+
## Tech Stack
6+
7+
- **Framework**: Next.js 14 with App Router
8+
- **Language**: TypeScript
9+
- **Styling**: Tailwind CSS
10+
- **Blockchain Libraries**:
11+
- `ethers` - Ethereum interaction
12+
- `bitcoinjs-lib` - Bitcoin interaction
13+
- `@stellar/stellar-sdk` - Stellar/Soroban interaction
14+
- `@stellar/freighter-api` - Freighter wallet integration
15+
16+
## Prerequisites
17+
18+
- Node.js 18.17 or later
19+
- npm, yarn, or pnpm
20+
21+
## Getting Started
22+
23+
### 1. Install Dependencies
24+
25+
```bash
26+
npm install
27+
# or
28+
yarn install
29+
# or
30+
pnpm install
31+
```
32+
33+
### 2. Environment Setup
34+
35+
Create a `.env.local` file:
36+
37+
```bash
38+
cp .env.example .env.local
39+
```
40+
41+
Environment variables:
42+
43+
| Variable | Description | Default |
44+
|----------|-------------|---------|
45+
| `NEXT_PUBLIC_API_URL` | Backend API URL | `http://localhost:8000` |
46+
| `NEXT_PUBLIC_STELLAR_NETWORK` | Stellar network (testnet/mainnet) | `testnet` |
47+
| `NEXT_PUBLIC_BITCOIN_NETWORK` | Bitcoin network | `testnet` |
48+
49+
### 3. Development Server
50+
51+
```bash
52+
npm run dev
53+
```
54+
55+
Open [http://localhost:3000](http://localhost:3000) in your browser.
56+
57+
### 4. Production Build
58+
59+
```bash
60+
npm run build
61+
npm run start
62+
```
63+
64+
## Project Structure
65+
66+
```
67+
frontend/
68+
├── public/ # Static assets
69+
├── src/
70+
│ ├── app/ # Next.js App Router pages
71+
│ │ ├── layout.tsx # Root layout
72+
│ │ └── page.tsx # Home page
73+
│ ├── components/ # React components
74+
│ ├── hooks/ # Custom React hooks
75+
│ │ ├── useLocalStorage.ts
76+
│ │ └── useAsync.ts
77+
│ ├── lib/ # Utility libraries
78+
│ │ ├── ethereum.ts # Ethereum wallet functions
79+
│ │ ├── bitcoin.ts # Bitcoin utilities
80+
│ │ └── stellar.ts # Stellar/Soroban functions
81+
│ ├── styles/ # Global styles
82+
│ │ └── globals.css
83+
│ └── types/ # TypeScript type definitions
84+
│ └── index.ts
85+
├── next.config.js
86+
├── tailwind.config.ts
87+
├── tsconfig.json
88+
└── package.json
89+
```
90+
91+
## Scripts
92+
93+
| Script | Description |
94+
|--------|-------------|
95+
| `npm run dev` | Start development server |
96+
| `npm run build` | Build for production |
97+
| `npm run start` | Start production server |
98+
| `npm run lint` | Run ESLint |
99+
| `npm run format` | Format with Prettier |
100+
101+
## Code Quality
102+
103+
### ESLint
104+
105+
```bash
106+
npm run lint
107+
```
108+
109+
### Prettier
110+
111+
```bash
112+
# Format all files
113+
npm run format
114+
115+
# Check formatting
116+
npx prettier --check .
117+
```
118+
119+
### TypeScript
120+
121+
```bash
122+
# Type check
123+
npx tsc --noEmit
124+
```
125+
126+
## Features
127+
128+
### Wallet Integration
129+
130+
The frontend supports multiple blockchain wallets:
131+
132+
- **Stellar**: Freighter wallet
133+
- **Ethereum**: MetaMask and other Web3 wallets
134+
- **Bitcoin**: Bitcoin wallets (manual address input)
135+
136+
### Key Components
137+
138+
- Swap creation and management
139+
- Order book browsing
140+
- Transaction history
141+
- Multi-chain wallet connection
142+
143+
## Development Guidelines
144+
145+
### Component Creation
146+
147+
```tsx
148+
// Use functional components with TypeScript
149+
import { FC } from "react";
150+
151+
interface MyComponentProps {
152+
title: string;
153+
}
154+
155+
export const MyComponent: FC<MyComponentProps> = ({ title }) => {
156+
return <div>{title}</div>;
157+
};
158+
```
159+
160+
### Styling
161+
162+
Use Tailwind CSS classes:
163+
164+
```tsx
165+
<div className="flex items-center justify-center p-4 bg-stellar-primary text-white">
166+
Content
167+
</div>
168+
```
169+
170+
### State Management
171+
172+
- Use React hooks for local state
173+
- Use `useLocalStorage` for persistent state
174+
- Context API for global state (wallet, swap data)
175+
176+
## Testing
177+
178+
```bash
179+
# Unit tests (when implemented)
180+
npm run test
181+
182+
# E2E tests (when implemented)
183+
npm run test:e2e
184+
```
185+
186+
## Deployment
187+
188+
### Vercel (Recommended)
189+
190+
1. Connect your repository to Vercel
191+
2. Configure environment variables
192+
3. Deploy
193+
194+
### Docker
195+
196+
```dockerfile
197+
# Build stage
198+
FROM node:18-alpine AS builder
199+
WORKDIR /app
200+
COPY package*.json ./
201+
RUN npm ci
202+
COPY . .
203+
RUN npm run build
204+
205+
# Run stage
206+
FROM node:18-alpine
207+
WORKDIR /app
208+
COPY --from=builder /app/.next/standalone ./
209+
COPY --from=builder /app/.next/static ./.next/static
210+
COPY --from=builder /app/public ./public
211+
212+
EXPOSE 3000
213+
CMD ["node", "server.js"]
214+
```
215+
216+
## Troubleshooting
217+
218+
### Module Not Found
219+
220+
Clear Next.js cache:
221+
```bash
222+
rm -rf .next node_modules
223+
npm install
224+
```
225+
226+
### TypeScript Errors
227+
228+
Regenerate type declarations:
229+
```bash
230+
npm run build
231+
```
232+
233+
### Wallet Connection Issues
234+
235+
- Ensure wallet extension is installed
236+
- Check network configuration
237+
- Verify wallet is unlocked
238+
239+
## Contributing
240+
241+
See [CONTRIBUTING.md](../CONTRIBUTING.md) for guidelines.
242+
243+
## License
244+
245+
MIT License - see [LICENSE](../LICENSE) for details.

‎frontend/next-env.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/basic-features/typescript for more information.

‎frontend/package.json‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,17 @@
66
"dev": "next dev",
77
"build": "next build",
88
"start": "next start",
9-
"lint": "next lint"
9+
"lint": "next lint",
10+
"format": "prettier --write .",
11+
"format:check": "prettier --check .",
12+
"type-check": "tsc --noEmit"
1013
},
1114
"dependencies": {
1215
"next": "14.1.0",
1316
"react": "^18",
1417
"react-dom": "^18",
1518
"@stellar/freighter-api": "^1.7.0",
16-
"stellar-sdk": "^11.2.0",
19+
"@stellar/stellar-sdk": "^11.2.0",
1720
"ethers": "^6.10.0",
1821
"bitcoinjs-lib": "^6.1.5",
1922
"axios": "^1.6.5"
@@ -27,6 +30,9 @@
2730
"postcss": "^8.4.33",
2831
"tailwindcss": "^3.4.1",
2932
"eslint": "^8",
30-
"eslint-config-next": "14.1.0"
33+
"eslint-config-next": "14.1.0",
34+
"eslint-config-prettier": "^9.1.0",
35+
"prettier": "^3.2.5",
36+
"@types/bitcoinjs-lib": "^5.0.1"
3137
}
3238
}

‎frontend/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎frontend/src/app/layout.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { Metadata } from "next";
2+
import { Inter } from "next/font/google";
3+
import "./styles/globals.css";
4+
5+
const inter = Inter({ subsets: ["latin"] });
6+
7+
export const metadata: Metadata = {
8+
title: "ChainBridge - Cross-Chain Atomic Swaps",
9+
description: "Trustless cross-chain atomic swaps on Stellar using HTLCs and Soroban",
10+
};
11+
12+
export default function RootLayout({
13+
children,
14+
}: Readonly<{
15+
children: React.ReactNode;
16+
}>) {
17+
return (
18+
<html lang="en">
19+
<body className={inter.className}>{children}</body>
20+
</html>
21+
);
22+
}

‎frontend/src/app/page.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
export default function Home() {
2+
return (
3+
<main className="flex min-h-screen flex-col items-center justify-center p-24">
4+
<div className="z-10 max-w-5xl w-full items-center justify-center font-mono text-sm">
5+
<h1 className="text-4xl font-bold text-center mb-8">
6+
ChainBridge
7+
</h1>
8+
<p className="text-center text-lg mb-4">
9+
Trustless Cross-Chain Atomic Swaps on Stellar
10+
</p>
11+
12+
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8">
13+
<div className="border rounded-lg p-6 hover:border-stellar-primary transition-colors">
14+
<h2 className="text-xl font-semibold mb-2">🔒 Trustless</h2>
15+
<p className="text-gray-600">
16+
Hash Time-Locked Contracts ensure atomic swaps without intermediaries
17+
</p>
18+
</div>
19+
20+
<div className="border rounded-lg p-6 hover:border-stellar-primary transition-colors">
21+
<h2 className="text-xl font-semibold mb-2">⚡ Fast</h2>
22+
<p className="text-gray-600">
23+
Complete cross-chain swaps in minutes, not hours
24+
</p>
25+
</div>
26+
27+
<div className="border rounded-lg p-6 hover:border-stellar-primary transition-colors">
28+
<h2 className="text-xl font-semibold mb-2">💰 Low Cost</h2>
29+
<p className="text-gray-600">
30+
Leverage Stellar&apos;s low transaction fees for affordable swaps
31+
</p>
32+
</div>
33+
</div>
34+
35+
<div className="mt-12 text-center">
36+
<p className="text-gray-500">
37+
Multi-chain support: Stellar, Bitcoin, Ethereum, Solana, and more
38+
</p>
39+
</div>
40+
</div>
41+
</main>
42+
);
43+
}

0 commit comments

Comments
 (0)