New Tab: IBC

apps/extension/src/routes/popup/approval/transaction/index.tsx

@@ -33,8 +33,8 @@ export const TransactionApproval = () => {
 
   return (
     <div className='flex h-screen flex-col justify-between'>
-      <div className='grow overflow-auto p-[30px] pt-10'>
-        <p className='bg-text-linear bg-clip-text font-headline text-2xl font-bold text-transparent'>
+      <div className='grow overflow-auto p-[30px] pb-44 pt-10'>
+        <p className='bg-text-linear bg-clip-text pb-2 font-headline text-2xl font-bold text-transparent'>
           Confirm transaction
         </p>
 

apps/minifront/src/components/extension-unavailable.tsx

@@ -9,7 +9,7 @@ export const ExtensionUnavailable = () => {
     <>
       <HeadTag />
 
-      <SplashPage title='Penumbra extension unavailble'>
+      <SplashPage title='Penumbra extension unavailable'>
         <p className='mb-2'>We can&apos;t currently connect to the Penumbra extension.</p>
         <p className='mb-2'>
           This page may have been left open for too long, causing a timeout. Please reload this page

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

@@ -23,7 +23,7 @@ export const headerLinks: HeaderLink[] = [
     href: PagePath.SEND,
     label: 'Send',
     active: true,
-    subLinks: [PagePath.RECEIVE, PagePath.IBC],
+    subLinks: [PagePath.RECEIVE],
     mobileIcon: <ArrowTopRightIcon className='size-5 text-muted-foreground' />,
   },
   {
@@ -39,8 +39,8 @@ export const headerLinks: HeaderLink[] = [
     mobileIcon: <TextAlignLeftIcon className='size-5 text-muted-foreground' />,
   },
   {
-    href: PagePath.GOVERNANCE,
-    label: 'Governance',
+    href: PagePath.IBC,
+    label: 'IBC',
     active: false,
     mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
   },

apps/minifront/src/components/send/ibc/chain-selector.tsx → apps/minifront/src/components/ibc/chain-selector.tsx

@@ -1,9 +1,9 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@penumbra-zone/ui';
 import { cn } from '@penumbra-zone/ui/lib/utils';
 import { useState } from 'react';
-import { useStore } from '../../../state';
-import { ibcSelector } from '../../../state/ibc';
 import { testnetIbcChains } from '@penumbra-zone/constants/src/chains';
+import { useStore } from '../../state';
+import { ibcSelector } from '../../state/ibc';
 
 export const ChainSelector = () => {
   const { chain, setChain } = useStore(ibcSelector);
@@ -34,7 +34,7 @@ export const ChainSelector = () => {
               key={index}
               value={i.displayName}
               className={cn(
-                'hover:bg-brown ',
+                'hover:bg-brown',
                 chain?.displayName === i.displayName && 'bg-charcoal-secondary',
               )}
             >

apps/minifront/src/components/ibc/ibc-in-form.tsx

@@ -0,0 +1,9 @@
+import { Card } from '@penumbra-zone/ui';
+
+export const IbcInForm = () => {
+  return (
+    <Card gradient className='md:p-5'>
+      To come...
+    </Card>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { LoaderFunction } from 'react-router-dom';
+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 = initialSelection;
+      state.ibc.chain = initialChain;
+    });
+  }
+
+  return assetBalances;
+};

apps/minifront/src/components/ibc/ibc-out-form.tsx

@@ -0,0 +1,90 @@
+import { Button, Card, Input } from '@penumbra-zone/ui';
+import { ChainSelector } from './chain-selector';
+import { useLoaderData } from 'react-router-dom';
+import { useStore } from '../../state';
+import { filterBalancesPerChain, ibcSelector, ibcValidationErrors } from '../../state/ibc';
+import InputToken from '../shared/input-token';
+import { InputBlock } from '../shared/input-block';
+import { IbcLoaderResponse } from './ibc-loader';
+
+export const IbcOutForm = () => {
+  const assetBalances = useLoaderData() as IbcLoaderResponse;
+  const {
+    sendIbcWithdraw,
+    destinationChainAddress,
+    setDestinationChainAddress,
+    amount,
+    setAmount,
+    selection,
+    setSelection,
+    chain,
+  } = useStore(ibcSelector);
+  const filteredBalances = filterBalancesPerChain(assetBalances, chain);
+  const validationErrors = useStore(ibcValidationErrors);
+
+  return (
+    <Card gradient className='md:p-5'>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={e => {
+          e.preventDefault();
+          void sendIbcWithdraw();
+        }}
+      >
+        <ChainSelector />
+        <InputToken
+          label='Amount to send'
+          placeholder='Enter an amount'
+          className='mb-1'
+          selection={selection}
+          setSelection={setSelection}
+          value={amount}
+          onChange={e => {
+            if (Number(e.target.value) < 0) return;
+            setAmount(e.target.value);
+          }}
+          validations={[
+            {
+              type: 'error',
+              issue: 'insufficient funds',
+              checkFn: () => validationErrors.amountErr,
+            },
+          ]}
+          balances={filteredBalances}
+        />
+        <InputBlock
+          label='Recipient on destination chain'
+          className='mb-1'
+          value={destinationChainAddress}
+          validations={[
+            {
+              type: 'error',
+              issue: 'address not valid',
+              checkFn: () => validationErrors.recipientErr,
+            },
+          ]}
+        >
+          <Input
+            variant='transparent'
+            placeholder='Enter the address'
+            value={destinationChainAddress}
+            onChange={e => setDestinationChainAddress(e.target.value)}
+          />
+        </InputBlock>
+        <Button
+          type='submit'
+          variant='gradient'
+          className='mt-9'
+          disabled={
+            !Number(amount) ||
+            !destinationChainAddress ||
+            !!Object.values(validationErrors).find(Boolean) ||
+            !selection
+          }
+        >
+          Send
+        </Button>
+      </form>
+    </Card>
+  );
+};

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

@@ -0,0 +1,11 @@
+import { IbcInForm } from './ibc-in-form';
+import { IbcOutForm } from './ibc-out-form';
+
+export const IbcLayout = () => {
+  return (
+    <div className='grid md:grid-cols-2 md:gap-5'>
+      <IbcInForm />
+      <IbcOutForm />
+    </div>
+  );
+};

apps/minifront/src/components/metadata/content.ts

@@ -39,10 +39,6 @@ export const metadata: Record<PagePath, PageMetadata> = {
     title: 'Penumbra | Swap',
     description: eduPanelContent[EduPanel.TEMP_FILLER],
   },
-  [PagePath.GOVERNANCE]: {
-    title: 'Penumbra | Governance',
-    description: eduPanelContent[EduPanel.TEMP_FILLER],
-  },
   [PagePath.STAKING]: {
     title: 'Penumbra | Staking',
     description: eduPanelContent[EduPanel.TEMP_FILLER],

apps/minifront/src/components/metadata/paths.ts

@@ -2,12 +2,11 @@ export enum PagePath {
   INDEX = '/',
   SWAP = '/swap',
   SEND = '/send',
-  GOVERNANCE = '/governance',
   STAKING = '/staking',
   RECEIVE = '/send/receive',
   TRANSACTIONS = '/dashboard/transactions',
   DASHBOARD = '/dashboard',
-  IBC = '/send/ibc',
+  IBC = '/ibc',
   NFTS = '/dashboard/nfts',
   TRANSACTION_DETAILS = '/tx/:hash',
 }

apps/minifront/src/components/root-router.tsx

@@ -7,12 +7,13 @@ import { DashboardLayout } from './dashboard/layout';
 import { TxDetails, TxDetailsErrorBoundary, TxDetailsLoader } from './tx-details';
 import { SendLayout } from './send/layout';
 import { SendAssetBalanceLoader, SendForm } from './send/send-form';
-import IbcForm, { IbcAssetBalanceLoader } from './send/ibc/ibc-form';
 import { Receive } from './send/receive';
 import { ErrorBoundary } from './shared/error-boundary';
 import { SwapLayout } from './swap/layout';
 import { SwapLoader } from './swap/swap-loader';
 import { StakingLayout, StakingLoader } from './staking/layout';
+import { IbcLoader } from './ibc/ibc-loader';
+import { IbcLayout } from './ibc/layout';
 
 export const rootRouter = createHashRouter([
   {
@@ -53,11 +54,6 @@ export const rootRouter = createHashRouter([
             path: PagePath.RECEIVE,
             element: <Receive />,
           },
-          {
-            path: PagePath.IBC,
-            loader: IbcAssetBalanceLoader,
-            element: <IbcForm />,
-          },
         ],
       },
       {
@@ -76,6 +72,11 @@ export const rootRouter = createHashRouter([
         loader: StakingLoader,
         element: <StakingLayout />,
       },
+      {
+        path: PagePath.IBC,
+        loader: IbcLoader,
+        element: <IbcLayout />,
+      },
     ],
   },
 ]);

apps/minifront/src/components/send/constants.ts

@@ -13,15 +13,9 @@ export const sendTabsHelper: SendTabMap = {
     label: 'Receiving Funds',
     content: EduPanel.RECEIVING_FUNDS,
   },
-  [PagePath.IBC]: {
-    src: './ibc-gradient.svg',
-    label: 'IBC withdraw',
-    content: EduPanel.IBC_WITHDRAW,
-  },
 };
 
 export const sendTabs = [
   { title: 'Send', href: PagePath.SEND, active: true },
   { title: 'Receive', href: PagePath.RECEIVE, active: true },
-  { title: 'IBC', href: PagePath.IBC, active: false },
 ];