From 00ccccbfca9aba2affe371b6ed9efb9ad042df00 Mon Sep 17 00:00:00 2001
From: Owen Craston <owengc12@gmail.com>
Date: Fri, 15 Nov 2024 17:26:54 -0800
Subject: [PATCH] render bitcoin network

---
 app/components/UI/Navbar/index.js             | 39 +++++++++++++------
 app/components/Views/Wallet/index.tsx         | 12 +++---
 .../hooks/useAccounts/useAccounts.ts          |  1 -
 .../hooks/useAccounts/useAccounts.types.ts    |  1 -
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/app/components/UI/Navbar/index.js b/app/components/UI/Navbar/index.js
index e4c1412a02d..d867117f5f2 100644
--- a/app/components/UI/Navbar/index.js
+++ b/app/components/UI/Navbar/index.js
@@ -58,6 +58,8 @@ import AddressCopy from '../AddressCopy';
 import PickerAccount from '../../../component-library/components/Pickers/PickerAccount';
 import { createAccountSelectorNavDetails } from '../../../components/Views/AccountSelector';
 import { RequestPaymentViewSelectors } from '../../../../e2e/selectors/Receive/RequestPaymentView.selectors';
+import { EthAccountType, BtcAccountType } from '@metamask/keyring-api';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event, params);
@@ -910,7 +912,7 @@ export function getOfflineModalNavbar() {
  * Function that returns the navigation options for the wallet screen.
  *
  * @param {Object} accountActionsRef - The ref object for the account actions
- * @param {string} selectedAddress - The currently selected Ethereum address
+ * @param {Object} selectedInternalAccount - The currently selected internal account
  * @param {string} accountName - The name of the currently selected account
  * @param {string} accountAvatarType - The type of avatar for the currently selected account
  * @param {string} networkName - The name of the current network
@@ -926,7 +928,7 @@ export function getOfflineModalNavbar() {
  */
 export function getWalletNavbarOptions(
   accountActionsRef,
-  selectedAddress,
+  selectedInternalAccount,
   accountName,
   accountAvatarType,
   networkName,
@@ -955,6 +957,15 @@ export function getWalletNavbarOptions(
     },
   });
 
+  console.log('Bitcoin/ selectedInternalAccount', selectedInternalAccount);
+  console.log('Bitcoin/ network name', networkName);
+
+  const formattedAddress =
+    selectedInternalAccount.type === EthAccountType.Eoa ||
+    selectedInternalAccount.type === EthAccountType.Erc4337
+      ? toChecksumHexAddress(selectedInternalAccount.address)
+      : selectedInternalAccount.address;
+
   const onScanSuccess = (data, content) => {
     if (data.private_key) {
       Alert.alert(
@@ -1027,13 +1038,15 @@ export function getWalletNavbarOptions(
       <View style={innerStyles.headerTitle}>
         <PickerAccount
           ref={accountActionsRef}
-          accountAddress={selectedAddress}
+          accountAddress={formattedAddress}
           accountName={accountName}
           accountAvatarType={accountAvatarType}
           onPress={() => {
             navigation.navigate(...createAccountSelectorNavDetails({}));
           }}
-          accountTypeLabel={getLabelTextByAddress(selectedAddress) || undefined}
+          accountTypeLabel={
+            getLabelTextByAddress(formattedAddress) || undefined
+          }
           showAddress
           cellAccountContainerStyle={styles.account}
           testID={WalletViewSelectorsIDs.ACCOUNT_ICON}
@@ -1042,13 +1055,17 @@ export function getWalletNavbarOptions(
     ),
     headerLeft: () => (
       <View style={styles.leftElementContainer}>
-        <PickerNetwork
-          label={networkName}
-          imageSource={networkImageSource}
-          onPress={onPressTitle}
-          testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_BUTTON}
-          hideNetworkName
-        />
+        {selectedInternalAccount.type === BtcAccountType.P2wpkh ? (
+          <Text>Bitcoin</Text>
+        ) : (
+          <PickerNetwork
+            label={networkName}
+            imageSource={networkImageSource}
+            onPress={onPressTitle}
+            testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_BUTTON}
+            hideNetworkName
+          />
+        )}
       </View>
     ),
     headerRight: () => (
diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx
index a50806be8bb..6ad531105a0 100644
--- a/app/components/Views/Wallet/index.tsx
+++ b/app/components/Views/Wallet/index.tsx
@@ -71,7 +71,7 @@ import Text, {
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { RootState } from '../../../reducers';
 import usePrevious from '../../hooks/usePrevious';
-import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccount } from '../../../selectors/accountsController';
 import { selectAccountBalanceByChainId } from '../../../selectors/accountTrackerController';
 import {
   hideNftFetchingLoadingIndicator as hideNftFetchingLoadingIndicatorAction,
@@ -179,9 +179,7 @@ const Wallet = ({
   /**
    * A string that represents the selected address
    */
-  const selectedAddress = useSelector(
-    selectSelectedInternalAccountFormattedAddress,
-  );
+  const selectedInternalAccount = useSelector(selectSelectedInternalAccount);
   /**
    * An array that represents the user tokens
    */
@@ -406,7 +404,7 @@ const Wallet = ({
     navigation.setOptions(
       getWalletNavbarOptions(
         walletRef,
-        selectedAddress || '',
+        selectedInternalAccount || '',
         accountName,
         accountAvatarType,
         networkName,
@@ -422,7 +420,7 @@ const Wallet = ({
     );
     /* eslint-disable-next-line */
   }, [
-    selectedAddress,
+    selectedInternalAccount,
     accountName,
     accountAvatarType,
     navigation,
@@ -625,7 +623,7 @@ const Wallet = ({
   return (
     <ErrorBoundary navigation={navigation} view="Wallet">
       <View style={baseStyles.flexGrow}>
-        {selectedAddress ? renderContent() : renderLoader()}
+        {selectedInternalAccount ? renderContent() : renderLoader()}
 
         {renderOnboardingWizard()}
       </View>
diff --git a/app/components/hooks/useAccounts/useAccounts.ts b/app/components/hooks/useAccounts/useAccounts.ts
index 499f8751a00..ad2b7795329 100644
--- a/app/components/hooks/useAccounts/useAccounts.ts
+++ b/app/components/hooks/useAccounts/useAccounts.ts
@@ -31,7 +31,6 @@ import {
   UseAccountsParams,
 } from './useAccounts.types';
 import { InternalAccount, EthAccountType } from '@metamask/keyring-api';
-import { Hex } from '@metamask/utils';
 import { BigNumber } from 'ethers';
 
 /**
diff --git a/app/components/hooks/useAccounts/useAccounts.types.ts b/app/components/hooks/useAccounts/useAccounts.types.ts
index aaf21396126..a85caf30a77 100644
--- a/app/components/hooks/useAccounts/useAccounts.types.ts
+++ b/app/components/hooks/useAccounts/useAccounts.types.ts
@@ -1,6 +1,5 @@
 // Third party dependencies.
 import { KeyringTypes } from '@metamask/keyring-controller';
-import { Hex } from '@metamask/utils';
 
 // External dependencies.
 import { AvatarTokenProps } from '../../../component-library/components/Avatars/Avatar/variants/AvatarToken/AvatarToken.types';