refactor: refactor AccountOverview to avoid prop drilling [PERA-3692]

apps/mobile/src/modules/accounts/components/AccountOverview/AccountOverview.tsx

@@ -10,7 +10,7 @@
  limitations under the License
  */
 
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { AccountOverviewHeader } from './AccountOverviewHeader'
 import { SendFundsBottomSheet } from '@modules/transactions/components/send-funds/SendFundsBottomSheet/SendFundsBottomSheet'
 import { ReceiveFundsBottomSheet } from '@modules/transactions/components/receive-funds/ReceiveFundsBottomSheet'
@@ -20,6 +20,10 @@ import { useAccountOverview } from './useAccountOverview'
 import { PWView } from '@components/core'
 import { AccountAssetList } from '../AccountAssetList'
 import { AccountOptionsBottomSheet } from '../AccountOptionsBottomSheet'
+import {
+    AccountOverviewModalContext,
+    AccountOverviewModalContextValue,
+} from './AccountOverviewModalContext'
 
 export type AccountOverviewProps = {
     account: WalletAccount
@@ -34,81 +38,72 @@ export const AccountOverview = ({
 }: AccountOverviewProps) => {
     const styles = useStyles()
     const {
-        portfolioAlgoValue,
-        isPending,
-        period,
-        setPeriod,
-        selectedPoint,
-        scrollingEnabled,
-        preferredCurrency,
-        hasBalance,
-        togglePrivacyMode,
-        handleChartSelectionChange,
         isSendFundsVisible,
-        handleOpenSendFunds,
+        openSendFunds,
         handleCloseSendFunds,
-        handleSwap,
-        handleMore,
-        handleBuyAlgo,
-        handleReceive,
-        handleCopyAddress,
-        handleShowQR,
         isReceiveFundsVisible,
+        openReceiveFunds,
         handleCloseReceiveFunds,
         isAccountOptionsVisible,
+        openAccountOptions,
         handleCloseAccountOptions,
+        scrollingEnabled,
+        onScrollEnabledChange,
     } = useAccountOverview(account)
 
     useEffect(() => {
         onSwipeEnabledChange?.(scrollingEnabled)
     }, [scrollingEnabled, onSwipeEnabledChange])
 
+    const contextValue = useMemo<AccountOverviewModalContextValue>(
+        () => ({
+            account,
+            openSendFunds,
+            openReceiveFunds,
+            openAccountOptions,
+            onScrollEnabledChange,
+        }),
+        [
+            account,
+            openSendFunds,
+            openReceiveFunds,
+            openAccountOptions,
+            onScrollEnabledChange,
+        ],
+    )
+
     return (
-        <PWView style={styles.container}>
-            <AccountAssetList
-                account={account}
-                scrollEnabled={scrollingEnabled}
-                header={
-                    <AccountOverviewHeader
-                        account={account}
-                        hasBalance={hasBalance}
-                        portfolioAlgoValue={portfolioAlgoValue}
-                        isPending={isPending}
-                        period={period}
-                        setPeriod={setPeriod}
-                        selectedPoint={selectedPoint}
-                        preferredCurrency={preferredCurrency}
-                        togglePrivacyMode={togglePrivacyMode}
-                        handleChartSelectionChange={handleChartSelectionChange}
-                        handleSwap={handleSwap}
-                        handleOpenSendFunds={handleOpenSendFunds}
-                        handleMore={handleMore}
-                        handleBuyAlgo={handleBuyAlgo}
-                        handleReceive={handleReceive}
-                        handleCopyAddress={handleCopyAddress}
-                        handleShowQR={handleShowQR}
-                        chartVisible={chartVisible}
-                    />
-                }
-            />
+        <AccountOverviewModalContext.Provider value={contextValue}>
+            <PWView style={styles.container}>
+                <AccountAssetList
+                    account={account}
+                    scrollEnabled={scrollingEnabled}
+                    header={
+                        <AccountOverviewHeader
+                            account={account}
+                            chartVisible={chartVisible}
+                        />
+                    }
+                />
 
-            <SendFundsBottomSheet
-                isVisible={isSendFundsVisible}
-                onClose={handleCloseSendFunds}
-            />
+                <SendFundsBottomSheet
+                    isVisible={isSendFundsVisible}
+                    onClose={handleCloseSendFunds}
+                />
 
-            <ReceiveFundsBottomSheet
-                isVisible={isReceiveFundsVisible}
-                onClose={handleCloseReceiveFunds}
-                account={account}
-            />
+                <ReceiveFundsBottomSheet
+                    isVisible={isReceiveFundsVisible}
+                    onClose={handleCloseReceiveFunds}
+                    account={account}
+                />
 
-            <AccountOptionsBottomSheet
-                isVisible={isAccountOptionsVisible}
-                onClose={handleCloseAccountOptions}
-                onShowAddress={handleReceive}
-                account={account}
-            />
-        </PWView>
+                <AccountOptionsBottomSheet
+                    isVisible={isAccountOptionsVisible}
+                    onClose={handleCloseAccountOptions}
+                    onShowAddress={openReceiveFunds}
+                    account={account}
+                />
+            </PWView>
+        </AccountOverviewModalContext.Provider>
     )
 }

apps/mobile/src/modules/accounts/components/AccountOverview/AccountOverviewHeader.tsx

@@ -14,7 +14,6 @@ import { PWText, PWTouchableOpacity, PWView } from '@components/core'
 import {
     DEFAULT_PRECISION,
     formatDatetime,
-    HistoryPeriod,
 } from '@perawallet/wallet-core-shared'
 import { CurrencyDisplay } from '@components/CurrencyDisplay'
 import Decimal from 'decimal.js'
@@ -23,63 +22,37 @@ import { ButtonPanel } from '../ButtonPanel'
 import { useStyles } from './styles'
 import { WealthTrend } from '@components/WealthTrend'
 import { ChartPeriodSelection } from '@components/ChartPeriodSelection'
-import {
-    AccountBalanceHistoryItem,
-    isWatchAccount,
-    WalletAccount,
-} from '@perawallet/wallet-core-accounts'
+import { isWatchAccount, WalletAccount } from '@perawallet/wallet-core-accounts'
 
 import { useLanguage } from '@hooks/useLanguage'
 import { NoFundsButtonPanel } from '../NoFundsButtonPanel'
 import { WatchAccountButtonPanel } from '../WatchAccountButtonPanel'
 import { ALGO_ASSET } from '@perawallet/wallet-core-assets'
 import { PreferredCurrencyDisplay } from '@components/PreferredCurrencyDisplay'
 import { ExpandablePanel } from '@components/ExpandablePanel'
+import { useAccountOverviewHeader } from './useAccountOverviewHeader'
 
 export type AccountOverviewHeaderProps = {
     account: WalletAccount
-    hasBalance: boolean
-    portfolioAlgoValue: Decimal
-    isPending: boolean
-    period: HistoryPeriod
-    setPeriod: (period: HistoryPeriod) => void
-    selectedPoint: AccountBalanceHistoryItem | null
-    preferredCurrency: string
-    togglePrivacyMode: () => void
-    handleChartSelectionChange: (
-        selected: AccountBalanceHistoryItem | null,
-    ) => void
-    handleSwap: () => void
-    handleOpenSendFunds: () => void
-    handleMore: () => void
-    handleBuyAlgo: () => void
-    handleReceive: () => void
-    handleCopyAddress: () => void
-    handleShowQR: () => void
     chartVisible: boolean
 }
 
 export const AccountOverviewHeader = ({
     account,
-    hasBalance,
-    portfolioAlgoValue,
-    isPending,
-    period,
-    setPeriod,
-    selectedPoint,
-    togglePrivacyMode,
-    handleChartSelectionChange,
-    handleSwap,
-    handleOpenSendFunds,
-    handleMore,
-    handleBuyAlgo,
-    handleReceive,
-    handleCopyAddress,
-    handleShowQR,
     chartVisible,
 }: AccountOverviewHeaderProps) => {
     const styles = useStyles()
     const { t } = useLanguage()
+    const {
+        portfolioAlgoValue,
+        isPending,
+        period,
+        setPeriod,
+        selectedPoint,
+        hasBalance,
+        togglePrivacyMode,
+        handleChartSelectionChange,
+    } = useAccountOverviewHeader(account)
 
     return hasBalance || isPending ? (
         <PWView style={styles.headerContainer}>
@@ -151,29 +124,16 @@ export const AccountOverviewHeader = ({
 
             <ExpandablePanel isExpanded={!isPending}>
                 {isWatchAccount(account) ? (
-                    <WatchAccountButtonPanel
-                        onCopyAddress={handleCopyAddress}
-                        onShowQR={handleShowQR}
-                        onMore={handleMore}
-                    />
+                    <WatchAccountButtonPanel />
                 ) : (
-                    <ButtonPanel
-                        onSwap={handleSwap}
-                        onSend={handleOpenSendFunds}
-                        onReceive={handleReceive}
-                        onMore={handleMore}
-                    />
+                    <ButtonPanel />
                 )}
             </ExpandablePanel>
         </PWView>
     ) : (
         <PWView style={styles.headerContainer}>
             {isWatchAccount(account) ? (
-                <WatchAccountButtonPanel
-                    onCopyAddress={handleCopyAddress}
-                    onShowQR={handleShowQR}
-                    onMore={handleMore}
-                />
+                <WatchAccountButtonPanel />
             ) : (
                 <>
                     <PWView style={styles.noBalanceContainer}>
@@ -190,11 +150,7 @@ export const AccountOverviewHeader = ({
                             {t('account_details.no_balance.get_started')}
                         </PWText>
                     </PWView>
-                    <NoFundsButtonPanel
-                        onBuyAlgo={handleBuyAlgo}
-                        onReceive={handleReceive}
-                        onMore={handleMore}
-                    />
+                    <NoFundsButtonPanel />
                 </>
             )}
         </PWView>

apps/mobile/src/modules/accounts/components/AccountOverview/AccountOverviewModalContext.tsx

@@ -0,0 +1,43 @@
+/*
+ Copyright 2022-2025 Pera Wallet, LDA
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License
+ */
+
+import { createContext, useContext } from 'react'
+import { WalletAccount } from '@perawallet/wallet-core-accounts'
+
+export type AccountOverviewModalContextValue = {
+    account: WalletAccount
+    openSendFunds: () => void
+    openReceiveFunds: () => void
+    openAccountOptions: () => void
+    onScrollEnabledChange: (enabled: boolean) => void
+}
+
+export const AccountOverviewModalContext =
+    createContext<AccountOverviewModalContextValue | null>(null)
+
+export type UseAccountOverviewModalResult = {
+    account: WalletAccount
+    openSendFunds: () => void
+    openReceiveFunds: () => void
+    openAccountOptions: () => void
+    onScrollEnabledChange: (enabled: boolean) => void
+}
+
+export const useAccountOverviewModal = (): UseAccountOverviewModalResult => {
+    const context = useContext(AccountOverviewModalContext)
+    if (context === null) {
+        throw new Error(
+            'useAccountOverviewModal must be used within AccountOverviewModalContext.Provider',
+        )
+    }
+    return context
+}