Refactor redux store in how we store and access accounts - ENG-4427 E…

…NG-4524 ENG-4517 (#309)

src/app/components/accountHeader/index.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 
 import OptionsDialog from '@components/optionsDialog/optionsDialog';
 import useSeedVault from '@hooks/useSeedVault';
-import useWalletSelector from '@hooks/useWalletSelector';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import { DotsThreeVertical } from '@phosphor-icons/react';
 import { OPTIONS_DIALOG_WIDTH } from '@utils/constants';
 
@@ -83,7 +83,7 @@ function AccountHeaderComponent({
   showBorderBottom = true,
 }: AccountHeaderComponentProps) {
   const navigate = useNavigate();
-  const { selectedAccount } = useWalletSelector();
+  const selectedAccount = useSelectedAccount();
 
   const { t } = useTranslation('translation', { keyPrefix: 'SETTING_SCREEN' });
   const { t: optionsDialogTranslation } = useTranslation('translation', {

src/app/components/confirmBtcTransaction/index.tsx

@@ -1,7 +1,7 @@
 import { delay } from '@common/utils/ledger';
 import ActionButton from '@components/button';
 import { Tab } from '@components/tabBar';
-import useWalletSelector from '@hooks/useWalletSelector';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import TransportFactory from '@ledgerhq/hw-transport-webusb';
 import { RuneSummary, Transport, btcTransaction } from '@secretkeylabs/xverse-core';
 import Callout from '@ui-library/callout';
@@ -113,7 +113,7 @@ function ConfirmBtcTransaction({
   const { t: signatureRequestTranslate } = useTranslation('translation', {
     keyPrefix: 'SIGNATURE_REQUEST',
   });
-  const { selectedAccount } = useWalletSelector();
+  const selectedAccount = useSelectedAccount();
 
   const hideBackButton = !onBackClick;
   const hasInsufficientRunes =

src/app/components/confirmBtcTransaction/receiveSection.tsx

@@ -1,4 +1,5 @@
 import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
 import { ArrowRight } from '@phosphor-icons/react';
 import { btcTransaction, RuneSummary } from '@secretkeylabs/xverse-core';
@@ -54,7 +55,8 @@ function ReceiveSection({
   runeReceipts,
   transactionIsFinal,
 }: Props) {
-  const { btcAddress, ordinalsAddress, hasActivatedRareSatsKey } = useWalletSelector();
+  const { btcAddress, ordinalsAddress } = useSelectedAccount();
+  const { hasActivatedRareSatsKey } = useWalletSelector();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
 
   const { outputsToPayment, outputsToOrdinal } = getOutputsWithAssetsToUserAddress({

src/app/components/confirmBtcTransaction/transactionSummary.tsx

@@ -7,6 +7,7 @@ import MintSection from '@components/confirmBtcTransaction/mintSection';
 import TransferFeeView from '@components/transferFeeView';
 import useCoinRates from '@hooks/queries/useCoinRates';
 import useBtcFeeRate from '@hooks/useBtcFeeRate';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import { btcTransaction, getBtcFiatEquivalent, RuneSummary } from '@secretkeylabs/xverse-core';
 import SelectFeeRate from '@ui-components/selectFeeRate';
 import Callout from '@ui-library/callout';
@@ -71,7 +72,7 @@ function TransactionSummary({
   const { t: rareSatsT } = useTranslation('translation', { keyPrefix: 'RARE_SATS' });
   const { t: tUnits } = useTranslation('translation', { keyPrefix: 'UNITS' });
 
-  const { btcAddress, ordinalsAddress } = useWalletSelector();
+  const { btcAddress, ordinalsAddress } = useSelectedAccount();
   const { data: recommendedFees } = useBtcFeeRate();
 
   const hasOutputScript = outputs.some((output) => isScriptOutput(output));

src/app/components/confirmBtcTransaction/transferSection.tsx

@@ -1,5 +1,5 @@
 import RuneAmount from '@components/confirmBtcTransaction/itemRow/runeAmount';
-import useWalletSelector from '@hooks/useWalletSelector';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import { btcTransaction, RuneSummary } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import { useTranslation } from 'react-i18next';
@@ -53,7 +53,7 @@ function TransferSection({
   netAmount,
   onShowInscription,
 }: Props) {
-  const { btcAddress, ordinalsAddress } = useWalletSelector();
+  const { btcAddress, ordinalsAddress } = useSelectedAccount();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
 
   const { inputFromPayment, inputFromOrdinal } = getInputsWitAssetsFromUserAddress({

src/app/components/confirmBtcTransaction/txInOutput/transactionInput.tsx

@@ -1,6 +1,6 @@
 import IconBitcoin from '@assets/img/dashboard/bitcoin_icon.svg';
 import TransferDetailView from '@components/transferDetailView';
-import useWalletSelector from '@hooks/useWalletSelector';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import { btcTransaction, satsToBtc } from '@secretkeylabs/xverse-core';
 import { StyledP } from '@ui-library/common.styled';
 import { getTruncatedAddress } from '@utils/helper';
@@ -35,7 +35,7 @@ type Props = {
 };
 
 function TransactionInput({ input }: Props) {
-  const { btcAddress, ordinalsAddress } = useWalletSelector();
+  const { btcAddress, ordinalsAddress } = useSelectedAccount();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
 
   const isPaymentsAddress = input.extendedUtxo.address === btcAddress;

src/app/components/confirmBtcTransaction/txInOutput/transactionOutput.tsx

@@ -1,7 +1,7 @@
 import ScriptIcon from '@assets/img/transactions/ScriptIcon.svg';
 import OutputIcon from '@assets/img/transactions/output.svg';
 import TransferDetailView from '@components/transferDetailView';
-import useWalletSelector from '@hooks/useWalletSelector';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import { btcTransaction, satsToBtc } from '@secretkeylabs/xverse-core';
 import { getTruncatedAddress } from '@utils/helper';
 import BigNumber from 'bignumber.js';
@@ -37,7 +37,7 @@ type Props = {
 };
 
 function TransactionOutput({ output, scriptOutputCount }: Props) {
-  const { btcAddress, ordinalsAddress } = useWalletSelector();
+  const { btcAddress, ordinalsAddress } = useSelectedAccount();
   const { t } = useTranslation('translation', { keyPrefix: 'CONFIRM_TRANSACTION' });
   const outputWithScript = isScriptOutput(output);
 

src/app/components/confirmBtcTransactionComponent/index.tsx

@@ -9,6 +9,7 @@ import useNftDataSelector from '@hooks/stores/useNftDataSelector';
 import useBtcClient from '@hooks/useBtcClient';
 import useOrdinalsByAddress from '@hooks/useOrdinalsByAddress';
 import useSeedVault from '@hooks/useSeedVault';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
 import {
   Bundle,
@@ -135,7 +136,9 @@ function ConfirmBtcTransactionComponent({
 }: Props) {
   const { t } = useTranslation('translation');
   const [loading, setLoading] = useState(false);
-  const { btcAddress, selectedAccount, network, feeMultipliers } = useWalletSelector();
+  const selectedAccount = useSelectedAccount();
+  const { btcAddress } = selectedAccount;
+  const { network, feeMultipliers } = useWalletSelector();
   const { btcFiatRate } = useCoinRates();
   const { selectedSatBundle } = useNftDataSelector();
   const { getSeed } = useSeedVault();

src/app/components/confirmStxTransactionComponent/index.tsx

@@ -10,6 +10,7 @@ import TransactionSettingAlert from '@components/transactionSetting';
 import TransferFeeView from '@components/transferFeeView';
 import useNetworkSelector from '@hooks/useNetwork';
 import useSeedVault from '@hooks/useSeedVault';
+import useSelectedAccount from '@hooks/useSelectedAccount';
 import useWalletSelector from '@hooks/useWalletSelector';
 import Transport from '@ledgerhq/hw-transport-webusb';
 import type { StacksTransaction } from '@secretkeylabs/xverse-core';
@@ -43,7 +44,7 @@ const Container = styled.div`
   }
 `;
 
-export const ButtonContainer = styled.div((props) => ({
+const ButtonContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'row',
   paddingTop: props.theme.spacing(12),
@@ -154,7 +155,8 @@ function ConfirmStxTransactionComponent({
   const selectedNetwork = useNetworkSelector();
   const { getSeed } = useSeedVault();
   const [showFeeSettings, setShowFeeSettings] = useState(false);
-  const { selectedAccount, feeMultipliers } = useWalletSelector();
+  const selectedAccount = useSelectedAccount();
+  const { feeMultipliers } = useWalletSelector();
   const [openTransactionSettingModal, setOpenTransactionSettingModal] = useState(false);
   const [buttonLoading, setButtonLoading] = useState(loading);
   const [isModalVisible, setIsModalVisible] = useState(false);