Paths

Table of Contentst

-
native/
-
cpp/CommonCpp/
-
CommonCpp/
-
NativeModules/
-
CommRustModule.h
-
CommRustModule.cpp
-
_generated/
-
rustJSI-generated.cpp
-
rustJSI.h
-
native_rust_library/src/
-
src/
-
exact_user_search.rs
-
lib.rs
-
schema/
-
CommRustModuleSchema.js

[native] add findUserIDForWalletAddress to CommRustModule
ClosedPublic
Actions

Authored by varun on Feb 15 2024, 1:30 PM.

Details

Reviewers

bartek
kamil

Commits

rCOMM46366c847b3a: [native] add findUserIDForWalletAddress to CommRustModule

Summary

CommRustModule bindings and rust client method implementation

Depends on D11084

Test Plan

called the JSI function from JS and successfully retrieved the user ID associated with a wallet address in my local DDB

diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js
index 02dd3fbed..2b49412d4 100644
--- a/native/account/siwe-panel.react.js
+++ b/native/account/siwe-panel.react.js
@@ -28,6 +28,7 @@ import { UnknownErrorAlertDetails } from '../utils/alert-messages.js';
 import Alert from '../utils/alert.js';
 import { getContentSigningKey } from '../utils/crypto-utils.js';
 import { defaultLandingURLPrefix } from '../utils/url-utils.js';
+import { commRustModule } from '../native-modules.js';
 
 const commSIWE = `${defaultLandingURLPrefix}/siwe`;
 
@@ -110,6 +111,12 @@ function SIWEPanel(props: Props): React.Node {
         );
       }
 
+      const identityUserID = await commRustModule.findUserIDForWalletAddress(
+        '0xF8b57E5eD505bC6fAfFC765c1AC8569063664c28',
+      );
+      console.log(identityUserID);
+      const parsedIdentityResponse = JSON.parse(identityUserID);
+      console.log(parsedIdentityResponse.userID);
       const ed25519 = await getContentSigningKey();
       setPrimaryIdentityPublicKey(ed25519);
     })();

LOG  {"userID":"C81FF954-6216-4489-B23C-0EA145EA2003","isReserved":false}
LOG  C81FF954-6216-4489-B23C-0EA145EA2003

Diff Detail

Repository

rCOMM Comm

Lint

No Lint Coverage

Unit

No Test Coverage

Event Timeline

varun created this revision.Feb 15 2024, 1:30 PM

Herald added subscribers: tomek, ashoat. · View Herald TranscriptFeb 15 2024, 1:30 PM

varun edited the test plan for this revision. (Show Details)Feb 15 2024, 1:30 PM

varun edited the test plan for this revision. (Show Details)

Harbormaster completed remote builds in B26940: Diff 37281.Feb 15 2024, 1:46 PM

varun requested review of this revision.Feb 15 2024, 1:46 PM

Can you explain more about why we need this?
Why is it specific to wallet address rather than general to usernames?
Does it call the identity service?

varun added a child revision: D11005: [native] use identity wallet login in fullscreen-siwe-panel.Feb 15 2024, 2:23 PM

In D11098#320486, @ashoat wrote:

Can you explain more about why we need this?

I just updated D11005 to use this, but the gist is, we need to check if a user already exists for a given wallet address so that we can decide whether to call identityWalletLogIn, identityWalletRegister, or onAccountDoesNotExist

Initially I wanted to just try login and check for a "does not exist" error, but we remove the nonce from DDB on the login call (i think this is the right thing to do to prevent replay attacks), so the client would have to get a new nonce and sign a new message to subsequently register, which would be a bad user experience.

Why is it specific to wallet address rather than general to usernames?

I initially tried making it more general but because the RPC expects an Identifier enum (with variants WalletAddress and Username), we'd need to pass an enum from C++ to rust, which seemed like more trouble than it was worth.

Does it call the identity service?

yes

We also need findUserIDForWalletAddress to determine whether to navigate to ExistingEthereumAccount from ConnectEthereum

Thanks for explaining!

but we remove the nonce from DDB on the login call (i think this is the right thing to do to prevent replay attacks)

I'm not so sure about the replay attack stuff. But looking at your code, it seems like FullscreenSIWEPanel is the only place that will need an extra round trip here, and that component should go away after we launch secondary device auth via primary device.

In D11098#320515, @varun wrote:

We also need findUserIDForWalletAddress to determine whether to navigate to ExistingEthereumAccount from ConnectEthereum

We'll need this one long-term.

~~One last question – why not use the existing RPC FindUserID? Is it just the C++-to-Rust enum thing?~~

