wallet-stack 1.0.0-alpha.121

package/src/components/InLineNotification.tsx

@@ -0,0 +1,160 @@
+import React, { type JSX } from 'react'
+import { GestureResponderEvent, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import Touchable from 'src/components/Touchable'
+import AttentionIcon from 'src/icons/Attention'
+import Warning from 'src/icons/Warning'
+import Colors, { ColorValue } from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+export enum NotificationVariant {
+  Info,
+  Success,
+  Warning,
+  Error,
+}
+
+export interface InLineNotificationProps {
+  variant: NotificationVariant
+  withBorder?: boolean
+  hideIcon?: boolean
+  customIcon?: JSX.Element | null
+  title?: string | null
+  description: string | JSX.Element | null
+  style?: StyleProp<ViewStyle>
+  ctaLabel?: string | null
+  onPressCta?: (event: GestureResponderEvent) => void
+  ctaLabel2?: string | null
+  onPressCta2?: (event: GestureResponderEvent) => void
+  testID?: string
+}
+
+interface CustomColors {
+  primary: ColorValue
+  secondary: ColorValue
+}
+
+export function InLineNotification({
+  variant,
+  withBorder,
+  hideIcon,
+  customIcon,
+  title,
+  description,
+  style,
+  ctaLabel,
+  onPressCta,
+  ctaLabel2,
+  onPressCta2,
+  testID,
+}: InLineNotificationProps) {
+  const variantColor = variantColors[variant]
+  const renderCtaLabel = (
+    label?: string | null,
+    onPress?: (event: GestureResponderEvent) => void,
+    color?: ColorValue
+  ) =>
+    label &&
+    onPress && (
+      <Touchable style={styles.cta} onPress={onPress}>
+        <Text testID={`${testID}/${label}`} style={[styles.ctaLabel, { color }]}>
+          {label}
+        </Text>
+      </Touchable>
+    )
+  const Icon = variantIcons[variant]
+
+  const backgroundStyle = { backgroundColor: variantColor.secondary }
+  const borderStyle = withBorder && {
+    borderWidth: 1,
+    borderColor: `${variantColor.primary}80`, // primary color with 50% opacity
+  }
+
+  return (
+    <View style={[styles.container, backgroundStyle, borderStyle, style]} testID={testID}>
+      <View style={styles.row}>
+        {!hideIcon && (
+          <View style={styles.iconContainer}>
+            {customIcon ?? (
+              <Icon color={variantColor.primary} size={16} testId="InLineNotification/Icon" />
+            )}
+          </View>
+        )}
+        <View style={styles.contentContainer}>
+          {!!title && <Text style={styles.titleText}>{title}</Text>}
+          {!!description && <Text style={[styles.bodyText]}>{description}</Text>}
+        </View>
+      </View>
+
+      {(!!ctaLabel || !!ctaLabel2) && (
+        <View style={[styles.row, styles.ctaRow]}>
+          {renderCtaLabel(ctaLabel, onPressCta, variantColor.primary)}
+          {renderCtaLabel(ctaLabel2, onPressCta2, variantColor.primary)}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: Spacing.Regular16,
+    borderRadius: Spacing.Regular16,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+  ctaRow: {
+    paddingTop: Spacing.Smallest8,
+    justifyContent: 'flex-end',
+    gap: Spacing.Smallest8,
+  },
+  iconContainer: {
+    paddingRight: Spacing.Smallest8,
+  },
+  titleText: {
+    ...typeScale.labelSmall,
+    marginBottom: Spacing.Tiny4,
+  },
+  bodyText: {
+    ...typeScale.bodyXSmall,
+  },
+  ctaLabel: {
+    ...typeScale.labelSmall,
+  },
+  cta: {
+    paddingVertical: Spacing.Tiny4,
+    paddingHorizontal: Spacing.Smallest8,
+  },
+})
+
+const variantColors: Record<NotificationVariant, CustomColors> = {
+  [NotificationVariant.Info]: {
+    primary: Colors.contentPrimary,
+    secondary: Colors.info,
+  },
+  [NotificationVariant.Success]: {
+    primary: Colors.successPrimary,
+    secondary: Colors.successSecondary,
+  },
+  [NotificationVariant.Warning]: {
+    primary: Colors.warningPrimary,
+    secondary: Colors.warningSecondary,
+  },
+  [NotificationVariant.Error]: {
+    primary: Colors.errorPrimary,
+    secondary: Colors.errorSecondary,
+  },
+}
+
+const variantIcons: Record<NotificationVariant, (args: any) => JSX.Element> = {
+  [NotificationVariant.Info]: AttentionIcon,
+  [NotificationVariant.Success]: AttentionIcon,
+  [NotificationVariant.Warning]: Warning,
+  [NotificationVariant.Error]: Warning,
+}
+
+export default InLineNotification

package/src/components/InfoBottomSheet.test.tsx

@@ -0,0 +1,55 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import lodash from 'lodash'
+import React from 'react'
+import { Provider } from 'react-redux'
+import InfoBottomSheet from 'src/components/InfoBottomSheet'
+import { createMockStore } from 'test/utils'
+
+describe('InfoBottomSheet', () => {
+  it('renders the structure properly', () => {
+    const { getByTestId } = render(
+      <Provider store={createMockStore()}>
+        <InfoBottomSheet
+          forwardedRef={{ current: null }}
+          title="Info Bottom Sheet Title"
+          testID="TestInfoBottomSheet"
+        >
+          Info Bottom Sheet Content
+        </InfoBottomSheet>
+      </Provider>
+    )
+
+    expect(getByTestId('TestInfoBottomSheet')).toHaveTextContent('Info Bottom Sheet Title', {
+      exact: false,
+    })
+    expect(getByTestId('TestInfoBottomSheet/Content')).toHaveTextContent(
+      'Info Bottom Sheet Content',
+      { exact: false }
+    )
+    expect(getByTestId('TestInfoBottomSheet/DismissButton')).toHaveTextContent(
+      'bottomSheetDismissButton',
+      { exact: false }
+    )
+  })
+
+  it('properly executes dismiss action when dismiss button is pressed', async () => {
+    const mockClose = jest.fn() as any
+    // this is necessary to eliminate hurdles with the onPress implementation of the Button component
+    jest.spyOn(lodash, 'debounce').mockReturnValue(mockClose)
+
+    const { getByTestId } = render(
+      <Provider store={createMockStore()}>
+        <InfoBottomSheet
+          forwardedRef={{ current: { close: mockClose } as any }}
+          title="Info Bottom Sheet Title"
+          testID="TestInfoBottomSheet"
+        >
+          Info Bottom Sheet Content
+        </InfoBottomSheet>
+      </Provider>
+    )
+
+    fireEvent.press(getByTestId('TestInfoBottomSheet/DismissButton'))
+    expect(mockClose).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/InfoBottomSheet.tsx

@@ -0,0 +1,79 @@
+import React, { type ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+import type { BottomSheetModalRefType } from 'src/components/BottomSheet'
+import BottomSheet from 'src/components/BottomSheet'
+import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+export default function InfoBottomSheet(props: {
+  forwardedRef: React.RefObject<BottomSheetModalRefType | null>
+  title: string
+  description?: string
+  children?: React.ReactNode
+  testID?: string
+}) {
+  const { t } = useTranslation()
+
+  return (
+    <BottomSheet
+      forwardedRef={props.forwardedRef}
+      title={props.title}
+      description={props.description}
+      testId={props.testID}
+    >
+      {!!props.children && (
+        <View style={styles.content} testID={`${props.testID}/Content`}>
+          {props.children}
+        </View>
+      )}
+      <Button
+        style={styles.dismissButton}
+        type={BtnTypes.SECONDARY}
+        size={BtnSizes.FULL}
+        text={t('bottomSheetDismissButton')}
+        onPress={() => props.forwardedRef.current?.close()}
+        testID={`${props.testID}/DismissButton`}
+      />
+    </BottomSheet>
+  )
+}
+
+export function InfoBottomSheetHeading(props: { children: ReactNode }) {
+  return <Text style={styles.heading}>{props.children}</Text>
+}
+
+export function InfoBottomSheetParagraph(props: { children: ReactNode; testID?: string }) {
+  return (
+    <Text style={styles.paragraph} testID={props.testID}>
+      {props.children}
+    </Text>
+  )
+}
+
+export function InfoBottomSheetContentBlock(props: { children: ReactNode; testID?: string }) {
+  return (
+    <View style={styles.contentBlock} testID={props.testID}>
+      {props.children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: Spacing.Thick24,
+  },
+  dismissButton: {
+    marginTop: Spacing.Thick24,
+  },
+  heading: {
+    ...typeScale.labelSemiBoldSmall,
+  },
+  paragraph: {
+    ...typeScale.bodySmall,
+  },
+  contentBlock: {
+    gap: Spacing.Smallest8,
+  },
+})

package/src/components/ItemSeparator.test.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import ItemSeparator from 'src/components/ItemSeparator'
+
+it('renders correctly', () => {
+  const tree = render(<ItemSeparator />)
+  expect(tree).toMatchSnapshot()
+})

package/src/components/ItemSeparator.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import colors from 'src/styles/colors'
+import variables from 'src/styles/variables'
+
+export default function ItemSeparator() {
+  return <View style={styles.container} />
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 1,
+    backgroundColor: colors.borderPrimary,
+    marginHorizontal: variables.contentPadding,
+  },
+})

package/src/components/KeyboardAwareScrollView.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react'
+import {
+  EmitterSubscription,
+  findNodeHandle,
+  Keyboard,
+  Platform,
+  ScrollView,
+  ScrollViewProps,
+  TextInput,
+  UIManager,
+} from 'react-native'
+
+type ComponentOrHandle = null | number | React.Component<any, any> | React.ComponentClass<any>
+
+interface Props extends ScrollViewProps {
+  hasNavBar?: boolean
+}
+
+// Keeps the focused input into view when the keyboard is shown
+export default class KeyboardAwareScrollView extends React.Component<Props> {
+  scrollViewRef = React.createRef<ScrollView>()
+  showListener: EmitterSubscription | undefined
+
+  componentDidMount() {
+    const showListener = Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow'
+    this.showListener = Keyboard.addListener(showListener, () => {
+      // Wait for next frame so that the layout is updated first if there's a KeyboardSpacer
+      // in the hierarchy, otherwise the scroll into view has no effect
+      requestAnimationFrame(() => {
+        const currentlyFocusedField = TextInput.State.currentlyFocusedInput()
+        this.scrollInputIntoView(currentlyFocusedField as any, this.scrollViewRef.current)
+      })
+    })
+  }
+
+  componentWillUnmount() {
+    if (this.showListener) {
+      this.showListener.remove()
+    }
+  }
+
+  getScrollRef() {
+    return this.scrollViewRef.current
+  }
+
+  focusInputOrDismissKeyboard(inputRef: React.RefObject<TextInput | null>) {
+    const input = inputRef.current
+    if (input) {
+      this.focusInputAndScrollIntoView(input, this.scrollViewRef.current)
+    } else {
+      Keyboard.dismiss()
+    }
+  }
+
+  focusInputAndScrollIntoView(input: TextInput, scrollView: ScrollView | null) {
+    input.focus()
+
+    this.scrollInputIntoView(input, scrollView)
+  }
+
+  scrollInputIntoView(
+    input: ComponentOrHandle,
+    scrollView: ScrollView | null,
+    customKeyboardHeight: number = 0
+  ) {
+    const inputHandle = findNodeHandle(input)
+    const { hasNavBar } = this.props
+    if (!inputHandle || !scrollView) {
+      return
+    }
+
+    const innerViewNode = scrollView.getInnerViewNode()
+    if (!innerViewNode) {
+      return
+    }
+
+    // When multiple screens are in a stack navigator we need to be sure
+    // the provided input is a child of the scrollview
+    // otherwise we get an exception
+    // @ts-ignore, react-native type defs are missing this one!
+    UIManager.viewIsDescendantOf(inputHandle, innerViewNode, (isAncestor: boolean) => {
+      if (isAncestor && scrollView) {
+        scrollView.scrollResponderScrollNativeHandleToKeyboard(
+          inputHandle,
+          hasNavBar ? customKeyboardHeight + 0 : customKeyboardHeight + 120,
+          true
+        )
+      }
+    })
+  }
+
+  render() {
+    const { hasNavBar, ...other } = this.props
+
+    return (
+      <ScrollView
+        testID="KeyboardAwareScrollView"
+        ref={this.scrollViewRef}
+        keyboardShouldPersistTaps="handled"
+        {...other}
+      />
+    )
+  }
+}

package/src/components/KeyboardSpacer.tsx

@@ -0,0 +1,168 @@
+/**
+ * Adapted from
+ * https://github.com/Andr3wHur5t/react-native-keyboard-spacer
+ */
+
+import * as React from 'react'
+import {
+  EmitterSubscription,
+  Keyboard,
+  KeyboardEvent,
+  KeyboardMetrics,
+  LayoutAnimation,
+  LayoutAnimationConfig,
+  LayoutRectangle,
+  Platform,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+})
+
+// From: https://medium.com/man-moon/writing-modern-react-native-ui-e317ff956f02
+const defaultAnimation: LayoutAnimationConfig = {
+  duration: 500,
+  create: {
+    duration: 300,
+    type: LayoutAnimation.Types.easeInEaseOut,
+    property: LayoutAnimation.Properties.opacity,
+  },
+  update: {
+    type: LayoutAnimation.Types.spring,
+    springDamping: 200,
+  },
+}
+
+interface Props {
+  topSpacing?: number
+  onToggle?: (visible: boolean, keyboardSpace?: number) => void
+  style?: ViewStyle
+}
+
+export default class KeyboardSpacer extends React.Component<Props> {
+  _listeners: EmitterSubscription[] = []
+  _viewRef = React.createRef<View>()
+  _currentMeasureToken: object | null = null
+
+  state = {
+    keyboardSpace: 0,
+  }
+
+  componentDidMount() {
+    const updateListener = Platform.OS === 'android' ? 'keyboardDidShow' : 'keyboardWillShow'
+    const resetListener = Platform.OS === 'android' ? 'keyboardDidHide' : 'keyboardWillHide'
+    this._listeners = [
+      Keyboard.addListener(updateListener, this.updateKeyboardSpace),
+      Keyboard.addListener(resetListener, this.resetKeyboardSpace),
+    ]
+  }
+
+  componentWillUnmount() {
+    this._listeners.forEach((listener) => listener.remove())
+  }
+
+  relativeKeyboardHeight(viewFrame: LayoutRectangle, keyboardFrame: KeyboardMetrics): number {
+    if (
+      !viewFrame ||
+      // On Android these can be undefined for unfocused screens
+      viewFrame.y === undefined ||
+      viewFrame.height === undefined ||
+      !keyboardFrame
+    ) {
+      return 0
+    }
+
+    const { topSpacing = 0 } = this.props
+
+    const keyboardY = keyboardFrame.screenY - topSpacing
+
+    // Calculate the displacement needed for the view such that it
+    // no longer overlaps with the keyboard
+    return Math.max(viewFrame.y + viewFrame.height - keyboardY, 0)
+  }
+
+  updateKeyboardSpace = (event: KeyboardEvent) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const { onToggle = (_visible: boolean, _keyboardSpace?: number) => {} } = this.props
+    if (!event.endCoordinates) {
+      onToggle(true)
+      return
+    }
+
+    if (!this._viewRef.current) {
+      onToggle(true)
+      return
+    }
+
+    // Create a new token to cancel the async measureInWindow
+    // This is needed as both keyboardWillShow and keyboardWillHide are triggered sequentially
+    // when toggling the keyboard visibility on iOS (command + K on simulator)
+    const measureToken = (this._currentMeasureToken = {})
+
+    // Use measure and NOT measureInWindow because it's incorrect with a transparent status bar on Android
+    // see https://github.com/facebook/react-native/issues/19497
+    this._viewRef.current.measure((_x, _y, width, height, x, y) => {
+      if (this._currentMeasureToken !== measureToken) {
+        // Skip action as token is different (i.e. cancelled)
+        return
+      }
+      let animationConfig = defaultAnimation
+      if (event.duration) {
+        animationConfig = LayoutAnimation.create(
+          event.duration,
+          LayoutAnimation.Types[event.easing],
+          LayoutAnimation.Properties.opacity
+        )
+      }
+      LayoutAnimation.configureNext(animationConfig)
+
+      const viewFrame = { x, y, width, height }
+      const keyboardFrame = event.endCoordinates
+      const keyboardSpace = this.relativeKeyboardHeight(viewFrame, keyboardFrame)
+
+      this.setState({ keyboardSpace })
+      onToggle(true, keyboardSpace)
+    })
+  }
+
+  resetKeyboardSpace = (event: KeyboardEvent) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const { onToggle = (_visible: boolean, _keyboardSpace?: number) => {} } = this.props
+    // This cancels measureInWindow
+    this._currentMeasureToken = null
+
+    let animationConfig = defaultAnimation
+    if (event && event.duration) {
+      animationConfig = LayoutAnimation.create(
+        event.duration,
+        LayoutAnimation.Types[event.easing],
+        LayoutAnimation.Properties.opacity
+      )
+    }
+    LayoutAnimation.configureNext(animationConfig)
+
+    this.setState({ keyboardSpace: 0 })
+    onToggle(false, 0)
+  }
+
+  render() {
+    const { style } = this.props
+    // On Android with windowSoftInputMode set to adjustResize we don't need the spacer
+    // unless it's using fullscreen layout (which is the case with a transparent status bar)
+
+    return (
+      <View
+        ref={this._viewRef}
+        style={[styles.container, { height: this.state.keyboardSpace }, style]}
+        collapsable={false}
+      />
+    )
+  }
+}

package/src/components/LabelWithInfo.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { StyleProp, StyleSheet, Text, TextStyle, ViewStyle } from 'react-native'
+import Touchable from 'src/components/Touchable'
+
+import InfoIcon from 'src/icons/InfoIcon'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+export function LabelWithInfo({
+  label,
+  onPress,
+  labelStyle,
+  iconSize = 16,
+  testID,
+  style,
+}: {
+  label: string
+  onPress?: () => void
+  labelStyle?: StyleProp<TextStyle>
+  iconSize?: number
+  testID?: string
+  style?: StyleProp<ViewStyle>
+}) {
+  return (
+    <Touchable
+      testID={testID}
+      style={[styles.touchable, style]}
+      onPress={onPress}
+      disabled={!onPress}
+    >
+      <>
+        <Text style={[styles.labelText, labelStyle]} numberOfLines={1}>
+          {label}
+        </Text>
+        {onPress && <InfoIcon size={iconSize} color={Colors.contentSecondary} />}
+      </>
+    </Touchable>
+  )
+}
+
+const styles = StyleSheet.create({
+  touchable: {
+    flex: 1,
+    flexDirection: 'row',
+    gap: Spacing.Tiny4,
+    alignItems: 'center',
+    paddingRight: 20, // Prevents Icon from being cut off on long labels
+    minWidth: '25%',
+    color: Colors.contentSecondary,
+  },
+  labelText: {
+    ...typeScale.bodyMedium,
+    flexWrap: 'wrap',
+    textAlign: 'left',
+  },
+})