feat: more actions token bottom sheet

locales/base/translation.json

@@ -1851,6 +1851,13 @@
       "add": "Add",
       "withdraw": "Withdraw",
       "more": "More"
+    },
+    "moreActions": "More Actions",
+    "actionDescriptions": {
+      "send": "Use any Celo address, domain, phone number, etc.",
+      "swap": "Swap your tokens without leaving your wallet",
+      "add": "Buy tokens using one of our trusted providers",
+      "withdraw": "Transfer tokens to a bank account, mobile money, gift card etc."
     }
   }
 }

src/analytics/Events.tsx

@@ -603,6 +603,7 @@ export enum AssetsEvents {
   tap_claim_rewards = 'tap_claim_rewards',
   tap_token_details_action = 'tap_token_details_action',
   tap_token_details_learn_more = 'tap_token_details_learn_more',
+  tap_token_details_bottom_sheet_action = 'tap_token_details_bottom_sheet_action',
 }
 
 export enum NftEvents {

src/analytics/Properties.tsx

@@ -1324,6 +1324,9 @@ interface AssetsEventsProperties {
     action: TokenDetailsActionName
   } & TokenProperties
   [AssetsEvents.tap_token_details_learn_more]: TokenProperties
+  [AssetsEvents.tap_token_details_bottom_sheet_action]: {
+    action: TokenDetailsActionName
+  } & TokenProperties
 }
 
 interface NftsEventsProperties {

src/analytics/docs.ts

@@ -518,6 +518,7 @@ export const eventDocs: Record<AnalyticsEventType, string> = {
   [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_bottom_sheet_action]: `When a user taps one of the actions on the more actions bottom sheet`,
   [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`,

src/navigator/Screens.tsx

@@ -82,6 +82,7 @@ export enum Screens {
   SwapReviewScreen = 'SwapReviewScreen',
   TokenBalances = 'TokenBalances',
   TokenDetails = 'TokenDetails',
+  TokenDetailsMoreActions = 'TokenDetailsMoreActions',
   TransactionDetailsScreen = 'TransactionDetailsScreen',
   UpgradeScreen = 'UpgradeScreen',
   ValidateRecipientAccount = 'ValidateRecipientAccount',

src/tokens/TokenDetails.tsx

@@ -1,17 +1,20 @@
 import { NativeStackScreenProps } from '@react-navigation/native-stack'
-import React from 'react'
+import React, { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ScrollView, StyleSheet, Text, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useSelector } from 'react-redux'
 import { AssetsEvents } from 'src/analytics/Events'
 import { TokenProperties } from 'src/analytics/Properties'
 import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
+import BackButton from 'src/components/BackButton'
+import { BottomSheetRefType } from 'src/components/BottomSheet'
 import Button, { BtnSizes } from 'src/components/Button'
 import PercentageIndicator from 'src/components/PercentageIndicator'
 import TokenDisplay from 'src/components/TokenDisplay'
 import TokenIcon, { IconSize } from 'src/components/TokenIcon'
 import Touchable from 'src/components/Touchable'
+import CustomHeader from 'src/components/header/CustomHeader'
 import { TOKEN_MIN_AMOUNT } from 'src/config'
 import CeloGoldHistoryChart from 'src/exchange/CeloGoldHistoryChart'
 import { CICOFlow } from 'src/fiatExchanges/utils'
@@ -23,15 +26,17 @@
 import QuickActionsSend from 'src/icons/quick-actions/Send'
 import QuickActionsSwap from 'src/icons/quick-actions/Swap'
 import QuickActionsWithdraw from 'src/icons/quick-actions/Withdraw'
-import { headerWithBackButton } from 'src/navigator/Headers'
+import { noHeader } from 'src/navigator/Headers'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { isAppSwapsEnabledSelector } from 'src/navigator/selectors'
 import { StackParamList } from 'src/navigator/types'
 import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
+import variables from 'src/styles/variables'
 import { TokenBalanceItem } from 'src/tokens/TokenBalanceItem'
+import TokenDetailsMoreActions from 'src/tokens/TokenDetailsMoreActions'
 import {
   useCashInTokens,
   useCashOutTokens,
@@ -40,7 +45,7 @@
   useTokensForSend,
 } from 'src/tokens/hooks'
 import { TokenBalance } from 'src/tokens/slice'
-import { TokenDetailsActionName } from 'src/tokens/types'
+import { TokenDetailsAction, TokenDetailsActionName } from 'src/tokens/types'
 import { getTokenAnalyticsProps, isCicoToken, isHistoricalPriceUpdated } from 'src/tokens/utils'
 import { Network } from 'src/transactions/types'
 
@@ -52,13 +57,13 @@
   const { tokenId } = route.params
   const { t } = useTranslation()
   const token = useTokenInfo(tokenId)
-
-  if (!token) {
-    throw new Error(`token with id ${tokenId} not found`)
-  }
+  if (!token) throw new Error(`token with id ${tokenId} not found`)
+  const actions = useActions(token)
+  const tokenDetailsMoreActionsBottomSheetRef = useRef<BottomSheetRefType>(null)
 
   return (
-    <SafeAreaView style={styles.container} edges={['right', 'bottom', 'left']}>
+    <SafeAreaView style={styles.container}>
+      <CustomHeader style={{ paddingHorizontal: variables.contentPadding }} left={<BackButton />} />
       <ScrollView>
         <View style={styles.titleContainer}>
           <TokenIcon
@@ -86,7 +91,11 @@
             testID="TokenDetails/Chart"
           />
         )}
-        <Actions token={token} />
+        <Actions
+          bottomSheetRef={tokenDetailsMoreActionsBottomSheetRef}
+          token={token}
+          actions={actions}
+        />
         <Text style={styles.yourBalance}>{t('tokenDetails.yourBalance')}</Text>
         <TokenBalanceItem token={token} />
         {token.infoUrl && (
@@ -97,12 +106,17 @@
           />
         )}
       </ScrollView>
+      <TokenDetailsMoreActions
+        forwardedRef={tokenDetailsMoreActionsBottomSheetRef}
+        token={token}
+        actions={actions}
+      />
     </SafeAreaView>
   )
 }
 
 TokenDetailsScreen.navigationOptions = {
-  ...headerWithBackButton,
+  ...noHeader,
 }
 
 function PriceInfo({ token }: { token: TokenBalance }) {
@@ -136,7 +150,21 @@
   )
 }
 
-function Actions({ token }: { token: TokenBalance }) {
+export const onPressCicoAction = (token: TokenBalance, flow: CICOFlow) => {
+  const tokenSymbol = token.symbol
+  // this should always be true given that we only show Add / Withdraw if a
+  // token is CiCoCurrency, but adding it here to ensure type safety
+  if (isCicoToken(tokenSymbol)) {
+    navigate(Screens.FiatExchangeAmount, {
+      currency: tokenSymbol,
+      tokenId: token.tokenId,
+      flow,
+      network: Network.Celo, // TODO (ACT-954): use networkId from token
+    })
+  }
+}
+
+export const useActions = (token: TokenBalance) => {
   const { t } = useTranslation()
   const sendableTokens = useTokensForSend()
   const swappableTokens = useSwappableTokens()
@@ -145,24 +173,11 @@
   const isSwapEnabled = useSelector(isAppSwapsEnabledSelector)
   const showWithdraw = !!cashOutTokens.find((tokenInfo) => tokenInfo.tokenId === token.tokenId)
 
-  const onPressCicoAction = (flow: CICOFlow) => {
-    const tokenSymbol = token.symbol
-    // this should always be true given that we only show Add / Withdraw if a
-    // token is CiCoCurrency, but adding it here to ensure type safety
-    if (isCicoToken(tokenSymbol)) {
-      navigate(Screens.FiatExchangeAmount, {
-        currency: tokenSymbol,
-        tokenId: token.tokenId,
-        flow,
-        network: Network.Celo,
-      })
-    }
-  }
-
-  const actions = [
+  return [
     {
       name: TokenDetailsActionName.Send,
-      text: t('tokenDetails.actions.send'),
+      title: t('tokenDetails.actions.send'),
+      details: t('tokenDetails.actionDescriptions.send'),
       iconComponent: QuickActionsSend,
       onPress: () => {
         navigate(Screens.Send, { defaultTokenIdOverride: token.tokenId })
@@ -171,7 +186,8 @@
     },
     {
       name: TokenDetailsActionName.Swap,
-      text: t('tokenDetails.actions.swap'),
+      title: t('tokenDetails.actions.swap'),
+      details: t('tokenDetails.actionDescriptions.swap'),
       iconComponent: QuickActionsSwap,
       onPress: () => {
         navigate(Screens.SwapScreenWithBack, { fromTokenId: token.tokenId })
@@ -183,30 +199,46 @@
     },
     {
       name: TokenDetailsActionName.Add,
-      text: t('tokenDetails.actions.add'),
+      title: t('tokenDetails.actions.add'),
+      details: t('tokenDetails.actionDescriptions.add'),
       iconComponent: QuickActionsAdd,
       onPress: () => {
-        onPressCicoAction(CICOFlow.CashIn)
+        onPressCicoAction(token, CICOFlow.CashIn)
       },
       visible: !!cashInTokens.find((tokenInfo) => tokenInfo.tokenId === token.tokenId),
     },
     {
       name: TokenDetailsActionName.Withdraw,
-      text: t('tokenDetails.actions.withdraw'),
+      title: t('tokenDetails.actions.withdraw'),
+      details: t('tokenDetails.actionDescriptions.withdraw'),
       iconComponent: QuickActionsWithdraw,
       onPress: () => {
-        onPressCicoAction(CICOFlow.CashOut)
+        onPressCicoAction(token, CICOFlow.CashOut)
       },
       visible: showWithdraw,
     },
   ].filter((action) => action.visible)
+}
+
+function Actions({
+  token,
+  bottomSheetRef,
+  actions,
+}: {
+  token: TokenBalance
+  bottomSheetRef: React.RefObject<BottomSheetRefType>
+  actions: TokenDetailsAction[]
+}) {
+  const { t } = useTranslation()
+  const cashOutTokens = useCashOutTokens()
+  const showWithdraw = !!cashOutTokens.find((tokenInfo) => tokenInfo.tokenId === token.tokenId)
 
   const moreAction = {
     name: TokenDetailsActionName.More,
-    text: t('tokenDetails.actions.more'),
+    title: t('tokenDetails.actions.more'),
     iconComponent: QuickActionsMore,
     onPress: () => {
-      // TODO(ACT-917): open bottom sheet
+      bottomSheetRef.current?.snapToIndex(0)
     },
   }
 
@@ -230,7 +262,7 @@
       {actionButtons.map((action) => (
         <Button
           key={action.name}
-          text={action.text}
+          text={action.title}
           onPress={() => {
             ValoraAnalytics.track(AssetsEvents.tap_token_details_action, {
               action: action.name,