ashoat added inline comments.Feb 15 2024, 3:11 PM

native/native_rust_library/src/exact_user_search.rs
45	Ah never mind, that's what it's doing

Makes sense to me. We can easily refactor this in the future when we find a better way of passing enums JS -> C++ -> Rust

In D11098#320512, @varun wrote:

Initially I wanted to just try login and check for a "does not exist" error, but we remove the nonce from DDB on the login call (i think this is the right thing to do to prevent replay attacks), so the client would have to get a new nonce and sign a new message to subsequently register, which would be a bad user experience.

In D11098#320516, @ashoat wrote:

Thanks for explaining!

but we remove the nonce from DDB on the login call (i think this is the right thing to do to prevent replay attacks)

I'm not so sure about the replay attack stuff. [...]

I think @varun just mentioned the same problem we have in the "restore" whitepaper protocol - we want to avoid running the SIWE login procedure twice and it's a bad UX

This revision is now accepted and ready to land.Feb 15 2024, 10:23 PM

kamil accepted this revision.Feb 16 2024, 6:54 AM

Closed by commit rCOMM46366c847b3a: [native] add findUserIDForWalletAddress to CommRustModule (authored by varun). · Explain WhyFeb 16 2024, 7:20 AM

This revision was automatically updated to reflect the committed changes.

varun added a commit: rCOMM46366c847b3a: [native] add findUserIDForWalletAddress to CommRustModule.

Revision Contents
Changeset List

Path

Size

native/

cpp/

CommonCpp/

NativeModules/

CommRustModule.h

3 lines

CommRustModule.cpp

21 lines

_generated/

rustJSI-generated.cpp

rustJSI.h

native_rust_library/

src/

exact_user_search.rs

54 lines

lib.rs

5 lines

schema/

CommRustModuleSchema.js

1 line

Diff 37281

View Options

native/cpp/CommonCpp/NativeModules/CommRustModule.h

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';		import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated';		import Animated, {
		FadeOut,
		withTiming,
		// eslint-disable-next-line no-unused-vars
		type EntryAnimationsValues,
		// eslint-disable-next-line no-unused-vars
		type ExitAnimationsValues,
		} from 'react-native-reanimated';

import type { AppNavigationProp } from '../navigation/app-navigator.react.js';		import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';		import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type {		import type {
LayoutCoordinates,		LayoutCoordinates,
VerticalBounds,		VerticalBounds,
} from '../types/layout-types.js';		} from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js';		import type { LayoutEvent } from '../types/react-native.js';
import {		import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';

const { Value, Extrapolate, add, multiply, interpolateNode } = Animated;		const { Value } = Animated;

const animationDuration = 150;		const animationDuration = 150;

const unboundStyles = {		const unboundStyles = {
backdrop: {		backdrop: {
backgroundColor: 'black',		backgroundColor: 'black',
bottom: 0,		bottom: 0,
left: 0,		left: 0,
Show All 39 Lines	export type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds,		+verticalBounds: VerticalBounds,
};		};

export type NUXTipsOverlayProps = {		export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>,		+navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>,		+route: NavigationRoute<'NUXTipsOverlay'>,
};		};

const tipHeight: number = 30;
const margin: number = 20;		const margin: number = 20;
		const tipContainerTranslateY = -80;

function opacityEnteringAnimation() {		function opacityEnteringAnimation() {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0.7, { duration: animationDuration }),		opacity: withTiming(0.7, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0,		opacity: 0,
},		},
};		};
}		}

function createNUXTipsOverlay(		function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,		ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,
tipText: string,		tipText: string,
): React.ComponentType<NUXTipsOverlayProps> {		): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) {		function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions);		const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');		invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { onExitFinish } = overlayContext;		const { onExitFinish } = overlayContext;

const position = React.useMemo(() => new Animated.Value(1), []);

const { navigation, route } = props;		const { navigation, route } = props;

const { goBackOnce } = navigation;		const { goBackOnce } = navigation;

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

const contentContainerStyle = React.useMemo(() => {		const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params;		const { verticalBounds } = route.params;
Show All 37 Lines	const onTipContainerLayout = React.useCallback(
} else {		} else {
const minWidth = width + 2 * extraRightSpace;		const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);		tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
}		}
},		},
[dimensions.width, initialCoordinates, tipHorizontalOffset],		[dimensions.width, initialCoordinates, tipHorizontalOffset],
);		);

const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);

