Merge

.github/scripts/checkPodfileAndUpdateRenovatePr.ts

@@ -0,0 +1,50 @@
+import * as $ from 'shelljs'
+
+const RENOVATE_USER = 'renovate[bot]'
+
+const exitCode = $.exec('git diff --exit-code').code
+if (exitCode === 0) {
+  console.log('No diff found')
+  process.exit(0)
+}
+
+console.log('Diff found')
+
+$.config.fatal = true
+
+const lastCommitAuthor = $.exec('git log -1 --pretty=format:%an', { silent: true }).stdout.trim()
+const branchName = process.env.GITHUB_HEAD_REF
+
+// Check if this is invoked from a PR, branch name starts with renovate and the
+// last commit was from renovate (to avoid infinite loop, in case a diff is
+// generated every time).
+if (
+  process.env.GITHUB_EVENT_NAME === 'pull_request' &&
+  branchName?.startsWith('renovate/') &&
+  lastCommitAuthor === RENOVATE_USER
+) {
+  console.log('Renovate PR, pushing Podfile changes')
+  // Since github checkouts the PR as a single "merge commit", this doesn't have
+  // the complete PR branch. Stash the changes and reset the branch to the HEAD
+  // of the PR and apply changes on top.
+  $.exec('git stash')
+  $.exec('git remote set-url origin [email protected]:valora-inc/wallet.git')
+  $.exec(`git checkout -b ${branchName}`)
+  $.exec('git fetch')
+  $.exec(`git reset --hard origin/${branchName}`)
+  $.exec('git stash pop')
+  // this assumes the diff is from Podfile.lock only
+  $.exec('git add ios/Podfile.lock')
+  $.exec('git config user.email "[email protected]"')
+  $.exec('git config user.name "valora-bot"')
+  $.exec('git commit -m "update podfile.lock"')
+
+  // ensure that we are using ssh
+  $.exec(`git push --set-upstream origin ${branchName}`)
+} else {
+  console.log('Not a renovate PR')
+}
+
+// Exit with non-zero exit code regardless, since a new commit on the renovate
+// PR will trigger a new job anyway.
+process.exit(exitCode)

.github/workflows/e2e-ios.yml

@@ -49,8 +49,8 @@ jobs:
       - name: Install CocoaPods dependencies
         working-directory: ios
         run: bundle exec pod install || bundle exec pod install --repo-update
-      - name: Fail if someone forgot to commit "Podfile.lock"
-        run: git diff --exit-code
+      - name: Fail if someone forgot to commit "Podfile.lock" and push changes if PR is from renovate
+        run: yarn ts-node ./.github/scripts/checkPodfileAndUpdateRenovatePr.ts
       - name: Check E2E wallet balance
         run: NODE_OPTIONS='--unhandled-rejections=strict' yarn ts-node ./e2e/scripts/check-e2e-wallet-balance.ts
       - name: Create iOS E2E .env File

ios/Podfile.lock

@@ -530,7 +530,7 @@ PODS:
     - React-Core
   - react-native-in-app-review (4.3.3):
     - React-Core
-  - react-native-launch-arguments (4.0.1):
+  - react-native-launch-arguments (4.0.2):
     - React
   - react-native-mail (6.1.1):
     - React-Core
@@ -1202,7 +1202,7 @@ SPEC CHECKSUMS:
   react-native-flipper: b9e2e817604af8da0d5a9ba20a8516e780e30f3c
   react-native-get-random-values: dee677497c6a740b71e5612e8dbd83e7539ed5bb
   react-native-in-app-review: db8bb167a5f238e7ceca5c242d6b36ce8c4404a4
-  react-native-launch-arguments: 4e0fd58e56dcc7f52eedef9dc8eff81eb73ced7a
+  react-native-launch-arguments: 5f41e0abf88a15e3c5309b8875d6fd5ac43df49d
   react-native-mail: 8fdcd3aef007c33a6877a18eb4cf7447a1d4ce4a
   react-native-netinfo: fefd4e98d75cbdd6e85fc530f7111a8afdf2b0c5
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846

locales/base/translation.json

@@ -1837,5 +1837,18 @@
   "notificationCenterSpotlight": {
     "message": "Introducing a new way to claim rewards, view alerts, and see updates in one place",
     "cta": "Got it"
+  },
+  "tokenDetails": {
+    "yourBalance": "Your balance",
+    "learnMore": "Learn more about {{tokenName}}",
+    "priceUnavailable": "Price Unavailable",
+    "priceDeltaSuffix": "Today",
+    "actions": {
+      "send": "Send",
+      "swap": "Swap",
+      "add": "Add",
+      "withdraw": "Withdraw",
+      "more": "More"
+    }
   }
 }

