From 907705d763b6264e4017f689a0b9557c2fd6cd78 Mon Sep 17 00:00:00 2001
From: rowan <crewe1746@naver.com>
Date: Fri, 8 Nov 2024 18:50:42 +0900
Subject: [PATCH] Revise Reject and Approve button designs on interactive pages

---
 .../extension/src/components/button/styles.ts |  3 +
 .../src/components/special-button/styles.ts   |  3 +
 apps/extension/src/hooks/interaction.ts       | 13 ++---
 apps/extension/src/languages/en.json          |  1 -
 apps/extension/src/languages/ko.json          |  1 -
 apps/extension/src/languages/zh-cn.json       |  1 -
 apps/extension/src/layouts/header/header.tsx  | 14 +----
 apps/extension/src/layouts/header/types.ts    |  2 -
 .../permission/basic-access-for-evm/index.tsx | 49 +++++++++++-----
 .../basic-access-for-starknet/index.tsx       | 49 +++++++++++-----
 .../pages/permission/basic-access/index.tsx   | 49 ++++++++++++----
 .../permission/get-chain-infos/index.tsx      | 37 +++++++++---
 .../extension/src/pages/sign/cosmos/adr36.tsx | 54 +++++++++++++-----
 .../src/pages/sign/cosmos/icns/index.tsx      | 57 +++++++++++++------
 .../src/pages/sign/cosmos/tx/view.tsx         | 47 +++++++++++----
 .../src/pages/sign/ethereum/view.tsx          | 44 ++++++++++----
 .../src/pages/starknet/send/index.tsx         | 10 ----
 .../src/pages/starknet/sign/message/view.tsx  | 51 ++++++++++++++---
 .../src/pages/starknet/sign/tx/view.tsx       | 48 ++++++++++++----
 .../src/pages/suggest-chain/index.tsx         | 41 ++++++++++---
 20 files changed, 416 insertions(+), 158 deletions(-)

