wallet-stack 1.0.0-alpha.121

package/src/components/NumberKeypad.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import NumberKeypad from 'src/components/NumberKeypad'
+
+describe(NumberKeypad, () => {
+  it('renders correctly without decimal separator', () => {
+    const tree = render(<NumberKeypad onDigitPress={jest.fn()} onBackspacePress={jest.fn()} />)
+    expect(tree).toMatchSnapshot()
+  })
+  it('renders correctly with decimal separator', () => {
+    const tree = render(
+      <NumberKeypad
+        onDigitPress={jest.fn()}
+        onBackspacePress={jest.fn()}
+        decimalSeparator={','}
+        onDecimalPress={jest.fn()}
+      />
+    )
+    expect(tree).toMatchSnapshot()
+  })
+})

package/src/components/NumberKeypad.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Touchable from 'src/components/Touchable'
+import Backspace from 'src/icons/Backspace'
+import { typeScale } from 'src/styles/fonts'
+
+interface Props {
+  onDigitPress: (digit: number) => void
+  onBackspacePress: () => void
+  onDecimalPress?: () => void
+  onBackspaceLongPress?: () => void
+  decimalSeparator?: string
+  testID?: string
+}
+
+function DigitButton({
+  digit,
+  onDigitPress,
+}: {
+  digit: number
+  onDigitPress: (digit: number) => void
+}) {
+  const onPress = () => onDigitPress(digit)
+  return (
+    <Touchable testID={`digit${digit}`} borderless={true} onPress={onPress}>
+      <Text allowFontScaling={false} style={styles.digit}>
+        {digit}
+      </Text>
+    </Touchable>
+  )
+}
+
+export default function NumberKeypad(props: Props) {
+  return (
+    <View style={styles.container}>
+      <View style={styles.row}>
+        <DigitButton digit={1} onDigitPress={props.onDigitPress} />
+        <DigitButton digit={2} onDigitPress={props.onDigitPress} />
+        <DigitButton digit={3} onDigitPress={props.onDigitPress} />
+      </View>
+      <View style={styles.row}>
+        <DigitButton digit={4} onDigitPress={props.onDigitPress} />
+        <DigitButton digit={5} onDigitPress={props.onDigitPress} />
+        <DigitButton digit={6} onDigitPress={props.onDigitPress} />
+      </View>
+      <View style={styles.row}>
+        <DigitButton digit={7} onDigitPress={props.onDigitPress} />
+        <DigitButton digit={8} onDigitPress={props.onDigitPress} />
+        <DigitButton digit={9} onDigitPress={props.onDigitPress} />
+      </View>
+      <View style={styles.row}>
+        {props.decimalSeparator && props.onDecimalPress ? (
+          <Touchable
+            borderless={true}
+            onPress={props.onDecimalPress}
+            testID={`digit${props.decimalSeparator}`}
+          >
+            <Text style={styles.digit}>{props.decimalSeparator}</Text>
+          </Touchable>
+        ) : (
+          <View style={styles.digit} />
+        )}
+        <DigitButton digit={0} onDigitPress={props.onDigitPress} />
+        <Touchable
+          testID="Backspace"
+          borderless={true}
+          onPress={props.onBackspacePress}
+          onLongPress={props.onBackspaceLongPress}
+        >
+          <View style={styles.digit}>
+            <Backspace />
+          </View>
+        </Touchable>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 12,
+  },
+  row: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    alignItems: 'center',
+  },
+  digit: {
+    ...typeScale.labelMedium,
+    width: 64,
+    padding: 24,
+    fontSize: 22,
+    lineHeight: 28,
+    justifyContent: 'center',
+    textAlign: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/NumberTicker.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useRef } from 'react'
+import { Animated, StyleSheet, Text, TextStyle, View } from 'react-native'
+import { typeScale } from 'src/styles/fonts'
+
+interface Props {
+  value: string | number
+  typeScaleName?: keyof typeof typeScale
+  animationDuration?: number
+  disableAnimation?: boolean
+  testID?: string
+}
+
+interface TickTextProps {
+  textStyle: TextStyle
+  value: string
+}
+
+interface TickProps {
+  startValue: number
+  endValue: number
+  animationDuration: number
+  textHeight: number
+  textStyle: TextStyle
+}
+
+const numberRange = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
+
+function TickText({ value, textStyle }: TickTextProps) {
+  return (
+    <Text allowFontScaling={false} style={[styles.tickerText, textStyle]}>
+      {value}
+    </Text>
+  )
+}
+
+function Tick({ startValue, endValue, textStyle, textHeight, animationDuration }: TickProps) {
+  const animatedValue = useRef(new Animated.Value(startValue * textHeight * -1))
+
+  const transformStyle = { transform: [{ translateY: animatedValue.current }] }
+  const duration = animationDuration ?? 1300
+
+  useEffect(() => {
+    if (animatedValue.current) {
+      Animated.timing(animatedValue.current, {
+        toValue: endValue * textHeight * -1,
+        duration,
+        useNativeDriver: true,
+      }).start()
+    }
+  }, [endValue])
+
+  return (
+    <Animated.View style={transformStyle}>
+      {numberRange.map((number, index) => {
+        return <TickText key={index} textStyle={textStyle} value={number} />
+      })}
+    </Animated.View>
+  )
+}
+
+export default function NumberTicker({
+  value,
+  typeScaleName = 'displaySmall',
+  animationDuration = 1300,
+  disableAnimation = false,
+  testID,
+}: Props) {
+  const textStyle = typeScale[typeScaleName]
+  const textHeight = textStyle.lineHeight
+  const finalValueArray = value.toString().split('')
+
+  // For the startValueArray, map over each character in the finalValueArray to
+  // replace digits with random digits, do not change non-digit characters (e.g.
+  // decimal separator)
+  const startValueArray = finalValueArray.map((char) => {
+    return char.match(/\d/) ? Math.floor(Math.random() * 10).toString() : char
+  })
+
+  return (
+    <View style={[styles.container, { height: textHeight }]} testID={testID}>
+      {finalValueArray.map((value, index) => {
+        // If the character is not a digit, render it as a static text element
+        if (!value.match(/\d/)) {
+          return <TickText key={index} textStyle={textStyle} value={value} />
+        }
+
+        const endValue = parseInt(value, 10)
+        const startValue = parseInt(startValueArray[index], 10)
+        return (
+          <Tick
+            key={`${value}-${index}`}
+            startValue={startValue}
+            endValue={endValue}
+            textHeight={textHeight}
+            textStyle={textStyle}
+            animationDuration={disableAnimation ? 0 : animationDuration}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    flexDirection: 'row',
+    // This negative gap is a hack to bring the numbers closer together,
+    // otherwise they feel unnatural and far apart
+    gap: -2,
+  },
+  tickerText: {
+    textAlign: 'center',
+  },
+})

package/src/components/OnboardingCard.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Card from 'src/components/Card'
+import Touchable from 'src/components/Touchable'
+import ForwardChevron from 'src/icons/ForwardChevron'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Shadow, Spacing } from 'src/styles/styles'
+
+interface Props {
+  onPress?: () => void
+  title: string
+  subtitle: string
+  testId?: string
+}
+
+function OnboardingCard({ testId, onPress, title, subtitle }: Props) {
+  return (
+    <Card testID="OnboardingCard" style={styles.card} rounded={true} shadow={Shadow.Soft}>
+      <Touchable style={styles.pressableCard} onPress={onPress} testID={testId}>
+        <>
+          <View style={styles.itemTextContainer}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.subtitle}>{subtitle}</Text>
+          </View>
+          <ForwardChevron color={Colors.successPrimary} />
+        </>
+      </Touchable>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  itemTextContainer: {
+    flex: 1,
+    marginRight: Spacing.Regular16,
+  },
+  pressableCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    padding: Spacing.Regular16,
+  },
+  card: {
+    marginTop: Spacing.Regular16,
+    alignItems: 'center',
+    padding: 0,
+  },
+  title: {
+    ...typeScale.labelSmall,
+    lineHeight: 24,
+    paddingBottom: 5,
+    color: Colors.successPrimary,
+  },
+  subtitle: {
+    ...typeScale.bodyXSmall,
+    color: Colors.contentSecondary,
+  },
+})
+
+export default OnboardingCard

