From a3a4287ebe5af5d490f084a92f62dbe1fd13e052 Mon Sep 17 00:00:00 2001 From: S2kael Date: Mon, 18 Nov 2024 16:25:05 +0700 Subject: [PATCH] [WC] Update waiting modal UI --- .../services/wallet-connect-service/index.ts | 19 +++-- .../WalletConnectWaitingSigningModal.tsx | 75 +++++++++++++++---- .../src/contexts/WalletConnectContext.tsx | 5 +- 3 files changed, 76 insertions(+), 23 deletions(-) diff --git a/packages/extension-base/src/services/wallet-connect-service/index.ts b/packages/extension-base/src/services/wallet-connect-service/index.ts index 304aca6b06..f20546bc38 100644 --- a/packages/extension-base/src/services/wallet-connect-service/index.ts +++ b/packages/extension-base/src/services/wallet-connect-service/index.ts @@ -7,7 +7,7 @@ import RequestService from '@subwallet/extension-base/services/request-service'; import Eip155RequestHandler from '@subwallet/extension-base/services/wallet-connect-service/handler/Eip155RequestHandler'; import { SWStorage } from '@subwallet/extension-base/storage'; import { ResponseWalletConnectCreateSession, SessionConnectStatus } from '@subwallet/extension-base/types'; -import { createPromiseHandler, PromiseHandler } from '@subwallet/extension-base/utils'; +import { createPromiseHandler, PromiseHandler, wait } from '@subwallet/extension-base/utils'; import { getId } from '@subwallet/extension-base/utils/getId'; import { IKeyValueStorage } from '@walletconnect/keyvaluestorage'; import SignClient from '@walletconnect/sign-client'; @@ -468,12 +468,19 @@ export default class WalletConnectService { } public async disconnect (topic: string) { - await this.#client?.disconnect({ - topic: topic, - reason: getSdkError('USER_DISCONNECTED') - }); + try { + await this.#client?.disconnect({ + topic: topic, + reason: getSdkError('USER_DISCONNECTED') + }); + await wait(300); + this.#updateSessions(); + } catch (e) { + await wait(300); + this.#updateSessions(); - this.#updateSessions(); + throw e; + } } private findMethodsMissing (methodRequire: (POLKADOT_SIGNING_METHODS | EIP155_SIGNING_METHODS) [], methods: string[]) { diff --git a/packages/extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx b/packages/extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx index b5093111b2..00314f2968 100644 --- a/packages/extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx +++ b/packages/extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx @@ -2,51 +2,96 @@ // SPDX-License-Identifier: Apache-2.0 import { WALLET_CONNECT_WAITING_SIGNING_MODAL } from '@subwallet/extension-koni-ui/constants'; -import { ThemeProps } from '@subwallet/extension-koni-ui/types'; -import { SwModal } from '@subwallet/react-ui'; +import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types'; +import { toShort } from '@subwallet/extension-koni-ui/utils'; +import { Button, Field, Icon, PageIcon, SwModal } from '@subwallet/react-ui'; import CN from 'classnames'; -import React from 'react'; +import { CheckCircle } from 'phosphor-react'; +import React, { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import styled from 'styled-components'; +import styled, { useTheme } from 'styled-components'; -type Props = ThemeProps; +interface Props extends ThemeProps { + address: string; +} const modalId = WALLET_CONNECT_WAITING_SIGNING_MODAL; function Component (props: Props): React.ReactElement { - const { className = '' } = props; + const { address, className = '' } = props; const { t } = useTranslation(); + const { token } = useTheme() as Theme; - // TODO: Update UI + const modalFooter = useMemo(() => { + return ( + <> + + + ); + }, [t]); return (
+
+ +
- {t("You've a request to sign with your wallet")}: + {t('Open your wallet and sign the request with this account')}
+ + )} + />
); } -export const WalletConnectWaitingSigningModal = styled(Component)(({ theme: { extendToken, token } }: Props) => { +export const WalletConnectWaitingSigningModal = styled(Component)(({ theme: { token } }: Props) => { return ({ '.ant-sw-modal-body': { paddingLeft: token.paddingXS, - paddingRight: token.paddingXS + paddingRight: token.paddingXS, + paddingBottom: 0 + }, + + '.ant-sw-modal-footer': { + borderTop: 0 }, '.__content-area': { - backgroundColor: token.colorPrimary, + background: 'linear-gradient(117deg, #FFD8E6 9.05%, #BCEBFF 91.43%)', borderRadius: 24, display: 'flex', gap: token.size, @@ -57,9 +102,9 @@ export const WalletConnectWaitingSigningModal = styled(Component)(({ them }, '.__congratulation-text': { - fontSize: token.fontSizeLG, - fontWeight: token.headingFontWeight, - lineHeight: token.lineHeightLG, + fontSize: token.fontSizeSM, + fontWeight: token.bodyFontWeight, + lineHeight: token.lineHeightSM, color: token.colorTextDark1 } }); diff --git a/packages/extension-koni-ui/src/contexts/WalletConnectContext.tsx b/packages/extension-koni-ui/src/contexts/WalletConnectContext.tsx index bef10595e0..233ebec617 100644 --- a/packages/extension-koni-ui/src/contexts/WalletConnectContext.tsx +++ b/packages/extension-koni-ui/src/contexts/WalletConnectContext.tsx @@ -100,7 +100,6 @@ export const WalletConnectContextProvider = ({ children }: Props) => { size: 'sm' } }), [t, wcAccount?.address]); - const requireAccountModalProps = useMemo((): Partial => ({ id: requireModal, className: CN('confirm-modal-rework', 'modal-resize-content', 'modal-revert-header'), @@ -276,7 +275,9 @@ export const WalletConnectContextProvider = ({ children }: Props) => { address={wcAccount?.address || ''} callback={onSuccessCb} /> - + ); };