From 448f52c4ea4e2358bce53218fe3af2c6092a46b7 Mon Sep 17 00:00:00 2001 From: Gala Date: Wed, 4 Oct 2023 16:19:41 +0200 Subject: [PATCH] divide a the wallet in operations --- .../code-examples/wallet-example-code.mdx | 35 ++++++++++++------- sdk/typescript/docs/components/wallet.tsx | 9 ++--- .../docs/pages/playground/wallet.mdx | 6 ++-- 3 files changed, 31 insertions(+), 19 deletions(-) diff --git a/sdk/typescript/docs/code-examples/wallet-example-code.mdx b/sdk/typescript/docs/code-examples/wallet-example-code.mdx index c131b74282..d7722cadd4 100644 --- a/sdk/typescript/docs/code-examples/wallet-example-code.mdx +++ b/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(false); const [undeledationLoader, setUndeledationLoader] = useState(false); const [withdrawLoading, setWithdrawLoading] = useState(false); + const [connectButtonText, setConnectButtonText] = useState('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 ( - Basic Wallet + Connect to your account Your account @@ -255,7 +265,7 @@ export const Wallet = () => { onClick={() => connect()} disabled={!mnemonic || accountLoading || clientLoading || balanceLoading} > - {accountLoading || clientLoading ? 'Loading...' : !balanceLoading ? 'Connect' : 'Connected'} + {connectButtonText} {account && balance ? ( @@ -267,11 +277,12 @@ export const Wallet = () => { ) : ( - Please, enter your nemonic to receive your account info + Please, enter your mnemonic to receive your account information )} - + + Send Tokens @@ -294,7 +305,8 @@ export const Wallet = () => { - + + Delegations @@ -380,5 +392,4 @@ export const Wallet = () => { ); }; - -``` +``` \ No newline at end of file diff --git a/sdk/typescript/docs/components/wallet.tsx b/sdk/typescript/docs/components/wallet.tsx index b2f8664bed..1691d103dd 100644 --- a/sdk/typescript/docs/components/wallet.tsx +++ b/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 = () => { - Basic Wallet + Connect to your account Your account @@ -281,7 +280,8 @@ export const Wallet = () => { )} - + + Send Tokens @@ -304,7 +304,8 @@ export const Wallet = () => { - + + Delegations diff --git a/sdk/typescript/docs/pages/playground/wallet.mdx b/sdk/typescript/docs/pages/playground/wallet.mdx index 68af228851..7ceaa1c26d 100644 --- a/sdk/typescript/docs/pages/playground/wallet.mdx +++ b/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! - + \ No newline at end of file