wallet-stack 1.0.0-alpha.121

package/src/fiatExchanges/SimplexScreen.test.tsx

@@ -0,0 +1,109 @@
+import { fireEvent, render, waitFor } from '@testing-library/react-native'
+import { FetchMock } from 'jest-fetch-mock/types'
+import * as React from 'react'
+import { Provider } from 'react-redux'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { FiatExchangeEvents } from 'src/analytics/Events'
+import SimplexScreen from 'src/fiatExchanges/SimplexScreen'
+import { SimplexQuote } from 'src/fiatExchanges/types'
+import { LocalCurrencyCode } from 'src/localCurrency/consts'
+import { Screens } from 'src/navigator/Screens'
+import { CiCoCurrency } from 'src/utils/currencies'
+import { createMockStore, getMockStackScreenProps } from 'test/utils'
+import { mockAccount, mockCusdTokenId, mockE164Number } from 'test/values'
+import { v4 as uuidv4 } from 'uuid'
+
+const mockUserIpAddress = '1.1.1.1.1.1.0'
+
+const MOCK_SIMPLEX_PAYMENT_REQUEST_RESPONSE = JSON.stringify({
+  is_kyc_update_required: false,
+  paymentId: '123',
+})
+
+const mockStore = createMockStore({
+  web3: {
+    account: mockAccount,
+  },
+  account: {
+    e164PhoneNumber: mockE164Number,
+    defaultCountryCode: '+1',
+  },
+  localCurrency: {
+    preferredCurrencyCode: LocalCurrencyCode.USD,
+  },
+  networkInfo: {
+    userLocationData: {
+      ipAddress: mockUserIpAddress,
+    },
+  },
+})
+
+const MOCK_SIMPLEX_QUOTE = {
+  user_id: mockAccount,
+  quote_id: uuidv4(),
+  wallet_id: 'appname',
+  digital_money: {
+    currency: 'CUSD',
+    amount: 25,
+  },
+  fiat_money: {
+    currency: 'USD',
+    base_amount: 19,
+    total_amount: 26,
+  },
+  valid_until: new Date().toISOString(),
+  supported_digital_currencies: ['CUSD', 'CELO'],
+  tokenId: mockCusdTokenId,
+}
+
+const mockScreenProps = () =>
+  getMockStackScreenProps(Screens.Simplex, {
+    simplexQuote: MOCK_SIMPLEX_QUOTE as SimplexQuote,
+    tokenId: mockCusdTokenId,
+  })
+
+describe('SimplexScreen', () => {
+  const mockFetch = fetch as FetchMock
+  beforeEach(() => {
+    jest.useRealTimers()
+    jest.clearAllMocks()
+    mockFetch.resetMocks()
+  })
+
+  it('renders correctly', async () => {
+    const tree = render(
+      <Provider store={mockStore}>
+        <SimplexScreen {...mockScreenProps()} />
+      </Provider>
+    )
+
+    expect(tree).toMatchSnapshot()
+    mockFetch.mockResponseOnce(MOCK_SIMPLEX_PAYMENT_REQUEST_RESPONSE)
+    await waitFor(() => tree.getByText(/continueToProvider/))
+    tree.rerender(
+      <Provider store={mockStore}>
+        <SimplexScreen {...mockScreenProps()} />
+      </Provider>
+    )
+    expect(tree).toMatchSnapshot()
+  })
+  it('fires an analytics event', async () => {
+    mockFetch.mockResponseOnce(MOCK_SIMPLEX_PAYMENT_REQUEST_RESPONSE)
+
+    const tree = render(
+      <Provider store={mockStore}>
+        <SimplexScreen {...mockScreenProps()} />
+      </Provider>
+    )
+
+    await waitFor(() => tree.getByText(/continueToProvider/))
+
+    fireEvent.press(tree.getByText(/continueToProvider/))
+    expect(AppAnalytics.track).toHaveBeenCalledWith(FiatExchangeEvents.cico_simplex_open_webview, {
+      amount: 25,
+      cryptoCurrency: CiCoCurrency.cUSD,
+      feeInFiat: 7,
+      fiatCurrency: 'USD',
+    })
+  })
+})

