Start revisions of UI Tool layout

developer-preview/src/app/ContractInfo.tsx

@@ -0,0 +1,28 @@
+import { formatShortAddress } from "~/app/formatShortAddress";
+import { UI } from "~/app/UI";
+import { type Deploymnent, type PreviewData } from "~/types/PreviewData";
+
+export const ContractInfo = ({ data }: { data: PreviewData }) => {
+  return (
+    <div>
+      <UI.HeadingField>Contract</UI.HeadingField>
+      <div>
+        {data.contract.name}
+        {data.contract.deployments.map(({ address }: Deploymnent) => (
+          <span key={address}>
+            {" "}
+            (
+            <UI.BlueLink
+              href={`https://etherscan.io/address/${address}`}
+              title={address}
+              target="_blank"
+            >
+              {formatShortAddress(address)}
+            </UI.BlueLink>
+            )
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};

developer-preview/src/app/DevicesDemo.tsx

@@ -26,7 +26,7 @@ export const DevicesDemo = ({
   return (
     <>
       <DeviceContext.Provider value={selectedDevice}>
-        <div className="overflow-x-scroll bg-[#383838] p-16">
+        <div className="overflow-x-scroll p-16">
           <div className="flex w-fit space-x-10 pe-16 font-inter text-sm">
             <Screens
               chainId={chainId}

developer-preview/src/app/PreviewTool.tsx

@@ -2,14 +2,16 @@
 
 import { useEffect, useState } from "react";
 import { DevicesDemo } from "~/app/DevicesDemo";
-import { PreviewForm } from "~/app/PreviewForm";
+import { ContractInfo } from "~/app/ContractInfo";
 import { UI } from "~/app/UI";
 import { SelectMetadataFile } from "~/app/SelectMetadataFile";
 
 import { type PreviewData } from "~/types/PreviewData";
 import { getPreviewData } from "~/utils/getPreviewData";
 import { type ERC7730Schema } from "~/types";
 import { SelectDevice } from "~/app/SelectDevice";
+import { SelectOperation } from "~/app/SelectOperation";
+import { SelectValues } from "~/app/SelectValues";
 
 interface Props {
   jsonInRegistry: string[];
@@ -73,41 +75,56 @@ export default function PreviewTool({ jsonInRegistry }: Props) {
   }
 
   return (
-    <main>
-      <div className="container p-16 text-lg">
-        <UI.Heading1>Open Clear Signing Format preview</UI.Heading1>
-        <form className="flex flex-col gap-6">
+    <>
+      <div className="border-b border-[#fff2] bg-[#fff1]">
+        <UI.Container as="header">
+          <UI.Heading1>Open Clear Signing Format preview</UI.Heading1>
+        </UI.Container>
+
+        <UI.Container className="flex gap-3">
           <SelectMetadataFile
             fileKey={fileKey}
             jsonInRegistry={jsonInRegistry}
             setFileKey={setFileKey}
           />
+
           {previewData && (
-            <PreviewForm
-              data={previewData}
-              selectedOperation={selectedOperation}
-              setSelectedOperation={setSelectedOperation}
-            />
+            <>
+              <SelectValues />
+              <SelectOperation
+                data={previewData}
+                selectedOperation={selectedOperation}
+                setSelectedOperation={setSelectedOperation}
+              />
+              <ContractInfo data={previewData} />
+            </>
           )}
-          {previewData && (
-            <SelectDevice
-              selectedDevice={selectedDevice}
-              setSelectedDevice={setSelectedDevice}
-            />
-          )}
-        </form>
-        {errorMessage && <UI.Error>{errorMessage}</UI.Error>}
+        </UI.Container>
+
+        {errorMessage && (
+          <UI.Container>
+            <UI.Error>{errorMessage}</UI.Error>
+          </UI.Container>
+        )}
       </div>
 
       {previewData && (
         <>
-          <DevicesDemo
-            data={previewData}
-            selectedDevice={selectedDevice}
-            selectedOperation={selectedOperation}
-          />
+          <div className="bg-tool-background">
+            <UI.Container>
+              <SelectDevice
+                selectedDevice={selectedDevice}
+                setSelectedDevice={setSelectedDevice}
+              />
+            </UI.Container>
+            <DevicesDemo
+              data={previewData}
+              selectedDevice={selectedDevice}
+              selectedOperation={selectedOperation}
+            />
+          </div>
         </>
       )}
-    </main>
+    </>
   );
 }

developer-preview/src/app/SelectDevice.tsx

@@ -17,12 +17,9 @@ export const SelectDevice = ({
   };
 
   return (
-    <div>
-      <UI.HeadingField>Preview on</UI.HeadingField>
-      <UI.Select defaultValue={selectedDevice} onChange={onChangeDevice}>
-        <option value="flex">Ledger Flex</option>
-        <option value="stax">Ledger Stax</option>
-      </UI.Select>
-    </div>
+    <UI.Select defaultValue={selectedDevice} onChange={onChangeDevice}>
+      <option value="flex">Ledger Flex</option>
+      <option value="stax">Ledger Stax</option>
+    </UI.Select>
   );
 };

developer-preview/src/app/SelectOperation.tsx

@@ -0,0 +1,32 @@
+import { type Dispatch, type SetStateAction } from "react";
+import { UI } from "~/app/UI";
+import { type PreviewData } from "~/types/PreviewData";
+
+export const SelectOperation = ({
+  data,
+  selectedOperation,
+  setSelectedOperation,
+}: {
+  data: PreviewData;
+  selectedOperation: string;
+  setSelectedOperation: Dispatch<SetStateAction<string>>;
+}) => {
+  const onChangeOperation = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selection = e.target.value;
+    localStorage.setItem("selectedOperation", selection);
+    setSelectedOperation(selection);
+  };
+
+  return (
+    <div>
+      <UI.HeadingField>Operation</UI.HeadingField>
+      <UI.Select defaultValue={selectedOperation} onChange={onChangeOperation}>
+        {data.operations.map(({ id, intent }) => (
+          <UI.Option key={`${data.contract.name}-${id}`} value={id}>
+            {intent}
+          </UI.Option>
+        ))}
+      </UI.Select>
+    </div>
+  );
+};

developer-preview/src/app/SelectValues.tsx

@@ -0,0 +1,12 @@
+import { UI } from "~/app/UI";
+
+export const SelectValues = () => {
+  return (
+    <div>
+      <UI.HeadingField>Preview with</UI.HeadingField>
+      <UI.Select disabled onChange={() => null}>
+        <UI.Option value="">Placeholder values</UI.Option>
+      </UI.Select>
+    </div>
+  );
+};

developer-preview/src/app/UI.tsx

@@ -1,4 +1,5 @@
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
+import { cn } from "~/utils/cn";
 
 export const UI = {
   BlueLink: ({
@@ -11,11 +12,23 @@ export const UI = {
       {children}
     </a>
   ),
+  Container: ({
+    as = "div",
+    children,
+    className,
+  }: {
+    as?: keyof HTMLElementTagNameMap;
+    children: ReactNode;
+    className?: string;
+  }) => {
+    const El = as;
+    return <El className={cn("p-4", className)}>{children}</El>;
+  },
   HeadingField: ({ children }: { children: string }) => (
     <div className="mb-2 text-sm uppercase text-neutral-400">{children}</div>
   ),
   Heading1: ({ children }: { children: string }) => (
-    <h1 className="mb-10 text-3xl font-medium">{children}</h1>
+    <h1 className="text-sm font-medium">{children}</h1>
   ),
   Option: ({
     children,

developer-preview/tailwind.config.ts

@@ -10,6 +10,10 @@ export default {
       colors: {
         "light-grey": "#E0E0E0",
         "dark-grey": "#959595",
+        "tool-background": "#131214",
+        "tool-neutral": {
+          70: "#949494",
+        },
       },
     },
   },