wallet-stack 1.0.0-alpha.121

package/src/components/LegacyTokenDisplay.test.tsx

@@ -0,0 +1,282 @@
+import { render } from '@testing-library/react-native'
+import BigNumber from 'bignumber.js'
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import LegacyTokenDisplay from 'src/components/LegacyTokenDisplay'
+import { formatValueToDisplay } from 'src/components/TokenDisplay'
+import { LocalCurrencyCode } from 'src/localCurrency/consts'
+import { RootState } from 'src/redux/reducers'
+import { NetworkId } from 'src/transactions/types'
+import { Currency } from 'src/utils/currencies'
+import { createMockStore, getElementText, RecursivePartial } from 'test/utils'
+import {
+  mockCeloAddress,
+  mockCeloTokenId,
+  mockCeurAddress,
+  mockCeurTokenId,
+  mockCusdAddress,
+  mockCusdTokenId,
+} from 'test/values'
+jest.mock('src/statsig', () => ({
+  getFeatureGate: jest.fn(() => false),
+}))
+
+describe('LegacyTokenDisplay', () => {
+  function store(storeOverrides?: RecursivePartial<RootState>) {
+    return createMockStore({
+      localCurrency: {
+        usdToLocalRate: '0.10',
+        preferredCurrencyCode: LocalCurrencyCode.BRL,
+        fetchedCurrencyCode: LocalCurrencyCode.BRL,
+      },
+      tokens: {
+        tokenBalances: {
+          [mockCusdTokenId]: {
+            address: mockCusdAddress,
+            tokenId: mockCusdTokenId,
+            symbol: 'cUSD',
+            balance: '50',
+            priceUsd: '1',
+            networkId: NetworkId['celo-alfajores'],
+            priceFetchedAt: Date.now(),
+          },
+          [mockCeurTokenId]: {
+            address: mockCeurAddress,
+            tokenId: mockCeurTokenId,
+            symbol: 'cEUR',
+            balance: '50',
+            priceUsd: '1.2',
+            networkId: NetworkId['celo-alfajores'],
+            priceFetchedAt: Date.now(),
+          },
+          [mockCeloTokenId]: {
+            address: mockCeloAddress,
+            tokenId: mockCeloTokenId,
+            symbol: 'CELO',
+            balance: '10',
+            priceUsd: '5',
+            networkId: NetworkId['celo-alfajores'],
+            priceFetchedAt: Date.now(),
+          },
+        },
+      },
+      ...storeOverrides,
+    })
+  }
+
+  describe('when displaying tokens', () => {
+    it('throws when both currency and tokenAddress are supplied', () => {
+      expect(() =>
+        render(
+          <Provider store={store()}>
+            <LegacyTokenDisplay
+              showLocalAmount={false}
+              amount={10}
+              tokenAddress={mockCusdAddress}
+              currency={Currency.Celo}
+              testID="test"
+            />
+          </Provider>
+        )
+      ).toThrow()
+    })
+    it('throws when neither currency nor tokenAddress are supplied', () => {
+      expect(() =>
+        render(
+          <Provider store={store()}>
+            <LegacyTokenDisplay showLocalAmount={false} amount={10} testID="test" />
+          </Provider>
+        )
+      ).toThrow()
+    })
+    it('shows token amount when showLocalAmount is false', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={false}
+            amount={10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toBe('10.00 cUSD')
+    })
+
+    it('shows local amount when showLocalAmount is true', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={true}
+            amount={10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('R$1.00')
+    })
+
+    it('shows local amount when showLocalAmount is true and token is not cUSD', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={true}
+            amount={10}
+            tokenAddress={mockCeloAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('R$5.00')
+    })
+
+    it('shows more decimals up to the', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={false}
+            amount={0.00000182421}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('0.0000018 cUSD')
+    })
+
+    it('hides the symbol when showSymbol is false', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={false}
+            showSymbol={false}
+            amount={10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toBe('10.00')
+    })
+
+    it('hides the fiat symbol when showSymbol is false', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={false}
+            showSymbol={false}
+            amount={10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('10.00')
+    })
+
+    it('uses the localAmount if set', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            amount={10}
+            tokenAddress={mockCusdAddress}
+            localAmount={{
+              currencyCode: LocalCurrencyCode.PHP,
+              exchangeRate: '0.5',
+              value: '5',
+            }}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('₱5.00')
+    })
+
+    it('shows explicit plus sign', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={true}
+            showExplicitPositiveSign={true}
+            amount={10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('+R$1.00')
+    })
+
+    it('shows negative values', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={true}
+            amount={-10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('-R$1.00')
+    })
+
+    it('shows a dash when the token doesnt exist', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay amount={10} tokenAddress={'0xdoesntexist'} testID="test" />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('-')
+    })
+
+    it('doesnt show error when the token doesnt exist if theres a localAmount', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            amount={10}
+            tokenAddress={'0xdoesntexist'}
+            localAmount={{
+              currencyCode: LocalCurrencyCode.PHP,
+              exchangeRate: '0.5',
+              value: '5',
+            }}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('₱5.00')
+    })
+
+    it('hides the sign', () => {
+      const { getByTestId } = render(
+        <Provider store={store()}>
+          <LegacyTokenDisplay
+            showLocalAmount={true}
+            hideSign={true}
+            amount={-10}
+            tokenAddress={mockCusdAddress}
+            testID="test"
+          />
+        </Provider>
+      )
+      expect(getElementText(getByTestId('test'))).toEqual('R$1.00')
+    })
+  })
+})
+
+describe('formatValueToDisplay', () => {
+  it('adds at least two decimal places', () => {
+    expect(formatValueToDisplay(new BigNumber(1234))).toEqual('1,234.00')
+  })
+
+  it('shows at least two significant figures', () => {
+    expect(formatValueToDisplay(new BigNumber(0.00000012345))).toEqual('0.00000012')
+  })
+
+  it('does not show trailing zeros', () => {
+    expect(formatValueToDisplay(new BigNumber(0.01))).toEqual('0.01')
+  })
+})

