connecting to the back and making the requests work

nym-wallet/src/components/Bonding/modals/BondMoreModal.tsx

@@ -8,7 +8,8 @@ import { TokenPoolSelector, TPoolOption } from 'src/components/TokenPoolSelector
 import { ConfirmTx } from 'src/components/ConfirmTX';
 import { useGetFee } from 'src/hooks/useGetFee';
 import { validateAmount, validateKey } from 'src/utils';
-import { TBondedMixnode } from 'src/context';
+import { simulateBondMore, simulateVestingBondMore } from 'src/requests';
+import { TBondMoreArgs } from 'src/types';
 
 export const BondMoreModal = ({
   currentBond,
@@ -16,21 +17,28 @@ export const BondMoreModal = ({
   hasVestingTokens,
   onConfirm,
   onClose,
+  onError,
 }: {
   currentBond: DecCoin;
-  mixId: string;
   userBalance?: string;
   hasVestingTokens: boolean;
-  onConfirm: (args: { additionalBond: DecCoin; tokenPool: TPoolOption }) => Promise<void>;
+  onConfirm: (data: TBondMoreArgs, tokenPool: TPoolOption) => Promise<void>;
   onClose: () => void;
+  onError: (e: string) => void;
 }) => {
-  const { fee, resetFeeState } = useGetFee();
+  const { fee, getFee, resetFeeState, feeError } = useGetFee();
   const [additionalBond, setAdditionalBond] = useState<DecCoin>({ amount: '0', denom: currentBond.denom });
   // const [signature, setSignature] = useState<string>('');
   const [tokenPool, setTokenPool] = useState<TPoolOption>('balance');
   const [errorAmount, setErrorAmount] = useState(false);
   const [errorSignature, setErrorSignature] = useState(false);
 
+  useEffect(() => {
+    if (feeError) {
+      onError(feeError);
+    }
+  }, [feeError]);
+
   const handleOnOk = async () => {
     const errors = {
       amount: false,
@@ -50,11 +58,18 @@ export const BondMoreModal = ({
     }
 
     if (!errors.amount) {
-      onConfirm({ additionalBond, tokenPool });
+      const data = { additionalPledge: additionalBond };
+      onConfirm(data, tokenPool);
     } else {
       setErrorAmount(errors.amount);
       setErrorSignature(errors.signature);
     }
+
+    if (tokenPool === 'balance') {
+      await getFee<TBondMoreArgs>(simulateBondMore, { additionalPledge: additionalBond });
+    } else {
+      await getFee<TBondMoreArgs>(simulateVestingBondMore, { additionalPledge: additionalBond });
+    }
   };
 
   useEffect(() => {
@@ -67,7 +82,7 @@ export const BondMoreModal = ({
         header="Bond more details"
         open
         fee={fee}
-        onConfirm={async () => onConfirm({ additionalBond, tokenPool })}
+        onConfirm={async () => onConfirm({ additionalPledge: additionalBond }, tokenPool)}
         onPrev={resetFeeState}
       >
         <ModalListItem label="Current bond" value={`${currentBond.amount} ${currentBond.denom}`} divider />

nym-wallet/src/context/bonding.tsx

@@ -8,7 +8,7 @@ import {
 } from '@nymproject/types';
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import Big from 'big.js';
-import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types';
+import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs, TBondMoreArgs } from 'src/types';
 import { Console } from 'src/utils/console';
 import {
   bondGateway as bondGatewayRequest,
@@ -18,6 +18,8 @@ import {
   getMixnodeBondDetails,
   unbondGateway as unbondGatewayRequest,
   unbondMixNode as unbondMixnodeRequest,
+  bondMore as bondMoreRequest,
+  vestingBondMore,
   vestingBondGateway,
   vestingBondMixNode,
   vestingUnbondGateway,
@@ -100,7 +102,7 @@ export type TBondingContext = {
   bondMixnode: (data: TBondMixNodeArgs, tokenPool: TokenPool) => Promise<TransactionExecuteResult | undefined>;
   bondGateway: (data: TBondGatewayArgs, tokenPool: TokenPool) => Promise<TransactionExecuteResult | undefined>;
   unbond: (fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
-  bondMore: (amount: DecCoin, mixId: string) => Promise<TransactionExecuteResult | undefined>;
+  bondMore: (data: TBondMoreArgs, tokenPool: TokenPool) => Promise<TransactionExecuteResult | undefined>;
   redeemRewards: (fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
   updateMixnode: (pm: string, fee?: FeeDetails) => Promise<TransactionExecuteResult | undefined>;
   checkOwnership: () => Promise<void>;
@@ -431,40 +433,19 @@ export const BondingContextProvider = ({ children }: { children?: React.ReactNod
     return tx;
   };
 
-  const bondGatewayaa = async (data: TBondGatewayArgs, tokenPool: TokenPool) => {
+  const bondMore = async (data: TBondMoreArgs, tokenPool: TokenPool) => {
     let tx: TransactionExecuteResult | undefined;
     setIsLoading(true);
     try {
       if (tokenPool === 'balance') {
-        tx = await bondGatewayRequest(data);
+        tx = await bondMoreRequest(data);
         await userBalance.fetchBalance();
       }
       if (tokenPool === 'locked') {
-        tx = await vestingBondGateway(data);
+        tx = await vestingBondMore(data);
         await userBalance.fetchTokenAllocation();
       }
-      return tx;
-    } catch (e: any) {
-      Console.warn(e);
-      setError(`an error occurred: ${e}`);
-    } finally {
-      setIsLoading(false);
-    }
-    return undefined;
-  };
 
-  const bondMore = async (amount: DecCoin, mixId: string) => {
-    let tx: TransactionExecuteResult | undefined;
-    setIsLoading(true);
-    try {
-      if (tokenPool === 'balance') {
-        tx = await bondGatewayRequest(data);
-        await userBalance.fetchBalance();
-      }
-      if (tokenPool === 'locked') {
-        tx = await vestingBondGateway(data);
-        await userBalance.fetchTokenAllocation();
-      }
       return tx;
     } catch (e: any) {
       Console.warn(e);

nym-wallet/src/context/mocks/bonding.tsx

@@ -152,7 +152,7 @@ export const MockBondingContextProvider = ({
     return TxResultMock;
   };
 
-  const bondMore = async (_signature: string, _additionalBond: DecCoin) => {
+  const bondMore = async (): Promise<TransactionExecuteResult> => {
     setIsLoading(true);
     await mockSleep(SLEEP_MS);
     triggerStateUpdate();

nym-wallet/src/pages/bonding/Bonding.tsx

@@ -13,7 +13,7 @@ import { ConfirmationDetailProps, ConfirmationDetailsModal } from 'src/component
 import { ErrorModal } from 'src/components/Modals/ErrorModal';
 import { LoadingModal } from 'src/components/Modals/LoadingModal';
 import { AppContext, urls } from 'src/context/main';
-import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs } from 'src/types';
+import { isGateway, isMixnode, TBondGatewayArgs, TBondMixNodeArgs, TBondMoreArgs } from 'src/types';
 import { BondedGateway } from 'src/components/Bonding/BondedGateway';
 import { RedeemRewardsModal } from 'src/components/Bonding/modals/RedeemRewardsModal';
 import { BondingContextProvider, useBondingContext } from '../../context';
@@ -25,7 +25,7 @@ const Bonding = () => {
   const {
     network,
     clientDetails,
-    userBalance: { originalVesting },
+    userBalance: { originalVesting, balance },
   } = useContext(AppContext);
 
   const navigate = useNavigate();
@@ -68,10 +68,9 @@ const Bonding = () => {
     });
   };
 
-  const handleBondMore = async (args: { additionalBond: DecCoin; tokenPool: TPoolOption }) => {
-    const { additionalBond } = args;
+  const handleBondMore = async (data: TBondMoreArgs, tokenPool: TPoolOption) => {
     setShowModal(undefined);
-    const tx = await bondMore(additionalBond, bondedNode.mixId);
+    const tx = await bondMore(data, tokenPool);
     setConfirmationDetails({
       status: 'success',
       title: 'Bond More successful',
@@ -152,9 +151,11 @@ const Bonding = () => {
       {showModal === 'bond-more' && bondedNode && isMixnode(bondedNode) && (
         <BondMoreModal
           currentBond={bondedNode.bond}
+          userBalance={balance?.printable_balance}
           hasVestingTokens={Boolean(originalVesting)}
           onConfirm={handleBondMore}
           onClose={() => setShowModal(undefined)}
+          onError={handleError}
         />
       )}
 

nym-wallet/src/requests/actions.ts

@@ -34,4 +34,4 @@ export const unbond = async (type: EnumNodeType) => {
 };
 
 export const bondMore = async (args: TBondMoreArgs) =>
-  invokeWrapper<TransactionExecuteResult>('bond_gateway', args);
+  invokeWrapper<TransactionExecuteResult>('pledge_more', args);

nym-wallet/src/requests/simulate.ts

@@ -63,3 +63,9 @@ export const simulateClaimOperatorReward = async () => invokeWrapper<FeeDetails>
 
 export const simulateVestingClaimOperatorReward = async () =>
   invokeWrapper<FeeDetails>('simulate_vesting_claim_operator_reward');
+
+export const simulateBondMore = async (args: any) =>
+  invokeWrapper<FeeDetails>('simulate_pledge_more', args);
+
+export const simulateVestingBondMore = async (args: any) =>
+  invokeWrapper<FeeDetails>('simulate_vesting_pledge_more', args);

nym-wallet/src/requests/vesting.ts

@@ -105,3 +105,14 @@ export const vestingClaimOperatorReward = async (fee?: Fee) =>
 
 export const vestingClaimDelegatorRewards = async (mixId: number) =>
   invokeWrapper<TransactionExecuteResult>('vesting_claim_delegator_reward', { mixId });
+
+export const vestingBondMore = async ({
+  fee,
+  additionalPledge,
+}: {
+  fee?: Fee;
+  additionalPledge: DecCoin;
+}) => invokeWrapper<TransactionExecuteResult>('vesting_pledge_more', {
+  fee,
+  additionalPledge,
+});

nym-wallet/src/types/global.ts

@@ -50,8 +50,9 @@ export type TBondMixNodeArgs = {
 };
 
 export type TBondMoreArgs = {
-  mixId: MixNode;
-  amount: string;
+  additionalPledge: DecCoin;
+  fee?: Fee;
+
 };
 
 export type TNodeDescription = {