now give to each section it's own code example

nymtech · Oct 4, 2023 · d6fd920 · d6fd920
1 parent 448f52c
commit d6fd920
Show file tree

Hide file tree

Showing 10 changed files with 530 additions and 550 deletions.
diff --git a/sdk/typescript/docs/code-examples/wallet-connect-code.mdx b/sdk/typescript/docs/code-examples/wallet-connect-code.mdx
@@ -0,0 +1,75 @@
+```ts copy filename="FormattedWalletConnectCode.tsx"
+import React  from 'react';
+import { Coin } from '@cosmjs/stargate';
+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';
+
+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>
+          )}
+        </Box>
+      </Paper>
+    );
+  };
+```
diff --git a/sdk/typescript/docs/code-examples/wallet-delegations-code.mdx b/sdk/typescript/docs/code-examples/wallet-delegations-code.mdx
@@ -0,0 +1,116 @@
+```ts copy filename="FormattedWalletDelegationsCode.tsx"
+import React 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,
+  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;
+  doWithdrawRewards: () => void;
+  withdrawLoading: boolean;
+}) => {
+  return (
+    <Paper style={{ marginTop: '1rem', padding: '1rem' }}>
+      <Box padding={3}>
+        <Typography variant="h6">Delegations</Typography>
+        <Box marginY={3}>
+          <Box marginY={3} display="flex" flexDirection="column">
+            <Typography marginBottom={3} variant="body1">
+              Make a delegation
+            </Typography>
+            <TextField
+              type="text"
+              placeholder="Mixnode ID"
+              onChange={(e) => setDelegationNodeId(e.target.value)}
+              size="small"
+            />
+            <Box marginTop={3} display="flex" justifyContent="space-between">
+              <TextField
+                type="text"
+                placeholder="Amount"
+                onChange={(e) => setAmountToBeDelegated(e.target.value)}
+                size="small"
+              />
+              <Button
+                variant="outlined"
+                onClick={() =>
+                  doDelegate({ mixId: parseInt(delegationNodeId, 10), amount: parseInt(amountToBeDelegated, 10) })
+                }
+                disabled={delegationLoader}
+              >
+                {delegationLoader ? 'Delegation in process...' : 'Delegate'}
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+        <Box marginTop={3}>
+          <Typography variant="body1">Your delegations</Typography>
+          <Box marginBottom={3} display="flex" flexDirection="column">
+            {!delegations?.delegations?.length ? (
+              <Typography>You do not have delegations</Typography>
+            ) : (
+              <Box>
+                <Table size="small">
+                  <TableHead>
+                    <TableRow>
+                      <TableCell>MixId</TableCell>
+                      <TableCell>Owner</TableCell>
+                      <TableCell>Amount</TableCell>
+                      <TableCell>Cumulative Reward Ratio</TableCell>
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {delegations?.delegations.map((delegation: any) => (
+                      <TableRow key={delegation.mix_id}>
+                        <TableCell>{delegation.mix_id}</TableCell>
+                        <TableCell>{delegation.owner}</TableCell>
+                        <TableCell>{delegation.amount.amount}</TableCell>
+                        <TableCell>{delegation.cumulative_reward_ratio}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </Box>
+            )}
+          </Box>
+          {delegations && (
+            <Box marginBottom={3}>
+              <Button variant="outlined" onClick={() => doUndelegateAll()} disabled={undeledationLoader}>
+                {undeledationLoader ? 'Undelegating...' : 'Undelegate All'}
+              </Button>
+            </Box>
+          )}
+          <Box>
+            <Button variant="outlined" onClick={() => doWithdrawRewards()} disabled={withdrawLoading}>
+              {withdrawLoading ? 'Doing withdraw...' : 'Withdraw rewards'}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Paper>
+  );
+};
+
+```