Paths

Table of Contentst

-
lib/reducers/
-
reducers/
-
message-reducer.js

[lib] Don't delete pending messages during session recovery
ClosedPublic
Actions

Authored by ashoat on Jan 18 2024, 12:51 AM.

Details

Reviewers

tomek
inka
atul

Commits

rCOMM077530051e77: [lib] Don't delete pending messages during session recovery

Summary

Noticed that the pending messages in my test plan would get erased on LOG_IN_SUCCESS during session recovery. This diff makes sure we don't lose those pending messages.

NOTE: I wanted to check if the logged-in user has changed, but we can't make it until ENG-6126 is complete. That said, this should be a redundant check.

Depends on D10695

Test Plan

I tested this stack using the following procedure:

I tested primarily on native
1. I compiled a dev build and deployed it to an iOS simulator
2. I created a brand new account on my local keyserver using the iOS app
3. I ran Redux dev tools: cd native && yarn redux-devtools
4. I added a 30s sleep at the start of resolveKeyserverSessionInvalidation
5. I made KeyserverConnectionsHandler return null so that the socket wouldn’t automatically recover the session prior to my testing
6. I killed the app
7. I deleted all of the test user’s cookie
8. I then opened the app again and navigated to a chat and sent two messages
9. By following the Redux monitor, I was able to see that the keyserver session invalidation recovery was successful, and both messages were eventually sent after the 30s sleep concluded
On web, we don’t support keyserver session invalidation. However, I tested to make sure that the web app still loaded after my changes

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

ashoat created this revision.Jan 18 2024, 12:51 AM

ashoat added a child revision: D10697: [lib] Fix order of resolving keyserver calls after session recovery.

Harbormaster completed remote builds in B25872: Diff 35767.Jan 18 2024, 1:32 AM

ashoat requested review of this revision.Jan 18 2024, 1:32 AM

tomek accepted this revision.Jan 18 2024, 6:57 AM

tomek added inline comments.

