@@ -174,7 +174,7 @@ export class AIDappGenerator extends Plugin {
174174
175175 private createInitialMessage ( options : GenerateDappOptions ) : string {
176176 const providerCode = this . getProviderCode ( )
177-
177+
178178 return `
179179 You MUST generate a new DApp based on the following requirements.
180180
@@ -184,25 +184,151 @@ export class AIDappGenerator extends Plugin {
184184 to handle the DApp's title, details, and logo.
185185
186186 **Contract Details:**
187- - Contract Address: ${ options . address }
188- - Network (Chain ID): ${ options . chainId }
189- - Contract ABI: ${ JSON . stringify ( options . abi ) }
190-
191- **ROBUST NETWORK CHECK:**
192- When generating the network check logic in \`src/App.jsx\`, you MUST implement a robust comparison that handles both Hexadecimal (e.g., "0x...") and Decimal formats.
187+ - Address: ${ options . address }
188+ - Chain ID: ${ options . chainId } ${ Number ( options . chainId ) . toString ( 16 ) }
189+ - ABI: ${ JSON . stringify ( options . abi ) }
190+
191+ **UI/UX REQUIREMENTS (RainbowKit Style):**
192+ 1. **No Default Alerts:** Do NOT use \`window.alert\`. Use modern UI elements (e.g., error text below buttons).
193+ 2. **Connection State:** - Before connection: Show a centered "Connect Wallet" button.
194+ - After connection: Show the **Connected Address** (e.g., 0x12...34) and a **"Disconnect"** button clearly.
195+ 3. **Network Check:** If on the wrong network, show a "Wrong Network" warning and a **"Switch Network"** button.
196+ 4. **Feedback:** Show loading spinners or "Loading..." text during async actions.
197+
198+ **CODE PATTERN REQUIREMENTS (React + Ethers v6):**
193199
194- **Do NOT compare strings directly.** Instead, convert both values to \`BigInt\` for comparison .
200+ In \`src/App.jsx\`, you MUST implement the following robust patterns .
195201
196- **Required Code Pattern:**
202+ **1. Constants & State:**
203+ Define the target chain ID in Hex format for MetaMask.
197204 \`\`\`javascript
198- const TARGET_CHAIN_ID = "${ options . chainId }
199- // ... inside connectWallet ...
200- const chainId = await window.ethereum.request({ method: 'eth_chainId' });
201- if (BigInt(chainId) !== BigInt(TARGET_CHAIN_ID)) {
202- // Switch network logic...
203- }
204- \`\`\`
205+ const TARGET_CHAIN_HEX = "0x${ Number ( options . chainId ) . toString ( 16 ) }
206+ const TARGET_CHAIN_DECIMAL = ${ options . chainId }
205207
208+ const [walletState, setWalletState] = useState({
209+ isConnected: false,
210+ chainId: null,
211+ address: '',
212+ isConnecting: false,
213+ error: ''
214+ });
215+ \`\`\`
216+
217+ **2. Robust Network Switching (CRITICAL):**
218+ You MUST handle the case where the network is not added to the user's wallet (Error 4902).
219+ \`\`\`javascript
220+ const switchNetwork = async () => {
221+ try {
222+ await window.ethereum.request({
223+ method: 'wallet_switchEthereumChain',
224+ params: [{ chainId: TARGET_CHAIN_HEX }],
225+ });
226+ // Success: The page will likely reload or the chainChanged event will fire
227+ return true;
228+ } catch (error) {
229+ // Error Code 4902 means the chain has not been added to MetaMask.
230+ if (error.code === 4902) {
231+ try {
232+ await window.ethereum.request({
233+ method: 'wallet_addEthereumChain',
234+ params: [{
235+ chainId: TARGET_CHAIN_HEX,
236+ // You can add generic placeholders for rpcUrls if not known,
237+ // or rely on the user to add it manually if this fails.
238+ }]
239+ });
240+ return true;
241+ } catch (addError) {
242+ console.error("Failed to add chain:", addError);
243+ setWalletState(prev => ({ ...prev, error: "Failed to add network to wallet." }));
244+ return false;
245+ }
246+ }
247+ console.error("Failed to switch network:", error);
248+ setWalletState(prev => ({ ...prev, error: "Failed to switch network: " + error.message }));
249+ return false;
250+ }
251+ };
252+ \`\`\`
253+
254+ **3. Disconnect Logic:**
255+ Always reset state completely.
256+ \`\`\`javascript
257+ const disconnectWallet = () => {
258+ setWalletState({
259+ isConnected: false,
260+ chainId: null,
261+ address: '',
262+ isConnecting: false,
263+ error: ''
264+ });
265+ setContract(null);
266+ };
267+ \`\`\`
268+
269+ **4. Connection Logic:**
270+ Check the network immediately after connecting.
271+ \`\`\`javascript
272+ const connectWallet = async () => {
273+ if (!window.ethereum) {
274+ setWalletState(prev => ({ ...prev, error: "MetaMask not found" }));
275+ return;
276+ }
277+ setWalletState(prev => ({ ...prev, isConnecting: true, error: '' }));
278+
279+ try {
280+ const provider = new ethers.BrowserProvider(window.ethereum);
281+ const accounts = await provider.send("eth_requestAccounts", []);
282+ const network = await provider.getNetwork();
283+ const currentChainId = Number(network.chainId); // Convert bigint to number
284+
285+ const isCorrectChain = currentChainId === TARGET_CHAIN_DECIMAL;
286+
287+ setWalletState({
288+ isConnected: true,
289+ chainId: currentChainId,
290+ address: accounts[0],
291+ isConnecting: false,
292+ error: isCorrectChain ? '' : 'Wrong Network. Please switch.'
293+ });
294+
295+ // Optional: Auto-switch if wrong network
296+ if (!isCorrectChain) {
297+ await switchNetwork();
298+ }
299+
300+ } catch (err) {
301+ setWalletState(prev => ({ ...prev, isConnecting: false, error: err.message }));
302+ }
303+ };
304+ \`\`\`
305+
306+ **5. UI Rendering Logic:**
307+ \`\`\`jsx
308+ <nav>
309+ {walletState.isConnected ? (
310+ <div className="flex items-center gap-4">
311+ <span className="badge">
312+ {walletState.chainId === TARGET_CHAIN_DECIMAL ? "Connected" : "Wrong Network"}
313+ </span>
314+ <span className="address">{walletState.address.slice(0,6)}...</span>
315+ <button onClick={disconnectWallet} className="btn-disconnect">
316+ Disconnect
317+ </button>
318+ </div>
319+ ) : (
320+ <button onClick={connectWallet}>Connect Wallet</button>
321+ )}
322+ </nav>
323+ {/* Show explicit switch button if connected but wrong network */}
324+ {walletState.isConnected && walletState.chainId !== TARGET_CHAIN_DECIMAL && (
325+ <div className="alert-warning">
326+ <p>You are on the wrong network.</p>
327+ <button onClick={switchNetwork}>Switch to Correct Network</button>
328+ </div>
329+ )}
330+ \`\`\`
331+
206332 **User's Design Request:**
207333 Please build the DApp based on this description:
208334 "${ options . description }
@@ -211,10 +337,10 @@ export class AIDappGenerator extends Plugin {
211337 Also, ensure the following provider injection script is in the \`<head>\`
212338 of \`index.html\`:
213339 ${ providerCode }
214-
340+
215341 Remember: Return ALL project files in the 'START_TITLE' format as
216342 instructed in the system prompt.
217- `
343+ `
218344 }
219345
220346 private createUpdateMessage ( description : string , currentFiles : Pages ) : string {
0 commit comments