From 1bb1efe06baa6fe077dd8f77fd061c73318f50a3 Mon Sep 17 00:00:00 2001
From: 0311xuyang <yang.xu@certik.com>
Date: Thu, 31 Oct 2024 09:23:23 +0800
Subject: [PATCH 1/7] update shentu msg type

---
 apps/extension/src/stores/root.tsx | 11 -----------
 apps/mobile/src/stores/root.tsx    | 11 -----------
 2 files changed, 22 deletions(-)

diff --git a/apps/extension/src/stores/root.tsx b/apps/extension/src/stores/root.tsx
index 6f6d4cd0b0..4a7f0ae964 100644
--- a/apps/extension/src/stores/root.tsx
+++ b/apps/extension/src/stores/root.tsx
@@ -348,17 +348,6 @@ export class RootStore {
       CosmosAccount.use({
         queriesStore: this.queriesStore,
         msgOptsCreator: (chainId) => {
-          // In certik, change the msg type of the MsgSend to "bank/MsgSend"
-          if (chainId.startsWith("shentu-")) {
-            return {
-              send: {
-                native: {
-                  type: "bank/MsgSend",
-                },
-              },
-            };
-          }
-
           // In akash or sifchain, increase the default gas for sending
           if (
             chainId.startsWith("akashnet-") ||
diff --git a/apps/mobile/src/stores/root.tsx b/apps/mobile/src/stores/root.tsx
index 87d0b3df72..fb4356a068 100644
--- a/apps/mobile/src/stores/root.tsx
+++ b/apps/mobile/src/stores/root.tsx
@@ -231,17 +231,6 @@ export class RootStore {
       CosmosAccount.use({
         queriesStore: this.queriesStore,
         msgOptsCreator: chainId => {
-          // In certik, change the msg type of the MsgSend to "bank/MsgSend"
-          if (chainId.startsWith('shentu-')) {
-            return {
-              send: {
-                native: {
-                  type: 'bank/MsgSend',
-                },
-              },
-            };
-          }
-
           // In akash or sifchain, increase the default gas for sending
           if (
             chainId.startsWith('akashnet-') ||

From 2d640755aedbc27d47d7b3752d51571a6250db15 Mon Sep 17 00:00:00 2001
From: rowan <crewe1746@naver.com>
Date: Tue, 5 Nov 2024 14:22:39 +0900
Subject: [PATCH 2/7] Allow HeaderLayout component to have multiple bottom
 buttons

---
 apps/extension/src/layouts/header/header.tsx  | 104 +++++++---
 apps/extension/src/layouts/header/types.ts    |   5 +-
 .../src/pages/ibc-transfer/index.tsx          | 194 +++++++++---------
 .../src/pages/main/layouts/header.tsx         |   2 +-
 .../permission/basic-access-for-evm/index.tsx |  26 +--
 .../basic-access-for-starknet/index.tsx       |  26 +--
 .../pages/permission/basic-access/index.tsx   |  26 +--
 .../permission/get-chain-infos/index.tsx      |  16 +-
 .../extension/src/pages/send/amount/index.tsx |  22 +-
 .../pages/setting/advanced/endpoint/index.tsx |  20 +-
 .../src/pages/setting/contacts/add/index.tsx  |  24 ++-
 .../setting/general/authz/revoke/index.tsx    |  18 +-
 .../general/link-keplr-mobile/index.tsx       |  20 +-
 .../setting/security/auto-lock/index.tsx      |  18 +-
 .../security/change-password/index.tsx        |  18 +-
 .../src/pages/setting/token/add/index.tsx     |  24 ++-
 .../extension/src/pages/sign/cosmos/adr36.tsx | 178 ++++++++--------
 .../src/pages/sign/cosmos/icns/index.tsx      |  32 +--
 .../src/pages/sign/cosmos/tx/view.tsx         |  24 ++-
 .../src/pages/sign/ethereum/view.tsx          | 160 ++++++++-------
 .../src/pages/starknet/send/index.tsx         |  38 ++--
 .../src/pages/starknet/sign/tx/view.tsx       |  22 +-
 .../src/pages/suggest-chain/index.tsx         |  86 ++++----
 .../src/pages/wallet/change-name/index.tsx    |  26 +--
 .../src/pages/wallet/delete/index.tsx         |  14 +-
 .../src/pages/wallet/show-sensitive/index.tsx |   6 +-
 26 files changed, 621 insertions(+), 528 deletions(-)

diff --git a/apps/extension/src/layouts/header/header.tsx b/apps/extension/src/layouts/header/header.tsx
index 9ccd566f28..4220d3ed22 100644
--- a/apps/extension/src/layouts/header/header.tsx
+++ b/apps/extension/src/layouts/header/header.tsx
@@ -182,7 +182,7 @@ export const HeaderLayout: FunctionComponent<
   title,
   left,
   right,
-  bottomButton,
+  bottomButtons,
   displayFlex,
   fixedHeight,
   fixedMinHeight,
@@ -197,6 +197,9 @@ export const HeaderLayout: FunctionComponent<
   const [height, setHeight] = React.useState(() => pxToRem(600));
   const lastSetHeight = useRef(-1);
 
+  const hasBottomButton = bottomButtons && bottomButtons.length > 0;
+  const hasMultipleBottomButton = bottomButtons && bottomButtons.length > 1;
+
   useLayoutEffect(() => {
     function handleResize() {
       if (window.visualViewport) {
@@ -216,21 +219,32 @@ export const HeaderLayout: FunctionComponent<
     return () => window.removeEventListener("resize", handleResize);
   }, []);
 
+  // TODO: 버튼이 여러개일때의 처리를 해야한다.
   const bottomPadding = (() => {
-    if (!bottomButton) {
+    if (!hasBottomButton) {
       return "0";
     }
 
-    if (bottomButton.isSpecial) {
+    const specialButton = bottomButtons.find((button) => button.isSpecial);
+
+    if (!!specialButton) {
       return (
         bottomButtonPaddingRem * 2 +
-        getSpecialButtonHeightRem(bottomButton.size) +
+        getSpecialButtonHeightRem(specialButton.size) +
         "rem"
       );
     }
 
+    const largestButton = bottomButtons.reduce((prev, current) => {
+      return getButtonHeightRem(prev.size) > getButtonHeightRem(current.size)
+        ? prev
+        : current;
+    }, bottomButtons[0]);
+
     return (
-      bottomButtonPaddingRem * 2 + getButtonHeightRem(bottomButton.size) + "rem"
+      bottomButtonPaddingRem * 2 +
+      getButtonHeightRem(largestButton.size) +
+      "rem"
     );
   })();
 
@@ -277,7 +291,7 @@ export const HeaderLayout: FunctionComponent<
         {children}
       </Styles.ContentContainer>
 
-      {bottomButton ? (
+      {hasBottomButton ? (
         <Box
           padding={bottomButtonPaddingRem + "rem"}
           position="fixed"
@@ -285,6 +299,11 @@ export const HeaderLayout: FunctionComponent<
             left: 0,
             right: 0,
             bottom: additionalPaddingBottom || "0",
+            display: hasMultipleBottomButton ? "grid" : undefined,
+            gridTemplateColumns: hasMultipleBottomButton
+              ? `repeat(${bottomButtons.length}, 1fr)`
+              : undefined,
+            gap: hasMultipleBottomButton ? "12px" : undefined,
           }}
         >
           {/*
@@ -304,30 +323,55 @@ export const HeaderLayout: FunctionComponent<
               }}
             />
           ) : null}
-          {(() => {
-            if (bottomButton.isSpecial) {
-              // isSpecial is not used.
-              const { isSpecial, ...other } = bottomButton;
-              return <SpecialButton {...other} />;
-            } else {
-              // isSpecial is not used.
-              const { isSpecial, type, ...other } = bottomButton;
-
-              // onSubmit prop이 존재한다면 기본적으로 type="submit"으로 설정한다
-              // TODO: 만약에 bottomButton이 배열을 받을 수 있도록 수정된다면 이 부분도 수정되어야함.
-
-              const props = {
-                ...other,
-                type: type || onSubmit ? ("submit" as const) : undefined,
-              };
-
-              return (
-                <Skeleton isNotReady={isNotReady} type="button">
-                  <Button {...props} />
-                </Skeleton>
-              );
-            }
-          })()}
+          {/* TODO: 코드 예쁘게 리팩토링하기 */}
+          {hasMultipleBottomButton
+            ? bottomButtons.map((button, index) => {
+                if (button.isSpecial) {
+                  // isSpecial is not used.
+                  const { isSpecial, ...other } = button;
+                  return <SpecialButton {...other} key={index} />;
+                } else {
+                  // isSpecial is not used.
+                  const { isSpecial, type, ...other } = button;
+
+                  // onSubmit prop이 존재한다면 기본적으로 type="submit"으로 설정한다
+
+                  const props = {
+                    ...other,
+                    type: type || onSubmit ? ("submit" as const) : undefined,
+                  };
+
+                  return (
+                    <Skeleton isNotReady={isNotReady} type="button" key={index}>
+                      <Button {...props} />
+                    </Skeleton>
+                  );
+                }
+              })
+            : (() => {
+                if (bottomButtons[0].isSpecial) {
+                  // isSpecial is not used.
+                  const { isSpecial, ...other } = bottomButtons[0];
+                  return <SpecialButton {...other} />;
+                } else {
+                  // isSpecial is not used.
+                  const { isSpecial, type, ...other } = bottomButtons[0];
+
+                  // onSubmit prop이 존재한다면 기본적으로 type="submit"으로 설정한다
+                  // TODO: 만약에 bottomButton이 배열을 받을 수 있도록 수정된다면 이 부분도 수정되어야함.
+
+                  const props = {
+                    ...other,
+                    type: type || onSubmit ? ("submit" as const) : undefined,
+                  };
+
+                  return (
+                    <Skeleton isNotReady={isNotReady} type="button">
+                      <Button {...props} />
+                    </Skeleton>
+                  );
+                }
+              })()}
         </Box>
       ) : null}
     </Styles.Container>
diff --git a/apps/extension/src/layouts/header/types.ts b/apps/extension/src/layouts/header/types.ts
index d976ad69bb..09568e2dd9 100644
--- a/apps/extension/src/layouts/header/types.ts
+++ b/apps/extension/src/layouts/header/types.ts
@@ -8,9 +8,10 @@ export interface HeaderProps {
   right?: ReactNode;
 
   // TODO: 나중에 아래 버튼이 여러개 필요해지면 배열로 만들자...
-  bottomButton?:
+  bottomButtons?: (
     | ({ isSpecial?: false } & ButtonProps)
-    | ({ isSpecial: true } & SpecialButtonProps);
+    | ({ isSpecial: true } & SpecialButtonProps)
+  )[];
 
   displayFlex?: boolean;
   fixedHeight?: boolean;
diff --git a/apps/extension/src/pages/ibc-transfer/index.tsx b/apps/extension/src/pages/ibc-transfer/index.tsx
index a673bff06d..959a85d8f2 100644
--- a/apps/extension/src/pages/ibc-transfer/index.tsx
+++ b/apps/extension/src/pages/ibc-transfer/index.tsx
@@ -140,115 +140,121 @@ export const IBCTransferPage: FunctionComponent = observer(() => {
           <ArrowLeftIcon />
         </Box>
       }
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.next" }),
-        size: "large",
-        onClick: async () => {
-          if (isSelectChannelPhase) {
-            setPhase("amount");
-          } else {
-            if (ibcTransferConfigs.channelConfig.channels.length === 1) {
-              try {
-                const tx = accountInfo.cosmos.makeIBCTransferTx(
-                  ibcTransferConfigs.channelConfig.channels[0],
-                  ibcTransferConfigs.amountConfig.amount[0].toDec().toString(),
-                  ibcTransferConfigs.amountConfig.amount[0].currency,
-                  ibcTransferConfigs.recipientConfig.recipient
-                );
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.next" }),
+          size: "large",
+          onClick: async () => {
+            if (isSelectChannelPhase) {
+              setPhase("amount");
+            } else {
+              if (ibcTransferConfigs.channelConfig.channels.length === 1) {
+                try {
+                  const tx = accountInfo.cosmos.makeIBCTransferTx(
+                    ibcTransferConfigs.channelConfig.channels[0],
+                    ibcTransferConfigs.amountConfig.amount[0]
+                      .toDec()
+                      .toString(),
+                    ibcTransferConfigs.amountConfig.amount[0].currency,
+                    ibcTransferConfigs.recipientConfig.recipient
+                  );
 
-                await tx.send(
-                  ibcTransferConfigs.feeConfig.toStdFee(),
-                  ibcTransferConfigs.memoConfig.memo,
-                  {
-                    preferNoSetFee: true,
-                    preferNoSetMemo: true,
-                    sendTx: async (chainId, tx, mode) => {
-                      const msg = new SendTxAndRecordMsg(
-                        historyType,
-                        chainId,
-                        ibcTransferConfigs.recipientConfig.chainId,
-                        tx,
-                        mode,
-                        false,
-                        ibcTransferConfigs.senderConfig.sender,
-                        ibcTransferConfigs.recipientConfig.recipient,
-                        ibcTransferConfigs.amountConfig.amount.map((amount) => {
-                          return {
-                            amount: DecUtils.getTenExponentN(
-                              amount.currency.coinDecimals
-                            )
-                              .mul(amount.toDec())
-                              .toString(),
-                            denom: amount.currency.coinMinimalDenom,
-                          };
-                        }),
-                        ibcTransferConfigs.memoConfig.memo
-                      );
-                      return await new InExtensionMessageRequester().sendMessage(
-                        BACKGROUND_PORT,
-                        msg
-                      );
-                    },
-                  },
-                  {
-                    onBroadcasted: () => {
-                      chainStore.enableVaultsWithCosmosAddress(
-                        ibcTransferConfigs.recipientConfig.chainId,
-                        ibcTransferConfigs.recipientConfig.recipient
-                      );
+                  await tx.send(
+                    ibcTransferConfigs.feeConfig.toStdFee(),
+                    ibcTransferConfigs.memoConfig.memo,
+                    {
+                      preferNoSetFee: true,
+                      preferNoSetMemo: true,
+                      sendTx: async (chainId, tx, mode) => {
+                        const msg = new SendTxAndRecordMsg(
+                          historyType,
+                          chainId,
+                          ibcTransferConfigs.recipientConfig.chainId,
+                          tx,
+                          mode,
+                          false,
+                          ibcTransferConfigs.senderConfig.sender,
+                          ibcTransferConfigs.recipientConfig.recipient,
+                          ibcTransferConfigs.amountConfig.amount.map(
+                            (amount) => {
+                              return {
+                                amount: DecUtils.getTenExponentN(
+                                  amount.currency.coinDecimals
+                                )
+                                  .mul(amount.toDec())
+                                  .toString(),
+                                denom: amount.currency.coinMinimalDenom,
+                              };
+                            }
+                          ),
+                          ibcTransferConfigs.memoConfig.memo
+                        );
+                        return await new InExtensionMessageRequester().sendMessage(
+                          BACKGROUND_PORT,
+                          msg
+                        );
+                      },
                     },
-                    onFulfill: (tx) => {
-                      if (tx.code != null && tx.code !== 0) {
-                        console.log(tx.log ?? tx.raw_log);
+                    {
+                      onBroadcasted: () => {
+                        chainStore.enableVaultsWithCosmosAddress(
+                          ibcTransferConfigs.recipientConfig.chainId,
+                          ibcTransferConfigs.recipientConfig.recipient
+                        );
+                      },
+                      onFulfill: (tx) => {
+                        if (tx.code != null && tx.code !== 0) {
+                          console.log(tx.log ?? tx.raw_log);
+                          notification.show(
+                            "failed",
+                            intl.formatMessage({
+                              id: "error.transaction-failed",
+                            }),
+                            ""
+                          );
+                          return;
+                        }
                         notification.show(
-                          "failed",
+                          "success",
                           intl.formatMessage({
-                            id: "error.transaction-failed",
+                            id: "notification.transaction-success",
                           }),
                           ""
                         );
-                        return;
-                      }
-                      notification.show(
-                        "success",
-                        intl.formatMessage({
-                          id: "notification.transaction-success",
-                        }),
-                        ""
-                      );
-                    },
-                  }
-                );
-              } catch (e) {
-                if (e.message === "Request rejected") {
-                  if (location.pathname === "/ibc-transfer") {
+                      },
+                    }
+                  );
+                } catch (e) {
+                  if (e.message === "Request rejected") {
+                    if (location.pathname === "/ibc-transfer") {
+                      return;
+                    }
+
+                    navigate(-1);
                     return;
                   }
 
-                  navigate(-1);
-                  return;
+                  notification.show(
+                    "failed",
+                    intl.formatMessage({
+                      id: "error.transaction-failed",
+                    }),
+                    ""
+                  );
                 }
 
-                notification.show(
-                  "failed",
-                  intl.formatMessage({
-                    id: "error.transaction-failed",
-                  }),
-                  ""
-                );
+                navigate("/", {
+                  replace: true,
+                });
               }
-
-              navigate("/", {
-                replace: true,
-              });
             }
-          }
+          },
+          disabled: isSelectChannelPhase
+            ? isSelectChannelInteractionBlocked
+            : isAmountInteractionBlocked,
+          isLoading: accountInfo.isSendingMsg === "ibcTransfer",
         },
-        disabled: isSelectChannelPhase
-          ? isSelectChannelInteractionBlocked
-          : isAmountInteractionBlocked,
-        isLoading: accountInfo.isSendingMsg === "ibcTransfer",
-      }}
+      ]}
     >
       <Box height="100%">
         {isSelectChannelPhase ? (
diff --git a/apps/extension/src/pages/main/layouts/header.tsx b/apps/extension/src/pages/main/layouts/header.tsx
index ea4b95249b..e3184b7b49 100644
--- a/apps/extension/src/pages/main/layouts/header.tsx
+++ b/apps/extension/src/pages/main/layouts/header.tsx
@@ -48,7 +48,7 @@ export const MainHeaderLayout = observer<
     Pick<
       HeaderProps,
       | "isNotReady"
-      | "bottomButton"
+      | "bottomButtons"
       | "fixedHeight"
       | "additionalPaddingBottom"
       | "onSubmit"
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 71ef47b836..162ba55059 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
@@ -38,18 +38,20 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
     <HeaderLayout
       title=""
       fixedHeight={true}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.approve",
-        }),
-        size: "large",
-        isLoading: (() => {
-          const obsolete = data.ids.find((id) => {
-            return permissionStore.isObsoleteInteraction(id);
-          });
-          return !!obsolete;
-        })(),
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.approve",
+          }),
+          size: "large",
+          isLoading: (() => {
+            const obsolete = data.ids.find((id) => {
+              return permissionStore.isObsoleteInteraction(id);
+            });
+            return !!obsolete;
+          })(),
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
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 9c3961f000..50e01659ec 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
@@ -37,18 +37,20 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
     <HeaderLayout
       title=""
       fixedHeight={true}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.approve",
-        }),
-        size: "large",
-        isLoading: (() => {
-          const obsolete = data.ids.find((id) => {
-            return permissionStore.isObsoleteInteraction(id);
-          });
-          return !!obsolete;
-        })(),
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.approve",
+          }),
+          size: "large",
+          isLoading: (() => {
+            const obsolete = data.ids.find((id) => {
+              return permissionStore.isObsoleteInteraction(id);
+            });
+            return !!obsolete;
+          })(),
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
index f0a84356b2..ae70332960 100644
--- a/apps/extension/src/pages/permission/basic-access/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access/index.tsx
@@ -29,18 +29,20 @@ export const PermissionBasicAccessPage: FunctionComponent<{
     <HeaderLayout
       title=""
       fixedHeight={true}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.approve",
-        }),
-        size: "large",
-        isLoading: (() => {
-          const obsolete = data.ids.find((id) => {
-            return permissionStore.isObsoleteInteraction(id);
-          });
-          return !!obsolete;
-        })(),
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.approve",
+          }),
+          size: "large",
+          isLoading: (() => {
+            const obsolete = data.ids.find((id) => {
+              return permissionStore.isObsoleteInteraction(id);
+            });
+            return !!obsolete;
+          })(),
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
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 ac514cc34a..0e4c8a4500 100644
--- a/apps/extension/src/pages/permission/get-chain-infos/index.tsx
+++ b/apps/extension/src/pages/permission/get-chain-infos/index.tsx
@@ -29,13 +29,15 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
     <HeaderLayout
       title=""
       fixedHeight={true}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.approve",
-        }),
-        size: "large",
-        isLoading: permissionStore.isObsoleteInteraction(data.id),
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.approve",
+          }),
+          size: "large",
+          isLoading: permissionStore.isObsoleteInteraction(data.id),
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
diff --git a/apps/extension/src/pages/send/amount/index.tsx b/apps/extension/src/pages/send/amount/index.tsx
index e25ddd4313..9ac0494885 100644
--- a/apps/extension/src/pages/send/amount/index.tsx
+++ b/apps/extension/src/pages/send/amount/index.tsx
@@ -475,16 +475,18 @@ export const SendAmountPage: FunctionComponent = observer(() => {
           </Box>
         )
       }
-      bottomButton={{
-        disabled: txConfigsValidate.interactionBlocked,
-        text: intl.formatMessage({ id: "button.next" }),
-        color: "primary",
-        size: "large",
-        isLoading: isEvmTx
-          ? ethereumAccount.isSendingTx
-          : accountStore.getAccount(chainId).isSendingMsg ===
-            (!isIBCTransfer ? "send" : "ibcTransfer"),
-      }}
+      bottomButtons={[
+        {
+          disabled: txConfigsValidate.interactionBlocked,
+          text: intl.formatMessage({ id: "button.next" }),
+          color: "primary",
+          size: "large",
+          isLoading: isEvmTx
+            ? ethereumAccount.isSendingTx
+            : accountStore.getAccount(chainId).isSendingMsg ===
+              (!isIBCTransfer ? "send" : "ibcTransfer"),
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
diff --git a/apps/extension/src/pages/setting/advanced/endpoint/index.tsx b/apps/extension/src/pages/setting/advanced/endpoint/index.tsx
index 5cbd13cee6..c2588df6b9 100644
--- a/apps/extension/src/pages/setting/advanced/endpoint/index.tsx
+++ b/apps/extension/src/pages/setting/advanced/endpoint/index.tsx
@@ -129,15 +129,17 @@ export const SettingAdvancedEndpointPage: FunctionComponent = observer(() => {
       })}
       fixedHeight={true}
       left={<BackButton />}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.confirm",
-        }),
-        color: "primary",
-        size: "large",
-        isLoading,
-        disabled: isEndpointNothingChanged,
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.confirm",
+          }),
+          color: "primary",
+          size: "large",
+          isLoading,
+          disabled: isEndpointNothingChanged,
+        },
+      ]}
       onSubmit={handleSubmit(async (data) => {
         setIsLoading(true);
 
diff --git a/apps/extension/src/pages/setting/contacts/add/index.tsx b/apps/extension/src/pages/setting/contacts/add/index.tsx
index 8c4253f9fe..2408a482af 100644
--- a/apps/extension/src/pages/setting/contacts/add/index.tsx
+++ b/apps/extension/src/pages/setting/contacts/add/index.tsx
@@ -154,17 +154,19 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
 
         navigate(-1);
       }}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.confirm",
-        }),
-        color: "secondary",
-        size: "large",
-        disabled:
-          (isStarknet
-            ? txConfigsValidateForStarknet.interactionBlocked
-            : txConfigsValidate.interactionBlocked) || name === "",
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.confirm",
+          }),
+          color: "secondary",
+          size: "large",
+          disabled:
+            (isStarknet
+              ? txConfigsValidateForStarknet.interactionBlocked
+              : txConfigsValidate.interactionBlocked) || name === "",
+        },
+      ]}
     >
       <Styles.Container gutter="1rem">
         <TextInput
