Combine swap and auction forms (#1147)

* Rename property

* Use useStoreShallow

* Move swap state into its own directory

* Extract the common parts of the swap and dutch auction states

* Continue reconfiguring state structure; fix max-width issues

* Hide instant-swap-specific items when the swap is not instant:

* Tweak language

* Continue refactoring state

* Move component directory

* Rename price -> output

* Tweak width

* Avoid unnecessary data loads

* Tweak reset

* Fix tests

* Use a smarter submit button

* Tweak selectors

* Disable the Estimate button when there's no amount

* Remove unused paths

* Fix property access

* Build out rest of UI

* Reorganize; delete unused code

* Fix typings

* Refactor to use class const

* Remove all traces of the /swap/auction path

* Reorganize

* Fix incorrect key prop

* Fix step size

* Add labels

* Add changeset

* Add comment

* Use more Zustand state in TokenSwapInput; move balances into Zustand

* Revert changes for now

* Move assets into Zustand

* Simplify types

* Only put swappable assets in state

* Remove unused property

* Fix button alignment

* Respond to Henry's feedback

* Reduce nesting

* Refactor to use more idiomatic Tailwind

.changeset/cold-boats-build.md

@@ -0,0 +1,5 @@
+---
+'minifront': minor
+---
+
+Combine the swap and auction forms

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

@@ -12,7 +12,7 @@ export const DashboardLayout = () => {
 
   return (
     <RestrictMaxWidth>
-      <div className='grid gap-6 md:gap-4 lg:grid-cols-3 xl:gap-5'>
+      <div className='grid grid-std-spacing lg:grid-cols-3'>
         <Card
           gradient
           className='order-2 flex flex-1 flex-col p-5 md:p-4 lg:order-1 lg:col-span-2 lg:row-span-2 xl:p-5'

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

@@ -29,7 +29,6 @@ export const headerLinks: HeaderLink[] = [
     href: PagePath.SWAP,
     label: 'Swap',
     active: true,
-    subLinks: [PagePath.SWAP_AUCTION],
     mobileIcon: <SwapIcon />,
   },
   {

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

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

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

@@ -1,7 +1,6 @@
 export enum PagePath {
   INDEX = '/',
   SWAP = '/swap',
-  SWAP_AUCTION = '/swap/auction',
   SEND = '/send',
   STAKING = '/staking',
   RECEIVE = '/send/receive',

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

@@ -10,13 +10,10 @@ import { SendAssetBalanceLoader, SendForm } from './send/send-form';
 import { Receive } from './send/receive';
 import { ErrorBoundary } from './shared/error-boundary';
 import { SwapLayout } from './swap/layout';
-import { SwapLoader } from './swap/swap/swap-loader';
+import { SwapLoader } from './swap/swap-loader';
 import { StakingLayout, StakingLoader } from './staking/layout';
 import { IbcLoader } from './ibc/ibc-loader';
 import { IbcLayout } from './ibc/layout';
-import { Swap } from './swap/swap';
-import { DutchAuction } from './swap/dutch-auction';
-import { DutchAuctionLoader } from './swap/dutch-auction/dutch-auction-loader';
 
 export const rootRouter = createHashRouter([
   {
@@ -58,19 +55,8 @@ export const rootRouter = createHashRouter([
       },
       {
         path: PagePath.SWAP,
+        loader: SwapLoader,
         element: <SwapLayout />,
-        children: [
-          {
-            index: true,
-            loader: SwapLoader,
-            element: <Swap />,
-          },
-          {
-            path: PagePath.SWAP_AUCTION,
-            loader: DutchAuctionLoader,
-            element: <DutchAuction />,
-          },
-        ],
       },
       {
         path: PagePath.TRANSACTION_DETAILS,

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

@@ -12,7 +12,7 @@ export const SendLayout = () => {
 
   return (
     <RestrictMaxWidth>
-      <div className='grid gap-6 md:grid-cols-2 md:gap-4 xl:grid-cols-3 xl:gap-5'>
+      <div className='grid grid-std-spacing md:grid-cols-2 xl:grid-cols-3'>
         <div className='hidden xl:order-1 xl:block' />
         <Card
           gradient

apps/minifront/src/components/shared/restrict-max-width.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
 
 export const RestrictMaxWidth = ({ children }: { children: ReactNode }) => {
-  return <div className='mx-auto xl:max-w-[1276px]'>{children}</div>;
+  return <div className='mx-auto w-full max-w-full xl:max-w-[1276px]'>{children}</div>;
 };

apps/minifront/src/components/swap/dutch-auction/auctions.tsx → apps/minifront/src/components/swap/auction-list/index.tsx

@@ -10,6 +10,8 @@ import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
 import { AuctionId } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/auction/v1/auction_pb';
 import { GradientHeader } from '@penumbra-zone/ui/components/ui/gradient-header';
 import { QueryLatestStateButton } from './query-latest-state-button';
+import { Card } from '@penumbra-zone/ui/components/ui/card';
+import { bech32mAuctionId } from '@penumbra-zone/bech32m/pauctid';
 
 const getMetadata = (metadataByAssetId: Record<string, Metadata>, assetId?: AssetId) => {
   let metadata: Metadata | undefined;
@@ -20,12 +22,12 @@ const getMetadata = (metadataByAssetId: Record<string, Metadata>, assetId?: Asse
   return new Metadata({ penumbraAssetId: assetId });
 };
 
-const auctionsSelector = (state: AllSlices) => ({
-  auctionInfos: state.dutchAuction.auctionInfos,
-  metadataByAssetId: state.dutchAuction.metadataByAssetId,
+const auctionListSelector = (state: AllSlices) => ({
+  auctionInfos: state.swap.dutchAuction.auctionInfos,
+  metadataByAssetId: state.swap.dutchAuction.metadataByAssetId,
   fullSyncHeight: state.status.fullSyncHeight,
-  endAuction: state.dutchAuction.endAuction,
-  withdraw: state.dutchAuction.withdraw,
+  endAuction: state.swap.dutchAuction.endAuction,
+  withdraw: state.swap.dutchAuction.withdraw,
 });
 
 const getButtonProps = (
@@ -44,12 +46,12 @@ const getButtonProps = (
   return { buttonType: undefined, onClickButton: undefined };
 };
 
-export const Auctions = () => {
+export const AuctionList = () => {
   const { auctionInfos, metadataByAssetId, fullSyncHeight, endAuction, withdraw } =
-    useStoreShallow(auctionsSelector);
+    useStoreShallow(auctionListSelector);
 
   return (
-    <>
+    <Card>
       <div className='mb-2 flex items-center justify-between'>
         <GradientHeader>My Auctions</GradientHeader>
         {!!auctionInfos.length && <QueryLatestStateButton />}
@@ -60,7 +62,7 @@ export const Auctions = () => {
 
         {auctionInfos.map(auctionInfo => (
           <ViewBox
-            key={auctionInfo.auction.description?.nonce.toString()}
+            key={bech32mAuctionId(auctionInfo.id)}
             label='Dutch Auction'
             visibleContent={
               <DutchAuctionComponent
@@ -85,6 +87,6 @@ export const Auctions = () => {
           />
         ))}
       </div>
-    </>
+    </Card>
   );
 };

apps/minifront/src/components/swap/dutch-auction/query-latest-state-button.tsx → apps/minifront/src/components/swap/auction-list/query-latest-state-button.tsx

@@ -8,7 +8,7 @@ import { ReloadIcon } from '@radix-ui/react-icons';
 import { useStore } from '../../../state';
 
 export const QueryLatestStateButton = () => {
-  const loadAuctionInfos = useStore(state => state.dutchAuction.loadAuctionInfos);
+  const loadAuctionInfos = useStore(state => state.swap.dutchAuction.loadAuctionInfos);
   const handleClick = () => void loadAuctionInfos(true);
 
   return (

apps/minifront/src/components/swap/duration-slider.tsx

@@ -0,0 +1,61 @@
+import { Slider } from '@penumbra-zone/ui/components/ui/slider';
+import { DURATION_OPTIONS, GDA_RECIPES } from '../../state/swap/constants';
+import { useStoreShallow } from '../../utils/use-store-shallow';
+import { AllSlices } from '../../state';
+
+const durationSliderSelector = (state: AllSlices) => ({
+  duration: state.swap.duration,
+  setDuration: state.swap.setDuration,
+});
+
+export const DurationSlider = () => {
+  const { duration, setDuration } = useStoreShallow(durationSliderSelector);
+
+  const handleChange = (newValue: number[]) => {
+    const value = newValue[0]!; // We don't use multiple values in the slider
+    const option = DURATION_OPTIONS[value]!;
+
+    setDuration(option);
+  };
+
+  return (
+    <div className='flex flex-col items-center gap-4'>
+      <div className='flex w-full items-center gap-4'>
+        <span className='text-xs text-muted-foreground'>
+          Instant
+          <br />
+          Price
+        </span>
+
+        <Slider
+          min={0}
+          max={DURATION_OPTIONS.length - 1}
+          value={[DURATION_OPTIONS.indexOf(duration)]}
+          onValueChange={handleChange}
+        />
+
+        <span className='text-right text-xs text-muted-foreground'>
+          Averaged
+          <br />
+          Price
+        </span>
+      </div>
+
+      {duration === 'instant' && (
+        <div className='flex flex-col items-center'>
+          Now
+          <span className='text-xs text-muted-foreground'>single trade at market price</span>
+        </div>
+      )}
+
+      {duration !== 'instant' && (
+        <div className='flex flex-col items-center'>
+          ~ {duration}{' '}
+          <span className='text-xs text-muted-foreground'>
+            distributed across {GDA_RECIPES[duration].numberOfSubAuctions.toString()} auctions
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};