Merge pull request #75 from penumbra-zone/ui-transaction-page

Responsive design for `transaction/[HASH]` view
penumbra-zone · Mar 13, 2024 · 047ab57 · 047ab57
2 parents a9426fd + e7c8271
commit 047ab57
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 19 deletions.
diff --git a/src/app/transaction/[hash]/page.tsx b/src/app/transaction/[hash]/page.tsx
@@ -51,7 +51,7 @@ const Page : FC<PageProps> = ({ params }) => {
         <div>
         {txData ? (
           <div className="flex flex-col items-center gap-5 pt-5">
-            <h1 className="sm:text-2xl font-bold">Transaction Event Summary</h1>
+            <h1 className="sm:text-2xl text-lg font-bold">Transaction Event Summary</h1>
             <div className="sm:w-11/12 w-full">
               <Transaction txData={txData} />
             </div>

diff --git a/src/components/Transaction/index.tsx b/src/components/Transaction/index.tsx
@@ -11,24 +11,27 @@ interface TransactionProps {
 const Transaction : FC<TransactionProps> = ({ txData }) => {
   const [txResult, penumbraTx] = txData;
   const abciEvents = txResult.events;
+
   return (
-    <div className="bg-white rounded-sm">
-      <div className="flex flex-wrap justify-between p-5 gap-y-10 w-full">
-        <div className="flex justify-start w-full">
-          <p className="w-1/6">Hash</p>
-          <pre>{txResult.tx_hash}</pre>
+    <div className="bg-white rounded-sm shadow-md">
+      <div className="flex flex-wrap justify-between sm:p-5 p-2 sm:gap-y-10 gap-y-5 w-full">
+        <div className="flex flex-wrap justify-start w-full">
+          <p className="sm:w-1/6 w-full font-semibold">Hash</p>
+          {/* TODO: this width on smaller screens is pretty arbitrary and there's a few instances of this now through the codebase. revisit and implement as consistent tailwind variables. */}
+          {/* TODO: also at the point where JS should be used for copying to clipboard which mitigates most text overflow issues and opens up stylings for improvement. */}
+          <pre className="sm:w-5/6 w-[300px] sm:text-base text-sm break-all whitespace-pre-wrap">{txResult.tx_hash}</pre>
         </div>
-        <div className="flex justify-start w-full">
-          <p className="w-1/6">Block Height</p>
-          <Link href={`/block/${txResult.blocks.height}`}><pre className="underline">{txResult.blocks.height.toString()}</pre></Link>
+        <div className="flex flex-wrap justify-start w-full">
+          <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
+          <Link href={`/block/${txResult.blocks.height}`}><pre className="underline sm:w-0 w-full">{txResult.blocks.height.toString()}</pre></Link>
         </div>
-        <div className="flex justify-start w-full">
-          <p className="w-1/6">Timestamp</p>
-          <pre>{txResult.created_at}</pre>
+        <div className="flex flex-wrap justify-start w-full">
+          <p className="sm:w-1/6 w-full font-semibold">Timestamp</p>
+          <pre className="sm:w-0 w-full">{txResult.created_at}</pre>
         </div>
-        <div className="flex justify-start w-full">
-          <p className="w-1/6 shrink-0">Transaction Data</p>
-          <pre className="w-5/6 break-all whitespace-pre-wrap text-xs p-1 bg-slate-100">
+        <div className="flex flex-wrap justify-start w-full">
+          <p className="sm:w-1/6 sm:shrink-0 w-full font-semibold">Transaction Data</p>
+          <pre className="sm:w-5/6 w-full break-all whitespace-pre-wrap text-xs p-1 bg-slate-100">
             <ReactJson src={penumbraTx.toJson() as object} name={"transaction"} displayDataTypes={false} collapseStringsAfterLength={20} collapsed={5} enableClipboard={true} displayObjectSize={false}/>
           </pre>
         </div>

diff --git a/src/components/ui/data-table.tsx b/src/components/ui/data-table.tsx
@@ -31,8 +31,6 @@ export function DataTable<TData, TValue>({
   data,
 }: DataTableProps<TData, TValue>) {
 
-  console.log("columnVisibility", columnVisibility);
-
   const table = useReactTable({
     data,
     columns,
@@ -42,8 +40,6 @@ export function DataTable<TData, TValue>({
     },
   });
 
-  console.log("table state", table.getState());
-
   return (
     <div className={`${className}`}>
       <div className="rounded-md border">