lib/reducers/message-reducer.js
747 ↗	(On Diff #35767)	If we want to keep this log, we should make it more descriptive. But probably we don't need it.

This revision is now accepted and ready to land.Jan 18 2024, 6:57 AM

ashoat added inline comments.Jan 18 2024, 8:23 AM

lib/reducers/message-reducer.js
747 ↗	(On Diff #35767)	Oops, that was a mistake left over from testing! Thanks for pointing it out

Remove console.log and use a couple shorthands

Harbormaster completed remote builds in B25908: Diff 35809.Jan 18 2024, 10:11 AM

Closed by commit rCOMM077530051e77: [lib] Don't delete pending messages during session recovery (authored by ashoat). · Explain WhyJan 18 2024, 10:54 AM

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM077530051e77: [lib] Don't delete pending messages during session recovery.

Revision Contents
Changeset List

Path

Size

lib/

reducers/

message-reducer.js

23 lines

Diff 35809

View Options

lib/reducers/message-reducer.js

// @flow // @flow

import Icon from '@expo/vector-icons/FontAwesome.js'; import Icon from '@expo/vector-icons/FontAwesome.js';

import * as React from 'react'; import * as React from 'react';

import { import {

View, View,

Text, Text,

TouchableOpacity, TouchableOpacity,

Image, Image,

Keyboard, Keyboard,

Platform, Platform,

BackHandler, BackHandler,

ActivityIndicator, ActivityIndicator,

} from 'react-native'; } from 'react-native';

import Animated, { EasingNode } from 'react-native-reanimated'; import {

Easing,

useSharedValue,

withTiming,

useAnimatedStyle,

runOnJS,

} from 'react-native-reanimated';

import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';

import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js'; import { setActiveSessionRecoveryActionType } from 'lib/keyserver-conn/keyserver-conn-types.js';

import { cookieSelector } from 'lib/selectors/keyserver-selectors.js'; import { cookieSelector } from 'lib/selectors/keyserver-selectors.js';

import { isLoggedIn } from 'lib/selectors/user-selectors.js'; import { isLoggedIn } from 'lib/selectors/user-selectors.js';

import { recoveryFromReduxActionSources } from 'lib/types/account-types.js'; import { recoveryFromReduxActionSources } from 'lib/types/account-types.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 } from 'lib/utils/services-utils.js';

import { splashBackgroundURI } from './background-info.js'; import { splashBackgroundURI } from './background-info.js';

import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js'; import FullscreenSIWEPanel from './fullscreen-siwe-panel.react.js';

import LegacyRegisterPanel from './legacy-register-panel.react.js'; import LegacyRegisterPanel from './legacy-register-panel.react.js';

import type { LegacyRegisterState } from './legacy-register-panel.react.js'; import type { LegacyRegisterState } from './legacy-register-panel.react.js';

import LogInPanel from './log-in-panel.react.js'; import LogInPanel from './log-in-panel.react.js';

import type { LogInState } 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 LoggedOutStaffInfo from './logged-out-staff-info.react.js';

import { enableNewRegistrationMode } from './registration/registration-types.js'; import { enableNewRegistrationMode } from './registration/registration-types.js';

import { authoritativeKeyserverID } from '../authoritative-keyserver.js'; import { authoritativeKeyserverID } from '../authoritative-keyserver.js';

import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js'; import KeyboardAvoidingView from '../components/keyboard-avoiding-view.react.js';

import ConnectedStatusBar from '../connected-status-bar.react.js'; import ConnectedStatusBar from '../connected-status-bar.react.js';

import { useKeyboardHeight } from '../keyboard/animated-keyboard.js'; import { useRatchetingKeyboardHeight } from '../keyboard/animated-keyboard.js';

import { createIsForegroundSelector } from '../navigation/nav-selectors.js'; import { createIsForegroundSelector } from '../navigation/nav-selectors.js';

import { NavContext } from '../navigation/navigation-context.js'; import { NavContext } from '../navigation/navigation-context.js';

import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js';

import { import {

type NavigationRoute, type NavigationRoute,

LoggedOutModalRouteName, LoggedOutModalRouteName,

RegistrationRouteName, RegistrationRouteName,

QRCodeSignInNavigatorRouteName, QRCodeSignInNavigatorRouteName,

} from '../navigation/route-names.js'; } from '../navigation/route-names.js';

import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';

import { usePersistedStateLoaded } from '../selectors/app-state-selectors.js'; import { usePersistedStateLoaded } from '../selectors/app-state-selectors.js';

import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors.js'; import { derivedDimensionsInfoSelector } from '../selectors/dimensions-selectors.js';

import { splashStyleSelector } from '../splash.js'; import { splashStyleSelector } from '../splash.js';

import { useStyles } from '../themes/colors.js'; import { useStyles } from '../themes/colors.js';

import { import { AnimatedView } from '../types/styles.js';

runTiming,

ratchetAlongWithKeyboardHeight,

} from '../utils/animation-utils.js';

import EthereumLogo from '../vectors/ethereum-logo.react.js'; import EthereumLogo from '../vectors/ethereum-logo.react.js';

let initialAppLoad = true; let initialAppLoad = true;

const safeAreaEdges = ['top', 'bottom']; const safeAreaEdges = ['top', 'bottom'];

const {

Value,

Node,

Clock,

block,

set,

call,

cond,

not,

and,

eq,

neq,

lessThan,

greaterOrEq,

add,

sub,

divide,

max,

stopClock,

clockRunning,

useValue,

} = Animated;

export type LoggedOutMode = export type LoggedOutMode =

| 'loading' | 'loading'

| 'prompt' | 'prompt'

| 'log-in' | 'log-in'

| 'register' | 'register'

| 'siwe'; | 'siwe';

const modeNumbers: { [LoggedOutMode]: number } = {

'loading': 0, const timingConfig = {

'prompt': 1, duration: 250,

'log-in': 2, easing: Easing.out(Easing.ease),

'register': 3,

'siwe': 4,

}; };

function isPastPrompt(modeValue: Node) {

return and( // prettier-ignore

neq(modeValue, modeNumbers['loading']), function getPanelPaddingTop(

neq(modeValue, modeNumbers['prompt']), modeValue /*: string */,

keyboardHeightValue /*: number */,

contentHeightValue /*: number */,

) /*: number */ {

'worklet';

const headerHeight = Platform.OS === 'ios' ? 62.33 : 58.54;

let containerSize = headerHeight;

if (modeValue === 'loading' || modeValue === 'prompt') {

containerSize += Platform.OS === 'ios' ? 40 : 61;

} else if (modeValue === 'log-in') {

containerSize += 140;

} else if (modeValue === 'register') {

containerSize += Platform.OS === 'ios' ? 181 : 180;

} else if (modeValue === 'siwe') {

containerSize += 250;

}

const freeSpace = contentHeightValue - keyboardHeightValue - containerSize;

const targetPanelPaddingTop = Math.max(freeSpace, 0) / 2;

return withTiming(targetPanelPaddingTop, timingConfig);

}

// prettier-ignore

function getPanelOpacity(

modeValue /*: string */,

proceedToNextMode /*: () => void */,

) /*: number */ {

'worklet';

const targetPanelOpacity =

modeValue === 'loading' || modeValue === 'prompt' ? 0 : 1;

return withTiming(

targetPanelOpacity,

timingConfig,

(succeeded /*?: boolean */) => {

if (succeeded && targetPanelOpacity === 0) {

runOnJS(proceedToNextMode)();

}

); );

} }

const unboundStyles = { const unboundStyles = {

animationContainer: { animationContainer: {

flex: 1, flex: 1,

}, },

backButton: { backButton: {

▲ Show 20 Lines • Show All 191 Lines • ▼ Show 20 Lines baseSetMode(prevMode => ({

...prevMode, ...prevMode,

...newMode, ...newMode,

})); }));

}, []); }, []);