diff --git a/apps/extension/src/pages/setting/general/authz/revoke/index.tsx b/apps/extension/src/pages/setting/general/authz/revoke/index.tsx
index a6f68dc37f..13c069bd31 100644
--- a/apps/extension/src/pages/setting/general/authz/revoke/index.tsx
+++ b/apps/extension/src/pages/setting/general/authz/revoke/index.tsx
@@ -179,14 +179,16 @@ export const SettingGeneralAuthZRevokePage: FunctionComponent = observer(() => {
         id: "page.setting.general.authz.revoke.title",
       })}
       left={<BackButton />}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "page.setting.general.authz.revoke.revoke-button",
-        }),
-        color: "danger",
-        size: "large",
-        onClick: () => onClickRevokeButton(state.grant),
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "page.setting.general.authz.revoke.revoke-button",
+          }),
+          color: "danger",
+          size: "large",
+          onClick: () => onClickRevokeButton(state.grant),
+        },
+      ]}
     >
       <Box paddingX="0.75rem">
         <Stack gutter="0.5rem">
diff --git a/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx b/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx
index c420071183..c2e19bcac9 100644
--- a/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx
+++ b/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx
@@ -168,15 +168,17 @@ const EnterPasswordView: FunctionComponent<{
         id: "page.setting.general.link-kpelr-mobile-title",
       })}
       left={<BackButton />}
