use valueViewComponent from ui library

prax-wallet · Nov 22, 2024 · ac920a0 · ac920a0
1 parent c137bc1
commit ac920a0
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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",