Tx details

apps/minifront/src/components/header/constants.tsx

@@ -41,7 +41,7 @@ export const headerLinks: HeaderLink[] = [
   {
     href: PagePath.IBC,
     label: 'IBC',
-    active: true,
+    active: false,
     mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
   },
 ];

apps/minifront/src/components/ibc/ibc-loader.ts

@@ -3,17 +3,21 @@ import { testnetIbcChains } from '@penumbra-zone/constants/src/chains';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { getBalances } from '../../fetchers/balances';
 import { useStore } from '../../state';
+import { filterBalancesPerChain } from '../../state/ibc';
 
 export type IbcLoaderResponse = BalancesResponse[];
 
 export const IbcLoader: LoaderFunction = async (): Promise<IbcLoaderResponse> => {
   const assetBalances = await getBalances();
 
   if (assetBalances[0]) {
+    const initialChain = testnetIbcChains[0];
+    const initialSelection = filterBalancesPerChain(assetBalances, initialChain)[0];
+
     // set initial account if accounts exist and asset if account has asset list
     useStore.setState(state => {
-      state.ibc.selection = assetBalances[0];
-      state.ibc.chain = testnetIbcChains[0];
+      state.ibc.selection = initialSelection;
+      state.ibc.chain = initialChain;
     });
   }
 

apps/minifront/src/components/ibc/layout.tsx

@@ -1,10 +1,6 @@
 import { IbcInForm } from './ibc-in-form';
 import { IbcOutForm } from './ibc-out-form';
 
-// <div className='grid gap-6 md:grid-cols-2 md:gap-4 xl:grid-cols-3 xl:gap-5'>
-// <Card gradient className='order-3 row-span-2 flex-1 p-5 md:order-1 md:p-4 xl:p-5'>
-// className='absolute inset-x-0 top-[-75px] z-0 mx-auto h-[141px] w-[136px] rotate-[320deg] md:left-[-100px] md:top-[-140px] md:mx-0 md:size-[234px]'
-
 export const IbcLayout = () => {
   return (
     <div className='grid md:grid-cols-2 md:gap-5'>

apps/minifront/src/state/ibc.test.ts

@@ -13,8 +13,6 @@ import { produce } from 'immer';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { bech32ToAddress } from '@penumbra-zone/bech32';
 
-// TODO: Revisit tests when re-implementing ibc form
-
 describe.skip('IBC Slice', () => {
   const selectionExample = new BalancesResponse({
     balanceView: new ValueView({
@@ -94,6 +92,8 @@ describe.skip('IBC Slice', () => {
         chainId: 'osmosis-test-5',
         ibcChannel: 'channel-0',
         iconUrl: '/test.svg',
+        nativeAssets: [],
+        addressPrefix: 'osmo',
       } satisfies Chain;
 
       useStore.getState().ibc.setChain(chain);

apps/minifront/src/state/ibc.ts

@@ -21,6 +21,7 @@ import { IbcLoaderResponse } from '../components/ibc/ibc-loader';
 import { getAssetId } from '@penumbra-zone/getters/src/metadata';
 import { STAKING_TOKEN_METADATA } from '@penumbra-zone/constants/src/assets';
 import { bech32IsValid } from '@penumbra-zone/bech32';
+import { errorToast } from '@penumbra-zone/ui';
 
 export interface IbcSendSlice {
   selection: BalancesResponse | undefined;
@@ -69,12 +70,14 @@ export const createIbcSendSlice = (): SliceCreator<IbcSendSlice> => (set, get) =
 
       try {
         const req = await getPlanRequest(get().ibc);
-        await planBuildBroadcast('unknown', req);
+        await planBuildBroadcast('ics20Withdrawal', req);
 
         // Reset form
         set(state => {
           state.ibc.amount = '';
         });
+      } catch (e) {
+        errorToast(e, 'Ics20 withdrawal error').render();
       } finally {
         set(state => {
           state.ibc.txInProgress = false;

packages/perspective/transaction/classification.ts

@@ -18,4 +18,6 @@ export type TransactionClassification =
   /** The transaction contains an `undelegate` action. */
   | 'undelegate'
   /** The transaction contains an `undelegateClaim` action. */
-  | 'undelegateClaim';
+  | 'undelegateClaim'
+  /** The transaction contains an `ics20Withdrawal` action. */
+  | 'ics20Withdrawal';

packages/perspective/transaction/classify.ts

@@ -13,6 +13,8 @@ export const classifyTransaction = (txv?: TransactionView): TransactionClassific
   if (txv.bodyView?.actionViews.some(a => a.actionView.case === 'undelegate')) return 'undelegate';
   if (txv.bodyView?.actionViews.some(a => a.actionView.case === 'undelegateClaim'))
     return 'undelegateClaim';
+  if (txv.bodyView?.actionViews.some(a => a.actionView.case === 'ics20Withdrawal'))
+    return 'ics20Withdrawal';
 
   const hasOpaqueSpend = txv.bodyView?.actionViews.some(
     a => a.actionView.case === 'spend' && a.actionView.value.spendView.case === 'opaque',
@@ -85,6 +87,7 @@ export const TRANSACTION_LABEL_BY_CLASSIFICATION: Record<TransactionClassificati
   delegate: 'Delegate',
   undelegate: 'Undelegate',
   undelegateClaim: 'Undelegate Claim',
+  ics20Withdrawal: 'Ics20 Withdrawal',
 };
 
 export const getTransactionClassificationLabel = (txv?: TransactionView): string =>

packages/perspective/transaction/perspective.ts

@@ -77,6 +77,7 @@ export const viewActionFromEmptyPerspective = (action: Action): ActionView | und
           }),
         },
       });
+    case 'ics20Withdrawal':
     case 'delegate':
     case 'undelegate':
       return new ActionView({

packages/transport-chrome/session-manager.ts

@@ -102,11 +102,13 @@ export class CRSessionManager {
     port.onMessage.addListener((i, p) => {
       void (async () => {
         try {
-          if (isTransportMessage(i))
+          if (isTransportMessage(i)) {
             p.postMessage(await this.clientMessageHandler(session.acont.signal, i));
-          else if (isTransportInitChannel(i))
+          } else if (isTransportInitChannel(i)) {
             console.warn('Client streaming unimplemented', this.acceptChannelStreamRequest(i));
-          else console.warn('Unknown item in transport', i);
+          } else {
+            console.warn('Unknown item in transport', i);
+          }
         } catch (e) {
           session.acont.abort(e);
         }

packages/types/src/registry.ts

@@ -13,6 +13,7 @@ import { CustodyService } from '@buf/penumbra-zone_penumbra.connectrpc_es/penumb
 import { TendermintProxyService } from '@buf/penumbra-zone_penumbra.connectrpc_es/penumbra/util/tendermint_proxy/v1/tendermint_proxy_connect';
 import { ViewService } from '@buf/penumbra-zone_penumbra.connectrpc_es/penumbra/view/v1/view_connect';
 import { createRegistry, IMessageTypeRegistry } from '@bufbuild/protobuf';
+import { ClientState } from '@buf/cosmos_ibc.bufbuild_es/ibc/lightclients/tendermint/v1/tendermint_pb';
 
 /**
  * This type registry is for JSON serialization of protobuf messages.
@@ -30,13 +31,13 @@ export const typeRegistry: IMessageTypeRegistry = createRegistry(
   CustodyService,
   ViewService,
 
-  IbcQueryService,
-
   AppService,
+  ClientState,
   CompactBlockService,
   DexService,
   DexSimulationService,
   GovernanceService,
+  IbcQueryService,
   SctService,
   ShieldedPoolService,
   StakeService,

packages/ui/components/ui/tx/view/action-view.tsx

@@ -7,6 +7,7 @@ import { SwapClaimViewComponent } from './swap-claim';
 import { DelegateComponent } from './delegate';
 import { UndelegateComponent } from './undelegate';
 import { UndelegateClaimComponent } from './undelegate-claim';
+import { Ics20WithdrawalComponent } from './isc20-withdrawal';
 
 const CASE_TO_LABEL: Record<string, string> = {
   daoDeposit: 'DAO Deposit',
@@ -55,7 +56,7 @@ export const ActionViewComponent = ({ av: { actionView } }: { av: ActionView })
       return <SwapClaimViewComponent value={actionView.value} />;
 
     case 'ics20Withdrawal':
-      return <ViewBox label='ICS20 Withdrawal' />;
+      return <Ics20WithdrawalComponent value={actionView.value} />;
 
     case 'delegate':
       return <DelegateComponent value={actionView.value} />;

packages/ui/components/ui/tx/view/isc20-withdrawal.tsx

@@ -0,0 +1,51 @@
+import { Ics20Withdrawal } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/ibc/v1/ibc_pb';
+import { ViewBox } from './viewbox';
+import { ActionDetails } from './action-details';
+import { joinLoHiAmount } from '@penumbra-zone/types/src/amount';
+import { bech32Address } from '@penumbra-zone/bech32';
+
+export const Ics20WithdrawalComponent = ({ value }: { value: Ics20Withdrawal }) => {
+  return (
+    <ViewBox
+      label='Ics20 Withdrawal'
+      visibleContent={
+        <ActionDetails>
+          {value.denom && <ActionDetails.Row label='Denom'>{value.denom.denom}</ActionDetails.Row>}
+
+          {value.amount && (
+            <ActionDetails.Row label='Amount'>
+              {joinLoHiAmount(value.amount).toString()}
+            </ActionDetails.Row>
+          )}
+
+          <ActionDetails.Row label='Destination Address'>
+            {value.destinationChainAddress}
+          </ActionDetails.Row>
+
+          <ActionDetails.Row label='Source channel'>{value.sourceChannel}</ActionDetails.Row>
+
+          {value.returnAddress && (
+            <ActionDetails.Row label='Return Address'>
+              {bech32Address(value.returnAddress)}
+            </ActionDetails.Row>
+          )}
+
+          {value.timeoutHeight && (
+            <>
+              <ActionDetails.Row label='Timeout Revision Height'>
+                {value.timeoutHeight.revisionHeight.toString()}
+              </ActionDetails.Row>
+              <ActionDetails.Row label='Timeout Revision Number'>
+                {value.timeoutHeight.revisionNumber.toString()}
+              </ActionDetails.Row>
+            </>
+          )}
+
+          <ActionDetails.Row label='Timeout Time'>
+            {new Date(Number(value.timeoutTime)).toString()}
+          </ActionDetails.Row>
+        </ActionDetails>
+      }
+    />
+  );
+};