wallet-stack 1.0.0-alpha.121

package/src/components/CurrencyDisplay.tsx

@@ -0,0 +1,242 @@
+import BigNumber from 'bignumber.js'
+import * as React from 'react'
+import { ColorValue, StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
+import i18n from 'src/i18n'
+import { LocalCurrencyCode, LocalCurrencySymbol } from 'src/localCurrency/consts'
+import { convertCurrencyToLocalAmount } from 'src/localCurrency/convert'
+import { useLocalCurrencyToShow } from 'src/localCurrency/hooks'
+import { CurrencyInfo } from 'src/localCurrency/types'
+import { typeScale } from 'src/styles/fonts'
+import { CURRENCIES, Currency } from 'src/utils/currencies'
+import {
+  getCentAwareMoneyDisplay,
+  getExchangeRateDisplayValue,
+  getFeeDisplayValue,
+  getMoneyDisplayValue,
+  getNetworkFeeDisplayValue,
+} from 'src/utils/formatting'
+import { MoneyAmount } from 'src/utils/moneyAmount'
+
+export enum DisplayType {
+  Default,
+  Big, // symbol displayed as superscript
+}
+
+export enum FormatType {
+  Default,
+  CentAware,
+  Fee,
+  NetworkFee,
+  NetworkFeePrecise,
+  ExchangeRate,
+}
+
+interface Props {
+  type?: DisplayType
+  amount: MoneyAmount
+  size?: number // only used for DisplayType.Big
+  hideSign?: boolean
+  hideSymbol?: boolean
+  hideCode?: boolean
+  showLocalAmount?: boolean
+  showExplicitPositiveSign?: boolean // shows '+' for a positive amount when true (default is false)
+  formatType?: FormatType
+  hideFullCurrencyName?: boolean
+  style?: StyleProp<TextStyle>
+  currencyInfo?: CurrencyInfo
+  testID?: string
+}
+
+const BIG_SIGN_RATIO = 34 / 48
+const BIG_SYMBOL_RATIO = 24 / 48
+const BIG_CODE_RATIO = 16 / 48
+const BIG_LINE_HEIGHT_RATIO = 64 / 48
+
+function getBigSymbolStyle(fontSize: number, color: ColorValue | undefined): StyleProp<TextStyle> {
+  const size = Math.floor(fontSize * BIG_SYMBOL_RATIO)
+  return {
+    paddingVertical: 4,
+    fontSize: size,
+    color,
+  }
+}
+
+function getLocalAmount(
+  amount: MoneyAmount,
+  localCurrencyCode: LocalCurrencyCode,
+  exchangeRate: BigNumber.Value | null | undefined
+) {
+  if (amount.localAmount) {
+    return amount.localAmount
+  }
+
+  const localValue = convertCurrencyToLocalAmount(amount.value, exchangeRate)
+  if (!localValue) {
+    return null
+  }
+
+  return {
+    value: localValue,
+    currencyCode: localCurrencyCode as string,
+  }
+}
+
+type FormatFunction = (amount: BigNumber.Value, currency?: Currency) => string
+
+function getFormatFunction(formatType: FormatType): FormatFunction {
+  switch (formatType) {
+    case FormatType.Default:
+      return getMoneyDisplayValue
+    case FormatType.CentAware:
+      return (amount: BigNumber.Value, _currency?: Currency) => getCentAwareMoneyDisplay(amount)
+    case FormatType.Fee:
+      return (amount: BigNumber.Value, _currency?: Currency) => getFeeDisplayValue(amount)
+    case FormatType.NetworkFee:
+      return (amount: BigNumber.Value, _currency?: Currency) => getNetworkFeeDisplayValue(amount)
+    case FormatType.NetworkFeePrecise:
+      return (amount: BigNumber.Value, _currency?: Currency) =>
+        getNetworkFeeDisplayValue(amount, true)
+    case FormatType.ExchangeRate:
+      return (amount: BigNumber.Value, _currency?: Currency) => getExchangeRateDisplayValue(amount)
+  }
+}
+
+export function getFullCurrencyName(currency: Currency | null) {
+  switch (currency) {
+    case Currency.Dollar:
+      return i18n.t('celoDollars')
+    case Currency.Euro:
+      return i18n.t('celoEuros')
+    case Currency.Celo:
+      return i18n.t('celoGold')
+    default:
+      return null
+  }
+}
+
+/**
+ * @deprecated use TokenDisplay instead
+ */
+export default function CurrencyDisplay({
+  type = DisplayType.Default,
+  size = 48,
+  hideSign = false,
+  hideSymbol = false,
+  hideCode = true,
+  showLocalAmount,
+  showExplicitPositiveSign = false,
+  amount,
+  formatType = FormatType.Default,
+  hideFullCurrencyName = true,
+  style,
+  currencyInfo,
+  testID,
+}: Props) {
+  const { localCurrencyCode, localCurrencyExchangeRate, amountCurrency } = useLocalCurrencyToShow(
+    amount,
+    currencyInfo
+  )
+
+  // Show local amount only if explicitly set to true when currency is CELO
+  const shouldShowLocalAmount = showLocalAmount ?? amountCurrency !== Currency.Celo
+  const displayAmount = shouldShowLocalAmount
+    ? getLocalAmount(amount, localCurrencyCode, localCurrencyExchangeRate)
+    : amount
+  const displayCurrency = displayAmount
+    ? displayAmount.currencyCode === Currency.Celo
+      ? Currency.Celo
+      : Currency.Dollar
+    : null
+  const currencySymbol = displayAmount
+    ? shouldShowLocalAmount
+      ? LocalCurrencySymbol[displayAmount.currencyCode as LocalCurrencyCode]
+      : CURRENCIES[amountCurrency].symbol
+    : null
+  const value = displayAmount ? new BigNumber(displayAmount.value) : null
+  const sign = value?.isNegative() ? '-' : showExplicitPositiveSign ? '+' : ''
+  const formatAmount = getFormatFunction(formatType)
+  const formattedValue =
+    value && displayCurrency ? formatAmount(value.absoluteValue(), displayCurrency) : '-'
+  const includesLowerThanSymbol = formattedValue.startsWith('<')
+  const code = displayAmount?.currencyCode
+  const fullCurrencyName = getFullCurrencyName(amountCurrency)
+
+  const color = StyleSheet.flatten(style)?.color
+
+  if (type === DisplayType.Big) {
+    // In this type the symbol is displayed as superscript
+    // the downside is we have to workaround React Native not supporting it
+    // and have to involve a View, which prevents this type to be embedded into a Text node
+    // see https://medium.com/@aaronmgdr/a-better-superscript-in-react-native-591b83db6caa
+    const fontSize = size
+    const signStyle: StyleProp<TextStyle> = {
+      fontSize: Math.round(fontSize * BIG_SIGN_RATIO),
+      color,
+    }
+    const symbolStyle: StyleProp<TextStyle> = getBigSymbolStyle(fontSize, color)
+    const lineHeight = Math.round(fontSize * BIG_LINE_HEIGHT_RATIO)
+    const amountStyle: StyleProp<TextStyle> = { fontSize, lineHeight, color }
+    const codeStyle: StyleProp<TextStyle> = {
+      fontSize: Math.round(fontSize * BIG_CODE_RATIO),
+      lineHeight,
+      color,
+    }
+
+    return (
+      <View style={[styles.bigContainer, StyleSheet.flatten(style) as ViewStyle]} testID={testID}>
+        {!hideSign && (
+          <Text numberOfLines={1} style={[typeScale.bodyMedium, signStyle]}>
+            {sign}
+          </Text>
+        )}
+        {includesLowerThanSymbol && (
+          <Text numberOfLines={1} style={[typeScale.bodyMedium, symbolStyle]}>
+            {'<'}
+          </Text>
+        )}
+        {!hideSymbol && (
+          <Text numberOfLines={1} style={[typeScale.bodyMedium, symbolStyle]}>
+            {currencySymbol}
+          </Text>
+        )}
+        <Text numberOfLines={1} style={[styles.bigCurrency, amountStyle]}>
+          {formattedValue.substring(includesLowerThanSymbol ? 1 : 0)}
+        </Text>
+        {!hideCode && !!code && (
+          <Text numberOfLines={1} style={[styles.bigCurrencyCode, codeStyle]}>
+            {code}
+          </Text>
+        )}
+      </View>
+    )
+  }
+
+  return (
+    <Text style={[style, { color }]} testID={`${testID}/value`}>
+      {!hideSign && sign}
+      {includesLowerThanSymbol && '<'}
+      {!hideSymbol && currencySymbol}
+      {formattedValue.substring(includesLowerThanSymbol ? 1 : 0)}
+      {!hideCode && !!code && ` ${code}`}
+      {!hideFullCurrencyName && !!fullCurrencyName && ` ${fullCurrencyName}`}
+    </Text>
+  )
+}
+
+const styles = StyleSheet.create({
+  bigContainer: {
+    flexDirection: 'row',
+    alignSelf: 'center',
+    alignItems: 'center',
+    marginTop: 5,
+  },
+  bigCurrency: {
+    ...typeScale.bodyMedium,
+    paddingHorizontal: 3,
+  },
+  bigCurrencyCode: {
+    ...typeScale.bodyMedium,
+    marginLeft: 7,
+    alignSelf: 'flex-end',
+  },
+})

package/src/components/DataFieldWithCopy.tsx

@@ -0,0 +1,75 @@
+import Clipboard from '@react-native-clipboard/clipboard'
+import React from 'react'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import Toast from 'react-native-simple-toast'
+import Touchable from 'src/components/Touchable'
+import CopyIcon from 'src/icons/CopyIcon'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { vibrateInformative } from 'src/styles/hapticFeedback'
+import { Spacing } from 'src/styles/styles'
+import variables from 'src/styles/variables'
+
+interface Props {
+  label: string
+  value: string
+  copySuccessMessage: string
+  testID: string
+  onCopy?: () => void
+  style?: StyleProp<ViewStyle>
+}
+
+function DataFieldWithCopy({ label, value, copySuccessMessage, testID, onCopy, style }: Props) {
+  const handleCopy = () => {
+    onCopy?.()
+
+    Clipboard.setString(value)
+    vibrateInformative()
+
+    Toast.showWithGravity(copySuccessMessage, Toast.SHORT, Toast.BOTTOM)
+  }
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <Text style={styles.transactionDataLabel}>{label}</Text>
+      <View style={styles.transactionDataContainer}>
+        <Text
+          testID={`${testID}/Value`}
+          style={styles.transactionData}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
+          {value}
+        </Text>
+        <Touchable hitSlop={variables.iconHitslop} onPress={handleCopy} testID={`${testID}/Copy`}>
+          <CopyIcon color={Colors.contentSecondary} />
+        </Touchable>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: Spacing.Regular16,
+    backgroundColor: Colors.backgroundSecondary,
+    marginTop: Spacing.Smallest8,
+    marginBottom: Spacing.Large32,
+  },
+  transactionDataContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: Spacing.Large32,
+  },
+  transactionDataLabel: {
+    ...typeScale.labelXSmall,
+    marginBottom: Spacing.Smallest8,
+  },
+  transactionData: {
+    ...typeScale.bodyMedium,
+    flex: 1,
+  },
+})
+
+export default DataFieldWithCopy

