From 938e5ba19ca2ca8fa1a4d1e75e9bcbb07c55157e Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 4 Oct 2023 17:46:00 +0200 Subject: [PATCH] refactor --- .../code-examples/wallet-connect-code.mdx | 188 ++++++++++++------ .../code-examples/wallet-delegations-code.mdx | 93 ++++++++- .../code-examples/wallet-sendTokens-code.mdx | 35 +++- sdk/typescript/docs/components/wallet.tsx | 18 +- .../docs/components/wallet/delegations.tsx | 17 +- .../docs/components/wallet/sendTokens.tsx | 10 +- 6 files changed, 254 insertions(+), 107 deletions(-) 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 ( - - - Connect to your account - - - Your account - - - Enter the mnemonic - - setMnemonic(e.target.value)} - fullWidth - multiline - maxRows={4} - sx={{ marginBottom: 3 }} - /> - - - {account && balance ? ( - - Address: {account} - - Balance: {balance?.amount} {balance?.denom} - - - ) : ( - - Please, enter your mnemonic to receive your account information - - )} + 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 ( + + + Connect to your account + + + Your account + + + Enter the mnemonic + + setMnemonic(e.target.value)} + fullWidth + multiline + maxRows={4} + sx={{ marginBottom: 3 }} + /> + - - ); - }; -``` \ No newline at end of file + {account && balance ? ( + + Address: {account} + + Balance: {balance?.amount} {balance?.denom} + + + ) : ( + + Please, enter your mnemonic to receive your account information + + )} + + + ); +}; +``` 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, +
+ {new Date().toLocaleTimeString()} + 
{JSON.stringify(res, null, 2)}
+
, + ]); + } 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, +
+ {new Date().toLocaleTimeString()} + 
{JSON.stringify(res, null, 2)}
+
, + ]); + } 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(); + const [amountToBeDelegated, setAmountToBeDelegated] = useState(); + return ( 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, +
+ {new Date().toLocaleTimeString()} + 
{JSON.stringify(res, null, 2)}
+
, + ]); + } 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(); + return ( @@ -35,7 +60,7 @@ export const SendTokes = ({ onChange={(e) => setTokensToSend(e.target.value)} size="small" /> - 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(); const [balanceLoading, setBalanceLoading] = useState(false); const [log, setLog] = useState([]); - const [tokensToSend, setTokensToSend] = useState(); const [sendingTokensLoader, setSendingTokensLoader] = useState(false); const [delegations, setDelegations] = useState(); const [recipientAddress, setRecipientAddress] = useState(''); - const [delegationNodeId, setDelegationNodeId] = useState(); - const [amountToBeDelegated, setAmountToBeDelegated] = useState(); const [delegationLoader, setDelegationLoader] = useState(false); const [undeledationLoader, setUndeledationLoader] = useState(false); const [withdrawLoading, setWithdrawLoading] = useState(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' && ( @@ -264,10 +264,6 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations {type === 'delegations' && ( 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(); + const [amountToBeDelegated, setAmountToBeDelegated] = useState(); + return ( 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(); + return ( @@ -34,7 +34,7 @@ export const SendTokes = ({ onChange={(e) => setTokensToSend(e.target.value)} size="small" /> -