package/src/components/LegacyTokenDisplay.tsx

@@ -0,0 +1,63 @@
+import BigNumber from 'bignumber.js'
+import * as React from 'react'
+import { StyleProp, TextStyle } from 'react-native'
+import TokenDisplay from 'src/components/TokenDisplay'
+import { useTokenInfoByAddress, useTokenInfoWithAddressBySymbol } from 'src/tokens/hooks'
+import { LocalAmount } from 'src/transactions/types'
+import { Currency } from 'src/utils/currencies'
+
+interface Props {
+  amount: BigNumber.Value
+  tokenAddress?: string | null
+  currency?: Currency
+  showSymbol?: boolean
+  showLocalAmount?: boolean
+  hideSign?: boolean
+  showExplicitPositiveSign?: boolean
+  localAmount?: LocalAmount
+  style?: StyleProp<TextStyle>
+  testID?: string
+}
+
+/**
+ * @deprecated use TokenDisplay instead
+ */
+function LegacyTokenDisplay({
+  amount,
+  tokenAddress,
+  currency,
+  showLocalAmount = true,
+  showSymbol = true,
+  showExplicitPositiveSign = false,
+  hideSign = false,
+  localAmount,
+  style,
+  testID,
+}: Props) {
+  if (tokenAddress ? currency : !currency) {
+    throw new Error(
+      'LegacyTokenDisplay must be passed either "currency" or "tokenAddress" and not both'
+    )
+  }
+
+  const tokenInfoFromAddress = useTokenInfoByAddress(tokenAddress)
+  const tokenInfoFromCurrency = useTokenInfoWithAddressBySymbol(
+    currency! === Currency.Celo ? 'CELO' : currency!
+  )
+  const tokenInfo = tokenInfoFromAddress || tokenInfoFromCurrency
+  return (
+    <TokenDisplay
+      amount={amount}
+      tokenId={tokenInfo?.tokenId}
+      showLocalAmount={showLocalAmount}
+      showSymbol={showSymbol}
+      showExplicitPositiveSign={showExplicitPositiveSign}
+      hideSign={hideSign}
+      localAmount={localAmount}
+      style={style}
+      testID={testID}
+    />
+  )
+}
+
+export default LegacyTokenDisplay

package/src/components/LegacyTokenTotalLineItem.test.tsx