package/src/components/DevSkipButton.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { connect } from 'react-redux'
+import { devModeTriggerClicked } from 'src/account/actions'
+import { devModeSelector } from 'src/account/selectors'
+import { navigate } from 'src/navigator/NavigationService'
+import { StackParamList } from 'src/navigator/types'
+import { RootState } from 'src/redux/reducers'
+import colors from 'src/styles/colors'
+
+interface StateProps {
+  devModeActive: boolean
+}
+
+interface DispatchProps {
+  devModeTriggerClicked: typeof devModeTriggerClicked
+}
+
+type OwnProps =
+  | {
+      nextScreen: keyof StackParamList
+      onSkip?: () => void
+    }
+  | {
+      nextScreen?: keyof StackParamList
+      onSkip: () => void
+    }
+
+type Props = OwnProps & StateProps & DispatchProps
+
+const mapStateToProps = (state: RootState): StateProps => {
+  return {
+    devModeActive: devModeSelector(state) || false,
+  }
+}
+
+class DevSkipButton extends React.Component<Props> {
+  skip = () => {
+    if (this.props.onSkip) {
+      this.props.onSkip()
+    }
+    if (this.props.nextScreen) {
+      navigate(this.props.nextScreen)
+    }
+  }
+
+  devTriggerClicked = () => {
+    this.props.devModeTriggerClicked()
+  }
+
+  render() {
+    return (
+      <SafeAreaView style={styles.devButtonContainer}>
+        {this.props.devModeActive && (
+          <View style={styles.devButtonContent}>
+            <TouchableOpacity
+              style={[styles.devButton, styles.skipButton]}
+              onPress={this.skip}
+              testID={this.props.nextScreen ? `ButtonSkipTo${this.props.nextScreen}` : 'ButtonSkip'}
+            />
+          </View>
+        )}
+        {!this.props.devModeActive && (
+          <TouchableWithoutFeedback style={styles.hiddenButton} onPress={this.devTriggerClicked}>
+            <Text>{'   '}</Text>
+          </TouchableWithoutFeedback>
+        )}
+      </SafeAreaView>
+    )
+  }
+}
+
+const styles = StyleSheet.create({
+  devButtonContainer: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    width: 60,
+    height: 35,
+    zIndex: 100,
+  },
+  devButtonContent: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+
+  devButton: {
+    width: 25,
+    height: 25,
+  },
+  skipButton: {
+    backgroundColor: colors.errorPrimary,
+  },
+  hiddenButton: {
+    flex: 1,
+  },
+})
+
+export default connect<StateProps, DispatchProps, {}, RootState>(mapStateToProps, {
+  devModeTriggerClicked,
+})(DevSkipButton)

