fix: adjust vault negative amounts

ui/src/components/Swap.jsx

@@ -1,11 +1,11 @@
 import { React, useState, useEffect } from 'react';
 import { E } from '@endo/captp';
 import {
-  divideBy,
+  floorDivideBy,
   invertRatio,
   makeRatio,
   makeRatioFromAmounts,
-  multiplyBy,
+  floorMultiplyBy,
 } from '@agoric/zoe/src/contractSupport';
 import { Nat } from '@endo/nat';
 import { stringifyAmountValue } from '@agoric/ui-components';
@@ -69,7 +69,7 @@ const useStyles = makeStyles(theme => ({
 
 const makeInverseFromAmounts = (x, y) => makeRatioFromAmounts(y, x);
 const composeRatio = (x, y) =>
-  makeRatioFromAmounts(multiplyBy(x.numerator, y), x.denominator);
+  makeRatioFromAmounts(floorMultiplyBy(x.numerator, y), x.denominator);
 
 /* eslint-disable complexity */
 export default function Swap() {
@@ -278,7 +278,7 @@ export default function Swap() {
       const giveInfo = getInfoForBrand(brandToInfo, inputRate.brand);
       const wantInfo = getInfoForBrand(brandToInfo, outputRate.brand);
       const oneDisplayUnit = 10n ** Nat(wantInfo.decimalPlaces);
-      const wantPrice = divideBy(
+      const wantPrice = floorDivideBy(
         AmountMath.make(outputRate.brand, oneDisplayUnit),
         marketRate,
       );
@@ -305,11 +305,11 @@ export default function Swap() {
       // and so depends on whether the user entered the In or
       // the Out amount most recently
       if (quote.rate && sameStructure(source, quote.amount)) {
-        const value = multiplyBy(source, quote.rate).value;
+        const value = floorMultiplyBy(source, quote.rate).value;
         return { amount: value, label: `Quoted ${label}` };
       }
       if (marketRatio) {
-        const value = multiplyBy(source, marketRatio).value;
+        const value = floorMultiplyBy(source, marketRatio).value;
         return { amount: value, label: `Estimated ${label}` };
       }
     }

ui/src/components/vault/VaultManagement/AdjustVaultForm.jsx

@@ -5,7 +5,6 @@ import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 
-import DeleteIcon from '@material-ui/icons/Delete';
 import SendIcon from '@material-ui/icons/Send';
 
 import { Grid } from '@material-ui/core';
@@ -100,6 +99,9 @@ const AdjustVaultForm = ({
   // borrow, repay, noaction
   const [debtAction, setDebtAction] = React.useState('noaction');
 
+  const [lockedInputError, setLockedInputError] = useState(null);
+  const [debtInputError, setDebtInputError] = useState(null);
+
   const [collateralPurseSelected, setCollateralPurseSelected] = useState(null);
   const [runPurseSelected, setRunPurseSelected] = useState(null);
 
@@ -179,19 +181,37 @@ const AdjustVaultForm = ({
 
   const updateLockedDelta = (collAction, collDelta) => {
     if (collAction === 'deposit') {
+      setLockedInputError(null);
       onLockedDeltaChange(AmountMath.add(locked, collDelta));
     }
     if (collAction === 'withdraw') {
-      onLockedDeltaChange(AmountMath.subtract(locked, collDelta));
+      let newAmount;
+      try {
+        newAmount = AmountMath.subtract(locked, collDelta);
+      } catch {
+        setLockedInputError('Insufficient locked balance');
+        return;
+      }
+      setLockedInputError(null);
+      onLockedDeltaChange(newAmount);
     }
   };
 
   const updateDebtDelta = (dAction, dDelta) => {
     if (dAction === 'borrow') {
+      setDebtInputError(null);
       onDebtDeltaChange(AmountMath.add(debt, dDelta));
     }
     if (dAction === 'repay') {
-      onDebtDeltaChange(AmountMath.subtract(debt, dDelta));
+      let newAmount;
+      try {
+        newAmount = AmountMath.subtract(debt, dDelta);
+      } catch {
+        setDebtInputError('Insufficient debt balance');
+        return;
+      }
+      setDebtInputError(null);
+      onDebtDeltaChange(newAmount);
     }
   };
 
@@ -246,6 +266,7 @@ const AdjustVaultForm = ({
                 setCollateralAction={handleCollateralAction}
               />
               <NatPurseAmountInput
+                error={lockedInputError}
                 purses={purses}
                 purseSelected={collateralPurseSelected}
                 amountValue={lockedDelta && lockedDelta.value}
@@ -272,6 +293,7 @@ const AdjustVaultForm = ({
                 setDebtAction={handleDebtAction}
               />
               <NatPurseAmountInput
+                error={debtInputError}
                 purses={purses}
                 purseSelected={runPurseSelected}
                 amountValue={debtDelta && debtDelta.value}
@@ -291,22 +313,14 @@ const AdjustVaultForm = ({
           justify="flex-end"
         >
           <Grid item>
-            <Button
-              className={classes.button}
-              variant="contained"
-              color="primary"
-              startIcon={<DeleteIcon />}
-              onClick={() => setRedirect('/treasury')}
-            >
-              Cancel
-            </Button>
+            <Button onClick={() => setRedirect('/treasury')}>Cancel</Button>
           </Grid>
           <Grid item>
             <Button
               className={classes.button}
               variant="contained"
               color="primary"
-              disabled={invalidOffer}
+              disabled={invalidOffer || debtInputError || lockedInputError}
               startIcon={<SendIcon />}
               onClick={handleSubmission}
             >

ui/src/components/vault/VaultManagement/NatPurseAmountInput.jsx

@@ -43,6 +43,7 @@ const PurseAmountInput = ({
   onAmountChange,
   brandToFilter,
   brandToInfo,
+  error,
   purseSelectorDisabled = false,
   amountInputDisabled = false,
 }) => {
@@ -75,6 +76,8 @@ const PurseAmountInput = ({
           decimalPlaces={decimalPlaces}
           placesToShow={placesToShow}
           disabled={amountInputDisabled}
+          error={error}
+          helperText={error ?? ' '}
         />
       </Grid>
     </Grid>