diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js
index f24b7cab1..4302f3b7f 100644
--- a/native/account/registration/connect-ethereum.react.js
+++ b/native/account/registration/connect-ethereum.react.js
@@ -1,220 +1,219 @@
// @flow
import * as React from 'react';
import { Text, View } from 'react-native';
import {
exactSearchUser,
exactSearchUserActionTypes,
} from 'lib/actions/user-actions.js';
import type { SIWEResult } from 'lib/types/siwe-types.js';
import {
useServerCall,
useDispatchActionPromise,
} from 'lib/utils/action-utils.js';
import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { CoolOrNerdMode } from './registration-types.js';
import {
type NavigationRoute,
ExistingEthereumAccountRouteName,
} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';
import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.js';
import SIWEPanel from '../siwe-panel.react.js';
export type ConnectEthereumParams = {
+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,
+keyserverUsername: string,
},
};
type PanelState = 'closed' | 'opening' | 'open' | 'closing';
type Props = {
+navigation: RegistrationNavigationProp<'ConnectEthereum'>,
+route: NavigationRoute<'ConnectEthereum'>,
};
function ConnectEthereum(props: Props): React.Node {
const isNerdMode =
props.route.params.userSelections.coolOrNerdMode === 'nerd';
const styles = useStyles(unboundStyles);
let body;
if (!isNerdMode) {
body = (
Connecting your Ethereum wallet allows you to use your ENS name and
avatar in the app. You'll also be able to log in with your wallet
instead of a password.
);
} else {
body = (
<>
Connecting your Ethereum wallet has three benefits:
{'1. '}
Your peers will be able to cryptographically verify that your Comm
account is associated with your Ethereum wallet.
{'2. '}
You'll be able to use your ENS name and avatar in the app.
{'3. '}
You can choose to skip setting a password, and to log in with your
Ethereum wallet instead.
>
);
}
const [panelState, setPanelState] = React.useState('closed');
const openPanel = React.useCallback(() => {
setPanelState('opening');
}, []);
const onPanelClosed = React.useCallback(() => {
setPanelState('closed');
}, []);
const onPanelClosing = React.useCallback(() => {
setPanelState('closing');
}, []);
const siwePanelSetLoading = React.useCallback(
(loading: boolean) => {
if (panelState === 'closing' || panelState === 'closed') {
return;
}
setPanelState(loading ? 'opening' : 'open');
},
[panelState],
);
const onSkip = React.useCallback(() => {
// show username selection screen
}, []);
const exactSearchUserCall = useServerCall(exactSearchUser);
const dispatchActionPromise = useDispatchActionPromise();
const { navigate } = props.navigation;
const onSuccessfulWalletSignature = React.useCallback(
async (result: SIWEResult) => {
const searchPromise = exactSearchUserCall(result.address);
dispatchActionPromise(exactSearchUserActionTypes, searchPromise);
const { userInfo } = await searchPromise;
if (userInfo) {
- const { message, signature } = result;
navigate<'ExistingEthereumAccount'>({
name: ExistingEthereumAccountRouteName,
- params: { message, signature },
+ params: result,
});
} else {
// show avatar selection screen
}
},
[exactSearchUserCall, dispatchActionPromise, navigate],
);
let siwePanel;
if (panelState !== 'closed') {
siwePanel = (
);
}
return (
<>
Do you want to connect an Ethereum wallet?
{body}
{siwePanel}
>
);
}
const unboundStyles = {
scrollViewContentContainer: {
flexGrow: 1,
},
header: {
fontSize: 24,
color: 'panelForegroundLabel',
paddingBottom: 16,
},
body: {
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
paddingBottom: 16,
},
ethereumLogoContainer: {
flexGrow: 1,
alignItems: 'center',
justifyContent: 'center',
},
list: {
paddingBottom: 16,
},
listItem: {
flexDirection: 'row',
},
listItemNumber: {
fontWeight: 'bold',
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
},
listItemContent: {
flexShrink: 1,
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
},
};
export default ConnectEthereum;
diff --git a/native/account/registration/existing-ethereum-account.react.js b/native/account/registration/existing-ethereum-account.react.js
index 92bcf3066..06c160bc3 100644
--- a/native/account/registration/existing-ethereum-account.react.js
+++ b/native/account/registration/existing-ethereum-account.react.js
@@ -1,94 +1,129 @@
// @flow
import * as React from 'react';
-import { Text, Alert } from 'react-native';
+import { Text, View, Alert } from 'react-native';
import { siweAuthActionTypes } from 'lib/actions/siwe-actions.js';
+import { useENSName } from 'lib/hooks/ens-cache.js';
import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
+import type { SIWEResult } from 'lib/types/siwe-types.js';
import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import type { NavigationRoute } from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
import { useSIWEServerCall } from '../siwe-hooks.js';
const siweAuthLoadingStatusSelector =
createLoadingStatusSelector(siweAuthActionTypes);
-export type ExistingEthereumAccountParams = {
- +message: string,
- +signature: string,
-};
+export type ExistingEthereumAccountParams = SIWEResult;
type Props = {
+navigation: RegistrationNavigationProp<'ExistingEthereumAccount'>,
+route: NavigationRoute<'ExistingEthereumAccount'>,
};
function ExistingEthereumAccount(props: Props): React.Node {
const siweServerCallParams = React.useMemo(() => {
const onServerCallFailure = () => {
Alert.alert('Unknown error', 'Uhh... try again?', [{ text: 'OK' }], {
cancelable: false,
});
};
return { onFailure: onServerCallFailure };
}, []);
const siweServerCall = useSIWEServerCall(siweServerCallParams);
const { params } = props.route;
const onProceedToLogIn = React.useCallback(() => {
siweServerCall(params);
}, [siweServerCall, params]);
const siweAuthCallLoading = useSelector(
state => siweAuthLoadingStatusSelector(state) === 'loading',
);
+ const { address } = params;
+ const walletIdentifier = useENSName(address);
+ const walletIdentifierTitle =
+ walletIdentifier === address ? 'Ethereum wallet' : 'ENS name';
+
const { goBack } = props.navigation;
const styles = useStyles(unboundStyles);
return (
-
- Account already exists for Ethereum wallet
-
+ Account already exists for wallet
You can proceed to log in with this wallet, or go back and use a
different wallet.
+
+
+ {walletIdentifierTitle}
+
+
+
+ {walletIdentifier}
+
+
+
);
}
const unboundStyles = {
header: {
fontSize: 24,
color: 'panelForegroundLabel',
paddingBottom: 16,
},
body: {
fontSize: 15,
lineHeight: 20,
color: 'panelForegroundSecondaryLabel',
- paddingBottom: 16,
+ paddingBottom: 40,
+ },
+ walletTile: {
+ backgroundColor: 'panelForeground',
+ borderRadius: 8,
+ padding: 24,
+ alignItems: 'center',
+ },
+ walletIdentifierTitleText: {
+ fontSize: 17,
+ color: 'panelForegroundLabel',
+ textAlign: 'center',
+ },
+ walletIdentifier: {
+ backgroundColor: 'panelSecondaryForeground',
+ paddingVertical: 8,
+ paddingHorizontal: 24,
+ borderRadius: 56,
+ marginTop: 8,
+ alignItems: 'center',
+ },
+ walletIdentifierText: {
+ fontSize: 15,
+ color: 'panelForegroundLabel',
},
};
export default ExistingEthereumAccount;