package/src/components/Pagination.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
+import progressDots from 'src/styles/progressDots'
+
+interface Props {
+  count: number
+  activeIndex: number
+  style?: StyleProp<ViewStyle>
+  dotStyle?: StyleProp<ViewStyle>
+  activeDotStyle?: StyleProp<ViewStyle>
+}
+
+export default function Pagination({
+  count,
+  activeIndex,
+  style,
+  dotStyle = progressDots.circlePassive,
+  activeDotStyle = progressDots.circleActive,
+}: Props) {
+  if (count < 2) {
+    return null
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      {Array.from({ length: count }).map((n, i) => {
+        return <View key={i} style={activeIndex === i ? activeDotStyle : dotStyle} />
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})

package/src/components/PercentageIndicator.test.tsx

@@ -0,0 +1,118 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Text } from 'react-native'
+import PercentageIndicator from 'src/components/PercentageIndicator'
+import { getElementText } from 'test/utils'
+
+describe('PercentageIndicator', () => {
+  it('renders correctly when compared value is lower than current', async () => {
+    const tree = render(
+      <PercentageIndicator comparedValue={0.5} currentValue={2} testID={`testIndicator`} />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('300.00%')
+    expect(tree.queryByTestId('testIndicator:UpIndicator')).toBeTruthy()
+    expect(tree.queryByTestId('testIndicator:DownIndicator')).toBeFalsy()
+    expect(tree.getByTestId('testIndicator:UpIndicator').type).toEqual('svg')
+  })
+
+  it('renders correctly when compared value is greater than current', async () => {
+    const tree = render(
+      <PercentageIndicator comparedValue={4} currentValue={2} testID={`testIndicator`} />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('50.00%')
+    expect(tree.queryByTestId('testIndicator:DownIndicator')).toBeTruthy()
+    expect(tree.queryByTestId('testIndicator:UpIndicator')).toBeFalsy()
+    expect(tree.getByTestId('testIndicator:DownIndicator').type).toEqual('svg')
+  })
+
+  it('renders correctly when compared value is equal to current', async () => {
+    const tree = render(
+      <PercentageIndicator comparedValue={2} currentValue={2} testID={`testIndicator`} />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('0.00%')
+    expect(tree.queryByTestId('testIndicator:DownIndicator')).toBeFalsy()
+    expect(tree.queryByTestId('testIndicator:UpIndicator')).toBeFalsy()
+  })
+
+  it('renders correctly with custom icons when compared value is lower than current', async () => {
+    const upIcon = jest.fn(({ testID }) => <Text testID={testID}>Up Icon</Text>)
+    const downIcon = jest.fn(({ testID }) => <Text testID={testID}>Down Icon</Text>)
+    const noChangeIcon = jest.fn(({ testID }) => <Text testID={testID}>NoChange Icon</Text>)
+    const tree = render(
+      <PercentageIndicator
+        comparedValue={0.5}
+        currentValue={2}
+        testID={`testIndicator`}
+        UpIcon={upIcon}
+        DownIcon={downIcon}
+        NoChangeIcon={noChangeIcon}
+      />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('Up Icon300.00%')
+    expect(tree.queryByTestId('testIndicator:UpIndicator')).toBeTruthy()
+    expect(tree.queryByTestId('testIndicator:DownIndicator')).toBeFalsy()
+    expect(tree.queryByTestId('testIndicator:NoChangeIndicator')).toBeFalsy()
+    expect(tree.getByTestId('testIndicator:UpIndicator').type).toEqual('Text')
+  })
+
+  it('renders correctly with custom icons when compared value is greater than current', async () => {
+    const upIcon = jest.fn(({ testID }) => <Text testID={testID}>Up Icon</Text>)
+    const downIcon = jest.fn(({ testID }) => <Text testID={testID}>Down Icon</Text>)
+    const noChangeIcon = jest.fn(({ testID }) => <Text testID={testID}>NoChange Icon</Text>)
+    const tree = render(
+      <PercentageIndicator
+        comparedValue={4}
+        currentValue={2}
+        testID={`testIndicator`}
+        UpIcon={upIcon}
+        DownIcon={downIcon}
+        NoChangeIcon={noChangeIcon}
+      />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('Down Icon50.00%')
+    expect(tree.queryByTestId('testIndicator:DownIndicator')).toBeTruthy()
+    expect(tree.queryByTestId('testIndicator:UpIndicator')).toBeFalsy()
+    expect(tree.queryByTestId('testIndicator:NoChangeIndicator')).toBeFalsy()
+    expect(tree.getByTestId('testIndicator:DownIndicator').type).toEqual('Text')
+  })
+
+  it('renders correctly with custom icons when compared value is equal to current', async () => {
+    const upIcon = jest.fn(({ testID }) => <Text testID={testID}>Up Icon</Text>)
+    const downIcon = jest.fn(({ testID }) => <Text testID={testID}>Down Icon</Text>)
+    const noChangeIcon = jest.fn(({ testID }) => <Text testID={testID}>NoChange Icon</Text>)
+    const tree = render(
+      <PercentageIndicator
+        comparedValue={2}
+        currentValue={2}
+        testID={`testIndicator`}
+        UpIcon={upIcon}
+        DownIcon={downIcon}
+        NoChangeIcon={noChangeIcon}
+      />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('NoChange Icon0.00%')
+    expect(tree.queryByTestId('testIndicator:DownIndicator')).toBeFalsy()
+    expect(tree.queryByTestId('testIndicator:UpIndicator')).toBeFalsy()
+    expect(tree.queryByTestId('testIndicator:NoChangeIndicator')).toBeTruthy()
+    expect(tree.getByTestId('testIndicator:NoChangeIndicator').type).toEqual('Text')
+  })
+
+  it('renders correctly with suffix text', async () => {
+    const tree = render(
+      <PercentageIndicator
+        comparedValue={0.5}
+        currentValue={2}
+        testID={`testIndicator`}
+        suffixText="Today"
+      />
+    )
+
+    expect(getElementText(tree.getByTestId('testIndicator'))).toBe('300.00%Today')
+  })
+})

package/src/components/PercentageIndicator.tsx

@@ -0,0 +1,75 @@
+import BigNumber from 'bignumber.js'
+import React from 'react'
+import { StyleSheet, Text, TextStyle, View } from 'react-native'
+import DataDown from 'src/icons/DataDown'
+import DataUp from 'src/icons/DataUp'
+import Colors, { ColorValue } from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+
+type IconComponentType = React.ComponentType<{ color?: ColorValue; testID?: string }>
+
+interface Props {
+  testID?: string
+  comparedValue: BigNumber.Value
+  currentValue: BigNumber.Value
+  percentageTextStyle?: TextStyle
+  suffixText?: string
+  suffixTextStyle?: TextStyle
+  DownIcon?: IconComponentType
+  UpIcon?: IconComponentType
+  NoChangeIcon?: IconComponentType
+}
+
+function PercentageIndicator({
+  comparedValue,
+  currentValue,
+  testID = 'PercentageIndicator',
+  percentageTextStyle = typeScale.bodySmall,
+  suffixText,
+  suffixTextStyle = typeScale.bodySmall,
+  DownIcon = DataDown,
+  UpIcon = DataUp,
+  NoChangeIcon,
+}: Props) {
+  const percentage = new BigNumber(currentValue)
+    .dividedBy(new BigNumber(comparedValue))
+    .multipliedBy(100)
+    .minus(100)
+  const comparison = percentage.comparedTo(0)
+  const percentageString = `${percentage.abs().toFixed(2)}%`
+
+  let indicator: React.ReactElement<any> | undefined
+  let color: ColorValue
+  if (comparison > 0) {
+    color = Colors.accent
+    indicator = <UpIcon color={color} testID={`${testID}:UpIndicator`} />
+  } else if (comparison < 0) {
+    color = Colors.errorPrimary
+    indicator = <DownIcon color={color} testID={`${testID}:DownIndicator`} />
+  } else {
+    color = Colors.inactive
+    indicator = NoChangeIcon && (
+      <NoChangeIcon color={color} testID={`${testID}:NoChangeIndicator`} />
+    )
+  }
+
+  return (
+    <View style={styles.container} testID={testID}>
+      <View style={styles.indicator}>{indicator}</View>
+      <Text style={[percentageTextStyle, { color }]}>{percentageString}</Text>
+      {!!suffixText && <Text style={[suffixTextStyle, { color }]}>{suffixText}</Text>}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    gap: 4,
+  },
+  indicator: {
+    justifyContent: 'center',
+  },
+})
+
+export default PercentageIndicator

package/src/components/PhoneNumberInput.test.tsx

@@ -0,0 +1,99 @@
+import { act, fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Platform } from 'react-native'
+import PhoneNumberInput from 'src/components/PhoneNumberInput'
+import { Countries } from 'src/utils/Countries'
+
+const countries = new Countries('en-us')
+
+describe('PhoneNumberInput', () => {
+  it('renders and behaves correctly', async () => {
+    // mock
+    Platform.OS = 'ios'
+
+    const onChange = jest.fn()
+    const onPressCountry = jest.fn()
+    const { getByTestId, getByText, toJSON } = render(
+      <PhoneNumberInput
+        label="Phone number"
+        country={countries.getCountryByCodeAlpha2('FR')}
+        internationalPhoneNumber=""
+        onChange={onChange}
+        onPressCountry={onPressCountry}
+      />
+    )
+    expect(toJSON()).toMatchSnapshot()
+
+    expect(getByText('🇫🇷')).toBeTruthy()
+    expect(getByTestId('PhoneNumberField').props.placeholder).toBe('00 00 00 00 00')
+
+    await act(() => {
+      fireEvent.press(getByTestId('CountrySelectionButton'))
+    })
+
+    expect(onPressCountry).toHaveBeenCalled()
+
+    fireEvent.changeText(getByTestId('PhoneNumberField'), '123')
+    expect(onChange).toHaveBeenCalledWith('123', '+33')
+  })
+
+  // eslint-disable-next-line jest/no-disabled-tests
+  describe.skip('native phone picker (Android)', () => {
+    beforeEach(() => {
+      Platform.OS = 'android'
+    })
+
+    it.todo('requests the device phone number when focusing the phone number field')
+
+    it.todo('requests the device phone number when pressing the country selection button')
+  })
+
+  it("doesn't trigger the native phone picker if there's data in the form", async () => {
+    const onChange = jest.fn()
+    const { getByTestId } = render(
+      <PhoneNumberInput
+        label="Phone number"
+        country={undefined}
+        internationalPhoneNumber="123"
+        onChange={onChange}
+        onPressCountry={jest.fn()}
+      />
+    )
+
+    await act(() => {
+      fireEvent(getByTestId('PhoneNumberField'), 'focus')
+    })
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it.todo('can read Canadian phone numbers')
+
+  it.todo('can read US phone numbers')
+
+  it('renders and behaves correctly with Côte d’Ivoire phone numbers', async () => {
+    // mock
+    Platform.OS = 'ios'
+
+    const onChange = jest.fn()
+    const onPressCountry = jest.fn()
+    const { getByTestId, getByText } = render(
+      <PhoneNumberInput
+        label="Phone number"
+        country={countries.getCountryByCodeAlpha2('CI')}
+        internationalPhoneNumber=""
+        onChange={onChange}
+        onPressCountry={onPressCountry}
+      />
+    )
+
+    expect(getByText('🇨🇮')).toBeTruthy()
+    expect(getByTestId('PhoneNumberField').props.placeholder).toBe('00 00 0 00000')
+    await act(() => {
+      fireEvent.press(getByTestId('CountrySelectionButton'))
+    })
+    expect(onPressCountry).toHaveBeenCalled()
+
+    fireEvent.changeText(getByTestId('PhoneNumberField'), '2123456789')
+    expect(onChange).toHaveBeenCalledWith('21 23 4 56789', '+225')
+  })
+})