deep-stack/laconic-wallet-web
3
0
Fork 0
forked from cerc-io/laconic-wallet-web
Code Pull Requests Activity

style: import wallet dialog

Browse Source
This commit is contained in:
Cody Bender 2024-08-09 16:10:15 -04:00
parent ec3617ad42
commit e05ce4659e
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ImportWalletDialog.tsx
View File

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