Page MenuHomePhabricator
Files F3525584

No OneTemporary
Actions

View Options

diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js
index f4567cdc7..f33cef8cb 100644
--- a/native/account/registration/connect-ethereum.react.js
+++ b/native/account/registration/connect-ethereum.react.js
@@ -1,76 +1,83 @@
// @flow
import * as React from 'react';
import { Text, View } from 'react-native';
import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { CoolOrNerdMode } from './registration-types.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';
+import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js';
export type ConnectEthereumParams = {
+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,
+keyserverUsername: string,
},
};
type Props = {
+navigation: RegistrationNavigationProp<'ConnectEthereum'>,
+route: NavigationRoute<'ConnectEthereum'>,
};
// eslint-disable-next-line no-unused-vars
function ConnectEthereum(props: Props): React.Node {
const onConnect = React.useCallback(() => {}, []);
const onSkip = React.useCallback(() => {}, []);
const styles = useStyles(unboundStyles);
return (
<View style={styles.container}>
<RegistrationContainer>
<Text style={styles.header}>
Do you want to connect an Ethereum Wallet to your account?
</Text>
<Text style={styles.body}>
Connecting your Ethereum wallet allows you to cryptographically prove
your identity to your peers. You can use your ENS name as your
username and your ENS avatar as your avatar. You&apos;ll also be able
to secure your account with a wallet signature instead of a password.
</Text>
+ <View style={styles.ethereumLogoContainer}>
+ <EthereumLogoDark />
+ </View>
</RegistrationContainer>
<RegistrationButton
onPress={onConnect}
label="Connect Ethereum wallet"
variant="enabled"
/>
<RegistrationButton
onPress={onSkip}
label="Do not connect"
variant="enabled"
/>
</View>
);
}
const unboundStyles = {
container: {
backgroundColor: 'panelBackground',
justifyContent: 'space-between',
flex: 1,
},
header: {
fontSize: 24,
color: 'panelForegroundLabel',
paddingBottom: 16,
},
body: {
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 16,
},
+ ethereumLogoContainer: {
+ alignItems: 'center',
+ },
};
export default ConnectEthereum;
diff --git a/native/vectors/ethereum-logo-dark.react.js b/native/vectors/ethereum-logo-dark.react.js
new file mode 100644
index 000000000..48caf065e
--- /dev/null
+++ b/native/vectors/ethereum-logo-dark.react.js
@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from 'react';
+import Svg, { G, Path, Defs, ClipPath, Rect } from 'react-native-svg';
+
+function EthereumLogoDark(): React.Node {
+ return (
+ <Svg
+ width="114"
+ height="186"
+ viewBox="0 0 114 186"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <G clip-path="url(#clip0_11725_257565)">
+ <Path
+ d="M56.9824 0L55.7378 4.23741V127.197L56.9824 128.442L113.966 94.7039L56.9824 0Z"
+ fill="#4F4F4F"
+ />
+ <Path
+ d="M56.9831 0L0 94.7039L56.9831 128.442V68.7611V0Z"
+ fill="#A3A3A3"
+ />
+ <Path
+ d="M56.9826 139.248L56.2812 140.105V183.906L56.9826 185.958L114 105.527L56.9826 139.248Z"
+ fill="#595958"
+ />
+ <Path
+ d="M56.9831 185.958V139.248L0 105.527L56.9831 185.958Z"
+ fill="#A3A3A3"
+ />
+ <Path
+ d="M56.9829 128.442L113.965 94.7045L56.9829 68.7617V128.442Z"
+ fill="#303030"
+ />
+ <Path
+ d="M0.000488281 94.7045L56.9827 128.442V68.7617L0.000488281 94.7045Z"
+ fill="#545454"
+ />
+ </G>
+ <Defs>
+ <ClipPath id="clip0_11725_257565">
+ <Rect width="114" height="186" fill="white" />
+ </ClipPath>
+ </Defs>
+ </Svg>
+ );
+}
+
+export default EthereumLogoDark;

File Metadata

Mime Type
text/x-diff
Expires
Wed, Dec 25, 5:42 PM (6 h, 47 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2700610
Default Alt Text
(4 KB)

Event Timeline