From ac920a02c864bc97c294c45708540b814aa145ae Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Fri, 22 Nov 2024 00:58:14 -0800
Subject: [PATCH 1/8] use valueViewComponent from ui library

---
 apps/extension/package.json                   |  1 +
 packages/ui/components/ui/tx/action-view.tsx  |  2 ++
 .../ui/tx/actions-views/delegator-vote.tsx    | 15 +++++++--
 .../components/ui/tx/actions-views/output.tsx | 15 +++++++--
 .../components/ui/tx/actions-views/spend.tsx  | 15 +++++++--
 .../ui/tx/actions-views/swap/index.tsx        | 27 ++++++++++++++--
 .../ui/tx/actions-views/swap/one-way-swap.tsx | 31 ++++++++++++++++---
 .../ui/tx/actions-views/swap/swap-claim.tsx   | 27 ++++++++++++++--
 .../progress-bar/index.tsx                    | 28 ++++++++++++++---
 packages/ui/components/ui/tx/index.tsx        | 15 +++++++--
 packages/ui/package.json                      |  1 +
 11 files changed, 154 insertions(+), 23 deletions(-)

diff --git a/apps/extension/package.json b/apps/extension/package.json
index 1cf201ee..cbb6906b 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -32,6 +32,7 @@
     "@penumbra-zone/transport-chrome": "8.0.1",
     "@penumbra-zone/transport-dom": "7.5.0",
     "@penumbra-zone/types": "26.1.0",
+    "@penumbra-zone/ui": "13.3.1",
     "@penumbra-zone/wasm": "32.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@repo/context": "workspace:*",
diff --git a/packages/ui/components/ui/tx/action-view.tsx b/packages/ui/components/ui/tx/action-view.tsx
index 79c0b0a9..94838ef7 100644
--- a/packages/ui/components/ui/tx/action-view.tsx
+++ b/packages/ui/components/ui/tx/action-view.tsx
@@ -61,6 +61,8 @@ const getLabelForActionCase = (actionCase: ActionView['actionView']['case']): st
   return String(actionCase);
 };
 
