style: import wallet dialog

This commit is contained in:
Cody Bender 2024-08-09 16:10:15 -04:00
parent ec3617ad42
commit e05ce4659e

View File

@ -1,17 +1,26 @@
import React, { useEffect, useState } from 'react';
import { Dialog, DialogActions, DialogContent, DialogTitle, TextField, Grid, Button, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import styles from "../styles/stylesheet";
import {
Dialog,
DialogActions,
DialogContent,
DialogTitle,
TextField,
Grid,
Button,
Typography,
} from "@mui/material";
const ImportWalletDialog = ({
visible,
hideDialog,
importWalletHandler
importWalletHandler,
}: {
visible: boolean;
hideDialog: () => void;
importWalletHandler: (recoveryPhrase: string) => Promise<void>;
}) => {
const [words, setWords] = useState(Array(12).fill(''));
const [words, setWords] = useState(Array(12).fill(""));
const handleWordChange = (index: number, value: string) => {
const newWords = [...words];
@ -20,7 +29,7 @@ const ImportWalletDialog = ({
};
const handlePaste = (event: React.ClipboardEvent<HTMLDivElement>) => {
const pastedText = event.clipboardData.getData('Text');
const pastedText = event.clipboardData.getData("Text");
const splitWords = pastedText.trim().split(/\s+/);
if (splitWords.length === 12) {
@ -30,14 +39,16 @@ const ImportWalletDialog = ({
};
useEffect(() => {
setWords(Array(12).fill(''));
},[visible]);
setWords(Array(12).fill(""));
}, [visible]);
return (
<Dialog open={visible} onClose={hideDialog}>
<DialogTitle>Import your wallet from your mnemonic</DialogTitle>
<DialogContent>
<Typography>
<DialogTitle style={styles.mnemonicTitle}>
Import your wallet from your mnemonic
</DialogTitle>
<DialogContent style={styles.mnemonicContainer}>
<Typography component="div">
(You can paste your entire mnemonic into the first textbox)
</Typography>
<Grid container spacing={2}>
@ -55,9 +66,16 @@ const ImportWalletDialog = ({
))}
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => importWalletHandler(words.join(' '))}>Import Wallet</Button>
<Button onClick={hideDialog}>Cancel</Button>
<DialogActions style={styles.mnemonicButtonRow}>
<Button
onClick={() => importWalletHandler(words.join(" "))}
style={styles.mnemonicButton}
>
Import Wallet
</Button>
<Button onClick={hideDialog} style={styles.mnemonicButton}>
Cancel
</Button>
</DialogActions>
</Dialog>
);