Test/bitcoin bdk

app/actions/multichain/state.ts

@@ -0,0 +1,4 @@
+export interface MultichainSettingsState {
+  bitcoinSupportEnabled: boolean;
+  bitcoinTestnetSupportEnabled: boolean;
+}

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx

@@ -22,12 +22,18 @@ const PickerNetwork = ({
   label,
   imageSource,
   hideNetworkName,
+  disabled = false,
   ...props
 }: PickerNetworkProps) => {
   const { styles } = useStyles(stylesheet, { style });
 
   return (
-    <TouchableOpacity style={styles.base} onPress={onPress} {...props}>
+    <TouchableOpacity
+      style={styles.base}
+      onPress={onPress}
+      disabled={disabled}
+      {...props}
+    >
       <View style={hideNetworkName ? styles.networkIconContainer : null}>
         <Avatar
           variant={AvatarVariant.Network}

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts

@@ -13,6 +13,10 @@ export interface PickerNetworkProps extends TouchableOpacityProps {
    * Network label to display.
    */
   label: string;
+  /**
+   * Optional Boolean to determine if the picker is pressable. Defaults to `false`.
+   */
+  disabled?: boolean;
   /**
    * Callback to trigger when picker is pressed.
    */

app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`PickerNetwork renders correctly 1`] = `
 <TouchableOpacity
+  disabled={false}
   onPress={[Function]}
   style={
     {

app/components/Nav/Main/RootRPCMethodsUI.js

@@ -59,7 +59,7 @@ import TemplateConfirmationModal from '../../Approvals/TemplateConfirmationModal
 import { selectTokenList } from '../../../selectors/tokenListController';
 import { selectTokens } from '../../../selectors/tokensController';
 import { getDeviceId } from '../../../core/Ledger/Ledger';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { createLedgerTransactionModalNavDetails } from '../../UI/LedgerModals/LedgerTransactionModal';
 import ExtendedKeyringTypes from '../../../constants/keyringTypes';
 import Confirm from '../../../components/Views/confirmations/Confirm';
@@ -559,7 +559,7 @@ RootRPCMethodsUI.propTypes = {
 };
 
 const mapStateToProps = (state) => ({
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
   chainId: selectChainId(state),
   tokens: selectTokens(state),
   providerType: selectProviderType(state),

app/components/UI/AccountApproval/index.js

@@ -22,7 +22,7 @@ import Routes from '../../../constants/navigation/Routes';
 import Engine from '../../../core/Engine';
 import SDKConnect from '../../../core/SDKConnect/SDKConnect';
 import { selectAccountsLength } from '../../../selectors/accountTrackerController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import {
   selectChainId,
   selectProviderType,
@@ -411,7 +411,7 @@ class AccountApproval extends PureComponent {
 const mapStateToProps = (state) => ({
   accountsLength: selectAccountsLength(state),
   tokensLength: selectTokensLength(state),
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
   networkType: selectProviderType(state),
   chainId: selectChainId(state),
 });

app/components/UI/AccountOverview/index.js

@@ -36,7 +36,7 @@ import { selectChainId } from '../../../selectors/networkController';
 import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
 import {
   selectInternalAccounts,
-  selectSelectedInternalAccountChecksummedAddress,
+  selectSelectedInternalAccountFormattedAddress,
 } from '../../../selectors/accountsController';
 import { createAccountSelectorNavDetails } from '../../Views/AccountSelector';
 import Text, {
@@ -450,7 +450,7 @@ class AccountOverview extends PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
   internalAccounts: selectInternalAccounts(state),
   currentCurrency: selectCurrentCurrency(state),
   chainId: selectChainId(state),

app/components/UI/AccountSelectorList/AccountSelectorList.tsx

@@ -5,7 +5,6 @@ import { FlatList } from 'react-native-gesture-handler';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { KeyringTypes } from '@metamask/keyring-controller';
-import type { Hex } from '@metamask/utils';
 
 // External dependencies.
 import { selectInternalAccounts } from '../../../selectors/accountsController';
@@ -120,7 +119,7 @@ const AccountSelectorList = ({
       isSelected,
       index,
     }: {
-      address: Hex;
+      address: string;
       imported: boolean;
       isSelected: boolean;
       index: number;

app/components/UI/AddCustomCollectible/index.tsx

@@ -13,7 +13,7 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { useTheme } from '../../../util/theme';
 import { NFTImportScreenSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportNFTView.selectors';
 import { selectChainId } from '../../../selectors/networkController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { getDecimalChainId } from '../../../util/networks';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 
@@ -84,7 +84,7 @@ const AddCustomCollectible = ({
   const styles = createStyles(colors);
 
   const selectedAddress = useSelector(
-    selectSelectedInternalAccountChecksummedAddress,
+    selectSelectedInternalAccountFormattedAddress,
   );
   const chainId = useSelector(selectChainId);
 

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -19,7 +19,7 @@ import {
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
 import { selectAccountsByChainId } from '../../../selectors/accountTrackerController';
 import { selectContractBalances } from '../../../selectors/tokenBalancesController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import Logger from '../../../util/Logger';
 import { safeToChecksumAddress } from '../../../util/address';
 import {
@@ -75,7 +75,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   );
   const goToBridge = useGoToBridge('TokenDetails');
   const selectedAddress = useSelector(
-    selectSelectedInternalAccountChecksummedAddress,
+    selectSelectedInternalAccountFormattedAddress,
   );
   const { trackEvent, createEventBuilder } = useMetrics();
   const tokenExchangeRates = useSelector(selectContractExchangeRates);

app/components/UI/CollectibleContractElement/index.js

@@ -13,7 +13,7 @@ import { removeFavoriteCollectible } from '../../../actions/collectibles';
 import { collectibleContractsSelector } from '../../../reducers/collectibles';
 import { useTheme } from '../../../util/theme';
 import { selectChainId } from '../../../selectors/networkController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import Icon, {
   IconName,
   IconColor,
@@ -320,7 +320,7 @@ CollectibleContractElement.propTypes = {
 const mapStateToProps = (state) => ({
   collectibleContracts: collectibleContractsSelector(state),
   chainId: selectChainId(state),
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/UI/CollectibleContracts/index.js

@@ -38,7 +38,7 @@ import {
   selectIsIpfsGatewayEnabled,
   selectUseNftDetection,
 } from '../../../selectors/preferencesController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletView.selectors';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { RefreshTestId, SpinnerTestId } from './constants';
@@ -441,7 +441,7 @@ CollectibleContracts.propTypes = {
 const mapStateToProps = (state) => ({
   networkType: selectProviderType(state),
   chainId: selectChainId(state),
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
   useNftDetection: selectUseNftDetection(state),
   collectibleContracts: collectibleContractsSelector(state),
   collectibles: collectiblesSelector(state),

app/components/UI/CollectibleOverview/index.js

@@ -48,7 +48,7 @@ import {
   selectDisplayNftMedia,
   selectIsIpfsGatewayEnabled,
 } from '../../../selectors/preferencesController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 
 const ANIMATION_VELOCITY = 250;
 const HAS_NOTCH = Device.hasNotch();
@@ -546,7 +546,7 @@ CollectibleOverview.propTypes = {
 
 const mapStateToProps = (state, props) => ({
   chainId: selectChainId(state),
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
   isInFavorites: isCollectibleInFavoritesSelector(state, props.collectible),
 });
 

app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap

@@ -68,6 +68,7 @@ exports[`ManageNetworks should render correctly 1`] = `
      to learn more about how Infura handles data.
   </Text>
   <TouchableOpacity
+    disabled={false}
     onPress={[Function]}
     style={
       {

app/components/UI/Navbar/index.js

@@ -59,8 +59,12 @@ import PickerAccount from '../../../component-library/components/Pickers/PickerA
 import { createAccountSelectorNavDetails } from '../../../components/Views/AccountSelector';
 import { RequestPaymentViewSelectors } from '../../../../e2e/selectors/Receive/RequestPaymentView.selectors';
 import { MetricsEventBuilder } from '../../../core/Analytics/MetricsEventBuilder';
+import { toChecksumHexAddress } from '@metamask/controller-utils';
+///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+import { isBtcAccount } from '../../../core/MultiChain/utils';
+///: END:ONLY_INCLUDE_IF
 
-const trackEvent = (event) => {
+const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event);
 };
 
@@ -918,7 +922,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
@@ -934,7 +938,7 @@ export function getOfflineModalNavbar() {
  */
 export function getWalletNavbarOptions(
   accountActionsRef,
-  selectedAddress,
+  selectedInternalAccount,
   accountName,
   accountAvatarType,
   networkName,
@@ -963,6 +967,15 @@ export function getWalletNavbarOptions(
     },
   });
 
+  let formattedAddress = toChecksumHexAddress(selectedInternalAccount.address);
+
+  ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  if (isBtcAccount(selectedInternalAccount)) {
+    // BTC addresses are not checksummed
+    formattedAddress = selectedInternalAccount.address;
+  }
+  ///: END:ONLY_INCLUDE_IF
+
   const onScanSuccess = (data, content) => {
     if (data.private_key) {
       Alert.alert(
@@ -1046,35 +1059,55 @@ export function getWalletNavbarOptions(
     }
   }
 
+  const renderNetworkPicker = () => {
+    let networkPicker = (
+      <PickerNetwork
+        label={networkName}
+        imageSource={networkImageSource}
+        onPress={onPressTitle}
+        testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_BUTTON}
+        hideNetworkName
+      />
+    );
+
+    ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+    if (isBtcAccount(selectedInternalAccount)) {
+      networkPicker = (
+        <PickerNetwork
+          label={'Bitcoin'}
+          imageSource={require('../../../images/bitcoin-logo.png')}
+          testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_BUTTON}
+          hideNetworkName
+          disabled
+        />
+      );
+    }
+    ///: END:ONLY_INCLUDE_IF
+
+    return <View style={styles.leftElementContainer}>{networkPicker}</View>;
+  };
+
   return {
     headerTitle: () => (
       <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}
         />
       </View>
     ),
-    headerLeft: () => (
-      <View style={styles.leftElementContainer}>
-        <PickerNetwork
-          label={networkName}
-          imageSource={networkImageSource}
-          onPress={onPressTitle}
-          testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_BUTTON}
-          hideNetworkName
-        />
-      </View>
-    ),
+    headerLeft: () => renderNetworkPicker(),
     headerRight: () => (
       <View style={styles.rightElementContainer}>
         <View

app/components/UI/Notification/TransactionNotification/index.js

@@ -35,7 +35,7 @@ import { selectTokensByAddress } from '../../../../selectors/tokensController';
 import { selectContractExchangeRates } from '../../../../selectors/tokenRatesController';
 import { selectAccounts } from '../../../../selectors/accountTrackerController';
 import { speedUpTransaction } from '../../../../util/transaction-controller';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../../selectors/accountsController';
 
 const WINDOW_WIDTH = Dimensions.get('window').width;
 const ACTION_CANCEL = 'cancel';
@@ -447,7 +447,7 @@ const mapStateToProps = (state) => {
 
   return {
     accounts: selectAccounts(state),
-    selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+    selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
     transactions: TransactionController.transactions,
     ticker: selectTicker(state),
     chainId,

app/components/UI/PaymentRequest/index.js

@@ -58,7 +58,7 @@ import {
 import { selectTokenListArray } from '../../../selectors/tokenListController';
 import { selectTokens } from '../../../selectors/tokensController';
 import { selectContractExchangeRates } from '../../../selectors/tokenRatesController';
-import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController';
+import { selectSelectedInternalAccountFormattedAddress } from '../../../selectors/accountsController';
 
 import { RequestPaymentViewSelectors } from '../../../../e2e/selectors/Receive/RequestPaymentView.selectors';
 
@@ -896,7 +896,7 @@ const mapStateToProps = (state) => ({
   contractExchangeRates: selectContractExchangeRates(state),
   searchEngine: state.settings.searchEngine,
   tokens: selectTokens(state),
-  selectedAddress: selectSelectedInternalAccountChecksummedAddress(state),
+  selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
   primaryCurrency: state.settings.primaryCurrency,
   ticker: selectTicker(state),
   chainId: selectChainId(state),

app/components/UI/Ramp/components/Account.tsx

@@ -8,7 +8,7 @@ import { useTheme } from '../../../../util/theme';
 import { Colors } from '../../../../util/theme/models';
 import { colors as importedColors } from '../../../../styles/common';
 import {
-  selectSelectedInternalAccountChecksummedAddress,
+  selectSelectedInternalAccountFormattedAddress,
   selectInternalAccounts,
 } from '../../../../selectors/accountsController';
 import { toLowerCaseEquals } from '../../../../util/general';
@@ -52,7 +52,7 @@ const Account = ({
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const selectedAddress = useSelector(
-    selectSelectedInternalAccountChecksummedAddress,
+    selectSelectedInternalAccountFormattedAddress,
   );
 
   const internalAccounts = useSelector(selectInternalAccounts);