-      bottomButton={{
-        color: "secondary",
-        text: intl.formatMessage({
-          id: "button.confirm",
-        }),
-        size: "large",
-        isLoading,
-        disabled: password.length === 0,
-      }}
+      bottomButtons={[
+        {
+          color: "secondary",
+          text: intl.formatMessage({
+            id: "button.confirm",
+          }),
+          size: "large",
+          isLoading,
+          disabled: password.length === 0,
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
diff --git a/apps/extension/src/pages/setting/security/auto-lock/index.tsx b/apps/extension/src/pages/setting/security/auto-lock/index.tsx
index dc97083ecf..298236989a 100644
--- a/apps/extension/src/pages/setting/security/auto-lock/index.tsx
+++ b/apps/extension/src/pages/setting/security/auto-lock/index.tsx
@@ -92,14 +92,16 @@ export const SettingSecurityAutoLockPage: FunctionComponent = observer(() => {
         id: "page.setting.security.auto-lock-title",
       })}
       left={<BackButton />}
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "button.confirm",
-        }),
-        color: "secondary",
-        size: "large",
-        isLoading,
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.confirm",
+          }),
+          color: "secondary",
+          size: "large",
+          isLoading,
+        },
+      ]}
       onSubmit={handleSubmit(async (data) => {
         setIsLoading(true);
 
diff --git a/apps/extension/src/pages/setting/security/change-password/index.tsx b/apps/extension/src/pages/setting/security/change-password/index.tsx
index 2427871644..f44cfe08a7 100644
--- a/apps/extension/src/pages/setting/security/change-password/index.tsx
+++ b/apps/extension/src/pages/setting/security/change-password/index.tsx
@@ -39,14 +39,16 @@ export const SettingSecurityChangePasswordPage: FunctionComponent = observer(
           id: "page.setting.security.change-password-title",
         })}
         left={<BackButton />}
-        bottomButton={{
-          text: intl.formatMessage({
-            id: "button.next",
-          }),
-          color: "secondary",
-          size: "large",
-          isLoading,
-        }}
+        bottomButtons={[
+          {
+            text: intl.formatMessage({
+              id: "button.next",
+            }),
+            color: "secondary",
+            size: "large",
+            isLoading,
+          },
+        ]}
         onSubmit={form.handleSubmit(async (data) => {
           setIsLoading(true);
 
diff --git a/apps/extension/src/pages/setting/token/add/index.tsx b/apps/extension/src/pages/setting/token/add/index.tsx
index 6a6707fc75..02f0c70565 100644
--- a/apps/extension/src/pages/setting/token/add/index.tsx
+++ b/apps/extension/src/pages/setting/token/add/index.tsx
@@ -233,17 +233,19 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
           }
         />
       }
-      bottomButton={{
-        text: intl.formatMessage({
-          id: "page.setting.token.add.confirm-button",
-        }),
-        color: "secondary",
-        size: "large",
-        disabled:
-          contractAddress.length === 0 ||
-          !queryContract.tokenInfo ||
-          (isSecretWasm && !accountStore.getAccount(chainId).isReadyToSendTx),
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "page.setting.token.add.confirm-button",
+          }),
+          color: "secondary",
+          size: "large",
+          disabled:
+            contractAddress.length === 0 ||
+            !queryContract.tokenInfo ||
+            (isSecretWasm && !accountStore.getAccount(chainId).isReadyToSendTx),
+        },
+      ]}
       onSubmit={handleSubmit(async (data) => {
         if (queryContract.tokenInfo) {
           let currency: AppCurrency;
diff --git a/apps/extension/src/pages/sign/cosmos/adr36.tsx b/apps/extension/src/pages/sign/cosmos/adr36.tsx
index 375b016631..da9973a567 100644
--- a/apps/extension/src/pages/sign/cosmos/adr36.tsx
+++ b/apps/extension/src/pages/sign/cosmos/adr36.tsx
@@ -132,108 +132,110 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
           }
         />
       }
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.approve" }),
-        color: "primary",
-        size: "large",
-        disabled: signInteractionStore.waitingData == null,
-        isLoading:
-          signInteractionStore.isObsoleteInteraction(
-            signInteractionStore.waitingData?.id
-          ) ||
-          isLedgerInteracting ||
-          isKeystoneInteracting,
-        onClick: async () => {
-          if (signInteractionStore.waitingData) {
-            const signDocWrapper =
-              signInteractionStore.waitingData.data.signDocWrapper;
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.approve" }),
+          color: "primary",
+          size: "large",
+          disabled: signInteractionStore.waitingData == null,
+          isLoading:
+            signInteractionStore.isObsoleteInteraction(
+              signInteractionStore.waitingData?.id
+            ) ||
+            isLedgerInteracting ||
+            isKeystoneInteracting,
+          onClick: async () => {
+            if (signInteractionStore.waitingData) {
+              const signDocWrapper =
+                signInteractionStore.waitingData.data.signDocWrapper;
 
-            if (
-              signDocWrapper.mode !== "amino" ||
-              !checkAndValidateADR36AminoSignDoc(
-                signDocWrapper.aminoSignDoc,
-                chainStore.getChain(
-                  signInteractionStore.waitingData.data.chainId
-                ).bech32Config?.bech32PrefixAccAddr
-              )
-            ) {
-              throw new Error("Invalid sign doc for adr36");
-            }
-
-            let presignOptions;
-            if (signInteractionStore.waitingData.data.keyType === "ledger") {
-              setIsLedgerInteracting(true);
-              setLedgerInteractingError(undefined);
-              presignOptions = {
-                useWebHID: uiConfigStore.useWebHIDLedger,
-              };
-            } else if (
-              signInteractionStore.waitingData.data.keyType === "keystone"
-            ) {
-              setIsKeystoneInteracting(true);
-              setKeystoneInteractingError(undefined);
-              const isEthSigning = KeyRingService.isEthermintLike(
-                chainStore.getChain(
-                  signInteractionStore.waitingData.data.chainId
+              if (
+                signDocWrapper.mode !== "amino" ||
+                !checkAndValidateADR36AminoSignDoc(
+                  signDocWrapper.aminoSignDoc,
+                  chainStore.getChain(
+                    signInteractionStore.waitingData.data.chainId
+                  ).bech32Config?.bech32PrefixAccAddr
                 )
-              );
-              presignOptions = {
-                isEthSigning,
-                displayQRCode: async (ur: KeystoneUR) => {
-                  setKeystoneUR(ur);
-                },
-                scanQRCode: () =>
-                  new Promise<KeystoneUR>((resolve) => {
-                    keystoneScanResolve.current = resolve;
-                  }),
-              };
-            }
+              ) {
+                throw new Error("Invalid sign doc for adr36");
+              }
+
+              let presignOptions;
+              if (signInteractionStore.waitingData.data.keyType === "ledger") {
+                setIsLedgerInteracting(true);
+                setLedgerInteractingError(undefined);
+                presignOptions = {
+                  useWebHID: uiConfigStore.useWebHIDLedger,
+                };
+              } else if (
+                signInteractionStore.waitingData.data.keyType === "keystone"
+              ) {
+                setIsKeystoneInteracting(true);
+                setKeystoneInteractingError(undefined);
+                const isEthSigning = KeyRingService.isEthermintLike(
+                  chainStore.getChain(
+                    signInteractionStore.waitingData.data.chainId
+                  )
+                );
+                presignOptions = {
+                  isEthSigning,
+                  displayQRCode: async (ur: KeystoneUR) => {
+                    setKeystoneUR(ur);
+                  },
+                  scanQRCode: () =>
+                    new Promise<KeystoneUR>((resolve) => {
+                      keystoneScanResolve.current = resolve;
+                    }),
+                };
+              }
 
-            try {
-              const signature = await handleCosmosPreSign(
-                signInteractionStore.waitingData,
-                signDocWrapper,
-                presignOptions
-              );
+              try {
+                const signature = await handleCosmosPreSign(
+                  signInteractionStore.waitingData,
+                  signDocWrapper,
+                  presignOptions
+                );
 
-              await signInteractionStore.approveWithProceedNext(
-                signInteractionStore.waitingData.id,
-                signDocWrapper,
-                signature,
-                (proceedNext) => {
-                  if (!proceedNext) {
-                    if (
-                      interactionInfo.interaction &&
-                      !interactionInfo.interactionInternal
-                    ) {
-                      handleExternalInteractionWithNoProceedNext();
+                await signInteractionStore.approveWithProceedNext(
+                  signInteractionStore.waitingData.id,
+                  signDocWrapper,
+                  signature,
+                  (proceedNext) => {
+                    if (!proceedNext) {
+                      if (
+                        interactionInfo.interaction &&
+                        !interactionInfo.interactionInternal
+                      ) {
+                        handleExternalInteractionWithNoProceedNext();
+                      }
                     }
                   }
-                }
-              );
-            } catch (e) {
-              console.log(e);
+                );
+              } catch (e) {
+                console.log(e);
 
-              if (e instanceof KeplrError) {
-                if (e.module === ErrModuleLedgerSign) {
-                  setLedgerInteractingError(e);
-                } else if (e.module === ErrModuleKeystoneSign) {
-                  setKeystoneInteractingError(e);
+                if (e instanceof KeplrError) {
+                  if (e.module === ErrModuleLedgerSign) {
+                    setLedgerInteractingError(e);
+                  } else if (e.module === ErrModuleKeystoneSign) {
+                    setKeystoneInteractingError(e);
+                  } else {
+                    setLedgerInteractingError(undefined);
+                    setKeystoneInteractingError(undefined);
+                  }
                 } else {
                   setLedgerInteractingError(undefined);
                   setKeystoneInteractingError(undefined);
                 }
-              } else {
-                setLedgerInteractingError(undefined);
-                setKeystoneInteractingError(undefined);
+              } finally {
+                setIsLedgerInteracting(false);
+                setIsKeystoneInteracting(false);
               }
-            } finally {
-              setIsLedgerInteracting(false);
-              setIsKeystoneInteracting(false);
             }
-          }
+          },
         },
-      }}
+      ]}
     >
       <Box
         height="100%"
diff --git a/apps/extension/src/pages/sign/cosmos/icns/index.tsx b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
index 1edaa25fe2..a73bfa595d 100644
--- a/apps/extension/src/pages/sign/cosmos/icns/index.tsx
+++ b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
@@ -26,21 +26,23 @@ export const SignCosmosICNSPage: FunctionComponent = observer(() => {
     <HeaderLayout
       title=""
       fixedHeight={true}
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.approve" }),
-        size: "large",
-        isLoading: (() => {
-          if (
-            icnsInteractionStore.waitingData &&
-            icnsInteractionStore.isObsoleteInteraction(
-              icnsInteractionStore.waitingData.id
-            )
-          ) {
-            return true;
-          }
-        })(),
-        disabled: icnsInteractionStore.waitingData == null,
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.approve" }),
+          size: "large",
+          isLoading: (() => {
+            if (
+              icnsInteractionStore.waitingData &&
+              icnsInteractionStore.isObsoleteInteraction(
+                icnsInteractionStore.waitingData.id
+              )
+            ) {
+              return true;
+            }
+          })(),
+          disabled: icnsInteractionStore.waitingData == null,
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
diff --git a/apps/extension/src/pages/sign/cosmos/tx/view.tsx b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
index ddcacaabdd..8af1ad77f8 100644
--- a/apps/extension/src/pages/sign/cosmos/tx/view.tsx
+++ b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
@@ -499,17 +499,19 @@ export const CosmosTxView: FunctionComponent<{
         />
       }
       // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
-      bottomButton={{
-        isSpecial: true,
-        text: intl.formatMessage({ id: "button.approve" }),
-        size: "large",
-        disabled: buttonDisabled,
-        isLoading:
-          signInteractionStore.isObsoleteInteraction(interactionData.id) ||
-          isLedgerInteracting ||
-          isKeystoneInteracting,
-        onClick: approve,
-      }}
+      bottomButtons={[
+        {
+          isSpecial: true,
+          text: intl.formatMessage({ id: "button.approve" }),
+          size: "large",
+          disabled: buttonDisabled,
+          isLoading:
+            signInteractionStore.isObsoleteInteraction(interactionData.id) ||
+            isLedgerInteracting ||
+            isKeystoneInteracting,
+          onClick: approve,
+        },
+      ]}
     >
       <Box
         height="100%"
diff --git a/apps/extension/src/pages/sign/ethereum/view.tsx b/apps/extension/src/pages/sign/ethereum/view.tsx
index 8db7762ec9..b30a9852e5 100644
--- a/apps/extension/src/pages/sign/ethereum/view.tsx
+++ b/apps/extension/src/pages/sign/ethereum/view.tsx
@@ -353,99 +353,101 @@ export const EthereumSigningView: FunctionComponent<{
           }
         />
       }
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.approve" }),
-        color: "primary",
-        size: "large",
-        isLoading:
-          signEthereumInteractionStore.isObsoleteInteraction(
-            interactionData.id
-          ) ||
-          isLedgerInteracting ||
-          isKeystoneInteracting,
-        onClick: async () => {
-          try {
-            let signature;
-            if (interactionData.data.keyType === "ledger") {
-              setIsLedgerInteracting(true);
-              setLedgerInteractingError(undefined);
-              signature = await handleEthereumPreSignByLedger(
-                interactionData,
-                Buffer.from(signingDataText),
-                {
-                  useWebHID: uiConfigStore.useWebHIDLedger,
-                }
-              );
-            } else if (interactionData.data.keyType === "keystone") {
-              setIsKeystoneInteracting(true);
-              setKeystoneInteractingError(undefined);
-              signature = await handleEthereumPreSignByKeystone(
-                interactionData,
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.approve" }),
+          color: "primary",
+          size: "large",
+          isLoading:
+            signEthereumInteractionStore.isObsoleteInteraction(
+              interactionData.id
+            ) ||
+            isLedgerInteracting ||
+            isKeystoneInteracting,
+          onClick: async () => {
+            try {
+              let signature;
+              if (interactionData.data.keyType === "ledger") {
+                setIsLedgerInteracting(true);
+                setLedgerInteractingError(undefined);
+                signature = await handleEthereumPreSignByLedger(
+                  interactionData,
+                  Buffer.from(signingDataText),
+                  {
+                    useWebHID: uiConfigStore.useWebHIDLedger,
+                  }
+                );
+              } else if (interactionData.data.keyType === "keystone") {
+                setIsKeystoneInteracting(true);
+                setKeystoneInteractingError(undefined);
+                signature = await handleEthereumPreSignByKeystone(
+                  interactionData,
+                  Buffer.from(signingDataText),
+                  {
+                    displayQRCode: async (ur: KeystoneUR) => {
+                      setKeystoneUR(ur);
+                    },
+                    scanQRCode: () =>
+                      new Promise<KeystoneUR>((resolve) => {
+                        keystoneScanResolve.current = resolve;
+                      }),
+                  }
+                );
+              }
+
+              await signEthereumInteractionStore.approveWithProceedNext(
+                interactionData.id,
                 Buffer.from(signingDataText),
-                {
-                  displayQRCode: async (ur: KeystoneUR) => {
-                    setKeystoneUR(ur);
-                  },
-                  scanQRCode: () =>
-                    new Promise<KeystoneUR>((resolve) => {
-                      keystoneScanResolve.current = resolve;
-                    }),
-                }
-              );
-            }
+                signature,
+                async (proceedNext) => {
+                  if (!proceedNext) {
+                    if (
+                      interactionInfo.interaction &&
+                      !interactionInfo.interactionInternal
+                    ) {
+                      handleExternalInteractionWithNoProceedNext();
+                    }
+                  }
 
-            await signEthereumInteractionStore.approveWithProceedNext(
-              interactionData.id,
-              Buffer.from(signingDataText),
-              signature,
-              async (proceedNext) => {
-                if (!proceedNext) {
                   if (
                     interactionInfo.interaction &&
-                    !interactionInfo.interactionInternal
+                    interactionInfo.interactionInternal
                   ) {
-                    handleExternalInteractionWithNoProceedNext();
+                    // XXX: 약간 난해한 부분인데
+                    //      내부의 tx의 경우에는 tx 이후의 routing을 요청한 쪽에서 처리한다.
+                    //      하지만 tx를 처리할때 tx broadcast 등의 과정이 있고
+                    //      서명 페이지에서는 이러한 과정이 끝났는지 아닌지를 파악하기 힘들다.
+                    //      만약에 밑과같은 처리를 하지 않으면 interaction data가 먼저 지워지면서
+                    //      화면이 깜빡거리는 문제가 발생한다.
+                    //      이 문제를 해결하기 위해서 내부의 tx는 보내는 쪽에서 routing을 잘 처리한다고 가정하고
+                    //      페이지를 벗어나고 나서야 data를 지우도록한다.
+                    await unmountPromise.promise;
                   }
                 }
-
-                if (
-                  interactionInfo.interaction &&
-                  interactionInfo.interactionInternal
-                ) {
-                  // XXX: 약간 난해한 부분인데
-                  //      내부의 tx의 경우에는 tx 이후의 routing을 요청한 쪽에서 처리한다.
-                  //      하지만 tx를 처리할때 tx broadcast 등의 과정이 있고
-                  //      서명 페이지에서는 이러한 과정이 끝났는지 아닌지를 파악하기 힘들다.
-                  //      만약에 밑과같은 처리를 하지 않으면 interaction data가 먼저 지워지면서
-                  //      화면이 깜빡거리는 문제가 발생한다.
-                  //      이 문제를 해결하기 위해서 내부의 tx는 보내는 쪽에서 routing을 잘 처리한다고 가정하고
-                  //      페이지를 벗어나고 나서야 data를 지우도록한다.
-                  await unmountPromise.promise;
+              );
+            } catch (e) {
+              console.log(e);
+
+              if (e instanceof KeplrError) {
+                if (e.module === ErrModuleLedgerSign) {
+                  setLedgerInteractingError(e);
+                } else if (e.module === ErrModuleKeystoneSign) {
+                  setKeystoneInteractingError(e);
+                } else {
+                  setLedgerInteractingError(undefined);
+                  setKeystoneInteractingError(undefined);
                 }
-              }
-            );
-          } catch (e) {
-            console.log(e);
-
-            if (e instanceof KeplrError) {
-              if (e.module === ErrModuleLedgerSign) {
-                setLedgerInteractingError(e);
-              } else if (e.module === ErrModuleKeystoneSign) {
-                setKeystoneInteractingError(e);
               } else {
                 setLedgerInteractingError(undefined);
                 setKeystoneInteractingError(undefined);
               }
-            } else {
-              setLedgerInteractingError(undefined);
-              setKeystoneInteractingError(undefined);
+            } finally {
+              setIsLedgerInteracting(false);
+              setIsKeystoneInteracting(false);
             }
-          } finally {
-            setIsLedgerInteracting(false);
-            setIsKeystoneInteracting(false);
-          }
+          },
         },
-      }}
+      ]}
     >
       <Box
         height="100%"
diff --git a/apps/extension/src/pages/starknet/send/index.tsx b/apps/extension/src/pages/starknet/send/index.tsx
index 054b0f96a5..7a7f86df48 100644
--- a/apps/extension/src/pages/starknet/send/index.tsx
+++ b/apps/extension/src/pages/starknet/send/index.tsx
@@ -341,24 +341,26 @@ export const StarknetSendPage: FunctionComponent = observer(() => {
           </Box>
         )
       }
-      bottomButton={{
-        disabled:
-          starknetAccount.isDeployingAccount ||
-          (!isAccountNotDeployed && txConfigsValidate.interactionBlocked),
-        left: starknetAccount.isDeployingAccount ? (
-          <Box marginRight="0.25rem">
-            <LoadingIcon width="1rem" height="1rem" />
-          </Box>
-        ) : undefined,
-        text: starknetAccount.isDeployingAccount
-          ? `${intl.formatMessage({ id: "button.activating" })}...`
-          : isAccountNotDeployed
-          ? intl.formatMessage({ id: "button.activate-account" })
-          : intl.formatMessage({ id: "button.next" }),
-        color: "primary",
-        size: "large",
-        isLoading,
-      }}
+      bottomButtons={[
+        {
+          disabled:
+            starknetAccount.isDeployingAccount ||
+            (!isAccountNotDeployed && txConfigsValidate.interactionBlocked),
+          left: starknetAccount.isDeployingAccount ? (
+            <Box marginRight="0.25rem">
+              <LoadingIcon width="1rem" height="1rem" />
+            </Box>
+          ) : undefined,
+          text: starknetAccount.isDeployingAccount
+            ? `${intl.formatMessage({ id: "button.activating" })}...`
+            : isAccountNotDeployed
+            ? intl.formatMessage({ id: "button.activate-account" })
+            : intl.formatMessage({ id: "button.next" }),
+          color: "primary",
+          size: "large",
+          isLoading,
+        },
+      ]}
       onSubmit={async (e) => {
         e.preventDefault();
 
diff --git a/apps/extension/src/pages/starknet/sign/tx/view.tsx b/apps/extension/src/pages/starknet/sign/tx/view.tsx
index 7fb3dcf286..c43e43450f 100644
--- a/apps/extension/src/pages/starknet/sign/tx/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/tx/view.tsx
@@ -345,16 +345,18 @@ export const SignStarknetTxView: FunctionComponent<{
         />
       }
       // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
-      bottomButton={{
-        isSpecial: true,
-        text: intl.formatMessage({ id: "button.approve" }),
-        size: "large",
-        disabled: buttonDisabled,
-        isLoading: signStarknetTxInteractionStore.isObsoleteInteraction(
-          interactionData.id
-        ),
-        onClick: approve,
-      }}
+      bottomButtons={[
+        {
+          isSpecial: true,
+          text: intl.formatMessage({ id: "button.approve" }),
+          size: "large",
+          disabled: buttonDisabled,
+          isLoading: signStarknetTxInteractionStore.isObsoleteInteraction(
+            interactionData.id
+          ),
+          onClick: approve,
+        },
+      ]}
     >
       <Box
         height="100%"
diff --git a/apps/extension/src/pages/suggest-chain/index.tsx b/apps/extension/src/pages/suggest-chain/index.tsx
index 73421608cf..ff78d89100 100644
--- a/apps/extension/src/pages/suggest-chain/index.tsx
+++ b/apps/extension/src/pages/suggest-chain/index.tsx
@@ -93,52 +93,54 @@ const SuggestChainPageImpl: FunctionComponent<{
           </Box>
         ) : undefined
       }
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.approve" }),
-        size: "large",
-        color: "primary",
-        isLoading: permissionStore.isObsoleteInteraction(waitingData.id),
-        onClick: async () => {
-          const chainInfo =
-            communityChainInfo && !updateFromRepoDisabled
-              ? communityChainInfo
-              : waitingData.data.chainInfo;
-
-          const ids = new Set([waitingData.id]);
-          for (const data of chainSuggestStore.waitingSuggestedChainInfos) {
-            if (
-              data.data.chainInfo.chainId ===
-                waitingData.data.chainInfo.chainId &&
-              data.data.origin === waitingData.data.origin
-            ) {
-              ids.add(data.id);
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.approve" }),
+          size: "large",
+          color: "primary",
+          isLoading: permissionStore.isObsoleteInteraction(waitingData.id),
+          onClick: async () => {
+            const chainInfo =
+              communityChainInfo && !updateFromRepoDisabled
+                ? communityChainInfo
+                : waitingData.data.chainInfo;
+
+            const ids = new Set([waitingData.id]);
+            for (const data of chainSuggestStore.waitingSuggestedChainInfos) {
+              if (
+                data.data.chainInfo.chainId ===
+                  waitingData.data.chainInfo.chainId &&
+                data.data.origin === waitingData.data.origin
+              ) {
+                ids.add(data.id);
+              }
             }
-          }
-          await chainSuggestStore.approveWithProceedNext(
-            Array.from(ids),
-            {
-              ...chainInfo,
-              updateFromRepoDisabled,
-            },
-            async (proceedNext) => {
-              await keyRingStore.refreshKeyRingStatus();
-              await chainStore.updateChainInfosFromBackground();
-              await chainStore.updateEnabledChainIdentifiersFromBackground();
-
-              dispatchGlobalEventExceptSelf("keplr_suggested_chain_added");
-
-              if (!proceedNext) {
-                if (
-                  interactionInfo.interaction &&
-                  !interactionInfo.interactionInternal
-                ) {
-                  handleExternalInteractionWithNoProceedNext();
+            await chainSuggestStore.approveWithProceedNext(
+              Array.from(ids),
+              {
+                ...chainInfo,
+                updateFromRepoDisabled,
+              },
+              async (proceedNext) => {
+                await keyRingStore.refreshKeyRingStatus();
+                await chainStore.updateChainInfosFromBackground();
+                await chainStore.updateEnabledChainIdentifiersFromBackground();
+
+                dispatchGlobalEventExceptSelf("keplr_suggested_chain_added");
+
+                if (!proceedNext) {
+                  if (
+                    interactionInfo.interaction &&
+                    !interactionInfo.interactionInternal
+                  ) {
+                    handleExternalInteractionWithNoProceedNext();
+                  }
                 }
               }
-            }
-          );
+            );
+          },
         },
-      }}
+      ]}
     >
       {(() => {
         if (isLoadingPlaceholder) {
diff --git a/apps/extension/src/pages/wallet/change-name/index.tsx b/apps/extension/src/pages/wallet/change-name/index.tsx
index b8aed14196..da2602ffe2 100644
--- a/apps/extension/src/pages/wallet/change-name/index.tsx
+++ b/apps/extension/src/pages/wallet/change-name/index.tsx
@@ -90,19 +90,21 @@ export const WalletChangeNamePage: FunctionComponent = observer(() => {
           }
         />
       }
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.save" }),
-        color: "secondary",
-        size: "large",
-        type: "submit",
-        isLoading: (() => {
-          if (!interactionInfo.interaction) {
-            return false;
-          }
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.save" }),
+          color: "secondary",
+          size: "large",
+          type: "submit",
+          isLoading: (() => {
+            if (!interactionInfo.interaction) {
+              return false;
+            }
 
-          return interactionStore.isObsoleteInteraction(interactionData?.id);
-        })(),
-      }}
+            return interactionStore.isObsoleteInteraction(interactionData?.id);
+          })(),
+        },
+      ]}
       onSubmit={handleSubmit(async (data) => {
         try {
           if (vaultId) {
diff --git a/apps/extension/src/pages/wallet/delete/index.tsx b/apps/extension/src/pages/wallet/delete/index.tsx
index 50a2a7e7f6..ce3bc6863e 100644
--- a/apps/extension/src/pages/wallet/delete/index.tsx
+++ b/apps/extension/src/pages/wallet/delete/index.tsx
@@ -96,12 +96,14 @@ export const WalletDeletePage: FunctionComponent = observer(() => {
       })}
       fixedHeight={true}
       left={<BackButton />}
-      bottomButton={{
-        text: intl.formatMessage({ id: "button.confirm" }),
-        color: "secondary",
-        size: "large",
-        type: "submit",
-      }}
+      bottomButtons={[
+        {
+          text: intl.formatMessage({ id: "button.confirm" }),
+          color: "secondary",
+          size: "large",
+          type: "submit",
+        },
+      ]}
       onSubmit={handleSubmit(async (data) => {
         try {
           if (vaultId) {
diff --git a/apps/extension/src/pages/wallet/show-sensitive/index.tsx b/apps/extension/src/pages/wallet/show-sensitive/index.tsx
index be982104f6..42671c8b6c 100644
--- a/apps/extension/src/pages/wallet/show-sensitive/index.tsx
+++ b/apps/extension/src/pages/wallet/show-sensitive/index.tsx
@@ -89,7 +89,7 @@ export const WalletShowSensitivePage: FunctionComponent = observer(() => {
       })()}
       left={<BackButton />}
       fixedHeight={true}
-      bottomButton={
+      bottomButtons={[
         sensitive === ""
           ? {
               color: "secondary",
@@ -111,8 +111,8 @@ export const WalletShowSensitivePage: FunctionComponent = observer(() => {
                   replace: true,
                 });
               },
-            }
-      }
+            },
+      ]}
       onSubmit={
         sensitive === ""
           ? handleSubmit(async (data) => {

From d30b7e0d0dfe0b7aa05186d2db6eb903db8a469b Mon Sep 17 00:00:00 2001
From: rowan <crewe1746@naver.com>
Date: Tue, 5 Nov 2024 16:06:54 +0900
Subject: [PATCH 3/7] Refactor HeaderLayout component and specify submit type
 for buttons that trigger the onSubmit function

---
 apps/extension/src/layouts/header/header.tsx  | 103 ++++++------------
 apps/extension/src/layouts/header/types.ts    |   1 +
 .../permission/basic-access-for-evm/index.tsx |   1 +
 .../basic-access-for-starknet/index.tsx       |   1 +
 .../pages/permission/basic-access/index.tsx   |   1 +
 .../permission/get-chain-infos/index.tsx      |   1 +
 .../extension/src/pages/send/amount/index.tsx |   1 +
 .../pages/setting/advanced/endpoint/index.tsx |   1 +
 .../src/pages/setting/contacts/add/index.tsx  |   1 +
 .../general/link-keplr-mobile/index.tsx       |   1 +
 .../setting/security/auto-lock/index.tsx      |   1 +
 .../security/change-password/index.tsx        |   1 +
 .../src/pages/setting/token/add/index.tsx     |   1 +
 .../src/pages/sign/cosmos/icns/index.tsx      |   1 +
 .../src/pages/starknet/send/index.tsx         |   1 +
 15 files changed, 50 insertions(+), 67 deletions(-)

diff --git a/apps/extension/src/layouts/header/header.tsx b/apps/extension/src/layouts/header/header.tsx
index 4220d3ed22..22466259b4 100644
--- a/apps/extension/src/layouts/header/header.tsx
+++ b/apps/extension/src/layouts/header/header.tsx
@@ -9,10 +9,15 @@ import { HeaderProps } from "./types";
 import { Subtitle1 } from "../../components/typography";
 import { ColorPalette } from "../../styles";
 import { Box } from "../../components/box";
-import { Button, getButtonHeightRem } from "../../components/button";
+import {
+  Button,
+  ButtonProps,
+  getButtonHeightRem,
+} from "../../components/button";
 import { Skeleton } from "../../components/skeleton";
 import {
   SpecialButton,
+  SpecialButtonProps,
   getSpecialButtonHeightRem,
 } from "../../components/special-button";
 
@@ -183,6 +188,7 @@ export const HeaderLayout: FunctionComponent<
   left,
   right,
   bottomButtons,
+  bottomButtonsContainerStyle,
   displayFlex,
   fixedHeight,
   fixedMinHeight,
@@ -225,28 +231,38 @@ export const HeaderLayout: FunctionComponent<
       return "0";
     }
 
-    const specialButton = bottomButtons.find((button) => button.isSpecial);
+    const buttonHeights = bottomButtons.map((button) => {
+      return button.isSpecial
+        ? getSpecialButtonHeightRem(button.size)
+        : getButtonHeightRem(button.size);
+    });
+
+    const maxButtonHeightRem = Math.max(...buttonHeights);
 
-    if (!!specialButton) {
-      return (
-        bottomButtonPaddingRem * 2 +
-        getSpecialButtonHeightRem(specialButton.size) +
-        "rem"
-      );
+    return `${bottomButtonPaddingRem * 2 + maxButtonHeightRem}rem`;
+  })();
+
+  const renderButton = (
+    button:
+      | ({ isSpecial?: false } & ButtonProps)
+      | ({ isSpecial: true } & SpecialButtonProps),
+    index: number
+  ) => {
+    if (button.isSpecial) {
+      // isSpecial is not used.
+      const { isSpecial, ...other } = button;
+      return <SpecialButton key={index} {...other} />;
     }
 
-    const largestButton = bottomButtons.reduce((prev, current) => {
-      return getButtonHeightRem(prev.size) > getButtonHeightRem(current.size)
-        ? prev
-        : current;
-    }, bottomButtons[0]);
+    // isSpecial is not used.
+    const { isSpecial, ...other } = button;
 
     return (
-      bottomButtonPaddingRem * 2 +
-      getButtonHeightRem(largestButton.size) +
-      "rem"
+      <Skeleton isNotReady={isNotReady} type="button" key={index}>
+        <Button {...other} />
+      </Skeleton>
     );
-  })();
+  };
 
   return (
     <Styles.Container as={onSubmit ? "form" : undefined} onSubmit={onSubmit}>
@@ -303,7 +319,8 @@ export const HeaderLayout: FunctionComponent<
             gridTemplateColumns: hasMultipleBottomButton
               ? `repeat(${bottomButtons.length}, 1fr)`
               : undefined,
-            gap: hasMultipleBottomButton ? "12px" : undefined,
+            gap: hasMultipleBottomButton ? "0.75rem" : undefined,
+            ...bottomButtonsContainerStyle,
           }}
         >
           {/*
@@ -323,55 +340,7 @@ export const HeaderLayout: FunctionComponent<
               }}
             />
           ) : null}
-          {/* TODO: 코드 예쁘게 리팩토링하기 */}
-          {hasMultipleBottomButton
-            ? bottomButtons.map((button, index) => {
-                if (button.isSpecial) {
-                  // isSpecial is not used.
-                  const { isSpecial, ...other } = button;
-                  return <SpecialButton {...other} key={index} />;
-                } else {
-                  // isSpecial is not used.
-                  const { isSpecial, type, ...other } = button;
-
-                  // onSubmit prop이 존재한다면 기본적으로 type="submit"으로 설정한다
-
-                  const props = {
-                    ...other,
-                    type: type || onSubmit ? ("submit" as const) : undefined,
-                  };
-
-                  return (
-                    <Skeleton isNotReady={isNotReady} type="button" key={index}>
-                      <Button {...props} />
-                    </Skeleton>
-                  );
-                }
-              })
-            : (() => {
-                if (bottomButtons[0].isSpecial) {
-                  // isSpecial is not used.
-                  const { isSpecial, ...other } = bottomButtons[0];
-                  return <SpecialButton {...other} />;
-                } else {
-                  // isSpecial is not used.
-                  const { isSpecial, type, ...other } = bottomButtons[0];
-
-                  // onSubmit prop이 존재한다면 기본적으로 type="submit"으로 설정한다
-                  // TODO: 만약에 bottomButton이 배열을 받을 수 있도록 수정된다면 이 부분도 수정되어야함.
-
-                  const props = {
-                    ...other,
-                    type: type || onSubmit ? ("submit" as const) : undefined,
-                  };
-
-                  return (
-                    <Skeleton isNotReady={isNotReady} type="button">
-                      <Button {...props} />
-                    </Skeleton>
-                  );
-                }
-              })()}
+          {bottomButtons.map(renderButton)}
         </Box>
       ) : null}
     </Styles.Container>
diff --git a/apps/extension/src/layouts/header/types.ts b/apps/extension/src/layouts/header/types.ts
index 09568e2dd9..add9f91899 100644
--- a/apps/extension/src/layouts/header/types.ts
+++ b/apps/extension/src/layouts/header/types.ts
@@ -12,6 +12,7 @@ export interface HeaderProps {
     | ({ 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 162ba55059..7cfdd70f89 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
@@ -44,6 +44,7 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
             id: "button.approve",
           }),
           size: "large",
+          type: "submit",
           isLoading: (() => {
             const obsolete = data.ids.find((id) => {
               return permissionStore.isObsoleteInteraction(id);
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 50e01659ec..83a4a6a881 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
@@ -43,6 +43,7 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
             id: "button.approve",
           }),
           size: "large",
+          type: "submit",
           isLoading: (() => {
             const obsolete = data.ids.find((id) => {
               return permissionStore.isObsoleteInteraction(id);
diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
index ae70332960..27eb1177ac 100644
--- a/apps/extension/src/pages/permission/basic-access/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access/index.tsx
@@ -34,6 +34,7 @@ export const PermissionBasicAccessPage: FunctionComponent<{
           text: intl.formatMessage({
             id: "button.approve",
           }),
+          type: "submit",
           size: "large",
           isLoading: (() => {
             const obsolete = data.ids.find((id) => {
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 0e4c8a4500..dfffb5c71b 100644
--- a/apps/extension/src/pages/permission/get-chain-infos/index.tsx
+++ b/apps/extension/src/pages/permission/get-chain-infos/index.tsx
@@ -35,6 +35,7 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
             id: "button.approve",
           }),
           size: "large",
+          type: "submit",
           isLoading: permissionStore.isObsoleteInteraction(data.id),
         },
       ]}
diff --git a/apps/extension/src/pages/send/amount/index.tsx b/apps/extension/src/pages/send/amount/index.tsx
index 9ac0494885..8c166f62ce 100644
--- a/apps/extension/src/pages/send/amount/index.tsx
+++ b/apps/extension/src/pages/send/amount/index.tsx
@@ -481,6 +481,7 @@ export const SendAmountPage: FunctionComponent = observer(() => {
           text: intl.formatMessage({ id: "button.next" }),
           color: "primary",
           size: "large",
+          type: "submit",
           isLoading: isEvmTx
             ? ethereumAccount.isSendingTx
             : accountStore.getAccount(chainId).isSendingMsg ===
diff --git a/apps/extension/src/pages/setting/advanced/endpoint/index.tsx b/apps/extension/src/pages/setting/advanced/endpoint/index.tsx
index c2588df6b9..4eabc60b45 100644
--- a/apps/extension/src/pages/setting/advanced/endpoint/index.tsx
+++ b/apps/extension/src/pages/setting/advanced/endpoint/index.tsx
@@ -136,6 +136,7 @@ export const SettingAdvancedEndpointPage: FunctionComponent = observer(() => {
           }),
           color: "primary",
           size: "large",
+          type: "submit",
           isLoading,
           disabled: isEndpointNothingChanged,
         },
diff --git a/apps/extension/src/pages/setting/contacts/add/index.tsx b/apps/extension/src/pages/setting/contacts/add/index.tsx
index 2408a482af..146b4ee18f 100644
--- a/apps/extension/src/pages/setting/contacts/add/index.tsx
+++ b/apps/extension/src/pages/setting/contacts/add/index.tsx
@@ -161,6 +161,7 @@ export const SettingContactsAdd: FunctionComponent = observer(() => {
           }),
           color: "secondary",
           size: "large",
+          type: "submit",
           disabled:
             (isStarknet
               ? txConfigsValidateForStarknet.interactionBlocked
diff --git a/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx b/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx
index c2e19bcac9..98129b5d34 100644
--- a/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx
+++ b/apps/extension/src/pages/setting/general/link-keplr-mobile/index.tsx
@@ -175,6 +175,7 @@ const EnterPasswordView: FunctionComponent<{
             id: "button.confirm",
           }),
           size: "large",
+          type: "submit",
           isLoading,
           disabled: password.length === 0,
         },
diff --git a/apps/extension/src/pages/setting/security/auto-lock/index.tsx b/apps/extension/src/pages/setting/security/auto-lock/index.tsx
index 298236989a..4a5250d194 100644
--- a/apps/extension/src/pages/setting/security/auto-lock/index.tsx
+++ b/apps/extension/src/pages/setting/security/auto-lock/index.tsx
@@ -99,6 +99,7 @@ export const SettingSecurityAutoLockPage: FunctionComponent = observer(() => {
           }),
           color: "secondary",
           size: "large",
+          type: "submit",
           isLoading,
         },
       ]}
diff --git a/apps/extension/src/pages/setting/security/change-password/index.tsx b/apps/extension/src/pages/setting/security/change-password/index.tsx
index f44cfe08a7..cd3e506cf1 100644
--- a/apps/extension/src/pages/setting/security/change-password/index.tsx
+++ b/apps/extension/src/pages/setting/security/change-password/index.tsx
@@ -46,6 +46,7 @@ export const SettingSecurityChangePasswordPage: FunctionComponent = observer(
             }),
             color: "secondary",
             size: "large",
+            type: "submit",
             isLoading,
           },
         ]}
diff --git a/apps/extension/src/pages/setting/token/add/index.tsx b/apps/extension/src/pages/setting/token/add/index.tsx
index 02f0c70565..ff53c11319 100644
--- a/apps/extension/src/pages/setting/token/add/index.tsx
+++ b/apps/extension/src/pages/setting/token/add/index.tsx
@@ -240,6 +240,7 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
           }),
           color: "secondary",
           size: "large",
+          type: "submit",
           disabled:
             contractAddress.length === 0 ||
             !queryContract.tokenInfo ||
diff --git a/apps/extension/src/pages/sign/cosmos/icns/index.tsx b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
index a73bfa595d..bdee589280 100644
--- a/apps/extension/src/pages/sign/cosmos/icns/index.tsx
+++ b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
@@ -30,6 +30,7 @@ export const SignCosmosICNSPage: FunctionComponent = observer(() => {
         {
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
+          type: "submit",
           isLoading: (() => {
             if (
               icnsInteractionStore.waitingData &&
diff --git a/apps/extension/src/pages/starknet/send/index.tsx b/apps/extension/src/pages/starknet/send/index.tsx
index 7a7f86df48..6f6803f887 100644
--- a/apps/extension/src/pages/starknet/send/index.tsx
+++ b/apps/extension/src/pages/starknet/send/index.tsx
@@ -358,6 +358,7 @@ export const StarknetSendPage: FunctionComponent = observer(() => {
             : intl.formatMessage({ id: "button.next" }),
           color: "primary",
           size: "large",
+          type: "submit",
           isLoading,
         },
       ]}

From be007d73b95b4c49eec35fff0421a46a4ddaabe5 Mon Sep 17 00:00:00 2001
From: rowan <crewe1746@naver.com>
Date: Tue, 5 Nov 2024 19:50:08 +0900
Subject: [PATCH 4/7] Add reject button on user interaction required pages

---
 apps/extension/src/languages/en.json                |  1 +
 apps/extension/src/languages/ko.json                |  1 +
 apps/extension/src/languages/zh-cn.json             |  1 +
 .../pages/permission/basic-access-for-evm/index.tsx | 13 +++++++++++++
 .../permission/basic-access-for-starknet/index.tsx  | 13 +++++++++++++
 .../src/pages/permission/basic-access/index.tsx     | 13 +++++++++++++
 .../src/pages/permission/get-chain-infos/index.tsx  | 13 +++++++++++++
 apps/extension/src/pages/sign/cosmos/adr36.tsx      | 13 +++++++++++++
 apps/extension/src/pages/sign/cosmos/icns/index.tsx | 13 +++++++++++++
 apps/extension/src/pages/sign/cosmos/tx/view.tsx    | 13 +++++++++++++
 apps/extension/src/pages/sign/ethereum/view.tsx     | 12 ++++++++++++
 apps/extension/src/pages/starknet/send/index.tsx    | 10 ++++++++++
 apps/extension/src/pages/starknet/sign/tx/view.tsx  | 12 ++++++++++++
 apps/extension/src/pages/suggest-chain/index.tsx    | 13 +++++++++++++
 14 files changed, 141 insertions(+)

diff --git a/apps/extension/src/languages/en.json b/apps/extension/src/languages/en.json
index 08d10500d7..e38732c922 100644
--- a/apps/extension/src/languages/en.json
+++ b/apps/extension/src/languages/en.json
@@ -664,6 +664,7 @@
   "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 00700f8293..9aa42c9cc4 100644
--- a/apps/extension/src/languages/ko.json
+++ b/apps/extension/src/languages/ko.json
@@ -648,6 +648,7 @@
   "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 d17ed699d2..1880363175 100644
--- a/apps/extension/src/languages/zh-cn.json
+++ b/apps/extension/src/languages/zh-cn.json
@@ -619,6 +619,7 @@
   "button.next": "下一步",
   "button.advanced": "高级",
   "button.approve": "确认",
+  "button.reject": "拒绝",
   "button.save": "保存",
   "button.close": "关闭",
   "text-button.select-all": "全选",
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 7cfdd70f89..d27bb93427 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 { useNavigate } from "react-router";
 
 export const PermissionBasicAccessForEVMPage: FunctionComponent<{
   data: {
@@ -25,6 +26,8 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
 
   const interactionInfo = useInteractionInfo();
 
+  const navigate = useNavigate();
+
   const [currentChainIdForEVM, setCurrentChainIdForEVM] = useState<string>(
     data.chainIds[0]
   );
@@ -39,6 +42,16 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
       title=""
       fixedHeight={true}
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({
             id: "button.approve",
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 83a4a6a881..f1b686d451 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 { useNavigate } from "react-router";
 
 export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
   data: {
@@ -25,6 +26,8 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
 
   const interactionInfo = useInteractionInfo();
 
+  const navigate = useNavigate();
+
   const [currentChainIdForStarknet, setCurrentChainIdForStarknet] =
     useState<string>(data.chainIds[0]);
 
@@ -38,6 +41,16 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
       title=""
       fixedHeight={true}
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({
             id: "button.approve",
diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
index 27eb1177ac..09725e3778 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 { useNavigate } from "react-router";
 
 export const PermissionBasicAccessPage: FunctionComponent<{
   data: {
@@ -25,11 +26,23 @@ export const PermissionBasicAccessPage: FunctionComponent<{
 
   const interactionInfo = useInteractionInfo();
 
+  const navigate = useNavigate();
+
   return (
     <HeaderLayout
       title=""
       fixedHeight={true}
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({
             id: "button.approve",
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 dfffb5c71b..3d34807191 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 { useNavigate } from "react-router";
 
 export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
   data: InteractionWaitingData<GlobalPermissionData>;
@@ -25,11 +26,23 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
 
   const interactionInfo = useInteractionInfo();
 
+  const navigate = useNavigate();
+
   return (
     <HeaderLayout
       title=""
       fixedHeight={true}
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({
             id: "button.approve",
diff --git a/apps/extension/src/pages/sign/cosmos/adr36.tsx b/apps/extension/src/pages/sign/cosmos/adr36.tsx
index da9973a567..c805d57c57 100644
--- a/apps/extension/src/pages/sign/cosmos/adr36.tsx
+++ b/apps/extension/src/pages/sign/cosmos/adr36.tsx
@@ -25,12 +25,15 @@ import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
 import { MessageAdr36Icon } from "../../../components/icon";
 import { ItemLogo } from "../../main/token-detail/msg-items/logo";
 import { KeystoneUSBBox } from "../components/keystone-usb-box";
+import { useNavigate } from "react-router";
 
 export const SignCosmosADR36Page: FunctionComponent = observer(() => {
   const { chainStore, signInteractionStore, uiConfigStore } = useStore();
   const intl = useIntl();
   const theme = useTheme();
 
+  const navigate = useNavigate();
+
   const [isViewData, setIsViewData] = useState(false);
 
   const interactionInfo = useInteractionInfo(() => {
@@ -133,6 +136,16 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
         />
       }
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           color: "primary",
diff --git a/apps/extension/src/pages/sign/cosmos/icns/index.tsx b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
index bdee589280..a1d2c4f04c 100644
--- a/apps/extension/src/pages/sign/cosmos/icns/index.tsx
+++ b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
@@ -12,12 +12,15 @@ import { Bech32Address } from "@keplr-wallet/cosmos";
 import { FormattedMessage, useIntl } from "react-intl";
 import { useTheme } from "styled-components";
 import { handleExternalInteractionWithNoProceedNext } from "../../../../utils";
+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();
   });
@@ -27,6 +30,16 @@ export const SignCosmosICNSPage: FunctionComponent = observer(() => {
       title=""
       fixedHeight={true}
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
diff --git a/apps/extension/src/pages/sign/cosmos/tx/view.tsx b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
index 8af1ad77f8..deea6a5997 100644
--- a/apps/extension/src/pages/sign/cosmos/tx/view.tsx
+++ b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
@@ -47,6 +47,7 @@ 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";
 
 /**
  * 서명을 처리할때 웹페이지에서 연속적으로 서명을 요청했을 수 있고
@@ -73,6 +74,8 @@ export const CosmosTxView: FunctionComponent<{
   const intl = useIntl();
   const theme = useTheme();
 
+  const navigate = useNavigate();
+
   const [isViewData, setIsViewData] = useState(false);
 
   const chainId = interactionData.data.chainId;
@@ -500,6 +503,16 @@ export const CosmosTxView: FunctionComponent<{
       }
       // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
diff --git a/apps/extension/src/pages/sign/ethereum/view.tsx b/apps/extension/src/pages/sign/ethereum/view.tsx
index b30a9852e5..c2c639f0dd 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 { useNavigate } from "react-router";
 
 /**
  * CosmosTxView의 주석을 꼭 참고하셈
@@ -71,6 +72,7 @@ export const EthereumSigningView: FunctionComponent<{
   } = useStore();
   const intl = useIntl();
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo(() => {
     signEthereumInteractionStore.rejectAll();
@@ -354,6 +356,16 @@ export const EthereumSigningView: FunctionComponent<{
         />
       }
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           color: "primary",
diff --git a/apps/extension/src/pages/starknet/send/index.tsx b/apps/extension/src/pages/starknet/send/index.tsx
index 6f6803f887..a0b35c5e1d 100644
--- a/apps/extension/src/pages/starknet/send/index.tsx
+++ b/apps/extension/src/pages/starknet/send/index.tsx
@@ -342,6 +342,16 @@ 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/tx/view.tsx b/apps/extension/src/pages/starknet/sign/tx/view.tsx
index c43e43450f..12745f322c 100644
--- a/apps/extension/src/pages/starknet/sign/tx/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/tx/view.tsx
@@ -32,6 +32,7 @@ import { XAxis } from "../../../../components/axis";
 import { ViewDataButton } from "../../../sign/components/view-data-button";
 import { AccountActivationModal } from "../../components/account-activation-modal";
 import { Modal } from "../../../../components/modal";
+import { useNavigate } from "react-router";
 
 export const SignStarknetTxView: FunctionComponent<{
   interactionData: NonNullable<SignStarknetTxInteractionStore["waitingData"]>;
@@ -43,6 +44,7 @@ export const SignStarknetTxView: FunctionComponent<{
   } = useStore();
 
   const theme = useTheme();
+  const navigate = useNavigate();
 
   const { chainStore } = useStore();
 
@@ -346,6 +348,16 @@ export const SignStarknetTxView: FunctionComponent<{
       }
       // 유저가 enter를 눌러서 우발적으로(?) approve를 누르지 않도록 onSubmit을 의도적으로 사용하지 않았음.
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
diff --git a/apps/extension/src/pages/suggest-chain/index.tsx b/apps/extension/src/pages/suggest-chain/index.tsx
index ff78d89100..14d914fe76 100644
--- a/apps/extension/src/pages/suggest-chain/index.tsx
+++ b/apps/extension/src/pages/suggest-chain/index.tsx
@@ -11,6 +11,7 @@ import { ArrowLeftIcon } from "../../components/icon";
 import { Box } from "../../components/box";
 import { handleExternalInteractionWithNoProceedNext } from "../../utils";
 import { dispatchGlobalEventExceptSelf } from "../../utils/global-events";
+import { useNavigate } from "react-router";
 
 export const SuggestChainPage: FunctionComponent = observer(() => {
   const { chainSuggestStore } = useStore();
@@ -45,6 +46,8 @@ const SuggestChainPageImpl: FunctionComponent<{
   const intl = useIntl();
   const interactionInfo = useInteractionInfo();
 
+  const navigate = useNavigate();
+
   const queryCommunityChainInfo = chainSuggestStore.getCommunityChainInfo(
     waitingData.data.chainInfo.chainId
   );
@@ -94,6 +97,16 @@ const SuggestChainPageImpl: FunctionComponent<{
         ) : undefined
       }
       bottomButtons={[
+        {
+          text: intl.formatMessage({
+            id: "button.reject",
+          }),
+          size: "large",
+          color: "secondary",
+          onClick: () => {
+            navigate("/", { replace: true });
+          },
+        },
         {
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",

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 5/7] 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

From 3bf0868833291574425a1857cd1e50e946bbbe93 Mon Sep 17 00:00:00 2001
From: rowan <crewe1746@naver.com>
Date: Mon, 11 Nov 2024 08:24:05 +0900
Subject: [PATCH 6/7] Ensure continuation of request handling when users leave
 interaction-required pages

---
 apps/extension/src/hooks/interaction.ts       | 33 +++++++++++++------
 .../permission/basic-access-for-evm/index.tsx |  6 +++-
 .../basic-access-for-starknet/index.tsx       |  6 +++-
 .../pages/permission/basic-access/index.tsx   | 11 +++++--
 .../permission/get-chain-infos/index.tsx      |  6 +++-
 apps/extension/src/pages/permission/index.tsx |  8 +++--
 .../src/pages/setting/token/add/index.tsx     | 11 +++++--
 .../extension/src/pages/sign/cosmos/adr36.tsx | 14 ++++++--
 .../src/pages/sign/cosmos/icns/index.tsx      | 14 ++++++--
 .../src/pages/sign/cosmos/tx/view.tsx         |  6 +++-
 .../src/pages/sign/cosmos/tx/wrapper.tsx      |  6 ++--
 .../src/pages/sign/ethereum/view.tsx          | 12 +++++--
 .../src/pages/sign/ethereum/wrapper.tsx       |  6 ++--
 .../src/pages/starknet/sign/message/index.tsx |  6 ++--
 .../src/pages/starknet/sign/message/view.tsx  |  9 ++++-
 .../src/pages/starknet/sign/tx/index.tsx      |  6 ++--
 .../src/pages/starknet/sign/tx/view.tsx       |  9 ++++-
 .../src/pages/suggest-chain/index.tsx         | 12 +++++--
 .../src/pages/wallet/change-name/index.tsx    |  8 +++--
 19 files changed, 146 insertions(+), 43 deletions(-)

diff --git a/apps/extension/src/hooks/interaction.ts b/apps/extension/src/hooks/interaction.ts
index 61df427f38..ac08acec9b 100644
--- a/apps/extension/src/hooks/interaction.ts
+++ b/apps/extension/src/hooks/interaction.ts
@@ -1,23 +1,40 @@
 import { useEffect, useMemo, useRef } from "react";
 import { useSearchParams } from "react-router-dom";
 
-export const useInteractionInfo = (cleanUp?: () => void) => {
+export const useInteractionInfo = ({
+  onUnmount,
+  onWindowClose,
+}: {
+  onUnmount?: () => void;
+  onWindowClose?: () => void;
+}) => {
   const [searchParams] = useSearchParams();
 
-  const cleanUpRef = useRef<(() => void) | undefined>(cleanUp);
-  cleanUpRef.current = cleanUp;
+  const onUnmountRef = useRef<(() => void) | undefined>(onUnmount);
+  onUnmountRef.current = onUnmount;
+
+  const onWindowCloseRef = useRef<(() => void) | undefined>(onWindowClose);
+  onWindowCloseRef.current = onWindowClose;
 
   const result = {
     interaction: searchParams.get("interaction") === "true",
     interactionInternal: searchParams.get("interactionInternal") === "true",
   };
 
+  useEffect(() => {
+    // Execute the clean-up function when unmounting.
+    return () => {
+      if (onUnmountRef.current) {
+        onUnmountRef.current();
+      }
+    };
+  }, []);
+
   useEffect(() => {
     // Execute the clean-up function when closing window.
     const beforeunload = async () => {
-      console.log("beforeunload");
-      if (cleanUpRef.current) {
-        cleanUpRef.current();
+      if (onWindowCloseRef.current) {
+        onWindowCloseRef.current();
       }
     };
 
@@ -27,10 +44,6 @@ export const useInteractionInfo = (cleanUp?: () => void) => {
     };
   }, []);
 
-  useEffect(() => {
-    // TODO: 현재 페이지에서 뒤로가기를 했을 때 이를 감지하고 cleanUp 함수를 실행하는 로직이 필요함.
-  }, []);
-
   return useMemo(() => {
     return {
       interaction: result.interaction,
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 443922974b..c324edfc59 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
@@ -26,7 +26,11 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await permissionStore.rejectPermissionWithProceedNext(data.ids, () => {});
+    },
+  });
 
   const [currentChainIdForEVM, setCurrentChainIdForEVM] = useState<string>(
     data.chainIds[0]
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 73b1f38fd4..0ecb513fde 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
@@ -26,7 +26,11 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await permissionStore.rejectPermissionWithProceedNext(data.ids, () => {});
+    },
+  });
 
   const [currentChainIdForStarknet, setCurrentChainIdForStarknet] =
     useState<string>(data.chainIds[0]);
diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
index f661e6c4fc..9ccbe57a2e 100644
--- a/apps/extension/src/pages/permission/basic-access/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access/index.tsx
@@ -26,7 +26,14 @@ export const PermissionBasicAccessPage: FunctionComponent<{
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await permissionStore.rejectPermissionWithProceedNext(data.ids, () => {
+        // 뒤로가기 버튼 클릭, macOS의 뒤로가기 제스처 등으로 페이지를 벗어나는 경우에 대한 처리이므로
+        // 다음 요청으로 넘어가는 것 외에 추가적인 처리를 하지 않는다.
+      });
+    },
+  });
 
   const isLoading = (() => {
     const obsolete = data.ids.find((id) => {
@@ -64,7 +71,7 @@ export const PermissionBasicAccessPage: FunctionComponent<{
                     // 내부 인터렉션의 경우 reject만 하고 페이지를 벗어나지 않기 때문에 페이지를 벗어나도록 한다.
                     window.history.length > 1 ? navigate(-1) : navigate("/");
                   } else {
-                    // 예상치 못한 상황이므로 홈으로 초기화한다.
+                    // 예상치 못한 상황이므로 홈으로 초기화한다. (홈으로 초기화하는 것이 맞는지는 논의가 필요함)
                     navigate("/", { replace: true });
                   }
                 }
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 c0a5592312..cc5d9073d3 100644
--- a/apps/extension/src/pages/permission/get-chain-infos/index.tsx
+++ b/apps/extension/src/pages/permission/get-chain-infos/index.tsx
@@ -26,7 +26,11 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await permissionStore.rejectPermissionWithProceedNext(data.id, () => {});
+    },
+  });
 
   const isLoading = permissionStore.isObsoleteInteraction(data.id);
 
diff --git a/apps/extension/src/pages/permission/index.tsx b/apps/extension/src/pages/permission/index.tsx
index d0386af7c8..49e8449e39 100644
--- a/apps/extension/src/pages/permission/index.tsx
+++ b/apps/extension/src/pages/permission/index.tsx
@@ -41,9 +41,11 @@ const UnknownGlobalPermissionPage: FunctionComponent<{
 export const PermissionPage: FunctionComponent = observer(() => {
   const { permissionStore } = useStore();
 
-  useInteractionInfo(() => {
-    permissionStore.rejectPermissionAll();
-    permissionStore.rejectGlobalPermissionAll();
+  useInteractionInfo({
+    onWindowClose: () => {
+      permissionStore.rejectPermissionAll();
+      permissionStore.rejectGlobalPermissionAll();
+    },
   });
 
   const mergedData = permissionStore.waitingPermissionMergedData;
diff --git a/apps/extension/src/pages/setting/token/add/index.tsx b/apps/extension/src/pages/setting/token/add/index.tsx
index ff53c11319..7af0e7e774 100644
--- a/apps/extension/src/pages/setting/token/add/index.tsx
+++ b/apps/extension/src/pages/setting/token/add/index.tsx
@@ -100,12 +100,17 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
     }
   });
 
-  // secret20은 서명 페이지로 넘어가야하기 때문에 막아야함...
-  const blockRejectAll = useRef(false);
-  const interactionInfo = useInteractionInfo(() => {
+  const handleRejectTokens = () => {
     if (!blockRejectAll.current) {
       tokensStore.rejectAllSuggestedTokens();
     }
+  };
+
+  // secret20은 서명 페이지로 넘어가야하기 때문에 막아야함...
+  const blockRejectAll = useRef(false);
+  const interactionInfo = useInteractionInfo({
+    onWindowClose: handleRejectTokens,
+    onUnmount: handleRejectTokens,
   });
 
   useLayoutEffect(() => {
diff --git a/apps/extension/src/pages/sign/cosmos/adr36.tsx b/apps/extension/src/pages/sign/cosmos/adr36.tsx
index ae2f046e00..05737ddda9 100644
--- a/apps/extension/src/pages/sign/cosmos/adr36.tsx
+++ b/apps/extension/src/pages/sign/cosmos/adr36.tsx
@@ -39,8 +39,18 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
 
   const [isViewData, setIsViewData] = useState(false);
 
-  const interactionInfo = useInteractionInfo(() => {
-    signInteractionStore.rejectAll();
+  const interactionInfo = useInteractionInfo({
+    onWindowClose: () => {
+      signInteractionStore.rejectAll();
+    },
+    onUnmount: async () => {
+      if (signInteractionStore.waitingData) {
+        signInteractionStore.rejectWithProceedNext(
+          signInteractionStore.waitingData.id,
+          () => {}
+        );
+      }
+    },
   });
 
   if (
diff --git a/apps/extension/src/pages/sign/cosmos/icns/index.tsx b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
index 8cf9f1091e..f15698c8aa 100644
--- a/apps/extension/src/pages/sign/cosmos/icns/index.tsx
+++ b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
@@ -21,8 +21,18 @@ export const SignCosmosICNSPage: FunctionComponent = observer(() => {
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const interactionInfo = useInteractionInfo(() => {
-    icnsInteractionStore.rejectAll();
+  const interactionInfo = useInteractionInfo({
+    onWindowClose: () => {
+      icnsInteractionStore.rejectAll();
+    },
+    onUnmount: async () => {
+      if (icnsInteractionStore.waitingData) {
+        await icnsInteractionStore.rejectWithProceedNext(
+          icnsInteractionStore.waitingData.id,
+          () => {}
+        );
+      }
+    },
   });
 
   const isLoading = (() => {
diff --git a/apps/extension/src/pages/sign/cosmos/tx/view.tsx b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
index d3a59f48c9..244a316a2e 100644
--- a/apps/extension/src/pages/sign/cosmos/tx/view.tsx
+++ b/apps/extension/src/pages/sign/cosmos/tx/view.tsx
@@ -315,7 +315,11 @@ export const CosmosTxView: FunctionComponent<{
 
   const preferNoSetMemo = interactionData.data.signOptions.preferNoSetMemo;
 
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      signInteractionStore.rejectWithProceedNext(interactionData.id, () => {});
+    },
+  });
 
   const [unmountPromise] = useState(() => {
     let resolver: () => void;
diff --git a/apps/extension/src/pages/sign/cosmos/tx/wrapper.tsx b/apps/extension/src/pages/sign/cosmos/tx/wrapper.tsx
index 3f55d75a2f..d142d7613e 100644
--- a/apps/extension/src/pages/sign/cosmos/tx/wrapper.tsx
+++ b/apps/extension/src/pages/sign/cosmos/tx/wrapper.tsx
@@ -8,8 +8,10 @@ import { Splash } from "../../../../components/splash";
 export const SignCosmosTxPage: FunctionComponent = observer(() => {
   const { signInteractionStore } = useStore();
 
-  useInteractionInfo(() => {
-    signInteractionStore.rejectAll();
+  useInteractionInfo({
+    onWindowClose: () => {
+      signInteractionStore.rejectAll();
+    },
   });
 
   return (
diff --git a/apps/extension/src/pages/sign/ethereum/view.tsx b/apps/extension/src/pages/sign/ethereum/view.tsx
index fa37fdd5ac..ab55ed123c 100644
--- a/apps/extension/src/pages/sign/ethereum/view.tsx
+++ b/apps/extension/src/pages/sign/ethereum/view.tsx
@@ -75,8 +75,16 @@ export const EthereumSigningView: FunctionComponent<{
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const interactionInfo = useInteractionInfo(() => {
-    signEthereumInteractionStore.rejectAll();
+  const interactionInfo = useInteractionInfo({
+    onWindowClose: () => {
+      signEthereumInteractionStore.rejectAll();
+    },
+    onUnmount: async () => {
+      await signEthereumInteractionStore.rejectWithProceedNext(
+        interactionData.id,
+        () => {}
+      );
+    },
   });
 
   const { message, signType, signer, chainId } = interactionData.data;
diff --git a/apps/extension/src/pages/sign/ethereum/wrapper.tsx b/apps/extension/src/pages/sign/ethereum/wrapper.tsx
index 8913eb44c1..2e06e91c33 100644
--- a/apps/extension/src/pages/sign/ethereum/wrapper.tsx
+++ b/apps/extension/src/pages/sign/ethereum/wrapper.tsx
@@ -8,8 +8,10 @@ import { Splash } from "../../../components/splash";
 export const SignEthereumTxPage: FunctionComponent = observer(() => {
   const { signEthereumInteractionStore } = useStore();
 
-  useInteractionInfo(() => {
-    signEthereumInteractionStore.rejectAll();
+  useInteractionInfo({
+    onWindowClose: () => {
+      signEthereumInteractionStore.rejectAll();
+    },
   });
 
   return (
diff --git a/apps/extension/src/pages/starknet/sign/message/index.tsx b/apps/extension/src/pages/starknet/sign/message/index.tsx
index 91129ff4f9..2ed3df6c7a 100644
--- a/apps/extension/src/pages/starknet/sign/message/index.tsx
+++ b/apps/extension/src/pages/starknet/sign/message/index.tsx
@@ -8,8 +8,10 @@ import { observer } from "mobx-react-lite";
 export const SignStarknetMessagePage: FunctionComponent = observer(() => {
   const { signStarknetMessageInteractionStore } = useStore();
 
-  useInteractionInfo(() => {
-    signStarknetMessageInteractionStore.rejectAll();
+  useInteractionInfo({
+    onWindowClose: () => {
+      signStarknetMessageInteractionStore.rejectAll();
+    },
   });
 
   return (
diff --git a/apps/extension/src/pages/starknet/sign/message/view.tsx b/apps/extension/src/pages/starknet/sign/message/view.tsx
index cdc7b166eb..0c54d9c717 100644
--- a/apps/extension/src/pages/starknet/sign/message/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/message/view.tsx
@@ -32,7 +32,14 @@ export const SignStarknetMessageView: FunctionComponent<{
   const { chainStore } = useStore();
 
   const intl = useIntl();
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await signStarknetMessageInteractionStore.rejectWithProceedNext(
+        interactionData.id,
+        () => {}
+      );
+    },
+  });
 
   const chainId = interactionData.data.chainId;
 
diff --git a/apps/extension/src/pages/starknet/sign/tx/index.tsx b/apps/extension/src/pages/starknet/sign/tx/index.tsx
index 244b65dd98..00775ffafa 100644
--- a/apps/extension/src/pages/starknet/sign/tx/index.tsx
+++ b/apps/extension/src/pages/starknet/sign/tx/index.tsx
@@ -8,8 +8,10 @@ import { observer } from "mobx-react-lite";
 export const SignStarknetTxPage: FunctionComponent = observer(() => {
   const { signStarknetTxInteractionStore } = useStore();
 
-  useInteractionInfo(() => {
-    signStarknetTxInteractionStore.rejectAll();
+  useInteractionInfo({
+    onWindowClose: () => {
+      signStarknetTxInteractionStore.rejectAll();
+    },
   });
 
   return (
diff --git a/apps/extension/src/pages/starknet/sign/tx/view.tsx b/apps/extension/src/pages/starknet/sign/tx/view.tsx
index d873520985..cc16538a94 100644
--- a/apps/extension/src/pages/starknet/sign/tx/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/tx/view.tsx
@@ -51,7 +51,14 @@ export const SignStarknetTxView: FunctionComponent<{
   const { chainStore } = useStore();
 
   const intl = useIntl();
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await signStarknetTxInteractionStore.rejectWithProceedNext(
+        interactionData.id,
+        () => {}
+      );
+    },
+  });
 
   const navigate = useNavigate();
 
diff --git a/apps/extension/src/pages/suggest-chain/index.tsx b/apps/extension/src/pages/suggest-chain/index.tsx
index c2b1af6021..4c69231a2f 100644
--- a/apps/extension/src/pages/suggest-chain/index.tsx
+++ b/apps/extension/src/pages/suggest-chain/index.tsx
@@ -17,8 +17,10 @@ import { useNavigate } from "react-router";
 export const SuggestChainPage: FunctionComponent = observer(() => {
   const { chainSuggestStore } = useStore();
 
-  useInteractionInfo(async () => {
-    await chainSuggestStore.rejectAll();
+  useInteractionInfo({
+    onWindowClose: async () => {
+      await chainSuggestStore.rejectAll();
+    },
   });
 
   const waitingData = chainSuggestStore.waitingSuggestedChainInfo;
@@ -46,7 +48,11 @@ const SuggestChainPageImpl: FunctionComponent<{
 
   const intl = useIntl();
   const navigate = useNavigate();
-  const interactionInfo = useInteractionInfo();
+  const interactionInfo = useInteractionInfo({
+    onUnmount: async () => {
+      await chainSuggestStore.rejectWithProceedNext(waitingData.id, () => {});
+    },
+  });
 
   const queryCommunityChainInfo = chainSuggestStore.getCommunityChainInfo(
     waitingData.data.chainInfo.chainId
diff --git a/apps/extension/src/pages/wallet/change-name/index.tsx b/apps/extension/src/pages/wallet/change-name/index.tsx
index da2602ffe2..331db1127d 100644
--- a/apps/extension/src/pages/wallet/change-name/index.tsx
+++ b/apps/extension/src/pages/wallet/change-name/index.tsx
@@ -53,10 +53,14 @@ export const WalletChangeNamePage: FunctionComponent = observer(() => {
     },
   });
 
+  const handleRejectChangeKeyRingName = () =>
+    interactionStore.rejectAll("change-keyring-name");
+
   // 이 페이지는 외부에서 changeKeyRingName api로 접근할 수도 있으므로
   // 인터렉션이 필요한 경우 따로 처리를 해줘야한다.
-  const interactionInfo = useInteractionInfo(() => {
-    interactionStore.rejectAll("change-keyring-name");
+  const interactionInfo = useInteractionInfo({
+    onWindowClose: handleRejectChangeKeyRingName,
+    onUnmount: handleRejectChangeKeyRingName,
   });
   const interactionData: InteractionWaitingData | undefined =
     interactionStore.getAllData("change-keyring-name")[0];

From 127f94d89c416b8fb5a84965aba98840c79897ea Mon Sep 17 00:00:00 2001
From: rowan <crewe1746@naver.com>
Date: Mon, 11 Nov 2024 20:37:46 +0900
Subject: [PATCH 7/7] Minor fix

---
 apps/extension/src/components/button/styles.ts             | 6 ------
 apps/extension/src/components/icon/check.tsx               | 1 +
 apps/extension/src/pages/permission/basic-access/index.tsx | 2 +-
 apps/extension/src/pages/setting/token/add/index.tsx       | 5 ++---
 apps/extension/src/pages/sign/ethereum/view.tsx            | 3 ---
 apps/extension/src/pages/starknet/sign/message/view.tsx    | 1 -
 6 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/apps/extension/src/components/button/styles.ts b/apps/extension/src/components/button/styles.ts
index f44063f33b..3d5a2a9aac 100644
--- a/apps/extension/src/components/button/styles.ts
+++ b/apps/extension/src/components/button/styles.ts
@@ -285,9 +285,6 @@ export const Styles = {
     display: flex;
     align-items: center;
     margin-right: 0.25rem;
-    svg {
-      fill: ${ColorPalette["transparent"]};
-    }
   `,
   Right: styled.span`
     height: 100%;
@@ -307,8 +304,5 @@ export const Styles = {
     align-items: center;
 
     position: absolute;
-    svg {
-      fill: none;
-    }
   `,
 };
diff --git a/apps/extension/src/components/icon/check.tsx b/apps/extension/src/components/icon/check.tsx
index a2f8b793d3..e132d8781d 100644
--- a/apps/extension/src/components/icon/check.tsx
+++ b/apps/extension/src/components/icon/check.tsx
@@ -20,6 +20,7 @@ export const CheckIcon: FunctionComponent<IconProps> = ({
         strokeWidth="2.5"
         strokeLinecap="round"
         strokeLinejoin="round"
+        fill="none"
       />
     </svg>
   );
diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
index 9ccbe57a2e..bd14649d47 100644
--- a/apps/extension/src/pages/permission/basic-access/index.tsx
+++ b/apps/extension/src/pages/permission/basic-access/index.tsx
@@ -71,7 +71,7 @@ export const PermissionBasicAccessPage: FunctionComponent<{
                     // 내부 인터렉션의 경우 reject만 하고 페이지를 벗어나지 않기 때문에 페이지를 벗어나도록 한다.
                     window.history.length > 1 ? navigate(-1) : navigate("/");
                   } else {
-                    // 예상치 못한 상황이므로 홈으로 초기화한다. (홈으로 초기화하는 것이 맞는지는 논의가 필요함)
+                    // 예상치 못한 상황이므로 홈으로 초기화한다.
                     navigate("/", { replace: true });
                   }
                 }
diff --git a/apps/extension/src/pages/setting/token/add/index.tsx b/apps/extension/src/pages/setting/token/add/index.tsx
index 7af0e7e774..a4bf529aa0 100644
--- a/apps/extension/src/pages/setting/token/add/index.tsx
+++ b/apps/extension/src/pages/setting/token/add/index.tsx
@@ -100,14 +100,13 @@ export const SettingTokenAddPage: FunctionComponent = observer(() => {
     }
   });
 
+  // secret20은 서명 페이지로 넘어가야하기 때문에 막아야함...
+  const blockRejectAll = useRef(false);
   const handleRejectTokens = () => {
     if (!blockRejectAll.current) {
       tokensStore.rejectAllSuggestedTokens();
     }
   };
-
-  // secret20은 서명 페이지로 넘어가야하기 때문에 막아야함...
-  const blockRejectAll = useRef(false);
   const interactionInfo = useInteractionInfo({
     onWindowClose: handleRejectTokens,
     onUnmount: handleRejectTokens,
diff --git a/apps/extension/src/pages/sign/ethereum/view.tsx b/apps/extension/src/pages/sign/ethereum/view.tsx
index ab55ed123c..6d9ea6fe96 100644
--- a/apps/extension/src/pages/sign/ethereum/view.tsx
+++ b/apps/extension/src/pages/sign/ethereum/view.tsx
@@ -76,9 +76,6 @@ export const EthereumSigningView: FunctionComponent<{
   const navigate = useNavigate();
 
   const interactionInfo = useInteractionInfo({
-    onWindowClose: () => {
-      signEthereumInteractionStore.rejectAll();
-    },
     onUnmount: async () => {
       await signEthereumInteractionStore.rejectWithProceedNext(
         interactionData.id,
diff --git a/apps/extension/src/pages/starknet/sign/message/view.tsx b/apps/extension/src/pages/starknet/sign/message/view.tsx
index 0c54d9c717..a181c253c0 100644
--- a/apps/extension/src/pages/starknet/sign/message/view.tsx
+++ b/apps/extension/src/pages/starknet/sign/message/view.tsx
@@ -152,7 +152,6 @@ export const SignStarknetMessageView: FunctionComponent<{
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
           left: <CheckIcon />,
-          // CHECK: isLoading이 들어가야하는지 확인
           onClick: approve,
         },
       ]}