diff --git a/sdk/typescript/docs/components/context/wallet.tsx b/sdk/typescript/docs/components/context/wallet.tsx
new file mode 100644
index 0000000000..0e63f70905
--- /dev/null
+++ b/sdk/typescript/docs/components/context/wallet.tsx
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { contracts } from '@nymproject/contract-clients';
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
+import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
+import { Coin, GasPrice } from '@cosmjs/stargate';
+import { settings } from '../client';
+
+const signerAccount = async (mnemonic: string) => {
+  // create a wallet to sign transactions with the mnemonic
+  const signer = await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, {
+    prefix: 'n',
+  });
+
+  return signer;
+};
+
+const fetchSignerCosmosWasmClient = async (mnemonic: string) => {
+  const signer = await signerAccount(mnemonic);
+
+  // create a signing client we don't need to set the gas price conversion for queries
+  const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
+    gasPrice: GasPrice.fromString('0.025unym'),
+  });
+
+  return cosmWasmClient;
+};
+
+const fetchSignerClient = async (mnemonic) => {
+  const signer = await signerAccount(mnemonic);
+
+  // create a signing client we don't need to set the gas price conversion for queries
+  // if you want to connect without signer you'd write ".connect" and "url" as param
+  const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
+    gasPrice: GasPrice.fromString('0.025unym'),
+  });
+
+  /** create a mixnet contract client
+   * @param cosmWasmClient the client to use for signing and querying
+   * @param settings.address the bech32 address prefix (human readable part)
+   * @param settings.mixnetContractAddress the bech32 address prefix (human readable part)
+   * @returns the client in MixnetClient form
+   */
+
+  const mixnetClient = new contracts.Mixnet.MixnetClient(
+    cosmWasmClient,
+    settings.address, // sender (that account of the signer)
+    settings.mixnetContractAddress, // contract address (different on mainnet, QA, etc)
+  );
+
+  return mixnetClient;
+};
+
+interface ApiState<RESPONSE> {
+  isLoading: boolean;
+  data?: RESPONSE;
+  error?: Error;
+}
+
+/**
+ * This context provides the state for wallet.
+ */
+
+interface WalletState {
+  cosmWasmSigner?: { getAccounts: () => void };
+  cosmWasmSignerClient?: { getBalance: (account: string, denom: string) => Coin };
+  nymWasmSignerClient?: ApiState<any>;
+  accountLoading: boolean;
+  account: string;
+  clientsAreLoading: boolean;
+  setConnectWithMnemonic?: (value: string) => void;
+  balance?: Coin;
+  balanceLoading: boolean;
+}
+
+export const WalletContext = React.createContext<WalletState>({
+  accountLoading: false,
+  account: '',
+  clientsAreLoading: false,
+  balanceLoading: false,
+});
+
+export const useWalletContext = (): React.ContextType<typeof WalletContext> =>
+  React.useContext<WalletState>(WalletContext);
+
+export const WalletContextProvider = ({ children }: { children: JSX.Element }) => {
+  // wallet mnemonic
+  const [connectWithMnemonic, setConnectWithMnemonic] = React.useState<string>();
+  const [accountLoading, setAccountLoading] = React.useState<boolean>(false);
+  const [account, setAccount] = React.useState<string>();
+  const [clientsAreLoading, setClientsAreLoading] = React.useState<boolean>(false);
+  const [cosmWasmSignerClient, setCosmWasmSignerClient] = React.useState<any>();
+  const [nymWasmSignerClient, setNymWasmSignerClient] = React.useState<any>();
+  const [balance, setBalance] = React.useState<Coin>();
+  const [balanceLoading, setBalanceLoading] = React.useState<boolean>(false);
+
+  const getSignerAccount = async () => {
+    console.log('getSignerAccount');
+    setAccountLoading(true);
+    try {
+      const signer = await signerAccount(connectWithMnemonic);
+      const accounts = await signer.getAccounts();
+      if (accounts[0]) {
+        setAccount(accounts[0].address);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+    setAccountLoading(false);
+  };
+  const getClients = async () => {
+    setClientsAreLoading(true);
+    try {
+      setCosmWasmSignerClient(await fetchSignerCosmosWasmClient(connectWithMnemonic));
+      setNymWasmSignerClient(await fetchSignerClient(connectWithMnemonic));
+    } catch (error) {
+      console.error(error);
+    }
+    setClientsAreLoading(false);
+  };
+
+  const getBalance = React.useCallback(async () => {
+    setBalanceLoading(true);
+    try {
+      const newBalance = await cosmWasmSignerClient?.getBalance(account, 'unym');
+      setBalance(newBalance);
+    } catch (error) {
+      console.error(error);
+    }
+    setBalanceLoading(false);
+  }, [account, cosmWasmSignerClient]);
+
+  React.useEffect(() => {
+    if (connectWithMnemonic) {
+      // when the mnemonic changes, remove all previous data
+      Promise.all([getSignerAccount(), getClients()]);
+    }
+  }, [connectWithMnemonic]);
+
+  React.useEffect(() => {
+    if (account && cosmWasmSignerClient) {
+      if (!balance) {
+        getBalance();
+      }
+    }
+  }, [account, cosmWasmSignerClient, balance, getBalance]);
+
+  const state = React.useMemo<WalletState>(
+    () => ({
+      accountLoading,
+      account,
+      clientsAreLoading,
+      cosmWasmSignerClient,
+      nymWasmSignerClient,
+      setConnectWithMnemonic,
+      balance,
+      balanceLoading,
+    }),
+    [
+      accountLoading,
+      account,
+      clientsAreLoading,
+      cosmWasmSignerClient,
+      nymWasmSignerClient,
+      setConnectWithMnemonic,
+      balance,
+      balanceLoading,
+    ],
+  );
+
+  return <WalletContext.Provider value={state}>{children}</WalletContext.Provider>;
+};
diff --git a/sdk/typescript/docs/components/wallet.tsx b/sdk/typescript/docs/components/wallet.tsx
index 3b8be9b787..4ec2d7cb09 100644
--- a/sdk/typescript/docs/components/wallet.tsx
+++ b/sdk/typescript/docs/components/wallet.tsx
@@ -1,283 +1,45 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { contracts } from '@nymproject/contract-clients';
-import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
-import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
-import { Coin, GasPrice } from '@cosmjs/stargate';
+import React, { useCallback, useEffect, useState, createContext } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { settings } from './client';
 import { ConnectWallet } from './wallet/connect';
 import { SendTokes } from './wallet/sendTokens';
 import { Delegations } from './wallet/delegations';
+import { WalletContextProvider } from './context/wallet';
 
-const signerAccount = async (mnemonic) => {
-  // create a wallet to sign transactions with the mnemonic
-  const signer = await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, {
-    prefix: 'n',
-  });
-
-  return signer;
-};
-
-const fetchSignerCosmosWasmClient = async (mnemonic: string) => {
-  const signer = await signerAccount(mnemonic);
-
-  // create a signing client we don't need to set the gas price conversion for queries
-  const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
-    gasPrice: GasPrice.fromString('0.025unym'),
-  });
-
-  return cosmWasmClient;
-};
-
-const fetchSignerClient = async (mnemonic) => {
-  const signer = await signerAccount(mnemonic);
-
-  // create a signing client we don't need to set the gas price conversion for queries
-  // if you want to connect without signer you'd write ".connect" and "url" as param
-  const cosmWasmClient = await SigningCosmWasmClient.connectWithSigner(settings.url, signer, {
-    gasPrice: GasPrice.fromString('0.025unym'),
-  });
-
-  /** create a mixnet contract client
-   * @param cosmWasmClient the client to use for signing and querying
-   * @param settings.address the bech32 address prefix (human readable part)
-   * @param settings.mixnetContractAddress the bech32 address prefix (human readable part)
-   * @returns the client in MixnetClient form
-   */
-
-  const mixnetClient = new contracts.Mixnet.MixnetClient(
-    cosmWasmClient,
-    settings.address, // sender (that account of the signer)
-    settings.mixnetContractAddress, // contract address (different on mainnet, QA, etc)
-  );
-
-  return mixnetClient;
-};
 
 export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations' }) => {
