fix: make request id cell render on client

rango-exchange · Jan 22, 2025 · 3def87f · 3def87f
1 parent 381d4df
commit 3def87f
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 33 deletions.
diff --git a/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetailMobileValue.tsx b/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetailMobileValue.tsx
@@ -1,13 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
 import { SecondsTohms } from 'src/utils/secondsTohms';
 import { SwapDetailItem } from './SwapDetail.type';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import IconStatus from 'src/components/common/IconStatus';
 import { StepsIcon } from 'src/components/icons';
 import Tooltip from 'src/components/common/Tooltip';
+import dynamic from 'next/dynamic';
 
-dayjs.extend(utc);
+const LocalDate = dynamic(() => import('src/components/common/LocalDate'), {
+  ssr: false,
+});
 
 function SwapDetailMobileValue(props: SwapDetailItem) {
   const { details, column } = props;
@@ -49,11 +50,7 @@ function SwapDetailMobileValue(props: SwapDetailItem) {
         )}
         {column.title === 'Initiation Date And Time' && creationDate && (
           <div className="text-14 text-primary-500">
-            {dayjs
-              .utc(creationDate)
-              .local()
-              .format('MMMM DD, YYYY | HH:mm:ss')
-              .toString()}
+            <LocalDate date={creationDate} />
           </div>
         )}
         {column.title === 'Duration' && (

diff --git a/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetailValue.tsx b/src/app/swap/[id]/_components/SwapDetailSummary/SwapDetailValue.tsx
@@ -1,13 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
 import { SecondsTohms } from 'src/utils/secondsTohms';
 import { SwapDetailItem } from './SwapDetail.type';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import IconStatus from 'src/components/common/IconStatus';
 import { StepsIcon } from 'src/components/icons';
 import Tooltip from 'src/components/common/Tooltip';
+import dynamic from 'next/dynamic';
 
-dayjs.extend(utc);
+const LocalDate = dynamic(() => import('src/components/common/LocalDate'), {
+  ssr: false,
+});
 
 function SwapDetailValue(props: SwapDetailItem) {
   const { details, column } = props;
@@ -70,11 +71,7 @@ function SwapDetailValue(props: SwapDetailItem) {
       )}
       {column.title === 'Initiation Date And Time' && creationDate && (
         <span className="text-primary-500">
-          {dayjs
-            .utc(creationDate)
-            .local()
-            .format('MMMM D, YYYY | hh:mm:ss A')
-            .toString()}
+          <LocalDate date={creationDate} />
         </span>
       )}
     </div>

diff --git a/src/app/swap/[id]/_components/SwapSteps/SwapStepValue.tsx b/src/app/swap/[id]/_components/SwapSteps/SwapStepValue.tsx
@@ -1,9 +1,10 @@
 import { SecondsTohms } from 'src/utils/secondsTohms';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import { SwapStepItemValueProps } from './SwapSteps.type';
+import dynamic from 'next/dynamic';
 
-dayjs.extend(utc);
+const LocalDate = dynamic(() => import('src/components/common/LocalDate'), {
+  ssr: false,
+});
 
 function SwapStepValue(props: SwapStepItemValueProps) {
   const { step, column, firstStep } = props;
@@ -62,8 +63,7 @@ function SwapStepValue(props: SwapStepItemValueProps) {
 
       {column.title === 'Step Start Time' && (
         <span className="text-primary-500">
-          {startTime &&
-            dayjs.utc(startTime).local().format('HH:mm:ss').toString()}
+          {startTime && <LocalDate date={startTime} format="HH:mm:ss" />}
         </span>
       )}
 

diff --git a/src/components/common/LocalDate/LocalDate.types.ts b/src/components/common/LocalDate/LocalDate.types.ts
@@ -0,0 +1,6 @@
+import { ConfigType as DateType } from 'dayjs';
+
+export interface LocalDateProps {
+  date: DateType;
+  format?: string;
+}
diff --git a/src/components/common/LocalDate/index.tsx b/src/components/common/LocalDate/index.tsx
@@ -0,0 +1,12 @@
+import dayjs from 'dayjs';
+import { LocalDateProps } from './LocalDate.types';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+
+function LocalDate(props: LocalDateProps) {
+  const { date, format = 'MMMM D, YYYY | hh:mm:ss A' } = props;
+
+  return <>{dayjs.utc(date).local().format(format).toString()}</>;
+}
+
+export default LocalDate;
diff --git a/src/components/common/Table/TableBody.tsx b/src/components/common/Table/TableBody.tsx
@@ -1,12 +1,8 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 import { TableBodyProps } from './Table.type';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import { columns } from './Table.helper';
 import Link from 'next/link';
 
-dayjs.extend(utc);
-
 function TableBody(props: TableBodyProps) {
   const { data } = props;
   return (

diff --git a/src/components/common/Table/cells/RequestIDCell.tsx b/src/components/common/Table/cells/RequestIDCell.tsx
@@ -1,11 +1,12 @@
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
 import { CellProps } from '../Table.type';
 import ButtonCopyIcon from 'src/components/common/ButtonCopyIcon';
 import Tooltip from 'src/components/common/Tooltip';
 import Link from 'next/link';
+import dynamic from 'next/dynamic';
 
-dayjs.extend(utc);
+const LocalDate = dynamic(() => import('../../LocalDate'), {
+  ssr: false,
+});
 
 function RequestIDCell(props: CellProps) {
   const { swapItem, column } = props;
@@ -28,11 +29,7 @@ function RequestIDCell(props: CellProps) {
         <ButtonCopyIcon tooltipText="Copy Request ID " text={requestId} />
       </div>
       <div className="text-12 md:text-14 text-neutral-400">
-        {dayjs
-          .utc(transactionTime)
-          .local()
-          .format('MMMM D, YYYY | hh:mm:ss A')
-          .toString()}
+        <LocalDate date={transactionTime} />
       </div>
     </div>
   );