package/src/components/Dialog.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react-native'
+import * as React from 'react'
+import 'react-native'
+import Dialog from 'src/components/Dialog'
+
+it('renders correctly', () => {
+  const onPress = jest.fn()
+  const tree = render(
+    <Dialog isVisible={true} title="Dialog" actionPress={onPress} actionText="Press Me">
+      "HELLO"
+    </Dialog>
+  )
+  expect(tree).toMatchSnapshot()
+})

package/src/components/Dialog.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react'
+import {
+  ActivityIndicator,
+  Image,
+  ImageSourcePropType,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import Modal from 'src/components/Modal'
+import TextButton from 'src/components/TextButton'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+
+interface Props {
+  image?: ImageSourcePropType
+  title?: string | React.ReactNode
+  children: React.ReactNode
+  actionText?: string | null
+  isActionHighlighted?: boolean
+  actionPress?: () => void
+  secondaryActionText?: string | null
+  secondaryActionDisabled?: boolean
+  secondaryActionPress?: () => void
+  isVisible: boolean
+  showLoading?: boolean
+  testID?: string
+  onBackgroundPress?: () => void
+  onDialogHide?: () => void
+}
+
+export default function Dialog({
+  title,
+  children,
+  actionPress,
+  actionText,
+  isActionHighlighted = true,
+  secondaryActionText,
+  secondaryActionDisabled,
+  secondaryActionPress,
+  showLoading = false,
+  image,
+  isVisible,
+  testID,
+  onBackgroundPress,
+  onDialogHide,
+}: Props) {
+  return (
+    <Modal
+      isVisible={isVisible}
+      testID={testID}
+      onBackgroundPress={onBackgroundPress}
+      onModalHide={onDialogHide}
+    >
+      <ScrollView contentContainerStyle={styles.root}>
+        {!!image && <Image style={styles.imageContainer} source={image} resizeMode="contain" />}
+        {!!title && <Text style={styles.title}>{title}</Text>}
+        <Text style={styles.body}>{children}</Text>
+      </ScrollView>
+      <View style={styles.actions}>
+        {!!secondaryActionText && (
+          <TextButton
+            style={styles.secondary}
+            disabled={secondaryActionDisabled}
+            onPress={secondaryActionPress}
+            testID={testID ? `${testID}/SecondaryAction` : undefined}
+          >
+            {secondaryActionText}
+          </TextButton>
+        )}
+        {showLoading ? (
+          <ActivityIndicator style={styles.primary} size="small" color={colors.loadingIndicator} />
+        ) : (
+          <>
+            {!!actionText && (
+              <TextButton
+                style={isActionHighlighted ? styles.primary : styles.secondary}
+                onPress={actionPress}
+                testID={testID ? `${testID}/PrimaryAction` : undefined}
+              >
+                {actionText}
+              </TextButton>
+            )}
+          </>
+        )}
+      </View>
+    </Modal>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+  },
+  title: {
+    textAlign: 'center',
+    marginBottom: 12,
+    ...typeScale.titleSmall,
+  },
+  body: {
+    textAlign: 'center',
+    ...typeScale.bodyMedium,
+    marginBottom: 24,
+  },
+  actions: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    maxWidth: '100%',
+    flexWrap: 'wrap',
+  },
+  secondary: {
+    color: colors.contentSecondary,
+    paddingTop: 16,
+  },
+  primary: {
+    paddingTop: 16,
+  },
+  imageContainer: {
+    marginBottom: 12,
+    width: 100,
+    height: 100,
+  },
+})

