mnemonic dialog styles
This commit is contained in:
parent
e0632d1a50
commit
afd09dc4c1
18
prettier.config.js
Normal file
18
prettier.config.js
Normal file
@ -0,0 +1,18 @@
|
||||
const config = {
|
||||
arrowParens: "always",
|
||||
printWidth: 80,
|
||||
semi: false,
|
||||
singleQuote: true,
|
||||
tabWidth: 2,
|
||||
trailingComma: "es5",
|
||||
importOrderSeparation: true,
|
||||
importOrderSortSpecifiers: true,
|
||||
plugins: ["@trivago/prettier-plugin-sort-imports"],
|
||||
importOrder: [
|
||||
"<THIRD_PARTY_MODULES>",
|
||||
"^(pages|components|utils|icons|test|graphql)/(.*)$",
|
||||
"^[./]",
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
@ -7,7 +7,7 @@ import { GridViewProps } from '../types';
|
||||
|
||||
const GridView = ({ words }: GridViewProps) => {
|
||||
return (
|
||||
<View style={styles.gridContainer}>
|
||||
<View style={styles.mnemonicGridContainer}>
|
||||
{words.map((word, index) => (
|
||||
<View key={index} style={styles.gridItem}>
|
||||
<Text>{index + 1}. </Text>
|
||||
|
@ -1,32 +1,48 @@
|
||||
import React from 'react';
|
||||
import { Dialog, DialogActions, DialogContent, DialogTitle, Button, Typography } from '@mui/material';
|
||||
import React from "react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Button,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
|
||||
import styles from '../styles/stylesheet';
|
||||
import GridView from './Grid';
|
||||
import { CustomDialogProps } from '../types';
|
||||
import styles from "../styles/stylesheet";
|
||||
import GridView from "./Grid";
|
||||
import { CustomDialogProps } from "../types";
|
||||
|
||||
const MnemonicDialog = ({ visible, hideDialog, contentText }: CustomDialogProps) => {
|
||||
const words = contentText.split(' ');
|
||||
const MnemonicDialog = ({
|
||||
visible,
|
||||
hideDialog,
|
||||
contentText,
|
||||
}: CustomDialogProps) => {
|
||||
const words = contentText.split(" ");
|
||||
|
||||
const copyMnemonic = () => {
|
||||
navigator.clipboard.writeText(contentText)
|
||||
navigator.clipboard.writeText(contentText);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={visible} onClose={hideDialog}>
|
||||
<DialogTitle>Mnemonic</DialogTitle>
|
||||
<DialogContent>
|
||||
<Typography variant="h6" component="div" style={{ color: 'rgba(0, 0, 0, 0.87)' }}>
|
||||
Your mnemonic provides full access to your wallet and funds. Make sure to note it down.
|
||||
<DialogTitle style={{ ...styles.mnemonicTitle }}>Mnemonic</DialogTitle>
|
||||
<DialogContent style={{ ...styles.mnemonicContainer }}>
|
||||
<Typography component="div">
|
||||
Your mnemonic provides full access to your wallet and funds. <br />
|
||||
Make sure to note it down.
|
||||
</Typography>
|
||||
<Typography variant="h6" component="div" style={{ ...styles.dialogWarning }}>
|
||||
<Typography component="div" style={{ ...styles.mnomonicDialogWarning }}>
|
||||
Do not share your mnemonic with anyone
|
||||
</Typography>
|
||||
<GridView words={words} />
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={copyMnemonic}>Copy</Button>
|
||||
<Button onClick={hideDialog}>Cancel</Button>
|
||||
<DialogActions style={{ ...styles.mnemonicButtonRow }}>
|
||||
<Button style={{ ...styles.mnemonicButton }} onClick={copyMnemonic}>
|
||||
Copy
|
||||
</Button>
|
||||
<Button style={{ ...styles.mnemonicButton }} onClick={hideDialog}>
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
|
@ -75,7 +75,36 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 10,
|
||||
},
|
||||
dialogWarning: {
|
||||
color: 'red',
|
||||
color: '#FFA3A8',
|
||||
},
|
||||
mnemonicTitle:{
|
||||
backgroundColor: '#18181A',
|
||||
},
|
||||
mnemonicContainer:{
|
||||
backgroundColor: '#18181A',
|
||||
},
|
||||
mnomonicDialogWarning: {
|
||||
color: '#FFA3A8',
|
||||
marginTop: 10
|
||||
},
|
||||
mnemonicButtonRow: {
|
||||
paddingRight: 40,
|
||||
backgroundColor: '#18181A'
|
||||
},
|
||||
mnemonicButton:{
|
||||
backgroundColor: '#0000F4',
|
||||
color: 'white',
|
||||
padding: 2,
|
||||
marginBottom: 20
|
||||
},
|
||||
mnemonicGridContainer: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
justifyContent: 'center',
|
||||
marginTop: 20,
|
||||
paddingBottom: 30,
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#29292E'
|
||||
},
|
||||
gridContainer: {
|
||||
flexDirection: 'row',
|
||||
@ -83,14 +112,13 @@ const styles = StyleSheet.create({
|
||||
justifyContent: 'center',
|
||||
},
|
||||
gridItem: {
|
||||
width: '25%',
|
||||
margin: 8,
|
||||
padding: 6,
|
||||
borderWidth: 1,
|
||||
borderColor: '#ccc',
|
||||
borderRadius: 8,
|
||||
width: '30%',
|
||||
margin: 4,
|
||||
padding: 4,
|
||||
borderRadius: 4,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
backgroundColor: '#29292E'
|
||||
},
|
||||
HDcontainer: {
|
||||
marginTop: 24,
|
||||
|
Loading…
Reference in New Issue
Block a user