diff --git a/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx b/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx new file mode 100644 index 0000000000..72a3a9c0c3 --- /dev/null +++ b/apps/minifront/src/components/dashboard/assets-table/equivalent-values.tsx @@ -0,0 +1,21 @@ +import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb'; +import { asValueView } from '@penumbra-zone/getters/src/equivalent-value'; +import { + getDisplayDenomFromView, + getEquivalentValues, +} from '@penumbra-zone/getters/src/value-view'; +import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value'; + +export const EquivalentValues = ({ valueView }: { valueView?: ValueView }) => { + const equivalentValuesAsValueViews = (getEquivalentValues.optional()(valueView) ?? []).map( + asValueView, + ); + + return equivalentValuesAsValueViews.map(equivalentValueAsValueView => ( + + )); +}; diff --git a/apps/minifront/src/components/dashboard/assets-table.tsx b/apps/minifront/src/components/dashboard/assets-table/index.tsx similarity index 84% rename from apps/minifront/src/components/dashboard/assets-table.tsx rename to apps/minifront/src/components/dashboard/assets-table/index.tsx index cd26aa0111..17e1387e9a 100644 --- a/apps/minifront/src/components/dashboard/assets-table.tsx +++ b/apps/minifront/src/components/dashboard/assets-table/index.tsx @@ -1,10 +1,11 @@ import { LoaderFunction, useLoaderData } from 'react-router-dom'; import { AddressIcon } from '@penumbra-zone/ui/components/ui/address-icon'; import { AddressComponent } from '@penumbra-zone/ui/components/ui/address-component'; -import { BalancesByAccount, getBalancesByAccount } from '../../fetchers/balances/by-account'; +import { BalancesByAccount, getBalancesByAccount } from '../../../fetchers/balances/by-account'; import { Table, TableBody, TableCell, TableRow } from '@penumbra-zone/ui/components/ui/table'; import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value'; import { throwIfPraxNotConnectedTimeout } from '@penumbra-zone/client'; +import { EquivalentValues } from './equivalent-values'; export const AssetsLoader: LoaderFunction = async (): Promise => { await throwIfPraxNotConnectedTimeout(); @@ -52,7 +53,10 @@ export default function AssetsTable() { {a.balances.map((assetBalance, index) => ( - +
+ + +
))} diff --git a/packages/ui/components/ui/tx/view/value/index.tsx b/packages/ui/components/ui/tx/view/value/index.tsx index 6aedceeb73..44e1f66263 100644 --- a/packages/ui/components/ui/tx/view/value/index.tsx +++ b/packages/ui/components/ui/tx/view/value/index.tsx @@ -7,6 +7,8 @@ import { CopyIcon } from '@radix-ui/react-icons'; import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb'; import { fromBaseUnitAmount } from '@penumbra-zone/types/src/amount'; import { Pill } from '../../../pill'; +import { ConditionalWrap } from '../../../conditional-wrap'; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../tooltip'; interface ValueViewProps { view: ValueView | undefined; @@ -41,24 +43,36 @@ export const ValueViewComponent = ({ const symbol = metadata.symbol || 'Unknown Asset'; return ( - -
- {showIcon && ( -
- -
- )} - {showValue && ( - - {variant === 'equivalent' && <>~ } - {formattedAmount} - - )} - {showDenom && ( - {symbol} - )} -
-
+ ( + + + {children} + Estimated equivalent value + + + )} + > + +
+ {showIcon && ( +
+ +
+ )} + {showValue && ( + + {variant === 'equivalent' && <>~ } + {formattedAmount} + + )} + {showDenom && ( + {symbol} + )} +
+
+
); }