fix prompts and default page

Author: hsy822

apps/quick-dapp/src/App.tsx

@@ -22,6 +22,7 @@ function App(): JSX.Element {
     messages: null,
   })
   const [appState, dispatch] = useReducer(appReducer, appInitialState);
+  const [isAiLoading, setIsAiLoading] = useState(false);
   useEffect(() => {
     updateState(appState);
   }, [appState]);
@@ -43,6 +44,20 @@ function App(): JSX.Element {
       remixClient.on('locale', 'localeChanged', (locale: any) => {
         setLocale(locale)
       })
+      // @ts-ignore
+      remixClient.on('ai-dapp-generator', 'generationProgress', (progress: any) => {
+        if (progress.status === 'started') {
+          setIsAiLoading(true);
+        }
+      });
+      // @ts-ignore
+      remixClient.on('ai-dapp-generator', 'dappGenerated', () => {
+        setIsAiLoading(false);
+      });
+      // @ts-ignore
+      remixClient.on('ai-dapp-generator', 'dappUpdated', () => {
+        setIsAiLoading(false);
+      });
     });
   }, []);
   return (
@@ -64,7 +79,7 @@ function App(): JSX.Element {
           </div>
         ) : (
           <div className="row m-0 pt-3">
-            <CreateInstance />
+            <CreateInstance isAiLoading={isAiLoading} />
           </div>
         )}
         <LoadingScreen />

apps/quick-dapp/src/components/CreateInstance/index.tsx

@@ -2,33 +2,44 @@ import React from 'react';
 import { Alert } from 'react-bootstrap'; 
 import { FormattedMessage } from 'react-intl';
 
-const CreateInstance: React.FC = () => {
+interface CreateInstanceProps {
+  isAiLoading: boolean;
+}
+
+const CreateInstance: React.FC<CreateInstanceProps> = ({ isAiLoading }) => {
 
   return (
     <div className="text-center">
-
-      <Alert 
-        className="mt-4 d-flex align-items-center justify-content-center" 
-        variant="info" 
-        data-id="quickDappTooltips"
-      >
-        
-        <div className="flex-shrink-0 me-3">
-          <img 
-            src='./assets/sparkling.png' 
-            style={{ width: '300px' }} 
-            alt="Sparkling star icon" 
-          />
-        </div>
-        <div className="text-start"> 
-          <FormattedMessage id="quickDapp.text1" />
-          <br />
-          <FormattedMessage id="quickDapp.text2" />
+      {isAiLoading ? (
+        <div className="mt-4 mb-3 p-4">
+          <i className="fas fa-spinner fa-spin me-2"></i>
+          Your dapp is being created by RemixAI Assistant.
         </div>
-      </Alert>
-      <div className="mt-4 mb-3">
-        <FormattedMessage id="quickDapp.text7" />
-      </div>
+      ) : (
+        <>
+          <Alert 
+            className="mt-4 d-flex align-items-center justify-content-center" 
+            variant="info" 
+            data-id="quickDappTooltips"
+          >
+            <div className="flex-shrink-0 me-3">
+              <img 
+                src='./assets/sparkling.png' 
+                style={{ width: '300px' }}
+                alt="Sparkling star icon" 
+              />
+            </div>
+            <div className="text-start"> 
+              <FormattedMessage id="quickDapp.text1" />
+              <br />
+              <FormattedMessage id="quickDapp.text2" />
+            </div>
+          </Alert>
+          <div className="mt-4 mb-3">
+            <FormattedMessage id="quickDapp.text7" />
+          </div>
+        </>
+      )}
     </div>
   );
 };

apps/quick-dapp/src/components/DeployPanel/index.tsx

@@ -28,7 +28,7 @@ const REMIX_REGISTRAR_ABI = [
 function DeployPanel(): JSX.Element {
   const intl = useIntl()
   const { appState, dispatch } = useContext(AppContext);
-  const { title, details } = appState.instance; 
+  const { title, details, logo } = appState.instance; 
   const [showIpfsSettings, setShowIpfsSettings] = useState(false);
   const [ipfsHost, setIpfsHost] = useState('');
   const [ipfsPort, setIpfsPort] = useState('');
@@ -182,6 +182,30 @@ function DeployPanel(): JSX.Element {
 
       let modifiedHtml = indexHtmlContent;
 
+      let logoDataUrl = '';
+      if (logo && logo.byteLength > 0) {
+        try {
+          const base64data = btoa(
+            new Uint8Array(logo).reduce((data, byte) => data + String.fromCharCode(byte), '')
+          );
+          logoDataUrl = 'data:image/jpeg;base64,' + base64data;
+        } catch (err) {
+          console.error('Logo conversion failed during deploy:', err);
+        }
+      }
+
+      const injectionScript = `
+        <script>
+          window.__QUICK_DAPP_CONFIG__ = {
+            logo: "${logoDataUrl}",
+            title: ${JSON.stringify(title || '')},
+            details: ${JSON.stringify(details || '')}
+          };
+        </script>
+      `;
+
+      modifiedHtml = modifiedHtml.replace('</head>', `${injectionScript}\n</head>`);
+      
       modifiedHtml = modifiedHtml.replace(
         /<script type="module"[^>]*src="(?:\/|\.\/)?src\/main\.jsx"[^>]*><\/script>/, 
         '<script type="module" src="./app.js"></script>'

apps/remix-ide/src/app/plugins/ai-dapp-generator.ts

@@ -176,6 +176,7 @@ export class AIDappGenerator extends Plugin {
 
   private createInitialMessage(options: GenerateDappOptions): string {
     const providerCode = this.getProviderCode()
+    
     return `
       You MUST generate a new DApp based on the following requirements.
       
@@ -188,6 +189,21 @@ export class AIDappGenerator extends Plugin {
       - Contract Address: ${options.address}
       - Network (Chain ID): ${options.chainId}
       - Contract ABI: ${JSON.stringify(options.abi)}
+
+      **ROBUST NETWORK CHECK:**
+      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.
+      
+      **Do NOT compare strings directly.** Instead, convert both values to \`BigInt\` for comparison.
+      
+      **Required Code Pattern:**
+      \`\`\`javascript
+      const TARGET_CHAIN_ID = "${options.chainId}"; // Decimal from Remix
+      // ... inside connectWallet ...
+      const chainId = await window.ethereum.request({ method: 'eth_chainId' });
+      if (BigInt(chainId) !== BigInt(TARGET_CHAIN_ID)) {
+         // Switch network logic...
+      }
+      \`\`\`
       
       **User's Design Request:**
       Please build the DApp based on this description: