chore: fix github comments

rango-exchange · Jan 16, 2024 · 8d05fbf · 8d05fbf
1 parent 6fadd6b
commit 8d05fbf
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 40 deletions.
diff --git a/components/common/Table/cells/AmountCell.tsx b/components/common/Table/cells/AmountCell.tsx
@@ -42,30 +42,30 @@ function AmountCell(props: CellProps) {
       <div className="md:hidden text-12 mt-10 text-primary-500">
         {column.title}
       </div>
-      <div
-        className={`text-14 md:text-16 md:mb-5 flex items-center ${
-          usdToRealAmount ? 'text-primary-500' : 'text-neutral-400'
-        }`}>
-        <span className="mr-5">
-          {usdToRealAmount
-            ? `$${usdToRealAmount.toFixed(2)}`
-            : `~$${
-                usdToExpectedAmount ? usdToExpectedAmount.toFixed(2) : '--'
-              }`}
-        </span>
-        <span>
-          {usdToRealAmount
-            ? `(${realChangePercentage}%)`
-            : expectedChangePercentage
-              ? `(${expectedChangePercentage}%)`
-              : ''}
-        </span>
-      </div>
+      {(usdToRealAmount || usdToExpectedAmount) && (
+        <div
+          className={`text-14 md:text-16 md:mb-5 flex items-center ${
+            usdToRealAmount ? 'text-primary-500' : 'text-neutral-400'
+          }`}>
+          <span className="mr-5">
+            {usdToRealAmount
+              ? `$${usdToRealAmount.toFixed(2)}`
+              : `~$${usdToExpectedAmount?.toFixed(2)}`}
+          </span>
+          <span>
+            {usdToRealAmount
+              ? `(${realChangePercentage}%)`
+              : expectedChangePercentage
+                ? `(${expectedChangePercentage}%)`
+                : ''}
+          </span>
+        </div>
+      )}
       <div className="text-12 md:text-14 flex items-center">
         <GassIcon className="text-neutral-400" size="0.875rem" />
         <span className="px-5 text-neutral-400">Fee:</span>
         <span className="text-neutral-400">
-          {gasFee ? `${gasFee.toFixed(2)}` : '--'}
+          {gasFee ? `$${gasFee.toFixed(2)}` : '--'}
         </span>
       </div>
     </div>

diff --git a/components/common/Table/cells/RequestIDCell.tsx b/components/common/Table/cells/RequestIDCell.tsx
@@ -1,35 +1,29 @@
-import { useRouter } from 'next/router';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { CellProps } from '../Table.type';
 import ButtonCopyIcon from 'components/common/ButtonCopyIcon';
 import Tooltip from 'components/common/Tooltip';
+import Link from 'next/link';
 
 dayjs.extend(utc);
 
 function RequestIDCell(props: CellProps) {
   const { swapItem, column } = props;
   const { requestId, transactionTime } = swapItem;
 
-  const router = useRouter();
-
-  const handleSwapDetails = (id: string) => {
-    router.push(`/swap/${id}`);
-  };
-
   return (
     <div className="flex flex-col md:col-span-3 items-start md:p-15 lg:p-20">
       <div className="text-12 md:hidden text-primary-500">{column.title}</div>
       <div className="flex justify-center items-center md:mb-5">
         <Tooltip label={requestId}>
-          <button
-            className="text-14 md:text-16 text-primary-500 mr-5 hover:underline hover:text-secondary-500"
-            onClick={() => handleSwapDetails(requestId)}>
+          <Link
+            href={`/swap/${requestId}`}
+            className="text-14 md:text-16 text-primary-500 mr-5 hover:underline hover:text-secondary-500">
             {`${requestId.slice(0, 8)}...${requestId.slice(
               requestId.length - 8,
               requestId.length,
             )}`}
-          </button>
+          </Link>
         </Tooltip>
         <ButtonCopyIcon tooltipText="Copy Request ID " text={requestId} />
       </div>

diff --git a/components/common/Table/cells/TokenCell.tsx b/components/common/Table/cells/TokenCell.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
+import { DEFAULT_TOKEN_LOGO } from 'constant';
 import { CellProps } from '../Table.type';
 
 function TokenCell(props: CellProps) {
@@ -28,12 +29,12 @@ function TokenCell(props: CellProps) {
       <div className="flex md:col-span-2 items-start md:items-center md:p-15 lg:p-20">
         <div className="relative mr-10 shrink-0">
           <img
-            src={logo}
+            src={logo || DEFAULT_TOKEN_LOGO}
             alt={name || symbol}
             className="rounded-full w-[27px] md:w-[30px] h-[27px] md:h-[30px]"
           />
           <img
-            src={blockchainLogo}
+            src={blockchainLogo || DEFAULT_TOKEN_LOGO}
             alt={blockchainShortName}
             className="absolute rounded-full w-[12px] md:w-[15px] h-[12px] md:h-[15px] right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
           />

diff --git a/components/detail/SwapDetailSummary/SwapDetailChain.tsx b/components/detail/SwapDetailSummary/SwapDetailChain.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable @next/next/no-img-element */
+import { DEFAULT_TOKEN_LOGO } from 'constant';
 import { SwapDetailItem } from './SwapDetail.type';
 
 function SwapDetailChain(props: SwapDetailItem) {
@@ -14,14 +15,14 @@ function SwapDetailChain(props: SwapDetailItem) {
     <div className="flex col-span-2 items-center h-[3.75rem] p-18">
       <div className="relative mr-10">
         <img
-          src={logo}
+          src={logo || DEFAULT_TOKEN_LOGO}
           className="rounded-full"
           alt={name || symbol}
           width={30}
           height={30}
         />
         <img
-          src={blockchainLogo}
+          src={blockchainLogo || DEFAULT_TOKEN_LOGO}
           width={15}
           height={15}
           alt={blockchainShortName}

diff --git a/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx b/components/detail/SwapDetailSummary/SwapDetailMobileToken.tsx
@@ -2,6 +2,7 @@
 import ButtonCopyIcon from 'components/common/ButtonCopyIcon';
 import { SwapDetailItem } from './SwapDetail.type';
 import Link from 'next/link';
+import { DEFAULT_TOKEN_LOGO } from 'constant';
 
 function SwapDetailMobileToken(props: SwapDetailItem) {
   const { details, column } = props;
@@ -66,14 +67,14 @@ function SwapDetailMobileToken(props: SwapDetailItem) {
         <div className="flex items-center">
           <div className="relative">
             <img
-              src={logo}
+              src={logo || DEFAULT_TOKEN_LOGO}
               className="rounded-full"
               alt={name || symbol}
               width={18}
               height={18}
             />
             <img
-              src={blockchainLogo}
+              src={blockchainLogo || DEFAULT_TOKEN_LOGO}
               width={10}
               height={10}
               alt={blockchainShortName}

diff --git a/components/detail/SwapSteps/SwapStepChainLogo.tsx b/components/detail/SwapSteps/SwapStepChainLogo.tsx
@@ -1,22 +1,25 @@
 /* eslint-disable @next/next/no-img-element */
 import React from 'react';
 import { SwapStepChainLogoProps } from './SwapSteps.type';
+import { DEFAULT_TOKEN_LOGO } from 'constant';
 
 function SwapStepChainLogo(props: SwapStepChainLogoProps) {
   const { token } = props;
   const { symbol, logo, name, blockchainData } = token;
   const { shortName: blockchainShortName, logo: blockchainLogo } =
     blockchainData;
 
+  console.log('logo', logo);
+
   return (
     <div className="relative mr-5">
       <img
         className="z-0 w-[17px] md:w-[27px] h-[17px] md:h-[27px] rounded-full"
-        src={logo}
+        src={logo || DEFAULT_TOKEN_LOGO}
         alt={symbol || name}
       />
       <img
-        src={blockchainLogo}
+        src={blockchainLogo || DEFAULT_TOKEN_LOGO}
         alt={blockchainShortName}
         className="rounded-full absolute w-[10px] md:w-[12px] h-[10px] md:h-[12px] right-[-2px] bottom-[-2px] z-10"
       />

diff --git a/components/detail/SwapSteps/SwapStepSwapper.tsx b/components/detail/SwapSteps/SwapStepSwapper.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { SwapStepItemProps } from './SwapSteps.type';
 import { InternalPathType } from 'types';
 import { BorderColor } from './SwapSteps.helper';
+import { DEFAULT_TOKEN_LOGO } from 'constant';
 
 function SwapStepSwapper(props: SwapStepItemProps) {
   const { step } = props;
@@ -31,7 +32,7 @@ function SwapStepSwapper(props: SwapStepItemProps) {
               className="flex items-center">
               <img
                 className={`mr-5 md:mr-10 border w-[1.375rem] md:w-[1.75rem] h-[1.375rem] md:h-[1.75rem] border-solid ${borderColor} rounded-full`}
-                src={internalSwapper?.swapperLogo}
+                src={internalSwapper?.swapperLogo || DEFAULT_TOKEN_LOGO}
                 alt={internalSwapper?.swapperTitle}
               />
               <div className="text-12 md:text-18 text-primary-500">

diff --git a/constant/index.ts b/constant/index.ts
@@ -15,3 +15,5 @@ export const STATUS: any = {
 export const SEARCH_RESULT_OFFSET = 14;
 
 export const API_URL = process.env.NEXT_PUBLIC_BASE_URL;
+export const DEFAULT_TOKEN_LOGO =
+  'https://app.rango.exchange/coins/unknown.png';