fix layout of transaction list (#208)

gnosisguild · Nov 15, 2024 · 3443792 · 3443792
1 parent a9aa51a
commit 3443792
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 44 deletions.
diff --git a/extension/src/components/Input.tsx b/extension/src/components/Input.tsx
@@ -1,18 +1,31 @@
 import { ReactNode, useId } from 'react'
 
+type RenderProps = {
+  inputId: string
+  descriptionId: string
+}
+
 type InputProps = {
   label: string
-  children: (inputId: string) => ReactNode
+  description?: string
+  children: (props: RenderProps) => ReactNode
 }
 
-export const Input = ({ children, label }: InputProps) => {
-  const id = useId()
+export const Input = ({ children, label, description }: InputProps) => {
+  const inputId = useId()
+  const descriptionId = useId()
 
   return (
     <div className="flex flex-col gap-2">
-      <label htmlFor={id}>{label}</label>
+      <label htmlFor={inputId}>{label}</label>
+
+      {children({ inputId, descriptionId })}
 
-      {children(id)}
+      {description && (
+        <span className="opacity-70" id={descriptionId}>
+          {description}
+        </span>
+      )}
     </div>
   )
 }
diff --git a/extension/src/components/TextInput.tsx b/extension/src/components/TextInput.tsx
@@ -6,15 +6,17 @@ type TextInputProps = Omit<
   'id' | 'type' | 'className'
 > & {
   label: string
+  description?: string
 }
 
-export const TextInput = ({ label, ...props }: TextInputProps) => (
-  <Input label={label}>
-    {(id) => (
+export const TextInput = ({ label, description, ...props }: TextInputProps) => (
+  <Input label={label} description={description}>
+    {({ inputId, descriptionId }) => (
       <input
         {...props}
         type="text"
-        id={id}
+        id={inputId}
+        aria-describedby={descriptionId}
         className="border border-zodiac-light-mustard border-opacity-80 bg-transparent px-3 py-2 font-mono text-sm text-white outline-none transition-all hover:border-white"
       />
     )}

diff --git a/extension/src/panel/app-routes/transactions/BaseTransaction.tsx b/extension/src/panel/app-routes/transactions/BaseTransaction.tsx
diff --git a/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx b/extension/src/panel/app-routes/transactions/DecodedTransaction.tsx
@@ -1,6 +1,5 @@
-import { Box } from '@/components'
+import { Box, TextInput } from '@/components'
 import { FunctionFragment, Result } from 'ethers'
-import { BaseTransaction } from './BaseTransaction'
 
 interface Props {
   functionFragment: FunctionFragment
@@ -14,11 +13,14 @@ export const DecodedTransaction = ({ functionFragment, data }: Props) => {
   return (
     <Box p={2} bg>
       {functionFragment.inputs.length > 0 && (
-        <fieldset className="flex flex-col gap-2">
+        <fieldset className="flex flex-col gap-3">
           {functionFragment.inputs.map((input, i) => (
-            <BaseTransaction value={data[i].toString()}>
-              {input.name} <i className="pl-1 opacity-70">{input.type}</i>
-            </BaseTransaction>
+            <TextInput
+              readOnly
+              defaultValue={data[i].toString()}
+              label={input.name}
+              description={input.type}
+            />
           ))}
         </fieldset>
       )}

diff --git a/extension/src/panel/app-routes/transactions/RawTransaction.tsx b/extension/src/panel/app-routes/transactions/RawTransaction.tsx
@@ -1,11 +1,9 @@
-import { BaseTransaction } from './BaseTransaction'
+import { TextInput } from '@/components'
 
 interface Props {
   data: string
 }
 
 export const RawTransaction = ({ data }: Props) => (
-  <BaseTransaction value={data || ''}>
-    <span>Data</span>
-  </BaseTransaction>
+  <TextInput readOnly defaultValue={data || ''} label="Data" />
 )
diff --git a/extension/src/panel/app-routes/transactions/Transactions.tsx b/extension/src/panel/app-routes/transactions/Transactions.tsx
@@ -63,7 +63,7 @@ export const Transactions = () => {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-4 pb-8 pt-4">
+    <div className="flex flex-1 flex-col gap-4 overflow-hidden pb-8 pt-4">
       <div className="px-4">
         <RouteBubble />
       </div>
@@ -92,10 +92,10 @@ export const Transactions = () => {
         </div>
       </div>
 
-      <div className="flex flex-1 flex-col gap-8 overflow-hidden px-6">
+      <div className="flex flex-1 flex-col gap-8 overflow-hidden">
         <div
           ref={scrollContainerRef}
-          className="exp flex flex-grow flex-col gap-4 overflow-y-auto"
+          className="exp flex flex-grow flex-col gap-4 overflow-y-auto px-6"
         >
           {transactions.map((transactionState, index) => (
             <Transaction
@@ -114,7 +114,7 @@ export const Transactions = () => {
           )}
         </div>
 
-        <div className="flex gap-2">
+        <div className="flex gap-2 px-6">
           {!route.initiator && (
             <Button
               secondary
@@ -124,6 +124,7 @@ export const Transactions = () => {
               Copy transaction data
             </Button>
           )}
+
           <Submit />
         </div>
       </div>

diff --git a/extension/src/panel/app.tsx b/extension/src/panel/app.tsx
@@ -30,7 +30,7 @@ const Root = () => {
           <ProvideZodiacRoutes>
             <ProvideInjectedWallet>
               <ProvideProvider>
-                <div className="flex flex-1 flex-col">
+                <div className="flex h-full flex-1 flex-col">
                   <RouterProvider router={router} />
                   <ZodiacToastContainer />
                 </div>