wallet-stack 1.0.0-alpha.121

package/src/components/PhoneNumberInput.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect, useRef } from 'react'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import Expandable from 'src/components/Expandable'
+import FormField from 'src/components/FormField'
+import FormTextInput from 'src/components/FormTextInput'
+import Touchable from 'src/components/Touchable'
+import ValidatedTextInput from 'src/components/ValidatedTextInput'
+import colors from 'src/styles/colors'
+import { Spacing } from 'src/styles/styles'
+import { type LocalizedCountry } from 'src/utils/Countries'
+import { ValidatorKind } from 'src/utils/inputValidation'
+
+interface Props {
+  label?: string
+  countryFlagStyle?: StyleProp<ViewStyle>
+  style?: StyleProp<ViewStyle>
+  country: LocalizedCountry | undefined
+  internationalPhoneNumber: string
+  onPressCountry?: () => void
+  onChange?: (internationalPhoneNumber: string, countryCallingCode: string) => void
+  editable?: boolean
+}
+
+export default function PhoneNumberInput({
+  countryFlagStyle,
+  label,
+  style,
+  country,
+  internationalPhoneNumber,
+  onPressCountry,
+  onChange,
+  editable = true,
+}: Props) {
+  const phoneInputRef = useRef<any>(undefined)
+  const flagEmoji = country?.emoji
+  const countryCallingCode = country?.countryCallingCode ?? ''
+  const numberPlaceholder = country?.countryPhonePlaceholder.national ?? ''
+
+  async function onPressCountryInternal() {
+    if (!onPressCountry) {
+      return
+    }
+
+    onPressCountry()
+  }
+
+  function onChangePhoneNumber(newInternationalPhoneNumber: string) {
+    if (onChange) {
+      onChange(newInternationalPhoneNumber, countryCallingCode)
+    }
+  }
+
+  useEffect(() => {
+    if (country && phoneInputRef.current) {
+      phoneInputRef.current.focus()
+    }
+  }, [country, phoneInputRef])
+
+  return (
+    <FormField style={[styles.container, style]} label={label}>
+      <View style={styles.phoneNumberContainer}>
+        <Touchable
+          onPress={onPressCountryInternal}
+          style={[styles.countryCodeContainer, countryFlagStyle]}
+          testID="CountrySelectionButton"
+          disabled={!editable}
+        >
+          <View style={styles.countryCodeContent}>
+            <Expandable
+              isExpandable={editable}
+              isExpanded={false}
+              containerStyle={styles.countryFlagContainer}
+              arrowColor={colors.contentSecondary}
+            >
+              <Text style={styles.flag} testID={'countryCodeFlag'}>
+                {flagEmoji}
+              </Text>
+            </Expandable>
+          </View>
+        </Touchable>
+        <ValidatedTextInput
+          forwardedRef={phoneInputRef}
+          InputComponent={FormTextInput}
+          style={styles.phoneNumberInput}
+          value={internationalPhoneNumber}
+          placeholder={numberPlaceholder}
+          keyboardType="phone-pad"
+          textContentType="telephoneNumber"
+          testID="PhoneNumberField"
+          validator={ValidatorKind.Phone}
+          countryCallingCode={countryCallingCode}
+          onChangeText={onChangePhoneNumber}
+          editable={editable}
+          showClearButton={false}
+        />
+      </View>
+    </FormField>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {},
+  phoneNumberContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  countryCodeContainer: {
+    width: 80,
+    height: Spacing.XLarge48,
+    paddingHorizontal: 12,
+    alignItems: 'stretch',
+    backgroundColor: colors.backgroundPrimary,
+    borderRadius: 8,
+  },
+  countryFlagContainer: {
+    justifyContent: 'center',
+  },
+  countryCodeContent: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  flag: {
+    fontSize: 20,
+  },
+  phoneNumberInput: {
+    // flex: 1,
+    marginLeft: Spacing.Regular16,
+    backgroundColor: colors.backgroundPrimary,
+    borderBottomWidth: 1,
+    borderColor: colors.borderPrimary,
+  },
+})

