diff --git a/sdk/typescript/docs/code-examples/wallet-connect-code.mdx b/sdk/typescript/docs/code-examples/wallet-connect-code.mdx
index fb0d786d22..060e7a5106 100644
--- a/sdk/typescript/docs/code-examples/wallet-connect-code.mdx
+++ b/sdk/typescript/docs/code-examples/wallet-connect-code.mdx
@@ -1,5 +1,5 @@
 ```ts copy filename="FormattedWalletConnectCode.tsx"
-import React  from 'react';
+import React from 'react';
 import { Coin } from '@cosmjs/stargate';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
@@ -7,69 +7,127 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
 
+// Connect method on Parent Component
+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);
+};
+
+// Get Balance on Parent Component
+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 getClients = async () => {
+  setClientLoading(true);
+  try {
+    setSignerCosmosWasmClient(await fetchSignerCosmosWasmClient(mnemonic));
+    setSignerClient(await fetchSignerClient(mnemonic));
+  } catch (error) {
+    console.error(error);
+  }
+  setClientLoading(false);
+};
+
+const connect = () => {
+  getSignerAccount();
+  getClients();
+};
+
+// Get Signner Account on Parent Component
+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);
+};
+
 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 account
-        </Typography>
-        <Box padding={3}>
-          <Typography variant="h6">Your 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>
-          )}
+  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 account
+      </Typography>
+      <Box padding={3}>
+        <Typography variant="h6">Your 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>
-      </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/code-examples/wallet-delegations-code.mdx b/sdk/typescript/docs/code-examples/wallet-delegations-code.mdx
index 8d087615ff..d70b5f1b79 100644
--- a/sdk/typescript/docs/code-examples/wallet-delegations-code.mdx
+++ b/sdk/typescript/docs/code-examples/wallet-delegations-code.mdx
@@ -6,31 +6,104 @@ import Box from '@mui/material/Box';
 import { TableBody, TableCell, TableHead, TableRow, TextField, Typography } from '@mui/material';
 import Table from '@mui/material/Table';
 
+// Get Delegations on parent component
+  const getDelegations = useCallback(async () => {
+    const newDelegations = await signerClient.getDelegatorDelegations({
+      delegator: settings.address,
+    });
+    setDelegations(newDelegations);
+  }, [signerClient]);
+
+// Make a Delegation on parent component
+  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);
+  };
+
+  // Undelegate All on Parent Component
+  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);
+  };
+
+  // Withdraw Rewards on Parent Component
+  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);
+  };
+
+import React, { 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 Table from '@mui/material/Table';
+
 export const Delegations = ({
   delegations,
-  setDelegationNodeId,
-  setAmountToBeDelegated,
-  amountToBeDelegated,
-  delegationNodeId,
   doDelegate,
   delegationLoader,
-  undeledationLoader,
   doUndelegateAll,
+  undeledationLoader,
   doWithdrawRewards,
   withdrawLoading,
 }: {
   delegations: any;
-  setDelegationNodeId: (value: string) => void;
-  setAmountToBeDelegated: (value: string) => void;
-  amountToBeDelegated: string;
-  delegationNodeId: string;
   doDelegate: ({ mixId, amount }: { mixId: number; amount: number }) => void;
   delegationLoader: boolean;
-  undeledationLoader: boolean;
   doUndelegateAll: () => void;
+  undeledationLoader: boolean;
   doWithdrawRewards: () => void;
   withdrawLoading: boolean;
 }) => {
+  const [delegationNodeId, setDelegationNodeId] = useState<string>();
+  const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
+
   return (
     <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
       <Box padding={3}>
diff --git a/sdk/typescript/docs/code-examples/wallet-sendTokens-code.mdx b/sdk/typescript/docs/code-examples/wallet-sendTokens-code.mdx
index 44a36c05de..1b142ed936 100644
--- a/sdk/typescript/docs/code-examples/wallet-sendTokens-code.mdx
+++ b/sdk/typescript/docs/code-examples/wallet-sendTokens-code.mdx
@@ -1,22 +1,47 @@
 ```ts copy filename="FormattedWalletSendTokensCode.tsx"
-import React from 'react';
+import React, { useState } 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';
 
