automatically perform swap estimation on user input (#1920)

* automatically swap estimation on user input

* lint tailwind css

* changeset

* value view pill

.changeset/rude-fireants-pump.md

@@ -0,0 +1,5 @@
+---
+'minifront': minor
+---
+
+automatically perform swap estimation on user input

apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx

@@ -2,7 +2,7 @@ import { SwapExecution_Trace } from '@penumbra-zone/protobuf/penumbra/core/compo
 import { Trace } from './trace';
 import { Metadata, ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb';
 import { ValueViewComponent } from '@penumbra-zone/ui-deprecated/components/ui/value';
-import { ArrowDown, ArrowUp } from 'lucide-react';
+import { ArrowRight } from 'lucide-react';
 
 export const Traces = ({
   traces,
@@ -29,17 +29,14 @@ export const Traces = ({
 
       <div className='mt-4 flex overflow-auto [scrollbar-width:thin]'>
         <div className='mx-2 w-min grow'>
-          <div className='-mx-2 -mb-8 flex justify-between'>
-            <div className='flex flex-col items-start gap-2'>
-              <ValueViewComponent view={input} size='sm' />
-              <ArrowDown size={17} className='relative z-10' />
-            </div>
-            <div className='flex flex-col items-end gap-2'>
-              <ValueViewComponent view={output} size='sm' />
-              <ArrowUp size={17} className='relative z-10' />
+          <div className='relative flex items-center justify-between'>
+            <ValueViewComponent view={input} size='sm' />
+            <div className='absolute left-1/2 flex -translate-x-1/2 items-center'>
+              <ArrowRight size={20} strokeWidth={2.5} className='text-white' />
             </div>
+            <ValueViewComponent view={output} size='sm' />
           </div>
-          <div className='inline-flex w-max min-w-full flex-col pb-10'>
+          <div className='mt-2 inline-flex w-max min-w-full flex-col pb-10'>
             {traces.map((trace, index) => (
               <div
                 key={index}

apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/trace/index.tsx

@@ -27,9 +27,12 @@ export const Trace = ({
   metadataByAssetId: Record<string, Metadata>;
 }) => {
   return (
-    <div className='flex w-full items-center justify-between gap-8'>
+    <div className='flex w-full justify-between gap-8'>
       {trace.value.map((value, index) => (
-        <div key={index} className='flex shrink-0 flex-col gap-1'>
+        <div
+          key={index}
+          className='flex min-w-[60px] max-w-[150px] shrink-0 grow basis-auto flex-col items-center gap-1'
+        >
           <ValueViewComponent view={getValueView(metadataByAssetId, value)} size='sm' />
 
           {index === 0 && <Price trace={trace} metadataByAssetId={metadataByAssetId} />}

apps/minifront/src/components/swap/swap-form/simulate-swap.tsx

@@ -3,16 +3,33 @@ import { SimulateSwapResult } from './simulate-swap-result';
 import { AllSlices } from '../../../state';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
 import { EstimateButton } from './estimate-button';
+import { useEffect } from 'react';
 
 const simulateSwapSelector = (state: AllSlices) => ({
   simulateSwap: state.swap.instantSwap.simulateSwap,
+  resetSimulateSwap: state.swap.instantSwap.reset,
   disabled:
     state.swap.txInProgress || !state.swap.amount || state.swap.instantSwap.simulateSwapLoading,
   result: state.swap.instantSwap.simulateSwapResult,
+  amount: state.swap.amount,
 });
 
+// Automatically trigger swap simulation on user input
 export const SimulateSwap = ({ layoutId }: { layoutId: string }) => {
-  const { simulateSwap, disabled, result } = useStoreShallow(simulateSwapSelector);
+  const { simulateSwap, resetSimulateSwap, disabled, result, amount } =
+    useStoreShallow(simulateSwapSelector);
+
+  useEffect(() => {
+    if (!disabled && amount && parseFloat(amount) > 0) {
+      // Prevents re-triggering the swap simulation if it's already computed
+      if (!result) {
+        void simulateSwap();
+      }
+    } else if (result) {
+      // Reset simulation
+      resetSimulateSwap();
+    }
+  }, [simulateSwap, resetSimulateSwap, disabled, result, amount]);
 
   return (
     <Box