diff --git a/src/app/common/focus-tab.ts b/src/app/common/focus-tab.ts new file mode 100644 index 00000000000..09f74c91964 --- /dev/null +++ b/src/app/common/focus-tab.ts @@ -0,0 +1,10 @@ +export function focusTab(tabId: number | null) { + chrome.tabs.update(tabId ?? 0, { active: true }); +} + +export function focusTabAndWindow(tabId: number | null) { + chrome.tabs.update(tabId ?? 0, { active: true }, tab => { + if (!tab) return; + chrome.windows.update(tab.windowId, { focused: true }); + }); +} diff --git a/src/app/features/current-account/current-accout-cell.tsx b/src/app/features/current-account/current-accout-cell.tsx new file mode 100644 index 00000000000..697e1a3d3c7 --- /dev/null +++ b/src/app/features/current-account/current-accout-cell.tsx @@ -0,0 +1,48 @@ +import { Box } from 'leather-styles/jsx'; + +import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names'; +import { AccountTotalBalance } from '@app/components/account-total-balance'; +import { AcccountAddresses } from '@app/components/account/account-addresses'; +import { AccountListItemLayout } from '@app/components/account/account-list-item.layout'; +import { AccountNameLayout } from '@app/components/account/account-name'; +import { useCurrentAccountIndex } from '@app/store/accounts/account'; +import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; +import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { AccountAvatarItem } from '@app/ui/components/account/account-avatar/account-avatar-item'; + +interface CurrentAccountCellProps { + onSelectAccount(): void; +} + +export function CurrentAccountCell({ onSelectAccount }: CurrentAccountCellProps) { + const index = useCurrentAccountIndex(); + const stacksAccounts = useStacksAccounts(); + const stxAddress = stacksAccounts[index]?.address || ''; + const { data: name = '' } = useAccountDisplayName({ address: stxAddress, index }); + const bitcoinSigner = useNativeSegwitSigner(index); + const bitcoinAddress = bitcoinSigner?.(0).address || ''; + return ( + } + accountName={{name}} + avatar={ + + } + balanceLabel={ + // Hack to center element without adjusting AccountListItemLayout + + + + } + index={index} + isLoading={false} + isSelected={false} + onSelectAccount={() => onSelectAccount()} + /> + ); +} diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx index 2b0eccc8e10..304df60f288 100644 --- a/src/app/pages/choose-account/choose-account.tsx +++ b/src/app/pages/choose-account/choose-account.tsx @@ -1,53 +1,39 @@ -import { useEffect } from 'react'; -import { Outlet } from 'react-router-dom'; - -import { Flex, Stack, styled } from 'leather-styles/jsx'; - -import { LeatherLogomarkIcon } from '@leather.io/ui'; +import { noop } from 'rxjs'; import { closeWindow } from '@shared/utils'; import { useCancelAuthRequest } from '@app/common/authentication/use-cancel-auth-request'; +import { useFinishAuthRequest } from '@app/common/authentication/use-finish-auth-request'; import { useAppDetails } from '@app/common/hooks/auth/use-app-details'; -import { RequesterFlag } from '@app/components/requester-flag'; -import { ChooseAccountsList } from '@app/pages/choose-account/components/accounts'; +import { useOnMount } from '@app/common/hooks/use-on-mount'; +import { useSwitchAccountSheet } from '@app/common/switch-account/use-switch-account-sheet-context'; +import { CurrentAccountCell } from '@app/features/current-account/current-accout-cell'; import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed'; -import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { useCurrentAccountIndex } from '@app/store/accounts/account'; + +import { GetAddressesLayout } from '../rpc-get-addresses/components/get-addresses.layout'; export function ChooseAccount() { const { url } = useAppDetails(); - const accounts = useStacksAccounts(); - const hasConnectedStacksAccounts = accounts.length > 0; - - const cancelAuthentication = useCancelAuthRequest(); + const accountIndex = useCurrentAccountIndex(); + const finishSignIn = useFinishAuthRequest(); + const { toggleSwitchAccount } = useSwitchAccountSheet(); useOnOriginTabClose(() => closeWindow()); + const cancelAuthentication = useCancelAuthRequest(); + const handleUnmount = async () => cancelAuthentication(); + useOnMount(() => window.addEventListener('beforeunload', handleUnmount)); - useEffect(() => { - window.addEventListener('beforeunload', handleUnmount); - return () => window.removeEventListener('beforeunload', handleUnmount); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + if (!url) throw new Error('No app details found'); return ( - <> - - - {url && } - - - - {hasConnectedStacksAccounts - ? 'Choose an account to connect' - : 'No connected accounts found'} - - - - {hasConnectedStacksAccounts && } - - - + await finishSignIn(accountIndex)} + onClickRequestedByLink={noop} + switchAccount={} + /> ); } diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx index 6a40b309560..7575bf585c1 100644 --- a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx +++ b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx @@ -22,7 +22,7 @@ interface GetAddressesLayoutProps { requester: string; switchAccount: ReactNode; onBeforeAnimation?(): void; - onUserApprovesGetAddresses(): void; + onUserApprovesGetAddresses(): void | Promise; onClickRequestedByLink(): void; } export function GetAddressesLayout({ @@ -61,7 +61,7 @@ export function GetAddressesLayout({ }); await checkmarkEnters.start({ scale: 0.5, dur: 0.32 }); await delay(280); - onUserApprovesGetAddresses(); + await onUserApprovesGetAddresses(); await delay(280); await originLogoAnimation.start({ scale: 0, diff --git a/src/app/pages/rpc-get-addresses/rpc-get-addresses.tsx b/src/app/pages/rpc-get-addresses/rpc-get-addresses.tsx index f3b899ca591..6f1e22c51ac 100644 --- a/src/app/pages/rpc-get-addresses/rpc-get-addresses.tsx +++ b/src/app/pages/rpc-get-addresses/rpc-get-addresses.tsx @@ -1,30 +1,14 @@ -import { Box } from 'leather-styles/jsx'; - import { closeWindow } from '@shared/utils'; -import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names'; import { useSwitchAccountSheet } from '@app/common/switch-account/use-switch-account-sheet-context'; -import { AccountTotalBalance } from '@app/components/account-total-balance'; -import { AcccountAddresses } from '@app/components/account/account-addresses'; -import { AccountListItemLayout } from '@app/components/account/account-list-item.layout'; -import { AccountNameLayout } from '@app/components/account/account-name'; +import { CurrentAccountCell } from '@app/features/current-account/current-accout-cell'; import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed'; -import { useCurrentAccountIndex } from '@app/store/accounts/account'; -import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; -import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { AccountAvatarItem } from '@app/ui/components/account/account-avatar/account-avatar-item'; import { GetAddressesLayout } from './components/get-addresses.layout'; import { useGetAddresses } from './use-get-addresses'; export function RpcGetAddresses() { const { focusInitatingTab, origin, onUserApproveGetAddresses } = useGetAddresses(); - const index = useCurrentAccountIndex(); - const stacksAccounts = useStacksAccounts(); - const stxAddress = stacksAccounts[index]?.address || ''; - const { data: name = '' } = useAccountDisplayName({ address: stxAddress, index }); - const bitcoinSigner = useNativeSegwitSigner(index); - const bitcoinAddress = bitcoinSigner?.(0).address || ''; useOnOriginTabClose(() => closeWindow()); @@ -39,30 +23,7 @@ export function RpcGetAddresses() { } - accountName={{name}} - avatar={ - - } - balanceLabel={ - // Hack to center element without adjusting AccountListItemLayout - - - - } - index={0} - isLoading={false} - isSelected={false} - onSelectAccount={() => toggleSwitchAccount()} - /> - } + switchAccount={} onUserApprovesGetAddresses={onUserApproveGetAddresses} /> ); diff --git a/src/app/pages/rpc-get-addresses/use-get-addresses.ts b/src/app/pages/rpc-get-addresses/use-get-addresses.ts index fdb511b599e..f8eeb201a50 100644 --- a/src/app/pages/rpc-get-addresses/use-get-addresses.ts +++ b/src/app/pages/rpc-get-addresses/use-get-addresses.ts @@ -7,6 +7,7 @@ import { logger } from '@shared/logger'; import { makeRpcSuccessResponse } from '@shared/rpc/rpc-methods'; import { analytics } from '@shared/utils/analytics'; +import { focusTab } from '@app/common/focus-tab'; import { useRpcRequestParams } from '@app/common/rpc-helpers'; import { useCurrentAccountNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentAccountTaprootSigner } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks'; @@ -23,10 +24,7 @@ export function useGetAddresses() { function focusInitatingTab() { void analytics.track('user_clicked_requested_by_link', { endpoint: 'getAddresses' }); - chrome.tabs.update(tabId ?? 0, { active: true }, tab => { - if (!tab) return; - chrome.windows.update(tab.windowId, { focused: true }); - }); + focusTab(tabId); } return {