@@ -0,0 +1,90 @@
+import { render } from '@testing-library/react-native'
+import BigNumber from 'bignumber.js'
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import LegacyTokenTotalLineItem from 'src/components/LegacyTokenTotalLineItem'
+import { LocalCurrencyCode } from 'src/localCurrency/consts'
+import { LocalAmount, NetworkId } from 'src/transactions/types'
+import { createMockStore, getElementText } from 'test/utils'
+import { mockCusdAddress, mockCusdTokenId } from 'test/values'
+
+const mockBtcAddress = '0xbtc'
+const mockBtcTokenId = `celo-alfajores:${mockBtcAddress}`
+
+const defaultAmount = new BigNumber(10)
+const defaultTokenAddress = mockCusdAddress
+
+// This component is primarily tested via TokenTotalLineItem.test.tsx
+describe('LegacyTokenTotalLineItem', () => {
+  function renderComponent({
+    amount = defaultAmount,
+    tokenAddress = defaultTokenAddress,
+    localAmount,
+    localCurrencyCode = LocalCurrencyCode.BRL,
+    usdToLocalRate = '1.5',
+    feeToAddInUsd = undefined,
+    hideSign = undefined,
+  }: {
+    amount?: BigNumber
+    tokenAddress?: string
+    localAmount?: LocalAmount
+    localCurrencyCode?: LocalCurrencyCode
+    usdToLocalRate?: string
+    feeToAddInUsd?: BigNumber
+    hideSign?: boolean
+  }) {
+    return render(
+      <Provider
+        store={createMockStore({
+          localCurrency: {
+            preferredCurrencyCode: LocalCurrencyCode.BRL,
+            fetchedCurrencyCode: LocalCurrencyCode.BRL,
+            usdToLocalRate,
+          },
+          tokens: {
+            tokenBalances: {
+              [mockCusdTokenId]: {
+                networkId: NetworkId['celo-alfajores'],
+                address: mockCusdAddress,
+                tokenId: mockCusdTokenId,
+                symbol: 'cUSD',
+                priceUsd: '1',
+                balance: '10',
+                priceFetchedAt: Date.now(),
+              },
+              [mockBtcTokenId]: {
+                networkId: NetworkId['celo-alfajores'],
+                address: mockBtcAddress,
+                tokenId: mockBtcTokenId,
+                symbol: 'WBTC',
+                priceUsd: '65000',
+                balance: '0.5',
+                priceFetchedAt: Date.now(),
+              },
+            },
+          },
+        })}
+      >
+        <LegacyTokenTotalLineItem
+          tokenAmount={amount}
+          tokenAddress={tokenAddress}
+          localAmount={localAmount}
+          feeToAddInUsd={feeToAddInUsd}
+          hideSign={hideSign}
+        />
+      </Provider>
+    )
+  }
+
+  describe('When rendering normally', () => {
+    it('shows the right amounts', () => {
+      const { getByTestId } = renderComponent({})
+      expect(getElementText(getByTestId('TotalLineItem/Total'))).toEqual('R$15.00')
+      expect(getElementText(getByTestId('TotalLineItem/ExchangeRate'))).toEqual(
+        'tokenExchanteRate, {"symbol":"cUSD"}R$1.50'
+      )
+      expect(getElementText(getByTestId('TotalLineItem/Subtotal'))).toEqual('10.00 cUSD')
+    })
+  })
+})

package/src/components/LegacyTokenTotalLineItem.tsx

@@ -0,0 +1,38 @@
+import BigNumber from 'bignumber.js'
+import * as React from 'react'
+import { useTokenInfoByAddress } from 'src/tokens/hooks'
+import TokenTotalLineItem from 'src/components/TokenTotalLineItem'
+import { LocalAmount } from 'src/transactions/types'
+
+interface Props {
+  tokenAmount: BigNumber
+  tokenAddress?: string
+  localAmount?: LocalAmount
+  feeToAddInUsd?: BigNumber | undefined
+  hideSign?: boolean
+  title?: string | null
+}
+
+/**
+ * @deprecated Use TokenTotalLineItem instead
+ */
+export default function LegacyTokenTotalLineItem({
+  tokenAmount,
+  tokenAddress,
+  localAmount,
+  feeToAddInUsd,
+  hideSign,
+  title,
+}: Props) {
+  const tokenInfo = useTokenInfoByAddress(tokenAddress)
+  return (
+    <TokenTotalLineItem
+      tokenAmount={tokenAmount}
+      tokenId={tokenInfo?.tokenId}
+      localAmount={localAmount}
+      feeToAddInUsd={feeToAddInUsd}
+      hideSign={hideSign}
+      title={title}
+    />
+  )
+}

