Skip to content

Commit

Permalink
fix(ui): show connection restoring process
Browse files Browse the repository at this point in the history
  • Loading branch information
@thekiba
thekiba committed Apr 18, 2024
1 parent 71f287c commit 3297c6d
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 75 deletions.
163 changes: 89 additions & 74 deletions packages/ui/src/app/views/account-button/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import {
DropdownButtonStyled,
DropdownContainerStyled,
DropdownStyled,
LoaderButtonStyled,
LoaderIconStyled,
NotificationsStyled
} from './style';
import { Dynamic, Portal } from 'solid-js/web';
Expand All @@ -26,6 +28,7 @@ export const AccountButton: Component<AccountButtonProps> = () => {
const tonConnectUI = useContext(TonConnectUiContext)!;
const [isOpened, setIsOpened] = createSignal(false);
const [account, setAccount] = createSignal<Account | null>(connector.account);
const [restoringProcess, setRestoringProcess] = createSignal<boolean>(true);

let dropDownRef: HTMLDivElement | undefined;

Expand All @@ -50,14 +53,19 @@ export const AccountButton: Component<AccountButtonProps> = () => {
return '';
};

// TODO: implement restoring process
tonConnectUI.connectionRestored.then(() => setRestoringProcess(false));

const unsubscribe = connector.onStatusChange(wallet => {
if (!wallet) {
setIsOpened(false);
setAccount(null);
setRestoringProcess(false);
return;
}

setAccount(wallet.account);
setRestoringProcess(false);
});

const onClick = (e: Event): void | boolean => {
Expand All @@ -83,87 +91,94 @@ export const AccountButton: Component<AccountButtonProps> = () => {

return (
<Dynamic component={globalStylesTag}>
<Show when={!account()}>
<AccountButtonStyled
onClick={() => tonConnectUI.openModal()}
data-tc-connect-button="true"
scale="s"
>
<TonIcon fill={theme.colors.connectButton.foreground} />
<Text
translationKey="button.connectWallet"
fontSize="15px"
lineHeight="18px"
fontWeight="590"
color={theme.colors.connectButton.foreground}
>
Connect wallet
</Text>
</AccountButtonStyled>
<Show when={restoringProcess()}>
<LoaderButtonStyled disabled={true} data-tc-connect-button-loading="true">
<LoaderIconStyled />
</LoaderButtonStyled>
</Show>
<Show when={account()}>
<DropdownContainerStyled>
<DropdownButtonStyled
onClick={() => setIsOpened(v => !v)}
ref={setAnchor}
data-tc-dropdown-button="true"
<Show when={!restoringProcess()}>
<Show when={!account()}>
<AccountButtonStyled
onClick={() => tonConnectUI.openModal()}
data-tc-connect-button="true"
scale="s"
>
<Text fontSize="15px" fontWeight="590" lineHeight="18px">
{normalizedAddress()}
<TonIcon fill={theme.colors.connectButton.foreground} />
<Text
translationKey="button.connectWallet"
fontSize="15px"
lineHeight="18px"
fontWeight="590"
color={theme.colors.connectButton.foreground}
>
Connect wallet
</Text>
<ArrowIcon direction="bottom" />
</DropdownButtonStyled>
<Portal>
<tc-root
ref={setFloating}
style={{
position: position.strategy,
top: `${position.y ?? 0}px`,
left: `${position.x ?? 0}px`,
'z-index': 999
}}
data-tc-dropdown-container="true"
</AccountButtonStyled>
</Show>
<Show when={account()}>
<DropdownContainerStyled>
<DropdownButtonStyled
onClick={() => setIsOpened(v => !v)}
ref={setAnchor}
data-tc-dropdown-button="true"
scale="s"
>
<Transition
onBeforeEnter={el => {
animate(
el,
[
{ opacity: 0, transform: 'translateY(-8px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
{
duration: 150
}
);
}}
onExit={(el, done) => {
const a = animate(
el,
[
{ opacity: 1, transform: 'translateY(0)' },
{ opacity: 0, transform: 'translateY(-8px)' }
],
{
duration: 150
}
);
a.finished.then(done);
<Text fontSize="15px" fontWeight="590" lineHeight="18px">
{normalizedAddress()}
</Text>
<ArrowIcon direction="bottom" />
</DropdownButtonStyled>
<Portal>
<tc-root
ref={setFloating}
style={{
position: position.strategy,
top: `${position.y ?? 0}px`,
left: `${position.x ?? 0}px`,
'z-index': 999
}}
data-tc-dropdown-container="true"
>
<Show when={isOpened()}>
<DropdownStyled
hidden={!isOpened()}
onClose={() => setIsOpened(false)}
ref={dropDownRef}
/>
</Show>
</Transition>
<NotificationsStyled />
</tc-root>
</Portal>
</DropdownContainerStyled>
<Transition
onBeforeEnter={el => {
animate(
el,
[
{ opacity: 0, transform: 'translateY(-8px)' },
{ opacity: 1, transform: 'translateY(0)' }
],
{
duration: 150
}
);
}}
onExit={(el, done) => {
const a = animate(
el,
[
{ opacity: 1, transform: 'translateY(0)' },
{ opacity: 0, transform: 'translateY(-8px)' }
],
{
duration: 150
}
);
a.finished.then(done);
}}
>
<Show when={isOpened()}>
<DropdownStyled
hidden={!isOpened()}
onClose={() => setIsOpened(false)}
ref={dropDownRef}
/>
</Show>
</Transition>
<NotificationsStyled />
</tc-root>
</Portal>
</DropdownContainerStyled>
</Show>
</Show>
</Dynamic>
);
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/ton-connect-ui.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ export class TonConnectUI {
private readonly transactionModal: TransactionModalManager;

/**
* Promise that resolves after end of th connection restoring process (promise will fire after `onStatusChange`, so you can get actual information about wallet and session after when promise resolved).
* Promise that resolves after end of th connection restoring process (promise will fire after `onStatusChange`,
* so you can get actual information about wallet and session after when promise resolved).
* Resolved value `true`/`false` indicates if the session was restored successfully.
*/
public readonly connectionRestored = Promise.resolve(false);
Expand Down

0 comments on commit 3297c6d

Please sign in to comment.