diff --git a/client/src/ui/components/bank/LiquidityResourceRow.tsx b/client/src/ui/components/bank/LiquidityResourceRow.tsx index 46e490d13..16903573b 100644 --- a/client/src/ui/components/bank/LiquidityResourceRow.tsx +++ b/client/src/ui/components/bank/LiquidityResourceRow.tsx @@ -32,6 +32,7 @@ export const LiquidityResourceRow = ({ const [canCarry, setCanCarry] = useState(false); const [openConfirmation, setOpenConfirmation] = useState(false); const [showInputResourcesPrice, setShowInputResourcesPrice] = useState(false); + const [withdrawalPercentage, setWithdrawalPercentage] = useState(100); const marketEntityId = useMemo( () => getEntityIdFromKeys([BigInt(bankEntityId), BigInt(resourceId)]), @@ -80,29 +81,52 @@ export const LiquidityResourceRow = ({ const { computeTravelTime } = useTravel(); - const onWithdraw = useCallback(() => { - setIsLoading(true); - const sharesUnscaled = marketManager.getSharesUnscaled(); - const totalLiquidityUnscaled = marketManager.getTotalLiquidityUnscaled(); - const withdrawShares = sharesUnscaled > totalLiquidityUnscaled ? totalLiquidityUnscaled : sharesUnscaled; - dojoContext.setup.systemCalls - .remove_liquidity({ - bank_entity_id: bankEntityId, - entity_id: entityId, - resource_type: BigInt(resourceId), - shares: withdrawShares, - signer: dojoContext.account.account, - }) - .finally(() => { - setIsLoading(false); - setOpenConfirmation(false); - }); - }, [dojoContext, bankEntityId, entityId, resourceId, marketManager]); + const onWithdraw = useCallback( + (percentage: number) => { + setIsLoading(true); + const { withdrawShares } = calculateWithdrawAmounts(percentage); + + dojoContext.setup.systemCalls + .remove_liquidity({ + bank_entity_id: bankEntityId, + entity_id: entityId, + resource_type: BigInt(resourceId), + shares: withdrawShares, + signer: dojoContext.account.account, + }) + .finally(() => { + setIsLoading(false); + setOpenConfirmation(false); + }); + }, + [dojoContext, bankEntityId, entityId, resourceId, marketManager], + ); + + const calculateWithdrawAmounts = useCallback( + (percentage: number) => { + const sharesUnscaled = marketManager.getSharesUnscaled(); + const totalLiquidityUnscaled = marketManager.getTotalLiquidityUnscaled(); + const maxShares = sharesUnscaled > totalLiquidityUnscaled ? totalLiquidityUnscaled : sharesUnscaled; + const withdrawShares = (maxShares * BigInt(percentage)) / BigInt(100); + + const lordsToReceive = (lordsAmount * percentage) / 100; + const resourceToReceive = (resourceAmount * percentage) / 100; + + return { + withdrawShares: withdrawShares, + lords: lordsToReceive, + resource: resourceToReceive, + }; + }, + [marketManager, lordsAmount, resourceAmount], + ); const renderConfirmationPopup = useMemo(() => { + const { lords, resource } = calculateWithdrawAmounts(withdrawalPercentage); + const travelResources = [ - { amount: divideByPrecision(lordsAmount), resourceId: ResourcesIds.Lords }, - { amount: divideByPrecision(resourceAmount), resourceId: resourceId }, + { amount: divideByPrecision(lords), resourceId: ResourcesIds.Lords }, + { amount: divideByPrecision(resource), resourceId: resourceId }, ]; return ( @@ -111,36 +135,54 @@ export const LiquidityResourceRow = ({ warning="Warning: not enough donkeys to transport resources" disabled={!canCarry} isLoading={isLoading} - onConfirm={onWithdraw} + onConfirm={() => onWithdraw(withdrawalPercentage)} onCancel={() => setOpenConfirmation(false)} > -