const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const baseTipContainerStyle = React.useMemo(() => {		const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates;		const { y, x, height, width } = initialCoordinates;

const top =		const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;		Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;

const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines	const baseTipContainerStyle = React.useMemo(() => {
}		}
}, [		}, [
dimensions.width,		dimensions.width,
initialCoordinates,		initialCoordinates,
verticalBounds.height,		verticalBounds.height,
verticalBounds.y,		verticalBounds.y,
]);		]);

const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;

const transform: Array<ReanimatedTransform> = [];

transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;

return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);

const triangleStyle = React.useMemo(() => {		const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates;		const { x, width } = initialCoordinates;
const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {		if (extraLeftSpace < extraRightSpace) {
return {		return {
alignSelf: 'flex-start',		alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2,		left: extraLeftSpace + (4 / 10) * width,
};		};
} else {		} else {
return {		return {
alignSelf: 'flex-end',		alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2,		right: extraRightSpace + (4 / 10) * width,
};		};
}		}
}, [dimensions.width, initialCoordinates]);		}, [dimensions.width, initialCoordinates]);

const opacityExitingAnimation = React.useCallback(() => {		const opacityExitingAnimation = React.useCallback(() => {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0, { duration: animationDuration }),		opacity: withTiming(0, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0.7,		opacity: 0.7,
},		},
callback: onExitFinish,		callback: onExitFinish,
};		};
}, [onExitFinish]);		}, [onExitFinish]);

		// prettier-ignore
		const tipContainerEnteringAnimation = React.useCallback(
		(values/: EntryAnimationsValues/) => {
		'worklet';

		const initialX =
		(-values.targetWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const initialY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(1, { duration: animationDuration }),
		transform: [
		{ translateX: withTiming(0, { duration: animationDuration }) },
		{ translateY: withTiming(0, { duration: animationDuration }) },
		{ scale: withTiming(1, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 0,
		transform: [
		{ translateX: initialX },
		{ translateY: initialY },
		{ scale: 0 },
		],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

		// prettier-ignore
		const tipContainerExitingAnimation = React.useCallback(
		(values/: ExitAnimationsValues/) => {
		'worklet';

		const toValueX =
		(-values.currentWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const toValueY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(0, { duration: animationDuration }),
		transform: [
		{
		translateX: withTiming(toValueX, {
		duration: animationDuration,
		}),
		},
		{
		translateY: withTiming(toValueY, {
		duration: animationDuration,
		}),
		},
		{ scale: withTiming(0, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 1,
		transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

return (		return (
<TouchableWithoutFeedback onPress={goBackOnce}>		<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>		<View style={styles.container}>
<AnimatedView		<AnimatedView
style={styles.backdrop}		style={styles.backdrop}
// $FlowFixMe		// $FlowFixMe
entering={opacityEnteringAnimation}		entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation}		exiting={opacityExitingAnimation}
/>		/>
<View style={contentContainerStyle}>		<View style={contentContainerStyle}>
<View style={buttonStyle}>		<Animated.View
		style={buttonStyle}
		exiting={FadeOut.duration(animationDuration)}
		>
<ButtonComponent navigation={props.navigation} route={route} />		<ButtonComponent navigation={props.navigation} route={route} />
</View>		</Animated.View>
</View>		</View>
<AnimatedView		<AnimatedView
style={tipContainerStyle}		style={baseTipContainerStyle}
onLayout={onTipContainerLayout}		onLayout={onTipContainerLayout}
		entering={tipContainerEnteringAnimation}
		exiting={tipContainerExitingAnimation}
>		>
<View style={[styles.triangleUp, triangleStyle]} />		<View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}>		<View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text>		<Text style={styles.tipText}>{tipText}</Text>
</View>		</View>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
Show All 16 Lines

View Options

native/cpp/CommonCpp/NativeModules/CommRustModule.cpp

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';		import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated';		import Animated, {
		FadeOut,
		withTiming,
		// eslint-disable-next-line no-unused-vars
		type EntryAnimationsValues,
		// eslint-disable-next-line no-unused-vars
		type ExitAnimationsValues,
		} from 'react-native-reanimated';

import type { AppNavigationProp } from '../navigation/app-navigator.react.js';		import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';		import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type {		import type {
LayoutCoordinates,		LayoutCoordinates,
VerticalBounds,		VerticalBounds,
} from '../types/layout-types.js';		} from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js';		import type { LayoutEvent } from '../types/react-native.js';
import {		import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';

const { Value, Extrapolate, add, multiply, interpolateNode } = Animated;		const { Value } = Animated;

const animationDuration = 150;		const animationDuration = 150;

const unboundStyles = {		const unboundStyles = {
backdrop: {		backdrop: {
backgroundColor: 'black',		backgroundColor: 'black',
bottom: 0,		bottom: 0,
left: 0,		left: 0,
Show All 39 Lines	export type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds,		+verticalBounds: VerticalBounds,
};		};

export type NUXTipsOverlayProps = {		export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>,		+navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>,		+route: NavigationRoute<'NUXTipsOverlay'>,
};		};

const tipHeight: number = 30;
const margin: number = 20;		const margin: number = 20;
		const tipContainerTranslateY = -80;

function opacityEnteringAnimation() {		function opacityEnteringAnimation() {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0.7, { duration: animationDuration }),		opacity: withTiming(0.7, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0,		opacity: 0,
},		},
};		};
}		}

function createNUXTipsOverlay(		function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,		ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,
tipText: string,		tipText: string,
): React.ComponentType<NUXTipsOverlayProps> {		): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) {		function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions);		const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');		invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { onExitFinish } = overlayContext;		const { onExitFinish } = overlayContext;

const position = React.useMemo(() => new Animated.Value(1), []);

const { navigation, route } = props;		const { navigation, route } = props;

const { goBackOnce } = navigation;		const { goBackOnce } = navigation;

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

const contentContainerStyle = React.useMemo(() => {		const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params;		const { verticalBounds } = route.params;
Show All 37 Lines	const onTipContainerLayout = React.useCallback(
} else {		} else {
const minWidth = width + 2 * extraRightSpace;		const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);		tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
}		}
},		},
[dimensions.width, initialCoordinates, tipHorizontalOffset],		[dimensions.width, initialCoordinates, tipHorizontalOffset],
);		);

const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);

const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const baseTipContainerStyle = React.useMemo(() => {		const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates;		const { y, x, height, width } = initialCoordinates;

const top =		const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;		Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;

const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines	const baseTipContainerStyle = React.useMemo(() => {
}		}
}, [		}, [
dimensions.width,		dimensions.width,
initialCoordinates,		initialCoordinates,
verticalBounds.height,		verticalBounds.height,
verticalBounds.y,		verticalBounds.y,
]);		]);

