Improve partial cancel calculation

app/src/components/atoms/account-orders-details-stats.helpers.ts

@@ -1,6 +1,7 @@
 import Maybe from "easy-maybe/lib";
 import { zip } from "ramda";
 import { isFloat } from "../../utils/index";
+import { withdrawAmount } from "../../utils/twamm-client";
 
 const { withDefault, of } = Maybe;
 
@@ -48,10 +49,17 @@ export const format = {
   },
 
   userAveragePrice(data: PoolDetails) {
-    const value = (({ lpAmount, side, withdrawData }) => {
+    const value = (({ lpAmount, side, withdraw }) => {
       const baseTokenIndex = side.sell ? 0 : 1;
       const supplTokenIndex = side.sell ? 1 : 0;
 
+      const withdrawData = withdrawAmount(
+        withdraw.orderBalance.lpBalance,
+        withdraw.tradeSide,
+        withdraw.orderBalance,
+        withdraw.tokenPair
+      );
+
       if (!withdrawData[supplTokenIndex]) return undefined;
 
       const avg =

app/src/components/molecules/cancel-order-amount.tsx

@@ -31,7 +31,7 @@ export default memo(({ percentage, onChange, onToggleDetails }: Props) => {
   );
 
   const onPercentageChange = useCallback(
-    (e: Event, value: number | number[]) => {
+    (_: Event, value: number | number[]) => {
       if (Array.isArray(value)) {
         onChange(value[0]);
       } else {

app/src/components/molecules/cancel-order-details.tsx

@@ -7,14 +7,16 @@ import CancelOrderLiquidity from "./cancel-order-liquidity";
 import Loading from "../atoms/loading";
 import usePrice from "../../hooks/use-price";
 import { refreshEach } from "../../swr-options";
+import { withdrawAmount as calcWithdraw } from "../../utils/twamm-client";
 
 export interface Props {
   data: Voidable<JupTokenData[]>;
   details: Voidable<PoolDetails>;
   onToggle: () => void;
+  percentage: number;
 }
 
-export default ({ data, details, onToggle }: Props) => {
+export default ({ data, details, onToggle, percentage }: Props) => {
   const d = Maybe.of(data);
 
   const tokens = Maybe.withDefault(undefined, d);
@@ -27,10 +29,18 @@ export default ({ data, details, onToggle }: Props) => {
   );
   const withdrawAmount = Maybe.andMap(([td, det]) => {
     const [a, b] = td;
+    const { withdraw } = det;
+
+    const [wda, wdb] = calcWithdraw(
+      (withdraw.orderBalance.lpBalance * percentage) / 100,
+      withdraw.tradeSide,
+      withdraw.orderBalance,
+      withdraw.tokenPair
+    );
 
     const withdrawPair = [
-      det.withdrawData[0] * 10 ** (a.decimals * -1),
-      det.withdrawData[1] * 10 ** (b.decimals * -1),
+      wda * 10 ** (a.decimals * -1),
+      wdb * 10 ** (b.decimals * -1),
     ];
 
     return withdrawPair;

app/src/components/molecules/cancel-order-modal.tsx

@@ -73,6 +73,7 @@ export default ({ data, detailsData, onApprove }: Props) => {
               data={tokens.data}
               details={details.data}
               onToggle={onToggleDetails}
+              percentage={percentage}
             />
           )}
           <Box p={2}>

app/src/hooks/use-pool-details.ts

@@ -4,11 +4,7 @@ import useSWR from "swr";
 
 import useJupTokensByMint from "./use-jup-tokens-by-mint";
 import usePoolWithPair from "./use-pool-with-pair";
-import {
-  address as addr,
-  lpAmount,
-  withdrawAmount,
-} from "../utils/twamm-client";
+import { address as addr } from "../utils/twamm-client";
 
 const mintsKey = (pair?: TokenPairAccountData) =>
   pair
@@ -48,14 +44,6 @@ export default (
 
       const lastChanged = lastBalanceChangeTime.toNumber();
 
-      const withdrawData = withdrawAmount(
-        Number(order.lpBalance),
-        tradeSide,
-        order,
-        pair
-      );
-      const lpAmountData = lpAmount(tradeSide, order);
-
       const next = {
         aAddress: configA.mint,
         bAddress: configB.mint,
@@ -66,7 +54,7 @@ export default (
         lastBalanceChangeTime: !lastChanged
           ? undefined
           : new Date(lastChanged * 1e3),
-        lpAmount: lpAmountData,
+        lpAmount: Number(order.lpBalance),
         lpSupply: [
           Number(buySide.sourceBalance) / 10 ** configB.decimals +
             Number(sellSide.targetBalance) / 10 ** configA.decimals,
@@ -88,7 +76,7 @@ export default (
         ],
         side,
         volume: statsA.orderVolumeUsd + statsB.orderVolumeUsd,
-        withdrawData,
+        withdraw: { tradeSide, orderBalance: order, tokenPair: pair },
       };
 
       return next;

app/src/types/program.d.ts

@@ -76,6 +76,12 @@ declare type OrderData = {
   unsettledBalance: BN;
 };
 
+declare type OrderBalanceData = {
+  side: OrderTypeStruct;
+  lpBalance: BN;
+  tokenDebt: BN;
+};
+
 type PoolTradeSideData = {
   fillsVolume: BN;
   lastBalanceChangeTime: BN;
@@ -117,7 +123,11 @@ declare type PoolDetails = {
   poolAddress: PublicKey;
   prices: string[];
   volume: number;
-  withdrawData: number[];
+  withdraw: {
+    tradeSide: PoolTradeSideData;
+    orderBalance: OrderBalanceData;
+    tokenPair: TokenPairProgramData;
+  };
 };
 
 declare type DetailsData = {

app/src/utils/twamm-client.ts

@@ -55,16 +55,17 @@ export const lpAmount = (
 };
 
 export const withdrawAmount = (
-  lpBalance: number,
+  lpBalance: number | BN,
   poolSide: PoolTradeSideData,
   order: { side: OrderTypeStruct; lpBalance: BN; tokenDebt: BN },
   tokenPair: TokenPairProgramData
 ) => {
   const withdrawAmountSource =
-    (lpBalance * Number(poolSide.sourceBalance)) / Number(poolSide.lpSupply);
+    (Number(lpBalance) * Number(poolSide.sourceBalance)) /
+    Number(poolSide.lpSupply);
 
   let withdrawAmountTarget =
-    (lpBalance *
+    (Number(lpBalance) *
       (Number(poolSide.targetBalance) + Number(poolSide.tokenDebtTotal))) /
     Number(poolSide.lpSupply);