style: import wallet dialog
This commit is contained in:
parent
ec3617ad42
commit
e05ce4659e
@ -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(''));
|
||||
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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user