package/src/fiatExchanges/SimplexScreen.tsx

@@ -0,0 +1,185 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React, { useLayoutEffect, useState } from 'react'
+import { useAsync } from 'react-async-hook'
+import { useTranslation } from 'react-i18next'
+import { ActivityIndicator, StyleSheet, View } from 'react-native'
+import { e164NumberSelector } from 'src/account/selectors'
+import { showError } from 'src/alert/actions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { FiatExchangeEvents } from 'src/analytics/Events'
+import { ErrorMessages } from 'src/app/ErrorMessages'
+import { phoneNumberVerifiedSelector } from 'src/app/selectors'
+import BackButton from 'src/components/BackButton'
+import Button, { BtnSizes } from 'src/components/Button'
+import WebView from 'src/components/WebView'
+import { DEEP_LINK_URL_SCHEME, SIMPLEX_FEES_URL } from 'src/config'
+import ReviewFees from 'src/fiatExchanges/ReviewFees'
+import { fetchSimplexPaymentData } from 'src/fiatExchanges/utils'
+import i18n from 'src/i18n'
+import { getLocalCurrencyCode } from 'src/localCurrency/selectors'
+import { HeaderTitleWithBalance, emptyHeader } from 'src/navigator/Headers'
+import { Screens } from 'src/navigator/Screens'
+import { StackParamList } from 'src/navigator/types'
+import { userLocationDataSelector } from 'src/networkInfo/selectors'
+import { useDispatch, useSelector } from 'src/redux/hooks'
+import colors from 'src/styles/colors'
+import { useTokenInfo } from 'src/tokens/hooks'
+import { resolveCurrency } from 'src/utils/currencies'
+import { navigateToURI } from 'src/utils/linking'
+import { currentAccountSelector } from 'src/web3/selectors'
+
+type RouteProps = NativeStackScreenProps<StackParamList, Screens.Simplex>
+type Props = RouteProps
+
+function SimplexScreen({ route, navigation }: Props) {
+  const [loadSimplexCheckout, setLoadSimplexCheckout] = useState(false)
+  const [redirected, setRedirected] = useState(false)
+  const { t } = useTranslation()
+
+  const { simplexQuote, tokenId } = route.params
+
+  const account = useSelector(currentAccountSelector)
+  const e164PhoneNumber = useSelector(e164NumberSelector)
+  const phoneNumberConfirmed = useSelector(phoneNumberVerifiedSelector)
+  const localCurrency = useSelector(getLocalCurrencyCode)
+  const { ipAddress: userIpAddress } = useSelector(userLocationDataSelector)
+
+  const dispatch = useDispatch()
+
+  const tokenInfo = useTokenInfo(tokenId)
+  if (!tokenInfo) {
+    throw new Error(`Token info not found for token ID ${tokenId}`)
+  }
+  const symbol = tokenInfo.symbol
+
+  const feeIsWaived =
+    simplexQuote.fiat_money.total_amount - simplexQuote.fiat_money.base_amount <= 0
+
+  const onNavigationStateChange = ({ url }: any) => {
+    if (url?.includes('/payments/new')) {
+      setRedirected(true)
+    } else if (url?.startsWith(`${DEEP_LINK_URL_SCHEME}://wallet`)) {
+      navigateToURI(url)
+    }
+  }
+
+  const onButtonPress = () => {
+    AppAnalytics.track(FiatExchangeEvents.cico_simplex_open_webview, {
+      amount: simplexQuote.digital_money.amount,
+      cryptoCurrency: symbol,
+      feeInFiat: simplexQuote.fiat_money.total_amount - simplexQuote.fiat_money.base_amount,
+      fiatCurrency: simplexQuote.fiat_money.currency,
+    })
+    setLoadSimplexCheckout(true)
+    navigation.setOptions({
+      ...emptyHeader,
+      headerLeft: () => <BackButton />,
+      headerTitle: 'Simplex',
+    })
+  }
+
+  useLayoutEffect(() => {
+    const token = resolveCurrency(simplexQuote.digital_money.currency)
+    navigation.setOptions({
+      ...emptyHeader,
+      headerLeft: () => <BackButton />,
+      headerTitle: () => <HeaderTitleWithBalance title={t('addFunds')} token={token} />,
+    })
+  }, [])
+
+  const asyncSimplexPaymentData = useAsync(async () => {
+    if (!account || !userIpAddress) {
+      return
+    }
+    try {
+      const simplexPaymentData = fetchSimplexPaymentData(
+        account,
+        e164PhoneNumber,
+        phoneNumberConfirmed,
+        simplexQuote,
+        userIpAddress
+      )
+      return simplexPaymentData
+    } catch (error) {
+      dispatch(showError(ErrorMessages.SIMPLEX_PURCHASE_FETCH_FAILED))
+    }
+  }, [])
+
+  const simplexPaymentRequest = asyncSimplexPaymentData?.result
+  return (
+    <View style={styles.container}>
+      {loadSimplexCheckout && simplexPaymentRequest && !redirected && (
+        <View style={[styles.container, styles.indicator]}>
+          <ActivityIndicator size="large" color={colors.loadingIndicator} />
+        </View>
+      )}
+      {!loadSimplexCheckout || !simplexPaymentRequest ? (
+        <View style={styles.review}>
+          <ReviewFees
+            provider="Simplex"
+            tokenIdToBuy={tokenId}
+            localCurrency={localCurrency}
+            fiat={{
+              subTotal: simplexQuote.fiat_money.base_amount,
+              total: simplexQuote.fiat_money.total_amount,
+            }}
+            crypto={{
+              amount: simplexQuote.digital_money.amount,
+            }}
+            feeWaived={feeIsWaived}
+            feeUrl={SIMPLEX_FEES_URL}
+          />
+          <Button
+            style={styles.button}
+            size={BtnSizes.FULL}
+            text={t('continueToProvider', { provider: 'Simplex' })}
+            onPress={onButtonPress}
+            disabled={!simplexPaymentRequest?.paymentId}
+            showLoading={asyncSimplexPaymentData.status === 'loading'}
+          />
+        </View>
+      ) : (
+        <WebView
+          originWhitelist={['*']}
+          source={{ html: simplexPaymentRequest.checkoutHtml }}
+          onNavigationStateChange={onNavigationStateChange}
+          style={{ opacity: redirected ? 100 : 0 }}
+        />
+      )}
+    </View>
+  )
+}
+
+SimplexScreen.navigationOptions = () => ({
+  ...emptyHeader,
+  headerLeft: () => <BackButton />,
+  headerTitle: () => <HeaderTitleWithBalance title={i18n.t('addFunds')} />,
+})
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    flex: 1,
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  review: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  indicator: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+  },
+  button: {
+    margin: 16,
+  },
+})
+
+export default SimplexScreen

