Show unfilled in estimate (#715)

apps/minifront/src/components/swap/asset-out-box.tsx

@@ -1,5 +1,5 @@
 import { useStore } from '../../state';
-import { swapSelector } from '../../state/swap';
+import { SimulateSwapResult, swapSelector } from '../../state/swap';
 import {
   buttonVariants,
   Tooltip,
@@ -17,6 +17,8 @@ import { groupByAsset } from '../../fetchers/balances/by-asset';
 import { cn } from '@penumbra-zone/ui/lib/utils';
 import { BalancesResponse } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/view/v1/view_pb';
 import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb';
+import { getAmount } from '@penumbra-zone/getters';
+import { isZero } from '@penumbra-zone/types';
 
 const findMatchingBalance = (
   metadata: Metadata | undefined,
@@ -43,7 +45,8 @@ interface AssetOutBoxProps {
 }
 
 export const AssetOutBox = ({ balances }: AssetOutBoxProps) => {
-  const { assetOut, setAssetOut, simulateSwap, simulateOutResult } = useStore(swapSelector);
+  const { assetOut, setAssetOut, simulateSwap, simulateOutLoading, simulateOutResult } =
+    useStore(swapSelector);
 
   const matchingBalance = findMatchingBalance(assetOut, balances);
 
@@ -54,9 +57,9 @@ export const AssetOutBox = ({ balances }: AssetOutBoxProps) => {
       </div>
       <div className='flex items-center justify-between gap-4'>
         {simulateOutResult ? (
-          <ValueViewComponent view={simulateOutResult} showDenom={false} showIcon={false} />
+          <Result result={simulateOutResult} />
         ) : (
-          <EstimateButton simulateFn={simulateSwap} />
+          <EstimateButton simulateFn={simulateSwap} loading={simulateOutLoading} />
         )}
         <AssetOutSelector
           balances={balances}
@@ -75,13 +78,44 @@ export const AssetOutBox = ({ balances }: AssetOutBoxProps) => {
   );
 };
 
-const EstimateButton = ({ simulateFn }: { simulateFn: () => Promise<void> }) => (
+const Result = ({ result: { output, unfilled } }: { result: SimulateSwapResult }) => {
+  // If no part unfilled, just show plain output amount (no label)
+  if (isZero(getAmount(unfilled))) {
+    return <ValueViewComponent view={output} showDenom={false} showIcon={false} />;
+  }
+
+  // Else is partially filled, show amounts with labels
+  return (
+    <div className='flex flex-col gap-2'>
+      <div className='flex flex-col items-center'>
+        <ValueViewComponent view={output} showIcon={false} />
+        <span className='font-mono text-[12px] italic text-gray-500'>Filled amount</span>
+      </div>
+      <div className='flex flex-col items-center'>
+        <ValueViewComponent view={unfilled} showIcon={false} />
+        <span className='font-mono text-[12px] italic text-gray-500'>Unfilled amount</span>
+      </div>
+    </div>
+  );
+};
+
+const EstimateButton = ({
+  simulateFn,
+  loading,
+}: {
+  simulateFn: () => Promise<void>;
+  loading: boolean;
+}) => (
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger>
         <div
           // Nested buttons are not allowed. Manually passing button classes.
-          className={cn(buttonVariants({ variant: 'secondary' }), 'w-32 md:h-9')}
+          className={cn(
+            buttonVariants({ variant: 'secondary' }),
+            'w-32 md:h-9',
+            loading ? 'animate-pulse duration-700' : undefined,
+          )}
           onClick={e => {
             e.preventDefault();
             void simulateFn();

apps/minifront/src/state/swap.test.ts

@@ -73,7 +73,7 @@ describe('Swap Slice', () => {
   test('changing assetIn clears simulation', () => {
     expect(useStore.getState().swap.simulateOutResult).toBeUndefined();
     useStore.setState(state => {
-      state.swap.simulateOutResult = new ValueView();
+      state.swap.simulateOutResult = { output: new ValueView(), unfilled: new ValueView() };
       return state;
     });
     expect(useStore.getState().swap.simulateOutResult).toBeDefined();
@@ -84,7 +84,7 @@ describe('Swap Slice', () => {
   test('changing assetOut clears simulation', () => {
     expect(useStore.getState().swap.simulateOutResult).toBeUndefined();
     useStore.setState(state => {
-      state.swap.simulateOutResult = new ValueView();
+      state.swap.simulateOutResult = { output: new ValueView(), unfilled: new ValueView() };
       return state;
     });
     expect(useStore.getState().swap.simulateOutResult).toBeDefined();
@@ -95,7 +95,7 @@ describe('Swap Slice', () => {
   test('changing amount clears simulation', () => {
     expect(useStore.getState().swap.simulateOutResult).toBeUndefined();
     useStore.setState(state => {
-      state.swap.simulateOutResult = new ValueView();
+      state.swap.simulateOutResult = { output: new ValueView(), unfilled: new ValueView() };
       return state;
     });
     expect(useStore.getState().swap.simulateOutResult).toBeDefined();

apps/minifront/src/state/swap.ts

@@ -21,15 +21,22 @@ import {
   getAssetId,
   getAssetIdFromValueView,
   getDisplayDenomExponentFromValueView,
+  getMetadata,
   getSwapCommitmentFromTx,
 } from '@penumbra-zone/getters';
-import { toBaseUnit } from '@penumbra-zone/types';
 import { BigNumber } from 'bignumber.js';
 import { getAddressByIndex } from '../fetchers/address';
 import { StateCommitment } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/crypto/tct/v1/tct_pb';
-import { simulateSwapOutput } from '../fetchers/simulate';
 import { errorToast, TransactionToast } from '@penumbra-zone/ui';
 import { Transaction } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/transaction/v1/transaction_pb';
+import { toBaseUnit } from '@penumbra-zone/types';
+import { SimulateTradeRequest } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/component/dex/v1/dex_pb';
+import { simulateClient } from '../clients';
+
+export interface SimulateSwapResult {
+  output: ValueView;
+  unfilled: ValueView;
+}
 
 export interface SwapSlice {
   assetIn: BalancesResponse | undefined;
@@ -41,7 +48,8 @@ export interface SwapSlice {
   initiateSwapTx: () => Promise<void>;
   txInProgress: boolean;
   simulateSwap: () => Promise<void>;
-  simulateOutResult: ValueView | undefined;
+  simulateOutResult: SimulateSwapResult | undefined;
+  simulateOutLoading: boolean;
 }
 
 export const createSwapSlice = (): SliceCreator<SwapSlice> => (set, get) => {
@@ -69,8 +77,13 @@ export const createSwapSlice = (): SliceCreator<SwapSlice> => (set, get) => {
     },
     txInProgress: false,
     simulateOutResult: undefined,
+    simulateOutLoading: false,
     simulateSwap: async () => {
       try {
+        set(({ swap }) => {
+          swap.simulateOutLoading = true;
+        });
+
         const assetIn = get().swap.assetIn;
         const assetOut = get().swap.assetOut;
         if (!assetIn || !assetOut) throw new Error('Both asset in and out need to be set');
@@ -82,13 +95,41 @@ export const createSwapSlice = (): SliceCreator<SwapSlice> => (set, get) => {
             getDisplayDenomExponentFromValueView(assetIn.balanceView),
           ),
         });
+        const req = new SimulateTradeRequest({
+          input: swapInValue,
+          output: getAssetId(assetOut),
+        });
+        const res = await simulateClient.simulateTrade(req);
+
+        const output = new ValueView({
+          valueView: {
+            case: 'knownAssetId',
+            value: {
+              amount: res.output?.output?.amount,
+              metadata: assetOut,
+            },
+          },
+        });
+
+        const unfilled = new ValueView({
+          valueView: {
+            case: 'knownAssetId',
+            value: {
+              amount: res.unfilled?.amount,
+              metadata: getMetadata(assetIn.balanceView),
+            },
+          },
+        });
 
-        const outputVal = await simulateSwapOutput(swapInValue, assetOut);
         set(({ swap }) => {
-          swap.simulateOutResult = outputVal;
+          swap.simulateOutResult = { output, unfilled };
         });
       } catch (e) {
         errorToast(e, 'Error estimating swap').render();
+      } finally {
+        set(({ swap }) => {
+          swap.simulateOutLoading = false;
+        });
       }
     },
     initiateSwapTx: async () => {

packages/types/src/amount.test.ts

@@ -5,6 +5,7 @@ import {
   displayUsd,
   fromBaseUnitAmount,
   fromValueView,
+  isZero,
   joinLoHiAmount,
 } from './amount';
 import { Amount } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/num/v1/num_pb';
@@ -168,3 +169,25 @@ describe('Formatting', () => {
     });
   });
 });
+
+describe('isZero', () => {
+  it('works with zero amount', () => {
+    const amount = new Amount({ lo: 0n, hi: 0n });
+    expect(isZero(amount)).toBeTruthy();
+  });
+
+  it('works with negatives', () => {
+    const amount = new Amount({ lo: -13n, hi: 1n });
+    expect(isZero(amount)).toBeFalsy();
+  });
+
+  it('detects hi number presence', () => {
+    const amount = new Amount({ lo: 0n, hi: 1n });
+    expect(isZero(amount)).toBeFalsy();
+  });
+
+  it('detects lo number presence', () => {
+    const amount = new Amount({ lo: 20n, hi: 0n });
+    expect(isZero(amount)).toBeFalsy();
+  });
+});

packages/types/src/amount.ts

@@ -12,6 +12,10 @@ export const fromBaseUnitAmount = (amount: Amount, exponent = 0): BigNumber => {
   return fromBaseUnit(amount.lo, amount.hi, exponent);
 };
 
+export const isZero = (amount: Amount): boolean => {
+  return joinLoHi(amount.lo, amount.hi) === 0n;
+};
+
 export const fromValueView = ({ amount, metadata }: ValueView_KnownAssetId): BigNumber => {
   if (!amount) throw new Error('No amount in value view');
   if (!metadata) throw new Error('No denom in value view');

packages/types/src/index.ts

@@ -19,8 +19,6 @@ export * from './querier';
 export * from './amount';
 export * from './chain';
 export * from './jsonified';
-export * from './schemas';
-export * from './type-predicates';
 export * from './staking';
 export * from './identity-key';
 export * from './customize-symbol';