fix: redesign

coinbase · Mar 12, 2025 · a0b52e4 · a0b52e4
1 parent 81294cd
commit a0b52e4
Show file tree

Hide file tree

Showing 30 changed files with 724 additions and 1,327 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,118 +124,96 @@ 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
-        label="1"
-        description={
-          <>
-            <p className="p-4">
-              Use coinbase smart wallet if you have a passkey farcaster account
-              through TBA
-            </p>
-            <p className="p-4">
-              Use MetaMask or Phantom to set up a wallet using your warpcast
-              recovery key
-            </p>
-          </>
-        }
-      >
-        <Wallet className="w-[206px]">
-          <ConnectWallet className="w-full">
-            <Avatar className="h-6 w-6" />
-            <Name />
-          </ConnectWallet>
-          <WalletDropdown>
-            <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
-              <Avatar />
+    <main className='flex min-h-screen w-full max-w-[600px] flex-col items-center justify-center gap-6 font-sans'>
+      <div className='border border-grey-500 p-4'>
+        <Step
+          number={1}
+          label="Connect your wallet"
+          description="Set up a wallet using your warpcast recovery key.  This is available in warp cast under settings/account."
+        >
+          <Wallet>
+            <ConnectWallet className="w-full">
+              <Avatar className="h-6 w-6" />
               <Name />
-              <Address />
-              <EthBalance />
-            </Identity>
-            <WalletDropdownDisconnect />
-          </WalletDropdown>
-        </Wallet>
-      </Step>
-
-      <Step
-        label="2"
-        disabled={!address}
-        description={
-          <>
-            <p className="p-4">Enter the domain your app will be hosted on</p>
-            <p className="p-4">
-              This will be used to generate the account manifest and also added
-              to your .env file as the `NEXT_PUBLIC_URL` variable
-            </p>
-          </>
-        }
-      >
-        <div className="flex flex-col gap-2">
-          <input
-            type="text"
-            placeholder="Enter Domain"
-            className="rounded border border-gray-300 px-4 py-2"
-            value={domain}
-            onChange={handleDomainChange}
-            onBlur={handleValidateUrl}
-          />
-          {domainError && <p className="text-red-500">{domainError}</p>}
-        </div>
-      </Step>
-
-      <Step
-        label="3"
-        disabled={!address || !domain || fid === 0}
-        description={
-          <>
-            <p className="p-4">
-              This will generate the account manifest and sign it with your
-              wallet
-            </p>
-            <p className="p-4">
-              The account manifest will be saved to your .env file as
-              `FARCASTER_HEADER`, `FARCASTER_PAYLOAD` and `FARCASTER_SIGNATURE`
-              variables
-            </p>
-          </>
-        }
-      >
-        <div className="flex flex-col gap-2">
-          {fid === 0 ? (
-            <p className="text-red-500">
-              There is no FID associated with this account, please connect with
-              your TBA passkey account.
-            </p>
-          ) : (
-            <p>Your FID is {fid}</p>
-          )}
-
-          <button
-            type="button"
-            disabled={!address || !domain || fid === 0}
-            onClick={generateAccountAssociation}
-            className={`rounded px-4 py-2 text-white ${
-              !address || !domain || fid === 0
-                ? 'bg-blue-200!'
-                : 'bg-blue-800! hover:bg-blue-600!'
-            }`}
-          >
-            {isPending ? 'Signing...' : 'Sign Account Manifest'}
-          </button>
-          {error && (
-            <p className="text-red-500">
-              {error.message.split('\n').map((line) => (
-                <span key={line}>
-                  {line}
-                  <br />
-                </span>
-              ))}
-            </p>
-          )}
-        </div>
-      </Step>
-      <Success accountAssocation={accountAssocation} />
+            </ConnectWallet>
+            <WalletDropdown>
+              <Identity className="px-4 pt-3 pb-2" hasCopyAddressOnClick={true}>
+                <Avatar />
+                <Name />
+                <Address />
+                <EthBalance />
+              </Identity>
+              <WalletDropdownDisconnect />
+            </WalletDropdown>
+          </Wallet>
+        </Step>
+
+        <Step
+          number={2}
+          label="Enter the domain of your app"
+          disabled={!address}
+          description="This will be used to generate the account manifest and also added to your .env file as the `NEXT_PUBLIC_URL` variable"
+        >
+          <div className="flex flex-col gap-2">
+            <input
+              type="text"
+              placeholder="Enter the domain"
+              className="rounded border border-gray-300 px-4 py-2"
+              value={domain}
+              onChange={handleDomainChange}
+              onBlur={handleValidateUrl}
+            />
+            {domainError && <p className="text-red-500">{domainError}</p>}
+          </div>
+        </Step>
+
+        <Step
+          number={3}
+          label="Sign to generate and save your account manifeset"
+          disabled={!address || !domain || fid === 0}
+          description="The account manifest will be saved to your .env file as `FARCASTER_HEADER`, `FARCASTER_PAYLOAD` and `FARCASTER_SIGNATURE` variables"
+        >
+          <div className="flex flex-col gap-2">
+            {fid === 0 ? (
+              <p className="text-red-500">
+                There is no FID associated with this account, please connect with
+                your TBA passkey account.
+              </p>
+            ) : (
+              <p>Your FID is {fid}</p>
+            )}
+
+            <button
+              type="button"
+              disabled={!address || !domain || fid === 0}
+              onClick={generateAccountAssociation}
+              className={`w-fit rounded px-6 py-2 text-white ${
+                !address || !domain || fid === 0
+                  ? 'bg-blue-200!'
+                  : 'bg-blue-800! hover:bg-blue-600!'
+              }`}
+            >
+              {isPending ? 'Signing...' : 'Sign'}
+            </button>
+            {error && (
+              <p className="text-red-500">
+                {error.message.split('\n').map((line) => (
+                  <span key={line}>
+                    {line}
+                    <br />
+                  </span>
+                ))}
+              </p>
+            )}
+          </div>
+        </Step>
+        <Success accountAssocation={accountAssocation} handleClose={handleClose} />
+      </div>
     </main>
   );
 }

