ibc page styles

apps/minifront/src/components/footer/footer.tsx

@@ -0,0 +1,11 @@
+import { MinifrontVersion } from './minifront-version';
+import { RightsMessage } from './rights-message';
+
+export const Footer = () => (
+  <footer className='w-full bg-gradient-to-b from-transparent to-black to-40% pt-[3em]'>
+    <div className='text-center text-stone-700 hover:text-stone-600'>
+      <RightsMessage />
+      <MinifrontVersion />
+    </div>
+  </footer>
+);

apps/minifront/src/components/footer/minifront-version.tsx

@@ -0,0 +1,22 @@
+import { format } from 'date-fns';
+
+export const MinifrontVersion = () => {
+  const shortenedCommitHash = __COMMIT_HASH__.slice(0, 7);
+  const dateObj = new Date(__COMMIT_DATE__);
+  const formattedDate = format(dateObj, "MMM dd yyyy HH:mm:ss 'GMT'x");
+  return (
+    <div>
+      Version&nbsp;
+      <a
+        target='_blank'
+        className='underline'
+        href={`${__GIT_ORIGIN_URL__}/commits/${__COMMIT_HASH__}`}
+        rel='noreferrer'
+      >
+        {shortenedCommitHash}
+      </a>
+      {' - '}
+      {formattedDate}
+    </div>
+  );
+};

apps/minifront/src/components/footer/rights-message.tsx

@@ -0,0 +1,17 @@
+export const RightsMessage = () => {
+  return (
+    <div>
+      <b>This software runs entirely on your device.</b>
+      <br />
+      <a
+        target='_blank'
+        rel='noreferrer'
+        className='underline'
+        href='https://www.coincenter.org/electronic-cash-decentralized-exchange-and-the-constitution/'
+      >
+        Learn more
+      </a>{' '}
+      about your rights.
+    </div>
+  );
+};

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

