Playnance Web3-Architekt System-Prompt

### 1. Architecture & Planning

#### Full Blueprint

**Frontend:** - **React + Vite + TypeScript**: Fast, modern, type-safe UI. - **ethers.js v6**: For blockchain interactions (PlayBlock RPC, G Coin ERC-20). - **State Management**: React Context or Zustand for wallet state (address, balance, mnemonic). - **UI Components**: Tailwind CSS for styling, shadcn/ui for reusable components.

**Blockchain Layer:** - **PlayBlock RPC**: `https://rpc.playblock.io` (ChainID 1829). - **G Coin Contract**: ERC-20 token with standard ABI. - **Gasless Transactions**: Optional - use PlayBlock's native gas station or relay if supported.

**Wallet Features:** - Mnemonic creation (BIP39) and import. - Balance display (G Coin + native token). - Send/receive G Coin. - Transaction history (via RPC or indexer).

**File Structure:** ``` src/ ├── components/ │ ├── WalletProvider.tsx │ ├── BalanceDisplay.tsx │ ├── SendForm.tsx │ ├── ReceiveModal.tsx │ └── MnemonicInput.tsx ├── hooks/ │ ├── useWallet.ts │ ├── useBalance.ts │ └── useSendTransaction.ts ├── utils/ │ ├── provider.ts │ ├── wallet.ts │ └── constants.ts ├── types/ │ └── index.ts ├── App.tsx └── main.tsx ```

### 2. Code Delivery

#### Provider Setup (src/utils/provider.ts) ```typescript import { ethers } from 'ethers';

const PLAYBLOCK_RPC = import.meta.env.VITE_PLAYBLOCK_RPC || 'https://rpc.playblock.io'; const CHAIN_ID = 1829;

export const getProvider = (): ethers.JsonRpcProvider => { return new ethers.JsonRpcProvider(PLAYBLOCK_RPC, CHAIN_ID); };

export const getSigner = (privateKey: string): ethers.Wallet => { const provider = getProvider(); return new ethers.Wallet(privateKey, provider); }; ```

#### Mnemonic Creation/Import (src/utils/wallet.ts) ```typescript import { ethers } from 'ethers';

export const createMnemonic = (): string => { const wallet = ethers.Wallet.createRandom(); return wallet.mnemonic!.phrase; };

export const importFromMnemonic = (mnemonic: string): ethers.Wallet => { return ethers.Wallet.fromPhrase(mnemonic); };

export const getAddressFromMnemonic = (mnemonic: string): string => { const wallet = importFromMnemonic(mnemonic); return wallet.address; }; ```

#### G Coin Balance Fetch (src/hooks/useBalance.ts) ```typescript import { useState, useEffect } from 'react'; import { ethers } from 'ethers'; import { getProvider } from '../utils/provider'; import { GCOIN_ABI, GCOIN_ADDRESS } from '../utils/constants';

export const useBalance = (address: string | null) => { const [balance, setBalance] = useState ('0'); const [loading, setLoading] = useState(false);

useEffect(() => { if (!address) return;

fetchBalance(); const interval = setInterval(fetchBalance, 15000); return () => clearInterval(interval); }, [address]);

return { balance, loading }; }; ```

#### G Coin Transfer Function (src/hooks/useSendTransaction.ts) ```typescript import { useState } from 'react'; import { ethers } from 'ethers'; import { getSigner } from '../utils/provider'; import { GCOIN_ABI, GCOIN_ADDRESS } from '../utils/constants';

export const useSendTransaction = () => { const [sending, setSending] = useState(false); const [txHash, setTxHash] = useState (null); const [error, setError] = useState (null);

const sendGCoin = async (privateKey: string, to: string, amount: string) => { setSending(true); setError(null); setTxHash(null);

try { const signer = getSigner(privateKey); const contract = new ethers.Contract(GCOIN_ADDRESS, GCOIN_ABI, signer); const tx = await contract.transfer(to, ethers.parseUnits(amount, 18)); await tx.wait(); setTxHash(tx.hash); } catch (err: any) { setError(err.message || 'Transaction failed'); } finally { setSending(false); } };

return { sendGCoin, sending, txHash, error }; }; ```

#### ERC-20 ABI (src/utils/constants.ts) ```typescript export const GCOIN_ADDRESS = '0x...'; // Replace with actual G Coin contract address

export const GCOIN_ABI = [ 'function balanceOf(address owner) view returns (uint256)', 'function transfer(address to, uint256 amount) returns (bool)', 'function decimals() view returns (uint8)', 'function symbol() view returns (string)', 'event Transfer(address indexed from, address indexed to, uint256 value)', ]; ```

#### React Wallet UI (src/App.tsx) ```typescript import { useState } from 'react'; import { createMnemonic, importFromMnemonic, getAddressFromMnemonic } from './utils/wallet'; import { useBalance } from './hooks/useBalance'; import { useSendTransaction } from './hooks/useSendTransaction';

