Merge pull request #5450 from EdgeApp/jon/wallet-details-header

Jon/wallet-details-header

Author: Jon-edge

CHANGELOG.md

@@ -7,6 +7,7 @@
 ## 4.23.0 (staging)
 
 - added: Add Abstract ETH Layer 2 support
+- changed: `WalletDetailsScene` title shows the name of the network for most use cases
 - changed: Force max unstake on Kiln ETH positions
 - changed: Disconnect `CryptoIcon` from redux
 - changed: Use number math when handling exchange rates

src/actions/FirstOpenActions.tsx

@@ -16,13 +16,26 @@ const asFirstOpenInfo = asObject({
 type FirstOpenInfo = ReturnType<typeof asFirstOpenInfo>
 
 let firstOpenInfo: FirstOpenInfo
+let firstLoadPromise: Promise<FirstOpenInfo> | undefined
 
 /**
  * Returns whether this session was the first time the user opened the app.
- * Repeated calls will return the same result. Also sets the deviceId &
- * firstOpenEpoch
+ * Repeated calls will return the same result. Initial disk read also sets the
+ * deviceId & firstOpenEpoch if not already present.
  */
 export const getFirstOpenInfo = async (): Promise<FirstOpenInfo> => {
+  if (firstOpenInfo == null) {
+    if (firstLoadPromise == null) firstLoadPromise = readFirstOpenInfoFromDisk()
+    return await firstLoadPromise
+  }
+  return firstOpenInfo
+}
+
+/**
+ * Reads firstOpenInfo from disk and sets the deviceId & firstOpenEpoch if not
+ * already present.
+ */
+const readFirstOpenInfoFromDisk = async (): Promise<FirstOpenInfo> => {
   if (firstOpenInfo == null) {
     let firstOpenText
     try {
@@ -34,7 +47,7 @@ export const getFirstOpenInfo = async (): Promise<FirstOpenInfo> => {
         // Not critical if we can't get the country code
         firstOpenInfo.countryCode = await getCountryCodeByIp().catch(() => undefined)
       }
-    } catch (error: any) {
+    } catch (error: unknown) {
       // Generate new values.
       firstOpenInfo = {
         countryCode: await getCountryCodeByIp(),

src/actions/WalletListMenuActions.tsx

@@ -287,15 +287,9 @@ export function walletListMenuAction(
 
     case 'goToParent': {
       return async (dispatch, getState) => {
-        const state = getState()
-        const { account } = state.core
-        const { currencyWallets } = account
-        const wallet = currencyWallets[walletId]
-
         navigation.navigate('walletDetails', {
           walletId,
-          tokenId: null,
-          walletName: getWalletName(wallet)
+          tokenId: null
         })
       }
     }

src/components/Main.tsx

@@ -126,10 +126,10 @@ import { SweepPrivateKeyCompletionScene as SweepPrivateKeyCompletionSceneCompone
 import { SweepPrivateKeyProcessingScene as SweepPrivateKeyProcessingSceneComponent } from './scenes/SweepPrivateKeyProcessingScene'
 import { SweepPrivateKeySelectCryptoScene as SweepPrivateKeySelectCryptoSceneComponent } from './scenes/SweepPrivateKeySelectCryptoScene'
 import { TransactionDetailsScene as TransactionDetailsSceneComponent } from './scenes/TransactionDetailsScene'
-import { TransactionList as TransactionListComponent } from './scenes/TransactionListScene'
+import { TransactionList as TransactionListComponent, TransactionListTitle } from './scenes/TransactionListScene'
 import { TransactionsExportScene as TransactionsExportSceneComponent } from './scenes/TransactionsExportScene'
 import { UpgradeUsernameScene as UpgradeUsernameSceneComponent } from './scenes/UpgradeUsernameScreen'
-import { WalletDetails as WalletDetailsComponent } from './scenes/WalletDetailsScene'
+import { WalletDetails as WalletDetailsComponent, WalletDetailsTitle } from './scenes/WalletDetailsScene'
 import { WalletListScene as WalletListSceneComponent } from './scenes/WalletListScene'
 import { WalletRestoreScene as WalletRestoreSceneComponent } from './scenes/WalletRestoreScene'
 import { WcConnectionsScene as WcConnectionsSceneComponent } from './scenes/WcConnectionsScene'
@@ -277,14 +277,14 @@ const EdgeWalletsTabScreen = () => {
         name="transactionList"
         component={TransactionList}
         options={{
-          headerTitle: () => <ParamHeaderTitle<'transactionList'> fromParams={params => params.walletName} />
+          headerTitle: () => <TransactionListTitle />
         }}
       />
       <WalletsStack.Screen
         name="walletDetails"
         component={WalletDetails}
         options={{
-          headerTitle: () => <ParamHeaderTitle<'walletDetails'> fromParams={params => params.walletName} />
+          headerTitle: () => <WalletDetailsTitle />
         }}
       />
     </WalletsStack.Navigator>
@@ -803,7 +803,7 @@ const EdgeAppStack = () => {
         name="transactionList"
         component={TransactionList}
         options={{
-          headerTitle: () => <ParamHeaderTitle<'transactionList'> fromParams={params => params.walletName} />
+          headerTitle: () => <TransactionListTitle />
         }}
       />
       <AppStack.Screen

src/components/cards/InfoCardCarousel.tsx

@@ -6,6 +6,8 @@ import { getBuildNumber, getVersion } from 'react-native-device-info'
 import shajs from 'sha.js'
 
 import { hideMessageTweak } from '../../actions/AccountReferralActions'
+import { getFirstOpenInfo } from '../../actions/FirstOpenActions'
+import { useAsyncValue } from '../../hooks/useAsyncValue'
 import { useHandler } from '../../hooks/useHandler'
 import { useIsAccountFunded } from '../../hooks/useIsAccountFunded'
 import { useDispatch, useSelector } from '../../types/reactRedux'
@@ -22,16 +24,18 @@ interface Props {
   enterAnim: Anim
   screenWidth: number
   cards?: InfoCard[]
-  countryCode?: string
 }
 
 export const InfoCardCarousel = (props: Props) => {
-  const { enterAnim, countryCode, navigation, screenWidth, cards } = props
+  const { enterAnim, navigation, screenWidth, cards } = props
   const theme = useTheme()
   const dispatch = useDispatch()
 
   const accountReferral = useSelector(state => state.account.accountReferral)
 
+  const [firstOpenInfo] = useAsyncValue(async () => await getFirstOpenInfo())
+  const { countryCode } = firstOpenInfo ?? {}
+
   const [filteredCards, setFilteredCards] = React.useState<FilteredInfoCard[]>([])
 
   // Set account funded status

src/components/scenes/HomeScene.tsx

@@ -147,7 +147,6 @@ export const HomeScene = (props: Props) => {
                 <InfoCardCarousel
                   enterAnim={fadeInUp110}
                   cards={infoServerData.rollup?.promoCards2}
-                  countryCode={countryCode}
                   navigation={navigation as NavigationBase}
                   screenWidth={screenWidth}
                 />

src/components/scenes/TransactionListScene.tsx

@@ -1,3 +1,4 @@
+import { useRoute } from '@react-navigation/native'
 import { EdgeCurrencyWallet, EdgeTokenId, EdgeTokenMap, EdgeTransaction } from 'edge-core-js'
 import * as React from 'react'
 import { ListRenderItemInfo, Platform, RefreshControl, View } from 'react-native'
@@ -13,12 +14,14 @@ import { useWatch } from '../../hooks/useWatch'
 import { lstrings } from '../../locales/strings'
 import { FooterRender } from '../../state/SceneFooterState'
 import { useSceneScrollHandler } from '../../state/SceneScrollState'
-import { useDispatch } from '../../types/reactRedux'
-import { NavigationBase, WalletsTabSceneProps } from '../../types/routerTypes'
+import { useDispatch, useSelector } from '../../types/reactRedux'
+import { NavigationBase, RouteProp, WalletsTabSceneProps } from '../../types/routerTypes'
+import { getWalletName } from '../../util/CurrencyWalletHelpers'
 import { unixToLocaleDateTime } from '../../util/utils'
 import { EdgeAnim, MAX_LIST_ITEMS_ANIM } from '../common/EdgeAnim'
 import { SceneWrapper } from '../common/SceneWrapper'
 import { withWallet } from '../hoc/withWallet'
+import { HeaderTitle } from '../navigation/HeaderTitle'
 import { cacheStyles, useTheme } from '../services/ThemeContext'
 import { ExplorerCard } from '../themed/ExplorerCard'
 import { SearchFooter } from '../themed/SearchFooter'
@@ -27,9 +30,7 @@ import { TransactionListRow } from '../themed/TransactionListRow'
 
 export interface TransactionListParams {
   walletId: string
-  walletName: string
   tokenId: EdgeTokenId
-  countryCode?: string
   searchText?: string
 }
 
@@ -249,6 +250,14 @@ function TransactionListComponent(props: Props) {
   )
 }
 
+export const TransactionListTitle = () => {
+  const route = useRoute<RouteProp<'walletDetails'>>()
+  const account = useSelector(state => state.core.account)
+  const wallet = account.currencyWallets[route.params.walletId]
+  const title = wallet == null ? '' : getWalletName(wallet)
+  return <HeaderTitle title={title} />
+}
+
 /**
  * If the token gets deleted, the scene will crash.
  * Fall back to the main currency code if this happens.

src/components/scenes/WalletDetailsScene.tsx

@@ -1,10 +1,12 @@
+import { useRoute } from '@react-navigation/native'
 import { gt, mul } from 'biggystring'
 import { EdgeCurrencyWallet, EdgeTokenId, EdgeTokenMap, EdgeTransaction } from 'edge-core-js'
 import * as React from 'react'
 import { Platform, RefreshControl, View } from 'react-native'
 import Reanimated from 'react-native-reanimated'
 import { AnimatedScrollView } from 'react-native-reanimated/lib/typescript/component/ScrollView'
 import { useSafeAreaFrame } from 'react-native-safe-area-context'
+import { sprintf } from 'sprintf-js'
 
 import { activateWalletTokens } from '../../actions/WalletActions'
 import { SCROLL_INDICATOR_INSET_FIX } from '../../constants/constantSettings'
@@ -21,7 +23,7 @@ import { getExchangeRate } from '../../selectors/WalletSelectors'
 import { FooterRender } from '../../state/SceneFooterState'
 import { useSceneScrollHandler } from '../../state/SceneScrollState'
 import { useDispatch, useSelector } from '../../types/reactRedux'
-import { NavigationBase, WalletsTabSceneProps } from '../../types/routerTypes'
+import { NavigationBase, RouteProp, WalletsTabSceneProps } from '../../types/routerTypes'
 import { coinrankListData, infoServerData } from '../../util/network'
 import { calculateSpamThreshold, convertNativeToDenomination, darkenHexColor } from '../../util/utils'
 import { EdgeCard } from '../cards/EdgeCard'
@@ -32,6 +34,7 @@ import { fadeInDown10 } from '../common/EdgeAnim'
 import { SceneWrapper } from '../common/SceneWrapper'
 import { SectionHeader as SectionHeaderUi4 } from '../common/SectionHeader'
 import { withWallet } from '../hoc/withWallet'
+import { HeaderTitle } from '../navigation/HeaderTitle'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 import { BuyCrypto } from '../themed/BuyCrypto'
 import { EdgeText, Paragraph } from '../themed/EdgeText'
@@ -43,9 +46,7 @@ import { TransactionListTop } from '../themed/TransactionListTop'
 
 export interface WalletDetailsParams {
   walletId: string
-  walletName: string
   tokenId: EdgeTokenId
-  countryCode?: string
 }
 
 interface Props extends WalletsTabSceneProps<'walletDetails'> {
@@ -281,7 +282,6 @@ function WalletDetailsComponent(props: Props) {
             enterAnim={fadeInDown10}
             cards={(infoServerData.rollup?.assetStatusCards2 ?? {})[`${pluginId}${tokenId == null ? '' : `_${tokenId}`}`]}
             navigation={navigation as NavigationBase}
-            countryCode={route.params.countryCode}
             screenWidth={screenWidth}
           />
           {assetId != null && <SectionHeaderUi4 leftTitle={displayName} rightNode={lstrings.coin_rank_see_more} onRightPress={handlePressCoinRanking} />}
@@ -312,7 +312,7 @@ function WalletDetailsComponent(props: Props) {
             ) : isSearching ? (
               <EdgeText style={styles.noResultsText}>{lstrings.transaction_list_search_no_result}</EdgeText>
             ) : (
-              <BuyCrypto countryCode={route.params.countryCode} navigation={navigation as NavigationBase} wallet={wallet} tokenId={tokenId} />
+              <BuyCrypto navigation={navigation as NavigationBase} wallet={wallet} tokenId={tokenId} />
             )}
           </View>
         </Reanimated.ScrollView>
@@ -321,6 +321,14 @@ function WalletDetailsComponent(props: Props) {
   )
 }
 
+export const WalletDetailsTitle = (params: { customTitle?: string }) => {
+  const route = useRoute<RouteProp<'walletDetails'>>()
+  const account = useSelector(state => state.core.account)
+  const wallet = account.currencyWallets[route.params.walletId]
+  const title = sprintf(lstrings.create_wallet_account_metadata_name, wallet?.currencyInfo.displayName)
+  return <HeaderTitle title={title} />
+}
+
 const getStyles = cacheStyles((theme: Theme) => ({
   txListContainer: {
     // A bit less than 5 transaction rows:

src/components/themed/BuyCrypto.tsx

@@ -3,7 +3,9 @@ import * as React from 'react'
 import { View } from 'react-native'
 import { sprintf } from 'sprintf-js'
 
+import { getFirstOpenInfo } from '../../actions/FirstOpenActions'
 import { DONE_THRESHOLD, SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
+import { useAsyncValue } from '../../hooks/useAsyncValue'
 import { useHandler } from '../../hooks/useHandler'
 import { useWatch } from '../../hooks/useWatch'
 import { toPercentString } from '../../locales/intl'
@@ -21,18 +23,20 @@ interface OwnProps {
   wallet: EdgeCurrencyWallet
   tokenId: EdgeTokenId
   navigation: NavigationBase
-  countryCode?: string
 }
 
 type Props = OwnProps
 
 export const BuyCrypto = (props: Props) => {
-  const { countryCode, wallet, tokenId, navigation } = props
+  const { wallet, tokenId, navigation } = props
   const theme = useTheme()
   const styles = getStyles(theme)
 
   const syncRatio = useWatch(wallet, 'syncRatio')
 
+  const [firstOpenInfo] = useAsyncValue(async () => await getFirstOpenInfo())
+  const { countryCode } = firstOpenInfo ?? {}
+
   const handlePress = useHandler(() => {
     navigation.navigate('buyTab', { screen: 'pluginListBuy' })
   })

src/components/themed/WalletListSwipeable.tsx

@@ -4,7 +4,6 @@ import { useMemo } from 'react'
 import { FlatList, RefreshControl } from 'react-native'
 import Animated from 'react-native-reanimated'
 
-import { getFirstOpenInfo } from '../../actions/FirstOpenActions'
 import { selectWalletToken } from '../../actions/WalletActions'
 import { SCROLL_INDICATOR_INSET_FIX } from '../../constants/constantSettings'
 import { useHandler } from '../../hooks/useHandler'
@@ -75,8 +74,6 @@ function WalletListSwipeableComponent(props: Props) {
   )
 
   const handleCreateWallet = useHandler(async (walletId: string, tokenId: EdgeTokenId) => {
-    const wallet = account.currencyWallets[walletId]
-    const { countryCode } = await getFirstOpenInfo()
     dispatch(
       selectWalletToken({
         navigation: navigation as NavigationBase,
@@ -89,9 +86,7 @@ function WalletListSwipeableComponent(props: Props) {
           activationNotRequired &&
           navigation.navigate('walletDetails', {
             walletId,
-            tokenId,
-            walletName: wallet.name ?? wallet.currencyInfo.displayName,
-            countryCode
+            tokenId
           })
       )
       .finally(onReset)