info txt

sdk/typescript/docs/components/wallet/delegations.tsx

@@ -1,28 +1,30 @@
-import React, { use, useEffect, useState } from 'react';
+import { useState } from 'react';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
-import { TableBody, TableCell, TableHead, TableRow, TextField, Typography } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import TextField from '@mui/material/TextField';
+import Alert from '@mui/material/Alert';
 import Table from '@mui/material/Table';
-import { useWalletContext, WalletContextProvider } from './utils/wallet.context';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { useWalletContext } from './utils/wallet.context';
 
 export const Delegations = () => {
   const { delegations, doDelegate, delegationLoader, unDelegateAll, unDelegateAllLoading, log } = useWalletContext();
 
   const [delegationNodeId, setDelegationNodeId] = useState<string>();
   const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
+  const [infoText, setInfoText] = useState<string>('');
 
   const cleanFields = () => {
     setDelegationNodeId('');
     setAmountToBeDelegated('');
+    setInfoText('');
   };
 
-  useEffect(() => {
-    return () => {
-      cleanFields();
-    };
-  }, []);
-
   return (
     <Box>
       <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
@@ -49,7 +51,8 @@ export const Delegations = () => {
                 <Button
                   variant="outlined"
                   onClick={() => {
-                    doDelegate({ mixId: delegationNodeId, amount: amountToBeDelegated });
+                    doDelegate(delegationNodeId, amountToBeDelegated);
+                    setInfoText('Changes will be visible after the next epoch');
                     cleanFields();
                   }}
                   disabled={delegationLoader}
@@ -65,7 +68,7 @@ export const Delegations = () => {
               {!delegations?.delegations?.length ? (
                 <Typography variant="body2">You do not have delegations</Typography>
               ) : (
-                <Box overflow='auto'>
+                <Box overflow="auto">
                   <Table size="small">
                     <TableHead>
                       <TableRow>
@@ -89,13 +92,22 @@ export const Delegations = () => {
                 </Box>
               )}
             </Box>
-            {delegations && (
+            {delegations?.delegations?.lenght > 0 && (
               <Box marginBottom={3}>
-                <Button variant="outlined" onClick={() => unDelegateAll()} disabled={unDelegateAllLoading}>
-                  {unDelegateAllLoading ? 'Undelegating...' : 'Undelegate All'}
+                <Button
+                  variant="outlined"
+                  onClick={() => {
+                    unDelegateAll();
+                    setInfoText('Changes will be visible after the next epoch');
+                  }}
+                  disabled={unDelegateAllLoading}
+                >
+                  Undelegate All
                 </Button>
               </Box>
             )}
+
+            {infoText && <Alert severity="info">{infoText}</Alert>}
           </Box>
         </Box>
       </Paper>

sdk/typescript/docs/components/wallet/utils/wallet.context.tsx

@@ -21,10 +21,10 @@ interface WalletState {
   log: React.ReactNode[];
   sendTokens?: (recipientAddress: string, tokensToSend: string) => void;
   delegations?: any;
+  doDelegate?: (mixId: string, amount: string) => void;
+  delegationLoader?: boolean;
   unDelegateAll?: () => void;
   unDelegateAllLoading?: boolean;
-  doDelegate?: ({ mixId, amount }: { mixId: string; amount: string }) => void;
-  delegationLoader?: boolean;
 }
 
 export const WalletContext = createContext<WalletState>({
@@ -43,7 +43,7 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
   const [nymWasmSignerClient, setNymWasmSignerClient] = useState<any>(null);
   const [account, setAccount] = useState<string>('');
   const [accountLoading, setAccountLoading] = useState<boolean>(false);
-  const [delegations, setDelegations] = useState<any>();
+  const [delegations, setDelegations] = useState<{ delegations: any[]; start_next_after: any }>();
   const [clientsAreLoading, setClientsAreLoading] = useState<boolean>(false);
   const [balance, setBalance] = useState<Coin>(null);
   const [balanceLoading, setBalanceLoading] = useState<boolean>(false);
@@ -134,7 +134,7 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
     setSendingTokensLoading(false);
   };
 
-  const doDelegate = async ({ mixId, amount }: { mixId: string; amount: string }) => {
+  const doDelegate = async (mixId: string, amount: string) => {
     setDelegationLoader(true);
     const memo: string = 'test delegation';
     const coinAmount: Coin = { amount: amount, denom: 'unym' };
@@ -155,6 +155,28 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
     setDelegationLoader(false);
   };
 
+  const unDelegateAll = async () => {
+    setUnDelegateAllLoading(true);
+    try {
+      // eslint-disable-next-line no-restricted-syntax
+      for (const delegation of delegations.delegations) {
+        // eslint-disable-next-line no-await-in-loop
+        const res = await nymWasmSignerClient.undelegateFromMixnode({ mixId: delegation.mix_id }, 'auto');
+        setUnDelegateAllLoading(false);
+        setLog((prev) => [
+          ...prev,
+          <div key={JSON.stringify(res, null, 2)}>
+            <code style={{ marginRight: '2rem' }}>{new Date().toLocaleTimeString()}</code>
+            <pre>{JSON.stringify(res, null, 2)}</pre>
+          </div>,
+        ]);
+      }
+    } catch (error) {
+      console.error(error);
+      setUnDelegateAllLoading(false);
+    }
+  };
+
   const withdrawRewards = async () => {
     const validatorAdress = '';
     const memo = 'test withdraw rewards';
@@ -174,20 +196,6 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
     // setWithdrawLoading(false);
   };
 
-  const undelegateAll = async () => {
-    setUnDelegateAllLoading(true);
-    try {
-      // eslint-disable-next-line no-restricted-syntax
-      for (const delegation of delegations.delegations) {
-        // eslint-disable-next-line no-await-in-loop
-        await nymWasmSignerClient.undelegateFromMixnode({ mixId: delegation.mix_id }, 'auto');
-      }
-    } catch (error) {
-      console.error(error);
-    }
-    setUnDelegateAllLoading(false);
-  };
-
   useEffect(() => {
     return () => {
       Reset();
@@ -218,10 +226,10 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
       log,
       sendTokens,
       delegations,
-      undelegateAll,
-      unDelegateAllLoading,
       doDelegate,
       delegationLoader,
+      unDelegateAll,
+      unDelegateAllLoading,
     }),
     [
       accountLoading,
@@ -234,10 +242,10 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
       log,
       sendTokens,
       delegations,
-      undelegateAll,
-      unDelegateAllLoading,
       doDelegate,
       delegationLoader,
+      unDelegateAll,
+      unDelegateAllLoading,
     ],
   );