From b07a61868fbc39780a4e64575e3cb372850c6bc7 Mon Sep 17 00:00:00 2001
From: vvvvvv1vvvvvv <galennnnnnn@gmail.com>
Date: Thu, 11 Apr 2024 17:42:58 +0800
Subject: [PATCH] chore: sign page performance

---
 src/ui/views/Approval/components/SignText.tsx    | 16 ++++++++++++++++
 src/ui/views/Approval/components/SignTx.tsx      | 10 ++++++++++
 .../views/Approval/components/SignTypedData.tsx  | 16 ++++++++++++++++
 3 files changed, 42 insertions(+)

diff --git a/src/ui/views/Approval/components/SignText.tsx b/src/ui/views/Approval/components/SignText.tsx
index fe404a311e1..67f5719eb58 100644
--- a/src/ui/views/Approval/components/SignText.tsx
+++ b/src/ui/views/Approval/components/SignText.tsx
@@ -31,8 +31,10 @@ import {
   TextActionData,
   formatSecurityEngineCtx,
   parseAction,
+  getActionTypeText,
 } from './TextActions/utils';
 import { WaitingSignMessageComponent } from './map';
+import stats from '@/stats';
 
 interface SignTextProps {
   data: string[];
@@ -47,6 +49,7 @@ interface SignTextProps {
 }
 
 const SignText = ({ params }: { params: SignTextProps }) => {
+  const renderStartAt = useRef(0);
   const [, resolveApproval, rejectApproval] = useApproval();
   const wallet = useWallet();
   const { t } = useTranslation();
@@ -336,6 +339,7 @@ const SignText = ({ params }: { params: SignTextProps }) => {
   }, [rules]);
 
   useEffect(() => {
+    renderStartAt.current = Date.now();
     checkWachMode();
   }, []);
 
@@ -343,6 +347,18 @@ const SignText = ({ params }: { params: SignTextProps }) => {
     report('createSignText');
   }, []);
 
+  useEffect(() => {
+    if (!isLoading) {
+      const duration = Date.now() - renderStartAt.current;
+      stats.report('signPageRenderTime', {
+        type: 'text',
+        actionType: getActionTypeText(parsedActionData),
+        chain: '',
+        duration,
+      });
+    }
+  }, [isLoading]);
+
   return (
     <>
       <div className="approval-text">
diff --git a/src/ui/views/Approval/components/SignTx.tsx b/src/ui/views/Approval/components/SignTx.tsx
index 467a266dd65..24f0ef3e090 100644
--- a/src/ui/views/Approval/components/SignTx.tsx
+++ b/src/ui/views/Approval/components/SignTx.tsx
@@ -62,6 +62,7 @@ import {
   fetchActionRequiredData,
   ActionRequireData,
   formatSecurityEngineCtx,
+  getActionTypeText,
 } from '../components/Actions/utils';
 import Actions from './Actions';
 import { useSecurityEngine } from 'ui/utils/securityEngine';
@@ -628,6 +629,7 @@ interface BlockInfo {
 
 const SignTx = ({ params, origin }: SignTxProps) => {
   const { isGnosis, account } = params;
+  const renderStartAt = useRef(0);
   const [isReady, setIsReady] = useState(false);
   const [nonceChanged, setNonceChanged] = useState(false);
   const [canProcess, setCanProcess] = useState(true);
@@ -1847,6 +1849,7 @@ const SignTx = ({ params, origin }: SignTxProps) => {
   }, [engineResults, currentTx]);
 
   useEffect(() => {
+    renderStartAt.current = Date.now();
     init();
   }, []);
 
@@ -1855,6 +1858,13 @@ const SignTx = ({ params, origin }: SignTxProps) => {
       if (scrollRef.current && scrollRef.current.scrollTop > 0) {
         scrollRef.current && (scrollRef.current.scrollTop = 0);
       }
+      const duration = Date.now() - renderStartAt.current;
+      stats.report('signPageRenderTime', {
+        type: 'transaction',
+        actionType: getActionTypeText(actionData),
+        chain: chain?.serverId || '',
+        duration,
+      });
     }
   }, [isReady]);
 
diff --git a/src/ui/views/Approval/components/SignTypedData.tsx b/src/ui/views/Approval/components/SignTypedData.tsx
index 70705067a38..5f3e81c0953 100644
--- a/src/ui/views/Approval/components/SignTypedData.tsx
+++ b/src/ui/views/Approval/components/SignTypedData.tsx
@@ -35,6 +35,7 @@ import {
   TypedDataActionData,
   formatSecurityEngineCtx,
   normalizeTypeData,
+  getActionTypeText,
 } from './TypedDataActions/utils';
 import { Level } from '@rabby-wallet/rabby-security-engine/dist/rules';
 import { isTestnetChainId, findChainByID, findChain } from '@/utils/chain';
@@ -43,6 +44,7 @@ import { useSignPermissionCheck } from '../hooks/useSignPermissionCheck';
 import { useTestnetCheck } from '../hooks/useTestnetCheck';
 import { useEnterPassphraseModal } from '@/ui/hooks/useEnterPassphraseModal';
 import clsx from 'clsx';
+import stats from '@/stats';
 
 interface SignTypedDataProps {
   method: string;
@@ -58,6 +60,7 @@ interface SignTypedDataProps {
 }
 
 const SignTypedData = ({ params }: { params: SignTypedDataProps }) => {
+  const renderStartAt = useRef(0);
   const [, resolveApproval, rejectApproval] = useApproval();
   const { t } = useTranslation();
   const wallet = useWallet();
@@ -513,11 +516,24 @@ const SignTypedData = ({ params }: { params: SignTypedDataProps }) => {
   }, [scrollInfo, scrollRefSize]);
 
   useEffect(() => {
+    renderStartAt.current = Date.now();
     init();
     checkWachMode();
     report('createSignText');
   }, []);
 
+  useEffect(() => {
+    if (!isLoading) {
+      const duration = Date.now() - renderStartAt.current;
+      stats.report('signPageRenderTime', {
+        type: 'typedata',
+        actionType: getActionTypeText(parsedActionData),
+        chain: chain?.serverId || '',
+        duration,
+      });
+    }
+  }, [isLoading]);
+
   return (
     <>
       <div className="approval-text relative">