Paths

Table of Contentst

-
web/chat/
-
chat/
-
composed-message.react.js

Differential D13670

[web] Remove unused InputState from ComposedMessage
ClosedPublic
Actions

Authored by ashoat on Oct 9 2024, 8:19 PM.

Details

Reviewers

tomek

Commits

rCOMM9fb577279e27: [web] Remove unused InputState from ComposedMessage

Test Plan

Flow

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ashoat created this revision.Oct 9 2024, 8:19 PM

ashoat added a child revision: D13671: [web] Remove duplicate containsInlineEngagement property.

Harbormaster completed remote builds in B32154: Diff 45028.Oct 9 2024, 8:37 PM

ashoat requested review of this revision.Oct 9 2024, 8:37 PM

tomek accepted this revision.Oct 10 2024, 6:57 AM

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

Closed by commit rCOMM9fb577279e27: [web] Remove unused InputState from ComposedMessage (authored by ashoat). · Explain WhyOct 13 2024, 6:43 PM

This revision was automatically updated to reflect the committed changes.

ashoat added a commit: rCOMM9fb577279e27: [web] Remove unused InputState from ComposedMessage.

Revision Contents
Changeset List

Path

Size

web/

chat/

composed-message.react.js

5 lines

Diff 45111

View Options

web/chat/composed-message.react.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

[web] Remove unused InputState from ComposedMessageClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 45111

web/chat/composed-message.react.js

[web] Remove unused InputState from ComposedMessage
ClosedPublic
Actions

Revision Contents
Changeset List