package/src/fiatExchanges/Spend.tsx

@@ -0,0 +1,104 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { FiatExchangeEvents } from 'src/analytics/Events'
+import BackButton from 'src/components/BackButton'
+import ListItem from 'src/components/ListItem'
+import { SPEND_MERCHANT_LINKS } from 'src/config'
+import i18n from 'src/i18n'
+import LinkArrow from 'src/icons/LinkArrow'
+import { emptyHeader } from 'src/navigator/Headers'
+import { Screens } from 'src/navigator/Screens'
+import { StackParamList } from 'src/navigator/types'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import variables from 'src/styles/variables'
+import { navigateToURI } from 'src/utils/linking'
+
+export const spendScreenOptions = () => {
+  const eventName = FiatExchangeEvents.cico_spend_select_provider_back
+
+  return {
+    ...emptyHeader,
+    headerLeft: () => <BackButton eventName={eventName} />,
+    headerTitle: i18n.t('spend'),
+  }
+}
+
+export interface SpendMerchant {
+  name: string
+  link: string
+  subtitleKey?: string
+}
+
+type Props = NativeStackScreenProps<StackParamList, Screens.Spend>
+
+function Spend(props: Props) {
+  const goToMerchant = (merchant: SpendMerchant) => {
+    const { name, link } = merchant
+    return () => {
+      AppAnalytics.track(FiatExchangeEvents.spend_merchant_link, {
+        name,
+        link,
+      })
+      navigateToURI(link)
+    }
+  }
+
+  const { t } = useTranslation()
+
+  // TODO Dynamically fetch merchant links so they can be updated between releases
+  const merchants: SpendMerchant[] = SPEND_MERCHANT_LINKS
+
+  return (
+    <ScrollView style={styles.container}>
+      <SafeAreaView>
+        <Text style={styles.pleaseSelectProvider}>{t('useBalanceWithMerchants')}</Text>
+        <View>
+          {merchants
+            .filter((merchant) => !!merchant.link)
+            .map((merchant) => {
+              return (
+                <ListItem key={merchant.name} onPress={goToMerchant(merchant)}>
+                  <View style={styles.providerListItem}>
+                    <Text style={styles.optionTitle}>{merchant.name}</Text>
+                    <LinkArrow />
+                  </View>
+                  {!!merchant.subtitleKey && (
+                    <Text style={styles.optionSubtitle}>{t(merchant.subtitleKey)}</Text>
+                  )}
+                </ListItem>
+              )
+            })}
+        </View>
+      </SafeAreaView>
+    </ScrollView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: variables.contentPadding,
+  },
+  pleaseSelectProvider: {
+    ...typeScale.bodyMedium,
+    paddingHorizontal: variables.contentPadding,
+    paddingBottom: variables.contentPadding,
+  },
+  providerListItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  optionTitle: {
+    ...typeScale.bodyMedium,
+  },
+  optionSubtitle: {
+    ...typeScale.bodySmall,
+    color: colors.contentSecondary,
+  },
+})
+
+export default Spend

