wip

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

@@ -62,7 +62,10 @@ interface ApiState<RESPONSE> {
 
 interface WalletState {
   cosmWasmSigner?: { getAccounts: () => void };
-  cosmWasmSignerClient?: { getBalance: (account: string, denom: string) => Coin };
+  cosmWasmSignerClient?: {
+    getBalance: (account: string, denom: string) => Coin;
+    sendTokens: (account: string, recipientAddress: string, amount: [Coin], type: 'auto', memo: string) => void;
+  };
   nymWasmSignerClient?: ApiState<any>;
   accountLoading: boolean;
   account: string;
@@ -70,6 +73,11 @@ interface WalletState {
   setConnectWithMnemonic?: (value: string) => void;
   balance?: Coin;
   balanceLoading: boolean;
+  setRecipientAddress?: (value: string) => void;
+  setTokensToSend?: (value: string) => void;
+  sendingTokensLoading: boolean;
+  log: React.ReactNode[];
+  doSendTokens?: () => void;
 }
 
 export const WalletContext = React.createContext<WalletState>({
@@ -77,6 +85,8 @@ export const WalletContext = React.createContext<WalletState>({
   account: '',
   clientsAreLoading: false,
   balanceLoading: false,
+  sendingTokensLoading: false,
+  log: [],
 });
 
 export const useWalletContext = (): React.ContextType<typeof WalletContext> =>
@@ -92,9 +102,12 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
   const [nymWasmSignerClient, setNymWasmSignerClient] = React.useState<any>();
   const [balance, setBalance] = React.useState<Coin>();
   const [balanceLoading, setBalanceLoading] = React.useState<boolean>(false);
+  const [recipientAddress, setRecipientAddress] = React.useState<string>('');
+  const [tokensToSend, setTokensToSend] = React.useState<string>();
+  const [sendingTokensLoading, setSendingTokensLoading] = React.useState<boolean>(false);
+  const [log, setLog] = React.useState<React.ReactNode[]>([]);
 
   const getSignerAccount = async () => {
-    console.log('getSignerAccount');
     setAccountLoading(true);
     try {
       const signer = await signerAccount(connectWithMnemonic);
@@ -110,6 +123,7 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
   const getClients = async () => {
     setClientsAreLoading(true);
     try {
+      console.log('setCosmWasmSignerClient');
       setCosmWasmSignerClient(await fetchSignerCosmosWasmClient(connectWithMnemonic));
       setNymWasmSignerClient(await fetchSignerClient(connectWithMnemonic));
     } catch (error) {
@@ -129,6 +143,33 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
     setBalanceLoading(false);
   }, [account, cosmWasmSignerClient]);
 
+  // Sending tokens
+  const doSendTokens = React.useCallback(async () => {
+    const memo = 'test sending tokens';
+    setSendingTokensLoading(true);
+    try {
+      console.log('cosmWasmSignerClient', cosmWasmSignerClient, account, recipientAddress);
+      const res = await cosmWasmSignerClient.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);
+    }
+    setSendingTokensLoading(false);
+  }, [account, cosmWasmSignerClient]);
+  // End send tokens
+
   React.useEffect(() => {
     if (connectWithMnemonic) {
       // when the mnemonic changes, remove all previous data
@@ -136,6 +177,15 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
     }
   }, [connectWithMnemonic]);
 
+  React.useEffect(() => {
+    console.log('cosmWasmSignerClient', cosmWasmSignerClient);
+  }, [cosmWasmSignerClient]);
+
+  React.useEffect(() => {
+console.log('tokensToSend', tokensToSend);
+
+  },[tokensToSend])
+
   React.useEffect(() => {
     if (account && cosmWasmSignerClient) {
       if (!balance) {
@@ -154,6 +204,11 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
       setConnectWithMnemonic,
       balance,
       balanceLoading,
+      setRecipientAddress,
+      setTokensToSend,
+      sendingTokensLoading,
+      log,
+      doSendTokens,
     }),
     [
       accountLoading,
@@ -164,6 +219,11 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) =
       setConnectWithMnemonic,
       balance,
       balanceLoading,
+      setRecipientAddress,
+      setTokensToSend,
+      sendingTokensLoading,
+      log,
+      doSendTokens,
     ],
   );
 

sdk/typescript/docs/components/wallet.tsx

@@ -1,45 +1,27 @@
 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';
 
-
-export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations' }) => {
-  const [signerCosmosWasmClient, setSignerCosmosWasmClient] = useState<any>();
-  const [signerClient, setSignerClient] = useState<any>();
-  const [account, setAccount] = useState<string>();
-  return (
-    <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' && (
+export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations' }) => (
+  <WalletContextProvider>
+    <Box padding={3}>
+      {type === 'connect' && <ConnectWallet />}
+      {type === 'sendTokens' && <SendTokes />}
+      {/* {type === 'delegations' && (
         <WalletContext.Provider value={WalletContext}>
           <Delegations />
         </WalletContext.Provider>
       )} */}
-        {/* {log.length > 0 && (
+      {/* {log.length > 0 && (
         <Box marginTop={3}>
           <Typography variant="h5">Transaction Logs:</Typography>
           {log}
         </Box>
       )} */}
-      </Box>
-    </WalletContextProvider>
-  );
-};
+    </Box>
+  </WalletContextProvider>
+);

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

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Coin } from '@cosmjs/stargate';
+import React, { useState, useEffect } from 'react';
 import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';

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

@@ -6,55 +6,8 @@ import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
 import { useWalletContext } from '../context/wallet';
 
-export const SendTokes = ({
-  // setRecipientAddress,
-  // signerCosmosWasmClient,
-  // account,
-  // recipientAddress,
-}: {
-  // 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]);
+export const SendTokes = () => {
+  const { setRecipientAddress, setTokensToSend, sendingTokensLoading, doSendTokens, log } = useWalletContext();
 
   return (
     <Box>
@@ -75,9 +28,9 @@ export const SendTokes = ({
                 onChange={(e) => setTokensToSend(e.target.value)}
                 size="small"
               />
-              {/* <Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoader}>
-                {sendingTokensLoader ? 'Sending...' : 'Send tokens'}
-              </Button> */}
+              <Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoading}>
+                {sendingTokensLoading ? 'Sending...' : 'Send tokens'}
+              </Button>
             </Box>
           </Box>
         </Box>