package.json

@@ -160,7 +160,7 @@
     "react-native-image-crop-picker": "^0.35.1",
     "react-native-in-app-review": "^4.3.3",
     "react-native-keychain": "8.0.0",
-    "react-native-launch-arguments": "^4.0.1",
+    "react-native-launch-arguments": "^4.0.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-localize": "^2.2.6",
     "react-native-mail": "^6.1.1",

src/analytics/Events.tsx

@@ -615,6 +615,8 @@ export enum AssetsEvents {
   view_dapp_positions = 'view_dapp_positions',
   tap_asset = 'tap_asset',
   tap_claim_rewards = 'tap_claim_rewards',
+  tap_token_details_action = 'tap_token_details_action',
+  tap_token_details_learn_more = 'tap_token_details_learn_more',
 }
 
 export enum NftEvents {

src/analytics/Properties.tsx

@@ -68,6 +68,7 @@ import { NotificationReceiveState } from 'src/notifications/types'
 import { AdventureCardName } from 'src/onboarding/types'
 import { RecipientType } from 'src/recipients/recipient'
 import { Field } from 'src/swap/types'
+import { TokenDetailsActionName } from 'src/tokens/types'
 import { NetworkId } from 'src/transactions/types'
 import { AnalyticsCurrency, CiCoCurrency, Currency } from 'src/utils/currencies'
 import { Awaited } from 'src/utils/typescript'
@@ -1320,6 +1321,14 @@ interface TokenBottomSheetEventsProperties {
   }
 }
 
