ibc: transparent address support

packages/services/src/view-service/transaction-info-by-hash.ts

@@ -4,6 +4,7 @@
 import { generateTransactionInfo } from '@penumbra-zone/wasm/transaction';
 import { TransactionInfo } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb';
 import { fvkCtx } from '../ctx/full-viewing-key.js';
+import { txvTranslator } from './util/transaction-view.js';
 
 export const transactionInfoByHash: Impl['transactionInfoByHash'] = async (req, ctx) => {
   if (!req.id) {
@@ -23,11 +24,15 @@
     throw new ConnectError('Transaction not available', Code.NotFound);
   }
 
-  const { txp: perspective, txv: view } = await generateTransactionInfo(
+  let { txp: perspective, txv: view } = await generateTransactionInfo(
     await fvk(),
     transaction,
     indexedDb.constants(),
   );
+
+  // Invoke a higher-level translator on the transaction view.
+  view = await txvTranslator(view);
+
   const txInfo = new TransactionInfo({ height, id: req.id, transaction, perspective, view });
   return { txInfo };
 };

packages/services/src/view-service/util/transaction-view.ts

@@ -0,0 +1,28 @@
+import { TransactionView } from '@penumbra-zone/protobuf/penumbra/core/transaction/v1/transaction_pb';
+import { getTransmissionKeyByAddress } from '@penumbra-zone/wasm/keys';
+
+// Some transaction views (TXVs) require additional preprocessing before being rendered
+// in the UI component library. For example, when handling IBC withdrawals with transparent
+// addresses, this component transforms ephemeral addresses into their bech32-encoded
+// transparent form to ensure the proper data is being displayed.
+export const txvTranslator = async (view: TransactionView): Promise<TransactionView> => {
+  // 'Ics20Withdrawal' action view
+  const withdrawalAction = view?.bodyView?.actionViews?.find(
+    action => action.actionView.case === 'ics20Withdrawal',
+  );
+
+  if (withdrawalAction?.actionView.case === 'ics20Withdrawal') {
+    const withdrawal = withdrawalAction.actionView.value;
+    // Create 80-byte array initialized to zeros, then set first 32 bytes to transmission key.
+    // This constructs a valid address format where:
+    // - First 32 bytes: transmission key
+    // - Remaining 48 bytes: zeroed (16-byte diversifier + 32-byte clue key)
+    if (withdrawal.returnAddress && withdrawal.useTransparentAddress) {
+      const newInner = new Uint8Array(80).fill(0);
+      newInner.set(getTransmissionKeyByAddress(withdrawal.returnAddress), 0);
+      withdrawal.returnAddress.inner = newInner;
+    }
+  }
+
+  return view;
+};

packages/ui-deprecated/components/ui/tx/actions-views/isc20-withdrawal.tsx

@@ -3,6 +3,7 @@ import { ViewBox } from '../viewbox';
 import { ActionDetails } from './action-details';
 import { joinLoHiAmount } from '@penumbra-zone/types/amount';
 import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra';
+import { bech32TransparentAddress } from '@penumbra-zone/bech32m/tpenumbra';
 
 // Converts nanoseconds timestamp to UTC timestamp string
 export const getUtcTime = (time: bigint) => {
@@ -37,7 +38,9 @@ export const Ics20WithdrawalComponent = ({ value }: { value: Ics20Withdrawal })
 
           {value.returnAddress && (
             <ActionDetails.Row label='Return Address'>
-              {bech32mAddress(value.returnAddress)}
+              {value.useTransparentAddress
+                ? bech32TransparentAddress({ inner: value.returnAddress.inner.slice(0, 32) })
+                : bech32mAddress(value.returnAddress)}
             </ActionDetails.Row>
           )}