feat: add sign gnosis loading (#2467)

* feat: add sign gnosis loading * fix: selected style --------- Co-authored-by: vvvvvv1vvvvvv <[email protected]>
RabbyHub · Aug 9, 2024 · c38be89 · c38be89
1 parent f1db407
commit c38be89
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/src/ui/views/Approval/components/FooterBar/ActionsContainer.tsx b/src/ui/views/Approval/components/FooterBar/ActionsContainer.tsx
@@ -19,6 +19,7 @@ export interface Props {
   gasLess?: boolean;
   gasLessThemeColor?: string;
   isGasNotEnough?: boolean;
+  isSubmitting?: boolean;
 }
 
 export const ActionsContainer: React.FC<Pick<Props, 'onCancel'>> = ({

diff --git a/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx b/src/ui/views/Approval/components/FooterBar/SubmitActions.tsx
@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { ReactComponent as IconClose } from 'ui/assets/close-16-cc.svg';
 import { GasLessAnimatedWrapper } from './GasLessComponents';
 import styled from 'styled-components';
+import { LoadingOutlined } from '@ant-design/icons';
 
 const ButtonStyled = styled(Button)`
   &:hover {
@@ -22,6 +23,7 @@ export const SubmitActions: React.FC<Props> = ({
   gasLess,
   gasLessThemeColor,
   isGasNotEnough,
+  isSubmitting,
 }) => {
   const { t } = useTranslation();
   const [isSign, setIsSign] = React.useState(false);
@@ -52,17 +54,24 @@ export const SubmitActions: React.FC<Props> = ({
             'before:bg-[#FFFFFF1A]',
             'before:h-[32px] before:w-1',
             'hover:before:hidden',
-            'overflow-hidden'
+            'overflow-hidden',
+            isSubmitting ? 'opacity-70 pointer-events-none' : ''
           )}
         >
           <button
             className={clsx(
               'hover:bg-[#00000033]',
               'w-[184px] h-full',
-              'font-medium'
+              'font-medium',
+              isSubmitting ? 'flex items-center justify-center gap-[8px]' : ''
             )}
             onClick={handleClickConfirm}
           >
+            {isSubmitting ? (
+              <div className="text-[14px]">
+                <LoadingOutlined className="block" />
+              </div>
+            ) : null}
             {t('global.confirmButton')}
           </button>
           <button

diff --git a/src/ui/views/Approval/components/SignTx.tsx b/src/ui/views/Approval/components/SignTx.tsx
@@ -44,7 +44,7 @@ import { matomoRequestEvent } from '@/utils/matomo-request';
 import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
 import { useScroll } from 'react-use';
-import { useSize, useDebounceFn } from 'ahooks';
+import { useSize, useDebounceFn, useRequest } from 'ahooks';
 import IconGnosis from 'ui/assets/walletlogo/safe.svg';
 import {
   useApproval,
@@ -968,6 +968,13 @@ const SignTx = ({ params, origin }: SignTxProps) => {
     return;
   };
 
+  const {
+    loading: isSubmittingGnosis,
+    runAsync: runHandleGnosisSign,
+  } = useRequest(handleGnosisSign, {
+    manual: true,
+  });
+
   const handleCoboArugsConfirm = async (account: Account) => {
     if (!coboArgusInfo) return;
 
@@ -1876,7 +1883,7 @@ const SignTx = ({ params, origin }: SignTxProps) => {
               onCancel={handleCancel}
               // securityLevel={securityLevel}
               // hasUnProcessSecurityResult={hasUnProcessSecurityResult}
-              onSubmit={handleGnosisSign}
+              onSubmit={runHandleGnosisSign}
               enableTooltip={
                 currentGnosisAdmin?.type === KEYRING_TYPE.WatchAddressKeyring
               }
@@ -1889,6 +1896,7 @@ const SignTx = ({ params, origin }: SignTxProps) => {
               disabledProcess={
                 currentGnosisAdmin?.type === KEYRING_TYPE.WatchAddressKeyring
               }
+              isSubmitting={isSubmittingGnosis}
               isTestnet={chain?.isTestnet}
               onIgnoreAllRules={handleIgnoreAllRules}
             />

diff --git a/src/ui/views/Approval/components/TxComponents/DrawerAddressItem.tsx b/src/ui/views/Approval/components/TxComponents/DrawerAddressItem.tsx
@@ -51,7 +51,8 @@ export const AddressItem = ({
         'bg-r-neutral-card2',
         disabled
           ? 'cursor-not-allowed opacity-70'
-          : 'hover:border-rabby-blue-default hover:bg-r-blue-light1 cursor-pointer'
+          : 'hover:border-rabby-blue-default hover:bg-r-blue-light1 cursor-pointer',
+        checked && 'border-rabby-blue-default bg-r-blue-light1'
       )}
       onClick={() => {
         if (disabled) {