@@ -14,7 +14,13 @@ export interface HeaderLink {
 export const headerLinks: HeaderLink[] = [
   {
     href: PagePath.IBC,
-    label: 'Shield Funds',
+    label: 'Shield',
+    active: true,
+    mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
+  },
+  {
+    href: PagePath.DASHBOARD,
+    label: 'Assets',
     active: true,
     mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
   },

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

@@ -1,11 +1,9 @@
 import { TopRow } from './top-row';
 import { SyncStatusSection } from './sync-status-section';
 
-export const Header = () => {
-  return (
-    <header className='bg-background'>
-      <SyncStatusSection />
-      <TopRow />
-    </header>
-  );
-};
+export const Header = () => (
+  <header className='w-full bg-gradient-to-t from-transparent to-black to-40% pb-[3em]'>
+    <SyncStatusSection />
+    <TopRow />
+  </header>
+);

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

@@ -11,37 +11,51 @@ import { testnetIbcChains } from '@penumbra-zone/constants/src/chains';
 import { useStore } from '../../state';
 import { ibcSelector } from '../../state/ibc';
 
-export const ChainSelector = () => {
+export const ChainSelector = ({ light }: { light?: boolean }) => {
   const { chain, setChain } = useStore(ibcSelector);
   const [openSelect, setOpenSelect] = useState(false);
 
   return (
-    <div className='flex flex-col gap-3 rounded-lg border bg-background px-4 pb-5 pt-3'>
-      <p className='text-base font-bold'>Chain</p>
+    <div
+      className={cn(
+        light ? 'bg-teal' : 'bg-background',
+        'flex flex-col gap-3 rounded-lg border p-4',
+      )}
+    >
+      <p className={cn('text-base font-bold', light ? 'text-secondary-foreground' : 'text-muted')}>
+        Chain
+      </p>
       <Select
         value={chain?.displayName ?? ''}
         onValueChange={v => setChain(testnetIbcChains.find(i => i.displayName === v))}
         open={openSelect}
         onOpenChange={open => setOpenSelect(open)}
       >
-        <SelectTrigger open={openSelect}>
+        <SelectTrigger open={openSelect} className={light ? 'text-secondary' : 'text-muted'}>
           <SelectValue placeholder='Select chain'>
             {chain && (
               <div className='flex gap-2'>
                 <img src={chain.iconUrl} alt='Chain' className='size-5' />
-                <p className='mt-[2px] text-muted-foreground'>{chain.displayName}</p>
+                <p className={cn('mt-[2px]', light ? 'text-secondary' : 'text-muted-foreground')}>
+                  {chain.displayName}
+                </p>
               </div>
             )}
           </SelectValue>
         </SelectTrigger>
-        <SelectContent className='left-[-17px]'>
+        <SelectContent
+          className={cn(
+            'left-[-17px]',
+            light ? 'bg-teal text-secondary' : 'bg-background text-muted-foreground',
+          )}
+        >
           {testnetIbcChains.map((i, index) => (
             <SelectItem
               key={index}
               value={i.displayName}
               className={cn(
-                'hover:bg-brown',
-                chain?.displayName === i.displayName && 'bg-charcoal-secondary',
+                chain?.displayName === i.displayName && 'hidden',
+                light ? 'hover:bg-teal-600' : 'hover:bg-brown',
               )}
             >
               <div className='flex gap-2'>

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

@@ -1,10 +1,59 @@
 import { Card } from '@penumbra-zone/ui/components/ui/card';
+import { ChainSelector } from './chain-selector';
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { useLoaderData } from 'react-router-dom';
+import { IbcLoaderResponse } from './ibc-loader';
+import { useStore } from '../../state';
+import { filterBalancesPerChain, ibcSelector, ibcValidationErrors } from '../../state/ibc';
+import InputToken from '../shared/input-token';
+import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
+import { SelectAccount } from '@penumbra-zone/ui/components/ui/select-account';
+import { getAddrByIndex } from '../../fetchers/address';
 
 export const IbcInForm = () => {
+  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 light={true} className='md:p-5 text-neutral-900'>
-      To come...
-      <div style={{ minHeight: '25em' }}></div>
+    <Card light>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={e => {
+          e.preventDefault();
+          //void sendIbcDeposit();
+        }}
+      >
+        <ChainSelector />
+        <InputToken
+          label='Amount to shield'
+          placeholder='Enter an amount'
+          className='mb-1 text-muted'
+          selection={selection}
+          value={amount}
+          onChange={e => {
+            if (Number(e.target.value) < 0) return;
+            setAmount(e.target.value);
+          }}
+          setSelection={function (selection: BalancesResponse): void {
+            // no
+          }}
+          balances={filteredBalances}
+        />
+        <Button type='submit' variant='gradient'>
+          Shield
+        </Button>
+      </form>
     </Card>
   );
 };

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

@@ -25,19 +25,20 @@ export const IbcOutForm = () => {
   const validationErrors = useStore(ibcValidationErrors);
 
   return (
-    <Card gradient className='md:p-5'>
+    <Card gradient>
       <form
         className='flex flex-col gap-4'
         onSubmit={e => {
           e.preventDefault();
           void sendIbcWithdraw();
         }}
       >
-        <ChainSelector />
+        <ChainSelector light />
         <InputToken
-          label='Amount to send'
+          label='Amount to unshield'
           placeholder='Enter an amount'
-          className='mb-1'
+          className='mb-1 bg-teal text-secondary-foreground'
+          inputClassName='placeholder:text-secondary'
           selection={selection}
           setSelection={setSelection}
           value={amount}
@@ -56,7 +57,7 @@ export const IbcOutForm = () => {
         />
         <InputBlock
           label='Recipient on destination chain'
-          className='mb-1'
+          className='mb-1 bg-teal text-secondary-foreground placeholder:text-secondary'
           value={destinationChainAddress}
           validations={[
             {
@@ -75,16 +76,16 @@ export const IbcOutForm = () => {
         </InputBlock>
         <Button
           type='submit'
-          variant='gradient'
-          className='mt-9'
           disabled={
-            !Number(amount) ||
-            !destinationChainAddress ||
-            !!Object.values(validationErrors).find(Boolean) ||
-            !selection
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            false && // testing
+            (!Number(amount) ||
+              !destinationChainAddress ||
+              !!Object.values(validationErrors).find(Boolean) ||
+              !selection)
           }
         >
-          Send
+          Unshield
         </Button>
       </form>
     </Card>

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

@@ -3,31 +3,16 @@ import { IbcOutForm } from './ibc-out-form';
 
 export const IbcLayout = () => {
   return (
-    <div className='my-5 grid grid-cols-3 gap-5' style={{ gridTemplateRows: '8em auto 8em' }}>
-      <div className='col-span-1 row-span-2'>
-        <IbcInForm />
+    <>
+      <div className='fixed inset-0 z-[-100] size-full bg-logo-page bg-[length:160vmax] bg-fixed bg-[top_50%_left_25vw] bg-no-repeat'></div>
+      <div className='flex grow flex-col place-content-between gap-6 md:flex-row'>
+        <div className='basis-2/5 md:self-start'>
+          <IbcInForm />
+        </div>
+        <div className='basis-2/5 md:self-end'>
+          <IbcOutForm />
+        </div>
       </div>
-      <div className='col-span-2 row-span-1'>{/*→*/}</div>
-      <div
-        className='col-span-1 self-center overflow-visible'
-        style={{ height: 0, marginBottom: 'auto' }}
-      >
-        <img
-          src='./penumbra-logo.svg'
-          alt='Penumbra logo'
-          style={{
-            maxWidth: 'none',
-            width: '400%',
-            position: 'relative',
-            transform: 'translateY(-40%)',
-            zIndex: -1,
-          }}
-        />
-      </div>
-      <div className='col-span-1 row-span-2 col-start-3'>
-        <IbcOutForm />
-      </div>
-      <div className='col-span-2 row-span-1'>{/* ← */}</div>
-    </div>
+    </>
   );
 };

apps/minifront/src/components/layout.tsx

@@ -2,12 +2,12 @@ import { LoaderFunction, Outlet, useLoaderData } from 'react-router-dom';
 import { getChainId } from '../fetchers/chain-id';
 import { HeadTag } from './metadata/head-tag';
 import { Header } from './header/header';
+import { Footer } from './footer/footer';
 import { Toaster } from '@penumbra-zone/ui/components/ui/toaster';
-import '@penumbra-zone/ui/styles/globals.css';
 import { ExtensionNotConnected } from './extension-not-connected';
 import { ExtensionNotInstalled } from './extension-not-installed';
-import { Footer } from './footer';
-import { isPraxConnected, isPraxConnectedTimeout, isPraxAvailable } from '@penumbra-zone/client';
+import { isPraxAvailable, isPraxConnected, isPraxConnectedTimeout } from '@penumbra-zone/client';
+import '@penumbra-zone/ui/styles/globals.css';
 
 export type LayoutLoaderResult =
   | { isInstalled: boolean; isConnected: boolean }
@@ -32,12 +32,14 @@ export const Layout = () => {
   if (!isInstalled) return <ExtensionNotInstalled />;
   if (!isConnected) return <ExtensionNotConnected />;
 
+  // bg-logo-page bg-[length:160vmax] bg-fixed bg-[top_50%_left_25vw] bg-no-repeat'
+
   return (
     <>
       <HeadTag />
-      <div className='relative flex min-h-screen flex-col text-muted'>
+      <div className='flex min-h-screen flex-col'>
         <Header />
-        <main className='mx-auto w-full flex-1 px-6 pb-4 pt-5 md:px-[88px] md:pb-0 xl:max-w-[1276px] xl:px-12'>
+        <main className='mx-auto flex grow px-6 pb-4 pt-5 md:px-[88px] md:pb-0 xl:max-w-[1276px] xl:px-12'>
           <Outlet />
         </main>
         <Footer />