diff --git a/src/ui/components/SignMessageButton/SignMessageButton.tsx b/src/ui/components/SignMessageButton/SignMessageButton.tsx
index 1f27e9c2ae..f1f8ae2195 100644
--- a/src/ui/components/SignMessageButton/SignMessageButton.tsx
+++ b/src/ui/components/SignMessageButton/SignMessageButton.tsx
@@ -31,165 +31,161 @@ export interface SignMsgBtnHandle {
   signTypedData_v4: (params: SignTypedDataParams) => Promise<string>;
 }
 
-export const SignMessageButton = React.forwardRef(
-  function SignTransactionButton(
-    {
-      wallet,
-      children,
-      buttonTitle,
-      buttonKind = 'primary',
-      onClick,
-      holdToSign,
-      ...buttonProps
-    }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
-      wallet: ExternallyOwnedAccount;
-      buttonTitle?: React.ReactNode;
-      buttonKind?: ButtonKind;
-      holdToSign: boolean | null;
-    },
-    ref: React.Ref<SignMsgBtnHandle>
-  ) {
-    const hardwareSignRef = useRef<SignMessageHandle | null>(null);
-
-    const { mutateAsync: personalSignInner, ...personalSignMutationInner } =
-      useMutation({
-        mutationFn: async (params: PersonalSignParams) => {
-          if (isDeviceAccount(wallet)) {
-            const { params: methodParams, ...messageContextParams } = params;
-            const [message] = methodParams;
-            invariant(
-              hardwareSignRef.current,
-              'HardwareSignMessage must be mounted'
-            );
-            const signature = await hardwareSignRef.current.personalSign(
-              message
-            );
-            walletPort.request('registerPersonalSign', {
-              message,
-              address: wallet.address,
-              ...messageContextParams,
-            });
-            return signature;
-          } else {
-            return await walletPort.request('personalSign', params);
-          }
-        },
-      });
+export const SignMessageButton = React.forwardRef(function SignMessageButton(
+  {
+    wallet,
+    children,
+    buttonTitle,
+    buttonKind = 'primary',
+    onClick,
+    holdToSign,
+    ...buttonProps
+  }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    wallet: ExternallyOwnedAccount;
+    buttonTitle?: React.ReactNode;
+    buttonKind?: ButtonKind;
+    holdToSign: boolean | null;
+  },
+  ref: React.Ref<SignMsgBtnHandle>
+) {
+  const hardwareSignRef = useRef<SignMessageHandle | null>(null);
 
-    const { mutateAsync: personalSign, ...personalSignMutation } = useMutation({
+  const { mutateAsync: personalSignInner, ...personalSignMutationInner } =
+    useMutation({
       mutationFn: async (params: PersonalSignParams) => {
-        const result = await personalSignInner(params);
-        if (!isDeviceAccount(wallet) && holdToSign) {
-          wait(500);
-        }
-        return result;
-      },
-    });
-
-    const {
-      mutateAsync: signTypedData_v4Inner,
-      ...signTypedData_v4MutationInner
-    } = useMutation({
-      mutationFn: async (params: SignTypedDataParams) => {
         if (isDeviceAccount(wallet)) {
-          const { typedData, ...messageContextParams } = params;
+          const { params: methodParams, ...messageContextParams } = params;
+          const [message] = methodParams;
           invariant(
             hardwareSignRef.current,
             'HardwareSignMessage must be mounted'
           );
-          const signature = await hardwareSignRef.current.signTypedData_v4(
-            typedData
-          );
-          walletPort.request('registerTypedDataSign', {
-            typedData,
+          const signature = await hardwareSignRef.current.personalSign(message);
+          walletPort.request('registerPersonalSign', {
+            message,
             address: wallet.address,
             ...messageContextParams,
           });
           return signature;
         } else {
-          return await walletPort.request('signTypedData_v4', params);
+          return await walletPort.request('personalSign', params);
         }
       },
     });
 
-    const { mutateAsync: signTypedData_v4, ...signTypedData_v4Mutation } =
-      useMutation({
-        mutationFn: async (params: SignTypedDataParams) => {
-          const result = await signTypedData_v4Inner(params);
-          if (!isDeviceAccount(wallet) && holdToSign) {
-            await wait(500);
-          }
-          return result;
-        },
-      });
+  const { mutateAsync: personalSign, ...personalSignMutation } = useMutation({
+    mutationFn: async (params: PersonalSignParams) => {
+      const result = await personalSignInner(params);
+      if (!isDeviceAccount(wallet) && holdToSign) {
+        await wait(500);
+      }
+      return result;
+    },
+  });
 
-    useImperativeHandle(ref, () => ({ personalSign, signTypedData_v4 }));
+  const {
+    mutateAsync: signTypedData_v4Inner,
+    ...signTypedData_v4MutationInner
+  } = useMutation({
+    mutationFn: async (params: SignTypedDataParams) => {
+      if (isDeviceAccount(wallet)) {
+        const { typedData, ...messageContextParams } = params;
+        invariant(
+          hardwareSignRef.current,
+          'HardwareSignMessage must be mounted'
+        );
+        const signature = await hardwareSignRef.current.signTypedData_v4(
+          typedData
+        );
+        walletPort.request('registerTypedDataSign', {
+          typedData,
+          address: wallet.address,
+          ...messageContextParams,
+        });
+        return signature;
+      } else {
+        return await walletPort.request('signTypedData_v4', params);
+      }
+    },
+  });
+
+  const { mutateAsync: signTypedData_v4, ...signTypedData_v4Mutation } =
+    useMutation({
+      mutationFn: async (params: SignTypedDataParams) => {
+        const result = await signTypedData_v4Inner(params);
+        if (!isDeviceAccount(wallet) && holdToSign) {
+          await wait(500);
+        }
+        return result;
+      },
+    });
 
-    const isLoading =
-      personalSignMutation.isLoading || signTypedData_v4Mutation.isLoading;
-    const isLoadingInner =
-      personalSignMutationInner.isLoading ||
-      signTypedData_v4MutationInner.isLoading;
-    const isSuccess =
-      personalSignMutationInner.isSuccess ||
-      signTypedData_v4MutationInner.isSuccess;
-    const isError =
-      personalSignMutation.isError || signTypedData_v4Mutation.isError;
+  useImperativeHandle(ref, () => ({ personalSign, signTypedData_v4 }));
 
-    const title = buttonTitle || 'Sign';
+  const isLoading =
+    personalSignMutation.isLoading || signTypedData_v4Mutation.isLoading;
+  const isLoadingInner =
+    personalSignMutationInner.isLoading ||
+    signTypedData_v4MutationInner.isLoading;
+  const isSuccess =
+    personalSignMutationInner.isSuccess ||
+    signTypedData_v4MutationInner.isSuccess;
+  const isError =
+    personalSignMutation.isError || signTypedData_v4Mutation.isError;
 
-    return isDeviceAccount(wallet) ? (
-      <HardwareSignMessage
-        ref={hardwareSignRef}
-        derivationPath={wallet.derivationPath}
-        isSigning={isLoading}
-        children={children}
-        buttonTitle={buttonTitle}
-        buttonKind={buttonKind}
-        onClick={onClick}
-        {...buttonProps}
-      />
-    ) : (
-      <WithReadonlyWarningDialog
-        address={wallet.address}
-        onClick={onClick}
-        render={({ handleClick }) =>
-          holdToSign ? (
-            <HoldableButton
-              text={`Hold to ${title}`}
-              successText={
-                <HStack gap={4} alignItems="center">
-                  <CheckIcon
-                    style={{
-                      width: 20,
-                      height: 20,
-                      color: 'var(--positive-500)',
-                    }}
-                  />
-                  <span>Signed</span>
-                </HStack>
-              }
-              submittingText="Sending..."
-              onClick={handleClick}
-              success={isSuccess}
-              submitting={isLoadingInner}
-              disabled={isLoading}
-              error={isError}
-              kind={buttonKind}
-              {...buttonProps}
-            />
-          ) : (
-            <Button
-              disabled={isLoading}
-              onClick={handleClick}
-              kind={buttonKind}
-              {...buttonProps}
-            >
-              {children || (isLoading ? 'Signing...' : title)}
-            </Button>
-          )
-        }
-      />
-    );
-  }
-);
+  const title = buttonTitle || 'Sign';
+
+  return isDeviceAccount(wallet) ? (
+    <HardwareSignMessage
+      ref={hardwareSignRef}
+      derivationPath={wallet.derivationPath}
+      isSigning={isLoading}
+      children={children}
+      buttonTitle={buttonTitle}
+      buttonKind={buttonKind}
+      onClick={onClick}
+      {...buttonProps}
+    />
+  ) : (
+    <WithReadonlyWarningDialog
+      address={wallet.address}
+      onClick={onClick}
+      render={({ handleClick }) =>
+        holdToSign ? (
+          <HoldableButton
+            text={`Hold to ${title}`}
+            successText={
+              <HStack gap={4} alignItems="center">
+                <CheckIcon
+                  style={{
+                    width: 20,
+                    height: 20,
+                    color: 'var(--positive-500)',
+                  }}
+                />
+                <span>Signed</span>
+              </HStack>
+            }
+            submittingText="Sending..."
+            onClick={handleClick}
+            success={isSuccess}
+            submitting={isLoadingInner}
+            disabled={isLoading}
+            error={isError}
+            kind={buttonKind}
+            {...buttonProps}
+          />
+        ) : (
+          <Button
+            disabled={isLoading}
+            onClick={handleClick}
+            kind={buttonKind}
+            {...buttonProps}
+          >
+            {children || (isLoading ? 'Signing...' : title)}
+          </Button>
+        )
+      }
+    />
+  );
+});
diff --git a/src/ui/ui-kit/Button/HoldableButton.tsx b/src/ui/ui-kit/Button/HoldableButton.tsx
index 106675e9c0..0602157f42 100644
--- a/src/ui/ui-kit/Button/HoldableButton.tsx
+++ b/src/ui/ui-kit/Button/HoldableButton.tsx
@@ -77,7 +77,9 @@ const ButtonElement = <As extends ElementType = 'button'>(
   ref: React.Ref<ComponentPropsWithRef<As>['ref']>
 ) => {
   const realButtonRef = useRef<HTMLButtonElement | null>(null);
-  const [innerState, setInnerState] = useState<'idle' | 'hold'>('idle');
+  const [innerState, setInnerState] = useState<'idle' | 'hold' | 'submitting'>(
+    'idle'
+  );
   const [showHint, setShowHint] = useState(false);
 
   const state: State = submitting
@@ -104,7 +106,6 @@ const ButtonElement = <As extends ElementType = 'button'>(
     holdDurationCounter.current = Date.now();
     holdTimerRef.current = setTimeout(() => {
       realButtonRef.current?.click();
-      setInnerState('idle');
     }, holdDuration + HOLD_DURATION_MARGIN);
   }, [holdDuration]);
 
@@ -124,6 +125,7 @@ const ButtonElement = <As extends ElementType = 'button'>(
   }, [displayHint]);
 
   const isButton = as == null || as === 'button';
+
   return (
     <>
       <UIText