Revise Reject and Approve button designs on interactive pages

chainapsis · Nov 8, 2024 · 907705d · 907705d
1 parent be007d7
commit 907705d
Show file tree

Hide file tree

Showing 20 changed files with 416 additions and 158 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,38 +24,62 @@ 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
       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 () => {
+            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) => {