GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
Gala
2023-10-04 17:46:00 +02:00
committed by Lorexia
parent 962d43ba3f
commit 938e5ba19c
6 changed files with 254 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sdk/typescript/docs/code-examples/wallet-connect-code.mdx
+123 -65
View File
@@ -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 (
<Paper style={{ marginTop: '1rem', padding: '1rem' }}>
<Typography variant="h5" textAlign="center">
Connect to your account
</Typography>
<Box padding={3}>
<Typography variant="h6">Your account</Typography>
<Box marginY={3}>
<Typography variant="body1" marginBottom={3}>
Enter the mnemonic
</Typography>
<TextField
type="text"
placeholder="mnemonic"
onChange={(e) => setMnemonic(e.target.value)}
fullWidth
multiline
maxRows={4}
sx={{ marginBottom: 3 }}
/>
<Button
variant="outlined"
onClick={() => connect()}
disabled={!mnemonic || accountLoading || clientLoading || balanceLoading}
>
{connectButtonText}
</Button>
</Box>
{account && balance ? (
<Box>
<Typography variant="body1">Address: {account}</Typography>
<Typography variant="body1">
Balance: {balance?.amount} {balance?.denom}
</Typography>
</Box>
) : (
<Box>
<Typography variant="body1">Please, enter your mnemonic to receive your account information</Typography>
</Box>
)}
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 (
<Paper style={{ marginTop: '1rem', padding: '1rem' }}>
<Typography variant="h5" textAlign="center">
Connect to your account
</Typography>
<Box padding={3}>
<Typography variant="h6">Your account</Typography>
<Box marginY={3}>
<Typography variant="body1" marginBottom={3}>
Enter the mnemonic
</Typography>
<TextField
type="text"
placeholder="mnemonic"
onChange={(e) => setMnemonic(e.target.value)}
fullWidth
multiline
maxRows={4}
sx={{ marginBottom: 3 }}
/>
<Button
variant="outlined"
onClick={() => connect()}
disabled={!mnemonic || accountLoading || clientLoading || balanceLoading}
>
{connectButtonText}
</Button>
</Box>
</Paper>
);
};
```
{account && balance ? (
<Box>
<Typography variant="body1">Address: {account}</Typography>
<Typography variant="body1">
Balance: {balance?.amount} {balance?.denom}
</Typography>
</Box>
) : (
<Box>
<Typography variant="body1">Please, enter your mnemonic to receive your account information</Typography>
</Box>
)}
</Box>
</Paper>
);
};
```
sdk/typescript/docs/code-examples/wallet-delegations-code.mdx
+83 -10
View File
@@ -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,
<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);
}
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,
<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);
}
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<string>();
const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
return (
<Paper style={{ marginTop: '1rem', padding: '1rem' }}>
<Box padding={3}>
sdk/typescript/docs/code-examples/wallet-sendTokens-code.mdx
+30 -5
View File
@@ -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,
<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);
};
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<string>();
return (
<Paper style={{ marginTop: '1rem', padding: '1rem' }}>
<Box padding={3}>
@@ -35,7 +60,7 @@ export const SendTokes = ({
onChange={(e) => setTokensToSend(e.target.value)}
size="small"
/>
<Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoader}>
<Button variant="outlined" onClick={() => doSendTokens(amount)} disabled={sendingTokensLoader}>
{sendingTokensLoader ? 'Sending...' : 'SendTokens'}
</Button>
</Box>
sdk/typescript/docs/components/wallet.tsx
+7 -11
View File
@@ -65,12 +65,9 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
const [balance, setBalance] = useState<Coin>();
const [balanceLoading, setBalanceLoading] = useState<boolean>(false);
const [log, setLog] = useState<React.ReactNode[]>([]);
const [tokensToSend, setTokensToSend] = useState<string>();
const [sendingTokensLoader, setSendingTokensLoader] = useState<boolean>(false);
const [delegations, setDelegations] = useState<any>();
const [recipientAddress, setRecipientAddress] = useState<string>('');
const [delegationNodeId, setDelegationNodeId] = useState<string>();
const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
const [delegationLoader, setDelegationLoader] = useState<boolean>(false);
const [undeledationLoader, setUndeledationLoader] = useState<boolean>(false);
const [withdrawLoading, setWithdrawLoading] = useState<boolean>(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' && (
<SendTokes
setRecipientAddress={setRecipientAddress}
setTokensToSend={setTokensToSend}
doSendTokens={doSendTokens}
sendingTokensLoader={sendingTokensLoader}
/>
@@ -264,10 +264,6 @@ export const Wallet = ({ type }: { type: 'connect' | 'sendTokens' | 'delegations
{type === 'delegations' && (
<Delegations
delegations={delegations}
setDelegationNodeId={setDelegationNodeId}
setAmountToBeDelegated={setAmountToBeDelegated}
amountToBeDelegated={amountToBeDelegated}
delegationNodeId={delegationNodeId}
doDelegate={doDelegate}
delegationLoader={delegationLoader}
undeledationLoader={undeledationLoader}
sdk/typescript/docs/components/wallet/delegations.tsx
+6 -11
View File
@@ -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,29 +7,24 @@ 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<string>();
const [amountToBeDelegated, setAmountToBeDelegated] = useState<string>();
return (
<Paper style={{ marginTop: '1rem', padding: '1rem' }}>
<Box padding={3}>
sdk/typescript/docs/components/wallet/sendTokens.tsx
+5 -5
View File
@@ -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<string>();
return (
<Paper style={{ marginTop: '1rem', padding: '1rem' }}>
<Box padding={3}>
@@ -34,7 +34,7 @@ export const SendTokes = ({
onChange={(e) => setTokensToSend(e.target.value)}
size="small"
/>
<Button variant="outlined" onClick={() => doSendTokens()} disabled={sendingTokensLoader}>
<Button variant="outlined" onClick={() => doSendTokens(tokensToSend)} disabled={sendingTokensLoader}>
{sendingTokensLoader ? 'Sending...' : 'SendTokens'}
</Button>
</Box>