refactor: [GSW-2033] SonarQube issue

gnoswap-labs · Jan 4, 2025 · b0e458d · b0e458d
1 parent 9f2c80b
commit b0e458d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 14 deletions.
diff --git a/.../web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenChart.styles.ts b/.../web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenChart.styles.ts
@@ -1,6 +1,5 @@
 import styled from "@emotion/styled";
 import mixins from "@styles/mixins";
-import { css, type Theme } from "@emotion/react";
 import { fonts } from "@constants/font.constant";
 
 export const SwapTokenChartWrapper = styled.div`
@@ -22,21 +21,20 @@ export const ChartNotFound = styled.div`
   font-size: 14px;
 `;
 
-export const loadingWrapper = (theme: Theme) => css`
+export const LoadingWrapper = styled.div`
   ${mixins.flexbox("row", "flex-start", "center")}
   width: 100%;
-  background-color: ${theme.color.background01};
+  background-color: ${({ theme }) => theme.color.background01};
   border-radius: 8px;
   > span {
     margin-top: 6px;
-    color: ${theme.color.text04};
-    ${fonts.body11}
+    color: ${({ theme }) => theme.color.text04} ${fonts.body11};
   }
   > div {
     width: 36px;
     height: 36px;
     &::before {
-      background-color: ${theme.color.background01};
+      background-color: ${({ theme }) => theme.color.background01};
       width: 26px;
       height: 26px;
     }

diff --git a/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenChart.tsx b/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenChart.tsx
@@ -4,9 +4,8 @@ import { IPriceResponse } from "@repositories/token";
 import { getLocalizeTime } from "@utils/chart";
 
 import LineGraph, { LineGraphData } from "@components/common/line-graph/LineGraph";
-import { ChartNotFound, SwapTokenChartWrapper } from "./SwapTokenChart.styles";
+import { ChartNotFound, LoadingWrapper, SwapTokenChartWrapper } from "./SwapTokenChart.styles";
 import LoadingSpinner from "@components/common/loading-spinner/LoadingSpinner";
-import { loadingWrapper } from "./SwapTokenChart.styles";
 import { SWAP_TOKEN_CHART_COLORS } from "@constants/graph.constant";
 
 interface SwapTokenChartProps {
@@ -36,9 +35,9 @@ const SwapTokenChart = ({ data = [], isLoading, isFetched, onMouseMove, onMouseO
   return (
     <SwapTokenChartWrapper>
       {isLoading && (
-        <div css={loadingWrapper}>
+        <LoadingWrapper>
           <LoadingSpinner />
-        </div>
+        </LoadingWrapper>
       )}
       {isNoData && <ChartNotFound>No price history</ChartNotFound>}
       {hasData && (

diff --git a/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenHeader.tsx b/packages/web/src/layouts/swap/components/swap-info-chart/swap-token-info/SwapTokenHeader.tsx
@@ -12,6 +12,7 @@ import { DEVICE_TYPE } from "@styles/media";
 import MissingLogo from "@components/common/missing-logo/MissingLogo";
 import { SwapTokenHeaderWrapper } from "./SwapTokenHeader.styles";
 import IconOpenLink from "@components/common/icons/IconOpenLink";
+import { nullish } from "@utils/nullish-utils";
 
 interface TokenInfo {
   name: string;
@@ -29,8 +30,8 @@ interface SwapTokenHeaderProps {
   chartData?: LineGraphData;
 }
 
-const DETERMIN_SHORT_SIZE_WEB = 160 as const;
-const DETERMIN_SHORT_SIZE_TABLET = 200 as const;
+const DETERMIN_SHORT_SIZE_WEB = 160;
+const DETERMIN_SHORT_SIZE_TABLET = 200;
 
 const SwapTokenHeader = ({ breakpoint, isMobile, tokenInfo, currentPrice, chartData }: SwapTokenHeaderProps) => {
   const elementId = React.useMemo(() => `${tokenInfo.name}`, [tokenInfo.name]);
@@ -66,7 +67,7 @@ const SwapTokenHeader = ({ breakpoint, isMobile, tokenInfo, currentPrice, chartD
   }, [elementId, breakpoint]);
 
   const displayPrice = React.useMemo(() => {
-    const price = chartData?.value || currentPrice;
+    const price = nullish.handleFalsy(chartData?.value, currentPrice);
     return `${formatPrice(price, { lessThan1Significant: 2 })}`;
   }, [chartData, currentPrice]);
 
@@ -86,7 +87,7 @@ const SwapTokenHeader = ({ breakpoint, isMobile, tokenInfo, currentPrice, chartD
       if (tokenInfo.isNative) {
         window.open(getGnoscanUrl(), "_blank", "noopener,noreferrer");
       } else {
-        window.open(getTokenUrl(tokenInfo.path || ""), "_blank", "noopener,noreferrer");
+        window.open(getTokenUrl(nullish.handleFalsy(tokenInfo.path, "")), "_blank", "noopener,noreferrer");
       }
     },
     [tokenInfo],