minifront: transaction view rendering (#1964)

* transaction view ui fixes * changeset * satisfy linter
penumbra-zone · Jan 4, 2025 · a7b0c29 · a7b0c29
1 parent 84f7f49
commit a7b0c29
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/.changeset/pink-rabbits-fry.md b/.changeset/pink-rabbits-fry.md
@@ -0,0 +1,5 @@
+---
+'minifront': minor
+---
+
+transaction view ui fixes
diff --git a/apps/minifront/src/components/tx-details/tx-viewer.tsx b/apps/minifront/src/components/tx-details/tx-viewer.tsx
@@ -18,14 +18,14 @@ import { penumbra } from '../../penumbra';
 
 export enum TxDetailsTab {
   PUBLIC = 'public',
-  PRIVATE = 'private',
   RECEIVER = 'receiver',
+  PRIVATE = 'private',
 }
 
 const OPTIONS = [
   { label: 'Your View', value: TxDetailsTab.PRIVATE },
-  { label: 'Public View', value: TxDetailsTab.PUBLIC },
   { label: 'Receiver View', value: TxDetailsTab.RECEIVER },
+  { label: 'Public View', value: TxDetailsTab.PUBLIC },
 ];
 
 const getMetadata: MetadataFetchFn = async ({ assetId }) => {
@@ -84,7 +84,7 @@ export const TxViewer = ({ txInfo }: { txInfo?: TransactionInfo }) => {
         <>
           <TransactionViewComponent
             txv={
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO: justify
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- txInfo.view is guaranteed to be populated
               txInfo.view!
             }
             metadataFetcher={getMetadata}

diff --git a/packages/ui-deprecated/components/ui/tx/memo-view.tsx b/packages/ui-deprecated/components/ui/tx/memo-view.tsx
@@ -13,11 +13,14 @@ export const MemoViewComponent = ({ memo: { memoView } }: { memo: MemoView }) =>
             <div className='flex flex-col gap-4'>
               <ActionDetails>
                 <ActionDetails.Row label='Return Address'>
-                  {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- TODO: justify not using '?' operator */}
+                  {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- field is always populated when the component is rendered */}
                   <AddressViewComponent view={memoView.value.plaintext!.returnAddress} />
                 </ActionDetails.Row>
                 <ActionDetails.Row label='Memo Text'>
-                  <span className='italic' style={{ wordBreak: 'normal' }}>
+                  <span
+                    className='overflow-visible pr-2 italic text-gray-300'
+                    style={{ wordBreak: 'normal' }}
+                  >
                     {memoView.value.plaintext?.text}
                   </span>
                 </ActionDetails.Row>