diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -37,6 +37,7 @@
import LogInPanel from './log-in-panel.react.js';
import type { LogInState } from './log-in-panel.react.js';
import LoggedOutStaffInfo from './logged-out-staff-info.react.js';
+import PromptButton from './prompt-button.react.js';
import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';
import ConnectedStatusBar from '../connected-status-bar.react.js';
@@ -55,7 +56,6 @@
import { splashStyleSelector } from '../splash.js';
import { useStyles } from '../themes/colors.js';
import { AnimatedView } from '../types/styles.js';
-import EthereumLogo from '../vectors/ethereum-logo.react.js';
let initialAppLoad = true;
const safeAreaEdges = ['top', 'bottom'];
@@ -116,18 +116,6 @@
position: 'absolute',
top: 13,
},
- button: {
- borderRadius: 4,
- marginBottom: 4,
- marginTop: 4,
- marginLeft: 4,
- marginRight: 4,
- paddingBottom: 14,
- paddingLeft: 18,
- paddingRight: 18,
- paddingTop: 14,
- flex: 1,
- },
buttonContainer: {
bottom: 0,
left: 0,
@@ -137,17 +125,6 @@
position: 'absolute',
right: 0,
},
- buttonText: {
- fontFamily: 'OpenSans-Semibold',
- fontSize: 17,
- textAlign: 'center',
- },
- classicAuthButton: {
- backgroundColor: 'purpleButton',
- },
- classicAuthButtonText: {
- color: 'whiteText',
- },
registerButtons: {
flexDirection: 'row',
},
@@ -176,15 +153,6 @@
right: 0,
top: 0,
},
- siweButton: {
- backgroundColor: 'siweButton',
- flex: 1,
- flexDirection: 'row',
- justifyContent: 'center',
- },
- siweButtonText: {
- color: 'siweButtonText',
- },
siweOr: {
flex: 1,
flexDirection: 'row',
@@ -210,9 +178,6 @@
fontSize: 17,
textAlign: 'center',
},
- siweIcon: {
- paddingRight: 10,
- },
};
const isForegroundSelector = createIsForegroundSelector(
@@ -470,22 +435,6 @@
styles.loadingIndicator,
]);
- const classicAuthButtonStyle = React.useMemo(
- () => [styles.button, styles.classicAuthButton],
- [styles.button, styles.classicAuthButton],
- );
- const classicAuthButtonTextStyle = React.useMemo(
- () => [styles.buttonText, styles.classicAuthButtonText],
- [styles.buttonText, styles.classicAuthButtonText],
- );
- const siweAuthButtonStyle = React.useMemo(
- () => [styles.button, styles.siweButton],
- [styles.button, styles.siweButton],
- );
- const siweAuthButtonTextStyle = React.useMemo(
- () => [styles.buttonText, styles.siweButtonText],
- [styles.buttonText, styles.siweButtonText],
- );
const buttonsViewOpacity = useAnimatedStyle(() => ({
opacity: buttonOpacity.value,
}));
@@ -501,27 +450,23 @@
const signInButtons = [];
if (!usingRestoreFlow) {
signInButtons.push(
-
- Sign in
- ,
+ />,
);
}
if (__DEV__ || usingRestoreFlow) {
const buttonText = usingRestoreFlow ? 'Sign in' : 'Sign in (QR)';
signInButtons.push(
-
- {buttonText}
- ,
+ />,
);
}
@@ -529,16 +474,11 @@
if (!usingRestoreFlow) {
siweSection = (
<>
-
-
-
-
- Sign in with Ethereum
-
+ variant="siwe"
+ />
or
@@ -554,14 +494,11 @@
{siweSection}
{signInButtons}
-
- Register
-
+ variant="regular"
+ />
);
@@ -571,12 +508,7 @@
onPressLogIn,
onPressQRCodeSignIn,
onPressSIWE,
- classicAuthButtonStyle,
- classicAuthButtonTextStyle,
- siweAuthButtonStyle,
- siweAuthButtonTextStyle,
buttonsViewStyle,
- styles.siweIcon,
styles.siweOr,
styles.siweOrLeftHR,
styles.siweOrText,
diff --git a/native/account/prompt-button.react.js b/native/account/prompt-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/prompt-button.react.js
@@ -0,0 +1,99 @@
+// @flow
+
+import * as React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+
+import { useStyles } from '../themes/colors.js';
+import EthereumLogo from '../vectors/ethereum-logo.react.js';
+
+type Props = {
+ +text: string,
+ +onPress: () => mixed,
+ +variant: 'regular' | 'siwe',
+};
+
+function PromptButton(props: Props): React.Node {
+ const styles = useStyles(unboundStyles);
+
+ const classicAuthButtonStyle = React.useMemo(
+ () => [styles.button, styles.classicAuthButton],
+ [styles.button, styles.classicAuthButton],
+ );
+ const classicAuthButtonTextStyle = React.useMemo(
+ () => [styles.buttonText, styles.classicAuthButtonText],
+ [styles.buttonText, styles.classicAuthButtonText],
+ );
+ const siweAuthButtonStyle = React.useMemo(
+ () => [styles.button, styles.siweButton],
+ [styles.button, styles.siweButton],
+ );
+ const siweAuthButtonTextStyle = React.useMemo(
+ () => [styles.buttonText, styles.siweButtonText],
+ [styles.buttonText, styles.siweButtonText],
+ );
+
+ const { text, onPress, variant } = props;
+ if (variant === 'regular') {
+ return (
+
+ {text}
+
+ );
+ }
+
+ return (
+
+
+
+
+ {text}
+
+ );
+}
+
+const unboundStyles = {
+ button: {
+ borderRadius: 4,
+ marginBottom: 4,
+ marginTop: 4,
+ marginLeft: 4,
+ marginRight: 4,
+ paddingBottom: 14,
+ paddingLeft: 18,
+ paddingRight: 18,
+ paddingTop: 14,
+ flex: 1,
+ },
+ buttonText: {
+ fontFamily: 'OpenSans-Semibold',
+ fontSize: 17,
+ textAlign: 'center',
+ },
+ classicAuthButton: {
+ backgroundColor: 'purpleButton',
+ },
+ classicAuthButtonText: {
+ color: 'whiteText',
+ },
+ siweButton: {
+ backgroundColor: 'siweButton',
+ flexDirection: 'row',
+ justifyContent: 'center',
+ },
+ siweButtonText: {
+ color: 'siweButtonText',
+ },
+ siweIcon: {
+ paddingRight: 10,
+ },
+};
+
+export default PromptButton;