diff --git a/apps/extension/src/components/button/styles.ts b/apps/extension/src/components/button/styles.ts
index 94086f8dc1..f44063f33b 100644
--- a/apps/extension/src/components/button/styles.ts
+++ b/apps/extension/src/components/button/styles.ts
@@ -285,6 +285,9 @@ export const Styles = {
     display: flex;
     align-items: center;
     margin-right: 0.25rem;
+    svg {
+      fill: ${ColorPalette["transparent"]};
+    }
   `,
   Right: styled.span`
     height: 100%;
diff --git a/apps/extension/src/components/special-button/styles.ts b/apps/extension/src/components/special-button/styles.ts
index 400ae9a55a..59bdb8a3d8 100644
--- a/apps/extension/src/components/special-button/styles.ts
+++ b/apps/extension/src/components/special-button/styles.ts
@@ -91,6 +91,9 @@ export const Styles = {
     display: flex;
     align-items: center;
     margin-right: 0.25rem;
+    svg {
+      fill: ${ColorPalette["transparent"]};
+    }
   `,
   Right: styled.span`
     height: 100%;
diff --git a/apps/extension/src/hooks/interaction.ts b/apps/extension/src/hooks/interaction.ts
index 8bc299c45f..61df427f38 100644
--- a/apps/extension/src/hooks/interaction.ts
+++ b/apps/extension/src/hooks/interaction.ts
@@ -12,17 +12,10 @@ export const useInteractionInfo = (cleanUp?: () => void) => {
     interactionInternal: searchParams.get("interactionInternal") === "true",
   };
 
-  useEffect(() => {
-    return () => {
-      if (cleanUpRef.current) {
-        cleanUpRef.current();
-      }
-    };
-  }, []);
-
   useEffect(() => {
     // Execute the clean-up function when closing window.
     const beforeunload = async () => {
+      console.log("beforeunload");
       if (cleanUpRef.current) {
         cleanUpRef.current();
       }
@@ -34,6 +27,10 @@ export const useInteractionInfo = (cleanUp?: () => void) => {
     };
   }, []);
 
+  useEffect(() => {
+    // TODO: 현재 페이지에서 뒤로가기를 했을 때 이를 감지하고 cleanUp 함수를 실행하는 로직이 필요함.
+  }, []);
+
   return useMemo(() => {
     return {
       interaction: result.interaction,
diff --git a/apps/extension/src/languages/en.json b/apps/extension/src/languages/en.json
index e38732c922..08d10500d7 100644
--- a/apps/extension/src/languages/en.json
+++ b/apps/extension/src/languages/en.json
@@ -664,7 +664,6 @@
   "button.next": "Next",
   "button.advanced": "Advanced",
   "button.approve": "Approve",
-  "button.reject": "Reject",
   "button.save": "Save",
   "button.close": "Close",
   "button.back": "Back",
diff --git a/apps/extension/src/languages/ko.json b/apps/extension/src/languages/ko.json
index 9aa42c9cc4..00700f8293 100644
--- a/apps/extension/src/languages/ko.json
+++ b/apps/extension/src/languages/ko.json
@@ -648,7 +648,6 @@
   "button.next": "다음",
   "button.advanced": "고급",
   "button.approve": "승인",
-  "button.reject": "거부",
   "button.save": "저장",
   "button.close": "닫기",
   "button.back": "뒤로가기",
diff --git a/apps/extension/src/languages/zh-cn.json b/apps/extension/src/languages/zh-cn.json
index 1880363175..d17ed699d2 100644
--- a/apps/extension/src/languages/zh-cn.json
+++ b/apps/extension/src/languages/zh-cn.json
@@ -619,7 +619,6 @@
   "button.next": "下一步",
   "button.advanced": "高级",
   "button.approve": "确认",
-  "button.reject": "拒绝",
   "button.save": "保存",
   "button.close": "关闭",
   "text-button.select-all": "全选",
diff --git a/apps/extension/src/layouts/header/header.tsx b/apps/extension/src/layouts/header/header.tsx
index 22466259b4..b2bdadb725 100644
--- a/apps/extension/src/layouts/header/header.tsx
+++ b/apps/extension/src/layouts/header/header.tsx
@@ -188,7 +188,6 @@ export const HeaderLayout: FunctionComponent<
   left,
   right,
   bottomButtons,
-  bottomButtonsContainerStyle,
   displayFlex,
   fixedHeight,
   fixedMinHeight,
@@ -225,7 +224,6 @@ export const HeaderLayout: FunctionComponent<
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
-  // TODO: 버튼이 여러개일때의 처리를 해야한다.
   const bottomPadding = (() => {
     if (!hasBottomButton) {
       return "0";
@@ -249,17 +247,12 @@ export const HeaderLayout: FunctionComponent<
     index: number
   ) => {
     if (button.isSpecial) {
-      // isSpecial is not used.
-      const { isSpecial, ...other } = button;
-      return <SpecialButton key={index} {...other} />;
+      return <SpecialButton key={index} {...button} />;
     }
 
-    // isSpecial is not used.
-    const { isSpecial, ...other } = button;
-
     return (
       <Skeleton isNotReady={isNotReady} type="button" key={index}>
-        <Button {...other} />
+        <Button {...button} />
       </Skeleton>
     );
   };
@@ -317,10 +310,9 @@ export const HeaderLayout: FunctionComponent<
             bottom: additionalPaddingBottom || "0",
             display: hasMultipleBottomButton ? "grid" : undefined,
             gridTemplateColumns: hasMultipleBottomButton
-              ? `repeat(${bottomButtons.length}, 1fr)`
+              ? `${"auto ".repeat(bottomButtons.length - 1)}1fr` // 마지막 버튼이 남은 공간을 다 채우도록 함
               : undefined,
             gap: hasMultipleBottomButton ? "0.75rem" : undefined,
-            ...bottomButtonsContainerStyle,
           }}
         >
           {/*
diff --git a/apps/extension/src/layouts/header/types.ts b/apps/extension/src/layouts/header/types.ts
index add9f91899..d2a59fd09e 100644
--- a/apps/extension/src/layouts/header/types.ts
+++ b/apps/extension/src/layouts/header/types.ts
@@ -7,12 +7,10 @@ export interface HeaderProps {
   left?: ReactNode;
   right?: ReactNode;
 
-  // TODO: 나중에 아래 버튼이 여러개 필요해지면 배열로 만들자...
   bottomButtons?: (
     | ({ isSpecial?: false } & ButtonProps)
     | ({ isSpecial: true } & SpecialButtonProps)
   )[];
-  bottomButtonsContainerStyle?: React.CSSProperties;
 
   displayFlex?: boolean;
   fixedHeight?: boolean;
diff --git a/apps/extension/src/pages/permission/basic-access-for-evm/index.tsx b/apps/extension/src/pages/permission/basic-access-for-evm/index.tsx
index d27bb93427..443922974b 100644
--- a/apps/extension/src/pages/permission/basic-access-for-evm/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access-for-evm/index.tsx
@@ -13,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useTheme } from "styled-components";
 import { Dropdown } from "../../../components/dropdown";
 import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
+import { CheckIcon, XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
 
 export const PermissionBasicAccessForEVMPage: FunctionComponent<{
@@ -23,15 +24,21 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
   const { chainStore, permissionStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo();
 
-  const navigate = useNavigate();
-
   const [currentChainIdForEVM, setCurrentChainIdForEVM] = useState<string>(
     data.chainIds[0]
   );
 
+  const isLoading = (() => {
+    const obsolete = data.ids.find((id) => {
+      return permissionStore.isObsoleteInteraction(id);
+    });
+    return !!obsolete;
+  })();
+
   // 페이지가 언마운트 되지 않고 data만 바뀌는 경우가 있어서 이렇게 처리함
   useEffect(() => {
     setCurrentChainIdForEVM(data.chainIds[0]);
@@ -43,13 +50,33 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
       fixedHeight={true}
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await permissionStore.rejectPermissionWithProceedNext(
+              data.ids,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
@@ -58,12 +85,8 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
           }),
           size: "large",
           type: "submit",
-          isLoading: (() => {
-            const obsolete = data.ids.find((id) => {
-              return permissionStore.isObsoleteInteraction(id);
-            });
-            return !!obsolete;
-          })(),
+          left: !isLoading && <CheckIcon />,
+          isLoading,
         },
       ]}
       onSubmit={async (e) => {
diff --git a/apps/extension/src/pages/permission/basic-access-for-starknet/index.tsx b/apps/extension/src/pages/permission/basic-access-for-starknet/index.tsx
index f1b686d451..73b1f38fd4 100644
--- a/apps/extension/src/pages/permission/basic-access-for-starknet/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access-for-starknet/index.tsx
@@ -13,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useTheme } from "styled-components";
 import { Dropdown } from "../../../components/dropdown";
 import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
+import { CheckIcon, XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
 
 export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
@@ -23,14 +24,20 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
   const { chainStore, permissionStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo();
 
-  const navigate = useNavigate();
-
   const [currentChainIdForStarknet, setCurrentChainIdForStarknet] =
     useState<string>(data.chainIds[0]);
 
+  const isLoading = (() => {
+    const obsolete = data.ids.find((id) => {
+      return permissionStore.isObsoleteInteraction(id);
+    });
+    return !!obsolete;
+  })();
+
   // 페이지가 언마운트 되지 않고 data만 바뀌는 경우가 있어서 이렇게 처리함
   useEffect(() => {
     setCurrentChainIdForStarknet(data.chainIds[0]);
@@ -42,13 +49,33 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
       fixedHeight={true}
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await permissionStore.rejectPermissionWithProceedNext(
+              data.ids,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
@@ -57,12 +84,8 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
           }),
           size: "large",
           type: "submit",
-          isLoading: (() => {
-            const obsolete = data.ids.find((id) => {
-              return permissionStore.isObsoleteInteraction(id);
-            });
-            return !!obsolete;
-          })(),
+          left: !isLoading && <CheckIcon />,
+          isLoading,
         },
       ]}
       onSubmit={async (e) => {
diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
index 09725e3778..f661e6c4fc 100644
--- a/apps/extension/src/pages/permission/basic-access/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access/index.tsx
@@ -13,6 +13,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useTheme } from "styled-components";
 import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
 import SimpleBar from "simplebar-react";
+import { CheckIcon, XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
 
 export const PermissionBasicAccessPage: FunctionComponent<{
@@ -23,10 +24,16 @@ export const PermissionBasicAccessPage: FunctionComponent<{
   const { chainStore, permissionStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo();
 
-  const navigate = useNavigate();
+  const isLoading = (() => {
+    const obsolete = data.ids.find((id) => {
+      return permissionStore.isObsoleteInteraction(id);
+    });
+    return !!obsolete;
+  })();
 
   return (
     <HeaderLayout
@@ -34,27 +41,45 @@ export const PermissionBasicAccessPage: FunctionComponent<{
       fixedHeight={true}
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await permissionStore.rejectPermissionWithProceedNext(
+              data.ids,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    // 내부 인터렉션의 경우 reject만 하고 페이지를 벗어나지 않기 때문에 페이지를 벗어나도록 한다.
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    // 예상치 못한 상황이므로 홈으로 초기화한다.
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
           text: intl.formatMessage({
             id: "button.approve",
           }),
+          left: !isLoading && <CheckIcon />,
           type: "submit",
           size: "large",
-          isLoading: (() => {
-            const obsolete = data.ids.find((id) => {
-              return permissionStore.isObsoleteInteraction(id);
-            });
-            return !!obsolete;
-          })(),
+          isLoading,
         },
       ]}
       onSubmit={async (e) => {
diff --git a/apps/extension/src/pages/permission/get-chain-infos/index.tsx b/apps/extension/src/pages/permission/get-chain-infos/index.tsx
index 3d34807191..c0a5592312 100644
--- a/apps/extension/src/pages/permission/get-chain-infos/index.tsx
+++ b/apps/extension/src/pages/permission/get-chain-infos/index.tsx
@@ -15,6 +15,7 @@ import { ColorPalette } from "../../../styles";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useTheme } from "styled-components";
 import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
+import { CheckIcon, XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
 
 export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
@@ -23,10 +24,11 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
   const { permissionStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo();
 
-  const navigate = useNavigate();
+  const isLoading = permissionStore.isObsoleteInteraction(data.id);
 
   return (
     <HeaderLayout
@@ -34,13 +36,33 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
       fixedHeight={true}
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await permissionStore.rejectPermissionWithProceedNext(
+              data.id,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
@@ -49,7 +71,8 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
           }),
           size: "large",
           type: "submit",
-          isLoading: permissionStore.isObsoleteInteraction(data.id),
+          left: !isLoading && <CheckIcon />,
+          isLoading,
         },
       ]}
       onSubmit={async (e) => {
diff --git a/apps/extension/src/pages/sign/cosmos/adr36.tsx b/apps/extension/src/pages/sign/cosmos/adr36.tsx
index c805d57c57..ae2f046e00 100644
--- a/apps/extension/src/pages/sign/cosmos/adr36.tsx
+++ b/apps/extension/src/pages/sign/cosmos/adr36.tsx
@@ -22,7 +22,11 @@ import { KeystoneSign } from "../components/keystone";
 import { useTheme } from "styled-components";
 import { KeyRingService } from "@keplr-wallet/background";
 import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
-import { MessageAdr36Icon } from "../../../components/icon";
+import {
+  CheckIcon,
+  MessageAdr36Icon,
+  XMarkIcon,
+} from "../../../components/icon";
 import { ItemLogo } from "../../main/token-detail/msg-items/logo";
 import { KeystoneUSBBox } from "../components/keystone-usb-box";
 import { useNavigate } from "react-router";
@@ -31,7 +35,6 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
   const { chainStore, signInteractionStore, uiConfigStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
-
   const navigate = useNavigate();
 
   const [isViewData, setIsViewData] = useState(false);
@@ -124,6 +127,13 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
     Error | undefined
   >(undefined);
 
+  const isLoading =
+    signInteractionStore.isObsoleteInteraction(
+      signInteractionStore.waitingData?.id
+    ) ||
+    isLedgerInteracting ||
+    isKeystoneInteracting;
+
   return (
     <HeaderLayout
       title={intl.formatMessage({ id: "page.sign.adr36.title" })}
@@ -137,26 +147,44 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
       }
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            if (signInteractionStore.waitingData) {
+              signInteractionStore.rejectWithProceedNext(
+                signInteractionStore.waitingData.id,
+                (proceedNext) => {
+                  if (!proceedNext) {
+                    if (
+                      interactionInfo.interaction &&
+                      !interactionInfo.interactionInternal
+                    ) {
+                      handleExternalInteractionWithNoProceedNext();
+                    } else if (
+                      interactionInfo.interaction &&
+                      interactionInfo.interactionInternal
+                    ) {
+                      window.history.length > 1 ? navigate(-1) : navigate("/");
+                    } else {
+                      navigate("/", { replace: true });
+                    }
+                  }
+                }
+              );
+            }
           },
         },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           color: "primary",
           size: "large",
+          left: !isLoading && <CheckIcon />,
           disabled: signInteractionStore.waitingData == null,
-          isLoading:
-            signInteractionStore.isObsoleteInteraction(
-              signInteractionStore.waitingData?.id
-            ) ||
-            isLedgerInteracting ||
-            isKeystoneInteracting,
+          isLoading,
           onClick: async () => {
             if (signInteractionStore.waitingData) {
               const signDocWrapper =
diff --git a/apps/extension/src/pages/sign/cosmos/icns/index.tsx b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
index a1d2c4f04c..8cf9f1091e 100644
--- a/apps/extension/src/pages/sign/cosmos/icns/index.tsx
+++ b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
@@ -12,48 +12,73 @@ import { Bech32Address } from "@keplr-wallet/cosmos";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useTheme } from "styled-components";
 import { handleExternalInteractionWithNoProceedNext } from "../../../../utils";
+import { CheckIcon, XMarkIcon } from "../../../../components/icon";
 import { useNavigate } from "react-router";
 
 export const SignCosmosICNSPage: FunctionComponent = observer(() => {
   const { icnsInteractionStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
-
   const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo(() => {
     icnsInteractionStore.rejectAll();
   });
 
+  const isLoading = (() => {
+    if (
+      icnsInteractionStore.waitingData &&
+      icnsInteractionStore.isObsoleteInteraction(
+        icnsInteractionStore.waitingData.id
+      )
+    ) {
+      return true;
+    }
+  })();
+
   return (
     <HeaderLayout
       title=""
       fixedHeight={true}
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            if (icnsInteractionStore.waitingData) {
+              await icnsInteractionStore.rejectWithProceedNext(
+                icnsInteractionStore.waitingData.id,
+                (proceedNext) => {
+                  if (!proceedNext) {
+                    if (
+                      interactionInfo.interaction &&
+                      !interactionInfo.interactionInternal
+                    ) {
+                      handleExternalInteractionWithNoProceedNext();
+                    } else if (
+                      interactionInfo.interaction &&
+                      interactionInfo.interactionInternal
+                    ) {
+                      window.history.length > 1 ? navigate(-1) : navigate("/");
+                    } else {
+                      navigate("/", { replace: true });
+                    }
+                  }
+                }
+              );
+            }
           },
         },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
           type: "submit",
-          isLoading: (() => {
-            if (
-              icnsInteractionStore.waitingData &&
-              icnsInteractionStore.isObsoleteInteraction(
-                icnsInteractionStore.waitingData.id
-              )
-            ) {
-              return true;
-            }
-          })(),
+          left: !isLoading && <CheckIcon />,
+          isLoading,
           disabled: icnsInteractionStore.waitingData == null,
         },
       ]}
diff --git a/apps/extension/src/pages/sign/cosmos/tx/view.tsx b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
index deea6a5997..d3a59f48c9 100644
--- a/apps/extension/src/pages/sign/cosmos/tx/view.tsx
+++ b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
@@ -47,7 +47,8 @@ import { FeeSummary } from "../../components/fee-summary";
 import { FeeControl } from "../../../../components/input/fee-control";
 import { HighFeeWarning } from "../../components/high-fee-warning";
 import { handleExternalInteractionWithNoProceedNext } from "../../../../utils";
-import { useNavigate } from "react-router";
+import { useNavigate } from "react-router-dom";
+import { CheckIcon, XMarkIcon } from "../../../../components/icon";
 
 /**
  * 서명을 처리할때 웹페이지에서 연속적으로 서명을 요청했을 수 있고
@@ -73,7 +74,6 @@ export const CosmosTxView: FunctionComponent<{
 
   const intl = useIntl();
   const theme = useTheme();
-
   const navigate = useNavigate();
 
   const [isViewData, setIsViewData] = useState(false);
@@ -490,6 +490,11 @@ export const CosmosTxView: FunctionComponent<{
     }
   })();
 
+  const isLoading =
+    signInteractionStore.isObsoleteInteraction(interactionData.id) ||
+    isLedgerInteracting ||
+    isKeystoneInteracting;
+
   return (
     <HeaderLayout
       title={intl.formatMessage({ id: "page.sign.cosmos.tx.title" })}
@@ -501,27 +506,45 @@ export const CosmosTxView: FunctionComponent<{
           }
         />
       }
-      // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await signInteractionStore.rejectWithProceedNext(
+              interactionData.id,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
+        // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
         {
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
+          left: !isLoading && <CheckIcon />,
           disabled: buttonDisabled,
-          isLoading:
-            signInteractionStore.isObsoleteInteraction(interactionData.id) ||
-            isLedgerInteracting ||
-            isKeystoneInteracting,
+          isLoading,
           onClick: approve,
         },
       ]}
diff --git a/apps/extension/src/pages/sign/ethereum/view.tsx b/apps/extension/src/pages/sign/ethereum/view.tsx
index c2c639f0dd..fa37fdd5ac 100644
--- a/apps/extension/src/pages/sign/ethereum/view.tsx
+++ b/apps/extension/src/pages/sign/ethereum/view.tsx
@@ -51,6 +51,7 @@ import { MemoryKVStore } from "@keplr-wallet/common";
 import { CoinPretty, Dec, Int } from "@keplr-wallet/unit";
 import { Image } from "../../../components/image";
 import { Column, Columns } from "../../../components/column";
+import { CheckIcon, XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
 
 /**
@@ -342,6 +343,11 @@ export const EthereumSigningView: FunctionComponent<{
   const [isUnknownContractExecution, setIsUnknownContractExecution] =
     useState(false);
 
+  const isLoading =
+    signEthereumInteractionStore.isObsoleteInteraction(interactionData.id) ||
+    isLedgerInteracting ||
+    isKeystoneInteracting;
+
   return (
     <HeaderLayout
       title={intl.formatMessage({
@@ -357,25 +363,41 @@ export const EthereumSigningView: FunctionComponent<{
       }
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await signEthereumInteractionStore.rejectWithProceedNext(
+              interactionData.id,
+              async (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           color: "primary",
           size: "large",
-          isLoading:
-            signEthereumInteractionStore.isObsoleteInteraction(
-              interactionData.id
-            ) ||
-            isLedgerInteracting ||
-            isKeystoneInteracting,
+          left: !isLoading && <CheckIcon />,
+          isLoading,
           onClick: async () => {
             try {
               let signature;
diff --git a/apps/extension/src/pages/starknet/send/index.tsx b/apps/extension/src/pages/starknet/send/index.tsx
index a0b35c5e1d..6f6803f887 100644
--- a/apps/extension/src/pages/starknet/send/index.tsx
+++ b/apps/extension/src/pages/starknet/send/index.tsx
@@ -342,16 +342,6 @@ export const StarknetSendPage: FunctionComponent = observer(() => {
         )
       }
       bottomButtons={[
-        {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
-          size: "large",
-          color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
-          },
-        },
         {
           disabled:
             starknetAccount.isDeployingAccount ||
diff --git a/apps/extension/src/pages/starknet/sign/message/view.tsx b/apps/extension/src/pages/starknet/sign/message/view.tsx
index 6c47c98ec9..cdc7b166eb 100644
--- a/apps/extension/src/pages/starknet/sign/message/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/message/view.tsx
@@ -16,6 +16,8 @@ import { XAxis, YAxis } from "../../../../components/axis";
 import { Gutter } from "../../../../components/gutter";
 import { Image } from "../../../../components/image";
 import SimpleBar from "simplebar-react";
+import { CheckIcon, XMarkIcon } from "../../../../components/icon";
+import { useNavigate } from "react-router";
 
 export const SignStarknetMessageView: FunctionComponent<{
   interactionData: NonNullable<
@@ -25,6 +27,7 @@ export const SignStarknetMessageView: FunctionComponent<{
   const { signStarknetMessageInteractionStore } = useStore();
 
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const { chainStore } = useStore();
 
@@ -105,13 +108,47 @@ export const SignStarknetMessageView: FunctionComponent<{
           }
         />
       }
-      // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
-      bottomButton={{
-        isSpecial: true,
-        text: intl.formatMessage({ id: "button.approve" }),
-        size: "large",
-        onClick: approve,
-      }}
+      bottomButtons={[
+        {
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
+          size: "large",
+          color: "secondary",
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await signStarknetMessageInteractionStore.rejectWithProceedNext(
+              interactionData.id,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
+          },
+        },
+        // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
+        {
+          isSpecial: true,
+          text: intl.formatMessage({ id: "button.approve" }),
+          size: "large",
+          left: <CheckIcon />,
+          // CHECK: isLoading이 들어가야하는지 확인
+          onClick: approve,
+        },
+      ]}
     >
       <Box
         height="100%"
diff --git a/apps/extension/src/pages/starknet/sign/tx/view.tsx b/apps/extension/src/pages/starknet/sign/tx/view.tsx
index 12745f322c..d873520985 100644
--- a/apps/extension/src/pages/starknet/sign/tx/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/tx/view.tsx
@@ -25,7 +25,11 @@ import { Box } from "../../../../components/box";
 import { ColorPalette } from "../../../../styles";
 import { useTheme } from "styled-components";
 import { H5 } from "../../../../components/typography";
-import { ArrowDropDownIcon } from "../../../../components/icon";
+import {
+  ArrowDropDownIcon,
+  CheckIcon,
+  XMarkIcon,
+} from "../../../../components/icon";
 import { Column, Columns } from "../../../../components/column";
 import SimpleBar from "simplebar-react";
 import { XAxis } from "../../../../components/axis";
@@ -44,13 +48,13 @@ export const SignStarknetTxView: FunctionComponent<{
   } = useStore();
 
   const theme = useTheme();
-  const navigate = useNavigate();
-
   const { chainStore } = useStore();
 
   const intl = useIntl();
   const interactionInfo = useInteractionInfo();
 
+  const navigate = useNavigate();
+
   const chainId = interactionData.data.chainId;
 
   const modularChainInfo = chainStore.getModularChain(chainId);
@@ -213,6 +217,9 @@ export const SignStarknetTxView: FunctionComponent<{
   });
 
   const buttonDisabled = txConfigsValidate.interactionBlocked;
+  const isLoading = signStarknetTxInteractionStore.isObsoleteInteraction(
+    interactionData.id
+  );
 
   const approve = async () => {
     try {
@@ -349,23 +356,42 @@ export const SignStarknetTxView: FunctionComponent<{
       // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await signStarknetTxInteractionStore.rejectWithProceedNext(
+              interactionData.id,
+              (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
+          left: !isLoading && <CheckIcon />,
           disabled: buttonDisabled,
-          isLoading: signStarknetTxInteractionStore.isObsoleteInteraction(
-            interactionData.id
-          ),
+          isLoading,
           onClick: approve,
         },
       ]}
diff --git a/apps/extension/src/pages/suggest-chain/index.tsx b/apps/extension/src/pages/suggest-chain/index.tsx
index 14d914fe76..c2b1af6021 100644
--- a/apps/extension/src/pages/suggest-chain/index.tsx
+++ b/apps/extension/src/pages/suggest-chain/index.tsx
@@ -7,10 +7,11 @@ import { useInteractionInfo } from "../../hooks";
 import { InteractionWaitingData } from "@keplr-wallet/background";
 import { ChainInfo } from "@keplr-wallet/types";
 import { FormattedMessage, useIntl } from "react-intl";
-import { ArrowLeftIcon } from "../../components/icon";
+import { ArrowLeftIcon, CheckIcon, XMarkIcon } from "../../components/icon";
 import { Box } from "../../components/box";
 import { handleExternalInteractionWithNoProceedNext } from "../../utils";
 import { dispatchGlobalEventExceptSelf } from "../../utils/global-events";
+import { ColorPalette } from "../../styles";
 import { useNavigate } from "react-router";
 
 export const SuggestChainPage: FunctionComponent = observer(() => {
@@ -44,15 +45,16 @@ const SuggestChainPageImpl: FunctionComponent<{
   const [updateFromRepoDisabled, setUpdateFromRepoDisabled] = useState(false);
 
   const intl = useIntl();
-  const interactionInfo = useInteractionInfo();
-
   const navigate = useNavigate();
+  const interactionInfo = useInteractionInfo();
 
   const queryCommunityChainInfo = chainSuggestStore.getCommunityChainInfo(
     waitingData.data.chainInfo.chainId
   );
   const communityChainInfo = queryCommunityChainInfo.chainInfo;
 
+  const isLoading = permissionStore.isObsoleteInteraction(waitingData.id);
+
   useEffect(() => {
     if (!queryCommunityChainInfo.isLoading) {
       setIsLoadingPlaceholder(false);
@@ -98,20 +100,41 @@ const SuggestChainPageImpl: FunctionComponent<{
       }
       bottomButtons={[
         {
-          text: intl.formatMessage({
-            id: "button.reject",
-          }),
+          textOverrideIcon: <XMarkIcon color={ColorPalette["gray-200"]} />,
           size: "large",
           color: "secondary",
-          onClick: () => {
-            navigate("/", { replace: true });
+          style: {
+            width: "3.25rem",
+          },
+          onClick: async () => {
+            await chainSuggestStore.rejectWithProceedNext(
+              waitingData.id,
+              async (proceedNext) => {
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  } else if (
+                    interactionInfo.interaction &&
+                    interactionInfo.interactionInternal
+                  ) {
+                    window.history.length > 1 ? navigate(-1) : navigate("/");
+                  } else {
+                    navigate("/", { replace: true });
+                  }
+                }
+              }
+            );
           },
         },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
           color: "primary",
-          isLoading: permissionStore.isObsoleteInteraction(waitingData.id),
+          left: !isLoading && <CheckIcon />,
+          isLoading,
           onClick: async () => {
             const chainInfo =
               communityChainInfo && !updateFromRepoDisabled