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",