const nextModeRef = React.useRef<LoggedOutMode>(initialMode); const nextModeRef = React.useRef<LoggedOutMode>(initialMode);

const dimensions = useSelector(derivedDimensionsInfoSelector); const dimensions = useSelector(derivedDimensionsInfoSelector);

const contentHeight = useValue(dimensions.safeAreaHeight); const contentHeight = useSharedValue(dimensions.safeAreaHeight);

const modeValue = useValue(modeNumbers[initialMode]); const modeValue = useSharedValue(initialMode);

const buttonOpacity = useValue(persistedStateLoaded ? 1 : 0); const buttonOpacity = useSharedValue(persistedStateLoaded ? 1 : 0);

const [activeAlert, setActiveAlert] = React.useState(false);

const navContext = React.useContext(NavContext);

const isForeground = isForegroundSelector(navContext);

const keyboardHeightInput = React.useMemo(

() => ({

ignoreKeyboardDismissal: activeAlert,

disabled: !isForeground,

}),

[activeAlert, isForeground],

);

const keyboardHeightValue = useKeyboardHeight(keyboardHeightInput);

ashoatAuthorUnsubmitted

Done

These were just moved down (with useKeyboardHeight replaced by useRatchetingKeyboardHeight)

ashoat: These were just moved down (with `useKeyboardHeight` replaced by `useRatchetingKeyboardHeight`)

const prevModeValue = useValue(modeNumbers[initialMode]);