+export interface TokenProperties {
+  symbol: string
+  address: string | null
+  balanceUsd: number
+  networkId: NetworkId
+  tokenId: string
+}
+
 interface AssetsEventsProperties {
   [AssetsEvents.show_asset_balance_info]: undefined
   [AssetsEvents.view_wallet_assets]: undefined
@@ -1342,16 +1351,16 @@ interface AssetsEventsProperties {
         description: string
         balanceUsd: number
       }
-    | {
+    | ({
         assetType: 'token'
-        address?: string
-        networkId: NetworkId
-        tokenId: string
         title: string // Example: 'cUSD'
         description: string
-        balanceUsd: number
-      }
+      } & TokenProperties)
   [AssetsEvents.tap_claim_rewards]: undefined
+  [AssetsEvents.tap_token_details_action]: {
+    action: TokenDetailsActionName
+  } & TokenProperties
+  [AssetsEvents.tap_token_details_learn_more]: TokenProperties
 }
 
 interface NftsEventsProperties {

src/analytics/docs.ts

@@ -528,6 +528,8 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [AssetsEvents.view_dapp_positions]: `When a user taps on the "Dapp Positions" segmented control or tab`,
   [AssetsEvents.tap_asset]: `When a user taps on an asset`,
   [AssetsEvents.tap_claim_rewards]: `When a user taps on the "Claim Rewards" button`,
+  [AssetsEvents.tap_token_details_action]: `When a user taps one of the actions on the token details screen`,
+  [AssetsEvents.tap_token_details_learn_more]: `When a user taps the learn more link on the token details screen`,
   [NftEvents.nft_error_screen_open]: `When the high level error screen is mounted`,
   [NftEvents.nft_media_load]: `When attempting to load NFT media`,
   [NftEvents.nft_gallery_screen_open]: `When the gallery screen is mounted`,

src/components/Button.tsx

@@ -3,7 +3,7 @@ import React, { ReactNode, useCallback } from 'react'
 import { ActivityIndicator, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import Touchable from 'src/components/Touchable'
 import colors, { Colors } from 'src/styles/colors'
-import fontStyles from 'src/styles/fonts'
+import fontStyles, { typeScale } from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
 
 const BUTTON_TAP_DEBOUNCE_TIME = 300 // milliseconds
@@ -42,6 +42,7 @@ export interface ButtonProps {
   testID?: string
   touchableStyle?: StyleProp<ViewStyle>
   iconMargin?: number
+  fontStyle?: typeof typeScale
 }
 
 export default React.memo(function Button(props: ButtonProps) {
@@ -60,6 +61,7 @@ export default React.memo(function Button(props: ButtonProps) {
     loadingColor,
     touchableStyle,
     iconMargin = 4,
+    fontStyle = fontStyles.regular600,
   } = props
 
   // Debounce onPress event so that it is called once on trigger and
@@ -103,7 +105,7 @@ export default React.memo(function Button(props: ButtonProps) {
                 maxFontSizeMultiplier={1}
                 accessibilityLabel={accessibilityLabel}
                 style={{
-                  ...fontStyles.regular600,
+                  ...fontStyle,
                   color: textColor,
                   marginLeft: icon && iconPositionLeft ? iconMargin : 0,
                   marginRight: icon && !iconPositionLeft ? iconMargin : 0,

src/components/LegacyTokenDisplay.test.tsx

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
-import LegacyTokenDisplay, { formatValueToDisplay } from 'src/components/LegacyTokenDisplay'
+import LegacyTokenDisplay from 'src/components/LegacyTokenDisplay'
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { RootState } from 'src/redux/reducers'
 import { Currency } from 'src/utils/currencies'
@@ -17,6 +17,7 @@ import {
   mockCeloTokenId,
   mockCeloAddress,
 } from 'test/values'
+import { formatValueToDisplay } from 'src/components/TokenDisplay'
 jest.mock('src/statsig', () => ({
   getFeatureGate: jest.fn(() => false),
 }))

src/components/LegacyTokenDisplay.tsx

@@ -1,14 +1,10 @@
 import BigNumber from 'bignumber.js'
 import * as React from 'react'
-import { StyleProp, Text, TextStyle } from 'react-native'
-import { LocalCurrencyCode, LocalCurrencySymbol } from 'src/localCurrency/consts'
-import { getLocalCurrencySymbol, usdToLocalCurrencyRateSelector } from 'src/localCurrency/selectors'
-import useSelector from 'src/redux/useSelector'
+import { StyleProp, TextStyle } from 'react-native'
 import { useTokenInfoByAddress, useTokenInfoWithAddressBySymbol } from 'src/tokens/hooks'
 import { LocalAmount } from 'src/transactions/types'
 import { Currency } from 'src/utils/currencies'
-
-const DEFAULT_DISPLAY_DECIMALS = 2
+import TokenDisplay from 'src/components/TokenDisplay'
 
 interface Props {
   amount: BigNumber.Value
@@ -23,26 +19,6 @@ interface Props {
   testID?: string
 }
 
-function calculateDecimalsToShow(value: BigNumber) {
-  const exponent = value?.e ?? 0
-  if (exponent >= 0) {
-    return DEFAULT_DISPLAY_DECIMALS
-  }
-
-  return Math.abs(exponent) + 1
-}
-
-// Formats |value| so that it shows at least 2 significant figures and at least 2 decimal places without trailing zeros.
-// TODO: Move this into TokenDisplay.tsx once LegacyTokenDisplay is removed
-export function formatValueToDisplay(value: BigNumber) {
-  let decimals = calculateDecimalsToShow(value)
-  let text = value.toFormat(decimals)
-  while (text[text.length - 1] === '0' && decimals-- > 2) {
-    text = text.substring(0, text.length - 1)
-  }
-  return text
-}
-
 /**
  * @deprecated use TokenDisplay instead
  */
@@ -69,38 +45,18 @@ function LegacyTokenDisplay({
     currency! === Currency.Celo ? 'CELO' : currency!
   )
   const tokenInfo = tokenInfoFromAddress || tokenInfoFromCurrency
-  const localCurrencyExchangeRate = useSelector(usdToLocalCurrencyRateSelector)
-  const localCurrencySymbol = useSelector(getLocalCurrencySymbol)
-
-  const showError = showLocalAmount
-    ? !localAmount && (!tokenInfo?.priceUsd || !localCurrencyExchangeRate)
-    : !tokenInfo?.symbol
-
-  const amountInUsd = tokenInfo?.priceUsd?.multipliedBy(amount)
-  const amountInLocalCurrency = localAmount
-    ? new BigNumber(localAmount.value)
-    : new BigNumber(localCurrencyExchangeRate ?? 0).multipliedBy(amountInUsd ?? 0)
-  const fiatSymbol = localAmount
-    ? LocalCurrencySymbol[localAmount.currencyCode as LocalCurrencyCode]
-    : localCurrencySymbol
-
-  const amountToShow = showLocalAmount ? amountInLocalCurrency : new BigNumber(amount)
-
-  const sign = hideSign ? '' : amountToShow.isNegative() ? '-' : showExplicitPositiveSign ? '+' : ''
-
   return (
-    <Text style={style} testID={testID}>
-      {showError ? (
-        '-'
-      ) : (
-        <>
-          {sign}
-          {showLocalAmount && fiatSymbol}
-          {formatValueToDisplay(amountToShow.absoluteValue())}
-          {!showLocalAmount && showSymbol && ` ${tokenInfo?.symbol ?? ''}`}
-        </>
-      )}
-    </Text>
+    <TokenDisplay
+      amount={amount}
+      tokenId={tokenInfo?.tokenId}
+      showLocalAmount={showLocalAmount}
+      showSymbol={showSymbol}
+      showExplicitPositiveSign={showExplicitPositiveSign}
+      hideSign={hideSign}
+      localAmount={localAmount}
+      style={style}
+      testID={testID}
+    />
   )
 }
 

src/components/TokenBalance.tsx

@@ -17,7 +17,6 @@ import { hideAlert, showToast } from 'src/alert/actions'
 import { AssetsEvents, FiatExchangeEvents, HomeEvents } from 'src/analytics/Events'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import Dialog from 'src/components/Dialog'
-import { formatValueToDisplay } from 'src/components/LegacyTokenDisplay'
 import { useShowOrHideAnimation } from 'src/components/useShowOrHideAnimation'
 import { refreshAllBalances } from 'src/home/actions'
 import InfoIcon from 'src/icons/InfoIcon'
@@ -42,6 +41,7 @@ import {
   useTotalTokenBalance,
 } from 'src/tokens/hooks'
 import { tokenFetchErrorSelector, tokenFetchLoadingSelector } from 'src/tokens/selectors'
+import { formatValueToDisplay } from 'src/components/TokenDisplay'
 import { getSupportedNetworkIdsForTokenBalances, showAssetDetailsScreen } from 'src/tokens/utils'
 
 function TokenBalance({

src/components/TokenDisplay.test.tsx

@@ -3,8 +3,7 @@ import BigNumber from 'bignumber.js'
 import * as React from 'react'
 import 'react-native'
 import { Provider } from 'react-redux'
-import TokenDisplay from 'src/components/TokenDisplay'
-import { formatValueToDisplay } from 'src/components/LegacyTokenDisplay'
+import TokenDisplay, { formatValueToDisplay } from 'src/components/TokenDisplay'
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { RootState } from 'src/redux/reducers'
 import { createMockStore, getElementText, RecursivePartial } from 'test/utils'

src/components/TokenDisplay.tsx

@@ -6,7 +6,27 @@ import { getLocalCurrencySymbol, usdToLocalCurrencyRateSelector } from 'src/loca
 import useSelector from 'src/redux/useSelector'
 import { useTokenInfo } from 'src/tokens/hooks'
 import { LocalAmount } from 'src/transactions/types'
-import { formatValueToDisplay } from 'src/components/LegacyTokenDisplay'
+
+const DEFAULT_DISPLAY_DECIMALS = 2
+
+function calculateDecimalsToShow(value: BigNumber) {
+  const exponent = value?.e ?? 0
+  if (exponent >= 0) {
+    return DEFAULT_DISPLAY_DECIMALS
+  }
+
+  return Math.abs(exponent) + 1
+}
+
+// Formats |value| so that it shows at least 2 significant figures and at least 2 decimal places without trailing zeros.
+export function formatValueToDisplay(value: BigNumber) {
+  let decimals = calculateDecimalsToShow(value)
+  let text = value.toFormat(decimals)
+  while (text[text.length - 1] === '0' && decimals-- > 2) {
+    text = text.substring(0, text.length - 1)
+  }
+  return text
+}
 
 interface Props {
   amount: BigNumber.Value

src/components/TokenTotalLineItem.tsx

@@ -3,13 +3,13 @@ import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { StyleSheet, Text } from 'react-native'
 import LineItemRow from 'src/components/LineItemRow'
-import { formatValueToDisplay } from 'src/components/LegacyTokenDisplay'
 import TokenDisplay from 'src/components/TokenDisplay'
 import { LocalCurrencyCode, LocalCurrencySymbol } from 'src/localCurrency/consts'
 import colors from 'src/styles/colors'
 import fontStyles from 'src/styles/fonts'
 import { useTokenInfo } from 'src/tokens/hooks'
 import { LocalAmount } from 'src/transactions/types'
+import { formatValueToDisplay } from 'src/components/TokenDisplay'
 
 interface Props {
   tokenAmount: BigNumber

src/config.ts

@@ -74,9 +74,6 @@ export const WALLET_BALANCE_UPPER_BOUND = new BigNumber('1e10')
 
 export const TIME_UNTIL_TOKEN_INFO_BECOMES_STALE = 12 * ONE_HOUR_IN_MILLIS
 
-// The amount of time
-export const TIME_OF_SUPPORTED_UNSYNC_HISTORICAL_PRICES = ONE_HOUR_IN_MILLIS
-
 export const DEFAULT_FORNO_URL =
   DEFAULT_TESTNET === 'mainnet'
     ? 'https://forno.celo.org/'