[GSW-2032] SonarQube code quality

packages/web/.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+.scannerwork/
 
 # next.js
 /.next/

packages/web/src/common/clients/storage-client/web-storage-client.ts

@@ -7,9 +7,9 @@ export class WebStorageClient implements StorageClient {
     this.storageType = storageType;
   }
 
-  get storage() {
-    if (!window) {
-      return;
+  get storage(): Storage | null {
+    if (typeof window === "undefined") {
+      return null;
     }
     if (this.storageType === "LOCAL") {
       return window.localStorage;

packages/web/src/common/utils/date-util.ts

@@ -26,26 +26,6 @@ export const getDateUtcToLocal = (d: string | Date) => {
   };
 };
 
-export const getDateDiff = (d: string | Date) => {
-  const now = dayjs();
-  const target = dayjs(getDateUtcToLocal(d).value);
-  const diff = now.diff(target, "seconds");
-  const diffM = now.diff(target, "minute");
-  const diffH = now.diff(target, "hours");
-  const diffD = now.diff(target, "day");
-  if (diff < 60) return "less than a minute ago";
-  if (diffM < 2) return "1 min ago";
-  if (diffM >= 2 && diffM <= 59) return `${diffM} mins ago`;
-  if (diffM >= 60 && diffM <= 119) return "1 hour ago";
-  if (diffH >= 2 && diffH <= 23) return `${diffH} hours ago`;
-  if (diffD >= 1 && diffD < 2) return "1 day ago";
-  if (diffD >= 2 && diffD < 31) return `${diffD} days ago`;
-  if (diffD >= 31 && diffD < 61) return "1 month ago";
-  if (diffD >= 61 && diffD < 365) return `${Math.floor(diffD / 30)} months ago`;
-  if (diffD >= 365 && diffD < 730) return "1 year ago";
-  if (diffD >= 730) return `${Math.floor(diffD / 365)} years ago`;
-};
-
 export const getLocalDateString = (d: string | Date) => {
   const { value, offsetHours } = getDateUtcToLocal(d);
   const sign = offsetHours > 0 ? "+" : "-";

packages/web/src/components/common/bar-graph/BarGraph.tsx

@@ -162,13 +162,24 @@ const BarGraph: React.FC<BarGraphProps> = ({
     return getGraphPoints()[currentTick];
   }, [currentTick, getGraphPoints]);
 
+  const getEventCoordinates = (
+    event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>,
+  ) => {
+    const isTouch = event.type.startsWith("touch");
+    const touch = isTouch ? (event as React.TouchEvent<HTMLDivElement>).touches[0] : null;
+
+    return {
+      clientX: isTouch ? touch?.clientX : (event as React.MouseEvent<HTMLDivElement, MouseEvent>).clientX,
+      clientY: isTouch ? touch?.clientY : (event as React.MouseEvent<HTMLDivElement, MouseEvent>).clientY,
+    };
+  };
+
   const onMouseMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) => {
     event.preventDefault();
     event.stopPropagation();
-    const isTouch = event.type.startsWith("touch");
-    const touch = isTouch ? (event as React.TouchEvent<HTMLDivElement>).touches[0] : null;
-    const clientX = isTouch ? touch?.clientX : (event as React.MouseEvent<HTMLDivElement, MouseEvent>).clientX;
-    const clientY = isTouch ? touch?.clientY : (event as React.MouseEvent<HTMLDivElement, MouseEvent>).clientY;
+
+    const { clientX, clientY } = getEventCoordinates(event);
+
     if (!activated) {
       setCurrentPointIndex(-1);
       return;

packages/web/src/components/common/double-logo/DoubleLogo.styles.ts

@@ -6,17 +6,32 @@ export interface DoubleLogoStyleProps {
   overlap?: string | number;
 }
 
+const FONT_SIZES = {
+  36: "13px",
+  32: "12px",
+  28: "10px",
+  24: "9px",
+  21: "8px",
+  20: "7px",
+} as const;
+
+type SizeKey = keyof typeof FONT_SIZES;
+
+const getSizeValue = (size: string | number | undefined) => {
+  if (!size) return "36px";
+  return typeof size === "number" ? `${size}px` : size;
+};
+
+const getFontSize = (size: string | number = 36): string => {
+  const key = typeof size === "string" ? parseInt(size) : size;
+  return FONT_SIZES[key as SizeKey];
+};
+
 export const DoubleLogoWrapper = styled.div<DoubleLogoStyleProps>`
   ${mixins.flexbox("row", "center", "center")};
   img {
-    width: ${({ size }) => {
-      if (size) return typeof size === "number" ? `${size}px` : size;
-      return "36px";
-    }};
-    height: ${({ size }) => {
-      if (size) return typeof size === "number" ? `${size}px` : size;
-      return "36px";
-    }};
+    width: ${({ size }) => getSizeValue(size)};
+    height: ${({ size }) => getSizeValue(size)};
     border-radius: 50%;
   }
   .right-logo {
@@ -27,34 +42,12 @@ export const DoubleLogoWrapper = styled.div<DoubleLogoStyleProps>`
   }
   .missing-logo {
     ${mixins.flexbox("row", "center", "center")};
-    width: ${({ size }) => {
-      if (size) return typeof size === "number" ? `${size}px` : size;
-      return "36px";
-    }};
-    height: ${({ size }) => {
-      if (size) return typeof size === "number" ? `${size}px` : size;
-      return "36px";
-    }};
+    width: ${({ size }) => getSizeValue(size)};
+    height: ${({ size }) => getSizeValue(size)};
     font-weight: 600;
     border-radius: 50%;
     color: ${({ theme }) => theme.color.text02};
     background-color: ${({ theme }) => theme.color.text04};
-    font-size: ${({ size = 36 }) => {
-      return `${
-        size === 36
-          ? "13"
-          : size === 32
-          ? "12"
-          : size === 28
-          ? "10"
-          : size === 24
-          ? "9"
-          : size === 21
-          ? "8"
-          : size === 20
-          ? "7"
-          : "6"
-      }px`;
-    }};
+    font-size: ${({ size = 36 }) => getFontSize(size)};
   }
 `;

packages/web/src/components/common/line-graph/LineGraph.tsx

@@ -9,6 +9,33 @@ import { convertToKMB } from "@utils/stake-position-utils";
 import { formatPrice } from "@utils/new-number-utils";
 import dayjs from "dayjs";
 
+interface DataItem {
+  value: number;
+  time: string | number;
+}
+
+interface DataContext {
+  current: DataItem;
+  prev2: DataItem | null;
+  prev1: DataItem | null;
+  next1: DataItem | null;
+  next2: DataItem | null;
+}
+
+function getDataItem(data: DataItem[], index: number): DataItem | null {
+  return index >= 0 && index < data.length ? data[index] : null;
+}
+
+function createItemContext(data: DataItem[], currentIndex: number): DataContext {
+  return {
+    current: data[currentIndex],
+    prev2: getDataItem(data, currentIndex - 2),
+    prev1: getDataItem(data, currentIndex - 1),
+    next1: getDataItem(data, currentIndex + 1),
+    next2: getDataItem(data, currentIndex + 2),
+  };
+}
+
 function calculateSmoothing(pointA: Point, pointB: Point) {
   const lengthX = pointB.x - pointA.x;
   const lengthY = pointB.y - pointA.y;
@@ -191,19 +218,16 @@ const LineGraph: React.FC<LineGraphProps> = ({
 
       if (smooth) {
         return newDatas.map((item, index) => {
-          const currentItem = item;
-          const previous2Item = index > 1 ? newDatas[index - 2] : null;
-          const previous1Item = index !== 0 ? newDatas[index - 1] : null;
-          const next1Item = index !== length - 1 ? newDatas[index + 1] : null;
-          const next2Item = index !== length - 2 ? newDatas[index + 2] : null;
-          if (previous1Item && next1Item && next2Item) {
+          const context = createItemContext(newDatas, index);
+
+          if (context.prev1 && context.next1 && context.next2) {
             if (
-              Math.abs(next1Item.value - next2Item.value) < 0.001 &&
-              Math.abs(currentItem.value - next1Item.value) < 0.001 &&
-              Math.abs(currentItem.value - previous1Item.value) >= 0.001
+              Math.abs(context.next1.value - context.next2.value) < 0.001 &&
+              Math.abs(context.current.value - context.next1.value) < 0.001 &&
+              Math.abs(context.current.value - context.prev1.value) >= 0.001
             ) {
-              const fakeItemValue = new BigNumber(currentItem.value)
-                .minus(BigNumber(currentItem.value).minus(BigNumber(previous1Item.value)).dividedBy(15))
+              const fakeItemValue = new BigNumber(context.current.value)
+                .minus(BigNumber(context.current.value).minus(BigNumber(context.prev1.value)).dividedBy(15))
                 .toNumber();
 
               return {
@@ -212,14 +236,14 @@ const LineGraph: React.FC<LineGraphProps> = ({
               };
             }
           }
-          if (previous2Item && previous1Item && next1Item)
+          if (context.prev2 && context.prev1 && context.next1)
             if (
-              Math.abs(previous2Item.value - previous1Item.value) < 0.001 &&
-              Math.abs(previous1Item.value - currentItem.value) < 0.001
+              Math.abs(context.prev2.value - context.prev1.value) < 0.001 &&
+              Math.abs(context.prev1.value - context.current.value) < 0.001
             ) {
-              if (currentItem.value - next1Item.value >= 0.01) {
-                const fakeItemValue = new BigNumber(currentItem.value)
-                  .plus(BigNumber(next1Item.value).minus(BigNumber(currentItem.value)).dividedBy(15))
+              if (context.current.value - context.next1.value >= 0.01) {
+                const fakeItemValue = new BigNumber(context.current.value)
+                  .plus(BigNumber(context.next1.value).minus(BigNumber(context.current.value)).dividedBy(15))
                   .toNumber();
 
                 return {
@@ -228,9 +252,9 @@ const LineGraph: React.FC<LineGraphProps> = ({
                 };
               }
 
-              if (next1Item.value - currentItem.value >= 0.01) {
-                const fakeItemValue = new BigNumber(currentItem.value)
-                  .plus(BigNumber(next1Item.value).minus(BigNumber(currentItem.value)).dividedBy(15))
+              if (context.next1.value - context.current.value >= 0.01) {
+                const fakeItemValue = new BigNumber(context.current.value)
+                  .plus(BigNumber(context.next1.value).minus(BigNumber(context.current.value)).dividedBy(15))
                   .toNumber();
 
                 return {

packages/web/src/components/common/missing-logo/MissingLogo.styles.tsx

@@ -8,6 +8,17 @@ interface Props {
   placeholderFontSize?: number;
 }
 
+const getFontSize = (width: number | undefined): string => {
+  if (!width) return "6";
+  if (width === 36) return "13";
+  if (width === 32) return "12";
+  if (width === 28) return "10";
+  if (width === 24) return "9";
+  if (width === 21) return "8";
+  if (width === 20) return "7";
+  return "6";
+};
+
 export const Image = styled.img<Props>`
   min-width: ${({ width }) => {
     return `${width}px`;
@@ -20,21 +31,7 @@ export const Image = styled.img<Props>`
   }};
   ${media.mobile} {
     font-size: ${({ mobileWidth }) => {
-      return `${
-        mobileWidth === 36
-          ? "13"
-          : mobileWidth === 32
-          ? "12"
-          : mobileWidth === 28
-          ? "10"
-          : mobileWidth === 24
-          ? "9"
-          : mobileWidth === 21
-          ? "8"
-          : mobileWidth === 20
-          ? "7"
-          : "6"
-      }px`;
+      return `${getFontSize(mobileWidth)}px`;
     }};
     height: ${({ mobileWidth }) => {
       return `${mobileWidth}px`;
@@ -67,42 +64,12 @@ export const LogoWrapper = styled.div<Props>`
   font-weight: 600;
   font-size: ${({ width, placeholderFontSize }) => {
     if (placeholderFontSize) return `${placeholderFontSize}px`;
-
-    return `${
-      width === 36
-        ? "13"
-        : width === 32
-        ? "12"
-        : width === 28
-        ? "10"
-        : width === 24
-        ? "9"
-        : width === 21
-        ? "8"
-        : width === 20
-        ? "7"
-        : "6"
-    }px`;
+    return `${getFontSize(width)}`;
   }};
   ${media.mobile} {
     font-size: ${({ mobileWidth, placeholderFontSize }) => {
       if (placeholderFontSize) return `${placeholderFontSize}px`;
-
-      return `${
-        mobileWidth === 36
-          ? "13"
-          : mobileWidth === 32
-          ? "12"
-          : mobileWidth === 28
-          ? "10"
-          : mobileWidth === 24
-          ? "9"
-          : mobileWidth === 21
-          ? "8"
-          : mobileWidth === 20
-          ? "7"
-          : "6"
-      }px`;
+      return `${getFontSize(mobileWidth)}`;
     }};
     height: ${({ mobileWidth }) => {
       return `${mobileWidth}px`;

packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.styles.ts

@@ -396,12 +396,13 @@ export const PriceImpactWrapper = styled.div<{ priceImpact?: PriceImpactStatus }
       case "HIGH":
         return `color: ${theme.color.red01};`;
       case "LOW":
-      default:
         return `color: ${theme.color.text04};`;
       case "POSITIVE":
         return `color: ${theme.color.green01};`;
       case "MEDIUM":
         return `color: ${theme.color.goldenrod};`;
+      default:
+        return `color: ${theme.color.text04};`;
     }
   }}
   margin-left: 8px;
@@ -416,12 +417,12 @@ export const PriceImpactStatusWrapper = styled.span<{
         return `color: ${theme.color.red01};`;
       case "LOW":
         return `color: ${theme.color.text10};`;
-      default:
-        return `color: ${theme.color.text04};`;
       case "POSITIVE":
         return `color: ${theme.color.green01};`;
       case "MEDIUM":
         return `color: ${theme.color.goldenrod};`;
+      default:
+        return `color: ${theme.color.text04};`;
     }
   }}
 `;
@@ -433,12 +434,13 @@ export const PriceImpactStrWrapper = styled.span<{
       case "HIGH":
         return `color: ${theme.color.red01};`;
       case "LOW":
-      default:
         return `color: ${theme.color.text04};`;
       case "POSITIVE":
         return `color: ${theme.color.green01};`;
       case "MEDIUM":
         return `color: ${theme.color.goldenrod};`;
+      default:
+        return `color: ${theme.color.text04};`;
     }
   }}
 `;