Bugfix/position form state issue

packages/swap-router/.ultra.cache.json

@@ -1,47 +1 @@
-{
-  "files": {
-    ".vscode": "1700971955685.2515",
-    "build": "1713516446907.2502",
-    "node_modules": "1700891704503.8325",
-    ".eslintignore": "7de3bd702df2dee92c033c49abbedd0b0f7452e6",
-    ".eslintrc.js": "ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",
-    ".gitignore": "c87c9b392c0200d9c9dafc444386ad3e15a85c64",
-    ".prettierignore": "47bb4656eb55860a075be7799cba7fa955b68141",
-    ".prettierrc": "fe5f744c7a08b128c935d1e1aed3e8a577e74507",
-    "jest.config.json": "2e496ee6bd64eb237161dcd69a6957eff2df584d",
-    "package.json": "4dda70ca76fb6022f6cb20852ecd8d2d95d638d2",
-    "src/common/array.util.ts": "9482ab121d34cc7e08a0cd33b49173b0b85823d8",
-    "src/common/bigint.util.ts": "343f4c85ca1f6c840ade68c259ed82bf5b159fb0",
-    "src/common/index.ts": "861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd",
-    "src/common/mapper.ts": "f7d7b491dff443911a978b34e4cb378bee46c2b7",
-    "src/common/queue.ts": "ad096fefbe1c5a7339b536b0b8d39dba661b520e",
-    "src/common/test.util.ts": "3e500df6ec27ba98606acbfcaec9243e22862e43",
-    "src/constants/index.ts": "9605b149deb525c25f6e93420bbc433ff1c75cd0",
-    "src/constants/math.constant.ts": "b617851527cabcc9c3bce2c8e39208001d379ad6",
-    "src/constants/swap.constant.ts": "53e280147c68acfba490bc1f9a0b7bb1580e7280",
-    "src/index.ts": "691efb21a28bd3f0e6437edcb16192789dbbb7f6",
-    "src/swap-router/index.ts": "effaf28a826bdf1441437643e8343e7fbd8026b1",
-    "src/swap-router/swap-router-default.spec.ts": "e78d6591f15c38821bd701796c5281a5000a98ce",
-    "src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts": "683ce3a82d73e915018e772723700905c3ff7c92",
-    "src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts": "93bfd18d0a297f3c66743cddcf2fe10c3764e250",
-    "src/swap-router/swap-router-multi-pair-pools.spec.ts": "642a9f24dc06b4ef5fb6f099b21b1dbec7f09d8f",
-    "src/swap-router/swap-router-multi-route.spec.ts": "2b37b87049e38971482716b93be7eb2d739ed135",
-    "src/swap-router/swap-router-single-pair-pools.spec.ts": "8508da991d741ce394e663680b87f56a5c9af30d",
-    "src/swap-router/swap-router.ts": "97c4ee1a2cb563be921352b60bbd7bff9535fb21",
-    "src/swap-router/swap-router.types.ts": "2a48987217df238256a0721d227952142a37ce08",
-    "src/swap-router/utility/index.ts": "4973874904dd9d77d037d72b1ec8aed397716a38",
-    "src/swap-router/utility/route.util.ts": "d492418c9184e42d3ef29d7760eb18fa013f54c6",
-    "src/swap-simulator/index.ts": "ef493c5977bdf1123d1197b804f2344ee463870c",
-    "src/swap-simulator/swap-simulator-default.spec.ts": "867788b12ccc70abe676010aeed5d6b2b58e8036",
-    "src/swap-simulator/swap-simulator.ts": "48cc4c90a2622d806659fa2f8c4f48d600a2b2db",
-    "src/swap-simulator/swap-simulator.types.ts": "11d929d55a895b0305375b3b69ac27c49a985ce0",
-    "src/swap-simulator/utility/cache.util.ts": "c5af86d350610a80a6690846657a35635bbc752a",
-    "src/swap-simulator/utility/index.ts": "7272f5d23dfa7af2895fca9bb0b17985234ab6e1",
-    "src/swap-simulator/utility/math.util.ts": "96fbe38cbabe344f6f58220f46c20103e6df4225",
-    "src/swap-simulator/utility/swap-util.spec.ts": "b7fe082f3fef7e5a912959925924f56f8c36e020",
-    "src/swap-simulator/utility/swap.util.ts": "f49236f0d22f72b9283244e870d34401d42fe009",
-    "src/swap-simulator/utility/tick.util.ts": "01d1fc86a1cfcf81aa8932c52bca9738916feab5",
-    "tsconfig.json": "55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"
-  },
-  "deps": {}
-}
+{"files":{"build":"1713170489386.185",".eslintignore":"7de3bd702df2dee92c033c49abbedd0b0f7452e6",".eslintrc.js":"ca4815a5cf5cffa1d3fb4a014c8c602f852b002a",".gitignore":"c87c9b392c0200d9c9dafc444386ad3e15a85c64",".prettierignore":"47bb4656eb55860a075be7799cba7fa955b68141",".prettierrc":"fe5f744c7a08b128c935d1e1aed3e8a577e74507","jest.config.json":"2e496ee6bd64eb237161dcd69a6957eff2df584d","package.json":"4dda70ca76fb6022f6cb20852ecd8d2d95d638d2","src/common/array.util.ts":"9482ab121d34cc7e08a0cd33b49173b0b85823d8","src/common/bigint.util.ts":"343f4c85ca1f6c840ade68c259ed82bf5b159fb0","src/common/index.ts":"861a3167cddfc93e9eb1b6a4ae8229bb9dc2f8fd","src/common/mapper.ts":"f7d7b491dff443911a978b34e4cb378bee46c2b7","src/common/queue.ts":"ad096fefbe1c5a7339b536b0b8d39dba661b520e","src/common/test.util.ts":"3e500df6ec27ba98606acbfcaec9243e22862e43","src/constants/index.ts":"9605b149deb525c25f6e93420bbc433ff1c75cd0","src/constants/math.constant.ts":"b617851527cabcc9c3bce2c8e39208001d379ad6","src/constants/swap.constant.ts":"53e280147c68acfba490bc1f9a0b7bb1580e7280","src/index.ts":"691efb21a28bd3f0e6437edcb16192789dbbb7f6","src/swap-router/index.ts":"effaf28a826bdf1441437643e8343e7fbd8026b1","src/swap-router/swap-router-default.spec.ts":"e78d6591f15c38821bd701796c5281a5000a98ce","src/swap-router/swap-router-multi-higher-range-position-pool.spec.ts":"683ce3a82d73e915018e772723700905c3ff7c92","src/swap-router/swap-router-multi-lower-range-position-pool.spec.ts":"93bfd18d0a297f3c66743cddcf2fe10c3764e250","src/swap-router/swap-router-multi-pair-pools.spec.ts":"642a9f24dc06b4ef5fb6f099b21b1dbec7f09d8f","src/swap-router/swap-router-multi-route.spec.ts":"2b37b87049e38971482716b93be7eb2d739ed135","src/swap-router/swap-router-single-pair-pools.spec.ts":"8508da991d741ce394e663680b87f56a5c9af30d","src/swap-router/swap-router.ts":"97c4ee1a2cb563be921352b60bbd7bff9535fb21","src/swap-router/swap-router.types.ts":"2a48987217df238256a0721d227952142a37ce08","src/swap-router/utility/index.ts":"4973874904dd9d77d037d72b1ec8aed397716a38","src/swap-router/utility/route.util.ts":"d492418c9184e42d3ef29d7760eb18fa013f54c6","src/swap-simulator/index.ts":"ef493c5977bdf1123d1197b804f2344ee463870c","src/swap-simulator/swap-simulator-default.spec.ts":"867788b12ccc70abe676010aeed5d6b2b58e8036","src/swap-simulator/swap-simulator.ts":"48cc4c90a2622d806659fa2f8c4f48d600a2b2db","src/swap-simulator/swap-simulator.types.ts":"11d929d55a895b0305375b3b69ac27c49a985ce0","src/swap-simulator/utility/cache.util.ts":"c5af86d350610a80a6690846657a35635bbc752a","src/swap-simulator/utility/index.ts":"7272f5d23dfa7af2895fca9bb0b17985234ab6e1","src/swap-simulator/utility/math.util.ts":"96fbe38cbabe344f6f58220f46c20103e6df4225","src/swap-simulator/utility/swap-util.spec.ts":"b7fe082f3fef7e5a912959925924f56f8c36e020","src/swap-simulator/utility/swap.util.ts":"f49236f0d22f72b9283244e870d34401d42fe009","src/swap-simulator/utility/tick.util.ts":"01d1fc86a1cfcf81aa8932c52bca9738916feab5","tsconfig.json":"55467bd5c5eb1b501abe50b952d5f2d9fa0a0d69"},"deps":{}}

packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.spec.tsx

@@ -0,0 +1,24 @@
+import { render } from "@testing-library/react";
+import { Provider as JotaiProvider } from "jotai";
+import GnoswapThemeProvider from "@providers/gnoswap-theme-provider/GnoswapThemeProvider";
+import ChartScopeSelectTab, { TAB_SIZE } from "./ChartScopeSelectTab";
+import { CHART_TYPE } from "@constants/option.constant";
+
+describe("ChartScopeSelectTab Component", () => {
+  it("ChartScopeSelectTab render", () => {
+    const mockProps = {
+      selected: "All" as CHART_TYPE,
+      onChange: () => null,
+      list: [],
+      size: "MEDIUM" as TAB_SIZE,
+    };
+
+    render(
+      <JotaiProvider>
+        <GnoswapThemeProvider>
+          <ChartScopeSelectTab {...mockProps} />
+        </GnoswapThemeProvider>
+      </JotaiProvider>,
+    );
+  });
+});

packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.stories.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import VolumeChartSelectTabV2 from "./ChartScopeSelectTab";
+import { ACTIVITY_TYPE } from "@containers/dashboard-activities-container/DashboardActivitiesContainer";
+import { CHART_TYPE } from "@constants/option.constant";
+import ChartScopeSelectTab from "./ChartScopeSelectTab";
+
+export default {
+  title: "earn/ChartScopeSelectTab",
+  component: ChartScopeSelectTab,
+} as ComponentMeta<typeof ChartScopeSelectTab>;
+
+const Template: ComponentStory<typeof ChartScopeSelectTab> = args => (
+  <ChartScopeSelectTab {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  selected: CHART_TYPE["7D"],
+  onChange: action("changeVolumeChartType"),
+};

packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.styles.ts

@@ -0,0 +1,46 @@
+import { fonts } from "@constants/font.constant";
+import styled from "@emotion/styled";
+import { media } from "@styles/media";
+import mixins from "@styles/mixins";
+import { TAB_SIZE } from "./ChartScopeSelectTab";
+
+interface ChartScopeSelectTabWrapperProps {
+  $hasBorder?: boolean;
+  size: TAB_SIZE;
+}
+
+export const ChartScopeSelectTabWrapper = styled.div<ChartScopeSelectTabWrapperProps>`
+  ${mixins.flexbox("row", "center", "center")};
+
+  ${(props) =>
+          props.$hasBorder ? ({ theme }) => theme.color.border01 : ""}
+  .tab-button {}
+  .tab-button {
+    ${fonts.p6};
+    width: ${(props) => {
+      switch (props.size) {
+        case "SMALL": 
+          return "50px";
+        case "MEDIUM":
+        default:
+          return "60px";
+      }
+    }};
+    height: ${(props) => {
+      switch (props.size) {
+        case "SMALL": 
+          return "21px";
+        case "MEDIUM":
+        default:
+          return "37px";
+      }
+    }};
+    padding: 0px 8px;
+    ${media.mobile} {
+      flex: 1;
+      ${fonts.body12};
+      padding: 4px 24px;
+      height: 26px;
+    }
+  }
+`;

packages/web/src/components/common/chart-scope-select-tab/ChartScopeSelectTab.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import SelectTab from "@components/common/select-tab/SelectTab";
+import { ChartScopeSelectTabWrapper } from "./ChartScopeSelectTab.styles";
+
+export type TAB_SIZE = "MEDIUM" | "SMALL";
+
+interface ChartScopeSelectTabProps<T> {
+  selected: T;
+  onChange: (newType: T) => void;
+  list: T[]
+  size: TAB_SIZE;
+}
+
+const ChartScopeSelectTab = <T extends string>({
+  selected,
+  onChange,
+  list,
+  size,
+}: React.PropsWithChildren<ChartScopeSelectTabProps<T>>) => (
+  <ChartScopeSelectTabWrapper $hasBorder size={size}>
+    <SelectTab
+      selectType={selected}
+      list={list}
+      onClick={(value) => onChange(value as T)}
+      buttonClassName={"tab-button"}
+    />
+  </ChartScopeSelectTabWrapper>
+);
+
+export default ChartScopeSelectTab;

packages/web/src/components/common/exchange-rate/ExchangeRate.tsx

@@ -1,25 +1,17 @@
-import { removeTrailingZeros } from "@utils/number-utils";
+import { formatExchangeRate } from "@utils/number-utils";
+import { useMemo } from "react";
 import { ExchangeRateWrapper } from "./ExchangeRate.styles";
 
 interface Props {
   value: any;
 }
 
-function countZeros(decimalFraction: string) {
-  const scientificNotation = parseFloat(decimalFraction).toExponential();
-  const exponent = parseFloat(scientificNotation.split("e")[1]);
-  return Math.abs(exponent);
-}
-
 const ExchangeRate: React.FC<Props> = ({ value }) => {
-  const temp = `${value}`;
-  const numberOfZero = countZeros(value);
-  if (Number(value) === 0) return <>0</>;
-  if (Number(value[0]) !== 0 || (Number(value) < 0.000001 && Number(value) >= 0.00001)) return <>{removeTrailingZeros(value)}</>;
+  const exchangePrice = useMemo(() => formatExchangeRate(value), [value]);
+
   return (
     <ExchangeRateWrapper>
-      0.{numberOfZero > 1 ? 0 : ""}<span>{numberOfZero - 1}</span>
-      {removeTrailingZeros(temp.slice(numberOfZero + 1, numberOfZero + 6))}
+      {exchangePrice}
     </ExchangeRateWrapper>
   );
 };

packages/web/src/components/common/line-graph/LineGraph.styles.ts

@@ -24,6 +24,9 @@ export const LineGraphWrapper = styled.div`
     ${media.mobile} {
       height: 252px;
     }
+    .y-axis-number {
+      ${fonts.p6}
+    }
   }
 `;