add action cell

penumbra-zone · Jul 13, 2023 · 762fff3 · 762fff3
1 parent 8a45677
commit 762fff3
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 92 deletions.
diff --git a/src/app/tx/page.tsx b/src/app/tx/page.tsx
@@ -112,6 +112,12 @@ export default function TransactionDetail() {
 											style={{
 												fontFamily:
 													"'Iosevka', 'Menlo', 'Courier New', Courier, monospace",
+												background: '#282626',
+												minHeight: '44px',
+												borderRadius: '10px',
+												padding: '8px 16px',
+												display: 'flex',
+												alignItems: 'center',
 											}}
 										/>
 									</div>
@@ -127,9 +133,16 @@ export default function TransactionDetail() {
 											collapseStringsAfterLength={48}
 											collapsed={true}
 											/* HACK: the component adds inline styles that don't seem easily overridden by normal CSS rules, replicate .monospace here */
+
 											style={{
 												fontFamily:
 													"'Iosevka', 'Menlo', 'Courier New', Courier, monospace",
+												background: '#282626',
+												minHeight: '44px',
+												borderRadius: '10px',
+												padding: '8px 16px',
+												display: 'flex',
+												alignItems: 'center',
 											}}
 										/>
 									</div>

diff --git a/src/components/ActionCell.tsx b/src/components/ActionCell.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { EncryptedSvg } from './Svg'
+
+type ActionCellProps = {
+	title: string
+	children?: React.ReactNode
+	isEncrypted?: boolean
+}
+
+export const ActionCell: React.FC<ActionCellProps> = ({
+	title,
+	isEncrypted,
+	children,
+}) => {
+	return (
+		<div className='w-[100%] flex flex-col'>
+			{isEncrypted ? (
+				<div className='flex items-center gap-x-[8px]'>
+					<EncryptedSvg />
+					<p className='text-light_brown'>{`${title} (Encrypted)`}</p>
+				</div>
+			) : (
+				<>
+					<p className='h3 mb-[8px] capitalize'>{title}</p>
+					<div className='py-[8px] px-[16px] bg-dark_grey rounded-[10px] text_numbers_s text-light_grey break-words min-h-[44px]'>
+						{children}
+					</div>
+				</>
+			)}
+		</div>
+	)
+}
diff --git a/src/components/MemoViewComponent.tsx b/src/components/MemoViewComponent.tsx
@@ -3,6 +3,7 @@ import { MemoView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/
 import { bech32m } from 'bech32'
 import React, { useMemo } from 'react'
 import { AddressComponent } from './penumbra/Address'
+import { ActionCell } from './ActionCell'
 
 type MemoViewComponentProps = { memoView: MemoView }
 
@@ -36,32 +37,18 @@ export const MemoViewComponent: React.FC<MemoViewComponentProps> = ({
 	return (
 		<div className='flex flex-col p-[16px] gap-y-[16px] w-[800px] bg-brown rounded-[10px]'>
 			{memoText === 'Encrypted' ? (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>Sender Address</p>
-					<div className='flex items-center gap-x-[8px] min-h-[44px] py-[8px] px-[16px] bg-dark_grey rounded-[10px] text-light_grey text_numbers_s'>
-						<Copy text={memoSender} type='last' />
-					</div>
-				</div>
+				<ActionCell title='Sender Address'>
+					<Copy text={memoSender} type='last' />
+				</ActionCell>
 			) : (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>Message</p>
-					<p className='py-[8px] px-[16px] bg-dark_grey rounded-[15px] text_numbers_s text-light_grey break-words min-h-[40px]'>
-						{memoText}
-					</p>
-				</div>
-			)}
-			{memoSender === 'Encrypted' ? (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize encrypted'>Return Address</p>
-				</div>
-			) : (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>Return Address</p>
-					<div className='py-[8px] px-[16px] bg-dark_grey rounded-[15px] text_numbers_s text-light_grey break-words monospace'>
-						<AddressComponent address={memoReturnAddress!} />
-					</div>
-				</div>
+				<ActionCell title='Message'>{memoText}</ActionCell>
 			)}
+			<ActionCell
+				title='Return Address'
+				isEncrypted={memoSender === 'Encrypted'}
+			>
+				<AddressComponent address={memoReturnAddress!} />
+			</ActionCell>
 		</div>
 	)
 }
diff --git a/src/components/TransactionDataComponent.tsx b/src/components/TransactionDataComponent.tsx
@@ -1,6 +1,7 @@
 import { calculateAmount } from '@/lib/calculateAmount'
 import { TransactionBodyView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1alpha1/transaction_pb'
 import React, { useMemo } from 'react'
+import { ActionCell } from './ActionCell'
 
 type TransactionDataComponentProps = {
 	bodyView: TransactionBodyView
@@ -31,24 +32,9 @@ export const TransactionDataComponent: React.FC<
 
 	return (
 		<div className='flex flex-col p-[16px] gap-y-[16px] w-[800px] bg-brown rounded-[10px]'>
-			<div className='w-[100%] flex flex-col'>
-				<p className='h3 mb-[8px] capitalize'>Chain ID</p>
-				<p className='py-[8px] px-[16px] bg-dark_grey rounded-[10px] text_numbers_s text-light_grey break-words min-h-[44px] flex items-center'>
-					{chainId}
-				</p>
-			</div>
-			<div className='w-[100%] flex flex-col'>
-				<p className='h3 mb-[8px] capitalize'>Fee</p>
-				<p className='py-[8px] px-[16px] bg-dark_grey rounded-[10px] text_numbers_s text-light_grey break-words min-h-[44px] flex items-center'>
-					{feeText}
-				</p>
-			</div>
-			<div className='w-[100%] flex flex-col'>
-				<p className='h3 mb-[8px] capitalize'>Expiry Height</p>
-				<p className='py-[8px] px-[16px] bg-dark_grey rounded-[10px] text_numbers_s text-light_grey break-words min-h-[44px] flex items-center'>
-					{expiryText}
-				</p>
-			</div>
+			<ActionCell title='Chain ID'>{chainId}</ActionCell>
+			<ActionCell title='Fee'>{feeText}</ActionCell>
+			<ActionCell title='Expiry Height'>{expiryText}</ActionCell>
 		</div>
 	)
 }
diff --git a/src/components/penumbra/view/ActionView.tsx b/src/components/penumbra/view/ActionView.tsx
@@ -3,6 +3,7 @@ import { SpendViewComponent } from './SpendView'
 import { OutputViewComponent } from './OutputView'
 import { SwapViewComponent } from './SwapView'
 import { PositionOpenViewComponent } from './PositionOpenView'
+import { ActionCell } from '@/components/ActionCell'
 
 export const ActionViewComponent: React.FC<{ actionView: ActionView }> = ({
 	actionView,
@@ -18,11 +19,10 @@ export const ActionViewComponent: React.FC<{ actionView: ActionView }> = ({
 			return <PositionOpenViewComponent view={actionView.actionView.value} />
 		default:
 			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>
-						Unsupported Action {actionView.actionView.case}
-					</p>
-				</div>
+				<ActionCell
+					title={`Unsupported Action ${actionView.actionView.case}`}
+					isEncrypted={true}
+				/>
 			)
 	}
 }
diff --git a/src/components/penumbra/view/OutputView.tsx b/src/components/penumbra/view/OutputView.tsx
@@ -5,6 +5,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1alpha1/transaction_pb'
 import { AssetsResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1alpha1/view_pb'
 import { AddressViewComponent } from '../Address'
+import { ActionCell } from '@/components/ActionCell'
 
 export const OutputViewComponent: React.FC<{ view: OutputView }> = ({
 	view,
@@ -30,21 +31,14 @@ export const OutputViewComponent: React.FC<{ view: OutputView }> = ({
 			)
 
 			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>Output</p>
-					<div className='py-[8px] px-[16px] bg-dark_grey rounded-[15px] text_numbers_s text-light_grey break-words '>
-						<span>{`${assetHumanAmount} ${asssetHumanDenom} to `}</span>
-						<AddressViewComponent addressView={addressView} />
-					</div>
-				</div>
+				<ActionCell title='Output'>
+					{assetHumanAmount} {asssetHumanDenom} to&nbsp;
+					<AddressViewComponent addressView={addressView} />
+				</ActionCell>
 			)
 		}
 		default: {
-			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize encrypted'>Output</p>
-				</div>
-			)
+			return <ActionCell title='Output' isEncrypted={true} />
 		}
 	}
 }
diff --git a/src/components/penumbra/view/PositionOpenView.tsx b/src/components/penumbra/view/PositionOpenView.tsx
@@ -1,3 +1,4 @@
+import { ActionCell } from '@/components/ActionCell'
 import { useBalance } from '@/context/BalanceContextProvider'
 import { getAssetByAssetId, getHumanReadableValue } from '@/lib/assets'
 import { uint8ToBase64 } from '@/lib/uint8ToBase64'
@@ -24,17 +25,14 @@ export const PositionOpenViewComponent: React.FC<{ view: PositionOpen }> = ({
 	const {
 		assetHumanAmount: asset2HumanAmount,
 		asssetHumanDenom: assset2HumanDenom,
-	} = getHumanReadableValue(asset2, asset2Amount, asset1Id!)
+	} = getHumanReadableValue(asset2, asset2Amount, asset2Id!)
 
 	const fee = positionOpen?.phi?.component?.fee
 
 	// TODO: add ID:  plpid1ckppehweenlpnskhnt37s4sr2jw6tegmh9h43r627x39ydusg9es3762qz to values
 	return (
-		<div className='w-[100%] flex flex-col'>
-			<p className='h3 mb-[8px] capitalize'>Open Liquidity Position Reserves</p>
-			<p className='py-[8px] px-[16px] bg-dark_grey rounded-[15px] text_numbers_s text-light_grey break-words '>
-				{`(${asset1HumanAmount} ${assset1HumanDenom}, ${asset2HumanAmount} ${assset2HumanDenom})  Fee: ${fee}`}
-			</p>
-		</div>
+		<ActionCell title='Swap'>
+			{`(${asset1HumanAmount} ${assset1HumanDenom}, ${asset2HumanAmount} ${assset2HumanDenom})  Fee: ${fee}`}
+		</ActionCell>
 	)
 }
diff --git a/src/components/penumbra/view/SpendView.tsx b/src/components/penumbra/view/SpendView.tsx
@@ -5,6 +5,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1alpha1/transaction_pb'
 import { AssetsResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1alpha1/view_pb'
 import { AddressViewComponent } from '../Address'
+import { ActionCell } from '@/components/ActionCell'
 
 export const SpendViewComponent: React.FC<{ view: SpendView }> = ({ view }) => {
 	switch (view.spendView.case) {
@@ -28,23 +29,16 @@ export const SpendViewComponent: React.FC<{ view: SpendView }> = ({ view }) => {
 			)
 
 			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>Spend</p>
-					<div className='py-[8px] px-[16px] bg-dark_grey rounded-[15px] text_numbers_s text-light_grey break-words '>
-						<span>{`${assetHumanAmount} ${asssetHumanDenom} from `}</span>
-						<AddressViewComponent addressView={addressView} />
-					</div>
-				</div>
+				<ActionCell title='Spend'>
+					{assetHumanAmount} {asssetHumanDenom} from&nbsp;
+					<AddressViewComponent addressView={addressView} />
+				</ActionCell>
 			)
 		}
 		default: {
 			// spendView.spendView.value is SpendView_Opaque
 			//const opaqueSpend: SpendView_Opaque = view.spendView.value;
-			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize encrypted'>Spend</p>
-				</div>
-			)
+			return <ActionCell title='Spend' isEncrypted={true} />
 		}
 	}
 }
diff --git a/src/components/penumbra/view/SwapView.tsx b/src/components/penumbra/view/SwapView.tsx
@@ -1,3 +1,4 @@
+import { ActionCell } from '@/components/ActionCell'
 import { useBalance } from '@/context/BalanceContextProvider'
 import { getAssetByAssetId, getHumanReadableValue } from '@/lib/assets'
 import { calculateAmount } from '@/lib/calculateAmount'
@@ -31,7 +32,7 @@ export const SwapViewComponent: React.FC<{ view: SwapView }> = ({ view }) => {
 			const {
 				assetHumanAmount: asset2HumanAmount,
 				asssetHumanDenom: assset2HumanDenom,
-			} = getHumanReadableValue(asset2, asset2Amount, asset1Id!)
+			} = getHumanReadableValue(asset2, asset2Amount, asset2Id!)
 
 			// TODO: add getActionAssetDetail when visibleSwap.swapPlaintext?.claimFee include assetID
 			const feeAssetId = visibleSwap.swapPlaintext?.claimFee?.assetId
@@ -68,22 +69,15 @@ export const SwapViewComponent: React.FC<{ view: SwapView }> = ({ view }) => {
 			)
 
 			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize'>Swap</p>
-					<p className='py-[8px] px-[16px] bg-dark_grey rounded-[15px] text_numbers_s text-light_grey break-words '>
-						{asset1HumanAmount
-							? `${asset1HumanAmount} ${assset1HumanDenom} for ${assset2HumanDenom} and paid claim fee ${feeHumanAmount} ${feeHumanDenom}`
-							: `${asset2HumanAmount} ${assset2HumanDenom} for ${assset1HumanDenom} and paid claim fee ${feeHumanAmount} ${feeHumanDenom}`}
-					</p>
-				</div>
+				<ActionCell title='Swap'>
+					{asset1HumanAmount
+						? `${asset1HumanAmount} ${assset1HumanDenom} for ${assset2HumanDenom} and paid claim fee ${feeHumanAmount} ${feeHumanDenom}`
+						: `${asset2HumanAmount} ${assset2HumanDenom} for ${assset1HumanDenom} and paid claim fee ${feeHumanAmount} ${feeHumanDenom}`}
+				</ActionCell>
 			)
 		}
 		default: {
-			return (
-				<div className='w-[100%] flex flex-col'>
-					<p className='h3 mb-[8px] capitalize encrypted'>Swap</p>
-				</div>
-			)
+			return <ActionCell title='Swap' isEncrypted={true} />
 		}
 	}
 }