package/src/components/PhoneNumberWithFlag.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Colors, { ColorValue } from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { getCountryEmoji } from 'src/utils/getCountryEmoji'
+import { parsePhoneNumber } from 'src/utils/phoneNumbers'
+
+interface Props {
+  e164PhoneNumber: string
+  defaultCountryCode?: string
+  textColor?: ColorValue
+}
+
+export class PhoneNumberWithFlag extends React.PureComponent<Props> {
+  render() {
+    const parsedNumber = parsePhoneNumber(this.props.e164PhoneNumber, this.props.defaultCountryCode)
+    return (
+      <View style={styles.container}>
+        <Text style={styles.countryCodeContainer}>
+          {parsedNumber
+            ? getCountryEmoji(
+                this.props.e164PhoneNumber,
+                parsedNumber.countryCode,
+                parsedNumber.regionCode
+              )
+            : getCountryEmoji(this.props.e164PhoneNumber)}
+        </Text>
+        <Text
+          style={{
+            ...typeScale.labelSmall,
+            lineHeight: 18,
+            color: this.props.textColor ?? Colors.contentPrimary,
+          }}
+        >
+          {parsedNumber ? parsedNumber.displayNumberInternational : ''}
+        </Text>
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  countryCodeContainer: {
+    ...typeScale.bodySmall,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 4,
+  },
+})
+
+export default PhoneNumberWithFlag

package/src/components/QrScanButton.test.tsx

@@ -0,0 +1,21 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import { QrScreenEvents } from 'src/analytics/Events'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import QrScanButton from 'src/components/QrScanButton'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+
+jest.mock('src/analytics/AppAnalytics')
+
+describe('HeaderButtons', () => {
+  it('navigates to QR scanner and emits analytics event on press', () => {
+    const { queryByTestId, getByTestId } = render(<QrScanButton testID="QrScanButton" />)
+    expect(queryByTestId('QrScanButton')).toBeTruthy()
+    fireEvent.press(getByTestId('QrScanButton'))
+    expect(AppAnalytics.track).toHaveBeenCalledTimes(1)
+    expect(AppAnalytics.track).toHaveBeenCalledWith(QrScreenEvents.qr_scanner_open)
+    expect(navigate).toHaveBeenCalledTimes(1)
+    expect(navigate).toHaveBeenCalledWith(Screens.QRNavigator, { screen: Screens.QRScanner })
+  })
+})

package/src/components/QrScanButton.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { StyleProp, ViewStyle } from 'react-native'
+import { QrScreenEvents } from 'src/analytics/Events'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import ScanIcon from 'src/icons/ScanIcon'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { TopBarIconButtonV2 } from 'src/navigator/TopBarIconButtonV2'
+
+interface Props {
+  style?: StyleProp<ViewStyle>
+  size?: number
+  testID?: string
+}
+
+export default function QrScanButton({ testID, size, style }: Props) {
+  const onPress = () => {
+    AppAnalytics.track(QrScreenEvents.qr_scanner_open)
+    navigate(Screens.QRNavigator, { screen: Screens.QRScanner })
+  }
+
+  return (
+    <TopBarIconButtonV2
+      icon={<ScanIcon size={size} />}
+      testID={testID}
+      onPress={onPress}
+      style={style}
+    />
+  )
+}

package/src/components/RecoveryPhraseInput.test.tsx

@@ -0,0 +1,26 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import RecoveryPhraseInput, { RecoveryPhraseInputStatus } from 'src/components/RecoveryPhraseInput'
+import TextInput from 'src/components/TextInput'
+
+jest.mock('src/components/TextInput', () => jest.fn(() => null))
+
+describe('RecoveryPhraseInput', () => {
+  it('disables auto correct / suggestion when in input mode', () => {
+    render(
+      <RecoveryPhraseInput
+        status={RecoveryPhraseInputStatus.Inputting}
+        inputValue={'test'}
+        inputPlaceholder={'placeholder'}
+        onInputChange={jest.fn()}
+        shouldShowClipboard={jest.fn()}
+      />
+    )
+    const expectedProps = {
+      autoCorrect: false,
+      autoCapitalize: 'none',
+      keyboardType: 'visible-password',
+    }
+    expect(TextInput).toHaveBeenCalledWith(expect.objectContaining(expectedProps), undefined)
+  })
+})

package/src/components/RecoveryPhraseInput.tsx

@@ -0,0 +1,188 @@
+import React, { useLayoutEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  ActivityIndicator,
+  Dimensions,
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import Card from 'src/components/Card'
+import ClipboardAwarePasteButton from 'src/components/ClipboardAwarePasteButton'
+import TextInput, { LINE_HEIGHT } from 'src/components/TextInput'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+import { useClipboard } from 'src/utils/useClipboard'
+
+export enum RecoveryPhraseInputStatus {
+  Inputting = 'Inputting', // input enabled
+  Processing = 'Processing', // code validated, now trying to send it
+}
+
+interface Props {
+  status: RecoveryPhraseInputStatus
+  inputValue: string
+  inputPlaceholder: string
+  onInputChange: (value: string) => void
+  shouldShowClipboard: (value: string) => boolean
+}
+
+const AVERAGE_WORD_WIDTH = 80
+const AVERAGE_SEED_WIDTH = AVERAGE_WORD_WIDTH * 24
+// Estimated number of lines needed to enter the Recovery Phrase
+const NUMBER_OF_LINES = Math.ceil(AVERAGE_SEED_WIDTH / Dimensions.get('window').width)
+
+const testID = 'ImportWalletBackupKeyInputField'
+
+export default function RecoveryPhraseInput({
+  status,
+  inputValue,
+  inputPlaceholder,
+  onInputChange,
+  shouldShowClipboard,
+}: Props) {
+  const [forceShowingPasteIcon, clipboardContent, getFreshClipboardContent] = useClipboard()
+  const { t } = useTranslation()
+  // LayoutAnimation when switching to/from input
+  useLayoutEffect(() => {
+    LayoutAnimation.easeInEaseOut()
+  }, [status === RecoveryPhraseInputStatus.Inputting])
+
+  function shouldShowClipboardInternal() {
+    if (forceShowingPasteIcon) {
+      return true
+    }
+    return (
+      !inputValue.toLowerCase().startsWith(clipboardContent.toLowerCase()) &&
+      shouldShowClipboard(clipboardContent)
+    )
+  }
+
+  const showInput = status === RecoveryPhraseInputStatus.Inputting
+  const showStatus = status === RecoveryPhraseInputStatus.Processing
+  const showPaste = shouldShowClipboardInternal()
+  const keyboardType = Platform.OS === 'android' ? 'visible-password' : undefined
+
+  return (
+    <Card rounded={true} shadow={null} style={styles.container}>
+      {/* These views cannot be combined as it will cause the shadow to be clipped on iOS */}
+      <View style={styles.containRadius}>
+        <View
+          style={[
+            styles.content,
+            showInput ? styles.contentActive : styles.contentInactive,
+            showInput && showPaste && styles.contentActiveWithPaste,
+          ]}
+        >
+          <View style={styles.innerContent}>
+            <Text style={[styles.label, !showInput && styles.labelInactive]}>
+              {t('accountKey')}
+            </Text>
+            {showInput ? (
+              <TextInput
+                showClearButton={false}
+                value={inputValue}
+                placeholder={inputPlaceholder}
+                placeholderTextColor={colors.inactive}
+                onChangeText={onInputChange}
+                multiline={true}
+                // This disables keyboard suggestions on iOS, but unfortunately NOT on Android
+                // Though `InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS` is correctly set on the native input,
+                // most Android keyboards ignore it :/
+                autoCorrect={false}
+                // On Android, the only known hack for now to disable keyboard suggestions
+                // is to set the keyboard type to 'visible-password' which sets `InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD`
+                // on the native input. Though it doesn't work in all cases (see https://stackoverflow.com/a/33227237/158525)
+                // and has the unfortunate drawback of breaking multiline autosize.
+                // We use numberOfLines to workaround this last problem.
+                keyboardType={keyboardType}
+                // numberOfLines is currently Android only on TextInput
+                // workaround is to set the minHeight on iOS :/
+                numberOfLines={Platform.OS === 'ios' ? undefined : NUMBER_OF_LINES}
+                inputStyle={{
+                  minHeight:
+                    Platform.OS === 'ios' && NUMBER_OF_LINES
+                      ? LINE_HEIGHT * NUMBER_OF_LINES
+                      : undefined,
+                  backgroundColor: colors.textInputBackground,
+                }}
+                autoCapitalize="none"
+                testID={testID}
+              />
+            ) : (
+              <Text style={styles.codeValueLong} numberOfLines={1}>
+                {inputValue || ' '}
+              </Text>
+            )}
+          </View>
+          {showStatus && (
+            <View style={styles.statusContainer}>
+              {showStatus && <ActivityIndicator size="small" color={colors.loadingIndicator} />}
+            </View>
+          )}
+        </View>
+        {showInput && (
+          <ClipboardAwarePasteButton
+            getClipboardContent={getFreshClipboardContent}
+            shouldShow={showPaste}
+            onPress={onInputChange}
+          />
+        )}
+      </View>
+    </Card>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 0,
+    backgroundColor: colors.textInputBackground,
+    borderColor: colors.borderSecondary,
+    borderRadius: Spacing.Smallest8,
+    borderWidth: 1,
+  },
+  // Applying overflow 'hidden' to `Card` also hides its shadow
+  // that's why we're using a separate container
+  containRadius: {
+    borderRadius: Spacing.Smallest8,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: Spacing.Regular16,
+  },
+  contentInactive: {
+    paddingVertical: Spacing.Small12,
+  },
+  contentActive: {
+    paddingBottom: Spacing.Tiny4,
+  },
+  contentActiveWithPaste: {
+    borderBottomWidth: 1,
+    borderColor: colors.borderSecondary,
+  },
+  innerContent: {
+    flex: 1,
+  },
+  label: {
+    ...typeScale.labelSemiBoldSmall,
+  },
+  labelInactive: {
+    color: colors.contentSecondary,
+    opacity: 0.5,
+    marginBottom: 4,
+  },
+  codeValueLong: {
+    ...typeScale.bodyMedium,
+    color: colors.contentSecondary,
+  },
+  statusContainer: {
+    width: 32,
+    marginLeft: 4,
+  },
+})

package/src/components/ReviewHeader.test.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import ReviewHeader from 'src/components/ReviewHeader'
+
+describe('ReviewHeader', () => {
+  describe('when just title', () => {
+    it('renders title', () => {
+      const { getByText } = render(<ReviewHeader title="God is a Miner" />)
+      expect(getByText('God is a Miner')).toBeTruthy()
+    })
+  })
+  describe('subtitle is passed too', () => {
+    it('renders subtitle', () => {
+      const { getByText } = render(
+        <ReviewHeader title="God is a Miner" subtitle={'Off the Chain'} />
+      )
+      expect(getByText('God is a Miner')).toBeTruthy()
+      expect(getByText('Off the Chain')).toBeTruthy()
+    })
+  })
+})

package/src/components/ReviewHeader.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { typeScale } from 'src/styles/fonts'
+
+interface Props {
+  title: string
+  subtitle?: string
+}
+
+class ReviewHeader extends React.PureComponent<Props> {
+  render() {
+    const { title, subtitle } = this.props
+    return (
+      <View style={styles.container}>
+        <Text style={[typeScale.titleMedium, styles.heading]}>{title}</Text>
+        {!!subtitle && subtitle.length > 0 && <Text style={typeScale.bodyMedium}>{subtitle}</Text>}
+      </View>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 10,
+  },
+  heading: {
+    padding: 10,
+    paddingBottom: 10,
+    alignSelf: 'center',
+  },
+})
+
+export default ReviewHeader