diff --git a/apps/webapp/src/components/dashboard/assets-table.tsx b/apps/webapp/src/components/dashboard/assets-table.tsx
index c7e0fa92c6..a1e83fb9a2 100644
--- a/apps/webapp/src/components/dashboard/assets-table.tsx
+++ b/apps/webapp/src/components/dashboard/assets-table.tsx
@@ -1,5 +1,5 @@
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@penumbra-zone/ui';
-import { displayUsd, fromBaseUnitAmount } from '@penumbra-zone/types';
+import { displayUsd, fromBaseUnitAmountAndDenomMetadata } from '@penumbra-zone/types';
import { LoaderFunction, useLoaderData } from 'react-router-dom';
import { throwIfExtNotInstalled } from '../../fetchers/is-connected.ts';
import { AccountBalance, getBalancesByAccount } from '../../fetchers/balances.ts';
@@ -48,11 +48,14 @@ export default function AssetsTable() {
{a.balances.map((asset, i) => (
-
-
{asset.denom.display}
+
+
{asset.denomMetadata.display}
- {fromBaseUnitAmount(asset.amount, asset.denom.exponent).toFormat()}
+ {fromBaseUnitAmountAndDenomMetadata(
+ asset.amount,
+ asset.denomMetadata,
+ ).toFormat()}
{asset.usdcValue == 0 ? '$–' : `$${displayUsd(asset.usdcValue)}`}
@@ -73,14 +76,19 @@ export default function AssetsTable() {
-
-
{asset.denom.display}
+
+
+ {asset.denomMetadata.display}
+
- {fromBaseUnitAmount(asset.amount, asset.denom.exponent).toFormat()}
+ {fromBaseUnitAmountAndDenomMetadata(
+ asset.amount,
+ asset.denomMetadata,
+ ).toFormat()}
diff --git a/apps/webapp/src/components/shared/input-token.tsx b/apps/webapp/src/components/shared/input-token.tsx
index 9c3be671d4..7ebe7b61ab 100644
--- a/apps/webapp/src/components/shared/input-token.tsx
+++ b/apps/webapp/src/components/shared/input-token.tsx
@@ -1,11 +1,13 @@
import { Input, InputProps } from '@penumbra-zone/ui';
import { cn } from '@penumbra-zone/ui/lib/utils';
-import { fromBaseUnitAmount, joinLoHiAmount } from '@penumbra-zone/types';
+import { joinLoHiAmount } from '@penumbra-zone/types';
import SelectTokenModal from './select-token-modal';
import { Validation, validationResult } from './validation-result';
import { AccountBalance, AssetBalance } from '../../fetchers/balances';
import { Selection } from '../../state/types';
import { Fee } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/fee/v1alpha1/fee_pb';
+import { ValueViewComponent } from '@penumbra-zone/ui/components/ui/tx/view/value';
+import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1alpha1/asset_pb';
const PENUMBRA_FEE_DENOMINATOR = 1000;
@@ -14,10 +16,23 @@ const getFeeAsString = (fee: Fee | undefined) => {
return `${(Number(joinLoHiAmount(fee.amount)) / PENUMBRA_FEE_DENOMINATOR).toString()} penumbra`;
};
-const getCurrentBalance = (assetBalance: AssetBalance | undefined) =>
- assetBalance
- ? fromBaseUnitAmount(assetBalance.amount, assetBalance.denom.exponent).toFormat()
- : '0';
+const getCurrentBalanceValueView = (assetBalance: AssetBalance | undefined): ValueView => {
+ if (assetBalance?.denomMetadata)
+ return new ValueView({
+ valueView: {
+ case: 'knownDenom',
+ value: { amount: assetBalance.amount, denom: assetBalance.denomMetadata },
+ },
+ });
+ else if (assetBalance?.assetId)
+ return new ValueView({
+ valueView: {
+ case: 'unknownDenom',
+ value: { amount: assetBalance.amount, assetId: assetBalance.assetId },
+ },
+ });
+ else return new ValueView();
+};
interface InputTokenProps extends InputProps {
label: string;
@@ -47,7 +62,7 @@ export default function InputToken({
}: InputTokenProps) {
const vResult = validationResult(value, validations);
- const currentBalance = getCurrentBalance(selection?.asset);
+ const currentBalanceValueView = getCurrentBalanceValueView(selection?.asset);
const feeAsString = getFeeAsString(fee);
return (
@@ -93,7 +108,7 @@ export default function InputToken({
-
{currentBalance}
+
diff --git a/apps/webapp/src/components/shared/select-token-modal.tsx b/apps/webapp/src/components/shared/select-token-modal.tsx
index 3900b9b48e..b1f6b686be 100644
--- a/apps/webapp/src/components/shared/select-token-modal.tsx
+++ b/apps/webapp/src/components/shared/select-token-modal.tsx
@@ -8,7 +8,7 @@ import {
DialogTrigger,
Input,
} from '@penumbra-zone/ui';
-import { fromBaseUnitAmount } from '@penumbra-zone/types';
+import { fromBaseUnitAmountAndDenomMetadata } from '@penumbra-zone/types';
import { cn } from '@penumbra-zone/ui/lib/utils';
import { AccountBalance } from '../../fetchers/balances';
import { AssetIcon } from './asset-icon';
@@ -31,9 +31,11 @@ export default function SelectTokenModal({