Merge pull request #2359 from IX-Swap/fixbug/bug-on-template-file

Fix some bug in lbp page

src/components/LBP/Dashboard/InvestorInformation.tsx

@@ -13,6 +13,7 @@ import { TYPE } from 'theme'
 import styled from 'styled-components'
 
 interface TableProps {
+  title: string | undefined | null
   lbpId: number
   setNoOfParticipants: (noOfParticipants: number) => void
 }
@@ -26,7 +27,7 @@ const ExtractButton = styled.button`
   border-radius: 6px;
 `
 
-function InvestorInformation({ lbpId, setNoOfParticipants }: TableProps) {
+function InvestorInformation({ lbpId, title, setNoOfParticipants }: TableProps) {
   const [investorInfo, setInvestorInfo] = useState<any[]>([])
   const [page, setPage] = useState(0)
   const [rowsPerPage, setRowsPerPage] = useState(5)
@@ -56,10 +57,11 @@ function InvestorInformation({ lbpId, setNoOfParticipants }: TableProps) {
   }
 
   const downloadCsv = () => {
+    const fileName = title ? `${title.replace(/\s/g, '_')}_investor_information.csv`  : 'investor_information.csv'
     const csvContent = 'data:text/csv;charset=utf-8,' + encodeURIComponent(convertToCsv(investorInfo))
     const link = document.createElement('a')
     link.setAttribute('href', csvContent)
-    link.setAttribute('download', 'investor_information.csv')
+    link.setAttribute('download', fileName)
     document.body.appendChild(link)
     link.click()
   }

src/components/LBP/InvestmentList/LbpSaleStatusInfo.tsx

@@ -4,6 +4,7 @@ import _get from 'lodash/get'
 
 import { LbpStatus } from '../types'
 import { text5 } from 'components/LaunchpadMisc/typography'
+import { displayRemainingTime } from 'utils/time'
 
 interface Props {
   daysTillEnded?: number
@@ -37,11 +38,7 @@ export const LbpSaleStatusInfo: React.FC<Props> = (props) => {
     return () => clearInterval(intervalId)
   }, [calculateRemainingTime])
 
-  const info = props.hoursTillEnded
-    ? `${props.hoursTillEnded > 1 ? `${props.hoursTillEnded} Hours` : 'Less than 1 Hour'}`
-    : props.daysTillEnded
-    ? `${props.daysTillEnded} ${props.daysTillEnded > 1 ? 'Days' : 'Day'}`
-    : null
+  const info = displayRemainingTime(props?.daysTillEnded ?? 0, props?.hoursTillEnded ?? 0)
 
   if ([LbpStatus.ended, LbpStatus.closed].includes(props.status as LbpStatus)) {
     let label: string = ''
@@ -61,13 +58,12 @@ export const LbpSaleStatusInfo: React.FC<Props> = (props) => {
   }
 
   if ([LbpStatus.pending].includes(props.status as LbpStatus)) {
+    let displayTime = ''
     const remainingDays = Math.floor(remainingTime / (24 * 60 * 60))
     const remainingHours = Math.floor((remainingTime % (24 * 60 * 60)) / (60 * 60))
     const remainingMinutes = Math.floor((remainingTime % (60 * 60)) / 60)
     const remainingSeconds = Math.floor(remainingTime % 60)
 
-    let displayTime = ''
-
     if (remainingDays > 0) {
       displayTime = remainingDays === 1 ? `${remainingDays} day` : `${remainingDays} days`
 

src/components/LBP/PublicDetails/Remaining.tsx

@@ -4,24 +4,13 @@ import styled from 'styled-components'
 import { ColumnCenter } from 'components/Column'
 import { TYPE } from 'theme'
 import { LbpFormValues } from '../types'
+import { displayRemainingTime } from 'utils/time'
 
 interface RemainingProps {
   lbpData: LbpFormValues | null
 }
 
-const displayRemainingTime = (remainingDays: number, remainingHours: number) => {
-  if (remainingDays > 1) {
-    return `${remainingDays} Days`
-  } else {
-    if (remainingDays === 1) {
-      return '1 Day'
-    }
-    if (remainingHours < 1) {
-      return 'Less than 1 Hour'
-    }
-    return `${remainingHours} Hours`
-  }
-}
+
 
 const Remaining: React.FC<RemainingProps> = ({ lbpData }) => {
   const [remainingTime, setRemainingTime] = useState(28 * 24 * 60 * 60)

src/pages/LBP/AdminLbpDetail.tsx

@@ -76,7 +76,7 @@ const AdminLbpDetail = () => {
               chartWidth={1200}
             />
             <StatisticData isAdmin={true} statsData={statsData} lbpData={lbpData} />
-            <InvestorInformation lbpId={lbpId} setNoOfParticipants={setNoOfParticipants} />
+            <InvestorInformation lbpId={lbpId} title={lbpData?.title} setNoOfParticipants={setNoOfParticipants} />
           </>
         )}
       </Wrapper>

src/pages/LBP/components/SummaryFields.tsx

@@ -11,6 +11,7 @@ import { useCurrency } from 'hooks/Tokens'
 import Copy from 'components/AccountDetails/Copy'
 import { getTokenOption } from 'pages/LBP/components/Tokenomics'
 import { useTokenContract } from 'hooks/useContract'
+import { displayRemainingTime } from 'utils/time'
 
 interface SummaryFieldsProps {
   noOfParticipants: number
@@ -101,7 +102,7 @@ const SummaryFields: React.FC<SummaryFieldsProps> = ({ lbpData, noOfParticipants
             <TYPE.subHeader1 color={'#555566'}>LBP closes in</TYPE.subHeader1>
             <TokenWrapper>
               <TYPE.label fontSize={'14px'} marginTop={9}>
-                {remainingDays > 0 ? `${remainingDays} Days` : `${remainingHours} Hours`}
+                {displayRemainingTime(remainingDays, remainingHours)}
               </TYPE.label>
             </TokenWrapper>
           </TopBox>

src/utils/time.ts

@@ -144,3 +144,21 @@ export const isAfterWithSameTime = (from: Moment, to: Moment | null) => {
 export const toUnixTimeSeconds = (date: Date): number => {
   return Math.floor(date.getTime() / 1000)
 }
+
+export const displayRemainingTime = (remainingDays: number, remainingHours: number): string => {
+  // Handle days first
+  if (remainingDays > 1) {
+    return `${remainingDays} Days`
+  } else if (remainingDays === 1) {
+    return '1 Day'
+  }
+
+  // If days are less than 1, handle hours
+  if (remainingHours < 1) {
+    return remainingHours === 0 ? '0 Hour' : 'Less than 1 Hour'
+  } else if (remainingHours === 1) {
+    return '1 Hour'
+  } else {
+    return `${remainingHours} Hours`
+  }
+}