헤더에 사이드패널을 사용해보라는 배너 추가

chainapsis · Oct 10, 2024 · cf59e47 · cf59e47
1 parent 2c0f897
commit cf59e47
Show file tree

Hide file tree

Showing 8 changed files with 769 additions and 274 deletions.
diff --git a/apps/extension/src/layouts/header/header.tsx b/apps/extension/src/layouts/header/header.tsx
@@ -29,7 +29,9 @@ export const HeaderHeight = "3.75rem";
 const Styles = {
   Container: styled.div``,
 
-  HeaderContainer: styled.div`
+  HeaderContainer: styled.div<{
+    fixedTopHeight?: string;
+  }>`
     height: ${HeaderHeight};
 
     background: ${(props) =>
@@ -50,7 +52,7 @@ const Styles = {
         : ColorPalette["gray-10"]};
 
     position: fixed;
-    top: 0;
+    top: ${(props) => props.fixedTopHeight ?? "0"};
     left: 0;
     right: 0;
 
@@ -108,6 +110,7 @@ const Styles = {
     displayFlex: boolean;
     fixedHeight: boolean;
     fixedMinHeight: boolean;
+    fixedTopHeight?: string;
   }>`
     ${({ displayFlex }) => {
       if (displayFlex) {
@@ -119,7 +122,12 @@ const Styles = {
       return css``;
     }}
 
-    padding-top: ${HeaderHeight};
+    padding-top: ${(props) => {
+      if (!props.fixedTopHeight) {
+        return HeaderHeight;
+      }
+      return `calc(${HeaderHeight} + ${props.fixedTopHeight})`;
+    }};
     padding-bottom: ${({ bottomPadding }) => bottomPadding};
 
     ${({
@@ -183,6 +191,8 @@ export const HeaderLayout: FunctionComponent<
   isNotReady,
   additionalPaddingBottom,
   headerContainerStyle,
+
+  fixedTop,
 }) => {
   const [height, setHeight] = React.useState(() => pxToRem(600));
   const lastSetHeight = useRef(-1);
@@ -226,7 +236,15 @@ export const HeaderLayout: FunctionComponent<
 
   return (
     <Styles.Container as={onSubmit ? "form" : undefined} onSubmit={onSubmit}>
-      <Styles.HeaderContainer style={headerContainerStyle}>
+      {fixedTop ? (
+        <div style={{ width: "100%", position: "fixed", zIndex: 100 }}>
+          {fixedTop.element}
+        </div>
+      ) : null}
+      <Styles.HeaderContainer
+        style={headerContainerStyle}
+        fixedTopHeight={fixedTop?.height}
+      >
         {left && !isNotReady ? (
           <Styles.HeaderLeft>{left}</Styles.HeaderLeft>
         ) : null}
@@ -254,6 +272,7 @@ export const HeaderLayout: FunctionComponent<
         fixedHeight={fixedHeight || false}
         fixedMinHeight={fixedMinHeight || false}
         bottomPadding={bottomPadding}
+        fixedTopHeight={fixedTop?.height}
       >
         {children}
       </Styles.ContentContainer>

diff --git a/apps/extension/src/layouts/header/types.ts b/apps/extension/src/layouts/header/types.ts
@@ -22,4 +22,15 @@ export interface HeaderProps {
   isNotReady?: boolean;
 
   headerContainerStyle?: React.CSSProperties;
+
+  // MainHeaderLayout에서만 테스트해봄
+  // 다른 props 옵션과 섞였을때 잘 작동되는지는 모름
+  // 그냥 MainHeaderLayout 전용이라고 생각할 것.
+  fixedTop?: {
+    // rem이여야 잘 작동될 확률이 높음.
+    // px 등은 테스트 안해봄 될수도 있고 안될수도 있음.
+    // 되도록 rem을 사용할 것
+    height: string;
+    element: React.ReactElement;
+  };
 }
diff --git a/apps/extension/src/pages/main/components/menu-bar/index.tsx b/apps/extension/src/pages/main/components/menu-bar/index.tsx
@@ -8,7 +8,13 @@ import { useNavigate } from "react-router";
 import { Gutter } from "../../../../components/gutter";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../../../stores";
-import { Button2, H3, H5, Subtitle4 } from "../../../../components/typography";
+import {
+  Button2,
+  Caption1,
+  H3,
+  H5,
+  Subtitle4,
+} from "../../../../components/typography";
 import { XAxis } from "../../../../components/axis";
 import { Bleed } from "../../../../components/bleed";
 import { FormattedMessage } from "react-intl";
@@ -39,8 +45,10 @@ const Styles = {
 
 export const MenuBar: FunctionComponent<{
   close: () => void;
-}> = observer(({ close }) => {
-  const { analyticsStore, keyRingStore } = useStore();
+
+  showSidePanelRecommendationTooltip?: boolean;
+}> = observer(({ close, showSidePanelRecommendationTooltip }) => {
+  const { analyticsStore, keyRingStore, uiConfigStore } = useStore();
 
   const location = useLocation();
 
@@ -220,10 +228,17 @@ export const MenuBar: FunctionComponent<{
                 <Column weight={1}>
                   <PanelModeItem
                     onClick={() => {
-                      toggleSidePanelMode(!sidePanelEnabled, (res) =>
-                        setSidePanelEnabled(res)
-                      );
+                      toggleSidePanelMode(!sidePanelEnabled, (res) => {
+                        setSidePanelEnabled(res);
+
+                        if (res) {
+                          uiConfigStore.setShowNewSidePanelHeaderTop(false);
+                        }
+                      });
                     }}
+                    showSidePanelRecommendationTooltip={
+                      showSidePanelRecommendationTooltip
+                    }
                     isSelected={sidePanelEnabled}
                     isSidePanel={true}
                     img={
@@ -263,9 +278,13 @@ export const MenuBar: FunctionComponent<{
                 <Column weight={1}>
                   <PanelModeItem
                     onClick={() => {
-                      toggleSidePanelMode(!sidePanelEnabled, (res) =>
-                        setSidePanelEnabled(res)
-                      );
+                      toggleSidePanelMode(!sidePanelEnabled, (res) => {
+                        setSidePanelEnabled(res);
+
+                        if (res) {
+                          uiConfigStore.setShowNewSidePanelHeaderTop(false);
+                        }
+                      });
                     }}
                     isSidePanel={false}
                     isSelected={!sidePanelEnabled}
@@ -382,7 +401,16 @@ const PanelModeItem: FunctionComponent<{
   isSidePanel: boolean;
   img: React.ReactElement;
   text: React.ReactElement;
-}> = ({ isSelected, onClick, isSidePanel, text, img }) => {
+
+  showSidePanelRecommendationTooltip?: boolean;
+}> = ({
+  isSelected,
+  onClick,
+  isSidePanel,
+  text,
+  img,
+  showSidePanelRecommendationTooltip,
+}) => {
   const theme = useTheme();
 
   return (
@@ -423,6 +451,59 @@ const PanelModeItem: FunctionComponent<{
         }
       }}
     >
+      {showSidePanelRecommendationTooltip ? (
+        <div
+          style={{
+            position: "absolute",
+            zIndex: 2,
+            bottom: "100%",
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+
+            whiteSpace: "nowrap",
+          }}
+        >
+          <Box
+            position="relative"
+            backgroundColor={ColorPalette["blue-300"]}
+            borderRadius="0.5rem"
+          >
+            <Box paddingX="0.75rem" paddingY="0.5rem">
+              <Caption1 color={ColorPalette["gray-50"]}>
+                Try the new mode ✨
+              </Caption1>
+            </Box>
+            <div
+              style={{
+                position: "absolute",
+                top: "99%",
+                left: "50%",
+                transform: "translateX(-50%)",
+
+                // 왜인지는 모르겠고 line height가 이 엘레먼트의 최소 하이트를 결정하더라...
+                // svg가 line height 기본값보다 작기 때문에 강제로 0으로 설정해준다.
+                lineHeight: 0,
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="13"
+                height="7"
+                fill="none"
+                stroke="none"
+                viewBox="0 0 13 7"
+              >
+                <path
+                  fill={ColorPalette["blue-300"]}
+                  d="M4.9 5.867a2 2 0 003.2 0L12.5 0H.5l4.4 5.867z"
+                />
+              </svg>
+            </div>
+          </Box>
+        </div>
+      ) : null}
       {isSidePanel ? (
         <img
           src={

diff --git a/apps/extension/src/pages/main/index.tsx b/apps/extension/src/pages/main/index.tsx
@@ -45,7 +45,7 @@ import { IbcHistoryView } from "./components/ibc-history-view";
 import { LayeredHorizontalRadioGroup } from "../../components/radio-group";
 import { XAxis, YAxis } from "../../components/axis";
 import { DepositModal } from "./components/deposit-modal";
-import { MainHeaderLayout } from "./layouts/header";
+import { MainHeaderLayout, MainHeaderLayoutRef } from "./layouts/header";
 import { amountToAmbiguousAverage, isRunningInSidePanel } from "../../utils";
 import { InExtensionMessageRequester } from "@keplr-wallet/router-extension";
 import {
@@ -56,6 +56,7 @@ import { BACKGROUND_PORT } from "@keplr-wallet/router";
 import { useBuy } from "../../hooks/use-buy";
 import { BottomTabsHeightRem } from "../../bottom-tabs";
 import { DenomHelper } from "@keplr-wallet/common";
+import { NewSidePanelHeaderTop } from "./new-side-panel-header-top";
 
 export interface ViewToken {
   token: CoinPretty;
@@ -365,8 +366,41 @@ export const MainPage: FunctionComponent<{
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const mainHeaderLayoutRef = useRef<MainHeaderLayoutRef | null>(null);
+
   return (
-    <MainHeaderLayout isNotReady={isNotReady}>
+    <MainHeaderLayout
+      ref={mainHeaderLayoutRef}
+      isNotReady={isNotReady}
+      fixedTop={(() => {
+        if (isNotReady) {
+          return;
+        }
+
+        if (uiConfigStore.showNewSidePanelHeaderTop) {
+          return {
+            height: "3rem",
+            element: (
+              <NewSidePanelHeaderTop
+                onClick={() => {
+                  uiConfigStore.setShowNewSidePanelHeaderTop(false);
+
+                  if (mainHeaderLayoutRef.current) {
+                    mainHeaderLayoutRef.current.setShowSidePanelRecommendationTooltip(
+                      true
+                    );
+                    mainHeaderLayoutRef.current.openSideMenu();
+                  }
+                }}
+                onCloseClick={() => {
+                  uiConfigStore.setShowNewSidePanelHeaderTop(false);
+                }}
+              />
+            ),
+          };
+        }
+      })()}
+    >
       {/* side panel에서만 보여준다. 보여주는 로직은 isRefreshButtonVisible를 다루는 useEffect를 참고. refresh button이 로딩중이면 모조건 보여준다. */}
       <RefreshButton
         visible={