+// note: ensure to update the ValueViewComponent to handle unimplemented views
+// once support for them is added.
 export const ActionViewComponent = ({
   av: { actionView },
   feeValueView,
diff --git a/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx b/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
index de2b6ade..da465712 100644
--- a/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
+++ b/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
@@ -1,5 +1,6 @@
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { getAddress } from '@penumbra-zone/getters/note-view';
 import { ActionDetails } from './action-details';
 import {
@@ -116,7 +117,17 @@ const VoteBodyDetails = ({ body }: { body?: DelegatorVoteBody }) => {
       )}
       {!!body?.unbondedAmount && (
         <ActionDetails.Row label='Voting power'>
-          <ValueViewComponent view={umValueView(body.unbondedAmount)} />
+          <Density compact>
+            <div className='ml-4'>
+              <ValueViewComponent
+                valueView={umValueView(body.unbondedAmount)}
+                context='default'
+                priority='primary'
+                hideSymbol={true}
+                abbreviate={false}
+              />
+            </div>
+          </Density>
         </ActionDetails.Row>
       )}
     </>
diff --git a/packages/ui/components/ui/tx/actions-views/output.tsx b/packages/ui/components/ui/tx/actions-views/output.tsx
index 8c525842..dac09870 100644
--- a/packages/ui/components/ui/tx/actions-views/output.tsx
+++ b/packages/ui/components/ui/tx/actions-views/output.tsx
@@ -1,6 +1,7 @@
 import { OutputView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/output-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
@@ -15,7 +16,17 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
         label='Output'
         visibleContent={
           <ValueWithAddress addressView={address} label='to'>
-            <ValueViewComponent view={note.value} />
+            <Density compact>
+              <div className='ml-4'>
+                <ValueViewComponent
+                  valueView={note.value}
+                  context='default'
+                  priority='primary'
+                  hideSymbol={true}
+                  abbreviate={false}
+                />
+              </div>
+            </Density>
           </ValueWithAddress>
         }
       />
diff --git a/packages/ui/components/ui/tx/actions-views/spend.tsx b/packages/ui/components/ui/tx/actions-views/spend.tsx
index 47254b1c..ea0ea878 100644
--- a/packages/ui/components/ui/tx/actions-views/spend.tsx
+++ b/packages/ui/components/ui/tx/actions-views/spend.tsx
@@ -1,6 +1,7 @@
 import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/spend-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
@@ -15,7 +16,17 @@ export const SpendViewComponent = ({ value }: { value: SpendView }) => {
         label='Spend'
         visibleContent={
           <ValueWithAddress addressView={address} label='from'>
-            <ValueViewComponent view={note.value} />
+            <Density compact>
+              <div className='ml-4'>
+                <ValueViewComponent
+                  valueView={note.value}
+                  context='default'
+                  priority='primary'
+                  hideSymbol={true}
+                  abbreviate={false}
+                />
+              </div>
+            </Density>
           </ValueWithAddress>
         }
       />
diff --git a/packages/ui/components/ui/tx/actions-views/swap/index.tsx b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
index aab630b1..b183e8c0 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/index.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
@@ -9,7 +9,8 @@ import {
   getClaimFeeFromSwapView,
   getClaimTx,
 } from '@penumbra-zone/getters/swap-view';
-import { ValueViewComponent } from '../../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { ActionDetails } from '../action-details';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 
@@ -48,13 +49,33 @@ export const SwapViewComponent = ({
             <ActionDetails>
               {oneWaySwap?.unfilled && (
                 <ActionDetails.Row label='Unfilled'>
-                  <ValueViewComponent view={oneWaySwap.unfilled} />
+                  <Density compact>
+                    <div className='ml-4'>
+                      <ValueViewComponent
+                        valueView={oneWaySwap.unfilled}
+                        context='default'
+                        priority='primary'
+                        hideSymbol={true}
+                        abbreviate={false}
+                      />
+                    </div>
+                  </Density>
                 </ActionDetails.Row>
               )}
 
               <ActionDetails.Row label='Swap Claim Fee'>
                 <div className='font-mono'>
-                  <ValueViewComponent view={prepaidClaimFee} />
+                  <Density compact>
+                    <div className='ml-4'>
+                      <ValueViewComponent
+                        valueView={prepaidClaimFee}
+                        context='default'
+                        priority='primary'
+                        hideSymbol={true}
+                        abbreviate={false}
+                      />
+                    </div>
+                  </Density>
                 </div>
               </ActionDetails.Row>
 
diff --git a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
index 6fa0c7f7..649176ab 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
@@ -1,7 +1,8 @@
-import { ValueViewComponent } from '../../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 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';
+// import { getAmount } from '@penumbra-zone/getters/value-view';
 
 /**
  * Renders a one-way swap (which should be the only kind of swap that ever
@@ -10,15 +11,35 @@ import { getAmount } from '@penumbra-zone/getters/value-view';
  * 1.23INPUT -> 4.56OUTPUT
  */
 export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueView }) => {
-  const outputAmount = getAmount.optional(output);
+  // const outputAmount = getAmount.optional(output);
 
   return (
     <div className='flex items-center gap-2'>
-      <ValueViewComponent view={input} />
+      <Density compact>
+        <div className='ml-4'>
+          <ValueViewComponent
+            valueView={input}
+            context='default'
+            priority='primary'
+            hideSymbol={true}
+            abbreviate={false}
+          />
+        </div>
+      </Density>
 
       <ArrowRight />
 
-      <ValueViewComponent view={output} showValue={!!outputAmount} />
+      <Density compact>
+        <div className='ml-4'>
+          <ValueViewComponent
+            valueView={output}
+            context='default'
+            priority='primary'
+            hideSymbol={true}
+            abbreviate={false}
+          />
+        </div>
+      </Density>
     </div>
   );
 };
diff --git a/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx b/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
index 749d109c..d0513d59 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
@@ -10,7 +10,8 @@ import {
 import { getAmount } from '@penumbra-zone/getters/value-view';
 import { getAmount as getAmountFee } from '@penumbra-zone/getters/fee';
 import { isZero, joinLoHiAmount } from '@penumbra-zone/types/amount';
-import { ValueViewComponent } from '../../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { Amount } from '@penumbra-zone/protobuf/penumbra/core/num/v1/num_pb';
 
 const getClaimLabel = (
@@ -44,10 +45,30 @@ export const SwapClaimViewComponent = ({ value }: { value: SwapClaimView }) => {
             <ActionDetails.Row label={claimLabel}>
               <div className='flex gap-2'>
                 {output1Amount && !isZero(output1Amount) && (
-                  <ValueViewComponent view={output1Value} />
+                  <Density compact>
+                    <div className='ml-4'>
+                      <ValueViewComponent
+                        valueView={output1Value}
+                        context='default'
+                        priority='primary'
+                        hideSymbol={true}
+                        abbreviate={false}
+                      />
+                    </div>
+                  </Density>
                 )}
                 {output2Amount && !isZero(output2Amount) && (
-                  <ValueViewComponent view={output2Value} />
+                  <Density compact>
+                    <div className='ml-4'>
+                      <ValueViewComponent
+                        valueView={output2Value}
+                        context='default'
+                        priority='primary'
+                        hideSymbol={true}
+                        abbreviate={false}
+                      />
+                    </div>
+                  </Density>
                 )}
               </div>
             </ActionDetails.Row>
diff --git a/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx b/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
index 117d840d..d102cb05 100644
--- a/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
+++ b/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
@@ -1,5 +1,6 @@
 import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '../../../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { DutchAuction } from '@penumbra-zone/protobuf/penumbra/core/component/auction/v1/auction_pb';
 import { Separator } from '../../../separator';
 import { Indicator } from './indicator';
@@ -41,8 +42,17 @@ export const ProgressBar = ({
 
   return (
     <div className='relative flex grow items-center justify-between gap-2 overflow-hidden'>
-      <ValueViewComponent view={input} size='sm' />
-
+      <Density compact>
+        <div className='ml-4'>
+          <ValueViewComponent
+            valueView={input}
+            context='default'
+            priority='primary'
+            hideSymbol={true}
+            abbreviate={false}
+          />
+        </div>
+      </Density>
       <div className='relative flex min-h-4 shrink grow items-center overflow-hidden'>
         {!auctionIsUpcoming && (
           <Indicator dutchAuction={dutchAuction} fullSyncHeight={fullSyncHeight} />
@@ -84,7 +94,17 @@ export const ProgressBar = ({
       </div>
 
       {outputMetadata && (
-        <ValueViewComponent view={getEmptyValueView(outputMetadata)} size='sm' showValue={false} />
+        <Density compact>
+          <div className='ml-4'>
+            <ValueViewComponent
+              valueView={getEmptyValueView(outputMetadata)}
+              context='default'
+              priority='primary'
+              hideSymbol={true}
+              abbreviate={false}
+            />
+          </div>
+        </Density>
       )}
     </div>
   );
diff --git a/packages/ui/components/ui/tx/index.tsx b/packages/ui/components/ui/tx/index.tsx
index aaf0d8b2..b07b270c 100644
--- a/packages/ui/components/ui/tx/index.tsx
+++ b/packages/ui/components/ui/tx/index.tsx
@@ -7,7 +7,8 @@ import {
   Metadata,
   ValueView,
 } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '../value';
+import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
+import { Density } from '@penumbra-zone/ui/Density';
 import { useEffect, useState } from 'react';
 
 // Likely something that calls the registry or view service for metadata
@@ -76,7 +77,17 @@ export const TransactionViewComponent = ({
           label='Transaction Fee'
           visibleContent={
             <div className='flex items-center gap-2'>
-              <ValueViewComponent view={feeValueView} />
+              <Density compact>
+                <div className='ml-4'>
+                  <ValueViewComponent
+                    valueView={feeValueView}
+                    context='default'
+                    priority='primary'
+                    hideSymbol={true}
+                    abbreviate={false}
+                  />
+                </div>
+              </Density>
               {isLoading && <span className='font-mono text-light-brown'>Loading...</span>}
               {error ? (
                 <span className='font-mono text-red-400'>Error: {String(error)}</span>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 9f2e4c8e..8189c0b9 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,6 +36,7 @@
     "@penumbra-zone/protobuf": "6.3.0",
     "@penumbra-zone/types": "26.1.0",
     "@penumbra-zone/wasm": "32.0.0",
+    "@penumbra-zone/ui": "13.3.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "1.1.1",

From 0a8034a20e055127ba995ff069c542b18b49e60c Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Fri, 22 Nov 2024 08:09:03 -0800
Subject: [PATCH 2/8] manual css

---
 apps/extension/package.json                   |  1 -
 .../routes/popup/approval/approve-deny.tsx    | 19 +++++--
 .../popup/approval/transaction/index.tsx      | 23 ++++++---
 .../popup/approval/transaction/view-tabs.tsx  |  2 +-
 .../extension/src/routes/popup/home/index.tsx |  6 +--
 packages/ui/components/ui/tabs/index.tsx      |  1 +
 packages/ui/components/ui/tx/action-view.tsx  |  2 -
 .../ui/tx/actions-views/delegator-vote.tsx    | 15 +-----
 .../components/ui/tx/actions-views/output.tsx | 22 +++-----
 .../components/ui/tx/actions-views/spend.tsx  | 22 +++-----
 .../ui/tx/actions-views/swap/index.tsx        | 27 ++--------
 .../ui/tx/actions-views/swap/one-way-swap.tsx | 50 +++++++------------
 .../ui/tx/actions-views/swap/swap-claim.tsx   | 27 ++--------
 .../progress-bar/index.tsx                    | 28 ++---------
 packages/ui/components/ui/tx/index.tsx        | 21 ++------
 packages/ui/components/ui/tx/memo-view.tsx    |  4 +-
 packages/ui/components/ui/tx/viewbox.tsx      | 31 ++++++------
 packages/ui/package.json                      |  1 -
 18 files changed, 102 insertions(+), 200 deletions(-)

diff --git a/apps/extension/package.json b/apps/extension/package.json
index cbb6906b..1cf201ee 100644
--- a/apps/extension/package.json
+++ b/apps/extension/package.json
@@ -32,7 +32,6 @@
     "@penumbra-zone/transport-chrome": "8.0.1",
     "@penumbra-zone/transport-dom": "7.5.0",
     "@penumbra-zone/types": "26.1.0",
-    "@penumbra-zone/ui": "13.3.1",
     "@penumbra-zone/wasm": "32.0.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@repo/context": "workspace:*",
diff --git a/apps/extension/src/routes/popup/approval/approve-deny.tsx b/apps/extension/src/routes/popup/approval/approve-deny.tsx
index 88aa94bf..0a98c625 100644
--- a/apps/extension/src/routes/popup/approval/approve-deny.tsx
+++ b/apps/extension/src/routes/popup/approval/approve-deny.tsx
@@ -15,12 +15,21 @@ 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 bg-black p-4 shadow-md'
+      style={{ 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,8 +38,8 @@ export const ApproveDeny = ({
       </Button>
       {ignore && (
         <Button
-          className='w-1/3 hover:bg-destructive/90'
-          size='lg'
+          className='w-[32%] py-2.5 text-sm hover:bg-destructive/90'
+          size='md'
           variant='secondary'
           onClick={ignore}
         >
diff --git a/apps/extension/src/routes/popup/approval/transaction/index.tsx b/apps/extension/src/routes/popup/approval/transaction/index.tsx
index 6b1fcf7c..1352dc90 100644
--- a/apps/extension/src/routes/popup/approval/transaction/index.tsx
+++ b/apps/extension/src/routes/popup/approval/transaction/index.tsx
@@ -47,11 +47,15 @@ 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-2 font-headline text-2xl font-bold text-transparent'
+          style={{ paddingBottom: '0px' }}
+        >
+          Confirm Transaction
+        </h1>
+      </div>
+      <div className='grow overflow-auto p-4'>
         <ViewTabs
           defaultValue={selectedTransactionViewName}
           onValueChange={setSelectedTransactionViewName}
@@ -60,13 +64,18 @@ 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-4'
+        style={{ paddingBottom: '0px', paddingTop: '0px', paddingRight: '0px', paddingLeft: '0px' }}
+      >
+        <ApproveDeny approve={approve} deny={deny} wait={3} />
+      </div>
     </div>
   );
 };
diff --git a/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx b/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
index b0bdfbac..9baf7941 100644
--- a/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
+++ b/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
@@ -20,7 +20,7 @@ export const ViewTabs = ({
       onValueChange={value => onValueChange(value as TransactionViewTab)}
     >
       <TabsList
-        className={cn('mx-auto mb-8 grid w-[100%] gap-4', {
+        className={cn('mx-auto mb-12 grid w-[100%] gap-4', {
           'grid-cols-2': !showReceiverTransactionView,
           'grid-cols-3': showReceiverTransactionView,
         })}
diff --git a/apps/extension/src/routes/popup/home/index.tsx b/apps/extension/src/routes/popup/home/index.tsx
index 870accc8..392e22d9 100644
--- a/apps/extension/src/routes/popup/home/index.tsx
+++ b/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>
diff --git a/packages/ui/components/ui/tabs/index.tsx b/packages/ui/components/ui/tabs/index.tsx
index 4bfd4526..cc9edb94 100644
--- a/packages/ui/components/ui/tabs/index.tsx
+++ b/packages/ui/components/ui/tabs/index.tsx
@@ -16,6 +16,7 @@ const TabsList = React.forwardRef<
       'inline-flex h-[52px] items-center justify-center rounded-lg bg-background px-2',
       className,
     )}
+    style={{ marginBottom: '16px' }}
     {...props}
   />
 ));
diff --git a/packages/ui/components/ui/tx/action-view.tsx b/packages/ui/components/ui/tx/action-view.tsx
index 94838ef7..79c0b0a9 100644
--- a/packages/ui/components/ui/tx/action-view.tsx
+++ b/packages/ui/components/ui/tx/action-view.tsx
@@ -61,8 +61,6 @@ const getLabelForActionCase = (actionCase: ActionView['actionView']['case']): st
   return String(actionCase);
 };
 
-// note: ensure to update the ValueViewComponent to handle unimplemented views
-// once support for them is added.
 export const ActionViewComponent = ({
   av: { actionView },
   feeValueView,
diff --git a/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx b/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
index da465712..de2b6ade 100644
--- a/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
+++ b/packages/ui/components/ui/tx/actions-views/delegator-vote.tsx
@@ -1,6 +1,5 @@
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
+import { ValueViewComponent } from '../../value';
 import { getAddress } from '@penumbra-zone/getters/note-view';
 import { ActionDetails } from './action-details';
 import {
@@ -117,17 +116,7 @@ const VoteBodyDetails = ({ body }: { body?: DelegatorVoteBody }) => {
       )}
       {!!body?.unbondedAmount && (
         <ActionDetails.Row label='Voting power'>
-          <Density compact>
-            <div className='ml-4'>
-              <ValueViewComponent
-                valueView={umValueView(body.unbondedAmount)}
-                context='default'
-                priority='primary'
-                hideSymbol={true}
-                abbreviate={false}
-              />
-            </div>
-          </Density>
+          <ValueViewComponent view={umValueView(body.unbondedAmount)} />
         </ActionDetails.Row>
       )}
     </>
diff --git a/packages/ui/components/ui/tx/actions-views/output.tsx b/packages/ui/components/ui/tx/actions-views/output.tsx
index dac09870..dadb853c 100644
--- a/packages/ui/components/ui/tx/actions-views/output.tsx
+++ b/packages/ui/components/ui/tx/actions-views/output.tsx
@@ -1,7 +1,6 @@
 import { OutputView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
+import { ValueViewComponent } from '../../value';
 import { ValueWithAddress } from './value-with-address';
 import { getNote } from '@penumbra-zone/getters/output-view';
 import { getAddress } from '@penumbra-zone/getters/note-view';
@@ -15,19 +14,12 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
       <ViewBox
         label='Output'
         visibleContent={
-          <ValueWithAddress addressView={address} label='to'>
-            <Density compact>
-              <div className='ml-4'>
-                <ValueViewComponent
-                  valueView={note.value}
-                  context='default'
-                  priority='primary'
-                  hideSymbol={true}
-                  abbreviate={false}
-                />
-              </div>
-            </Density>
-          </ValueWithAddress>
+          <div className='flex items-center justify-between gap-3'>
+            <ValueViewComponent view={note.value} />
+            <ValueWithAddress addressView={address} label='to'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );
diff --git a/packages/ui/components/ui/tx/actions-views/spend.tsx b/packages/ui/components/ui/tx/actions-views/spend.tsx
index ea0ea878..6f4d83d8 100644
--- a/packages/ui/components/ui/tx/actions-views/spend.tsx
+++ b/packages/ui/components/ui/tx/actions-views/spend.tsx
@@ -1,10 +1,9 @@
 import { SpendView } from '@penumbra-zone/protobuf/penumbra/core/component/shielded_pool/v1/shielded_pool_pb';
 import { ViewBox } from '../viewbox';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
 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') {
@@ -15,19 +14,12 @@ export const SpendViewComponent = ({ value }: { value: SpendView }) => {
       <ViewBox
         label='Spend'
         visibleContent={
-          <ValueWithAddress addressView={address} label='from'>
-            <Density compact>
-              <div className='ml-4'>
-                <ValueViewComponent
-                  valueView={note.value}
-                  context='default'
-                  priority='primary'
-                  hideSymbol={true}
-                  abbreviate={false}
-                />
-              </div>
-            </Density>
-          </ValueWithAddress>
+          <div className='flex items-center justify-between gap-3'>
+            <ValueViewComponent view={note.value} />
+            <ValueWithAddress addressView={address} label='from'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );
diff --git a/packages/ui/components/ui/tx/actions-views/swap/index.tsx b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
index b183e8c0..aab630b1 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/index.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
@@ -9,8 +9,7 @@ import {
   getClaimFeeFromSwapView,
   getClaimTx,
 } from '@penumbra-zone/getters/swap-view';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
+import { ValueViewComponent } from '../../../value';
 import { ActionDetails } from '../action-details';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 
@@ -49,33 +48,13 @@ export const SwapViewComponent = ({
             <ActionDetails>
               {oneWaySwap?.unfilled && (
                 <ActionDetails.Row label='Unfilled'>
-                  <Density compact>
-                    <div className='ml-4'>
-                      <ValueViewComponent
-                        valueView={oneWaySwap.unfilled}
-                        context='default'
-                        priority='primary'
-                        hideSymbol={true}
-                        abbreviate={false}
-                      />
-                    </div>
-                  </Density>
+                  <ValueViewComponent view={oneWaySwap.unfilled} />
                 </ActionDetails.Row>
               )}
 
               <ActionDetails.Row label='Swap Claim Fee'>
                 <div className='font-mono'>
-                  <Density compact>
-                    <div className='ml-4'>
-                      <ValueViewComponent
-                        valueView={prepaidClaimFee}
-                        context='default'
-                        priority='primary'
-                        hideSymbol={true}
-                        abbreviate={false}
-                      />
-                    </div>
-                  </Density>
+                  <ValueViewComponent view={prepaidClaimFee} />
                 </div>
               </ActionDetails.Row>
 
diff --git a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
index 649176ab..cbc85f0b 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
@@ -1,8 +1,6 @@
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
-import { ArrowRight } from 'lucide-react';
+import { ValueViewComponent } from '../../../value';
 import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-// import { getAmount } from '@penumbra-zone/getters/value-view';
+import { getAmount } from '@penumbra-zone/getters/value-view';
 
 /**
  * Renders a one-way swap (which should be the only kind of swap that ever
@@ -11,35 +9,25 @@ import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_
  * 1.23INPUT -> 4.56OUTPUT
  */
 export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueView }) => {
-  // const outputAmount = getAmount.optional(output);
+  const outputAmount = getAmount.optional(output);
 
   return (
-    <div className='flex items-center gap-2'>
-      <Density compact>
-        <div className='ml-4'>
-          <ValueViewComponent
-            valueView={input}
-            context='default'
-            priority='primary'
-            hideSymbol={true}
-            abbreviate={false}
-          />
-        </div>
-      </Density>
-
-      <ArrowRight />
-
-      <Density compact>
-        <div className='ml-4'>
-          <ValueViewComponent
-            valueView={output}
-            context='default'
-            priority='primary'
-            hideSymbol={true}
-            abbreviate={false}
-          />
-        </div>
-      </Density>
+    <div className='flex items-center justify-between'>
+      <ValueViewComponent view={input} />
+      <div className='relative mx-2 flex items-center'>
+        <div className='h-px w-[40px] bg-gray-500' />
+        <div
+          className='absolute right-[-6px] size-0'
+          style={{
+            borderTop: '6px solid transparent',
+            borderBottom: '6px solid transparent',
+            borderLeft: '6px solid gray',
+          }}
+        />
+      </div>
+      <div className='flex items-center justify-end'>
+        <ValueViewComponent view={output} showValue={!!outputAmount} />
+      </div>
     </div>
   );
 };
diff --git a/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx b/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
index d0513d59..749d109c 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/swap-claim.tsx
@@ -10,8 +10,7 @@ import {
 import { getAmount } from '@penumbra-zone/getters/value-view';
 import { getAmount as getAmountFee } from '@penumbra-zone/getters/fee';
 import { isZero, joinLoHiAmount } from '@penumbra-zone/types/amount';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
+import { ValueViewComponent } from '../../../value';
 import { Amount } from '@penumbra-zone/protobuf/penumbra/core/num/v1/num_pb';
 
 const getClaimLabel = (
@@ -45,30 +44,10 @@ export const SwapClaimViewComponent = ({ value }: { value: SwapClaimView }) => {
             <ActionDetails.Row label={claimLabel}>
               <div className='flex gap-2'>
                 {output1Amount && !isZero(output1Amount) && (
-                  <Density compact>
-                    <div className='ml-4'>
-                      <ValueViewComponent
-                        valueView={output1Value}
-                        context='default'
-                        priority='primary'
-                        hideSymbol={true}
-                        abbreviate={false}
-                      />
-                    </div>
-                  </Density>
+                  <ValueViewComponent view={output1Value} />
                 )}
                 {output2Amount && !isZero(output2Amount) && (
-                  <Density compact>
-                    <div className='ml-4'>
-                      <ValueViewComponent
-                        valueView={output2Value}
-                        context='default'
-                        priority='primary'
-                        hideSymbol={true}
-                        abbreviate={false}
-                      />
-                    </div>
-                  </Density>
+                  <ValueViewComponent view={output2Value} />
                 )}
               </div>
             </ActionDetails.Row>
diff --git a/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx b/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
index d102cb05..117d840d 100644
--- a/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
+++ b/packages/ui/components/ui/tx/dutch-auction-component/progress-bar/index.tsx
@@ -1,6 +1,5 @@
 import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
+import { ValueViewComponent } from '../../../value';
 import { DutchAuction } from '@penumbra-zone/protobuf/penumbra/core/component/auction/v1/auction_pb';
 import { Separator } from '../../../separator';
 import { Indicator } from './indicator';
@@ -42,17 +41,8 @@ export const ProgressBar = ({
 
   return (
     <div className='relative flex grow items-center justify-between gap-2 overflow-hidden'>
-      <Density compact>
-        <div className='ml-4'>
-          <ValueViewComponent
-            valueView={input}
-            context='default'
-            priority='primary'
-            hideSymbol={true}
-            abbreviate={false}
-          />
-        </div>
-      </Density>
+      <ValueViewComponent view={input} size='sm' />
+
       <div className='relative flex min-h-4 shrink grow items-center overflow-hidden'>
         {!auctionIsUpcoming && (
           <Indicator dutchAuction={dutchAuction} fullSyncHeight={fullSyncHeight} />
@@ -94,17 +84,7 @@ export const ProgressBar = ({
       </div>
 
       {outputMetadata && (
-        <Density compact>
-          <div className='ml-4'>
-            <ValueViewComponent
-              valueView={getEmptyValueView(outputMetadata)}
-              context='default'
-              priority='primary'
-              hideSymbol={true}
-              abbreviate={false}
-            />
-          </div>
-        </Density>
+        <ValueViewComponent view={getEmptyValueView(outputMetadata)} size='sm' showValue={false} />
       )}
     </div>
   );
diff --git a/packages/ui/components/ui/tx/index.tsx b/packages/ui/components/ui/tx/index.tsx
index b07b270c..e0c566bf 100644
--- a/packages/ui/components/ui/tx/index.tsx
+++ b/packages/ui/components/ui/tx/index.tsx
@@ -7,8 +7,7 @@ import {
   Metadata,
   ValueView,
 } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
-import { ValueViewComponent } from '@penumbra-zone/ui/ValueView';
-import { Density } from '@penumbra-zone/ui/Density';
+import { ValueViewComponent } from '../value';
 import { useEffect, useState } from 'react';
 
 // Likely something that calls the registry or view service for metadata
@@ -65,29 +64,19 @@ 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 style={{ paddingLeft: '3px' }}>Actions</div>}>
         {txv.bodyView?.actionViews.map((av, i) => (
           <ActionViewComponent av={av} feeValueView={feeValueView} key={i} />
         ))}
       </ViewSection>
-      <ViewSection heading='Parameters'>
+      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Parameters</div>}>
         <ViewBox
           label='Transaction Fee'
           visibleContent={
             <div className='flex items-center gap-2'>
-              <Density compact>
-                <div className='ml-4'>
-                  <ValueViewComponent
-                    valueView={feeValueView}
-                    context='default'
-                    priority='primary'
-                    hideSymbol={true}
-                    abbreviate={false}
-                  />
-                </div>
-              </Density>
+              <ValueViewComponent view={feeValueView} />
               {isLoading && <span className='font-mono text-light-brown'>Loading...</span>}
               {error ? (
                 <span className='font-mono text-red-400'>Error: {String(error)}</span>
diff --git a/packages/ui/components/ui/tx/memo-view.tsx b/packages/ui/components/ui/tx/memo-view.tsx
index be6e597f..8fae6cf1 100644
--- a/packages/ui/components/ui/tx/memo-view.tsx
+++ b/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>
diff --git a/packages/ui/components/ui/tx/viewbox.tsx b/packages/ui/components/ui/tx/viewbox.tsx
index f6722cff..58d0a692 100644
--- a/packages/ui/components/ui/tx/viewbox.tsx
+++ b/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>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8189c0b9..9f2e4c8e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -36,7 +36,6 @@
     "@penumbra-zone/protobuf": "6.3.0",
     "@penumbra-zone/types": "26.1.0",
     "@penumbra-zone/wasm": "32.0.0",
-    "@penumbra-zone/ui": "13.3.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "1.1.1",

From 3715a168d79aa66709b6930633a0b4f45725a70b Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sun, 24 Nov 2024 21:30:53 -0800
Subject: [PATCH 3/8] refactor arrow for one-way swaps

---
 .../components/ui/tx/actions-views/output.tsx | 19 ++++++----
 .../ui/tx/actions-views/swap/one-way-swap.tsx | 36 +++++++++++++------
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/packages/ui/components/ui/tx/actions-views/output.tsx b/packages/ui/components/ui/tx/actions-views/output.tsx
index dadb853c..c33d53b3 100644
--- a/packages/ui/components/ui/tx/actions-views/output.tsx
+++ b/packages/ui/components/ui/tx/actions-views/output.tsx
@@ -14,12 +14,19 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
       <ViewBox
         label='Output'
         visibleContent={
-          <div className='flex items-center justify-between gap-3'>
-            <ValueViewComponent view={note.value} />
-            <ValueWithAddress addressView={address} label='to'>
-              <></>
-            </ValueWithAddress>
-          </div>
+          <ValueWithAddress addressView={address} label='to'>
+            <Density medium>
+              <div className='ml-4'>
+                <ValueViewComponent
+                  valueView={note.value}
+                  context='default'
+                  priority='primary'
+                  hideSymbol={true}
+                  abbreviate={false}
+                />
+              </div>
+            </Density>
+          </ValueWithAddress>
         }
       />
     );
diff --git a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
index cbc85f0b..1ac82f5e 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
@@ -14,16 +14,32 @@ export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueV
   return (
     <div className='flex items-center justify-between'>
       <ValueViewComponent view={input} />
-      <div className='relative mx-2 flex items-center'>
-        <div className='h-px w-[40px] bg-gray-500' />
-        <div
-          className='absolute right-[-6px] size-0'
-          style={{
-            borderTop: '6px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: '6px solid gray',
-          }}
-        />
+      <div className='relative mx-2 flex items-center justify-center'>
+        <div className='flex items-center justify-center w-16 h-6 rounded-full bg-gray-800 border border-gray-500'>
+          <div
+            className='flex items-center justify-center'
+            style={{
+              position: 'relative',
+            }}
+          >
+            <div
+              className='flex items-center'
+              style={{
+                width: '14px',
+                height: '2px',
+                backgroundColor: 'white',
+              }}
+            />
+            <div
+              className='w-0 h-0 ml-[2px]'
+              style={{
+                borderTop: '4px solid transparent',
+                borderBottom: '4px solid transparent',
+                borderLeft: '6px solid white',
+              }}
+            />
+          </div>
+        </div>
       </div>
       <div className='flex items-center justify-end'>
         <ValueViewComponent view={output} showValue={!!outputAmount} />

From 06b563055f00c263daf919ad8d302356d4455e89 Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sun, 24 Nov 2024 21:33:50 -0800
Subject: [PATCH 4/8] revert accidental commit

---
 .../components/ui/tx/actions-views/output.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/ui/components/ui/tx/actions-views/output.tsx b/packages/ui/components/ui/tx/actions-views/output.tsx
index c33d53b3..dadb853c 100644
--- a/packages/ui/components/ui/tx/actions-views/output.tsx
+++ b/packages/ui/components/ui/tx/actions-views/output.tsx
@@ -14,19 +14,12 @@ export const OutputViewComponent = ({ value }: { value: OutputView }) => {
       <ViewBox
         label='Output'
         visibleContent={
-          <ValueWithAddress addressView={address} label='to'>
-            <Density medium>
-              <div className='ml-4'>
-                <ValueViewComponent
-                  valueView={note.value}
-                  context='default'
-                  priority='primary'
-                  hideSymbol={true}
-                  abbreviate={false}
-                />
-              </div>
-            </Density>
-          </ValueWithAddress>
+          <div className='flex items-center justify-between gap-3'>
+            <ValueViewComponent view={note.value} />
+            <ValueWithAddress addressView={address} label='to'>
+              <></>
+            </ValueWithAddress>
+          </div>
         }
       />
     );

From 96270e0d4c03657243f2035a254e83874207c825 Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sun, 24 Nov 2024 21:37:20 -0800
Subject: [PATCH 5/8] truncate value component

---
 packages/ui/components/ui/value/value.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/ui/value/value.tsx b/packages/ui/components/ui/value/value.tsx
index 3cf8833b..040462f4 100644
--- a/packages/ui/components/ui/value/value.tsx
+++ b/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='truncate font-mono text-xs text-muted-foreground max-w-[80px]'>
+          {symbol}
+        </span>
       )}
     </div>
   </Pill>

From 81e3ea4517ef0ed351e5ade6eb826b9d34e7f8ab Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sun, 24 Nov 2024 21:43:37 -0800
Subject: [PATCH 6/8] background of approval and deny button layer

---
 apps/extension/src/routes/popup/approval/approve-deny.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/extension/src/routes/popup/approval/approve-deny.tsx b/apps/extension/src/routes/popup/approval/approve-deny.tsx
index 0a98c625..465c159f 100644
--- a/apps/extension/src/routes/popup/approval/approve-deny.tsx
+++ b/apps/extension/src/routes/popup/approval/approve-deny.tsx
@@ -16,8 +16,12 @@ export const ApproveDeny = ({
 
   return (
     <div
-      className='flex flex-row justify-between gap-4 rounded-md bg-black p-4 shadow-md'
-      style={{ paddingBottom: '28px', paddingTop: '28px' }}
+      className='flex flex-row justify-between gap-4 rounded-md p-4 shadow-md'
+      style={{
+        backgroundColor: '#1A1A1A',
+        paddingBottom: '28px',
+        paddingTop: '28px',
+      }}
     >
       <Button
         variant='gradient'

From 7c221925fbb64e246bf12cbc9349bd4f20261413 Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Sun, 24 Nov 2024 21:52:07 -0800
Subject: [PATCH 7/8] ignore site

---
 apps/extension/src/routes/popup/approval/approve-deny.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/extension/src/routes/popup/approval/approve-deny.tsx b/apps/extension/src/routes/popup/approval/approve-deny.tsx
index 465c159f..6505acc8 100644
--- a/apps/extension/src/routes/popup/approval/approve-deny.tsx
+++ b/apps/extension/src/routes/popup/approval/approve-deny.tsx
@@ -42,8 +42,8 @@ export const ApproveDeny = ({
       </Button>
       {ignore && (
         <Button
-          className='w-[32%] py-2.5 text-sm hover:bg-destructive/90'
-          size='md'
+          className='w-1/2 py-3.5 text-base hover:bg-destructive/90'
+          size='lg'
           variant='secondary'
           onClick={ignore}
         >

From a450d91294578d052c90309087c3bc725ea43f0a Mon Sep 17 00:00:00 2001
From: Tal Derei <talderei99@gmail.com>
Date: Mon, 25 Nov 2024 13:41:24 -0800
Subject: [PATCH 8/8] address feedback

---
 .../popup/approval/transaction/index.tsx      | 10 ++-----
 .../popup/approval/transaction/view-tabs.tsx  |  2 +-
 packages/ui/components/ui/tabs/index.tsx      |  3 +--
 .../ui/tx/actions-views/action-details.tsx    |  2 +-
 .../ui/tx/actions-views/swap/index.tsx        |  2 +-
 .../ui/tx/actions-views/swap/one-way-swap.tsx | 27 ++-----------------
 .../tx/actions-views/value-with-address.tsx   |  6 ++---
 packages/ui/components/ui/tx/index.tsx        |  4 +--
 packages/ui/components/ui/value/value.tsx     |  2 +-
 9 files changed, 14 insertions(+), 44 deletions(-)

diff --git a/apps/extension/src/routes/popup/approval/transaction/index.tsx b/apps/extension/src/routes/popup/approval/transaction/index.tsx
index 1352dc90..e7b3586c 100644
--- a/apps/extension/src/routes/popup/approval/transaction/index.tsx
+++ b/apps/extension/src/routes/popup/approval/transaction/index.tsx
@@ -48,10 +48,7 @@ export const TransactionApproval = () => {
   return (
     <div className='flex h-screen flex-col'>
       <div className='border-b border-gray-700 p-4'>
-        <h1
-          className=' bg-text-linear bg-clip-text pb-2 font-headline text-2xl font-bold text-transparent'
-          style={{ paddingBottom: '0px' }}
-        >
+        <h1 className=' bg-text-linear bg-clip-text pb-0 font-headline text-2xl font-bold text-transparent'>
           Confirm Transaction
         </h1>
       </div>
@@ -70,10 +67,7 @@ export const TransactionApproval = () => {
         )}
       </div>
 
-      <div
-        className='border-t border-gray-700 p-4'
-        style={{ paddingBottom: '0px', paddingTop: '0px', paddingRight: '0px', paddingLeft: '0px' }}
-      >
+      <div className='border-t border-gray-700 p-0'>
         <ApproveDeny approve={approve} deny={deny} wait={3} />
       </div>
     </div>
diff --git a/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx b/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
index 9baf7941..b0bdfbac 100644
--- a/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
+++ b/apps/extension/src/routes/popup/approval/transaction/view-tabs.tsx
@@ -20,7 +20,7 @@ export const ViewTabs = ({
       onValueChange={value => onValueChange(value as TransactionViewTab)}
     >
       <TabsList
-        className={cn('mx-auto mb-12 grid w-[100%] gap-4', {
+        className={cn('mx-auto mb-8 grid w-[100%] gap-4', {
           'grid-cols-2': !showReceiverTransactionView,
           'grid-cols-3': showReceiverTransactionView,
         })}
diff --git a/packages/ui/components/ui/tabs/index.tsx b/packages/ui/components/ui/tabs/index.tsx
index cc9edb94..6e581085 100644
--- a/packages/ui/components/ui/tabs/index.tsx
+++ b/packages/ui/components/ui/tabs/index.tsx
@@ -13,10 +13,9 @@ 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,
     )}
-    style={{ marginBottom: '16px' }}
     {...props}
   />
 ));
diff --git a/packages/ui/components/ui/tx/actions-views/action-details.tsx b/packages/ui/components/ui/tx/actions-views/action-details.tsx
index 97ffcf99..2779ea4f 100644
--- a/packages/ui/components/ui/tx/actions-views/action-details.tsx
+++ b/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 />
diff --git a/packages/ui/components/ui/tx/actions-views/swap/index.tsx b/packages/ui/components/ui/tx/actions-views/swap/index.tsx
index aab630b1..c6ab05ae 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/index.tsx
+++ b/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>
diff --git a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
index 1ac82f5e..7f50403a 100644
--- a/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
+++ b/packages/ui/components/ui/tx/actions-views/swap/one-way-swap.tsx
@@ -15,31 +15,8 @@ export const OneWaySwap = ({ input, output }: { input: ValueView; output: ValueV
     <div className='flex items-center justify-between'>
       <ValueViewComponent view={input} />
       <div className='relative mx-2 flex items-center justify-center'>
-        <div className='flex items-center justify-center w-16 h-6 rounded-full bg-gray-800 border border-gray-500'>
-          <div
-            className='flex items-center justify-center'
-            style={{
-              position: 'relative',
-            }}
-          >
-            <div
-              className='flex items-center'
-              style={{
-                width: '14px',
-                height: '2px',
-                backgroundColor: 'white',
-              }}
-            />
-            <div
-              className='w-0 h-0 ml-[2px]'
-              style={{
-                borderTop: '4px solid transparent',
-                borderBottom: '4px solid transparent',
-                borderLeft: '6px solid white',
-              }}
-            />
-          </div>
-        </div>
+        <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} />
diff --git a/packages/ui/components/ui/tx/actions-views/value-with-address.tsx b/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
index d0611d48..8699f67a 100644
--- a/packages/ui/components/ui/tx/actions-views/value-with-address.tsx
+++ b/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>
diff --git a/packages/ui/components/ui/tx/index.tsx b/packages/ui/components/ui/tx/index.tsx
index e0c566bf..fb737dae 100644
--- a/packages/ui/components/ui/tx/index.tsx
+++ b/packages/ui/components/ui/tx/index.tsx
@@ -66,12 +66,12 @@ export const TransactionViewComponent = ({
   return (
     <div className='flex flex-col gap-4'>
       {txv.bodyView?.memoView?.memoView && <MemoViewComponent memo={txv.bodyView.memoView} />}
-      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Actions</div>}>
+      <ViewSection heading={<div className='pl-[3px]'>Actions</div>}>
         {txv.bodyView?.actionViews.map((av, i) => (
           <ActionViewComponent av={av} feeValueView={feeValueView} key={i} />
         ))}
       </ViewSection>
-      <ViewSection heading={<div style={{ paddingLeft: '3px' }}>Parameters</div>}>
+      <ViewSection heading={<div className='pl-[3px]'>Parameters</div>}>
         <ViewBox
           label='Transaction Fee'
           visibleContent={
diff --git a/packages/ui/components/ui/value/value.tsx b/packages/ui/components/ui/value/value.tsx
index 040462f4..f523cd9c 100644
--- a/packages/ui/components/ui/value/value.tsx
+++ b/packages/ui/components/ui/value/value.tsx
@@ -38,7 +38,7 @@ export const ValueComponent = ({
         </span>
       )}
       {showDenom && (
-        <span className='truncate font-mono text-xs text-muted-foreground max-w-[80px]'>
+        <span className='max-w-[80px] truncate font-mono text-xs text-muted-foreground'>
           {symbol}
         </span>
       )}