views: improve approval dialogue rendering

apps/extension/src/routes/popup/approval/approve-deny.tsx

@@ -15,12 +15,25 @@ export const ApproveDeny = ({
   const count = useWindowCountdown(wait);
 
   return (
-    <div className='flex flex-row flex-wrap justify-center gap-4 bg-black p-4 shadow-lg'>
-      <Button variant='gradient' className='w-full' size='lg' onClick={approve} disabled={!!count}>
+    <div
+      className='flex flex-row justify-between gap-4 rounded-md p-4 shadow-md'
+      style={{
+        backgroundColor: '#1A1A1A',
+        paddingBottom: '28px',
+        paddingTop: '28px',
+      }}
+    >
+      <Button
+        variant='gradient'
+        className='w-1/2 py-3.5 text-base'
+        size='lg'
+        onClick={approve}
+        disabled={!!count}
+      >
         Approve {count !== 0 && `(${count})`}
       </Button>
       <Button
-        className='min-w-[50%] grow items-center gap-2 hover:bg-destructive/90'
+        className='w-1/2 py-3.5 text-base hover:bg-destructive/90'
         size='lg'
         variant='destructiveSecondary'
         onClick={deny}
@@ -29,7 +42,7 @@ export const ApproveDeny = ({
       </Button>
       {ignore && (
         <Button
-          className='w-1/3 hover:bg-destructive/90'
+          className='w-1/2 py-3.5 text-base hover:bg-destructive/90'
           size='lg'
           variant='secondary'
           onClick={ignore}

apps/extension/src/routes/popup/approval/transaction/index.tsx

@@ -47,11 +47,12 @@ export const TransactionApproval = () => {
 
   return (
     <div className='flex h-screen flex-col'>
-      <div className='grow overflow-auto p-[30px] pt-10'>
-        <p className='bg-text-linear bg-clip-text pb-2 font-headline text-2xl font-bold text-transparent'>
-          Confirm transaction
-        </p>
-
+      <div className='border-b border-gray-700 p-4'>
+        <h1 className=' bg-text-linear bg-clip-text pb-0 font-headline text-2xl font-bold text-transparent'>
+          Confirm Transaction
+        </h1>
+      </div>
+      <div className='grow overflow-auto p-4'>
         <ViewTabs
           defaultValue={selectedTransactionViewName}
           onValueChange={setSelectedTransactionViewName}
@@ -60,13 +61,15 @@ export const TransactionApproval = () => {
         <TransactionViewComponent txv={selectedTransactionView} metadataFetcher={getMetadata} />
 
         {selectedTransactionViewName === TransactionViewTab.SENDER && (
-          <div className='mt-8'>
+          <div className='mt-4'>
             <JsonViewer jsonObj={authorizeRequest.toJson() as Jsonified<AuthorizeRequest>} />
           </div>
         )}
       </div>
 
-      <ApproveDeny approve={approve} deny={deny} wait={3} />
+      <div className='border-t border-gray-700 p-0'>
+        <ApproveDeny approve={approve} deny={deny} wait={3} />
+      </div>
     </div>
   );
 };

apps/extension/src/routes/popup/home/index.tsx

@@ -50,16 +50,16 @@ export const PopupIndex = () => {
     <>
       <BlockSync />
 
-      <div className='flex h-full grow flex-col items-stretch gap-[30px] bg-logo bg-left-bottom px-[30px] pb-[30px]'>
+      <div className='flex h-full grow flex-col items-stretch gap-[15px] bg-logo bg-left-bottom px-[15px] pb-[15px]'>
         <IndexHeader />
 
-        <div className='flex flex-col gap-8'>
+        <div className='flex flex-col gap-4'>
           {activeWallet && <SelectAccount getAddrByIndex={getAddrByIndex(activeWallet)} />}
         </div>
 
         <ValidateAddress />
 
-        <div className='grow' />
+        <div className='shrink-0 grow' />
 
         <FrontendLink />
       </div>

packages/ui/components/ui/tabs/index.tsx

@@ -13,7 +13,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-[52px] items-center justify-center rounded-lg bg-background px-2',
+      'inline-flex h-[52px] items-center justify-center rounded-lg bg-background px-2 mb-4',
       className,
     )}
     {...props}

packages/ui/components/ui/tx/actions-views/action-details.tsx

@@ -74,7 +74,7 @@ const ActionDetailsRow = ({
           <span>{label}</span>
         </span>
       ) : (
-        <span className='whitespace-nowrap break-keep'>{label}</span>
+        <span className='whitespace-nowrap break-keep text-base'>{label}</span>
       )}
 
       <Separator />

packages/ui/components/ui/tx/actions-views/output.tsx

@@ -14,9 +14,12 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
       <ViewBox
         label='Output'
         visibleContent={
-          <ValueWithAddress addressView={address} label='to'>
+          <div className='flex items-center justify-between gap-3'>
             <ValueViewComponent view={note.value} />
-          </ValueWithAddress>
+            <ValueWithAddress addressView={address} label='to'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );

packages/ui/components/ui/tx/actions-views/spend.tsx

@@ -1,9 +1,9 @@
 import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '../../value';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/spend-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
+import { ValueViewComponent } from '../../value';
 
 export const SpendViewComponent = ({ value }: { value: SpendView }) => {
   if (value.spendView.case === 'visible') {
@@ -14,9 +14,12 @@ export const SpendViewComponent = ({ value }: { value: SpendView }) => {
       <ViewBox
         label='Spend'
         visibleContent={
-          <ValueWithAddress addressView={address} label='from'>
+          <div className='flex items-center justify-between gap-3'>
             <ValueViewComponent view={note.value} />
-          </ValueWithAddress>
+            <ValueWithAddress addressView={address} label='from'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );

packages/ui/components/ui/tx/actions-views/swap/index.tsx

@@ -53,7 +53,7 @@ export const SwapViewComponent = ({
               )}
 
               <ActionDetails.Row label='Swap Claim Fee'>
-                <div className='font-mono'>
+                <div className='text-base'>
                   <ValueViewComponent view={prepaidClaimFee} />
                 </div>
               </ActionDetails.Row>

packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx

@@ -1,5 +1,4 @@
 import { ValueViewComponent } from '../../../value';
-import { ArrowRight } from 'lucide-react';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { getAmount } from '@penumbra-zone/getters/value-view';
 
@@ -13,12 +12,15 @@ export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueV
   const outputAmount = getAmount.optional(output);
 
   return (
-    <div className='flex items-center gap-2'>
+    <div className='flex items-center justify-between'>
       <ValueViewComponent view={input} />
-
-      <ArrowRight />
-
-      <ValueViewComponent view={output} showValue={!!outputAmount} />
+      <div className='relative mx-2 flex items-center justify-center'>
+        <div className='flex h-0.5 w-3.5 items-center bg-white' />
+        <div className='ml-[2px] size-0 border-y-4 border-l-[6px] border-y-transparent border-l-white' />
+      </div>
+      <div className='flex items-center justify-end'>
+        <ValueViewComponent view={output} showValue={!!outputAmount} />
+      </div>
     </div>
   );
 };

packages/ui/components/ui/tx/actions-views/value-with-address.tsx

@@ -11,7 +11,6 @@ export const ValueWithAddress = ({
   label,
   addressView,
 }: {
-  /** What to display before the address. Typically a `ValueViewComponent`. */
   children: ReactNode;
   label: 'from' | 'to';
   addressView?: AddressView;
@@ -22,8 +21,9 @@ export const ValueWithAddress = ({
     {addressView && (
       <div className='flex items-center gap-2 overflow-hidden'>
         <span className='whitespace-nowrap font-mono text-sm italic text-foreground'>{label}</span>
-
-        <AddressViewComponent view={addressView} />
+        <div className='max-w-[150px] truncate'>
+          <AddressViewComponent view={addressView} />
+        </div>
       </div>
     )}
   </div>

packages/ui/components/ui/tx/index.tsx

@@ -64,14 +64,14 @@ export const TransactionViewComponent = ({
   const { feeValueView, isLoading, error } = useFeeMetadata(txv, metadataFetcher);
 
   return (
-    <div className='flex flex-col gap-8'>
+    <div className='flex flex-col gap-4'>
       {txv.bodyView?.memoView?.memoView && <MemoViewComponent memo={txv.bodyView.memoView} />}
-      <ViewSection heading='Actions'>
+      <ViewSection heading={<div className='pl-[3px]'>Actions</div>}>
         {txv.bodyView?.actionViews.map((av, i) => (
           <ActionViewComponent av={av} feeValueView={feeValueView} key={i} />
         ))}
       </ViewSection>
-      <ViewSection heading='Parameters'>
+      <ViewSection heading={<div className='pl-[3px]'>Parameters</div>}>
         <ViewBox
           label='Transaction Fee'
           visibleContent={

packages/ui/components/ui/tx/memo-view.tsx

@@ -10,13 +10,13 @@ export const MemoViewComponent = ({ memo: { memoView } }: { memo: MemoView }) =>
         <ViewBox
           label='Memo'
           visibleContent={
-            <div className='flex flex-col gap-4'>
+            <div className='flex flex-col gap-2'>
               <ActionDetails>
                 <ActionDetails.Row label='Return Address'>
                   <AddressViewComponent view={memoView.value.plaintext!.returnAddress} />
                 </ActionDetails.Row>
                 <ActionDetails.Row label='Memo Text'>
-                  <span className='italic' style={{ wordBreak: 'normal' }}>
+                  <span className='text-sm italic' style={{ wordBreak: 'normal' }}>
                     {memoView.value.plaintext?.text}
                   </span>
                 </ActionDetails.Row>

packages/ui/components/ui/tx/viewbox.tsx

@@ -11,44 +11,43 @@ export interface ViewBoxProps {
   isOpaque?: boolean;
 }
 
-const Label = ({ label }: { label: string }) => <span className='text-lg'>{label}</span>;
+const Label = ({ label }: { label: string }) => (
+  <span className='text-lg font-bold text-gray-300'>{label}</span>
+);
 
 export const ViewBox = ({ label, visibleContent, isOpaque }: ViewBoxProps) => {
   // if isOpaque is undefined, set it to !visibleContent
-  isOpaque = isOpaque ?? !visibleContent;
+  isOpaque = isOpaque ?? !visibleContent?.props;
+
   return (
     <Box overflow='hidden'>
-      <div
-        className={cn(
-          'flex flex-col gap-1 break-all overflow-hidden',
-          isOpaque ? 'cursor-not-allowed' : '',
-        )}
-      >
-        <div className='flex items-center gap-2 self-start'>
-          <span className={cn('text-base font-bold', isOpaque ? 'text-gray-600' : '')}>
-            {!isOpaque && <Label label={label} />}
-            {isOpaque && (
-              <div className='flex gap-2'>
+      <div className={cn('flex flex-col gap-2', isOpaque ? 'cursor-not-allowed' : '')}>
+        <div className='flex items-center gap-2'>
+          <span className={cn('text-base', isOpaque ? 'text-gray-600' : '')}>
+            {isOpaque ? (
+              <div className='flex items-center gap-2'>
                 <IncognitoIcon fill='#4b5563' />
                 <Label label={label} />
               </div>
+            ) : (
+              <Label label={label} />
             )}
           </span>
         </div>
-        {visibleContent}
+        {visibleContent && <div className='border-t border-gray-700 pt-2'>{visibleContent}</div>}
       </div>
     </Box>
   );
 };
 
 export interface ViewSectionProps {
-  heading: string;
+  heading: React.ReactNode;
   children?: React.ReactNode;
 }
 
 export const ViewSection = ({ heading, children }: ViewSectionProps) => {
   return (
-    <div className='grid gap-4'>
+    <div className='grid gap-2'>
       <div className='text-xl font-bold'>{heading}</div>
       {children}
     </div>

packages/ui/components/ui/value/value.tsx

@@ -38,7 +38,9 @@ export const ValueComponent = ({
         </span>
       )}
       {showDenom && (
-        <span className='truncate font-mono text-xs text-muted-foreground'>{symbol}</span>
+        <span className='max-w-[80px] truncate font-mono text-xs text-muted-foreground'>
+          {symbol}
+        </span>
       )}
     </div>
   </Pill>