[wallet-ext] add a new useActiveAccount hook (MystenLabs#9214)

## Description 
This diff adds a new `useActiveAccount` hook similar to
`useActiveAddress`, which we'll need for identifying whether or not to
sign transactions using the `BackgroundServiceSigner` versus the new
`LedgerSigner` we'll be adding in a follow-up diff.


## Test Plan 
- Manual testing (signed some transactions, did other random stuff in
the wallet)

---
If your changes are not user-facing and not a breaking change, you can
skip the following section. Otherwise, please indicate what changed, and
then add to the Release Notes section as highlighted during the release
process.

### Type of Change (Check all that apply)

- [ ] user-visible impact
- [ ] breaking change for a client SDKs
- [ ] breaking change for FNs (FN binary must upgrade)
- [ ] breaking change for validators or node operators (must upgrade
binaries)
- [ ] breaking change for on-chain data layout
- [ ] necessitate either a data wipe or data migration

### Release notes
N/A

apps/wallet/src/ui/app/components/menu/content/MenuList.tsx

@@ -24,6 +24,7 @@ import { useNextMenuUrl } from '_components/menu/hooks';
 import { useAppDispatch, useAppSelector } from '_hooks';
 import { ToS_LINK } from '_src/shared/constants';
 import { FEATURES } from '_src/shared/experimentation/features';
+import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 import { useAutoLockInterval } from '_src/ui/app/hooks/useAutoLockInterval';
 import { useCopyToClipboard } from '_src/ui/app/hooks/useCopyToClipboard';
 import { logout } from '_src/ui/app/redux/slices/account';
@@ -36,7 +37,7 @@ function MenuList() {
     const accountUrl = useNextMenuUrl(true, '/accounts');
     const networkUrl = useNextMenuUrl(true, '/network');
     const autoLockUrl = useNextMenuUrl(true, '/auto-lock');
-    const address = useAppSelector(({ account }) => account.address);
+    const address = useActiveAddress();
     const apiEnv = useAppSelector((state) => state.app.apiEnv);
     const networkName = API_ENV_TO_INFO[apiEnv].name;
     const autoLockInterval = useAutoLockInterval();

apps/wallet/src/ui/app/hooks/useActiveAccount.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { activeAccountSelector } from '../redux/slices/account';
+import useAppSelector from './useAppSelector';
+
+export function useActiveAccount() {
+    return useAppSelector(activeAccountSelector);
+}

apps/wallet/src/ui/app/hooks/useActiveAddress.ts

@@ -1,8 +1,9 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { activeAddressSelector } from '../redux/slices/account';
 import useAppSelector from './useAppSelector';
 
 export function useActiveAddress() {
-    return useAppSelector(({ account }) => account.address);
+    return useAppSelector(activeAddressSelector);
 }

apps/wallet/src/ui/app/hooks/useExplorerLink.ts

@@ -15,7 +15,7 @@ import {
     getValidatorUrl,
 } from '../components/explorer-link//Explorer';
 import { ExplorerLinkType } from '../components/explorer-link/ExplorerLinkType';
-import { activeAccountSelector } from '../redux/slices/account';
+import { useActiveAddress } from './useActiveAddress';
 import useAppSelector from './useAppSelector';
 
 export type ExplorerLinkConfig =
@@ -36,7 +36,7 @@ function useAddress(linkConfig: ExplorerLinkConfig) {
     const { type } = linkConfig;
     const isAddress = type === ExplorerLinkType.address;
     const isProvidedAddress = isAddress && !linkConfig.useActiveAddress;
-    const activeAddress = useAppSelector(activeAccountSelector);
+    const activeAddress = useActiveAddress();
     return isProvidedAddress ? linkConfig.address : activeAddress;
 }
 

apps/wallet/src/ui/app/pages/home/receipt/index.tsx

@@ -12,12 +12,12 @@ import { SuiIcons } from '_components/icon';
 import Loading from '_components/loading';
 import Overlay from '_components/overlay';
 import ReceiptCard from '_components/receipt-card';
-import { useAppSelector } from '_hooks';
+import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 
 function ReceiptPage() {
     const [searchParams] = useSearchParams();
     const [showModal, setShowModal] = useState(true);
-    const activeAddress = useAppSelector(({ account: { address } }) => address);
+    const activeAddress = useActiveAddress();
 
     // get tx results from url params
     const transactionId = searchParams.get('txdigest');

apps/wallet/src/ui/app/pages/home/tokens/CoinActivityCard.tsx

@@ -7,12 +7,12 @@ import { useMemo } from 'react';
 import { ErrorBoundary } from '_components/error-boundary';
 import Loading from '_components/loading';
 import { TransactionCard } from '_components/transactions-card';
-// import { getEventsSummary } from '_helpers';
-import { useAppSelector, useQueryTransactionsByAddress } from '_hooks';
+import { useQueryTransactionsByAddress } from '_hooks';
 import Alert from '_src/ui/app/components/alert';
+import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 
 export function CoinActivitiesCard({ coinType }: { coinType: string }) {
-    const activeAddress = useAppSelector(({ account: { address } }) => address);
+    const activeAddress = useActiveAddress();
     const {
         data: txns,
         isLoading,

apps/wallet/src/ui/app/pages/home/transactions/index.tsx

@@ -8,12 +8,13 @@ import { ErrorBoundary } from '_components/error-boundary';
 import Loading from '_components/loading';
 import { TransactionCard } from '_components/transactions-card';
 import { NoActivityCard } from '_components/transactions-card/NoActivityCard';
-import { useAppSelector, useQueryTransactionsByAddress } from '_hooks';
+import { useQueryTransactionsByAddress } from '_hooks';
 import Alert from '_src/ui/app/components/alert';
+import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 import PageTitle from '_src/ui/app/shared/PageTitle';
 
 function TransactionsPage() {
-    const activeAddress = useAppSelector(({ account: { address } }) => address);
+    const activeAddress = useActiveAddress();
     const {
         data: txns,
         isLoading,

apps/wallet/src/ui/app/pages/home/transfer-coin/PreviewTransfer.tsx

@@ -8,8 +8,8 @@ import { IconTooltip } from '_app/shared/tooltip';
 import { TxnAddress } from '_components/receipt-card/TxnAddress';
 import { TxnAmount } from '_components/receipt-card/TxnAmount';
 import { parseAmount } from '_helpers';
-import { useAppSelector } from '_hooks';
 import { GAS_SYMBOL, GAS_TYPE_ARG } from '_redux/slices/sui-objects/Coin';
+import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 
 export type PreviewTransferProps = {
     coinType: string;
@@ -26,7 +26,7 @@ export function PreviewTransfer({
     amount,
     approximation,
 }: PreviewTransferProps) {
-    const accountAddress = useAppSelector(({ account }) => account.address);
+    const accountAddress = useActiveAddress();
     const [decimals] = useCoinDecimals(coinType);
     const amountWithoutDecimals = parseAmount(amount, decimals);
 

apps/wallet/src/ui/app/pages/site-connect/index.tsx

@@ -9,6 +9,7 @@ import { useParams } from 'react-router-dom';
 import { DAppPermissionsList } from '../../components/DAppPermissionsList';
 import { SummaryCard } from '../../components/SummaryCard';
 import { WalletListSelect } from '../../components/WalletListSelect';
+import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { PageMainLayoutTitle } from '../../shared/page-main-layout/PageMainLayoutTitle';
 import { Text } from '../../shared/text';
 import Loading from '_components/loading';
@@ -39,10 +40,10 @@ function SiteConnectPage() {
     );
     const dispatch = useAppDispatch();
     const permissionRequest = useAppSelector(permissionSelector);
-    const activeAccount = useAppSelector(({ account }) => account.address);
+    const activeAddress = useActiveAddress();
     const isMultiAccountEnabled = useFeature(FEATURES.WALLET_MULTI_ACCOUNTS).on;
     const [accountsToConnect, setAccountsToConnect] = useState<SuiAddress[]>(
-        () => (activeAccount ? [activeAccount] : [])
+        () => (activeAddress ? [activeAddress] : [])
     );
     const handleOnSubmit = useCallback(
         (allowed: boolean) => {
@@ -156,8 +157,8 @@ function SiteConnectPage() {
                                         variant="body"
                                         weight="semibold"
                                     >
-                                        {activeAccount
-                                            ? formatAddress(activeAccount)
+                                        {activeAddress
+                                            ? formatAddress(activeAddress)
                                             : null}
                                     </Text>
                                 }

apps/wallet/src/ui/app/redux/slices/account/index.ts

@@ -1,6 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import { type SuiAddress } from '@mysten/sui.js';
 import {
     createAsyncThunk,
     createEntityAdapter,
@@ -13,7 +14,6 @@ import {
     type SerializedAccount,
 } from '_src/background/keyring/Account';
 
-import type { SuiAddress } from '@mysten/sui.js';
 import type { PayloadAction, Reducer } from '@reduxjs/toolkit';
 import type { KeyringPayload } from '_payloads/keyring';
 import type { RootState } from '_redux/RootReducer';
@@ -102,9 +102,6 @@ const accountSlice = createSlice({
     name: 'account',
     initialState,
     reducers: {
-        setAddress: (state, action: PayloadAction<string | null>) => {
-            state.address = action.payload;
-        },
         setKeyringStatus: (
             state,
             {
@@ -115,7 +112,7 @@ const accountSlice = createSlice({
         ) => {
             state.isLocked = payload.isLocked;
             state.isInitialized = payload.isInitialized;
-            state.address = payload.activeAddress || null; // is already normalized
+            state.address = payload.activeAddress; // is already normalized
             accountsAdapter.setAll(state, payload.accounts);
         },
     },
@@ -133,7 +130,7 @@ const accountSlice = createSlice({
             }),
 });
 
-export const { setAddress, setKeyringStatus } = accountSlice.actions;
+export const { setKeyringStatus } = accountSlice.actions;
 
 export const accountsAdapterSelectors = accountsAdapter.getSelectors(
     (state: RootState) => state.account
@@ -142,5 +139,16 @@ export const accountsAdapterSelectors = accountsAdapter.getSelectors(
 const reducer: Reducer<typeof initialState> = accountSlice.reducer;
 export default reducer;
 
-export const activeAccountSelector = ({ account }: RootState) =>
+export const activeAccountSelector = (state: RootState) => {
+    const {
+        account: { address },
+    } = state;
+
+    if (address) {
+        return accountsAdapterSelectors.selectById(state, address);
+    }
+    return null;
+};
+
+export const activeAddressSelector = ({ account }: RootState) =>
     account.address;

apps/wallet/src/ui/app/redux/slices/permissions/index.ts

@@ -8,7 +8,7 @@ import {
     createSlice,
 } from '@reduxjs/toolkit';
 
-import { activeAccountSelector } from '../account';
+import { activeAddressSelector } from '../account';
 
 import type { SuiAddress } from '@mysten/sui.js';
 import type { PayloadAction } from '@reduxjs/toolkit';
@@ -83,8 +83,8 @@ export function createDappStatusSelector(origin: string | null) {
     }
     return createSelector(
         permissionsSelectors.selectAll,
-        activeAccountSelector,
-        (permissions, activeAccount) => {
+        activeAddressSelector,
+        (permissions, activeAddress) => {
             const originPermission = permissions.find(
                 (aPermission) => aPermission.origin === origin
             );
@@ -93,8 +93,8 @@ export function createDappStatusSelector(origin: string | null) {
             }
             return (
                 originPermission.allowed &&
-                activeAccount &&
-                originPermission.accounts.includes(activeAccount)
+                activeAddress &&
+                originPermission.accounts.includes(activeAddress)
             );
         }
     );

apps/wallet/src/ui/app/shared/faucet/useFaucetMutation.ts

@@ -4,11 +4,11 @@
 import { useRpcClient } from '@mysten/core';
 import { useIsMutating, useMutation } from '@tanstack/react-query';
 
-import useAppSelector from '../../hooks/useAppSelector';
+import { useActiveAddress } from '../../hooks/useActiveAddress';
 
 export function useFaucetMutation() {
     const api = useRpcClient();
-    const address = useAppSelector(({ account: { address } }) => address);
+    const address = useActiveAddress();
     const mutationKey = ['faucet-request-tokens', address];
     const mutation = useMutation({
         mutationKey,

apps/wallet/src/ui/app/staking/delegation-detail/DelegationDetailCard.tsx

@@ -4,13 +4,13 @@
 import { useFeature } from '@growthbook/growthbook-react';
 import { useMemo } from 'react';
 
+import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { Heading } from '../../shared/heading';
 import { calculateAPY } from '../calculateAPY';
 import { getDelegationDataByStakeId } from '../getDelegationByStakeId';
 import { StakeAmount } from '../home/StakeAmount';
 import { useGetDelegatedStake } from '../useGetDelegatedStake';
 import { useSystemState } from '../useSystemState';
-import { useActiveAddress } from '_app/hooks/useActiveAddress';
 import BottomMenuLayout, { Content } from '_app/shared/bottom-menu-layout';
 import Button from '_app/shared/button';
 import { Card } from '_app/shared/card';

apps/wallet/src/ui/app/staking/stake/ValidatorFormDetail.tsx

@@ -4,6 +4,7 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { calculateAPY } from '../calculateAPY';
 import { calculateStakeShare } from '../calculateStakeShare';
 import { getStakeSuiBySuiId } from '../getStakeSuiBySuiId';
@@ -15,7 +16,6 @@ import { ValidatorLogo } from '../validators/ValidatorLogo';
 import { Card } from '_app/shared/card';
 import Alert from '_components/alert';
 import LoadingIndicator from '_components/loading/LoadingIndicator';
-import { useAppSelector } from '_hooks';
 import { Text } from '_src/ui/app/shared/text';
 import { IconTooltip } from '_src/ui/app/shared/tooltip';
 
@@ -28,7 +28,7 @@ export function ValidatorFormDetail({
     validatorAddress,
     unstake,
 }: ValidatorFormDetailProps) {
-    const accountAddress = useAppSelector(({ account }) => account.address);
+    const accountAddress = useActiveAddress();
 
     const [searchParams] = useSearchParams();
     const stakeIdParams = searchParams.get('staked');

apps/wallet/src/ui/app/staking/validators/ValidatorsCard.tsx

@@ -4,6 +4,7 @@
 import { useFeature } from '@growthbook/growthbook-react';
 import { useMemo } from 'react';
 
+import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { getAllStakeSui } from '../getAllStakeSui';
 import { StakeAmount } from '../home/StakeAmount';
 import { StakeCard } from '../home/StakedCard';
@@ -19,11 +20,10 @@ import { Text } from '_app/shared/text';
 import Alert from '_components/alert';
 import Icon, { SuiIcons } from '_components/icon';
 import LoadingIndicator from '_components/loading/LoadingIndicator';
-import { useAppSelector } from '_hooks';
 import { FEATURES } from '_src/shared/experimentation/features';
 
 export function ValidatorsCard() {
-    const accountAddress = useAppSelector(({ account }) => account.address);
+    const accountAddress = useActiveAddress();
     const {
         data: delegatedStake,
         isLoading,

apps/wallet/src/ui/app/staking/validators/index.tsx

@@ -4,18 +4,18 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { useActiveAddress } from '../../hooks/useActiveAddress';
 import { useGetDelegatedStake } from '../useGetDelegatedStake';
 import { SelectValidatorCard } from './SelectValidatorCard';
 import { ValidatorsCard } from './ValidatorsCard';
 import Alert from '_components/alert';
 import { SuiIcons } from '_components/icon';
 import Loading from '_components/loading';
 import Overlay from '_components/overlay';
-import { useAppSelector } from '_hooks';
 
 export function Validators() {
     const [showModal, setShowModal] = useState(true);
-    const accountAddress = useAppSelector(({ account }) => account.address);
+    const accountAddress = useActiveAddress();
     const {
         data: stakedValidators,
         isLoading,