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 {