fix: redesign

coinbase · Mar 7, 2025 · 5e1eb6a · 5e1eb6a
1 parent 309cbee
commit 5e1eb6a
Show file tree

Hide file tree

Showing 16 changed files with 441 additions and 255 deletions.
diff --git a/account-manifest/src/components/Page.tsx b/account-manifest/src/components/Page.tsx
@@ -22,6 +22,8 @@ import { validateUrl } from '../utils';
 import { Step } from './Step';
 import { Success } from './Success';
 
+const MAX_RECONNECT_ATTEMPTS = 5;
+
 function Page() {
   const wsRef = useRef<WebSocket | null>(null);
   const [fid, setFid] = useState<number | null>(null);
@@ -43,7 +45,25 @@ function Page() {
   });
 
   useEffect(() => {
-    wsRef.current = new WebSocket('ws://localhost:3333');
+    let reconnectAttempts = 0;
+
+    function connect() {
+      wsRef.current = new WebSocket('ws://localhost:3333');
+
+      wsRef.current.onclose = () => {
+        if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+          console.log('WebSocket closed, reconnecting...');
+          reconnectAttempts++;
+          setTimeout(connect, 1000);
+        }
+      };
+
+      wsRef.current.onerror = (err) => {
+        console.error('WebSocket error:', err);
+      };
+    }
+
+    connect();
 
     return () => {
       wsRef.current?.close();
@@ -104,6 +124,10 @@ function Page() {
     setDomainError(null);
   };
 
+  const handleClose = useCallback(() => {
+    window.close();
+  }, []);
+
   return (
     <main className="flex min-h-screen w-[600px] flex-col gap-6 font-sans">
       <Step
@@ -215,7 +239,7 @@ function Page() {
           )}
         </div>
       </Step>
-      <Success accountAssocation={accountAssocation} />
+      <Success accountAssocation={accountAssocation} handleClose={handleClose} />
     </main>
   );
 }

diff --git a/account-manifest/src/components/Success.tsx b/account-manifest/src/components/Success.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { useCallback } from 'react';
 import type { AccountAssociation } from '../hooks/useSignManifest';
 import { Timer } from './Timer';
 
 type SuccessProps = {
   accountAssocation: AccountAssociation | null;
+  handleClose: () => void;
 };
 
-export function Success({ accountAssocation }: SuccessProps) {
+export function Success({ accountAssocation, handleClose }: SuccessProps) {
   if (!accountAssocation) {
     return null;
   }
@@ -19,10 +19,6 @@ export function Success({ accountAssocation }: SuccessProps) {
     signature: accountAssocation.signature,
   };
 
-  const handleClose = useCallback(() => {
-    window.close();
-  }, []);
-
   return (
     <div className="flex flex-col gap-2 rounded p-4">
       <div className="flex items-center justify-between">

diff --git a/create-onchain/package.json b/create-onchain/package.json
@@ -4,8 +4,8 @@
   "version": "0.0.16",
   "license": "MIT",
   "scripts": {
-    "build": "bun run clean && bun run build:esm+types && bun run build:manifest",
-    "build:manifest": "cd ../account-manifest && bun install && bun run build && cd ../create-onchain && cp -R ../account-manifest/dist/* ./src/manifest",
+    "build": "bun run clean && bun run build:manifest && bun run build:esm+types",
+    "build:manifest": "cd ../account-manifest && bun install && bun run build && cd ../create-onchain && rm -rf ./src/manifest/* && cp -R ../account-manifest/dist/* ./src/manifest",
     "build:esm+types": "tsc --project tsconfig.build.json --outDir ./dist/esm --declaration --declarationMap --declarationDir ./dist/types",
     "check:types": "tsc --noEmit",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",

diff --git a/create-onchain/src/cli.ts b/create-onchain/src/cli.ts
@@ -46,7 +46,7 @@ async function copyDir(src: string, dest: string) {
 
 type WebpageData = { header: string, payload: string, signature: string, domain: string };
 
-async function getWebpageData(browser: 'safari' | 'google chrome' | 'none'): Promise<WebpageData> {
+async function getWebpageData(): Promise<WebpageData> {
   const app = express();
   const server = createServer(app);
   const wss = new WebSocketServer({ server });
@@ -63,18 +63,10 @@ async function getWebpageData(browser: 'safari' | 'google chrome' | 'none'): Pro
         server.close();
         resolve(parsedData);
       });
-      ws.on('close', () => {
-        server.close();
-        reject(new Error('WebSocket connection closed'));
-      });
     });
 
     server.listen(3333, () => {
-      open('http://localhost:3333', browser === 'none' ? undefined : {
-        app: {
-          name: browser
-        }
-      });
+      open('http://localhost:3333');
     });
   });
 }
@@ -90,35 +82,8 @@ async function createMiniKitAccountAssociation(envPath?: string) {
     return false;
   }
 
-  let browserResult: prompts.Answers<'browser'>;
-  try {
-    browserResult = await prompts(
-      [
-        {
-          type: 'select',
-          name: 'browser',
-          message: pc.reset('If you want to sign your account manifest with your TBA account, please select the OS of your device:'),
-          choices: [
-            { title: 'iOS', value: 'safari' },
-            { title: 'Android', value: 'google chrome' },
-            { title: 'Not using a passkey account', value: 'none' },
-          ],
-        }
-      ],
-      {
-        onCancel: () => {
-          throw new Error('Browser selection cancelled.');
-        },
-      }
-    );
-  } catch (cancelled: any) {
-    console.log(pc.red(`\n${cancelled.message}`));
-    return false;
-  }
-
-  const { browser } = browserResult;
   try {
-    const webpageData = await getWebpageData(browser);
+    const webpageData = await getWebpageData();
     const envContent = `FARCASTER_HEADER=${webpageData.header}\nFARCASTER_PAYLOAD=${webpageData.payload}\nFARCASTER_SIGNATURE=${webpageData.signature}\nNEXT_PUBLIC_URL=${webpageData.domain}`;
     const updatedEnv = existingEnv
       .split('\n')
@@ -237,10 +202,10 @@ async function createMiniKitTemplate() {
     `NEXT_PUBLIC_ONCHAINKIT_PROJECT_NAME=${projectName}
 NEXT_PUBLIC_ONCHAINKIT_API_KEY=${clientKey}
 NEXT_PUBLIC_URL=
-NEXT_PUBLIC_SPLASH_IMAGE_URL=$NEXT_PUBLIC_URL/minikit.png
+NEXT_PUBLIC_SPLASH_IMAGE_URL=$NEXT_PUBLIC_URL/snake.png
 NEXT_PUBLIC_SPLASH_BACKGROUND_COLOR=FFFFFF
-NEXT_PUBLIC_IMAGE_URL=$NEXT_PUBLIC_URL/minikit.png
-NEXT_PUBLIC_ICON_URL=https://onchainkit.xyz/favicon/48x48.png
+NEXT_PUBLIC_IMAGE_URL=$NEXT_PUBLIC_URL/snake.png
+NEXT_PUBLIC_ICON_URL=$NEXT_PUBLIC_URL/snake.png
 NEXT_PUBLIC_VERSION=next
 REDIS_URL=
 REDIS_TOKEN=`