automatically swap estimation on user input

penumbra-zone · Nov 22, 2024 · a3b9def · a3b9def
1 parent 553a8e6
commit a3b9def
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/apps/minifront/src/components/swap/swap-form/simulate-swap-result/traces/index.tsx b/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 -translate-x-1/2 flex 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='inline-flex w-max min-w-full flex-col pb-10 mt-2'>
             {traces.map((trace, index) => (
               <div
                 key={index}

diff --git a/apps/minifront/src/components/swap/swap-form/simulate-swap.tsx b/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