package/src/fiatExchanges/WithdrawSpend.test.tsx

@@ -0,0 +1,37 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import * as React from 'react'
+import 'react-native'
+import { Provider } from 'react-redux'
+import WithdrawSpend from 'src/fiatExchanges/WithdrawSpend'
+import { navigate } from 'src/navigator/NavigationService'
+import { createMockStore } from 'test/utils'
+
+describe('WithdrawSpend', () => {
+  it('renders correctly', () => {
+    const store = createMockStore({})
+    const tree = render(
+      <Provider store={store}>
+        <WithdrawSpend />
+      </Provider>
+    )
+    expect(tree.queryByTestId('FiatExchange/DrawerBar')).toBeFalsy()
+    expect(tree.queryByTestId('FiatExchangeTokenBalance')).toBeTruthy()
+    expect(tree.queryByTestId('addFunds')).toBeFalsy()
+    expect(tree.queryByTestId('spend')).toBeTruthy()
+    expect(tree.queryByTestId('cashOut')).toBeTruthy()
+  })
+
+  it.each([
+    { flow: 'CashOut', testID: 'cashOut' },
+    { flow: 'Spend', testID: 'spend' },
+  ])('$flow navigates correctly', ({ flow, testID }) => {
+    const store = createMockStore({})
+    const tree = render(
+      <Provider store={store}>
+        <WithdrawSpend />
+      </Provider>
+    )
+    fireEvent.press(tree.getByTestId(testID))
+    expect(navigate).toHaveBeenCalledWith('FiatExchangeCurrencyBottomSheet', { flow })
+  })
+})