-  const [mnemonic, setMnemonic] = useState<string>();
   const [signerCosmosWasmClient, setSignerCosmosWasmClient] = useState<any>();
   const [signerClient, setSignerClient] = useState<any>();
   const [account, setAccount] = useState<string>();
-  const [accountLoading, setAccountLoading] = useState<boolean>(false);
-  const [clientLoading, setClientLoading] = useState<boolean>(false);
-  const [balance, setBalance] = useState<Coin>();
-  const [balanceLoading, setBalanceLoading] = useState<boolean>(false);
-  const [log, setLog] = useState<React.ReactNode[]>([]);
-  const [sendingTokensLoader, setSendingTokensLoader] = useState<boolean>(false);
-  const [delegations, setDelegations] = useState<any>();
-  const [recipientAddress, setRecipientAddress] = useState<string>('');
-  const [delegationLoader, setDelegationLoader] = useState<boolean>(false);
-  const [undeledationLoader, setUndeledationLoader] = useState<boolean>(false);
-  const [withdrawLoading, setWithdrawLoading] = useState<boolean>(false);
-  const [connectButtonText, setConnectButtonText] = useState<string>('Connect');
-
-  const getBalance = useCallback(async () => {
-    setBalanceLoading(true);
-    try {
-      const newBalance = await signerCosmosWasmClient?.getBalance(account, 'unym');
-      setBalance(newBalance);
-    } catch (error) {
-      console.error(error);
-    }
-    setBalanceLoading(false);
-  }, [account, signerCosmosWasmClient]);
-
-  const getSignerAccount = async () => {
-    setAccountLoading(true);
-    try {
-      const signer = await signerAccount(mnemonic);
-      const accounts = await signer.getAccounts();
-      if (accounts[0]) {
-        setAccount(accounts[0].address);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-    setAccountLoading(false);
-  };
-
-  const getClients = async () => {
-    setClientLoading(true);
-    try {
-      setSignerCosmosWasmClient(await fetchSignerCosmosWasmClient(mnemonic));
-      setSignerClient(await fetchSignerClient(mnemonic));
-    } catch (error) {
-      console.error(error);
-    }
-    setClientLoading(false);
-  };
-
-  const getDelegations = useCallback(async () => {
-    const newDelegations = await signerClient.getDelegatorDelegations({
-      delegator: settings.address,
-    });
-    setDelegations(newDelegations);
-  }, [signerClient]);
-
-  const connect = () => {
-    getSignerAccount();
-    getClients();
-  };
-
-  // Start Undelgate All
-  const doUndelegateAll = async () => {
-    if (!signerClient) {
-      return;
-    }
-    setUndeledationLoader(true);
-    try {
-      // eslint-disable-next-line no-restricted-syntax
-      for (const delegation of delegations.delegations) {
-        // eslint-disable-next-line no-await-in-loop
-        await signerClient.undelegateFromMixnode({ mixId: delegation.mix_id }, 'auto');
-      }
-    } catch (error) {
-      console.error(error);
-    }
-    setUndeledationLoader(false);
-  };
-  // End Undelgate All
-
-  // Start Delegate
-  const doDelegate = async ({ mixId, amount }: { mixId: number; amount: number }) => {
-    if (!signerClient) {
-      return;
-    }
-    setDelegationLoader(true);
-    try {
-      const res = await signerClient.delegateToMixnode({ mixId }, 'auto', undefined, [
-        { amount: `${amount}`, denom: 'unym' },
-      ]);
-      console.log('res', res);
-      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);
-    }
-    setDelegationLoader(false);
-  };
-  // End delegate
-
-  // Sending tokens
-  const doSendTokens = async (amount: string) => {
-    const memo = 'test sending tokens';
-    setSendingTokensLoader(true);
-    try {
-      const res = await signerCosmosWasmClient.sendTokens(
-        account,
-        recipientAddress,
-        [{ amount, denom: 'unym' }],
-        'auto',
-        memo,
-      );
-      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);
-    }
-    setSendingTokensLoader(false);
-  };
-  // End send tokens
-
-  // Start Withdraw Rewards
-  const doWithdrawRewards = async () => {
-    const delegatorAddress = '';
-    const validatorAdress = '';
-    const memo = 'test sending tokens';
-    setWithdrawLoading(true);
-    try {
-      const res = await signerCosmosWasmClient.withdrawRewards(delegatorAddress, validatorAdress, 'auto', memo);
-      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);
-    }
-    setWithdrawLoading(false);
-  };
-  // End Withdraw Rewards
-
-  useEffect(() => {
-    if (account && signerCosmosWasmClient) {
-      if (!balance) {
-        setBalanceLoading(true);
-        getBalance();
-        setBalanceLoading(false);
-      }
-    }
-  }, [account, signerCosmosWasmClient, balance, getBalance]);
-
-  useEffect(() => {
-    if (signerClient && !delegations) {
-      console.log('getDelegations');
-      getDelegations();
-    }
-  }, [signerClient, getDelegations, delegations]);
-
-  useEffect(() => {
-    if (accountLoading || clientLoading || balanceLoading) {
-      setConnectButtonText('Loading...');
-    } else if (balance) {
-      setConnectButtonText('Connected');
-    }
-    setConnectButtonText('Connect');
-  }, [accountLoading, clientLoading, balanceLoading]);
-
   return (
-    <Box padding={3}>
-      {type === 'connect' && (
-        <ConnectWallet
-          setMnemonic={setMnemonic}
-          connect={connect}
-          mnemonic={mnemonic}
-          accountLoading={accountLoading}
-          clientLoading={clientLoading}
-          balanceLoading={balanceLoading}
-          account={account}
-          balance={balance}
-          connectButtonText={connectButtonText}
-        />
-      )}
-      {type === 'sendTokens' && (
-        <SendTokes
-          setRecipientAddress={setRecipientAddress}
-          doSendTokens={doSendTokens}
-          sendingTokensLoader={sendingTokensLoader}
-        />
+    <WalletContextProvider>
+      <Box padding={3}>
+        {type === 'connect' && (
+            <ConnectWallet />
+        )}
+        {/* {type === 'sendTokens' && (
+        <WalletContext.Provider value={{...WalletContext}}>
+          <SendTokes
+          // setRecipientAddress={setRecipientAddress}
+          // signerCosmosWasmClient={signerCosmosWasmClient}
+          // account={account}
+          // recipientAddress={recipientAddress}
+          />
+        </WalletContext.Provider>
       )}
       {type === 'delegations' && (
-        <Delegations
-          delegations={delegations}
-          doDelegate={doDelegate}
-          delegationLoader={delegationLoader}
-          undeledationLoader={undeledationLoader}
-          doUndelegateAll={doUndelegateAll}
-          doWithdrawRewards={doWithdrawRewards}
-          withdrawLoading={withdrawLoading}
-        />
-      )}
-      {log.length > 0 && (
+        <WalletContext.Provider value={WalletContext}>
+          <Delegations />
+        </WalletContext.Provider>
+      )} */}
+        {/* {log.length > 0 && (
         <Box marginTop={3}>
           <Typography variant="h5">Transaction Logs:</Typography>
           {log}
         </Box>
-      )}
-    </Box>
+      )} */}
+      </Box>
+    </WalletContextProvider>
   );
 };
diff --git a/sdk/typescript/docs/components/wallet/connect.tsx b/sdk/typescript/docs/components/wallet/connect.tsx
index ec67bf0225..bfbc5d60c3 100644
--- a/sdk/typescript/docs/components/wallet/connect.tsx
+++ b/sdk/typescript/docs/components/wallet/connect.tsx
@@ -1,74 +1,69 @@
-import React  from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Coin } from '@cosmjs/stargate';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
+import { useWalletContext } from '../context/wallet';
 
