Ibc base design layout (#850)

Co-authored-by: Gabe Rodriguez <[email protected]>

apps/extension/package.json

@@ -20,7 +20,7 @@
     "@bufbuild/protobuf": "^1.8.0",
     "@connectrpc/connect": "^1.4.0",
     "@connectrpc/connect-web": "^1.4.0",
-    "@penumbra-labs/registry": "4.0.0",
+    "@penumbra-labs/registry": "4.1.0",
     "@penumbra-zone/bech32": "workspace:*",
     "@penumbra-zone/client": "workspace:*",
     "@penumbra-zone/constants": "workspace:*",

apps/minifront/package.json

@@ -18,7 +18,7 @@
     "@buf/penumbra-zone_penumbra.bufbuild_es": "1.8.0-20240331004851-c3b058e666bc.2",
     "@buf/penumbra-zone_penumbra.connectrpc_es": "1.4.0-20240331004851-c3b058e666bc.2",
     "@bufbuild/protobuf": "^1.8.0",
-    "@penumbra-labs/registry": "4.0.0",
+    "@penumbra-labs/registry": "4.1.0",
     "@penumbra-zone/bech32": "workspace:*",
     "@penumbra-zone/client": "workspace:*",
     "@penumbra-zone/constants": "workspace:*",

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';
@@ -14,11 +13,10 @@ export interface HeaderLink {
 
 export const headerLinks: HeaderLink[] = [
   {
-    href: PagePath.DASHBOARD,
-    label: 'Dashboard',
-    active: true,
-    subLinks: [PagePath.TRANSACTIONS, PagePath.NFTS],
-    mobileIcon: <BoxIcon />,
+    href: PagePath.IBC,
+    label: 'Shield Funds',
+    active: false,
+    mobileIcon: <MixerHorizontalIcon className='size-5 text-muted-foreground' />,
   },
   {
     href: PagePath.SEND,
@@ -35,16 +33,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 = {

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

@@ -1,3 +1,22 @@
+import { Button } from '@penumbra-zone/ui/components/ui/button';
+import { LockClosedIcon } from '@radix-ui/react-icons';
+
 export const IbcInForm = () => {
-  return <div>To come...</div>;
+  return (
+    <form
+      className='flex w-full flex-col gap-4 md:w-[340px] xl:w-[450px]'
+      onSubmit={e => {
+        e.preventDefault();
+      }}
+    >
+      <h2 className='text-base font-bold text-gray-500'>Stuff to go here..</h2>
+
+      <Button type='submit' variant='onLight'>
+        <div className='flex items-center gap-2'>
+          <LockClosedIcon />
+          <span className='-mb-1'>Shield Assets</span>
+        </div>
+      </Button>
+    </form>
+  );
 };

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

@@ -7,6 +7,7 @@ import { filterBalancesPerChain, ibcSelector, ibcValidationErrors } from '../../
 import InputToken from '../shared/input-token';
 import { InputBlock } from '../shared/input-block';
 import { IbcLoaderResponse } from './ibc-loader';
+import { LockOpen2Icon } from '@radix-ui/react-icons';
 
 export const IbcOutForm = () => {
   const { balances } = useLoaderData() as IbcLoaderResponse;
@@ -74,15 +75,16 @@ export const IbcOutForm = () => {
       <Button
         type='submit'
         variant='gradient'
-        className='mt-9'
         disabled={
           !Number(amount) ||
           !destinationChainAddress ||
           !!Object.values(validationErrors).find(Boolean) ||
           !selection
         }
+        className='flex items-center gap-2'
       >
-        Send
+        <LockOpen2Icon />
+        <span className='-mb-1'>Unshield Assets</span>
       </Button>
     </form>
   );

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

@@ -1,16 +1,22 @@
 import { Card } from '@penumbra-zone/ui/components/ui/card';
-import { IbcInForm } from './ibc-in-form';
 import { IbcOutForm } from './ibc-out-form';
+import { IbcInForm } from './ibc-in-form';
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 
 export const IbcLayout = () => {
   return (
-    <div className='flex flex-1 flex-col gap-4 md:flex-row md:place-content-around'>
-      <Card className='md:self-start'>
-        <IbcInForm />
-      </Card>
-      <Card className='md:self-end'>
-        <IbcOutForm />
-      </Card>
-    </div>
+    <>
+      <div className="fixed inset-0 z-[-100] size-full bg-[url('penumbra-logo.svg')] bg-[length:160vmax] bg-fixed bg-[top_50%_left_25vw] bg-no-repeat" />
+      <div className='flex flex-1 flex-col gap-4 md:flex-row md:place-content-around'>
+        <Card light className='relative overflow-visible md:self-start'>
+          <ArrowRightIcon className='absolute inset-y-0 right-0 z-10 my-auto -mr-14 size-16 text-stone-300' />
+          <IbcInForm />
+        </Card>
+        <Card gradient className='relative overflow-visible md:self-end'>
+          <ArrowLeftIcon className='absolute inset-y-0 left-0 z-10 my-auto -ml-14 size-16 text-stone-700' />
+          <IbcOutForm />
+        </Card>
+      </div>
+    </>
   );
 };

packages/tailwind-config/index.ts

@@ -154,9 +154,6 @@ export default {
           url('penumbra-logo.svg')
         `,
       },
-      backgroundPosition: {
-        'right-center': 'right center',
-      },
     },
   },
   plugins: [tailwindCssAnimatePlugin],

packages/ui/components/ui/button.tsx

@@ -10,16 +10,17 @@ const buttonVariants = cva(
       variant: {
         default: 'hover:bg-teal/80 bg-teal',
         gradient:
-          'background-size-200 bg-button-gradient transition-all duration-500 hover:bg-right-center',
+          'background-size-200 bg-button-gradient transition-all duration-500 hover:bg-right',
         secondary:
-          'before:border-mask before:background-size-200 relative before:absolute before:inset-0 before:rounded-lg before:bg-button-gradient before:p-px before:transition-all before:duration-500 before:content-[""] before:hover:bg-right-center',
+          'before:border-mask before:background-size-200 relative before:absolute before:inset-0 before:rounded-lg before:bg-button-gradient before:p-px before:transition-all before:duration-500 before:content-[""] before:hover:bg-right',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         destructiveSecondary:
-          'before:border-mask before:background-size-200 relative text-destructive before:absolute before:inset-0 before:rounded-lg before:bg-destructive before:p-px before:transition-all before:duration-500 before:content-[""] hover:text-white before:hover:bg-right-center',
+          'before:border-mask before:background-size-200 relative text-destructive before:absolute before:inset-0 before:rounded-lg before:bg-destructive before:p-px before:transition-all before:duration-500 before:content-[""] hover:text-white before:hover:bg-right',
         outline:
           'rounded-none border-b border-border-secondary bg-background font-body font-bold text-muted-foreground hover:opacity-50',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-muted-foreground underline-offset-4 hover:underline',
+        onLight: 'bg-stone-700 text-white hover:bg-stone-600 focus:ring-2 focus:ring-gray-400',
       },
       size: {
         default: 'h-9 md:h-11',

packages/ui/components/ui/card.tsx

@@ -3,15 +3,20 @@ import { cn } from '../../lib/utils';
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   gradient?: boolean;
+  light?: boolean;
 }
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, gradient, children, ...props }, ref) => {
-    const baseClasses = 'bg-charcoal rounded-lg shadow-sm p-[30px] overflow-hidden';
+  ({ className, gradient, light, children, ...props }, ref) => {
+    const baseClasses = 'rounded-lg shadow-sm p-[30px] overflow-hidden';
     return (
       <div
         ref={ref}
-        className={cn(baseClasses, !!gradient && 'bg-card-radial', className)}
+        className={cn(
+          baseClasses,
+          light ? 'bg-stone-300' : gradient ? 'bg-card-radial' : 'bg-charcoal',
+          className,
+        )}
         {...props}
       >
         {children}