divide a the wallet in operations

sdk/typescript/docs/code-examples/wallet-example-code.mdx

@@ -5,17 +5,14 @@ import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate';
 import { DirectSecp256k1HdWallet } from '@cosmjs/proto-signing';
 import { Coin, GasPrice } from '@cosmjs/stargate';
 import Button from '@mui/material/Button';
-import Input from '@mui/material/Input';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
 import { TableBody, TableCell, TableHead, TableRow, TextField, Typography } from '@mui/material';
-import Divider from '@mui/material/Divider';
 import Table from '@mui/material/Table';
-import LoadingButton from '@mui/lab/LoadingButton';
-import SaveIcon from '@mui/icons-material/Save';
 import { settings } from './client';
 
 const signerAccount = async (mnemonic) => {
+  // create a wallet to sign transactions with the mnemonic
   const signer = await DirectSecp256k1HdWallet.fromMnemonic(mnemonic, {
     prefix: 'n',
   });
@@ -23,9 +20,10 @@ const signerAccount = async (mnemonic) => {
   return signer;
 };
 
-const fetchSignerCosmosWasmClient = async (mnemonic) => {
+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'),
   });
@@ -36,6 +34,8 @@ const fetchSignerCosmosWasmClient = async (mnemonic) => {
 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'),
   });
@@ -75,6 +75,7 @@ export const Wallet = () => {
   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);
@@ -229,11 +230,20 @@ export const Wallet = () => {
     }
   }, [signerClient, getDelegations, delegations]);
 
+  useEffect(() => {
+    if (accountLoading || clientLoading || balanceLoading) {
+      setConnectButtonText('Loading...');
+    } else if (balance) {
+      setConnectButtonText('Connected');
+    }
+    setConnectButtonText('Connect');
+  }, [accountLoading, clientLoading, balanceLoading]);
+
   return (
     <Box padding={3}>
       <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
         <Typography variant="h5" textAlign="center">
-          Basic Wallet
+          Connect to your account
         </Typography>
         <Box padding={3}>
           <Typography variant="h6">Your account</Typography>
@@ -255,7 +265,7 @@ export const Wallet = () => {
               onClick={() => connect()}
               disabled={!mnemonic || accountLoading || clientLoading || balanceLoading}
             >
-              {accountLoading || clientLoading ? 'Loading...' : !balanceLoading ? 'Connect' : 'Connected'}
+              {connectButtonText}
             </Button>
           </Box>
           {account && balance ? (
@@ -267,11 +277,12 @@ export const Wallet = () => {
             </Box>
           ) : (
             <Box>
-              <Typography variant="body1">Please, enter your nemonic to receive your account info</Typography>
+              <Typography variant="body1">Please, enter your mnemonic to receive your account information</Typography>
             </Box>
           )}
         </Box>
-        <Divider />
+      </Paper>
+      <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
         <Box padding={3}>
           <Typography variant="h6">Send Tokens</Typography>
           <Box marginTop={3} display="flex" flexDirection="column">
@@ -294,7 +305,8 @@ export const Wallet = () => {
             </Box>
           </Box>
         </Box>
-        <Divider />
+      </Paper>
+      <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
         <Box padding={3}>
           <Typography variant="h6">Delegations</Typography>
           <Box marginY={3}>
@@ -380,5 +392,4 @@ export const Wallet = () => {
     </Box>
   );
 };
-
-```
+```

sdk/typescript/docs/components/wallet.tsx

@@ -7,7 +7,6 @@ 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 Divider from '@mui/material/Divider';
 import Table from '@mui/material/Table';
 import { settings } from './client';
 
@@ -243,7 +242,7 @@ export const Wallet = () => {
     <Box padding={3}>
       <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
         <Typography variant="h5" textAlign="center">
-          Basic Wallet
+          Connect to your account
         </Typography>
         <Box padding={3}>
           <Typography variant="h6">Your account</Typography>
@@ -281,7 +280,8 @@ export const Wallet = () => {
             </Box>
           )}
         </Box>
-        <Divider />
+      </Paper>
+      <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
         <Box padding={3}>
           <Typography variant="h6">Send Tokens</Typography>
           <Box marginTop={3} display="flex" flexDirection="column">
@@ -304,7 +304,8 @@ export const Wallet = () => {
             </Box>
           </Box>
         </Box>
-        <Divider />
+      </Paper>
+      <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
         <Box padding={3}>
           <Typography variant="h6">Delegations</Typography>
           <Box marginY={3}>

sdk/typescript/docs/pages/playground/wallet.mdx

@@ -1,11 +1,11 @@
 # Wallet
 
-import { Wallet } from '../../components/wallet'
+import { Wallet } from '../../components/wallet';
 import Box from '@mui/material/Box';
 import FormattedWalletExampleCode from '../../code-examples/wallet-example-code.mdx';
 
-Here's a small wallet example for you to test out! 
+Here's a small wallet example for you to test out!
 
 
-<Wallet />
+<Wallet/>
 <FormattedWalletExampleCode />