package/src/components/LineItemRow.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react'
+import { ActivityIndicator, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+
+interface LineItemProps {
+  style?: ViewStyle
+  textStyle?: TextStyle
+  amount?: string | React.ReactNode
+  title: string | React.ReactNode
+  titleIcon?: React.ReactNode
+  isLoading?: boolean
+  hasError?: boolean
+  testID?: string
+}
+
+export default function LineItemRow({
+  style,
+  textStyle: textStyleProp,
+  amount,
+  title,
+  titleIcon,
+  isLoading,
+  hasError,
+  testID,
+}: LineItemProps) {
+  const textStyle = [styles.text, textStyleProp]
+
+  return (
+    <View style={[styles.container, style]}>
+      <View style={styles.description}>
+        <Text testID={`LineItemRowTitle/${testID}`} style={textStyle}>
+          {title}
+        </Text>
+        {titleIcon}
+      </View>
+      {!!amount && (
+        <Text style={textStyle} testID={`LineItemRow/${testID}`}>
+          {amount}
+        </Text>
+      )}
+      {hasError && (
+        <Text style={textStyle} testID={`LineItemRow/${testID}`}>
+          ---
+        </Text>
+      )}
+      {isLoading && (
+        <View style={styles.loadingContainer} testID="LineItemLoading">
+          <ActivityIndicator size="small" color={colors.loadingIndicator} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 5,
+    flexWrap: 'wrap',
+  },
+  description: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 5,
+  },
+  text: {
+    ...typeScale.labelMedium,
+  },
+  loadingContainer: {
+    transform: [{ scale: 0.7 }],
+  },
+})

package/src/components/ListItem.test.tsx

@@ -0,0 +1,19 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import { Text } from 'react-native'
+import ListItem from 'src/components/ListItem'
+
+const testID = 'ListItemTestID'
+
+describe('ListItem', () => {
+  it('call onPress', () => {
+    const onPress = jest.fn()
+    const { getByTestId } = render(
+      <ListItem testID={testID} children={<Text>test</Text>} onPress={onPress} />
+    )
+
+    const el = getByTestId(testID)
+    fireEvent.press(el)
+    expect(onPress).toHaveBeenCalled()
+  })
+})

package/src/components/ListItem.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { StyleSheet, View } from 'react-native'
+import Touchable from 'src/components/Touchable'
+import colors from 'src/styles/colors'
+import variables from 'src/styles/variables'
+
+interface Props {
+  children: React.ReactNode
+  onPress?: () => void
+  disabled?: boolean
+  testID?: string
+  borderless?: boolean
+}
+
+export default function ListItem({ children, onPress, disabled, testID, borderless }: Props) {
+  const innerViewStyle = {
+    ...styles.innerView,
+    borderBottomWidth: borderless ? 0 : 1,
+  }
+
+  return (
+    <View style={styles.container}>
+      {onPress ? (
+        <Touchable onPress={onPress} borderless={true} disabled={disabled} testID={testID}>
+          <View style={innerViewStyle}>{children}</View>
+        </Touchable>
+      ) : (
+        <View style={innerViewStyle}>{children}</View>
+      )}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.backgroundPrimary,
+  },
+  innerView: {
+    paddingVertical: variables.contentPadding,
+    borderBottomWidth: 1,
+    borderBottomColor: colors.borderPrimary,
+    marginHorizontal: variables.contentPadding,
+  },
+})

package/src/components/MessagingCard.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { StyleSheet } from 'react-native'
+import Card, { Props } from 'src/components/Card'
+import Colors from 'src/styles/colors'
+
+// Card used by all messaging cards
+export default function MessagingCard({ style, ...props }: Props) {
+  return <Card style={[styles.container, style]} shadow={null} rounded={true} {...props} />
+}
+
+const styles = StyleSheet.create({
+  container: {
+    minHeight: 144,
+    flex: 1,
+    // NOTE: using this over bar shadow since it's barely visible on android. If we
+    // want to use this consistently everywhere (this is TBD from design), this
+    // can be pulled into the Card component
+    borderColor: Colors.borderPrimary,
+    borderWidth: 1,
+  },
+})

package/src/components/Modal.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native'
+import ReactNativeModal from 'react-native-modal'
+import { SafeAreaView, useSafeAreaFrame } from 'react-native-safe-area-context'
+import Card from 'src/components/Card'
+import colors from 'src/styles/colors'
+
+interface Props {
+  children: React.ReactNode
+  isVisible: boolean
+  style?: StyleProp<ViewStyle>
+  modalStyle?: StyleProp<ViewStyle>
+  testID?: string
+  onBackgroundPress?: () => void
+  onModalHide?: () => void
+}
+
+export default function Modal({
+  children,
+  isVisible,
+  style,
+  modalStyle,
+  testID,
+  onBackgroundPress,
+  onModalHide,
+}: Props) {
+  const { height } = useSafeAreaFrame()
+
+  return (
+    <ReactNativeModal
+      testID={testID}
+      style={modalStyle}
+      isVisible={isVisible}
+      backdropOpacity={0.1}
+      onBackdropPress={onBackgroundPress}
+      // The default uses `Dimensions.get('window').height` but sometimes reports an incorrect height on Android
+      // `useSafeAreaFrame()` seems to work better
+      deviceHeight={height}
+      statusBarTranslucent={true}
+      onModalHide={onModalHide}
+    >
+      <SafeAreaView>
+        <Card style={[styles.root, style]} rounded={true}>
+          {children}
+        </Card>
+      </SafeAreaView>
+    </ReactNativeModal>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: colors.backgroundPrimary,
+    padding: 24,
+    maxHeight: '100%',
+  },
+})