diff --git a/.example.env b/.example.env index 5d83267..be538de 100644 --- a/.example.env +++ b/.example.env @@ -2,7 +2,7 @@ PUBLIC_INFURA_PROJECT_ID="" PUBLIC_WALLETCONNECT_PROJECT_ID="" -# DBS +# UPLOADER UPLOADER_URL="" UPLOADER_ACCOUNT="" diff --git a/src/components/HistoryList/index.tsx b/src/components/HistoryList/index.tsx index d5bc977..3093c94 100644 --- a/src/components/HistoryList/index.tsx +++ b/src/components/HistoryList/index.tsx @@ -2,11 +2,11 @@ import React, { ReactElement, useEffect, useState } from 'react' import Button from '../Button' import styles from './index.module.css' import { addEllipsesToText } from '../../@utils/textFormat' -import Loader from '../Loader'; +import Loader from '../Loader' import { useAccount } from 'wagmi' import { getStatusMessage } from '../../@utils/statusCode' import { getLink } from '../../@utils/linkAsset' -import Pagination from './pagination'; +import Pagination from './pagination' const HistoryList = ({ items, @@ -27,25 +27,32 @@ const HistoryList = ({ changeHistoryPage: any }): ReactElement => { const { isConnected } = useAccount() - - const [currentPage, setCurrentPage] = useState(1); - const [files, setFiles] = React.useState([]); - const ITEMS_PER_PAGE = 25; + const [currentPage, setCurrentPage] = useState(1) + const [files, setFiles] = React.useState([]) + + const ITEMS_PER_PAGE = 8 useEffect(() => { setFiles(uploads) }, [uploads]) - const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; - const endIndex = startIndex + ITEMS_PER_PAGE; - const currentFiles = Array.isArray(files) ? files.slice(startIndex, endIndex) : []; - const totalPages = Array.isArray(files) ? Math.ceil(files.length / ITEMS_PER_PAGE) : 0; - + const startIndex = (currentPage - 1) * ITEMS_PER_PAGE + const endIndex = startIndex + ITEMS_PER_PAGE + const currentFiles = Array.isArray(files) + ? files.slice(startIndex, endIndex) + : [] + const totalPages = Array.isArray(files) + ? Math.ceil(files.length / ITEMS_PER_PAGE) + : 0 + return ( <>
- +
@@ -54,7 +61,11 @@ const HistoryList = ({ - + {currentFiles.map((file: any, index: number) => ( @@ -67,7 +78,10 @@ const HistoryList = ({ size="small" onClick={(e: React.SyntheticEvent) => { e.preventDefault() - getLink(items[tabIndex].type, file?.transactionHash || file?.cid) + getLink( + items[tabIndex].type, + file?.transactionHash || file?.cid + ) }} disabled={file.status !== 400} > @@ -76,17 +90,15 @@ const HistoryList = ({ ))} - { - currentFiles.length === 0 && + {currentFiles.length === 0 && ( - } + )} - { - isConnected && !historyUnlocked && + {isConnected && !historyUnlocked && ( - } + )}
Quote ID{'Preview'}
{addEllipsesToText(file.quoteId, 15)}

There's no files uploaded!
- { - historyUnlocked && totalPages > 1 && - { setCurrentPage(page); }} - /> - } + {historyUnlocked && totalPages > 1 && ( + { + setCurrentPage(page) + }} + /> + )} ) } diff --git a/src/components/HistoryList/pagination.module.css b/src/components/HistoryList/pagination.module.css index 4c3a4a6..4eda503 100644 --- a/src/components/HistoryList/pagination.module.css +++ b/src/components/HistoryList/pagination.module.css @@ -1,89 +1,96 @@ .paginationContainer { - display: flex; - justify-content: center; + display: flex; + justify-content: center; } .pagination { - display: flex; - flex-wrap: wrap; - justify-content: center; - margin-top: var(--spacer); - margin-bottom: var(--spacer); - padding-left: 0; - font-size: var(--font-size-small); - } - - .number { - font-weight: var(--font-weight-bold); - margin-left: -1px; - margin-top: -1px; - display: block; - cursor: pointer; - min-width: 3rem; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - color: var(--color-secondary); - } - - li:first-child .number, - :global(li.selected):nth-child(2) .number { - border-top-left-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); - } - - li:last-child .number { - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - } - - .number, - .number:hover, - .number:focus, - .number:active { - transform: none; - outline: 0; - } - - .number:hover { - color: var(--brand-pink); - } - - .current, - .prev, - .next, - .break { - composes: number; - } - - .current { - cursor: default; - pointer-events: none; - } - - .current > a, - .current:hover, - .current:focus, - .current:active { - color: var(--brand-pink) !important; - } - - .next { - text-align: right; - } - - .prevNextDisabled { - opacity: 0; - } - - .arrow { - width: 1rem; - height: 1rem; - fill: currentColor; - } - - .arrow.previous { - transform: rotate(180deg); - } - \ No newline at end of file + display: flex; + flex-wrap: wrap; + justify-content: center; + margin-top: var(--spacer); + margin-bottom: var(--spacer); + padding-left: 0; + font-size: var(--font-size-small); +} + +.number { + font-weight: var(--font-weight-bold); + margin-left: -1px; + margin-top: -1px; + display: block; + cursor: pointer; + min-width: 3rem; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-secondary); +} + +li:first-child .number, +:global(li.selected):nth-child(2) .number { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +li:last-child .number { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +.number, +.number:hover, +.number:focus, +.number:active { + transform: none; + outline: 0; +} + +.number:hover { + color: var(--brand-pink); +} + +.current, +.prev, +.next, +.break { + composes: number; +} + +.current { + cursor: default; + pointer-events: none; +} + +.current > a, +.current:hover, +.current:focus, +.current:active { + color: var(--brand-pink) !important; +} + +.next { + text-align: right; +} + +.prevNextDisabled { + display: none; +} + +.arrow { + width: 1rem; + height: 1rem; + fill: currentColor; +} + +.arrow.previous { + transform: rotate(180deg); +} + +.refreshButton { + opacity: 0.5; +} + +.refreshButton:hover { + opacity: 0.8; +} diff --git a/src/components/HistoryList/pagination.tsx b/src/components/HistoryList/pagination.tsx index 9c3fa55..760f06d 100644 --- a/src/components/HistoryList/pagination.tsx +++ b/src/components/HistoryList/pagination.tsx @@ -1,61 +1,73 @@ -import React from 'react'; -import styles from './pagination.module.css'; +import React from 'react' +import styles from './pagination.module.css' interface PaginationProps { - totalPages: number; - currentPage: number; - onPageChange: (page: number) => void; + totalPages: number + currentPage: number + onRefresh: () => void + onPageChange: (page: number) => void } -const Pagination = ({ totalPages, currentPage, onPageChange }: PaginationProps) => { +const Pagination = ({ + totalPages, + currentPage, + onRefresh, + onPageChange +}: PaginationProps) => { // Define the number of pages to show at the beginning and end - const pagesToShow = 3; + const pagesToShow = 3 // Calculate the start and end range of pages to display - let startPage = Math.max(1, currentPage - pagesToShow); - let endPage = Math.min(totalPages, currentPage + pagesToShow); + let startPage = Math.max(1, currentPage - pagesToShow) + let endPage = Math.min(totalPages, currentPage + pagesToShow) // If we have less than the required number of pages to show at the beginning, // adjust the endPage to display enough pages. if (currentPage <= pagesToShow) { - endPage = Math.min(currentPage + pagesToShow + (pagesToShow - currentPage), totalPages); + endPage = Math.min( + currentPage + pagesToShow + (pagesToShow - currentPage), + totalPages + ) } // If we have less than the required number of pages to show at the end, // adjust the startPage to display enough pages. if (currentPage >= totalPages - pagesToShow) { - startPage = Math.max(currentPage - pagesToShow - (pagesToShow - (totalPages - currentPage - 1)), 1); + startPage = Math.max( + currentPage - + pagesToShow - + (pagesToShow - (totalPages - currentPage - 1)), + 1 + ) } // Generate the pageNumbers array based on the calculated startPage and endPage - const pageNumbers = []; + const pageNumbers = [] if (startPage > 1) { - pageNumbers.push(1); + pageNumbers.push(1) if (startPage > 2) { - pageNumbers.push('...'); + pageNumbers.push('...') } } for (let i = startPage; i <= endPage; i++) { - pageNumbers.push(i); + pageNumbers.push(i) } if (endPage < totalPages) { if (endPage < totalPages - 1) { - pageNumbers.push('...'); + pageNumbers.push('...') } - pageNumbers.push(totalPages); + pageNumbers.push(totalPages) } const handlePageChange = (page: number) => { - if (page < 1 || page > totalPages) return; - onPageChange(page); - }; + if (page < 1 || page > totalPages) return + onPageChange(page) + } return (
- ); -}; + ) +} -export default Pagination; +export default Pagination diff --git a/src/components/TabsFile/index.tsx b/src/components/TabsFile/index.tsx index 8535506..8f586ec 100644 --- a/src/components/TabsFile/index.tsx +++ b/src/components/TabsFile/index.tsx @@ -272,7 +272,24 @@ export default function TabsFile({ if (status == 400) { keepLoading = false setStep('ddoLink') - setUploadIsLoading(false) + await getDDOlink(quote.quoteId).then((linkResult) => { + // add to history list + const recordAdded = { + type: items[tabIndex].type, + quoteId: quoteId, + userAddress: address, + status: status, + chainId: selectedNetwork, + tokenAddress: quote.tokenAddress, + tokenAmount: quote.tokenAmount, + transactionHash: linkResult + ? linkResult[0].transactionHash || linkResult[0].CID + : '' + } + if (historyUnlocked) { + historyList.unshift(recordAdded) + } + }) } // check if there's any failure if (status == 200 || status == 401 || status == 404) { @@ -341,6 +358,7 @@ export default function TabsFile({ '' ) setUploadIsLoading(false) + return linkResult } catch (error) { console.log(error) setErrorUpload(true)