diff --git a/sdk/typescript/docs/components/context/wallet.tsx b/sdk/typescript/docs/components/context/wallet.tsx index 1cb057fba1..c74471e075 100644 --- a/sdk/typescript/docs/components/context/wallet.tsx +++ b/sdk/typescript/docs/components/context/wallet.tsx @@ -61,24 +61,20 @@ interface ApiState { */ interface WalletState { - cosmWasmSigner?: { getAccounts: () => void }; - cosmWasmSignerClient?: { - getBalance: (account: string, denom: string) => Coin; - sendTokens: (account: string, recipientAddress: string, amount: [Coin], type: 'auto', memo: string) => void; - }; - nymWasmSignerClient?: ApiState; accountLoading: boolean; account: string; clientsAreLoading: boolean; - setConnectWithMnemonic?: (value: string) => void; - connect?: () => void; + connect?: (mnemonic: string) => void; balance?: Coin; balanceLoading: boolean; setRecipientAddress?: (value: string) => void; setTokensToSend?: (value: string) => void; sendingTokensLoading: boolean; log: React.ReactNode[]; - doSendTokens?: () => void; + sendTokens?: (recipientAddress: string, tokensToSend: string) => void; + delegations?: any; + unDelegateAll?: () => void; + unDelegateAllLoading?: boolean; } export const WalletContext = React.createContext({ @@ -93,28 +89,36 @@ export const WalletContext = React.createContext({ export const useWalletContext = (): React.ContextType => React.useContext(WalletContext); +let cosmWasmSignerClient; +let nymWasmSignerClient; +let account; + export const WalletContextProvider = ({ children }: { children: JSX.Element }) => { - // wallet mnemonic - const [connectWithMnemonic, setConnectWithMnemonic] = React.useState(); const [accountLoading, setAccountLoading] = React.useState(false); - const [account, setAccount] = React.useState(null); + const [delegations, setDelegations] = React.useState(); const [clientsAreLoading, setClientsAreLoading] = React.useState(false); - const [cosmWasmSignerClient, setCosmWasmSignerClient] = React.useState(null); - const [nymWasmSignerClient, setNymWasmSignerClient] = React.useState(null); const [balance, setBalance] = React.useState(null); const [balanceLoading, setBalanceLoading] = React.useState(false); - const [recipientAddress, setRecipientAddress] = React.useState(); - const [tokensToSend, setTokensToSend] = React.useState(); const [sendingTokensLoading, setSendingTokensLoading] = React.useState(false); const [log, setLog] = React.useState([]); + const [unDelegateAllLoading, setUnDelegateAllLoading] = React.useState(false); - const getSignerAccount = async () => { + const Reset = () => { + setAccountLoading(false); + setClientsAreLoading(false); + setBalance(null); + setBalanceLoading(false); + setSendingTokensLoading(false); + setLog([]); + }; + + const getSignerAccount = async (mnemonic: string) => { setAccountLoading(true); try { - const signer = await signerAccount(connectWithMnemonic); + const signer = await signerAccount(mnemonic); const accounts = await signer.getAccounts(); if (accounts[0]) { - setAccount(accounts[0].address); + account = accounts[0].address; } } catch (error) { console.error(error); @@ -122,17 +126,22 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) = setAccountLoading(false); }; - const getClients = async () => { + const getClients = async (mnemonic: string) => { setClientsAreLoading(true); try { - setCosmWasmSignerClient(await fetchSignerCosmosWasmClient(connectWithMnemonic)); - setNymWasmSignerClient(await fetchSignerClient(connectWithMnemonic)); + cosmWasmSignerClient = await fetchSignerCosmosWasmClient(mnemonic); + nymWasmSignerClient = await fetchSignerClient(mnemonic); } catch (error) { console.error(error); } setClientsAreLoading(false); }; + const connect = React.useCallback(async (mnemonic: string) => { + getSignerAccount(mnemonic); + getClients(mnemonic); + }, []); + const getBalance = React.useCallback(async () => { setBalanceLoading(true); try { @@ -144,40 +153,63 @@ 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); - console.log('cosmWasmSignerClient', cosmWasmSignerClient, account, recipientAddress); + const getDelegations = React.useCallback(async () => { + const delegations = await nymWasmSignerClient.getDelegatorDelegations({ + delegator: settings.address, + }); + console.log('delegations', delegations); + setDelegations(delegations); + }, [nymWasmSignerClient]); + + const sendTokens = React.useCallback( + async (recipientAddress: string, tokensToSend: string) => { + const memo = 'test sending tokens'; + setSendingTokensLoading(true); + try { + const res = await cosmWasmSignerClient.sendTokens( + account, + recipientAddress, + [{ amount: tokensToSend, denom: 'unym' }], + 'auto', + memo, + ); + setLog((prev) => [ + ...prev, +
+ {new Date().toLocaleTimeString()} + 
{JSON.stringify(res, null, 2)}
+
, + ]); + } catch (error) { + console.error(error); + } + setSendingTokensLoading(false); + }, + [account, cosmWasmSignerClient], + ); + + const undelegateAll = async () => { + if (!nymWasmSignerClient) { + return; + } + setUnDelegateAllLoading(true); try { - const res = await cosmWasmSignerClient.sendTokens( - account, - recipientAddress, - [{ amount: tokensToSend, denom: 'unym' }], - 'auto', - memo, - ); - setLog((prev) => [ - ...prev, -
- {new Date().toLocaleTimeString()} - 
{JSON.stringify(res, null, 2)}
-
, - ]); + // 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); } - setSendingTokensLoading(false); - }, [account, cosmWasmSignerClient]); - // End send tokens - - + setUnDelegateAllLoading(false); + }; React.useEffect(() => { - if (connectWithMnemonic) { - Promise.all([getSignerAccount(), getClients()]); - } - }, [connectWithMnemonic]); + return () => { + Reset(); + }; + }, []); React.useEffect(() => { if (cosmWasmSignerClient) { @@ -185,36 +217,40 @@ export const WalletContextProvider = ({ children }: { children: JSX.Element }) = } }, [cosmWasmSignerClient]); + React.useEffect(() => { + if (nymWasmSignerClient) { + getDelegations(); + } + }, [nymWasmSignerClient]); + const state = React.useMemo( () => ({ accountLoading, account, clientsAreLoading, - cosmWasmSignerClient, - nymWasmSignerClient, - setConnectWithMnemonic, + connect, balance, balanceLoading, - setRecipientAddress, - setTokensToSend, sendingTokensLoading, log, - doSendTokens, + sendTokens, + delegations, + undelegateAll, + unDelegateAllLoading, }), [ accountLoading, account, clientsAreLoading, - cosmWasmSignerClient, - nymWasmSignerClient, - setConnectWithMnemonic, + connect, balance, balanceLoading, - setRecipientAddress, - setTokensToSend, sendingTokensLoading, log, - doSendTokens, + sendTokens, + delegations, + undelegateAll, + unDelegateAllLoading, ], ); diff --git a/sdk/typescript/docs/components/wallet.tsx b/sdk/typescript/docs/components/wallet.tsx index 88b509de77..0fe3986a4b 100644 --- a/sdk/typescript/docs/components/wallet.tsx +++ b/sdk/typescript/docs/components/wallet.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect, useState, createContext } from 'react'; +import React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import { ConnectWallet } from './wallet/connect'; @@ -6,16 +6,24 @@ import { SendTokes } from './wallet/sendTokens'; import { Delegations } from './wallet/delegations'; import { WalletContextProvider } from './context/wallet'; -export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations' }) => ( - +export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations' }) => { + return ( - {type === 'connect' && } - {type === 'sendTokens' && } - {/* {type === 'delegations' && ( - + {type === 'connect' && ( + + + + )} + {type === 'sendTokens' && ( + + + + )} + {type === 'delegations' && ( + - - )} */} + + )} {/* {log.length > 0 && ( Transaction Logs: @@ -23,5 +31,5 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations )} */} - -); + ); +}; diff --git a/sdk/typescript/docs/components/wallet/connect.tsx b/sdk/typescript/docs/components/wallet/connect.tsx index a7a6b60368..5c86a9a572 100644 --- a/sdk/typescript/docs/components/wallet/connect.tsx +++ b/sdk/typescript/docs/components/wallet/connect.tsx @@ -7,8 +7,7 @@ import TextField from '@mui/material/TextField'; import { useWalletContext } from '../context/wallet'; export const ConnectWallet = () => { - const { balance, balanceLoading, accountLoading, setConnectWithMnemonic, account, clientsAreLoading } = - useWalletContext(); + const { connect, balance, balanceLoading, accountLoading, account, clientsAreLoading } = useWalletContext(); const [mnemonic, setMnemonic] = useState(); const [connectButtonText, setConnectButtonText] = useState('Connect'); @@ -44,7 +43,7 @@ export const ConnectWallet = () => { /> - // - // - // - // - // Your delegations - // - // {!delegations?.delegations?.length ? ( - // You do not have delegations - // ) : ( - // - // - // - // - // MixId - // Owner - // Amount - // Cumulative Reward Ratio - // - // - // - // {delegations?.delegations.map((delegation: any) => ( - // - // {delegation.mix_id} - // {delegation.owner} - // {delegation.amount.amount} - // {delegation.cumulative_reward_ratio} - // - // ))} - // - //
- // - // )} - // - // {delegations && ( - // - // - // - // )} - // - // - // - // - // - // - // ); + useEffect(() => { + console.log('delegations', delegations); + },[delegations]); return ( - Hello - ) + + + Delegations + + + + Make a delegation + + setDelegationNodeId(e.target.value)} + size="small" + /> + + setAmountToBeDelegated(e.target.value)} + size="small" + /> + {/* */} + + + + + Your delegations + + {!delegations?.delegations?.length ? ( + You do not have delegations + ) : ( + + + + + MixId + Owner + Amount + Cumulative Reward Ratio + + + + {delegations?.delegations.map((delegation: any) => ( + + {delegation.mix_id} + {delegation.owner} + {delegation.amount.amount} + {delegation.cumulative_reward_ratio} + + ))} + +
+ + )} + + {delegations && ( + + + + )} + + {/* */} + + + + + ); }; diff --git a/sdk/typescript/docs/components/wallet/methods.ts b/sdk/typescript/docs/components/wallet/methods.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/sdk/typescript/docs/components/wallet/sendTokens.tsx b/sdk/typescript/docs/components/wallet/sendTokens.tsx index eb22032b5d..8a1ee6bbc6 100644 --- a/sdk/typescript/docs/components/wallet/sendTokens.tsx +++ b/sdk/typescript/docs/components/wallet/sendTokens.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react'; +import React from 'react'; import Button from '@mui/material/Button'; import Paper from '@mui/material/Paper'; import Box from '@mui/material/Box'; @@ -7,7 +7,10 @@ import TextField from '@mui/material/TextField'; import { useWalletContext } from '../context/wallet'; export const SendTokes = () => { - const { setRecipientAddress, setTokensToSend, sendingTokensLoading, doSendTokens, log } = useWalletContext(); + const { sendingTokensLoading, sendTokens, log } = useWalletContext(); + + const [recipientAddress, setRecipientAddress] = React.useState(); + const [tokensToSend, setTokensToSend] = React.useState(); return ( @@ -28,7 +31,11 @@ export const SendTokes = () => { onChange={(e) => setTokensToSend(e.target.value)} size="small" /> -