diff --git a/src/app/features/current-account/current-account-avatar.tsx b/src/app/features/current-account/current-account-avatar.tsx index 8e16991e250..aa4870e2869 100644 --- a/src/app/features/current-account/current-account-avatar.tsx +++ b/src/app/features/current-account/current-account-avatar.tsx @@ -3,24 +3,27 @@ import { memo } from 'react'; import { CircleProps } from 'leather-styles/jsx'; import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names'; -import { useDialogs } from '@app/common/hooks/use-dialogs'; import { AccountAvatar } from '@app/components/account/account-avatar'; import { useCurrentAccountIndex } from '@app/store/accounts/account'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; -export const CurrentAccountAvatar = memo((props: CircleProps) => { +interface CurrentAccountAvatar extends CircleProps { + toggleSwitchAccount(): void; +} +export const CurrentAccountAvatar = memo((props: CurrentAccountAvatar) => { + const { toggleSwitchAccount } = props; const accountIndex = useCurrentAccountIndex(); const accounts = useStacksAccounts(); const currentAccount = accounts[accountIndex] as StacksAccount | undefined; const name = useCurrentAccountDisplayName(); - const { setIsShowingSwitchAccountsState } = useDialogs(); + if (!currentAccount) return null; return ( setIsShowingSwitchAccountsState(true)} + onClick={toggleSwitchAccount} publicKey={currentAccount.stxPublicKey} {...props} /> diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx index 5c2f2608f39..f8cd5c8b29e 100644 --- a/src/app/features/settings/settings.tsx +++ b/src/app/features/settings/settings.tsx @@ -10,7 +10,6 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useKeyActions } from '@app/common/hooks/use-key-actions'; import { useWalletType } from '@app/common/use-wallet-type'; import { openInNewTab, openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab'; -import { SwitchAccountDialog } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog'; import { SignOut } from '@app/features/settings/sign-out/sign-out-confirm'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { useHasLedgerKeys, useLedgerDeviceTargetId } from '@app/store/ledger/ledger.selectors'; @@ -34,9 +33,14 @@ import { ThemeList } from './theme/theme-list'; // on the radix site it says latest version is 2.0.5 but we have 2.0.6? // designs here https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?node-id=10352%3A137700&mode=dev // use this to add in replaced routable dialogs - void analytics.page('view', '/save-secret-key'); -export function Settings({ triggerButton }: { triggerButton: React.ReactNode }) { + +interface SettingsProps { + triggerButton: React.ReactNode; + toggleSwitchAccount(): void; +} + +export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) { const [showSignOut, setShowSignOut] = useState(false); - const [showSwitchAccount, setShowSwitchAccount] = useState(false); const hasGeneratedWallet = !!useCurrentStacksAccount(); const { lockWallet } = useKeyActions(); @@ -52,10 +56,6 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode }) return ( <> - setShowSwitchAccount(false)} - /> {triggerButton} @@ -69,7 +69,7 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode }) {hasGeneratedWallet && ( setShowSwitchAccount(!showSwitchAccount)} + onClick={toggleSwitchAccount} > } textStyle="label.02"> Switch account diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx index 5df20477640..df90c363f38 100644 --- a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx +++ b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx @@ -1,4 +1,4 @@ -import { memo } from 'react'; +import { memo, useState } from 'react'; import { Navigate } from 'react-router-dom'; import { STXTransferPayload, TransactionTypes } from '@stacks/connect'; @@ -8,9 +8,9 @@ import { RouteUrls } from '@shared/route-urls'; import { closeWindow } from '@shared/utils'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useDialogs } from '@app/common/hooks/use-dialogs'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { stacksValue } from '@app/common/stacks-utils'; +import { SwitchAccountDialog } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog'; import { ErrorMessage } from '@app/features/stacks-transaction-request/transaction-error/error-message'; import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useCurrentNetworkState } from '@app/store/networks/networks.hooks'; @@ -24,7 +24,7 @@ interface InsufficientFundsActionButtonsProps { } function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionButtonsProps) { const analytics = useAnalytics(); - const { setIsShowingSwitchAccountsState } = useDialogs(); + const [showSwitchAccount, setShowSwitchAccount] = useState(false); const onGetStx = () => { void analytics.track(eventName); @@ -34,8 +34,12 @@ function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionBu return ( <> + setShowSwitchAccount(false)} + /> - diff --git a/src/app/pages/home/components/account-area.tsx b/src/app/pages/home/components/account-area.tsx deleted file mode 100644 index a1167a73484..00000000000 --- a/src/app/pages/home/components/account-area.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { HStack, Stack } from 'leather-styles/jsx'; - -import { CurrentAccountAvatar } from '@app/features/current-account/current-account-avatar'; -import { CurrentAccountName } from '@app/features/current-account/current-account-name'; -import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; -import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; - -import { AccountTotalBalance } from '../../../components/account-total-balance'; - -export function CurrentAccount() { - const currentAccount = useCurrentStacksAccount(); - const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); - if (!currentAccount) return null; - - return ( - - - - - - - - - - ); -} diff --git a/src/app/pages/home/components/account-info-card.tsx b/src/app/pages/home/components/account-info-card.tsx deleted file mode 100644 index 35260a71816..00000000000 --- a/src/app/pages/home/components/account-info-card.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { SettingsSelectors } from '@tests/selectors/settings.selectors'; -import { Box, Divider, Flex, styled } from 'leather-styles/jsx'; - -import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names'; -import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance'; -import { useDialogs } from '@app/common/hooks/use-dialogs'; -import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; -import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { ChevronDownIcon } from '@app/ui/components/icons/chevron-down-icon'; -import { Link } from '@app/ui/components/link/link'; - -import { AccountActions } from './account-actions'; - -export function AccountInfoCard() { - const name = useCurrentAccountDisplayName(); - - const account = useCurrentStacksAccount(); - const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); - const totalBalance = useTotalBalance({ btcAddress, stxAddress: account?.address || '' }); - - const { setIsShowingSwitchAccountsState } = useDialogs(); - - return ( - - setIsShowingSwitchAccountsState(true)} - > - - - {name} - - - - - - - - - {totalBalance?.totalUsdBalance} - - - - - - - ); -} diff --git a/src/app/ui/components/layout/card/account/account.card.stories.tsx b/src/app/ui/components/layout/card/account/account.card.stories.tsx index c660ce9dadc..63b4d42ff7a 100644 --- a/src/app/ui/components/layout/card/account/account.card.stories.tsx +++ b/src/app/ui/components/layout/card/account/account.card.stories.tsx @@ -19,7 +19,7 @@ export default meta; export function AccountCard() { return ( - null}> + } label="Send" /> } label="Receive" /> diff --git a/src/app/ui/components/layout/page/home.layout.stories.tsx b/src/app/ui/components/layout/page/home.layout.stories.tsx index 83b636626dd..61405889f0d 100644 --- a/src/app/ui/components/layout/page/home.layout.stories.tsx +++ b/src/app/ui/components/layout/page/home.layout.stories.tsx @@ -25,7 +25,6 @@ export function HomeLayout() { null} accountActions={ // TODO don't repeat this, compose story