diff --git a/account-manifest/src/components/Step.tsx b/account-manifest/src/components/Step.tsx
@@ -1,22 +1,26 @@
 type StepProps = {
   disabled?: boolean;
+  number: number;
   label: string;
   children: React.ReactNode;
   description?: React.ReactNode;
 };
 
-export function Step({ disabled, label, description, children }: StepProps) {
+export function Step({ disabled, number, label, description, children }: StepProps) {
   return (
     <div
-      className={`flex w-full items-center gap-4 ${disabled ? 'opacity-50' : ''}`}
+      className={`flex w-full items-center gap-4 py-4 ${disabled ? 'opacity-50' : ''}`}
     >
-      <div className="flex h-[50px] w-[50px] shrink-0 items-center justify-center rounded-full border-2 border-gray-300 p-4">
-        {label}
+      <div className="flex items-center gap-2">
+        <div className='flex h-[30px] w-[30px] shrink-0 items-center justify-center self-start rounded-full border-2 border-[#E5E7EB] bg-[#E5E7EB] p-4 text-black'>
+          {number}
+        </div>
+        <div className='p-2 font-medium text-black text-sm'>
+          <div>{label}</div>
+          <div className='py-2 text-gray-500 text-sm'>{description}</div>
+          <div>{children}</div>
+        </div>
       </div>
-      <div className="flex-shrink-0 flex-grow-0 basis-[206px]">{children}</div>
-      {description && (
-        <div className="text-gray-500 text-sm">{description}</div>
-      )}
     </div>
   );
 }
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,12 +19,8 @@ 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 flex-col gap-2 rounded p-4 text-black">
       <div className="flex items-center justify-between">
         <h3 className="font-bold text-xl">
           Account Association Generated Successfully!
@@ -36,12 +32,12 @@ export function Success({ accountAssocation }: SuccessProps) {
               JSON.stringify(displayAccountAssocation, null, 2),
             )
           }
-          className="rounded bg-blue-800! px-2 py-1 text-sm hover:bg-blue-600!"
+          className='rounded bg-blue-800! px-2 py-1 text-sm text-white hover:bg-blue-600!'
         >
           Copy
         </button>
       </div>
-      <pre className="overflow-auto rounded p-4">
+      <pre className='max-w-[600px] overflow-auto rounded p-4'>
         {`{
   header: ${accountAssocation.header},
   payload: ${accountAssocation.payload},
@@ -55,10 +51,10 @@ export function Success({ accountAssocation }: SuccessProps) {
       </h3>
       <button
         type="button"
-        className="rounded bg-blue-800! px-2 py-2 hover:bg-blue-600!"
+        className="rounded bg-blue-800! px-2 py-2 text-white hover:bg-blue-600!"
         onClick={handleClose}
       >
-        This window will close in{' '}
+        This window will close automatically in{' '}
         <Timer startMs={5000} callback={handleClose} />
       </button>
     </div>

diff --git a/account-manifest/src/index.css b/account-manifest/src/index.css
@@ -7,7 +7,7 @@
 
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
+  background-color: #ffffff;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;

diff --git a/create-onchain/.gitignore b/create-onchain/.gitignore
@@ -1,6 +1,3 @@
-src/manifest/*
-!src/manifest/.gitkeep
-
 dist
 /coverage
 

diff --git a/create-onchain/package.json b/create-onchain/package.json
@@ -5,7 +5,7 @@
   "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:manifest": "cd ../account-manifest && bun install && bun run build && cd ../create-onchain && mkdir -p dist/manifest && cp -R ../account-manifest/dist/* ./dist/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",