const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;

const transform: Array<ReanimatedTransform> = [];

transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;

return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);

const triangleStyle = React.useMemo(() => {		const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates;		const { x, width } = initialCoordinates;
const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {		if (extraLeftSpace < extraRightSpace) {
return {		return {
alignSelf: 'flex-start',		alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2,		left: extraLeftSpace + (4 / 10) * width,
};		};
} else {		} else {
return {		return {
alignSelf: 'flex-end',		alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2,		right: extraRightSpace + (4 / 10) * width,
};		};
}		}
}, [dimensions.width, initialCoordinates]);		}, [dimensions.width, initialCoordinates]);

const opacityExitingAnimation = React.useCallback(() => {		const opacityExitingAnimation = React.useCallback(() => {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0, { duration: animationDuration }),		opacity: withTiming(0, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0.7,		opacity: 0.7,
},		},
callback: onExitFinish,		callback: onExitFinish,
};		};
}, [onExitFinish]);		}, [onExitFinish]);

		// prettier-ignore
		const tipContainerEnteringAnimation = React.useCallback(
		(values/: EntryAnimationsValues/) => {
		'worklet';

		const initialX =
		(-values.targetWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const initialY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(1, { duration: animationDuration }),
		transform: [
		{ translateX: withTiming(0, { duration: animationDuration }) },
		{ translateY: withTiming(0, { duration: animationDuration }) },
		{ scale: withTiming(1, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 0,
		transform: [
		{ translateX: initialX },
		{ translateY: initialY },
		{ scale: 0 },
		],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

		// prettier-ignore
		const tipContainerExitingAnimation = React.useCallback(
		(values/: ExitAnimationsValues/) => {
		'worklet';

		const toValueX =
		(-values.currentWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const toValueY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(0, { duration: animationDuration }),
		transform: [
		{
		translateX: withTiming(toValueX, {
		duration: animationDuration,
		}),
		},
		{
		translateY: withTiming(toValueY, {
		duration: animationDuration,
		}),
		},
		{ scale: withTiming(0, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 1,
		transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

return (		return (
<TouchableWithoutFeedback onPress={goBackOnce}>		<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>		<View style={styles.container}>
<AnimatedView		<AnimatedView
style={styles.backdrop}		style={styles.backdrop}
// $FlowFixMe		// $FlowFixMe
entering={opacityEnteringAnimation}		entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation}		exiting={opacityExitingAnimation}
/>		/>
<View style={contentContainerStyle}>		<View style={contentContainerStyle}>
<View style={buttonStyle}>		<Animated.View
		style={buttonStyle}
		exiting={FadeOut.duration(animationDuration)}
		>
<ButtonComponent navigation={props.navigation} route={route} />		<ButtonComponent navigation={props.navigation} route={route} />
</View>		</Animated.View>
</View>		</View>
<AnimatedView		<AnimatedView
style={tipContainerStyle}		style={baseTipContainerStyle}
onLayout={onTipContainerLayout}		onLayout={onTipContainerLayout}
		entering={tipContainerEnteringAnimation}
		exiting={tipContainerExitingAnimation}
>		>
<View style={[styles.triangleUp, triangleStyle]} />		<View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}>		<View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text>		<Text style={styles.tipText}>{tipText}</Text>
</View>		</View>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
Show All 16 Lines

View Options

native/cpp/CommonCpp/_generated/rustJSI-generated.cpp

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';		import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated';		import Animated, {
		FadeOut,
		withTiming,
		// eslint-disable-next-line no-unused-vars
		type EntryAnimationsValues,
		// eslint-disable-next-line no-unused-vars
		type ExitAnimationsValues,
		} from 'react-native-reanimated';

import type { AppNavigationProp } from '../navigation/app-navigator.react.js';		import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';		import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type {		import type {
LayoutCoordinates,		LayoutCoordinates,
VerticalBounds,		VerticalBounds,
} from '../types/layout-types.js';		} from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js';		import type { LayoutEvent } from '../types/react-native.js';
import {		import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';

const { Value, Extrapolate, add, multiply, interpolateNode } = Animated;		const { Value } = Animated;

const animationDuration = 150;		const animationDuration = 150;

const unboundStyles = {		const unboundStyles = {
backdrop: {		backdrop: {
backgroundColor: 'black',		backgroundColor: 'black',
bottom: 0,		bottom: 0,
left: 0,		left: 0,
Show All 39 Lines	export type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds,		+verticalBounds: VerticalBounds,
};		};

export type NUXTipsOverlayProps = {		export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>,		+navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>,		+route: NavigationRoute<'NUXTipsOverlay'>,
};		};

const tipHeight: number = 30;
const margin: number = 20;		const margin: number = 20;
		const tipContainerTranslateY = -80;

function opacityEnteringAnimation() {		function opacityEnteringAnimation() {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0.7, { duration: animationDuration }),		opacity: withTiming(0.7, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0,		opacity: 0,
},		},
};		};
}		}

function createNUXTipsOverlay(		function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,		ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,
tipText: string,		tipText: string,
): React.ComponentType<NUXTipsOverlayProps> {		): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) {		function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions);		const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');		invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { onExitFinish } = overlayContext;		const { onExitFinish } = overlayContext;

const position = React.useMemo(() => new Animated.Value(1), []);

const { navigation, route } = props;		const { navigation, route } = props;

const { goBackOnce } = navigation;		const { goBackOnce } = navigation;

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

const contentContainerStyle = React.useMemo(() => {		const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params;		const { verticalBounds } = route.params;
Show All 37 Lines	const onTipContainerLayout = React.useCallback(
} else {		} else {
const minWidth = width + 2 * extraRightSpace;		const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);		tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
}		}
},		},
[dimensions.width, initialCoordinates, tipHorizontalOffset],		[dimensions.width, initialCoordinates, tipHorizontalOffset],
);		);

const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);

const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const baseTipContainerStyle = React.useMemo(() => {		const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates;		const { y, x, height, width } = initialCoordinates;

const top =		const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;		Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;

const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines	const baseTipContainerStyle = React.useMemo(() => {
}		}
}, [		}, [
dimensions.width,		dimensions.width,
initialCoordinates,		initialCoordinates,
verticalBounds.height,		verticalBounds.height,
verticalBounds.y,		verticalBounds.y,
]);		]);

