started new docs draft

2024-08-26 11:53:21 +02:00
parent 8c4f2fde78
commit 74c3dbe169
75 changed files with 4385 additions and 0 deletions
@@ -0,0 +1,133 @@
+```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';
+
+// 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>
+        )}
+      </Box>
+    </Paper>
+  );
+};
+```