+// Send tokens on Parent component
+  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);
+  };
+
 export const SendTokes = ({
   setRecipientAddress,
-  setTokensToSend,
   doSendTokens,
   sendingTokensLoader,
 }: {
   setRecipientAddress: (value: string) => void;
-  setTokensToSend: (value: string) => void;
-  doSendTokens: () => void;
+  doSendTokens: (amount: string) => void;
   sendingTokensLoader: boolean;
 }) => {
+  const [tokensToSend, setTokensToSend] = useState<string>();
+
   return (
     <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
       <Box padding={3}>
@@ -35,7 +60,7 @@ export const SendTokes = ({
               onChange={(e) => setTokensToSend(e.target.value)}
               size="small"
             />
-            <Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoader}>
+            <Button variant="outlined" onClick={() => doSendTokens(amount)} disabled={sendingTokensLoader}>
               {sendingTokensLoader ? 'Sending...' : 'SendTokens'}
             </Button>
           </Box>
diff --git a/sdk/typescript/docs/components/wallet.tsx b/sdk/typescript/docs/components/wallet.tsx
index 4c654d4662..3b8be9b787 100644
--- a/sdk/typescript/docs/components/wallet.tsx
+++ b/sdk/typescript/docs/components/wallet.tsx
@@ -65,12 +65,9 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
   const [balance, setBalance] = useState<Coin>();
   const [balanceLoading, setBalanceLoading] = useState<boolean>(false);
   const [log, setLog] = useState<React.ReactNode[]>([]);
-  const [tokensToSend, setTokensToSend] = useState<string>();
   const [sendingTokensLoader, setSendingTokensLoader] = useState<boolean>(false);
   const [delegations, setDelegations] = useState<any>();
   const [recipientAddress, setRecipientAddress] = useState<string>('');
-  const [delegationNodeId, setDelegationNodeId] = useState<string>();
-  const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
   const [delegationLoader, setDelegationLoader] = useState<boolean>(false);
   const [undeledationLoader, setUndeledationLoader] = useState<boolean>(false);
   const [withdrawLoading, setWithdrawLoading] = useState<boolean>(false);
@@ -124,6 +121,7 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
     getClients();
   };
 
+  // Start Undelgate All
   const doUndelegateAll = async () => {
     if (!signerClient) {
       return;
@@ -140,7 +138,9 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
     }
     setUndeledationLoader(false);
   };
+  // End Undelgate All
 
+  // Start Delegate
   const doDelegate = async ({ mixId, amount }: { mixId: number; amount: number }) => {
     if (!signerClient) {
       return;
@@ -166,14 +166,14 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
   // End delegate
 
   // Sending tokens
-  const doSendTokens = async () => {
+  const doSendTokens = async (amount: string) => {
     const memo = 'test sending tokens';
     setSendingTokensLoader(true);
     try {
       const res = await signerCosmosWasmClient.sendTokens(
         account,
         recipientAddress,
-        [{ amount: tokensToSend, denom: 'unym' }],
+        [{ amount, denom: 'unym' }],
         'auto',
         memo,
       );
@@ -191,7 +191,7 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
   };
   // End send tokens
 
-  // Withdraw Rewards
+  // Start Withdraw Rewards
   const doWithdrawRewards = async () => {
     const delegatorAddress = '';
     const validatorAdress = '';
@@ -211,6 +211,7 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
     }
     setWithdrawLoading(false);
   };
+  // End Withdraw Rewards
 
   useEffect(() => {
     if (account && signerCosmosWasmClient) {
@@ -256,7 +257,6 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
       {type === 'sendTokens' && (
         <SendTokes
           setRecipientAddress={setRecipientAddress}
-          setTokensToSend={setTokensToSend}
           doSendTokens={doSendTokens}
           sendingTokensLoader={sendingTokensLoader}
         />
@@ -264,10 +264,6 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
       {type === 'delegations' && (
         <Delegations
           delegations={delegations}
-          setDelegationNodeId={setDelegationNodeId}
-          setAmountToBeDelegated={setAmountToBeDelegated}
-          amountToBeDelegated={amountToBeDelegated}
-          delegationNodeId={delegationNodeId}
           doDelegate={doDelegate}
           delegationLoader={delegationLoader}
           undeledationLoader={undeledationLoader}
diff --git a/sdk/typescript/docs/components/wallet/delegations.tsx b/sdk/typescript/docs/components/wallet/delegations.tsx
index 03d32d8edd..d0198a32cd 100644
--- a/sdk/typescript/docs/components/wallet/delegations.tsx
+++ b/sdk/typescript/docs/components/wallet/delegations.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
@@ -7,29 +7,24 @@ import Table from '@mui/material/Table';
 
 export const Delegations = ({
   delegations,
-  setDelegationNodeId,
-  setAmountToBeDelegated,
-  amountToBeDelegated,
-  delegationNodeId,
   doDelegate,
   delegationLoader,
-  undeledationLoader,
   doUndelegateAll,
+  undeledationLoader,
   doWithdrawRewards,
   withdrawLoading,
 }: {
   delegations: any;
-  setDelegationNodeId: (value: string) => void;
-  setAmountToBeDelegated: (value: string) => void;
-  amountToBeDelegated: string;
-  delegationNodeId: string;
   doDelegate: ({ mixId, amount }: { mixId: number; amount: number }) => void;
   delegationLoader: boolean;
-  undeledationLoader: boolean;
   doUndelegateAll: () => void;
+  undeledationLoader: boolean;
   doWithdrawRewards: () => void;
   withdrawLoading: boolean;
 }) => {
+  const [delegationNodeId, setDelegationNodeId] = useState<string>();
+  const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
+
   return (
     <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
       <Box padding={3}>
diff --git a/sdk/typescript/docs/components/wallet/sendTokens.tsx b/sdk/typescript/docs/components/wallet/sendTokens.tsx
index 452fe5e4e0..a1e4e421b1 100644
--- a/sdk/typescript/docs/components/wallet/sendTokens.tsx
+++ b/sdk/typescript/docs/components/wallet/sendTokens.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
@@ -7,15 +7,15 @@ import TextField from '@mui/material/TextField';
 
 export const SendTokes = ({
   setRecipientAddress,
-  setTokensToSend,
   doSendTokens,
   sendingTokensLoader,
 }: {
   setRecipientAddress: (value: string) => void;
-  setTokensToSend: (value: string) => void;
-  doSendTokens: () => void;
+  doSendTokens: (amount: string) => void;
   sendingTokensLoader: boolean;
 }) => {
+  const [tokensToSend, setTokensToSend] = useState<string>();
+
   return (
     <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
       <Box padding={3}>
@@ -34,7 +34,7 @@ export const SendTokes = ({
               onChange={(e) => setTokensToSend(e.target.value)}
               size="small"
             />
-            <Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoader}>
+            <Button variant="outlined" onClick={() => doSendTokens(tokensToSend)} disabled={sendingTokensLoader}>
               {sendingTokensLoader ? 'Sending...' : 'SendTokens'}
             </Button>
           </Box>