const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;

const transform: Array<ReanimatedTransform> = [];

transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;

return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);

const triangleStyle = React.useMemo(() => {		const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates;		const { x, width } = initialCoordinates;
const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {		if (extraLeftSpace < extraRightSpace) {
return {		return {
alignSelf: 'flex-start',		alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2,		left: extraLeftSpace + (4 / 10) * width,
};		};
} else {		} else {
return {		return {
alignSelf: 'flex-end',		alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2,		right: extraRightSpace + (4 / 10) * width,
};		};
}		}
}, [dimensions.width, initialCoordinates]);		}, [dimensions.width, initialCoordinates]);

const opacityExitingAnimation = React.useCallback(() => {		const opacityExitingAnimation = React.useCallback(() => {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0, { duration: animationDuration }),		opacity: withTiming(0, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0.7,		opacity: 0.7,
},		},
callback: onExitFinish,		callback: onExitFinish,
};		};
}, [onExitFinish]);		}, [onExitFinish]);

		// prettier-ignore
		const tipContainerEnteringAnimation = React.useCallback(
		(values/: EntryAnimationsValues/) => {
		'worklet';

		const initialX =
		(-values.targetWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const initialY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(1, { duration: animationDuration }),
		transform: [
		{ translateX: withTiming(0, { duration: animationDuration }) },
		{ translateY: withTiming(0, { duration: animationDuration }) },
		{ scale: withTiming(1, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 0,
		transform: [
		{ translateX: initialX },
		{ translateY: initialY },
		{ scale: 0 },
		],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

		// prettier-ignore
		const tipContainerExitingAnimation = React.useCallback(
		(values/: ExitAnimationsValues/) => {
		'worklet';

		const toValueX =
		(-values.currentWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const toValueY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(0, { duration: animationDuration }),
		transform: [
		{
		translateX: withTiming(toValueX, {
		duration: animationDuration,
		}),
		},
		{
		translateY: withTiming(toValueY, {
		duration: animationDuration,
		}),
		},
		{ scale: withTiming(0, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 1,
		transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

return (		return (
<TouchableWithoutFeedback onPress={goBackOnce}>		<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>		<View style={styles.container}>
<AnimatedView		<AnimatedView
style={styles.backdrop}		style={styles.backdrop}
// $FlowFixMe		// $FlowFixMe
entering={opacityEnteringAnimation}		entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation}		exiting={opacityExitingAnimation}
/>		/>
<View style={contentContainerStyle}>		<View style={contentContainerStyle}>
<View style={buttonStyle}>		<Animated.View
		style={buttonStyle}
		exiting={FadeOut.duration(animationDuration)}
		>
<ButtonComponent navigation={props.navigation} route={route} />		<ButtonComponent navigation={props.navigation} route={route} />
</View>		</Animated.View>
</View>		</View>
<AnimatedView		<AnimatedView
style={tipContainerStyle}		style={baseTipContainerStyle}
onLayout={onTipContainerLayout}		onLayout={onTipContainerLayout}
		entering={tipContainerEnteringAnimation}
		exiting={tipContainerExitingAnimation}
>		>
<View style={[styles.triangleUp, triangleStyle]} />		<View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}>		<View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text>		<Text style={styles.tipText}>{tipText}</Text>
</View>		</View>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
Show All 16 Lines

View Options

native/cpp/CommonCpp/_generated/rustJSI.h

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
import * as React from 'react';		import * as React from 'react';
import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';		import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native';
import Animated, { withTiming } from 'react-native-reanimated';		import Animated, {
		FadeOut,
		withTiming,
		// eslint-disable-next-line no-unused-vars
		type EntryAnimationsValues,
		// eslint-disable-next-line no-unused-vars
		type ExitAnimationsValues,
		} from 'react-native-reanimated';

import type { AppNavigationProp } from '../navigation/app-navigator.react.js';		import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
import { OverlayContext } from '../navigation/overlay-context.js';		import { OverlayContext } from '../navigation/overlay-context.js';
import type { NavigationRoute } from '../navigation/route-names.js';		import type { NavigationRoute } from '../navigation/route-names.js';
import { useSelector } from '../redux/redux-utils.js';		import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type {		import type {
LayoutCoordinates,		LayoutCoordinates,
VerticalBounds,		VerticalBounds,
} from '../types/layout-types.js';		} from '../types/layout-types.js';
import type { LayoutEvent } from '../types/react-native.js';		import type { LayoutEvent } from '../types/react-native.js';
import {		import { AnimatedView } from '../types/styles.js';
AnimatedView,
type WritableAnimatedStyleObj,
type ReanimatedTransform,
} from '../types/styles.js';

const { Value, Extrapolate, add, multiply, interpolateNode } = Animated;		const { Value } = Animated;

const animationDuration = 150;		const animationDuration = 150;

const unboundStyles = {		const unboundStyles = {
backdrop: {		backdrop: {
backgroundColor: 'black',		backgroundColor: 'black',
bottom: 0,		bottom: 0,
left: 0,		left: 0,
Show All 39 Lines	export type NUXTipsOverlayParams = {
+verticalBounds: VerticalBounds,		+verticalBounds: VerticalBounds,
};		};

export type NUXTipsOverlayProps = {		export type NUXTipsOverlayProps = {
+navigation: AppNavigationProp<'NUXTipsOverlay'>,		+navigation: AppNavigationProp<'NUXTipsOverlay'>,
+route: NavigationRoute<'NUXTipsOverlay'>,		+route: NavigationRoute<'NUXTipsOverlay'>,
};		};

const tipHeight: number = 30;
const margin: number = 20;		const margin: number = 20;
		const tipContainerTranslateY = -80;

function opacityEnteringAnimation() {		function opacityEnteringAnimation() {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0.7, { duration: animationDuration }),		opacity: withTiming(0.7, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0,		opacity: 0,
},		},
};		};
}		}

function createNUXTipsOverlay(		function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,		ButtonComponent: React.ComponentType<NUXTipsOverlayProps>,
tipText: string,		tipText: string,
): React.ComponentType<NUXTipsOverlayProps> {		): React.ComponentType<NUXTipsOverlayProps> {
function NUXTipsOverlay(props: NUXTipsOverlayProps) {		function NUXTipsOverlay(props: NUXTipsOverlayProps) {
const dimensions = useSelector(state => state.dimensions);		const dimensions = useSelector(state => state.dimensions);
const overlayContext = React.useContext(OverlayContext);		const overlayContext = React.useContext(OverlayContext);
invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');		invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext');
const { onExitFinish } = overlayContext;		const { onExitFinish } = overlayContext;

const position = React.useMemo(() => new Animated.Value(1), []);

const { navigation, route } = props;		const { navigation, route } = props;

const { goBackOnce } = navigation;		const { goBackOnce } = navigation;

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

const contentContainerStyle = React.useMemo(() => {		const contentContainerStyle = React.useMemo(() => {
const { verticalBounds } = route.params;		const { verticalBounds } = route.params;
Show All 37 Lines	const onTipContainerLayout = React.useCallback(
} else {		} else {
const minWidth = width + 2 * extraRightSpace;		const minWidth = width + 2 * extraRightSpace;
tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);		tipHorizontalOffset.setValue((actualWidth - minWidth) / 2);
}		}
},		},
[dimensions.width, initialCoordinates, tipHorizontalOffset],		[dimensions.width, initialCoordinates, tipHorizontalOffset],
);		);

const tipContainerOpacity = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipVerticalBelow = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 1],
outputRange: [-margin - tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const tipHorizontal = React.useMemo(() => {
const invertedPosition = add(1, multiply(-1, position));
return multiply(invertedPosition, tipHorizontalOffset);
}, [position, tipHorizontalOffset]);

const tipScale = React.useMemo(
() =>
interpolateNode(position, {
inputRange: [0, 0.2, 0.8, 1],
outputRange: [0, 0, 1, 1],
extrapolate: Extrapolate.CLAMP,
}),
[position],
);

const baseTipContainerStyle = React.useMemo(() => {		const baseTipContainerStyle = React.useMemo(() => {
const { y, x, height, width } = initialCoordinates;		const { y, x, height, width } = initialCoordinates;

const top =		const top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;		Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;

const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
Show All 16 Lines	const baseTipContainerStyle = React.useMemo(() => {
}		}
}, [		}, [
dimensions.width,		dimensions.width,
initialCoordinates,		initialCoordinates,
verticalBounds.height,		verticalBounds.height,
verticalBounds.y,		verticalBounds.y,
]);		]);

const tipContainerStyle = React.useMemo(() => {
const style: WritableAnimatedStyleObj = {};
style.opacity = tipContainerOpacity;

const transform: Array<ReanimatedTransform> = [];

transform.push({ translateX: tipHorizontal });
transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: tipScale });
style.transform = transform;

return { ...baseTipContainerStyle, ...style };
}, [
baseTipContainerStyle,
tipContainerOpacity,
tipHorizontal,
tipScale,
tipVerticalBelow,
]);

const triangleStyle = React.useMemo(() => {		const triangleStyle = React.useMemo(() => {
const { x, width } = initialCoordinates;		const { x, width } = initialCoordinates;
const extraLeftSpace = x;		const extraLeftSpace = x;
const extraRightSpace = dimensions.width - width - x;		const extraRightSpace = dimensions.width - width - x;
if (extraLeftSpace < extraRightSpace) {		if (extraLeftSpace < extraRightSpace) {
return {		return {
alignSelf: 'flex-start',		alignSelf: 'flex-start',
left: extraLeftSpace + (width - 20) / 2,		left: extraLeftSpace + (4 / 10) * width,
};		};
} else {		} else {
return {		return {
alignSelf: 'flex-end',		alignSelf: 'flex-end',
right: extraRightSpace + (width - 20) / 2,		right: extraRightSpace + (4 / 10) * width,
};		};
}		}
}, [dimensions.width, initialCoordinates]);		}, [dimensions.width, initialCoordinates]);

const opacityExitingAnimation = React.useCallback(() => {		const opacityExitingAnimation = React.useCallback(() => {
'worklet';		'worklet';

return {		return {
animations: {		animations: {
opacity: withTiming(0, { duration: animationDuration }),		opacity: withTiming(0, { duration: animationDuration }),
},		},
initialValues: {		initialValues: {
opacity: 0.7,		opacity: 0.7,
},		},
callback: onExitFinish,		callback: onExitFinish,
};		};
}, [onExitFinish]);		}, [onExitFinish]);

		// prettier-ignore
		const tipContainerEnteringAnimation = React.useCallback(
		(values/: EntryAnimationsValues/) => {
		'worklet';

		const initialX =
		(-values.targetWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const initialY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(1, { duration: animationDuration }),
		transform: [
		{ translateX: withTiming(0, { duration: animationDuration }) },
		{ translateY: withTiming(0, { duration: animationDuration }) },
		{ scale: withTiming(1, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 0,
		transform: [
		{ translateX: initialX },
		{ translateY: initialY },
		{ scale: 0 },
		],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

		// prettier-ignore
		const tipContainerExitingAnimation = React.useCallback(
		(values/: ExitAnimationsValues/) => {
		'worklet';

		const toValueX =
		(-values.currentWidth +
		initialCoordinates.width +
		initialCoordinates.x) /
		2;
		const toValueY = tipContainerTranslateY;

		return {
		animations: {
		opacity: withTiming(0, { duration: animationDuration }),
		transform: [
		{
		translateX: withTiming(toValueX, {
		duration: animationDuration,
		}),
		},
		{
		translateY: withTiming(toValueY, {
		duration: animationDuration,
		}),
		},
		{ scale: withTiming(0, { duration: animationDuration }) },
		],
		},
		initialValues: {
		opacity: 1,
		transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }],
		},
		};
		},
		[initialCoordinates.width, initialCoordinates.x],
		);

return (		return (
<TouchableWithoutFeedback onPress={goBackOnce}>		<TouchableWithoutFeedback onPress={goBackOnce}>
<View style={styles.container}>		<View style={styles.container}>
<AnimatedView		<AnimatedView
style={styles.backdrop}		style={styles.backdrop}
// $FlowFixMe		// $FlowFixMe
entering={opacityEnteringAnimation}		entering={opacityEnteringAnimation}
exiting={opacityExitingAnimation}		exiting={opacityExitingAnimation}
/>		/>
<View style={contentContainerStyle}>		<View style={contentContainerStyle}>
<View style={buttonStyle}>		<Animated.View
		style={buttonStyle}
		exiting={FadeOut.duration(animationDuration)}
		>
<ButtonComponent navigation={props.navigation} route={route} />		<ButtonComponent navigation={props.navigation} route={route} />
</View>		</Animated.View>
</View>		</View>
<AnimatedView		<AnimatedView
style={tipContainerStyle}		style={baseTipContainerStyle}
onLayout={onTipContainerLayout}		onLayout={onTipContainerLayout}
		entering={tipContainerEnteringAnimation}
		exiting={tipContainerExitingAnimation}
>		>
<View style={[styles.triangleUp, triangleStyle]} />		<View style={[styles.triangleUp, triangleStyle]} />
<View style={styles.items}>		<View style={styles.items}>
<Text style={styles.tipText}>{tipText}</Text>		<Text style={styles.tipText}>{tipText}</Text>
</View>		</View>
</AnimatedView>		</AnimatedView>
</View>		</View>
</TouchableWithoutFeedback>		</TouchableWithoutFeedback>
Show All 16 Lines

View Options

native/native_rust_library/src/exact_user_search.rs

View Options

native/native_rust_library/src/lib.rs

View Options

native/schema/CommRustModuleSchema.js

[native] add findUserIDForWalletAddress to CommRustModuleClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 37281

native/cpp/CommonCpp/NativeModules/CommRustModule.h

native/cpp/CommonCpp/NativeModules/CommRustModule.cpp

native/cpp/CommonCpp/_generated/rustJSI-generated.cpp

native/cpp/CommonCpp/_generated/rustJSI.h

native/native_rust_library/src/exact_user_search.rs

native/native_rust_library/src/lib.rs

native/schema/CommRustModuleSchema.js

[native] add findUserIDForWalletAddress to CommRustModule
ClosedPublic
Actions

Revision Contents
Changeset List