const panelPaddingTop = React.useMemo(() => {

const headerHeight = Platform.OS === 'ios' ? 62.33 : 58.54;

const promptButtonsSize = Platform.OS === 'ios' ? 40 : 61;

const logInContainerSize = 140;

const registerPanelSize = Platform.OS === 'ios' ? 181 : 180;

const siwePanelSize = 250;

const containerSize = add(

headerHeight,

cond(not(isPastPrompt(modeValue)), promptButtonsSize, 0),

cond(eq(modeValue, modeNumbers['log-in']), logInContainerSize, 0),

cond(eq(modeValue, modeNumbers['register']), registerPanelSize, 0),

cond(eq(modeValue, modeNumbers['siwe']), siwePanelSize, 0),

);

const potentialPanelPaddingTop = divide(

max(sub(contentHeight, keyboardHeightValue, containerSize), 0),

);

ashoatAuthorUnsubmitted

Done

These values are now determined in vanilla JavaScript by the getPanelPaddingTop worklet

ashoat: These values are now determined in vanilla JavaScript by the `getPanelPaddingTop` worklet

const panelPaddingTopValue = new Value(-1);

const targetPanelPaddingTop = new Value(-1);

const clock = new Clock();

const keyboardTimeoutClock = new Clock();

return block([

cond(lessThan(panelPaddingTopValue, 0), [

set(panelPaddingTopValue, potentialPanelPaddingTop),

set(targetPanelPaddingTop, potentialPanelPaddingTop),

]),

ashoatAuthorUnsubmitted

Done

This block was just for initializing values. It arguably was never needed in the first place (we could have just initialized the values above)

ashoat: This block was just for initializing values. It arguably was never needed in the first place…

cond(

lessThan(keyboardHeightValue, 0),

[

runTiming(keyboardTimeoutClock, 0, 1, true, { duration: 500 }),

cond(

not(clockRunning(keyboardTimeoutClock)),

set(keyboardHeightValue, 0),

stopClock(keyboardTimeoutClock),

ashoatAuthorUnsubmitted

Done

This logic is for handling when we set keyboardHeightValue to -1, which used to happen below in onPressLogIn and onPressRegister. The intention of that behavior was to wait for the keyboard to start appearing before starting the animation. The particular logic was there so that if the keyboard never appeared (eg. in an iOS simulator where the keyboard is disabled), then after the timeout clock ran out we would reset it to 0.

In this diff, I got rid of the logic that sets keyboardHeightValue to -1. In my experience playing around with the animations it didn't seem very important. Perhaps it mattered more before, or perhaps the new Reanimated 2 logic is snappier for some reason.

ashoat: This logic is for handling when we set `keyboardHeightValue` to -1, which used to happen below…

cond(

and(greaterOrEq(keyboardHeightValue, 0), neq(prevModeValue, modeValue)),

[

stopClock(clock),

cond(

neq(isPastPrompt(prevModeValue), isPastPrompt(modeValue)),

set(targetPanelPaddingTop, potentialPanelPaddingTop),

set(prevModeValue, modeValue),

ashoatAuthorUnsubmitted

Done

This logic was for deciding when to initiate a new animation.

Reanimated 2 and 3 seem to handle this slightly differently. It looks like they allow you to set a shared value to a withTiming repeatedly, and then the C++ logic somehow intelligently decides whether a new animation needs to be initiated based on whether the target value has changed, and whether there is an animation in progress

ashoat: This logic was for deciding when to initiate a new animation. Reanimated 2 and 3 seem to…

ratchetAlongWithKeyboardHeight(keyboardHeightValue, [

stopClock(clock),

set(targetPanelPaddingTop, potentialPanelPaddingTop),

]),

ashoatAuthorUnsubmitted

Done

This was replaced by useRatchetingKeyboardHeight . I initially tried to use useAnimatedKeyboard from Reanimated directly, but found that the animation seems a bit slower than the keyboard. Here's a comparison:

`useAnimatedKeyboard`	`useRatchetingKeyboardHeight`

ashoat: This was replaced by `useRatchetingKeyboardHeight `. I initially tried to use…

cond(

neq(panelPaddingTopValue, targetPanelPaddingTop),

set(

panelPaddingTopValue,

runTiming(clock, panelPaddingTopValue, targetPanelPaddingTop),

panelPaddingTopValue,

ashoatAuthorUnsubmitted

Done

This actually ran the animation, and is replaced by the withTiming call in the getPanelPaddingTop worklet

ashoat: This actually ran the animation, and is replaced by the `withTiming` call in the…

]);

}, [modeValue, contentHeight, keyboardHeightValue, prevModeValue]);

const proceedToNextMode = React.useCallback(() => { const proceedToNextMode = React.useCallback(() => {

setMode({ curMode: nextModeRef.current }); setMode({ curMode: nextModeRef.current });

}, [setMode]); }, [setMode]);

const panelOpacity = React.useMemo(() => {

const targetPanelOpacity = isPastPrompt(modeValue);

const panelOpacityValue = new Value(-1);

const prevPanelOpacity = new Value(-1);

const prevTargetPanelOpacity = new Value(-1);

const clock = new Clock();

return block([

cond(lessThan(panelOpacityValue, 0), [

set(panelOpacityValue, targetPanelOpacity),

set(prevPanelOpacity, targetPanelOpacity),

set(prevTargetPanelOpacity, targetPanelOpacity),

]),

ashoatAuthorUnsubmitted

Done

This block was just for initializing values. It arguably was never needed in the first place (we could have just initialized the values above)

ashoat: This block was just for initializing values. It arguably was never needed in the first place…

cond(greaterOrEq(keyboardHeightValue, 0), [

cond(neq(targetPanelOpacity, prevTargetPanelOpacity), [

stopClock(clock),

set(prevTargetPanelOpacity, targetPanelOpacity),

]),

ashoatAuthorUnsubmitted

Done

This logic was for deciding when to initiate a new animation.

ashoat: This logic was for deciding when to initiate a new animation. Reanimated 2 and 3 seem to…

cond(

neq(panelOpacityValue, targetPanelOpacity),

set(

panelOpacityValue,

runTiming(clock, panelOpacityValue, targetPanelOpacity),

ashoatAuthorUnsubmitted

Done

This actually ran the animation, and is replaced by the withTiming call in the getPanelOpacity worklet

ashoat: This actually ran the animation, and is replaced by the `withTiming` call in the…

]),

cond(

and(eq(panelOpacityValue, 0), neq(prevPanelOpacity, 0)),

call([], proceedToNextMode),

ashoatAuthorUnsubmitted

Done

This is replaced by the completion callback (third parameter) passed to withTiming in getPanelOpacity. I could have alternately used useAnimatedReaction instead of the completion callback – can change to that if preferred

ashoat: This is replaced by the completion callback (third parameter) passed to `withTiming` in…

set(prevPanelOpacity, panelOpacityValue),

panelOpacityValue,

]);

}, [modeValue, keyboardHeightValue, proceedToNextMode]);

const onPrompt = mode.curMode === 'prompt'; const onPrompt = mode.curMode === 'prompt';

const prevOnPromptRef = React.useRef(onPrompt); const prevOnPromptRef = React.useRef(onPrompt);

React.useEffect(() => { React.useEffect(() => {

if (onPrompt && !prevOnPromptRef.current) { if (onPrompt && !prevOnPromptRef.current) {

buttonOpacity.setValue(0); buttonOpacity.value = withTiming(1, {

Animated.timing(buttonOpacity, { easing: Easing.out(Easing.ease),

easing: EasingNode.out(EasingNode.ease), });

duration: 250,

toValue: 1.0,

}).start();

} }

prevOnPromptRef.current = onPrompt; prevOnPromptRef.current = onPrompt;

}, [onPrompt, buttonOpacity]); }, [onPrompt, buttonOpacity]);

const curContentHeight = dimensions.safeAreaHeight; const curContentHeight = dimensions.safeAreaHeight;

const prevContentHeightRef = React.useRef(curContentHeight); const prevContentHeightRef = React.useRef(curContentHeight);

React.useEffect(() => { React.useEffect(() => {

if (curContentHeight === prevContentHeightRef.current) { if (curContentHeight === prevContentHeightRef.current) {

return; return;

} }

prevContentHeightRef.current = curContentHeight; prevContentHeightRef.current = curContentHeight;

contentHeight.setValue(curContentHeight); contentHeight.value = curContentHeight;

}, [curContentHeight, contentHeight]); }, [curContentHeight, contentHeight]);

const combinedSetMode = React.useCallback( const combinedSetMode = React.useCallback(

(newMode: LoggedOutMode) => { (newMode: LoggedOutMode) => {

nextModeRef.current = newMode; nextModeRef.current = newMode;

setMode({ curMode: newMode, nextMode: newMode }); setMode({ curMode: newMode, nextMode: newMode });

modeValue.setValue(modeNumbers[newMode]); modeValue.value = newMode;

}, },

[setMode, modeValue], [setMode, modeValue],

); );

const goBackToPrompt = React.useCallback(() => { const goBackToPrompt = React.useCallback(() => {

nextModeRef.current = 'prompt'; nextModeRef.current = 'prompt';

setMode({ nextMode: 'prompt' }); setMode({ nextMode: 'prompt' });

keyboardHeightValue.setValue(0); modeValue.value = 'prompt';

inkaUnsubmitted

Not Done

What is this replaced by?

inka: What is this replaced by?

ashoatAuthorUnsubmitted

Done

It's actually not replaced. I'm not sure it needs to be, given that the Keyboard.dismiss() call will result in it eventually being set to 0... the animation is clean without it, and having this here breaks the clean separation introduced in D12207

ashoat: It's actually not replaced. I'm not sure it needs to be, given that the `Keyboard.dismiss()`…

modeValue.setValue(modeNumbers['prompt']);

Keyboard.dismiss(); Keyboard.dismiss();

}, [setMode, keyboardHeightValue, modeValue]); }, [setMode, modeValue]);

const loadingCompleteRef = React.useRef(persistedStateLoaded); const loadingCompleteRef = React.useRef(persistedStateLoaded);

React.useEffect(() => { React.useEffect(() => {

if (!loadingCompleteRef.current && persistedStateLoaded) { if (!loadingCompleteRef.current && persistedStateLoaded) {

combinedSetMode('prompt'); combinedSetMode('prompt');

loadingCompleteRef.current = true; loadingCompleteRef.current = true;

} }

}, [persistedStateLoaded, combinedSetMode]); }, [persistedStateLoaded, combinedSetMode]);

const [activeAlert, setActiveAlert] = React.useState(false);

const navContext = React.useContext(NavContext);

const isForeground = isForegroundSelector(navContext);

const ratchetingKeyboardHeightInput = React.useMemo(

() => ({

ignoreKeyboardDismissal: activeAlert,

disabled: !isForeground,

}),

[activeAlert, isForeground],

);

const keyboardHeightValue = useRatchetingKeyboardHeight(

ratchetingKeyboardHeightInput,

);

const resetToPrompt = React.useCallback(() => { const resetToPrompt = React.useCallback(() => {

if (nextModeRef.current !== 'prompt') { if (nextModeRef.current !== 'prompt') {

goBackToPrompt(); goBackToPrompt();

return true; return true;

} }

return false; return false;

}, [goBackToPrompt]); }, [goBackToPrompt]);

React.useEffect(() => { React.useEffect(() => {

▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Lines React.useEffect(() => {

}); });

}, [rehydrateConcluded, loggedIn, cookie, dispatch]); }, [rehydrateConcluded, loggedIn, cookie, dispatch]);

const onPressSIWE = React.useCallback(() => { const onPressSIWE = React.useCallback(() => {

combinedSetMode('siwe'); combinedSetMode('siwe');

}, [combinedSetMode]); }, [combinedSetMode]);

const onPressLogIn = React.useCallback(() => { const onPressLogIn = React.useCallback(() => {

if (Platform.OS !== 'ios') {

// For some strange reason, iOS's password management logic doesn't

// realize that the username and password fields in LogInPanel are related

// if the username field gets focused on mount. To avoid this issue we

// need the username and password fields to both appear on-screen before

// we focus the username field. However, when we set keyboardHeightValue

// to -1 here, we are telling our Reanimated logic to wait until the

// keyboard appears before showing LogInPanel. Since we need LogInPanel to

// appear before the username field is focused, we need to avoid this

// behavior on iOS.

keyboardHeightValue.setValue(-1);

}

combinedSetMode('log-in'); combinedSetMode('log-in');

}, [keyboardHeightValue, combinedSetMode]); }, [combinedSetMode]);

const { navigate } = props.navigation; const { navigate } = props.navigation;

const onPressQRCodeSignIn = React.useCallback(() => { const onPressQRCodeSignIn = React.useCallback(() => {

navigate(QRCodeSignInNavigatorRouteName); navigate(QRCodeSignInNavigatorRouteName);

}, [navigate]); }, [navigate]);

const onPressRegister = React.useCallback(() => { const onPressRegister = React.useCallback(() => {

keyboardHeightValue.setValue(-1);

combinedSetMode('register'); combinedSetMode('register');

}, [keyboardHeightValue, combinedSetMode]); }, [combinedSetMode]);

const onPressNewRegister = React.useCallback(() => { const onPressNewRegister = React.useCallback(() => {

navigate(RegistrationRouteName); navigate(RegistrationRouteName);

}, [navigate]); }, [navigate]);

const opacityStyle = useAnimatedStyle(() => ({

opacity: getPanelOpacity(modeValue.value, proceedToNextMode),

}));

const styles = useStyles(unboundStyles); const styles = useStyles(unboundStyles);

const panel = React.useMemo(() => { const panel = React.useMemo(() => {

if (mode.curMode === 'log-in') { if (mode.curMode === 'log-in') {

return ( return (

<LogInPanel <LogInPanel

setActiveAlert={setActiveAlert} setActiveAlert={setActiveAlert}

opacityValue={panelOpacity} opacityStyle={opacityStyle}

logInState={logInStateContainer} logInState={logInStateContainer}

/> />

); );

} else if (mode.curMode === 'register') { } else if (mode.curMode === 'register') {

return ( return (

<LegacyRegisterPanel <LegacyRegisterPanel

setActiveAlert={setActiveAlert} setActiveAlert={setActiveAlert}

opacityValue={panelOpacity} opacityStyle={opacityStyle}

legacyRegisterState={legacyRegisterStateContainer} legacyRegisterState={legacyRegisterStateContainer}

/> />

); );

} else if (mode.curMode === 'loading') { } else if (mode.curMode === 'loading') {

return ( return (

<ActivityIndicator <ActivityIndicator

color="white" color="white"

size="large" size="large"

style={styles.loadingIndicator} style={styles.loadingIndicator}

/> />

); );

} }

return null; return null;

}, [ }, [

mode.curMode, mode.curMode,

setActiveAlert, setActiveAlert,

panelOpacity, opacityStyle,

logInStateContainer, logInStateContainer,

legacyRegisterStateContainer, legacyRegisterStateContainer,

styles.loadingIndicator, styles.loadingIndicator,

]); ]);

const classicAuthButtonStyle = React.useMemo( const classicAuthButtonStyle = React.useMemo(

() => [styles.button, styles.classicAuthButton], () => [styles.button, styles.classicAuthButton],

[styles.button, styles.classicAuthButton], [styles.button, styles.classicAuthButton],

); );

const classicAuthButtonTextStyle = React.useMemo( const classicAuthButtonTextStyle = React.useMemo(

() => [styles.buttonText, styles.classicAuthButtonText], () => [styles.buttonText, styles.classicAuthButtonText],

[styles.buttonText, styles.classicAuthButtonText], [styles.buttonText, styles.classicAuthButtonText],

); );

const siweAuthButtonStyle = React.useMemo( const siweAuthButtonStyle = React.useMemo(

() => [styles.button, styles.siweButton], () => [styles.button, styles.siweButton],

[styles.button, styles.siweButton], [styles.button, styles.siweButton],

); );

const siweAuthButtonTextStyle = React.useMemo( const siweAuthButtonTextStyle = React.useMemo(

() => [styles.buttonText, styles.siweButtonText], () => [styles.buttonText, styles.siweButtonText],

[styles.buttonText, styles.siweButtonText], [styles.buttonText, styles.siweButtonText],

); );

const buttonsViewStyle = React.useMemo( const buttonsViewStyle = React.useMemo(

() => [styles.buttonContainer, { opacity: buttonOpacity }], () => [styles.buttonContainer, { opacity: buttonOpacity.value }],

[styles.buttonContainer, buttonOpacity], [styles.buttonContainer, buttonOpacity],

); );

const buttons = React.useMemo(() => { const buttons = React.useMemo(() => {

if (mode.curMode !== 'prompt') { if (mode.curMode !== 'prompt') {

return null; return null;

} }

const registerButtons = []; const registerButtons = [];

Show All 40 Lines if (__DEV__) {

key="qr-code-login" key="qr-code-login"

> >

</TouchableOpacity>, </TouchableOpacity>,

); );

} }

return ( return (

<Animated.View style={buttonsViewStyle}> <AnimatedView style={buttonsViewStyle}>

<TouchableOpacity <TouchableOpacity

onPress={onPressSIWE} onPress={onPressSIWE}

style={siweAuthButtonStyle} style={siweAuthButtonStyle}

activeOpacity={0.6} activeOpacity={0.6}

> >

</View> </View>

<Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text> <Text style={siweAuthButtonTextStyle}>Sign in with Ethereum</Text>

</TouchableOpacity> </TouchableOpacity>

</View> </View>

<View style={styles.signInButtons}>{signInButtons}</View> <View style={styles.signInButtons}>{signInButtons}</View>

<View style={styles.registerButtons}>{registerButtons}</View> <View style={styles.registerButtons}>{registerButtons}</View>

</Animated.View> </AnimatedView>

); );

}, [ }, [

mode.curMode, mode.curMode,

onPressRegister, onPressRegister,

onPressNewRegister, onPressNewRegister,

onPressLogIn, onPressLogIn,

onPressQRCodeSignIn, onPressQRCodeSignIn,

onPressSIWE, onPressSIWE,

Show All 10 Lines const buttons = React.useMemo(() => {

styles.signInButtons, styles.signInButtons,

styles.registerButtons, styles.registerButtons,

]); ]);

const windowWidth = dimensions.width; const windowWidth = dimensions.width;

const backButtonStyle = React.useMemo( const backButtonStyle = React.useMemo(

() => [ () => [

styles.backButton, styles.backButton,

{ opacity: panelOpacity, left: windowWidth < 360 ? 28 : 40 }, opacityStyle,

{ left: windowWidth < 360 ? 28 : 40 },

], ],

[styles.backButton, panelOpacity, windowWidth], [styles.backButton, opacityStyle, windowWidth],

); );

const paddingTopStyle = useAnimatedStyle(() => ({

paddingTop: getPanelPaddingTop(

modeValue.value,

keyboardHeightValue.value,

contentHeight.value,

}));

const animatedContentStyle = React.useMemo( const animatedContentStyle = React.useMemo(

() => [styles.animationContainer, { paddingTop: panelPaddingTop }], () => [styles.animationContainer, paddingTopStyle],

[styles.animationContainer, panelPaddingTop], [styles.animationContainer, paddingTopStyle],

); );

const animatedContent = React.useMemo( const animatedContent = React.useMemo(

() => ( () => (

<Animated.View style={animatedContentStyle}> <AnimatedView style={animatedContentStyle}>

<Animated.View style={backButtonStyle}> <AnimatedView style={backButtonStyle}>

</TouchableOpacity> </TouchableOpacity>

</Animated.View> </AnimatedView>

</View> </View>

{panel} {panel}

</Animated.View> </AnimatedView>

), ),

[ [

animatedContentStyle, animatedContentStyle,

styles.header, styles.header,

backButtonStyle, backButtonStyle,

resetToPrompt, resetToPrompt,

panel, panel,

], ],

▲ Show 20 Lines • Show All 43 Lines • Show Last 20 Lines

[lib] Don't delete pending messages during session recoveryClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 35809

lib/reducers/message-reducer.js

[lib] Don't delete pending messages during session recovery
ClosedPublic
Actions

Revision Contents
Changeset List