Merge pull request #1241 from chainapsis/rowan/KEPLR-503

[KEPLR-503] QA
chainapsis · Nov 12, 2024 · 56874c3 · 56874c3
2 parents 972a0e1 + 4249359
commit 56874c3
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 33 deletions.
diff --git a/apps/extension/src/components/button/approve-icon.tsx b/apps/extension/src/components/button/approve-icon.tsx
@@ -0,0 +1,24 @@
+import React, { FunctionComponent } from "react";
+import { IconProps } from "../icon/types";
+
+export const ApproveIcon: FunctionComponent<IconProps> = ({
+  width = "1.5rem",
+  height = "1.5rem",
+  color,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      strokeWidth="0.1"
+      fill="none"
+    >
+      <path
+        d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z"
+        fill={color || "currentColor"}
+      />
+    </svg>
+  );
+};
diff --git a/apps/extension/src/components/button/index.ts b/apps/extension/src/components/button/index.ts
@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./button";
 export * from "./styles";
+export * from "./approve-icon";
diff --git a/apps/extension/src/components/button/styles.ts b/apps/extension/src/components/button/styles.ts
@@ -304,5 +304,8 @@ export const Styles = {
     align-items: center;
 
     position: absolute;
+    svg {
+      fill: none;
+    }
   `,
 };
diff --git a/apps/extension/src/components/special-button/styles.ts b/apps/extension/src/components/special-button/styles.ts
@@ -91,9 +91,6 @@ 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/pages/permission/basic-access-for-evm/index.tsx b/apps/extension/src/pages/permission/basic-access-for-evm/index.tsx
@@ -13,8 +13,9 @@ 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 { XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../components/button";
 
 export const PermissionBasicAccessForEVMPage: FunctionComponent<{
   data: {
@@ -89,7 +90,7 @@ export const PermissionBasicAccessForEVMPage: FunctionComponent<{
           }),
           size: "large",
           type: "submit",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           isLoading,
         },
       ]}

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,8 +13,9 @@ 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 { XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../components/button";
 
 export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
   data: {
@@ -88,7 +89,7 @@ export const PermissionBasicAccessForStarknetPage: FunctionComponent<{
           }),
           size: "large",
           type: "submit",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           isLoading,
         },
       ]}

diff --git a/apps/extension/src/pages/permission/basic-access/index.tsx b/apps/extension/src/pages/permission/basic-access/index.tsx
@@ -13,8 +13,9 @@ 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 { XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../components/button";
 
 export const PermissionBasicAccessPage: FunctionComponent<{
   data: {
@@ -83,7 +84,7 @@ export const PermissionBasicAccessPage: FunctionComponent<{
           text: intl.formatMessage({
             id: "button.approve",
           }),
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           type: "submit",
           size: "large",
           isLoading,

diff --git a/apps/extension/src/pages/permission/get-chain-infos/index.tsx b/apps/extension/src/pages/permission/get-chain-infos/index.tsx
@@ -15,8 +15,9 @@ 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 { XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../components/button";
 
 export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
   data: InteractionWaitingData<GlobalPermissionData>;
@@ -75,7 +76,7 @@ export const GlobalPermissionGetChainInfosPage: FunctionComponent<{
           }),
           size: "large",
           type: "submit",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           isLoading,
         },
       ]}

diff --git a/apps/extension/src/pages/sign/cosmos/adr36.tsx b/apps/extension/src/pages/sign/cosmos/adr36.tsx
@@ -22,14 +22,11 @@ import { KeystoneSign } from "../components/keystone";
 import { useTheme } from "styled-components";
 import { KeyRingService } from "@keplr-wallet/background";
 import { handleExternalInteractionWithNoProceedNext } from "../../../utils";
-import {
-  CheckIcon,
-  MessageAdr36Icon,
-  XMarkIcon,
-} from "../../../components/icon";
+import { 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";
+import { ApproveIcon } from "../../../components/button";
 
 export const SignCosmosADR36Page: FunctionComponent = observer(() => {
   const { chainStore, signInteractionStore, uiConfigStore } = useStore();
@@ -192,7 +189,7 @@ export const SignCosmosADR36Page: FunctionComponent = observer(() => {
           text: intl.formatMessage({ id: "button.approve" }),
           color: "primary",
           size: "large",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           disabled: signInteractionStore.waitingData == null,
           isLoading,
           onClick: async () => {

diff --git a/apps/extension/src/pages/sign/cosmos/icns/index.tsx b/apps/extension/src/pages/sign/cosmos/icns/index.tsx
@@ -12,8 +12,9 @@ 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 { XMarkIcon } from "../../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../../components/button";
 
 export const SignCosmosICNSPage: FunctionComponent = observer(() => {
   const { icnsInteractionStore } = useStore();
@@ -87,7 +88,7 @@ export const SignCosmosICNSPage: FunctionComponent = observer(() => {
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
           type: "submit",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           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
@@ -48,7 +48,8 @@ import { FeeControl } from "../../../../components/input/fee-control";
 import { HighFeeWarning } from "../../components/high-fee-warning";
 import { handleExternalInteractionWithNoProceedNext } from "../../../../utils";
 import { useNavigate } from "react-router-dom";
-import { CheckIcon, XMarkIcon } from "../../../../components/icon";
+import { XMarkIcon } from "../../../../components/icon";
+import { ApproveIcon } from "../../../../components/button";
 
 /**
  * 서명을 처리할때 웹페이지에서 연속적으로 서명을 요청했을 수 있고
@@ -546,7 +547,7 @@ export const CosmosTxView: FunctionComponent<{
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           disabled: buttonDisabled,
           isLoading,
           onClick: approve,

diff --git a/apps/extension/src/pages/sign/ethereum/view.tsx b/apps/extension/src/pages/sign/ethereum/view.tsx
@@ -51,8 +51,9 @@ 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 { XMarkIcon } from "../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../components/button";
 
 /**
  * CosmosTxView의 주석을 꼭 참고하셈
@@ -401,7 +402,7 @@ export const EthereumSigningView: FunctionComponent<{
           text: intl.formatMessage({ id: "button.approve" }),
           color: "primary",
           size: "large",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           isLoading,
           onClick: async () => {
             try {

diff --git a/apps/extension/src/pages/starknet/sign/message/view.tsx b/apps/extension/src/pages/starknet/sign/message/view.tsx
@@ -16,8 +16,9 @@ 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 { XMarkIcon } from "../../../../components/icon";
 import { useNavigate } from "react-router";
+import { ApproveIcon } from "../../../../components/button";
 
 export const SignStarknetMessageView: FunctionComponent<{
   interactionData: NonNullable<
@@ -151,7 +152,7 @@ export const SignStarknetMessageView: FunctionComponent<{
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
-          left: <CheckIcon />,
+          left: <ApproveIcon />,
           onClick: approve,
         },
       ]}

diff --git a/apps/extension/src/pages/starknet/sign/tx/view.tsx b/apps/extension/src/pages/starknet/sign/tx/view.tsx
@@ -25,18 +25,15 @@ import { Box } from "../../../../components/box";
 import { ColorPalette } from "../../../../styles";
 import { useTheme } from "styled-components";
 import { H5 } from "../../../../components/typography";
-import {
-  ArrowDropDownIcon,
-  CheckIcon,
-  XMarkIcon,
-} from "../../../../components/icon";
+import { ArrowDropDownIcon, XMarkIcon } from "../../../../components/icon";
 import { Column, Columns } from "../../../../components/column";
 import SimpleBar from "simplebar-react";
 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";
+import { ApproveIcon } from "../../../../components/button";
 
 export const SignStarknetTxView: FunctionComponent<{
   interactionData: NonNullable<SignStarknetTxInteractionStore["waitingData"]>;
@@ -396,7 +393,7 @@ export const SignStarknetTxView: FunctionComponent<{
           isSpecial: true,
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           disabled: buttonDisabled,
           isLoading,
           onClick: approve,

diff --git a/apps/extension/src/pages/suggest-chain/index.tsx b/apps/extension/src/pages/suggest-chain/index.tsx
@@ -7,12 +7,13 @@ import { useInteractionInfo } from "../../hooks";
 import { InteractionWaitingData } from "@keplr-wallet/background";
 import { ChainInfo } from "@keplr-wallet/types";
 import { FormattedMessage, useIntl } from "react-intl";
-import { ArrowLeftIcon, CheckIcon, XMarkIcon } from "../../components/icon";
+import { ArrowLeftIcon, 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";
+import { ApproveIcon } from "../../components/button";
 
 export const SuggestChainPage: FunctionComponent = observer(() => {
   const { chainSuggestStore } = useStore();
@@ -139,7 +140,7 @@ const SuggestChainPageImpl: FunctionComponent<{
           text: intl.formatMessage({ id: "button.approve" }),
           size: "large",
           color: "primary",
-          left: !isLoading && <CheckIcon />,
+          left: !isLoading && <ApproveIcon />,
           isLoading,
           onClick: async () => {
             const chainInfo =