Page MenuHomePhabricator
Differential D5373

[native] Add spoiler style to native markdown styles
ClosedPublic
Actions

Authored by rohan on Oct 14 2022, 7:52 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Mar 17, 4:32 AM
Unknown Object (File)
Mon, Mar 17, 4:30 AM
Unknown Object (File)
Wed, Mar 12, 9:10 AM
Unknown Object (File)
Wed, Mar 5, 9:53 PM
Unknown Object (File)
Feb 25 2025, 5:30 PM
Unknown Object (File)
Feb 25 2025, 5:30 PM
Unknown Object (File)
Feb 25 2025, 5:30 PM
Unknown Object (File)
Feb 25 2025, 5:30 PM
View All Files
Subscribers
ashoat
tomek

Details

Reviewers
atul
ginsu
• abosh
Commits
rCOMM4a38e57103a1: [native] Add spoiler style to native markdown styles
Summary

We add the styles for spoiler text on native by adding a style for both the text color and the background to make the spoilers uniquely
display.

https://linear.app/comm/issue/ENG-1984/add-spoiler-style-to-native-markdown-styles

Depends on D5347

Test Plan

Visually works as expected and the spoiler styles apply to only the spoiler text.

Spoiler Style.png (2×1 px, 246 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

rohan created this revision.Oct 14 2022, 7:52 PM
Herald added subscribers: tomek, ashoat. · View Herald TranscriptOct 14 2022, 7:52 PM
rohan edited the summary of this revision. (Show Details)Oct 14 2022, 7:53 PM
rohan edited the test plan for this revision. (Show Details)
rohan attached a referenced file: F200186: Spoiler Style.png. (Show Details)
Harbormaster returned this revision to the author for changes because remote builds failed.Oct 14 2022, 7:55 PM
Harbormaster failed remote builds in B12813: Diff 17597!
Harbormaster completed remote builds in B12813: Diff 17597.Oct 14 2022, 8:03 PM
rohan requested review of this revision.Oct 14 2022, 8:03 PM
rohan edited the summary of this revision. (Show Details)Oct 14 2022, 8:03 PM
rohan added a parent revision: D5347: Add spoiler rule to native in fullMarkdownRules.
rohan edited the summary of this revision. (Show Details)
ginsu requested changes to this revision.Oct 15 2022, 10:51 AM

Code looks good, but I think about changing the black to something like a dark gray. I think the black looks a bit harsh with the black background outside the message container. Defer to @atul for second take as well

This revision now requires changes to proceed.Oct 15 2022, 10:51 AM
rohan added a comment.Oct 15 2022, 4:47 PM
In D5373#158958, @ginsu wrote:

Code looks good, but I think about changing the black to something like a dark gray. I think the black looks a bit harsh with the black background outside the message container. Defer to @atul for second take as well

Good point I agree after taking another look at it

rohan updated this revision to Diff 17601.EditedOct 15 2022, 4:48 PM

Update spoiler text color

Simulator Screen Shot - iPhone 14 Pro - 2022-10-15 at 19.49.06.png (2×1 px, 245 KB)

rohan attached a referenced file: F201172: Simulator Screen Shot - iPhone 14 Pro - 2022-10-15 at 19.49.06.png. (Show Details)Oct 15 2022, 4:49 PM
Harbormaster completed remote builds in B12817: Diff 17601.Oct 15 2022, 4:59 PM
atul accepted this revision.Oct 15 2022, 7:13 PM

Not sure if this is the "final" styling for spoilers, but looks good for now.

I think we might want to round the corners and kind of match the styling of code blocks (eg same color)

ashoat added a comment.Oct 17 2022, 5:31 AM

I think this is a fine style for now, we can revisit later

native/themes/colors.js
78–79 ↗(On Diff #17601)

Do we really need two separate styles for this? The whole point is to make the text not appear against the background, right?

ginsu accepted this revision.Oct 17 2022, 6:45 AM

color looks a lot better, I agree with @ashoat and I think we can get rid of spoilerText style. I would address that before landing

This revision is now accepted and ready to land.Oct 17 2022, 6:45 AM
rohan added inline comments.Oct 17 2022, 8:33 AM
native/themes/colors.js
78–79 ↗(On Diff #17601)

So I was originally thinking yes, because we wanted the text-color and background-color to be the same. Though now that I'm thinking about it, we can just have one common color spoiler and make both the text-color and background-color properties reference that color. Thanks for pointing it out - I can update this diff to do that

rohan updated this revision to Diff 17619.Oct 17 2022, 8:36 AM

Create just one style for the spoiler text and background

Harbormaster completed remote builds in B12834: Diff 17619.Oct 17 2022, 8:45 AM
rohan added a child revision: D5383: [native] Display the spoiler content on tap.Oct 17 2022, 12:31 PM
rohan updated this revision to Diff 18278.Nov 9 2022, 10:05 AM

Rebase and resolve conflicts

Harbormaster completed remote builds in B13327: Diff 18278.Nov 9 2022, 10:19 AM
rohan mentioned this in D5599: [web] Add spoiler style to MarkdownSpoiler.Nov 10 2022, 9:56 AM
rohan mentioned this in rCOMM343181cad8b6: [web] Add spoiler style to MarkdownSpoiler.Nov 16 2022, 9:06 AM
Closed by commit rCOMM4a38e57103a1: [native] Add spoiler style to native markdown styles (authored by rohan). · Explain WhyNov 30 2022, 2:47 PM
This revision was automatically updated to reflect the committed changes.
rohan added a commit: rCOMM4a38e57103a1: [native] Add spoiler style to native markdown styles.

Revision Contents
Changeset List

PathSize
native/
markdown/
6 lines
4 lines
themes/
2 lines

Diff 19045

View Options

native/markdown/rules.react.js

// @flow // @flow
import type { import type {
StackNavigationEventMap, StackNavigationEventMap,
StackNavigationState, StackNavigationState,
StackOptions, StackOptions,
} from '@react-navigation/core'; } from '@react-navigation/core';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js'; import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { useENSName } from 'lib/hooks/ens-cache.js'; import { useENSName } from 'lib/hooks/ens-cache.js';
import { useWalletLogIn } from 'lib/hooks/login-hooks.js'; import { useWalletLogIn } from 'lib/hooks/login-hooks.js';
import type { SIWEBackupData } from 'lib/types/backup-types.js';
import type { SIWEResult } from 'lib/types/siwe-types.js'; import type { SIWEResult } from 'lib/types/siwe-types.js';
import { getMessageForException } from 'lib/utils/errors.js'; import { getMessageForException } from 'lib/utils/errors.js';
import { useDispatch } from 'lib/utils/redux-utils.js'; import { useDispatch } from 'lib/utils/redux-utils.js';
import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; import {
usingCommServicesAccessToken,
usingRestoreFlow,
} from 'lib/utils/services-utils.js';
import type { AuthNavigationProp } from './auth-navigator.react.js'; import type { AuthNavigationProp } from './auth-navigator.react.js';
import { RegistrationContext } from './registration-context.js'; import { RegistrationContext } from './registration-context.js';
import LinkButton from '../../components/link-button.react.js';
import PrimaryButton from '../../components/primary-button.react.js'; import PrimaryButton from '../../components/primary-button.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type { import {
NavigationRoute, type NavigationRoute,
ScreenParamList, type ScreenParamList,
QRCodeScreenRouteName,
RestoreSIWEBackupRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import { import {
unknownErrorAlertDetails, unknownErrorAlertDetails,
appOutOfDateAlertDetails, appOutOfDateAlertDetails,
} from '../../utils/alert-messages.js'; } from '../../utils/alert-messages.js';
import Alert from '../../utils/alert.js'; import Alert from '../../utils/alert.js';
import AuthButtonContainer from '../auth-components/auth-button-container.react.js'; import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
import AuthContainer from '../auth-components/auth-container.react.js'; import AuthContainer from '../auth-components/auth-container.react.js';
import AuthContentContainer from '../auth-components/auth-content-container.react.js'; import AuthContentContainer from '../auth-components/auth-content-container.react.js';
import { useLegacySIWEServerCall } from '../siwe-hooks.js'; import { useLegacySIWEServerCall } from '../siwe-hooks.js';
export type ExistingEthereumAccountParams = SIWEResult; export type ExistingEthereumAccountParams = $ReadOnly<{
...SIWEResult,
+backupData: ?SIWEBackupData,
}>;
type Props = { type Props = {
+navigation: AuthNavigationProp<'ExistingEthereumAccount'>, +navigation: AuthNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>, +route: NavigationRoute<'ExistingEthereumAccount'>,
}; };
function ExistingEthereumAccount(props: Props): React.Node { function ExistingEthereumAccount(props: Props): React.Node {
const legacySiweServerCall = useLegacySIWEServerCall(); const legacySiweServerCall = useLegacySIWEServerCall();
const walletLogIn = useWalletLogIn(); const walletLogIn = useWalletLogIn();
const [logInPending, setLogInPending] = React.useState(false); const [logInPending, setLogInPending] = React.useState(false);
const registrationContext = React.useContext(RegistrationContext); const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set'); invariant(registrationContext, 'registrationContext should be set');
const { setCachedSelections } = registrationContext; const { setCachedSelections } = registrationContext;
const { params } = props.route; const { params } = props.route;
const { address, message, signature, backupData } = params;
const dispatch = useDispatch(); const dispatch = useDispatch();
const { navigation } = props; const { navigation } = props;
const goBackToHome = navigation.getParent< const goBackToHome = navigation.getParent<
ScreenParamList, ScreenParamList,
'Auth', 'Auth',
StackNavigationState, StackNavigationState,
StackOptions, StackOptions,
StackNavigationEventMap, StackNavigationEventMap,
RootNavigationProp<'Auth'>, RootNavigationProp<'Auth'>,
>()?.goBack; >()?.goBack;
const onProceedToLogIn = React.useCallback(async () => { const onProceedToLogIn = React.useCallback(async () => {
if (logInPending) { if (logInPending) {
return; return;
} }
setLogInPending(true); setLogInPending(true);
try { try {
if (usingCommServicesAccessToken) { if (usingCommServicesAccessToken) {
await walletLogIn(params.address, params.message, params.signature); await walletLogIn(params.address, params.message, params.signature);
▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines const onProceedToLogIn = React.useCallback(async () => {
legacySiweServerCall, legacySiweServerCall,
walletLogIn, walletLogIn,
params, params,
dispatch, dispatch,
goBackToHome, goBackToHome,
setCachedSelections, setCachedSelections,
]); ]);
const { address } = params; const useLegacyFlow = !backupData || !usingRestoreFlow;
const openRestoreFlow = React.useCallback(() => {
if (useLegacyFlow || !backupData) {
return;
}
const {
siweBackupMsgNonce,
siweBackupMsgIssuedAt,
siweBackupMsgStatement,
} = backupData;
navigation.navigate(RestoreSIWEBackupRouteName, {
siweNonce: siweBackupMsgNonce,
siweStatement: siweBackupMsgStatement,
siweIssuedAt: siweBackupMsgIssuedAt,
userIdentifier: address,
signature,
message,
});
}, [address, backupData, message, navigation, signature, useLegacyFlow]);
const openQRScreen = React.useCallback(() => {
navigation.navigate(QRCodeScreenRouteName);
}, [navigation]);
const walletIdentifier = useENSName(address); const walletIdentifier = useENSName(address);
const walletIdentifierTitle = const walletIdentifierTitle =
walletIdentifier === address ? 'Ethereum wallet' : 'ENS name'; walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';
const { goBack } = navigation; const { goBack } = navigation;
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
let newFlowSection = null;
if (!useLegacyFlow) {
newFlowSection = (
<>
<Text style={styles.section}>
If you still have access to your logged-in device, you can use it to
log in by scanning the QR code.
</Text>
<Text style={styles.section}>
If you’ve lost access to your logged-in device, you can try recovering
your Comm account. Note that after completing the recovery flow, you
will be logged out from all of your other devices.
</Text>
<View style={styles.linkButton}>
<LinkButton
text="Not logged in on another phone?"
onPress={openRestoreFlow}
/>
</View>
</>
);
}
const primaryAction = React.useMemo(() => {
if (useLegacyFlow) {
return (
<PrimaryButton
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
);
}
return (
<PrimaryButton
onPress={openQRScreen}
label="Log in via QR code"
variant="enabled"
/>
);
}, [logInPending, onProceedToLogIn, openQRScreen, useLegacyFlow]);
return ( return (
<AuthContainer> <AuthContainer>
<AuthContentContainer> <AuthContentContainer>
<Text style={styles.header}>Account already exists for wallet</Text> <Text style={styles.header}>Account already exists for wallet</Text>
<Text style={styles.body}> <Text style={styles.body}>
You can proceed to log in with this wallet, or go back and use a You can proceed to log in with this wallet, or go back and use a
different wallet. different wallet.
</Text> </Text>
<View style={styles.walletTile}> <View style={styles.walletTile}>
<Text style={styles.walletIdentifierTitleText}> <Text style={styles.walletIdentifierTitleText}>
{walletIdentifierTitle} {walletIdentifierTitle}
</Text> </Text>
<View style={styles.walletIdentifier}> <View style={styles.walletIdentifier}>
<Text style={styles.walletIdentifierText} numberOfLines={1}> <Text style={styles.walletIdentifierText} numberOfLines={1}>
{walletIdentifier} {walletIdentifier}
</Text> </Text>
</View> </View>
</View> </View>
{newFlowSection}
</AuthContentContainer> </AuthContentContainer>
<AuthButtonContainer> <AuthButtonContainer>
<PrimaryButton {primaryAction}
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
<PrimaryButton <PrimaryButton
onPress={goBack} onPress={goBack}
label="Use a different wallet" label="Use a different wallet"
variant="outline" variant="outline"
/> />
</AuthButtonContainer> </AuthButtonContainer>
</AuthContainer> </AuthContainer>
); );
} }
const unboundStyles = { const unboundStyles = {
header: { header: {
fontSize: 24, fontSize: 24,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
paddingBottom: 16, paddingBottom: 16,
}, },
body: { body: {
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 15, fontSize: 15,
lineHeight: 20, lineHeight: 20,
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
paddingBottom: 40,
}, },
walletTile: { walletTile: {
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderRadius: 8, borderRadius: 8,
padding: 24, padding: 24,
alignItems: 'center', alignItems: 'center',
marginTop: 40,
marginBottom: 40,
}, },
walletIdentifierTitleText: { walletIdentifierTitleText: {
fontSize: 17, fontSize: 17,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
textAlign: 'center', textAlign: 'center',
}, },
walletIdentifier: { walletIdentifier: {
backgroundColor: 'panelSecondaryForeground', backgroundColor: 'panelSecondaryForeground',
paddingVertical: 8, paddingVertical: 8,
paddingHorizontal: 24, paddingHorizontal: 24,
borderRadius: 56, borderRadius: 56,
marginTop: 8, marginTop: 8,
alignItems: 'center', alignItems: 'center',
}, },
walletIdentifierText: { walletIdentifierText: {
fontSize: 15, fontSize: 15,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
}, },
section: {
fontFamily: 'Arial',
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 16,
},
linkButton: {
alignItems: 'center',
},
}; };
export default ExistingEthereumAccount; export default ExistingEthereumAccount;
View Options

native/markdown/styles.js

// @flow // @flow
import type { import type {
StackNavigationEventMap, StackNavigationEventMap,
StackNavigationState, StackNavigationState,
StackOptions, StackOptions,
} from '@react-navigation/core'; } from '@react-navigation/core';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js'; import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { useENSName } from 'lib/hooks/ens-cache.js'; import { useENSName } from 'lib/hooks/ens-cache.js';
import { useWalletLogIn } from 'lib/hooks/login-hooks.js'; import { useWalletLogIn } from 'lib/hooks/login-hooks.js';
import type { SIWEBackupData } from 'lib/types/backup-types.js';
import type { SIWEResult } from 'lib/types/siwe-types.js'; import type { SIWEResult } from 'lib/types/siwe-types.js';
import { getMessageForException } from 'lib/utils/errors.js'; import { getMessageForException } from 'lib/utils/errors.js';
import { useDispatch } from 'lib/utils/redux-utils.js'; import { useDispatch } from 'lib/utils/redux-utils.js';
import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; import {
usingCommServicesAccessToken,
usingRestoreFlow,
} from 'lib/utils/services-utils.js';
import type { AuthNavigationProp } from './auth-navigator.react.js'; import type { AuthNavigationProp } from './auth-navigator.react.js';
import { RegistrationContext } from './registration-context.js'; import { RegistrationContext } from './registration-context.js';
import LinkButton from '../../components/link-button.react.js';
import PrimaryButton from '../../components/primary-button.react.js'; import PrimaryButton from '../../components/primary-button.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type { import {
NavigationRoute, type NavigationRoute,
ScreenParamList, type ScreenParamList,
QRCodeScreenRouteName,
RestoreSIWEBackupRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import { import {
unknownErrorAlertDetails, unknownErrorAlertDetails,
appOutOfDateAlertDetails, appOutOfDateAlertDetails,
} from '../../utils/alert-messages.js'; } from '../../utils/alert-messages.js';
import Alert from '../../utils/alert.js'; import Alert from '../../utils/alert.js';
import AuthButtonContainer from '../auth-components/auth-button-container.react.js'; import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
import AuthContainer from '../auth-components/auth-container.react.js'; import AuthContainer from '../auth-components/auth-container.react.js';
import AuthContentContainer from '../auth-components/auth-content-container.react.js'; import AuthContentContainer from '../auth-components/auth-content-container.react.js';
import { useLegacySIWEServerCall } from '../siwe-hooks.js'; import { useLegacySIWEServerCall } from '../siwe-hooks.js';
export type ExistingEthereumAccountParams = SIWEResult; export type ExistingEthereumAccountParams = $ReadOnly<{
...SIWEResult,
+backupData: ?SIWEBackupData,
}>;
type Props = { type Props = {
+navigation: AuthNavigationProp<'ExistingEthereumAccount'>, +navigation: AuthNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>, +route: NavigationRoute<'ExistingEthereumAccount'>,
}; };
function ExistingEthereumAccount(props: Props): React.Node { function ExistingEthereumAccount(props: Props): React.Node {
const legacySiweServerCall = useLegacySIWEServerCall(); const legacySiweServerCall = useLegacySIWEServerCall();
const walletLogIn = useWalletLogIn(); const walletLogIn = useWalletLogIn();
const [logInPending, setLogInPending] = React.useState(false); const [logInPending, setLogInPending] = React.useState(false);
const registrationContext = React.useContext(RegistrationContext); const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set'); invariant(registrationContext, 'registrationContext should be set');
const { setCachedSelections } = registrationContext; const { setCachedSelections } = registrationContext;
const { params } = props.route; const { params } = props.route;
const { address, message, signature, backupData } = params;
const dispatch = useDispatch(); const dispatch = useDispatch();
const { navigation } = props; const { navigation } = props;
const goBackToHome = navigation.getParent< const goBackToHome = navigation.getParent<
ScreenParamList, ScreenParamList,
'Auth', 'Auth',
StackNavigationState, StackNavigationState,
StackOptions, StackOptions,
StackNavigationEventMap, StackNavigationEventMap,
RootNavigationProp<'Auth'>, RootNavigationProp<'Auth'>,
>()?.goBack; >()?.goBack;
const onProceedToLogIn = React.useCallback(async () => { const onProceedToLogIn = React.useCallback(async () => {
if (logInPending) { if (logInPending) {
return; return;
} }
setLogInPending(true); setLogInPending(true);
try { try {
if (usingCommServicesAccessToken) { if (usingCommServicesAccessToken) {
await walletLogIn(params.address, params.message, params.signature); await walletLogIn(params.address, params.message, params.signature);
▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines const onProceedToLogIn = React.useCallback(async () => {
legacySiweServerCall, legacySiweServerCall,
walletLogIn, walletLogIn,
params, params,
dispatch, dispatch,
goBackToHome, goBackToHome,
setCachedSelections, setCachedSelections,
]); ]);
const { address } = params; const useLegacyFlow = !backupData || !usingRestoreFlow;
const openRestoreFlow = React.useCallback(() => {
if (useLegacyFlow || !backupData) {
return;
}
const {
siweBackupMsgNonce,
siweBackupMsgIssuedAt,
siweBackupMsgStatement,
} = backupData;
navigation.navigate(RestoreSIWEBackupRouteName, {
siweNonce: siweBackupMsgNonce,
siweStatement: siweBackupMsgStatement,
siweIssuedAt: siweBackupMsgIssuedAt,
userIdentifier: address,
signature,
message,
});
}, [address, backupData, message, navigation, signature, useLegacyFlow]);
const openQRScreen = React.useCallback(() => {
navigation.navigate(QRCodeScreenRouteName);
}, [navigation]);
const walletIdentifier = useENSName(address); const walletIdentifier = useENSName(address);
const walletIdentifierTitle = const walletIdentifierTitle =
walletIdentifier === address ? 'Ethereum wallet' : 'ENS name'; walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';
const { goBack } = navigation; const { goBack } = navigation;
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
let newFlowSection = null;
if (!useLegacyFlow) {
newFlowSection = (
<>
<Text style={styles.section}>
If you still have access to your logged-in device, you can use it to
log in by scanning the QR code.
</Text>
<Text style={styles.section}>
If you’ve lost access to your logged-in device, you can try recovering
your Comm account. Note that after completing the recovery flow, you
will be logged out from all of your other devices.
</Text>
<View style={styles.linkButton}>
<LinkButton
text="Not logged in on another phone?"
onPress={openRestoreFlow}
/>
</View>
</>
);
}
const primaryAction = React.useMemo(() => {
if (useLegacyFlow) {
return (
<PrimaryButton
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
);
}
return (
<PrimaryButton
onPress={openQRScreen}
label="Log in via QR code"
variant="enabled"
/>
);
}, [logInPending, onProceedToLogIn, openQRScreen, useLegacyFlow]);
return ( return (
<AuthContainer> <AuthContainer>
<AuthContentContainer> <AuthContentContainer>
<Text style={styles.header}>Account already exists for wallet</Text> <Text style={styles.header}>Account already exists for wallet</Text>
<Text style={styles.body}> <Text style={styles.body}>
You can proceed to log in with this wallet, or go back and use a You can proceed to log in with this wallet, or go back and use a
different wallet. different wallet.
</Text> </Text>
<View style={styles.walletTile}> <View style={styles.walletTile}>
<Text style={styles.walletIdentifierTitleText}> <Text style={styles.walletIdentifierTitleText}>
{walletIdentifierTitle} {walletIdentifierTitle}
</Text> </Text>
<View style={styles.walletIdentifier}> <View style={styles.walletIdentifier}>
<Text style={styles.walletIdentifierText} numberOfLines={1}> <Text style={styles.walletIdentifierText} numberOfLines={1}>
{walletIdentifier} {walletIdentifier}
</Text> </Text>
</View> </View>
</View> </View>
{newFlowSection}
</AuthContentContainer> </AuthContentContainer>
<AuthButtonContainer> <AuthButtonContainer>
<PrimaryButton {primaryAction}
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
<PrimaryButton <PrimaryButton
onPress={goBack} onPress={goBack}
label="Use a different wallet" label="Use a different wallet"
variant="outline" variant="outline"
/> />
</AuthButtonContainer> </AuthButtonContainer>
</AuthContainer> </AuthContainer>
); );
} }
const unboundStyles = { const unboundStyles = {
header: { header: {
fontSize: 24, fontSize: 24,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
paddingBottom: 16, paddingBottom: 16,
}, },
body: { body: {
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 15, fontSize: 15,
lineHeight: 20, lineHeight: 20,
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
paddingBottom: 40,
}, },
walletTile: { walletTile: {
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderRadius: 8, borderRadius: 8,
padding: 24, padding: 24,
alignItems: 'center', alignItems: 'center',
marginTop: 40,
marginBottom: 40,
}, },
walletIdentifierTitleText: { walletIdentifierTitleText: {
fontSize: 17, fontSize: 17,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
textAlign: 'center', textAlign: 'center',
}, },
walletIdentifier: { walletIdentifier: {
backgroundColor: 'panelSecondaryForeground', backgroundColor: 'panelSecondaryForeground',
paddingVertical: 8, paddingVertical: 8,
paddingHorizontal: 24, paddingHorizontal: 24,
borderRadius: 56, borderRadius: 56,
marginTop: 8, marginTop: 8,
alignItems: 'center', alignItems: 'center',
}, },
walletIdentifierText: { walletIdentifierText: {
fontSize: 15, fontSize: 15,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
}, },
section: {
fontFamily: 'Arial',
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 16,
},
linkButton: {
alignItems: 'center',
},
}; };
export default ExistingEthereumAccount; export default ExistingEthereumAccount;
View Options

native/themes/colors.js

// @flow // @flow
import type { import type {
StackNavigationEventMap, StackNavigationEventMap,
StackNavigationState, StackNavigationState,
StackOptions, StackOptions,
} from '@react-navigation/core'; } from '@react-navigation/core';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { Text, View } from 'react-native'; import { Text, View } from 'react-native';
import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js'; import { setDataLoadedActionType } from 'lib/actions/client-db-store-actions.js';
import { useENSName } from 'lib/hooks/ens-cache.js'; import { useENSName } from 'lib/hooks/ens-cache.js';
import { useWalletLogIn } from 'lib/hooks/login-hooks.js'; import { useWalletLogIn } from 'lib/hooks/login-hooks.js';
import type { SIWEBackupData } from 'lib/types/backup-types.js';
import type { SIWEResult } from 'lib/types/siwe-types.js'; import type { SIWEResult } from 'lib/types/siwe-types.js';
import { getMessageForException } from 'lib/utils/errors.js'; import { getMessageForException } from 'lib/utils/errors.js';
import { useDispatch } from 'lib/utils/redux-utils.js'; import { useDispatch } from 'lib/utils/redux-utils.js';
import { usingCommServicesAccessToken } from 'lib/utils/services-utils.js'; import {
usingCommServicesAccessToken,
usingRestoreFlow,
} from 'lib/utils/services-utils.js';
import type { AuthNavigationProp } from './auth-navigator.react.js'; import type { AuthNavigationProp } from './auth-navigator.react.js';
import { RegistrationContext } from './registration-context.js'; import { RegistrationContext } from './registration-context.js';
import LinkButton from '../../components/link-button.react.js';
import PrimaryButton from '../../components/primary-button.react.js'; import PrimaryButton from '../../components/primary-button.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import type { import {
NavigationRoute, type NavigationRoute,
ScreenParamList, type ScreenParamList,
QRCodeScreenRouteName,
RestoreSIWEBackupRouteName,
} from '../../navigation/route-names.js'; } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js'; import { useStyles } from '../../themes/colors.js';
import { import {
unknownErrorAlertDetails, unknownErrorAlertDetails,
appOutOfDateAlertDetails, appOutOfDateAlertDetails,
} from '../../utils/alert-messages.js'; } from '../../utils/alert-messages.js';
import Alert from '../../utils/alert.js'; import Alert from '../../utils/alert.js';
import AuthButtonContainer from '../auth-components/auth-button-container.react.js'; import AuthButtonContainer from '../auth-components/auth-button-container.react.js';
import AuthContainer from '../auth-components/auth-container.react.js'; import AuthContainer from '../auth-components/auth-container.react.js';
import AuthContentContainer from '../auth-components/auth-content-container.react.js'; import AuthContentContainer from '../auth-components/auth-content-container.react.js';
import { useLegacySIWEServerCall } from '../siwe-hooks.js'; import { useLegacySIWEServerCall } from '../siwe-hooks.js';
export type ExistingEthereumAccountParams = SIWEResult; export type ExistingEthereumAccountParams = $ReadOnly<{
...SIWEResult,
+backupData: ?SIWEBackupData,
}>;
type Props = { type Props = {
+navigation: AuthNavigationProp<'ExistingEthereumAccount'>, +navigation: AuthNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>, +route: NavigationRoute<'ExistingEthereumAccount'>,
}; };
function ExistingEthereumAccount(props: Props): React.Node { function ExistingEthereumAccount(props: Props): React.Node {
const legacySiweServerCall = useLegacySIWEServerCall(); const legacySiweServerCall = useLegacySIWEServerCall();
const walletLogIn = useWalletLogIn(); const walletLogIn = useWalletLogIn();
const [logInPending, setLogInPending] = React.useState(false); const [logInPending, setLogInPending] = React.useState(false);
const registrationContext = React.useContext(RegistrationContext); const registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set'); invariant(registrationContext, 'registrationContext should be set');
const { setCachedSelections } = registrationContext; const { setCachedSelections } = registrationContext;
const { params } = props.route; const { params } = props.route;
const { address, message, signature, backupData } = params;
const dispatch = useDispatch(); const dispatch = useDispatch();
const { navigation } = props; const { navigation } = props;
const goBackToHome = navigation.getParent< const goBackToHome = navigation.getParent<
ScreenParamList, ScreenParamList,
'Auth', 'Auth',
StackNavigationState, StackNavigationState,
StackOptions, StackOptions,
StackNavigationEventMap, StackNavigationEventMap,
RootNavigationProp<'Auth'>, RootNavigationProp<'Auth'>,
>()?.goBack; >()?.goBack;
const onProceedToLogIn = React.useCallback(async () => { const onProceedToLogIn = React.useCallback(async () => {
if (logInPending) { if (logInPending) {
return; return;
} }
setLogInPending(true); setLogInPending(true);
try { try {
if (usingCommServicesAccessToken) { if (usingCommServicesAccessToken) {
await walletLogIn(params.address, params.message, params.signature); await walletLogIn(params.address, params.message, params.signature);
▲ Show 20 Lines • Show All 51 Lines • ▼ Show 20 Lines const onProceedToLogIn = React.useCallback(async () => {
legacySiweServerCall, legacySiweServerCall,
walletLogIn, walletLogIn,
params, params,
dispatch, dispatch,
goBackToHome, goBackToHome,
setCachedSelections, setCachedSelections,
]); ]);
const { address } = params; const useLegacyFlow = !backupData || !usingRestoreFlow;
const openRestoreFlow = React.useCallback(() => {
if (useLegacyFlow || !backupData) {
return;
}
const {
siweBackupMsgNonce,
siweBackupMsgIssuedAt,
siweBackupMsgStatement,
} = backupData;
navigation.navigate(RestoreSIWEBackupRouteName, {
siweNonce: siweBackupMsgNonce,
siweStatement: siweBackupMsgStatement,
siweIssuedAt: siweBackupMsgIssuedAt,
userIdentifier: address,
signature,
message,
});
}, [address, backupData, message, navigation, signature, useLegacyFlow]);
const openQRScreen = React.useCallback(() => {
navigation.navigate(QRCodeScreenRouteName);
}, [navigation]);
const walletIdentifier = useENSName(address); const walletIdentifier = useENSName(address);
const walletIdentifierTitle = const walletIdentifierTitle =
walletIdentifier === address ? 'Ethereum wallet' : 'ENS name'; walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';
const { goBack } = navigation; const { goBack } = navigation;
const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);
let newFlowSection = null;
if (!useLegacyFlow) {
newFlowSection = (
<>
<Text style={styles.section}>
If you still have access to your logged-in device, you can use it to
log in by scanning the QR code.
</Text>
<Text style={styles.section}>
If you’ve lost access to your logged-in device, you can try recovering
your Comm account. Note that after completing the recovery flow, you
will be logged out from all of your other devices.
</Text>
<View style={styles.linkButton}>
<LinkButton
text="Not logged in on another phone?"
onPress={openRestoreFlow}
/>
</View>
</>
);
}
const primaryAction = React.useMemo(() => {
if (useLegacyFlow) {
return (
<PrimaryButton
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
);
}
return (
<PrimaryButton
onPress={openQRScreen}
label="Log in via QR code"
variant="enabled"
/>
);
}, [logInPending, onProceedToLogIn, openQRScreen, useLegacyFlow]);
return ( return (
<AuthContainer> <AuthContainer>
<AuthContentContainer> <AuthContentContainer>
<Text style={styles.header}>Account already exists for wallet</Text> <Text style={styles.header}>Account already exists for wallet</Text>
<Text style={styles.body}> <Text style={styles.body}>
You can proceed to log in with this wallet, or go back and use a You can proceed to log in with this wallet, or go back and use a
different wallet. different wallet.
</Text> </Text>
<View style={styles.walletTile}> <View style={styles.walletTile}>
<Text style={styles.walletIdentifierTitleText}> <Text style={styles.walletIdentifierTitleText}>
{walletIdentifierTitle} {walletIdentifierTitle}
</Text> </Text>
<View style={styles.walletIdentifier}> <View style={styles.walletIdentifier}>
<Text style={styles.walletIdentifierText} numberOfLines={1}> <Text style={styles.walletIdentifierText} numberOfLines={1}>
{walletIdentifier} {walletIdentifier}
</Text> </Text>
</View> </View>
</View> </View>
{newFlowSection}
</AuthContentContainer> </AuthContentContainer>
<AuthButtonContainer> <AuthButtonContainer>
<PrimaryButton {primaryAction}
onPress={onProceedToLogIn}
label="Log in to account"
variant={logInPending ? 'loading' : 'enabled'}
/>
<PrimaryButton <PrimaryButton
onPress={goBack} onPress={goBack}
label="Use a different wallet" label="Use a different wallet"
variant="outline" variant="outline"
/> />
</AuthButtonContainer> </AuthButtonContainer>
</AuthContainer> </AuthContainer>
); );
} }
const unboundStyles = { const unboundStyles = {
header: { header: {
fontSize: 24, fontSize: 24,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
paddingBottom: 16, paddingBottom: 16,
}, },
body: { body: {
fontFamily: 'Arial', fontFamily: 'Arial',
fontSize: 15, fontSize: 15,
lineHeight: 20, lineHeight: 20,
color: 'panelForegroundSecondaryLabel', color: 'panelForegroundSecondaryLabel',
paddingBottom: 40,
}, },
walletTile: { walletTile: {
backgroundColor: 'panelForeground', backgroundColor: 'panelForeground',
borderRadius: 8, borderRadius: 8,
padding: 24, padding: 24,
alignItems: 'center', alignItems: 'center',
marginTop: 40,
marginBottom: 40,
}, },
walletIdentifierTitleText: { walletIdentifierTitleText: {
fontSize: 17, fontSize: 17,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
textAlign: 'center', textAlign: 'center',
}, },
walletIdentifier: { walletIdentifier: {
backgroundColor: 'panelSecondaryForeground', backgroundColor: 'panelSecondaryForeground',
paddingVertical: 8, paddingVertical: 8,
paddingHorizontal: 24, paddingHorizontal: 24,
borderRadius: 56, borderRadius: 56,
marginTop: 8, marginTop: 8,
alignItems: 'center', alignItems: 'center',
}, },
walletIdentifierText: { walletIdentifierText: {
fontSize: 15, fontSize: 15,
color: 'panelForegroundLabel', color: 'panelForegroundLabel',
}, },
section: {
fontFamily: 'Arial',
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 16,
},
linkButton: {
alignItems: 'center',
},
}; };
export default ExistingEthereumAccount; export default ExistingEthereumAccount;