-export const ConnectWallet = ({
-    setMnemonic,
-    connect,
-    mnemonic,
-    accountLoading,
-    clientLoading,
-    balanceLoading,
-    account,
-    balance,
-    connectButtonText,
-  }: {
-    setMnemonic: (value: string) => void;
-    connect: () => void;
-    mnemonic: string;
-    accountLoading: boolean;
-    clientLoading: boolean;
-    balanceLoading: boolean;
-    account: string;
-    balance: Coin;
-    connectButtonText: string;
-  }) => {
-    return (
-      <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
-        <Typography variant="h5" textAlign="center">
-          Connect to your testnet account
-        </Typography>
-        <Box padding={3}>
-          <Typography variant="h6">Your testnet account:</Typography>
-          <Box marginY={3}>
-            <Typography variant="body1" marginBottom={3}>
-              Enter the mnemonic
-            </Typography>
-            <TextField
-              type="text"
-              placeholder="mnemonic"
-              onChange={(e) => setMnemonic(e.target.value)}
-              fullWidth
-              multiline
-              maxRows={4}
-              sx={{ marginBottom: 3 }}
-            />
-            <Button
-              variant="outlined"
-              onClick={() => connect()}
-              disabled={!mnemonic || accountLoading || clientLoading || balanceLoading}
-            >
-              {connectButtonText}
-            </Button>
-          </Box>
-          {account && balance ? (
-            <Box>
-              <Typography variant="body1">Address: {account}</Typography>
-              <Typography variant="body1">
-                Balance: {balance?.amount} {balance?.denom}
-              </Typography>
-            </Box>
-          ) : (
-            <Box>
-              <Typography variant="body1">Please, enter your mnemonic to receive your account information</Typography>
-            </Box>
-          )}
+export const ConnectWallet = () => {
+  const { balance, balanceLoading, accountLoading, setConnectWithMnemonic, account, clientsAreLoading } =
+    useWalletContext();
+
+  const [mnemonic, setMnemonic] = useState<string>();
+  const [connectButtonText, setConnectButtonText] = useState<string>('Connect');
+
+  useEffect(() => {
+    if (accountLoading || clientsAreLoading || balanceLoading) {
+      setConnectButtonText('Loading...');
+    } else if (balance) {
+      setConnectButtonText('Connected');
+    }
+    setConnectButtonText('Connect');
+  }, [accountLoading, clientsAreLoading, balanceLoading]);
+
+  return (
+    <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
+      <Typography variant="h5" textAlign="center">
+        Connect to your testnet account
+      </Typography>
+      <Box padding={3}>
+        <Typography variant="h6">Your testnet account:</Typography>
+        <Box marginY={3}>
+          <Typography variant="body1" marginBottom={3}>
+            Enter the mnemonic
+          </Typography>
+          <TextField
+            type="text"
+            placeholder="mnemonic"
+            onChange={(e) => setMnemonic(e.target.value)}
+            fullWidth
+            multiline
+            maxRows={4}
+            sx={{ marginBottom: 3 }}
+          />
+          <Button
+            variant="outlined"
+            onClick={() => setConnectWithMnemonic(mnemonic)}
+            disabled={!mnemonic || accountLoading || clientsAreLoading || balanceLoading}
+          >
+            {connectButtonText}
+          </Button>
         </Box>
-      </Paper>
-    );
-  };
-  
\ No newline at end of file
+        {account && balance ? (
+          <Box>
+            <Typography variant="body1">Address: {account}</Typography>
+            <Typography variant="body1">
+              Balance: {balance?.amount} {balance?.denom}
+            </Typography>
+          </Box>
+        ) : (
+          <Box>
+            <Typography variant="body1">Please, enter your mnemonic to receive your account information</Typography>
+          </Box>
+        )}
+      </Box>
+    </Paper>
+  );
+};
diff --git a/sdk/typescript/docs/components/wallet/delegations.tsx b/sdk/typescript/docs/components/wallet/delegations.tsx
index d0198a32cd..fd22b03b80 100644
--- a/sdk/typescript/docs/components/wallet/delegations.tsx
+++ b/sdk/typescript/docs/components/wallet/delegations.tsx
@@ -5,104 +5,178 @@ import Box from '@mui/material/Box';
 import { TableBody, TableCell, TableHead, TableRow, TextField, Typography } from '@mui/material';
 import Table from '@mui/material/Table';
 
