diff --git a/__tests__/Seed.snapshot.tsx b/__tests__/Seed.snapshot.tsx
index 527da7612..4a60d3df7 100644
--- a/__tests__/Seed.snapshot.tsx
+++ b/__tests__/Seed.snapshot.tsx
@@ -44,12 +44,11 @@ describe('Component Seed - test', () => {
stateLoaded.info = mockInfo;
stateLoaded.totalBalance = mockTotalBalance;
const onOk = jest.fn();
- const onCancel = jest.fn();
let props = makeDrawerProps(SeedActionEnum.view);
test('Seed View - snapshot', () => {
const seed = render(
-
+
,
);
expect(seed.toJSON()).toMatchSnapshot();
@@ -58,7 +57,7 @@ describe('Component Seed - test', () => {
test('Seed Change - snapshot', () => {
const seed = render(
-
+
,
);
expect(seed.toJSON()).toMatchSnapshot();
@@ -67,7 +66,7 @@ describe('Component Seed - test', () => {
test('Seed Server - snapshot', () => {
const seed = render(
-
+
,
);
expect(seed.toJSON()).toMatchSnapshot();
@@ -76,7 +75,7 @@ describe('Component Seed - test', () => {
test('Seed Backup - snapshot', () => {
const seed = render(
-
+
,
);
expect(seed.toJSON()).toMatchSnapshot();
diff --git a/__tests__/__snapshots__/Seed.snapshot.tsx.snap b/__tests__/__snapshots__/Seed.snapshot.tsx.snap
index 986169e44..17f1b7c4b 100644
--- a/__tests__/__snapshots__/Seed.snapshot.tsx.snap
+++ b/__tests__/__snapshots__/Seed.snapshot.tsx.snap
@@ -156,7 +156,7 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
{
"alignItems": "center",
"flexGrow": 1,
- "justifyContent": "center",
+ "justifyContent": "flex-start",
}
}
>
@@ -176,15 +176,18 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
@@ -198,11 +201,9 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -232,9 +233,8 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="pepe"
@@ -250,11 +250,9 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -284,9 +282,8 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="lolo"
@@ -302,11 +299,9 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -336,9 +331,8 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="titi"
@@ -348,122 +342,220 @@ exports[`Component Seed - test Seed Backup - snapshot 1`] = `
+
+
- Copy
+ View seed phrase
+
+
+
+ Copy
+
+
+
@@ -729,15 +820,18 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
@@ -751,11 +845,9 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -785,9 +877,8 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="pepe"
@@ -803,11 +894,9 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -837,9 +926,8 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="lolo"
@@ -855,11 +943,9 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -889,9 +975,8 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="titi"
@@ -901,151 +986,248 @@ exports[`Component Seed - test Seed Change - snapshot 1`] = `
+
+
- Copy
+ View seed phrase
-
+
+ Copy
+
+
+
+
+
@@ -2006,7 +2188,7 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
{
"alignItems": "center",
"flexGrow": 1,
- "justifyContent": "center",
+ "justifyContent": "flex-start",
}
}
>
@@ -2026,15 +2208,18 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
@@ -2048,11 +2233,9 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -2082,9 +2265,8 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="pepe"
@@ -2100,11 +2282,9 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -2134,9 +2314,8 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="lolo"
@@ -2152,11 +2331,9 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -2186,9 +2363,8 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="titi"
@@ -2198,122 +2374,220 @@ exports[`Component Seed - test Seed Server - snapshot 1`] = `
+
+
- Copy
+ View seed phrase
+
+
+
+ Copy
+
+
+
@@ -2579,15 +2852,18 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
@@ -2601,11 +2877,9 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -2635,9 +2909,8 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="pepe"
@@ -2653,11 +2926,9 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -2687,9 +2958,8 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="lolo"
@@ -2705,11 +2975,9 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
"borderWidth": 1,
"flexDirection": "row",
"justifyContent": "flex-start",
- "marginBottom": 10,
- "maxWidth": 520,
- "minHeight": 48,
+ "marginBottom": 5,
"minWidth": "30%",
- "paddingHorizontal": 15,
+ "paddingHorizontal": 10,
"paddingVertical": 0,
"width": "30%",
}
@@ -2739,9 +3007,8 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
"flexGrow": 1,
"flexShrink": 1,
"fontSize": 15,
- "fontWeight": "600",
- "marginLeft": 5,
- "minHeight": 48,
+ "fontWeight": "400",
+ "lineHeight": 15,
}
}
value="titi"
@@ -2751,122 +3018,220 @@ exports[`Component Seed - test Seed View - snapshot 1`] = `
+
+
- Copy
+ View seed phrase
+
+
+
+ Copy
+
+
+
}
- {/*
- {props => }
- */}
-
{props => (
;
-type SeedProps = DrawerScreenProps & {
- onClickOK?: (seedPhrase: string, birthdayNumber: number) => void;
- onClickCancel?: () => void;
- keepAwake?: (v: boolean) => void;
- setIsSeedViewModalOpen?: (v: boolean) => void;
-};
const Seed: React.FunctionComponent = ({
- onClickCancel,
- keepAwake,
- setIsSeedViewModalOpen,
}) => {
const navigation: any = useNavigation();
const context = useContext(ContextAppLoaded);
@@ -55,11 +48,9 @@ const Seed: React.FunctionComponent = ({
const insets = useSafeAreaInsets();
- const maxW = 520; //tablets -> landscape.
-
const [expandSeed, setExpandSeed] = useState(true);
const [expandBirthday, setExpandBithday] = useState(true);
- const [, setBasicFirstViewSeed] = useState(true);
+ const [seedBlurred, setSeedBlurred] = useState(true);
const seedPhrase = wallet.seed || '';
const birthdayNumber = (wallet.birthday && wallet.birthday.toString()) || '';
@@ -79,20 +70,6 @@ const Seed: React.FunctionComponent = ({
}
}, [seedPhrase]);
- useEffect(() => {
- if (keepAwake) {
- (async () => {
- const bfvs: boolean = (await SettingsFileImpl.readSettings())
- .basicFirstViewSeed;
- setBasicFirstViewSeed(bfvs);
- if (!bfvs) {
- // keep the screen awake while the user is writting the seed
- keepAwake(true);
- }
- })();
- }
- }, [keepAwake]);
-
useEffect(() => {
if (privacy) {
setExpandSeed(false);
@@ -116,16 +93,11 @@ const Seed: React.FunctionComponent = ({
}, [expandBirthday, privacy]);
const onClickCancelHide = () => {
- onClickCancel && onClickCancel();
clear();
hiding();
};
const hiding = async () => {
- // when this screen is open from LoadingApp (new wallet)
- // is using the standard modal from react-native
- setIsSeedViewModalOpen && setIsSeedViewModalOpen(false);
-
if (navigation.canGoBack()) {
navigation.goBack();
}
@@ -162,7 +134,7 @@ const Seed: React.FunctionComponent = ({
style={{
flexGrow: 1,
alignItems: 'center',
- justifyContent: 'center',
+ justifyContent: 'flex-start',
}}
>
@@ -172,9 +144,16 @@ const Seed: React.FunctionComponent = ({
{rows.length > 0 && (
-
+
{rows.map((row, rowIndex) => (
-
+
{row.map((word, colIndex) => {
const index = rowIndex * 3 + colIndex;
return (
@@ -186,15 +165,13 @@ const Seed: React.FunctionComponent = ({
borderColor: colors.border,
borderWidth: 1,
borderRadius: 25,
- marginBottom: 10,
backgroundColor: colors.secondary,
width: '30%',
- maxWidth: maxW,
minWidth: '30%',
- minHeight: 48,
alignItems: 'center',
- paddingHorizontal: 15,
+ paddingHorizontal: 10,
paddingVertical: 0,
+ marginBottom: 5,
}}
>
{`${index + 1}`}.
@@ -203,10 +180,9 @@ const Seed: React.FunctionComponent = ({
flexGrow: 1,
flexShrink: 1,
color: colors.text,
- fontWeight: '600',
+ fontWeight: '400',
fontSize: 15,
- minHeight: 48,
- marginLeft: 5,
+ lineHeight: 15,
backgroundColor: 'transparent',
}}
value={word}
@@ -221,54 +197,116 @@ const Seed: React.FunctionComponent = ({
})}
))}
- {true && (
- {
- if (seedPhrase) {
- Clipboard.setString(seedPhrase);
- if (addLastSnackbar) {
- addLastSnackbar({
- message: translate(
- 'seed.tapcopy-seed-message',
- ) as string,
- duration: SnackbarDurationEnum.short,
- screenName: [screenName],
- });
- }
- setExpandSeed(true);
- if (privacy) {
- setTimeout(() => {
- setExpandSeed(false);
- }, 5 * 1000);
- }
- }
+
+ {seedBlurred && (
+
+
+
+
+ setSeedBlurred(false)}
+ style={{
+ backgroundColor: colors.primary,
+ borderRadius: 20,
+ paddingHorizontal: 18,
+ paddingVertical: 10,
+ alignSelf: 'center',
}}
>
- Copy
+ View seed phrase
-
-
+
+
)}
+
)}
+ {
+ if (seedPhrase) {
+ Clipboard.setString(seedPhrase);
+ if (addLastSnackbar) {
+ addLastSnackbar({
+ message: translate(
+ 'seed.tapcopy-seed-message',
+ ) as string,
+ duration: SnackbarDurationEnum.short,
+ screenName: [screenName],
+ });
+ }
+ setExpandSeed(true);
+ if (privacy) {
+ setTimeout(() => {
+ setExpandSeed(false);
+ }, 5 * 1000);
+ }
+ }
+ }}
+ >
+
+
+ Copy
+
+
+
+
= ({
marginBottom: 10,
backgroundColor: colors.secondary,
width: '100%',
- maxWidth: maxW,
minWidth: '50%',
minHeight: 48,
alignItems: 'center',
diff --git a/package.json b/package.json
index 57c226ea8..dc66843b0 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
"@noble/hashes": "^2.0.1",
"@react-native-async-storage/async-storage": "^2.2.0",
"@react-native-clipboard/clipboard": "^1.16.3",
+ "@react-native-community/blur": "^4.4.1",
"@react-native-community/netinfo": "github:j-piasecki/react-native-netinfo#@jpiasecki/new-arch",
"@react-native-picker/picker": "^2.11.2",
"@react-navigation/drawer": "^7.5.8",