Add text to the bottom tabs

chainapsis · Apr 12, 2024 · b2c5f17 · b2c5f17
1 parent 4627d84
commit b2c5f17
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 17 deletions.
diff --git a/packages/extension/src/bottom-tabs.tsx b/packages/extension/src/bottom-tabs.tsx
@@ -3,6 +3,9 @@ import { GlobalSimpleBarProvider } from "./hooks/global-simplebar";
 import { Link, useLocation } from "react-router-dom";
 import { ColorPalette } from "./styles";
 import { useTheme } from "styled-components";
+import { YAxis } from "./components/axis";
+import { Caption2 } from "./components/typography";
+import { Box } from "./components/box";
 
 export const BottomTabsHeightRem = "3.75rem";
 
@@ -12,6 +15,7 @@ export const BottomTabsRouteProvider: FunctionComponent<{
   tabs: {
     pathname: string;
     icon: React.ReactNode;
+    text: string;
   }[];
 
   forceHideBottomTabs?: boolean;
@@ -67,26 +71,61 @@ export const BottomTabsRouteProvider: FunctionComponent<{
             const isActive = tab.pathname === location.pathname;
 
             return (
-              <Link to={tab.pathname} key={i}>
-                <div
+              <Box
+                key={i}
+                style={{
+                  // text의 길이와 상관없이 모든 tab이 균등하게 나눠져야 하므로 상위에 width: 1px를 주는 trick을 사용한다.
+                  width: "1px",
+                }}
+              >
+                <Link
+                  to={tab.pathname}
                   style={{
-                    opacity: isNotReady ? 0 : 1,
-                    color: (() => {
-                      if (theme.mode === "light") {
-                        return isActive
-                          ? ColorPalette["blue-400"]
-                          : ColorPalette["gray-100"];
-                      }
-
-                      return isActive
-                        ? ColorPalette["gray-100"]
-                        : ColorPalette["gray-400"];
-                    })(),
+                    textDecoration: "none",
                   }}
                 >
-                  {tab.icon}
-                </div>
-              </Link>
+                  <div
+                    style={{
+                      opacity: isNotReady ? 0 : 1,
+                      color: (() => {
+                        if (theme.mode === "light") {
+                          return isActive
+                            ? ColorPalette["blue-400"]
+                            : ColorPalette["gray-100"];
+                        }
+
+                        return isActive
+                          ? ColorPalette["gray-100"]
+                          : ColorPalette["gray-400"];
+                      })(),
+                    }}
+                  >
+                    <YAxis alignX="center">
+                      <Box>{tab.icon}</Box>
+                      <Caption2
+                        style={{
+                          textDecoration: "none",
+                          whiteSpace: "nowrap",
+                          wordBreak: "keep-all",
+                        }}
+                        color={(() => {
+                          if (theme.mode === "light") {
+                            return isActive
+                              ? ColorPalette["blue-400"]
+                              : ColorPalette["gray-200"];
+                          }
+
+                          return isActive
+                            ? ColorPalette["gray-100"]
+                            : ColorPalette["gray-300"];
+                        })()}
+                      >
+                        {tab.text}
+                      </Caption2>
+                    </YAxis>
+                  </div>
+                </Link>
+              </Box>
             );
           })}
         </div>

diff --git a/packages/extension/src/index.tsx b/packages/extension/src/index.tsx
@@ -86,6 +86,7 @@ import {
 } from "./bottom-tabs";
 import { IBCSwapDestinationSelectAssetPage } from "./pages/ibc-swap/select-asset";
 import { RoutePageAnalytics } from "./route-page-analytics";
+import { useIntl } from "react-intl";
 
 configure({
   enforceActions: "always", // Make mobx to strict mode.
@@ -278,6 +279,8 @@ const RoutesAfterReady: FunctionComponent = observer(() => {
 
   const [mainPageIsNotReady, setMainPageIsNotReady] = useState(false);
 
+  const intl = useIntl();
+
   return (
     <HashRouter>
       <BottomTabsRouteProvider
@@ -287,14 +290,23 @@ const RoutesAfterReady: FunctionComponent = observer(() => {
           {
             pathname: "/",
             icon: <BottomTabHomeIcon width="1.75rem" height="1.75rem" />,
+            text: intl.formatMessage({
+              id: "bottom-tabs.home",
+            }),
           },
           {
             pathname: "/ibc-swap",
             icon: <BottomTabSwapIcon width="1.75rem" height="1.75rem" />,
+            text: intl.formatMessage({
+              id: "bottom-tabs.swap",
+            }),
           },
           {
             pathname: "/setting",
             icon: <BottomTabSettingIcon width="1.75rem" height="1.75rem" />,
+            text: intl.formatMessage({
+              id: "bottom-tabs.settings",
+            }),
           },
         ]}
       >

diff --git a/packages/extension/src/languages/en.json b/packages/extension/src/languages/en.json
@@ -23,6 +23,10 @@
   "error.outdated-cosmos-sdk": "Not supported: outdated version of cosmos-sdk",
   "error.can-not-find-fee-for-claim-all": "Can't find fee currency to pay",
 
+  "bottom-tabs.home": "Home",
+  "bottom-tabs.swap": "Swap",
+  "bottom-tabs.settings": "Settings",
+
   "pages.register.components.header.intro-title": "Your Interchain Gateway",
   "pages.register.components.header.header-step.title": "Step",
   "pages.register.components.help-desk-button.title": "Help Desk",

diff --git a/packages/extension/src/languages/ko.json b/packages/extension/src/languages/ko.json
@@ -23,6 +23,10 @@
   "error.outdated-cosmos-sdk": "cosmos-sdk 버전이 오래돼서 지원되지 않습니다.",
   "error.can-not-find-fee-for-claim-all": "수수료로 지불할 통화를 찾을 수 없습니다.",
 
+  "bottom-tabs.home": "홈",
+  "bottom-tabs.swap": "스왑",
+  "bottom-tabs.settings": "설정",
+
   "pages.register.components.header.intro-title": "내 손 안의 인터체인",
   "pages.register.components.header.header-step.title": "단계",
   "pages.register.components.help-desk-button.title": "도움말 및 지원",