-export const Delegations = ({
-  delegations,
-  doDelegate,
-  delegationLoader,
-  doUndelegateAll,
-  undeledationLoader,
-  doWithdrawRewards,
-  withdrawLoading,
-}: {
-  delegations: any;
-  doDelegate: ({ mixId, amount }: { mixId: number; amount: number }) => void;
-  delegationLoader: boolean;
-  doUndelegateAll: () => void;
-  undeledationLoader: boolean;
-  doWithdrawRewards: () => void;
-  withdrawLoading: boolean;
-}) => {
+export const Delegations = () => {
   const [delegationNodeId, setDelegationNodeId] = useState<string>();
   const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
+  const [log, setLog] = useState<React.ReactNode[]>([]);
+  const [delegations, setDelegations] = useState<any>();
+  const [delegationLoader, setDelegationLoader] = useState<boolean>(false);
+  const [undeledationLoader, setUndeledationLoader] = useState<boolean>(false);
+  const [withdrawLoading, setWithdrawLoading] = useState<boolean>(false);
+
+
+
+  // const getDelegations = useCallback(async () => {
+  //   const newDelegations = await signerClient.getDelegatorDelegations({
+  //     delegator: settings.address,
+  //   });
+  //   setDelegations(newDelegations);
+  // }, [signerClient]);
+
+  // // Start Undelgate All
+  // const doUndelegateAll = async () => {
+  //   if (!signerClient) {
+  //     return;
+  //   }
+  //   setUndeledationLoader(true);
+  //   try {
+  //     // eslint-disable-next-line no-restricted-syntax
+  //     for (const delegation of delegations.delegations) {
+  //       // eslint-disable-next-line no-await-in-loop
+  //       await signerClient.undelegateFromMixnode({ mixId: delegation.mix_id }, 'auto');
+  //     }
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  //   setUndeledationLoader(false);
+  // };
+  // // End Undelgate All
+
+  // // Start Delegate
+  // const doDelegate = async ({ mixId, amount }: { mixId: number; amount: number }) => {
+  //   if (!signerClient) {
+  //     return;
+  //   }
+  //   setDelegationLoader(true);
+  //   try {
+  //     const res = await signerClient.delegateToMixnode({ mixId }, 'auto', undefined, [
+  //       { amount: `${amount}`, denom: 'unym' },
+  //     ]);
+  //     console.log('res', res);
+  //     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);
+  //   }
+  //   setDelegationLoader(false);
+  // };
+  // // End delegate
+
+  // // Start Withdraw Rewards
+  // const doWithdrawRewards = async () => {
+  //   const delegatorAddress = '';
+  //   const validatorAdress = '';
+  //   const memo = 'test sending tokens';
+  //   setWithdrawLoading(true);
+  //   try {
+  //     const res = await signerCosmosWasmClient.withdrawRewards(delegatorAddress, validatorAdress, 'auto', memo);
+  //     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);
+  //   }
+  //   setWithdrawLoading(false);
+  // };
+  // // End Withdraw Rewards
+
+  // useEffect(() => {
+  //   if (signerClient && !delegations) {
+  //     getDelegations();
+  //   }
+  // }, [signerClient, getDelegations, delegations]);
+
+  // return (
+  //   <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
+  //     <Box padding={3}>
+  //       <Typography variant="h6">Delegations</Typography>
+  //       <Box marginY={3}>
+  //         <Box marginY={3} display="flex" flexDirection="column">
+  //           <Typography marginBottom={3} variant="body1">
+  //             Make a delegation
+  //           </Typography>
+  //           <TextField
+  //             type="text"
+  //             placeholder="Mixnode ID"
+  //             onChange={(e) => setDelegationNodeId(e.target.value)}
+  //             size="small"
+  //           />
+  //           <Box marginTop={3} display="flex" justifyContent="space-between">
+  //             <TextField
+  //               type="text"
+  //               placeholder="Amount"
+  //               onChange={(e) => setAmountToBeDelegated(e.target.value)}
+  //               size="small"
+  //             />
+  //             <Button
+  //               variant="outlined"
+  //               onClick={() =>
+  //                 doDelegate({ mixId: parseInt(delegationNodeId, 10), amount: parseInt(amountToBeDelegated, 10) })
+  //               }
+  //               disabled={delegationLoader}
+  //             >
+  //               {delegationLoader ? 'Delegation in process...' : 'Delegate'}
+  //             </Button>
+  //           </Box>
+  //         </Box>
+  //       </Box>
+  //       <Box marginTop={3}>
+  //         <Typography variant="body1">Your delegations</Typography>
+  //         <Box marginBottom={3} display="flex" flexDirection="column">
+  //           {!delegations?.delegations?.length ? (
+  //             <Typography>You do not have delegations</Typography>
+  //           ) : (
+  //             <Box>
+  //               <Table size="small">
+  //                 <TableHead>
+  //                   <TableRow>
+  //                     <TableCell>MixId</TableCell>
+  //                     <TableCell>Owner</TableCell>
+  //                     <TableCell>Amount</TableCell>
+  //                     <TableCell>Cumulative Reward Ratio</TableCell>
+  //                   </TableRow>
+  //                 </TableHead>
+  //                 <TableBody>
+  //                   {delegations?.delegations.map((delegation: any) => (
+  //                     <TableRow key={delegation.mix_id}>
+  //                       <TableCell>{delegation.mix_id}</TableCell>
+  //                       <TableCell>{delegation.owner}</TableCell>
+  //                       <TableCell>{delegation.amount.amount}</TableCell>
+  //                       <TableCell>{delegation.cumulative_reward_ratio}</TableCell>
+  //                     </TableRow>
+  //                   ))}
+  //                 </TableBody>
+  //               </Table>
+  //             </Box>
+  //           )}
+  //         </Box>
+  //         {delegations && (
+  //           <Box marginBottom={3}>
+  //             <Button variant="outlined" onClick={() => doUndelegateAll()} disabled={undeledationLoader}>
+  //               {undeledationLoader ? 'Undelegating...' : 'Undelegate All'}
+  //             </Button>
+  //           </Box>
+  //         )}
+  //         <Box>
+  //           <Button variant="outlined" onClick={() => doWithdrawRewards()} disabled={withdrawLoading}>
+  //             {withdrawLoading ? 'Doing withdraw...' : 'Withdraw rewards'}
+  //           </Button>
+  //         </Box>
+  //       </Box>
+  //     </Box>
+  //   </Paper>
+  // );
 
   return (
-    <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
-      <Box padding={3}>
-        <Typography variant="h6">Delegations</Typography>
-        <Box marginY={3}>
-          <Box marginY={3} display="flex" flexDirection="column">
-            <Typography marginBottom={3} variant="body1">
-              Make a delegation
-            </Typography>
-            <TextField
-              type="text"
-              placeholder="Mixnode ID"
-              onChange={(e) => setDelegationNodeId(e.target.value)}
-              size="small"
-            />
-            <Box marginTop={3} display="flex" justifyContent="space-between">
-              <TextField
-                type="text"
-                placeholder="Amount"
-                onChange={(e) => setAmountToBeDelegated(e.target.value)}
-                size="small"
-              />
-              <Button
-                variant="outlined"
-                onClick={() =>
-                  doDelegate({ mixId: parseInt(delegationNodeId, 10), amount: parseInt(amountToBeDelegated, 10) })
-                }
-                disabled={delegationLoader}
-              >
-                {delegationLoader ? 'Delegation in process...' : 'Delegate'}
-              </Button>
-            </Box>
-          </Box>
-        </Box>
-        <Box marginTop={3}>
-          <Typography variant="body1">Your delegations</Typography>
-          <Box marginBottom={3} display="flex" flexDirection="column">
-            {!delegations?.delegations?.length ? (
-              <Typography>You do not have delegations</Typography>
-            ) : (
-              <Box>
-                <Table size="small">
-                  <TableHead>
-                    <TableRow>
-                      <TableCell>MixId</TableCell>
-                      <TableCell>Owner</TableCell>
-                      <TableCell>Amount</TableCell>
-                      <TableCell>Cumulative Reward Ratio</TableCell>
-                    </TableRow>
-                  </TableHead>
-                  <TableBody>
-                    {delegations?.delegations.map((delegation: any) => (
-                      <TableRow key={delegation.mix_id}>
-                        <TableCell>{delegation.mix_id}</TableCell>
-                        <TableCell>{delegation.owner}</TableCell>
-                        <TableCell>{delegation.amount.amount}</TableCell>
-                        <TableCell>{delegation.cumulative_reward_ratio}</TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </Box>
-            )}
-          </Box>
-          {delegations && (
-            <Box marginBottom={3}>
-              <Button variant="outlined" onClick={() => doUndelegateAll()} disabled={undeledationLoader}>
-                {undeledationLoader ? 'Undelegating...' : 'Undelegate All'}
-              </Button>
-            </Box>
-          )}
-          <Box>
-            <Button variant="outlined" onClick={() => doWithdrawRewards()} disabled={withdrawLoading}>
-              {withdrawLoading ? 'Doing withdraw...' : 'Withdraw rewards'}
-            </Button>
-          </Box>
-        </Box>
-      </Box>
-    </Paper>
-  );
+    <Box>Hello</Box>
+  )
 };
diff --git a/sdk/typescript/docs/components/wallet/sendTokens.tsx b/sdk/typescript/docs/components/wallet/sendTokens.tsx
index a1e4e421b1..6316f91480 100644
--- a/sdk/typescript/docs/components/wallet/sendTokens.tsx
+++ b/sdk/typescript/docs/components/wallet/sendTokens.tsx
@@ -1,45 +1,94 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
+import { useWalletContext } from '../context/wallet';
 
 export const SendTokes = ({
-  setRecipientAddress,
-  doSendTokens,
-  sendingTokensLoader,
+  // setRecipientAddress,
+  // signerCosmosWasmClient,
+  // account,
+  // recipientAddress,
 }: {
-  setRecipientAddress: (value: string) => void;
-  doSendTokens: (amount: string) => void;
-  sendingTokensLoader: boolean;
+  // setRecipientAddress: (value: string) => void;
+  // signerCosmosWasmClient: any;
+  // account: string;
+  // recipientAddress: string;
 }) => {
+  const { cosmWasmSigner, cosmWasmSignerClient, nymWasmSignerClient, setConnectWithMnemonic } = useWalletContext();
+  const [recipientAddress, setRecipientAddress] = useState<string>('');
   const [tokensToSend, setTokensToSend] = useState<string>();
+  const [sendingTokensLoader, setSendingTokensLoader] = useState<boolean>(false);
+  const [log, setLog] = useState<React.ReactNode[]>([]);
+
+  // Sending tokens
+  // const doSendTokens = async () => {
+  //   const memo = 'test sending tokens';
+  //   setSendingTokensLoader(true);
+  //   try {
+  //     console.log('signerCosmosWasmClient', signerCosmosWasmClient);
+  //     const res = await signerCosmosWasmClient.sendTokens(
+  //       account,
+  //       recipientAddress,
+  //       [{ amount: tokensToSend, denom: 'unym' }],
+  //       'auto',
+  //       memo,
+  //     );
+  //     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);
+  //   }
+  //   setSendingTokensLoader(false);
+  // };
+  // End send tokens
+
+  // console.log('signerCosmosWasmClient', signerCosmosWasmClient);
+
+  // useEffect(() => {
+  //   console.log('signerCosmosWasmClient', signerCosmosWasmClient, 'account', account);
+  // }, [signerCosmosWasmClient, account]);
 
   return (
-    <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
-      <Box padding={3}>
-        <Typography variant="h6">Send Tokens</Typography>
-        <Box marginTop={3} display="flex" flexDirection="column">
-          <TextField
-            type="text"
-            placeholder="Recipient Address"
-            onChange={(e) => setRecipientAddress(e.target.value)}
-            size="small"
-          />
-          <Box marginY={3} display="flex" justifyContent="space-between">
+    <Box>
+      <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
+        <Box padding={3}>
+          <Typography variant="h6">Send Tokens</Typography>
+          <Box marginTop={3} display="flex" flexDirection="column">
             <TextField
               type="text"
-              placeholder="Amount"
-              onChange={(e) => setTokensToSend(e.target.value)}
+              placeholder="Recipient Address"
+              onChange={(e) => setRecipientAddress(e.target.value)}
               size="small"
             />
-            <Button variant="outlined" onClick={() => doSendTokens(tokensToSend)} disabled={sendingTokensLoader}>
-              {sendingTokensLoader ? 'Sending...' : 'SendTokens'}
-            </Button>
+            <Box marginY={3} display="flex" justifyContent="space-between">
+              <TextField
+                type="text"
+                placeholder="Amount"
+                onChange={(e) => setTokensToSend(e.target.value)}
+                size="small"
+              />
+              {/* <Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoader}>
+                {sendingTokensLoader ? 'Sending...' : 'Send tokens'}
+              </Button> */}
+            </Box>
           </Box>
         </Box>
-      </Box>
-    </Paper>
+      </Paper>
+
+      {log.length > 0 && (
+        <Box marginTop={3}>
+          <Typography variant="h5">Transaction Logs:</Typography>
+          {log}
+        </Box>
+      )}
+    </Box>
   );
-};
\ No newline at end of file
+};