package/src/fiatExchanges/WithdrawSpend.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import AppAnalytics from 'src/analytics/AppAnalytics'
+import { FiatExchangeEvents } from 'src/analytics/Events'
+import { AppState } from 'src/app/actions'
+import ListItem from 'src/components/ListItem'
+import { FiatExchangeTokenBalance } from 'src/components/TokenBalance'
+import { FiatExchangeFlow } from 'src/fiatExchanges/types'
+import { fiatExchange } from 'src/images/Images'
+import { navigate } from 'src/navigator/NavigationService'
+import { Screens } from 'src/navigator/Screens'
+import { useSelector } from 'src/redux/hooks'
+import { getDynamicConfigParams } from 'src/statsig'
+import { DynamicConfigs } from 'src/statsig/constants'
+import { StatsigDynamicConfigs } from 'src/statsig/types'
+import colors from 'src/styles/colors'
+import { typeScale } from 'src/styles/fonts'
+import variables from 'src/styles/variables'
+import Logger from 'src/utils/Logger'
+import { navigateToURI } from 'src/utils/linking'
+
+export default function WithdrawSpend() {
+  const [timestamp, setTimestamp] = useState<number | null>(null)
+  const appState = useSelector((state) => state.app.appState)
+
+  const { links } = getDynamicConfigParams(DynamicConfigs[StatsigDynamicConfigs.APP_CONFIG])
+
+  useEffect(() => {
+    if (appState === AppState.Active && timestamp) {
+      const timeElapsed: number = Date.now() - timestamp
+      Logger.debug('Time Elapsed', String(timeElapsed))
+      setTimestamp(null)
+    }
+  }, [appState])
+
+  function goToCashOut() {
+    navigate(Screens.FiatExchangeCurrencyBottomSheet, { flow: FiatExchangeFlow.CashOut })
+    AppAnalytics.track(FiatExchangeEvents.cico_landing_select_flow, {
+      flow: FiatExchangeFlow.CashOut,
+    })
+  }
+
+  function goToSpend() {
+    navigate(Screens.FiatExchangeCurrencyBottomSheet, { flow: FiatExchangeFlow.Spend })
+    AppAnalytics.track(FiatExchangeEvents.cico_landing_select_flow, {
+      flow: FiatExchangeFlow.Spend,
+    })
+  }
+
+  const { t } = useTranslation()
+
+  const onOpenOtherFundingOptions = () => {
+    navigateToURI(links.funding)
+    AppAnalytics.track(FiatExchangeEvents.cico_landing_how_to_fund)
+    setTimestamp(Date.now())
+  }
+
+  return (
+    <SafeAreaView style={styles.container} edges={['left', 'right', 'bottom']}>
+      <ScrollView testID="FiatExchange/scrollView" contentContainerStyle={styles.contentContainer}>
+        <View style={styles.headerContainer}>
+          <FiatExchangeTokenBalance key={'FiatExchangeTokenBalance'} />
+          <Image source={fiatExchange} style={styles.image} resizeMode={'contain'} />
+        </View>
+        <View style={styles.optionsListContainer}>
+          <ListItem onPress={goToSpend}>
+            <Text testID="spend" style={styles.optionTitle}>
+              {t(`fiatExchangeFlow.spend.fiatExchangeTitle`)}
+            </Text>
+            <Text style={styles.optionSubtitle}>
+              {t(`fiatExchangeFlow.spend.fiatExchangeSubtitle`)}
+            </Text>
+          </ListItem>
+          <ListItem onPress={goToCashOut}>
+            <Text testID="cashOut" style={styles.optionTitle}>
+              {t(`fiatExchangeFlow.cashOut.fiatExchangeTitle`)}
+            </Text>
+            <Text style={styles.optionSubtitle}>
+              {t(`fiatExchangeFlow.cashOut.fiatExchangeSubtitle`)}
+            </Text>
+          </ListItem>
+        </View>
+        <View testID="otherFundingOptions" style={styles.moreWaysContainer}>
+          <Text style={styles.moreWays}>
+            <Trans i18nKey="otherFundingOptions">
+              <Text onPress={onOpenOtherFundingOptions} style={styles.fundingOptionsLink} />
+            </Trans>
+          </Text>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    justifyContent: 'center',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap-reverse',
+  },
+  contentContainer: {
+    justifyContent: 'space-between',
+    flexDirection: 'column',
+    flexGrow: 1,
+  },
+  image: {
+    marginHorizontal: variables.contentPadding,
+  },
+  optionsListContainer: {
+    flex: 1,
+    justifyContent: 'flex-start',
+  },
+  optionTitle: {
+    ...typeScale.labelMedium,
+  },
+  optionSubtitle: {
+    marginTop: 2,
+    ...typeScale.bodySmall,
+    color: colors.contentSecondary,
+  },
+  moreWaysContainer: {
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+  },
+  moreWays: {
+    ...typeScale.bodyMedium,
+    color: colors.contentSecondary,
+    margin: variables.contentPadding,
+  },
+  fundingOptionsLink: {
+    textDecorationLine: 'underline',
+  },
+})