package/src/components/Dropdown.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import Touchable from 'src/components/Touchable'
+import DownArrowIcon from 'src/icons/DownArrowIcon'
+import Colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+interface Props<T> {
+  options: { value: T; label: string }[]
+  onValueSelected(value: T): void
+  testId?: string
+}
+
+/* Dropdown component with unscrollable list of options */
+
+function Dropdown<T>(props: Props<T>) {
+  const testID = props.testId ? props.testId : 'Dropdown'
+  const [isOpen, setIsOpen] = useState(false)
+  const [labelSelected, setLabelSelected] = useState<string | undefined>()
+
+  const toggleOpen = () => {
+    setIsOpen((prev) => !prev)
+  }
+
+  return (
+    <View testID={testID}>
+      <Touchable onPress={toggleOpen} testID={testID + '-Touchable'}>
+        <View style={styles.selectedOptionContainer}>
+          <Text style={styles.optionText}>{labelSelected}</Text>
+          {!isOpen ? (
+            <DownArrowIcon color={Colors.accent} strokeWidth={2} />
+          ) : (
+            <DownArrowIcon
+              color={Colors.accent}
+              strokeWidth={2}
+              style={{ transform: [{ rotate: '180deg' }] }}
+            />
+          )}
+        </View>
+      </Touchable>
+      {isOpen && (
+        <View>
+          <View style={styles.optionsContainer}>
+            {props.options.map((option) => {
+              return (
+                <Touchable
+                  style={styles.touchableOption}
+                  onPress={() => {
+                    setLabelSelected(option.label)
+                    toggleOpen()
+                    props.onValueSelected(option.value)
+                  }}
+                  testID={testID + '-' + option.label}
+                  key={option.label}
+                >
+                  <Text style={styles.optionText}>{option.label}</Text>
+                </Touchable>
+              )
+            })}
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  selectedOptionContainer: {
+    padding: Spacing.Small12,
+    backgroundColor: Colors.textInputBackground,
+    borderColor: Colors.borderSecondary,
+    borderRadius: Spacing.Tiny4,
+    borderWidth: 1,
+    gap: Spacing.Thick24,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  optionsContainer: {
+    position: 'absolute',
+    top: 0,
+    borderColor: Colors.borderSecondary,
+    borderRadius: Spacing.Tiny4,
+    borderWidth: 1,
+    backgroundColor: Colors.textInputBackground,
+    flexDirection: 'column',
+    width: '100%',
+  },
+  optionText: {
+    ...typeScale.bodyMedium,
+    flexGrow: 1,
+  },
+  touchableOption: {
+    padding: Spacing.Small12,
+  },
+})
+
+export default Dropdown

package/src/components/EmptyView.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
+import { typeScale } from 'src/styles/fonts'
+import { Spacing } from 'src/styles/styles'
+
+interface Props {
+  style?: StyleProp<ViewStyle>
+  text: string
+  children?: React.ReactNode
+}
+
+/**
+ * A component to render an empty state with a message and optional children.
+ */
+export default function EmptyView(props: Props) {
+  return (
+    <View style={[styles.container, props.style]}>
+      <Text style={styles.text}>{props.text}</Text>
+      {props.children}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: Spacing.Thick24,
+    paddingTop: 75,
+  },
+  text: {
+    ...typeScale.bodyMedium,
+    marginBottom: Spacing.Regular16,
+  },
+})