[WC] Update waiting modal UI

Koniverse · Nov 18, 2024 · a3a4287 · a3a4287
1 parent 97b8cf9
commit a3a4287
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 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
@@ -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/...extension-koni-ui/src/components/Modal/WalletConnect/WalletConnectWaitingSigningModal.tsx b/...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<Props> {
-  const { className = '' } = props;
+  const { address, className = '' } = props;
 
   const { t } = useTranslation();
+  const { token } = useTheme() as Theme;
 
-  // TODO: Update UI
+  const modalFooter = useMemo(() => {
+    return (
+      <>
+        <Button
+          block={true}
+          loading={true}
+          shape={'round'}
+          size={'sm'}
+        >
+          {t('Signing')}
+        </Button>
+      </>
+    );
+  }, [t]);
 
   return (
     <SwModal
       className={CN(className, '-light-theme')}
       closable={false}
       destroyOnClose={true}
+      footer={modalFooter}
       id={modalId}
       maskClosable={false}
-      title={t('Success')}
+      title={t('Sign with your wallet')}
     >
       <div className='__content-area'>
+        <div className='page-icon-overide'>
+          <PageIcon
+            color='#000'
+            iconProps={{
+              phosphorIcon: CheckCircle,
+              weight: 'fill'
+            }}
+          />
+        </div>
         <div className='__congratulation-text'>
-          {t("You've a request to sign with your wallet")}:
+          {t('Open your wallet and sign the request with this account')}
         </div>
+        <Field
+          className={'address-field'}
+          content={toShort(address, 10, 16)}
+          suffix={(
+            <Icon
+              iconColor={token.colorSuccess}
+              phosphorIcon={CheckCircle}
+              size='sm'
+              weight='fill'
+            />
+          )}
+        />
       </div>
     </SwModal>
   );
 }
 
-export const WalletConnectWaitingSigningModal = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
+export const WalletConnectWaitingSigningModal = styled(Component)<Props>(({ 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)<Props>(({ 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
@@ -100,7 +100,6 @@ export const WalletConnectContextProvider = ({ children }: Props) => {
       size: 'sm'
     }
   }), [t, wcAccount?.address]);
-
   const requireAccountModalProps = useMemo((): Partial<SwModalFuncProps> => ({
     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}
       />
-      <WalletConnectWaitingSigningModal />
+      <WalletConnectWaitingSigningModal
+        address={wcAccount?.address || ''}
+      />
     </WalletConnectContext.Provider>
   );
 };