function App() { const [mnemonic, setMnemonic] = useState (''); const [privateKey, setPrivateKey] = useState (''); const [address, setAddress] = useState (null); const [toAddress, setToAddress] = useState(''); const [amount, setAmount] = useState(''); const { balance, loading } = useBalance(address); const { sendGCoin, sending, txHash, error } = useSendTransaction();

const handleCreateWallet = () => { const newMnemonic = createMnemonic(); setMnemonic(newMnemonic); const wallet = importFromMnemonic(newMnemonic); setPrivateKey(wallet.privateKey); setAddress(wallet.address); };

const handleSend = () => { if (!privateKey || !toAddress || !amount) return; sendGCoin(privateKey, toAddress, amount); };

return ( Playnance G Coin Wallet

{!address ? ( Create New Wallet setMnemonic(e.target.value)} className="w-full p-2 border rounded" rows={3} /> Import Wallet ) : ( Address: {address}

Balance: {loading ? 'Loading...' : `${balance} G Coin`}

setToAddress(e.target.value)} className="w-full p-2 border rounded mb-2" /> setAmount(e.target.value)} className="w-full p-2 border rounded mb-2" /> {sending ? 'Sending...' : 'Send G Coin'} {txHash && Tx: {txHash}

} {error && {error}

} )} ); }

export default App; ```

### 3. Development Environment

#### Step-by-Step Instructions

1. **Node.js Setup**: Install Node.js v18+ from [nodejs.org](https://nodejs.org). 2. **Create Vite Project**: ```bash npm create vite@latest playnance-wallet -- --template react-ts cd playnance-wallet ``` 3. **Install Dependencies**: ```bash npm install ethers@6 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` 4. **Configure Tailwind**: Update `tailwind.config.js`: ```javascript export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], theme: { extend: {} }, plugins: [], }; ``` Add to `src/index.css`: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` 5. **Configure .env**: Create `.env` file: ``` VITE_PLAYBLOCK_RPC=https://rpc.playblock.io VITE_GCOIN_ADDRESS=0x... ``` 6. **Connect to PlayBlock RPC**: Already done in `provider.ts`.

### 4. Smart Contract Tooling

#### Hardhat Setup

1. **Install Hardhat**: ```bash npm install --save-dev hardhat @nomicfoundation/hardhat-toolbox npx hardhat init ``` 2. **Configure hardhat.config.ts**: ```typescript import { HardhatUserConfig } from 'hardhat/config'; import '@nomicfoundation/hardhat-toolbox';

const config: HardhatUserConfig = { solidity: '0.8.20', networks: { playblock: { url: 'https://rpc.playblock.io', chainId: 1829, accounts: [process.env.PRIVATE_KEY!], }, }, };

export default config; ``` 3. **Compile Contracts**: ```bash npx hardhat compile ``` 4. **Deploy to PlayBlock**: ```typescript // scripts/deploy.ts import { ethers } from 'hardhat';

async function main() { const GCoin = await ethers.getContractFactory('GCoin'); const gcoin = await GCoin.deploy(); await gcoin.waitForDeployment(); console.log('GCoin deployed to:', await gcoin.getAddress()); }

main().catch(console.error); ``` ```bash npx hardhat run scripts/deploy.ts --network playblock ``` 5. **Interact with Contracts**: ```bash npx hardhat console --network playblock > const GCoin = await ethers.getContractFactory('GCoin'); > const gcoin = await GCoin.attach('0x...'); > await gcoin.balanceOf('0x...'); ``` 6. **Testing**: Write tests in `test/` using Hardhat's test framework.

### 5. Deployment

#### Deploy to Vercel

1. **Push to GitHub**. 2. **Import project** in Vercel dashboard. 3. **Set Environment Variables**: - `VITE_PLAYBLOCK_RPC`: `https://rpc.playblock.io` - `VITE_GCOIN_ADDRESS`: `0x...` 4. **Build Settings**: - Framework: Vite - Build Command: `npm run build` - Output Directory: `dist` 5. **Deploy**. 6. **Security Best Practices**: - Never expose private keys in frontend. - Use environment variables for RPC URLs. - Enable HTTPS. - Add Content Security Policy headers.

### 6. Monetization

| Strategy | Description | Implementation | |----------|-------------|----------------| | Swap Fees | Charge 0.3% on token swaps | Integrate DEX (e.g., Uniswap V3) | | Premium Features | Unlock advanced analytics, multi-sig | Subscription via Stripe | | Fiat On-Ramp Referrals | Refer users to MoonPay/Transak | Affiliate links | | Staking Fees | Charge 10% of staking rewards | Staking contract | | Token Utility | G Coin used for gas, governance | Native token model |

### 7. Security & Compliance

#### Key Management - Never store private keys in localStorage. - Use browser extensions (e.g., MetaMask) or hardware wallets. - Encrypt mnemonic with user password before storage.

#### Frontend Security - Sanitize all inputs. - Use HTTPS only. - Implement rate limiting on API calls.

#### Smart Contract Safety - Use OpenZeppelin contracts. - Perform reentrancy checks. - Test with Hardhat coverage.

#### Audits - Use ConsenSys Diligence or Trail of Bits. - Run automated tools (Slither, MythX).

#### Compliance - KYC/AML for fiat on-ramp. - GDPR for user data. - Consult legal for token classification.

### 8. Final Output Format

This guide is structured with headings, code blocks, tables, and checklists. Each section is actionable and production-ready. Follow the steps sequentially to build, deploy, and monetize your Playnance G Coin wallet.

Playnance Web3-Architekt System-Prompt

Prompt-InhaltSpeichern

Verwendung

Referenzen

Diskussion