penumbra-zone · hdevalence · Mar 20, 2024 · Mar 21, 2024 · Mar 21, 2024 · Mar 21, 2024
diff --git a/apps/minifront/index.html b/apps/minifront/index.html
@@ -3,8 +3,9 @@
   <head>
     <link href="./favicon.png" rel="icon" sizes="80x80" type="image/png" />
   </head>
+
   <body>
-    <div id="root"></div>
+    <div id="root" style="overflow: hidden"></div>
     <script src="./src/main.tsx" type="module"></script>
   </body>
 </html>
diff --git a/apps/minifront/src/components/footer/footer.tsx b/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>
+);
diff --git a/apps/minifront/src/components/footer/index.tsx b/apps/minifront/src/components/footer/index.tsx
diff --git a/apps/minifront/src/components/footer/minifront-version.tsx b/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>
+  );
+};
diff --git a/apps/minifront/src/components/footer/rights-message.tsx b/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>
+  );
+};
diff --git a/apps/minifront/src/components/header/constants.tsx b/apps/minifront/src/components/header/constants.tsx
@@ -1,5 +1,4 @@
 import { PagePath } from '../metadata/paths';
-import { BoxIcon } from '../../icons/box';
 import { SwapIcon } from '../../icons/swap';
 import { ReactElement } from 'react';
 import { ArrowTopRightIcon, MixerHorizontalIcon, TextAlignLeftIcon } from '@radix-ui/react-icons';
@@ -13,12 +12,17 @@ export interface HeaderLink {
 }
 
 export const headerLinks: HeaderLink[] = [
+  {
+    href: PagePath.IBC,
+    label: 'Shield',
+    active: true,
+    mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
+  },
   {
     href: PagePath.DASHBOARD,
-    label: 'Dashboard',
+    label: 'Assets',
     active: true,
-    subLinks: [PagePath.TRANSACTIONS, PagePath.NFTS],
-    mobileIcon: <BoxIcon />,
+    mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
   },
   {
     href: PagePath.SEND,
@@ -35,16 +39,10 @@ export const headerLinks: HeaderLink[] = [
   },
   {
     href: PagePath.STAKING,
-    label: 'Staking',
+    label: 'Stake',
     active: true,
     mobileIcon: <TextAlignLeftIcon className='size-5 text-muted-foreground' />,
   },
-  {
-    href: PagePath.IBC,
-    label: 'IBC',
-    active: false,
-    mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
-  },
 ];
 
 export const transactionLink = {

diff --git a/apps/minifront/src/components/header/header.tsx b/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>
-      <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>
+);
diff --git a/apps/minifront/src/components/header/navbar.tsx b/apps/minifront/src/components/header/navbar.tsx
@@ -7,7 +7,7 @@ export const Navbar = () => {
   const pathname = usePagePath();
 
   return (
-    <nav className='hidden max-w-2xl gap-4 xl:flex xl:grow xl:justify-between'>
+    <nav className='hidden max-w-xl gap-4 xl:flex xl:grow xl:justify-between'>
       {headerLinks.map(link =>
         link.active ? (
           <Link

diff --git a/apps/minifront/src/components/ibc/chain-selector.tsx b/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'>

diff --git a/apps/minifront/src/components/ibc/ibc-in-form.tsx b/apps/minifront/src/components/ibc/ibc-in-form.tsx
@@ -1,9 +1,50 @@
 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 } from '../../state/ibc';
+import InputToken from '../shared/input-token';
+import { SelectAccount } from '@penumbra-zone/ui/components/ui/select-account';
+import { getAddrByIndex } from '../../fetchers/address';
 
 export const IbcInForm = () => {
+  const assetBalances = useLoaderData() as IbcLoaderResponse;
+  const { amount, setAmount, selection, chain } = useStore(ibcSelector);
+  const filteredBalances = filterBalancesPerChain(assetBalances, chain);
+
   return (
-    <Card gradient className='md:p-5'>
-      To come...
+    <Card light>
+      <form
+        className='flex flex-col gap-4'
+        onSubmit={e => {
+          e.preventDefault();
+          //void sendIbcDeposit();
+        }}
+      >
+        <div className='hidden'>
+          {/* account selector distorts the parent container for some reason*/}
+          <SelectAccount getAddrByIndex={getAddrByIndex} />
+        </div>
+        <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={() => null}
+          balances={filteredBalances}
+        />
+        <Button type='submit' variant='gradient'>
+          Shield
+        </Button>
+      </form>
     </Card>
   );
 };
diff --git a/apps/minifront/src/components/ibc/ibc-out-form.tsx b/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>

diff --git a/apps/minifront/src/components/ibc/layout.tsx b/apps/minifront/src/components/ibc/layout.tsx
@@ -3,9 +3,16 @@ import { IbcOutForm } from './ibc-out-form';
 
 export const IbcLayout = () => {
   return (
-    <div className='grid md:grid-cols-2 md:gap-5'>
-      <IbcInForm />
-      <IbcOutForm />
-    </div>
+    <>
+      <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>
+    </>
   );
 };
diff --git a/apps/minifront/src/components/layout.tsx b/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 bg-background 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 />