From f6ab4b117d3c4cf30e93c64eca475f024b681b37 Mon Sep 17 00:00:00 2001 From: TranKhanhDuy Date: Mon, 11 Sep 2023 18:37:13 +0700 Subject: [PATCH 1/4] add table CW-721 transactions to TxList/Tabs --- .../TransactionCard/TransactionCard.js | 2 +- src/components/TxList/Tabs/Tabs.js | 6 + src/components/TxList/Tabs/Tabs.module.scss | 2 +- .../Wallet/NFTToken/NFTCard/NFTCard.js | 17 ++- .../NFTToken/NFTCard/NFTCard.module.scss | 31 +++++ .../NFTToken/NFTCard/NFTCardSkeleton.js | 118 +++++++++++++----- .../Wallet/NFTToken/NFTTable/NFTTable.js | 44 +++++-- .../NFTToken/NFTTable/NFTTable.module.scss | 31 +++++ .../NFTToken/NFTTable/NFTTableSkeleton.js | 29 +++-- src/components/Wallet/NFTToken/NFTToken.js | 7 +- .../Wallet/NFTToken/NFTToken.module.scss | 2 +- src/components/Wallet/Tabs/Tabs.js | 2 +- src/components/Wallet/Tabs/Tabs.module.scss | 2 +- src/containers/Account/Account.js | 2 + 14 files changed, 236 insertions(+), 59 deletions(-) diff --git a/src/components/Account/TransactionCard/TransactionCard.js b/src/components/Account/TransactionCard/TransactionCard.js index 5fcd2b6b5..43fc7290b 100644 --- a/src/components/Account/TransactionCard/TransactionCard.js +++ b/src/components/Account/TransactionCard/TransactionCard.js @@ -50,7 +50,7 @@ const TransactionCard = memo(({ account = "", royalty = false }) => { tableSection = isLargeScreen ? : ; } else { if (error) { - totalPagesRef.current = null; + totalPagesRef.current = null; tableSection = ; } else { if (!isNaN(data?.page?.total_page)) { diff --git a/src/components/TxList/Tabs/Tabs.js b/src/components/TxList/Tabs/Tabs.js index e5e43e3cd..40e7178ae 100644 --- a/src/components/TxList/Tabs/Tabs.js +++ b/src/components/TxList/Tabs/Tabs.js @@ -25,6 +25,12 @@ export default function({activeTab, setActiveTab, address, isTab = false}) {
Royalty Transactions
)} + {!isTab && ( +
setActiveTab(3)}> + +
CW-721 transactions
+
+ )} {dataRes?.data && dataRes?.data?.length > 0 && (
setActiveTab(2)}> diff --git a/src/components/TxList/Tabs/Tabs.module.scss b/src/components/TxList/Tabs/Tabs.module.scss index 46e073e2f..a1ef14c24 100644 --- a/src/components/TxList/Tabs/Tabs.module.scss +++ b/src/components/TxList/Tabs/Tabs.module.scss @@ -14,7 +14,7 @@ -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ - @media (min-width: 600px) { + @media (min-width: 600px) { display: inline-flex; border-radius: 8px; border: 1px solid var(--common-borderColor); diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCard.js b/src/components/Wallet/NFTToken/NFTCard/NFTCard.js index fa5de7153..f15a4ff30 100644 --- a/src/components/Wallet/NFTToken/NFTCard/NFTCard.js +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCard.js @@ -44,7 +44,7 @@ const NFTCard = memo(({ data = [], address }) => { {reduceStringAdress("TxHash", item?.tx_hash, `${consts.PATH.TXLIST}/${item.tx_hash}`)} -
NFT ID
+
Token ID
{item?.nft_id} @@ -60,12 +60,15 @@ const NFTCard = memo(({ data = [], address }) => { -
Creator Type
+
Type
- {item?.creator_type.toUpperCase()} + + {(item.creator_type)} + + {reduceStringAdress("Owner", item?.owner, `${consts.PATH.TXLIST}/${item.owner}`)} {reduceStringAdress("Creator", item?.creator, `${consts.PATH.TXLIST}/${item.creator}`)} {reduceStringAdress("Contract address", item?.contract_address, `${consts.PATH.TXLIST}/${item.contract_address}`)} {reduceStringAdress("Contract", item?.contract, `${consts.PATH.TXLIST}/${item.contract}`)} @@ -78,6 +81,14 @@ const NFTCard = memo(({ data = [], address }) => { {setAgoTime(item?.timestamp)} + + +
Description
+ + + {item?.description} + +
diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss b/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss index ccd9ffa05..c2d333f1a 100644 --- a/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss @@ -44,6 +44,37 @@ line-height: 150%; } + .type-data-cell { + display: flex; + flex-direction: row; + justify-content: end; + align-items: right; + + .first-message-type { + padding: 6px 10px; + margin-right: 5px; + border: 1px solid var(--common-transactions-transactionTypeLabelColor); + background-color: var(--common-transactions-transactionTypeBackgroundColor); + color: var(--common-transactions-transactionTypeTextColor); + box-sizing: border-box; + border-radius: 4px; + font-family: "IBM Plex Sans"; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 150%; + } + + .number-of-message { + color: var(--common-textColor); + font-family: "IBM Plex Sans"; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 150%; + } + } + .item-link { color: var(--common-linkColor); font-family: 'IBM Plex Sans'; diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js index 7ae70a079..532463bf7 100644 --- a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js @@ -3,44 +3,106 @@ import Skeleton from "@material-ui/lab/Skeleton"; import classNames from "classnames/bind"; import styles from "./NFTCard.module.scss"; -const CwCardSkeleton = memo(({ rows = 10 }) => { +const NFTCardSkeleton = memo(({ rows = 20 }) => { const cx = classNames.bind(styles); - let CwCardSkeletonItems = []; - const dataSource = [ - { title: "TxHash" }, - { title: "NFT ID" }, - { title: "NFT Name" }, - { title: "Creator Type" }, - { title: "Creator" }, - { title: "Contract address" }, - { title: "Contract" }, - { title: "Time" }, - ]; + let NFTCardSkeletonItems = []; for (let i = 1; i <= rows; i++) { - CwCardSkeletonItems.push( -
+ NFTCardSkeletonItems.push( +
- {dataSource.map(({ title }) => { - return ( - - - - - )})} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-
{title}
- 		- -
+
TxHash
+ 		+ +
+
Token ID
+ 		+ +
+
NFT Name
+ 		+ +
+
Type
+ 		+ +
+
Owner
+ 		+ +
+
Creator
+ 		+ +
+
Contract address
+ 		+ +
+
Contract
+ 		+ +
+
Time
+ 		+ +
+
Description
+ 		+ +
); } - return
{CwCardSkeletonItems}
; + return
{NFTCardSkeletonItems}
; }); -export default CwCardSkeleton; +export default NFTCardSkeleton; diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js index 52394c880..ca3c181c6 100644 --- a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js @@ -16,30 +16,38 @@ export const getHeaderRow = () => { const contractAddrHeaderCell =
Contract address
; const contractHeaderCell =
Contract
; const creatorHeaderCell =
Creator
; - const creatorTypeHeaderCell =
Creator Type
; - const nftNameHeaderCell =
NFT Name
; - const nftIDHeaderCell =
NFT ID
; + const creatorTypeHeaderCell =
Type
; + const nftNameHeaderCell =
Name
; + const nftIDHeaderCell =
Token ID
; const timeHeaderCell =
Time
; + const ownerHeaderCell =
Owner
; + const descriptionHeaderCell =
Description
; + let headerCells = [ txHashHeaderCell, nftIDHeaderCell, nftNameHeaderCell, creatorTypeHeaderCell, + ownerHeaderCell, creatorHeaderCell, contractAddrHeaderCell, contractHeaderCell, timeHeaderCell, + descriptionHeaderCell, ]; let headerCellStyles = [ - { width: "14%", minWidth: "180px" }, // TxHash + { width: "12%", minWidth: "120px" }, // TxHash { width: "8%", minWidth: "80px" }, // NFT ID { width: "14%", minWidth: "120px" }, // NFT Name { width: "12%", minWidth: "120px" }, // Creator type - { width: "14%", minWidth: "180px" }, // Creator - { width: "14%", minWidth: "180px" }, // Contract address - { width: "14%", minWidth: "180px" }, // Contract + { width: "12%", minWidth: "120px" }, //Owner + { width: "12%", minWidth: "120px" }, // Creator + { width: "12%", minWidth: "120px" }, // Contract address + { width: "12%", minWidth: "120px" }, // Contract { width: "12%", minWidth: "120px" }, // Time + { width: "12%", minWidth: "120px" }, // Description + ]; return { @@ -59,6 +67,17 @@ const reduceStringAdress = (value, toHref = "", isStyle, rawString = false) => { return result; }; +const reduceStringDes = (value, isStyle, rawString = false) => { + const result = _.isNil(value) ? ( +
-
+ ) : ( +
+ {isStyle === 1 ?
{rawString ? value : reduceString(value, 6, 6)}
: rawString ? value : reduceString(value, 6, 6)} +
+ ); + return result; +}; + const NFTTable = memo(({ data = [], address }) => { const getDataRows = data => { if (!Array.isArray(data)) { @@ -71,12 +90,15 @@ const NFTTable = memo(({ data = [], address }) => { const contractAddrDataCell = reduceStringAdress(item?.contract_address, `${consts.PATH.ACCOUNT}/${item?.contract_address}`); const contractDataCell = reduceStringAdress(item?.contract, `${consts.PATH.ACCOUNT}/${item?.contract}`); const creatorDataCell = reduceStringAdress(item?.creator, `${consts.PATH.ACCOUNT}/${item?.creator}`); + const ownerDataCell = reduceStringAdress(item?.owner, `${consts.PATH.ACCOUNT}/${item?.owner}`); + const descriptionDataCell = reduceStringDes(item?.description, `${consts.PATH.ACCOUNT}/${item?.description}`); + const creatorTypeDataCell = _.isNil(item?.creator_type) ? ( -
-
+
-
) : ( -
- {item.creator_type.toUpperCase()} +
+
{(item.creator_type)}
); @@ -102,7 +124,7 @@ const NFTTable = memo(({ data = [], address }) => {
{setAgoTime(item.timestamp)}
); - return [txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, creatorDataCell, contractAddrDataCell, contractDataCell, timeDataCell]; + return [txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, ownerDataCell, creatorDataCell, contractAddrDataCell, contractDataCell, timeDataCell, descriptionDataCell]; }); }; diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss b/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss index a0612e27b..fd2edcafc 100644 --- a/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss @@ -112,6 +112,36 @@ font-size: 14px; line-height: 150%; } +.type-data-cell { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .first-message-type { + padding: 6px 10px; + margin-right: 5px; + border: 1px solid var(--common-transactions-transactionTypeLabelColor); + background-color: var(--common-transactions-transactionTypeBackgroundColor); + color: var(--common-transactions-transactionTypeTextColor); + box-sizing: border-box; + border-radius: 4px; + font-family: "IBM Plex Sans"; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 150%; + } + + .number-of-message { + color: var(--common-textColor); + font-family: "IBM Plex Sans"; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 150%; + } +} .transfer-status { display: block; @@ -136,4 +166,5 @@ color: var(--common-transactions-amountTransactionTextOutColor); border: 1px solid var(--common-transactions-amountTransactionLabelOutColor); } + } diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js index 1ac0c3054..76a887e5b 100644 --- a/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js @@ -17,41 +17,56 @@ const NFTTableSkeleton = memo(({rows = 10}) => {
); - const ageDataCell = ( + const nftIDDataCell = (
); - const fromDataCell = ( + const nftNameDataCell = (
); - const statusDataCell = ( + const creatorTypeDataCell = (
); - const toDataCell = ( + const creatorDataCell = (
); - const valueDataCell = ( + const contractAddrDataCell = (
); - const tokenDataCell = ( + const contractDataCell = (
); - dataRows.push([txHashDataCell, ageDataCell, fromDataCell, statusDataCell, toDataCell, valueDataCell, tokenDataCell]); + const timeDataCell = ( +
+ +
+ ); + const ownerDataCell = ( +
+ +
+ ); + const descriptionDataCell = ( +
+ +
+ ); + dataRows.push([txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, ownerDataCell, creatorDataCell, contractAddrDataCell, contractDataCell, timeDataCell, descriptionDataCell]); } return dataRows; }; diff --git a/src/components/Wallet/NFTToken/NFTToken.js b/src/components/Wallet/NFTToken/NFTToken.js index fad18515f..7a126c1f5 100644 --- a/src/components/Wallet/NFTToken/NFTToken.js +++ b/src/components/Wallet/NFTToken/NFTToken.js @@ -11,15 +11,13 @@ import NFTCardSkeleton from "./NFTCard/NFTCardSkeleton"; import { getListNFTToken, getListOWContract } from "src/lib/api"; import NFTCard from "./NFTCard"; import styles from "./NFTToken.module.scss"; -import { NavLink } from "react-router-dom"; -import consts from "src/constants/consts"; -import { typeExport } from "src/containers/Account/Account"; const cx = classNames.bind(styles); const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { const theme = useTheme(); const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg")); + const [dataCw, setDataCw] = useState({ data: [], page: { @@ -69,9 +67,8 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { const tableSekeleton = () => { return isLargeScreen ? : ; }; - return ( -
+
{!dataRes ? ( tableSekeleton() ) : Array.isArray(data) && data.length > 0 ? ( diff --git a/src/components/Wallet/NFTToken/NFTToken.module.scss b/src/components/Wallet/NFTToken/NFTToken.module.scss index b234ff64e..339ac36d0 100644 --- a/src/components/Wallet/NFTToken/NFTToken.module.scss +++ b/src/components/Wallet/NFTToken/NFTToken.module.scss @@ -1,4 +1,4 @@ -.cw20 { +.nft { overflow-x: auto; width: 100%; diff --git a/src/components/Wallet/Tabs/Tabs.js b/src/components/Wallet/Tabs/Tabs.js index 0a94b06d4..3a2b117ec 100644 --- a/src/components/Wallet/Tabs/Tabs.js +++ b/src/components/Wallet/Tabs/Tabs.js @@ -29,7 +29,7 @@ export default function({ activeTab, setActiveTab, isBecomeValidator, address }) )} {dataRes && dataRes?.length > 0 && (
setActiveTab(7)}> -
NFT Txs
+
CW-721 Transactions
)} {isBecomeValidator && ( diff --git a/src/components/Wallet/Tabs/Tabs.module.scss b/src/components/Wallet/Tabs/Tabs.module.scss index 46e073e2f..6c4649a1a 100644 --- a/src/components/Wallet/Tabs/Tabs.module.scss +++ b/src/components/Wallet/Tabs/Tabs.module.scss @@ -15,7 +15,7 @@ scrollbar-width: none; /* Firefox */ @media (min-width: 600px) { - display: inline-flex; + display: inline-flex; border-radius: 8px; border: 1px solid var(--common-borderColor); } diff --git a/src/containers/Account/Account.js b/src/containers/Account/Account.js index 67b7e59a3..6fc95a1fe 100644 --- a/src/containers/Account/Account.js +++ b/src/containers/Account/Account.js @@ -35,6 +35,7 @@ import * as api from "src/lib/api"; import CwToken from "src/components/Wallet/CwToken"; import { formatOrai } from "src/helpers/helper"; import styles from "./Account.module.scss"; +import NFTToken from "../../components/Wallet/NFTToken"; export const typeExport = { cw20: "cw20", @@ -295,6 +296,7 @@ const Account = props => { {activeTab === 0 && } {activeTab === 1 && } {activeTab === 2 && } + {activeTab === 3 && }
From bc81418872da4f5554e64b453731d3bf44ca8c5d Mon Sep 17 00:00:00 2001 From: TranKhanhDuy Date: Mon, 11 Sep 2023 22:33:41 +0700 Subject: [PATCH 2/4] improve CW-721 Transactions table --- src/components/TxList/Tabs/Tabs.js | 2 +- src/components/Wallet/NFTToken/NFTToken.js | 63 ++++++++++++++++++---- 2 files changed, 55 insertions(+), 10 deletions(-) diff --git a/src/components/TxList/Tabs/Tabs.js b/src/components/TxList/Tabs/Tabs.js index 40e7178ae..aea0439bc 100644 --- a/src/components/TxList/Tabs/Tabs.js +++ b/src/components/TxList/Tabs/Tabs.js @@ -28,7 +28,7 @@ export default function({activeTab, setActiveTab, address, isTab = false}) { {!isTab && (
setActiveTab(3)}> -
CW-721 transactions
+
CW-721 Transactions
)} {dataRes?.data && dataRes?.data?.length > 0 && ( diff --git a/src/components/Wallet/NFTToken/NFTToken.js b/src/components/Wallet/NFTToken/NFTToken.js index 7a126c1f5..8f75b8e66 100644 --- a/src/components/Wallet/NFTToken/NFTToken.js +++ b/src/components/Wallet/NFTToken/NFTToken.js @@ -33,7 +33,7 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { return getListOWContract(address, page); }); - const { data: dataRes } = useGet({ + const { data: dataRes, loading, error } = useGet({ path, }); @@ -50,8 +50,10 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { } }, [dataRes]); - const totalPages = page?.total_page ?? 0; - const currentPage = page?.page_id ?? 1; + // const totalPages = page?.total_page ?? 0; + // const currentPage = page?.page_id ?? 1; + let totalPages; + let currentPage; const onPageChange = newPage => { const pageObj = { @@ -64,21 +66,64 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { return setPath(getListOWContract(address, pageObj)); }; - const tableSekeleton = () => { - return isLargeScreen ? : ; - }; + // const tableSekeleton = () => { + // return isLargeScreen ? : ; + // }; + + let tableSection; + let paginationSection; + + if (loading) { + tableSection = isLargeScreen ? : ; + } else { + if (error) { + currentPage = null; + tableSection = ; + } else { + if (!isNaN(data?.page_id)) { + currentPage = data.page_id; + } else { + currentPage = null; + } + + if (Array.isArray(data) && data?.length > 0) { + tableSection = isLargeScreen ? ( + <> + + {totalPages > 0 && onPageChange(page)} />} + + + ) : ( + <> + + {totalPages > 0 && onPageChange(page)} />} + + + ); + } else { + tableSection = ; + } + } + } + if (totalPages > 0){ + paginationSection = onPageChange(page)} />; + } + + return (
- {!dataRes ? ( + {/* {!dataRes ? ( tableSekeleton() - ) : Array.isArray(data) && data.length > 0 ? ( + ) : Array.isArray(data) && data?.length > 0 ? ( <> {isLargeScreen ? : } {totalPages > 0 && onPageChange(page)} />} ) : ( - )} + )} */} + {tableSection} + {paginationSection}
); }); From 24e2d509b6f6b0027c7b5099576ead180e592e62 Mon Sep 17 00:00:00 2001 From: TranKhanhDuy Date: Tue, 12 Sep 2023 10:55:32 +0700 Subject: [PATCH 3/4] update nft txs table --- .../Wallet/NFTToken/NFTCard/NFTCard.js | 2 +- .../NFTToken/NFTCard/NFTCardSkeleton.js | 2 +- .../Wallet/NFTToken/NFTTable/NFTTable.js | 15 +++++++------ .../NFTToken/NFTTable/NFTTableSkeleton.js | 22 +++++++++---------- src/components/Wallet/NFTToken/NFTToken.js | 19 ++-------------- 5 files changed, 23 insertions(+), 37 deletions(-) diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCard.js b/src/components/Wallet/NFTToken/NFTCard/NFTCard.js index c15865a24..99b29b324 100644 --- a/src/components/Wallet/NFTToken/NFTCard/NFTCard.js +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCard.js @@ -45,7 +45,7 @@ const NFTCard = memo(({ data = [], address }) => { -
NFT Name
+
Name
{item?.nft_name} diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js index 3dc64b06e..1d6f01818 100644 --- a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js +++ b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js @@ -22,7 +22,7 @@ const NFTCardSkeleton = memo(({ rows = 20 }) => { -
NFT Name
+
Name
diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js index 0bab15bc6..24684face 100644 --- a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js @@ -36,16 +36,17 @@ export const getHeaderRow = () => { timeHeaderCell, ]; let headerCellStyles = [ - { width: "14%", minWidth: "140px" }, // TxHash - { width: "8%", minWidth: "80px" }, // NFT ID - { width: "14%", minWidth: "120px" }, // NFT Name - { width: "12%", minWidth: "120px" }, // Creator type + { width: "12%", minWidth: "120px" }, // TxHash + { width: "14%", minWidth: "120px" }, // Name + { width: "8%", minWidth: "80px" }, // Type { width: "12%", minWidth: "120px" }, //Owner - // { width: "12%", minWidth: "120px" }, // Creator + { width: "8%", minWidth: "80px" }, // Token ID + { width: "12%", minWidth: "120px" }, // Creator // { width: "12%", minWidth: "120px" }, // Contract address - { width: "12%", minWidth: "120px" }, // Contract - { width: "12%", minWidth: "120px" }, // Time + // { width: "12%", minWidth: "120px" }, // Contract { width: "12%", minWidth: "120px" }, // Description + { width: "8%", minWidth: "80px" }, // time + ]; return { diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js index 76a887e5b..0377d14b2 100644 --- a/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js @@ -41,16 +41,16 @@ const NFTTableSkeleton = memo(({rows = 10}) => {
); - const contractAddrDataCell = ( -
- -
- ); - const contractDataCell = ( -
- -
- ); + // const contractAddrDataCell = ( + //
+ // + //
+ // ); + // const contractDataCell = ( + //
+ // + //
+ // ); const timeDataCell = (
@@ -66,7 +66,7 @@ const NFTTableSkeleton = memo(({rows = 10}) => {
); - dataRows.push([txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, ownerDataCell, creatorDataCell, contractAddrDataCell, contractDataCell, timeDataCell, descriptionDataCell]); + dataRows.push([txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, ownerDataCell, creatorDataCell, timeDataCell, descriptionDataCell]); } return dataRows; }; diff --git a/src/components/Wallet/NFTToken/NFTToken.js b/src/components/Wallet/NFTToken/NFTToken.js index 8f75b8e66..91502d952 100644 --- a/src/components/Wallet/NFTToken/NFTToken.js +++ b/src/components/Wallet/NFTToken/NFTToken.js @@ -50,10 +50,8 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { } }, [dataRes]); - // const totalPages = page?.total_page ?? 0; - // const currentPage = page?.page_id ?? 1; - let totalPages; - let currentPage; + let totalPages = page?.total_page ?? 0; + let currentPage = page?.page_id ?? 1; const onPageChange = newPage => { const pageObj = { @@ -90,14 +88,11 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { tableSection = isLargeScreen ? ( <> - {totalPages > 0 && onPageChange(page)} />} ) : ( <> - {totalPages > 0 && onPageChange(page)} />} - ); } else { @@ -112,16 +107,6 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { return (
- {/* {!dataRes ? ( - tableSekeleton() - ) : Array.isArray(data) && data?.length > 0 ? ( - <> - {isLargeScreen ? : } - {totalPages > 0 && onPageChange(page)} />} - - ) : ( - - )} */} {tableSection} {paginationSection}
From 1dc5a3618cf74c96e7b5ace20a8a610394b92f78 Mon Sep 17 00:00:00 2001 From: Hau Nguyen Van Date: Tue, 12 Sep 2023 11:38:55 +0700 Subject: [PATCH 4/4] fix pagination nft transaction --- .../Wallet/NFTToken/NFTTable/NFTTable.js | 3 +- src/components/Wallet/NFTToken/NFTToken.js | 88 +++++-------------- src/lib/api.js | 2 +- 3 files changed, 22 insertions(+), 71 deletions(-) diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js index 24684face..4e10cd8ec 100644 --- a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js +++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js @@ -36,7 +36,7 @@ export const getHeaderRow = () => { timeHeaderCell, ]; let headerCellStyles = [ - { width: "12%", minWidth: "120px" }, // TxHash + { width: "14%", minWidth: "120px" }, // TxHash { width: "14%", minWidth: "120px" }, // Name { width: "8%", minWidth: "80px" }, // Type { width: "12%", minWidth: "120px" }, //Owner @@ -46,7 +46,6 @@ export const getHeaderRow = () => { // { width: "12%", minWidth: "120px" }, // Contract { width: "12%", minWidth: "120px" }, // Description { width: "8%", minWidth: "80px" }, // time - ]; return { diff --git a/src/components/Wallet/NFTToken/NFTToken.js b/src/components/Wallet/NFTToken/NFTToken.js index 91502d952..f67ed4f93 100644 --- a/src/components/Wallet/NFTToken/NFTToken.js +++ b/src/components/Wallet/NFTToken/NFTToken.js @@ -1,4 +1,4 @@ -import React, { memo, useEffect, useState } from "react"; +import React, { memo, useState, useRef } from "react"; import { useGet } from "restful-react"; import { useTheme } from "@material-ui/core/styles"; import useMediaQuery from "@material-ui/core/useMediaQuery"; @@ -8,65 +8,28 @@ import NoResult from "src/components/common/NoResult"; import NFTTable from "./NFTTable"; import NFTTableSkeleton from "./NFTTable/NFTTableSkeleton"; import NFTCardSkeleton from "./NFTCard/NFTCardSkeleton"; -import { getListNFTToken, getListOWContract } from "src/lib/api"; +import { getListNFTToken } from "src/lib/api"; import NFTCard from "./NFTCard"; import styles from "./NFTToken.module.scss"; +import consts from "src/constants/consts"; const cx = classNames.bind(styles); -const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { +const NFTToken = memo(({ address = "" }) => { const theme = useTheme(); const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg")); - - const [dataCw, setDataCw] = useState({ - data: [], - page: { - limit: 10, - page_id: 1, - }, - }); - const { data, page } = dataCw; - const [path, setPath] = useState(() => { - if (!isOw20) { - return getListNFTToken(address, page); - } - return getListOWContract(address, page); - }); - - const { data: dataRes, loading, error } = useGet({ - path, - }); + const [pageId, setPageId] = useState(1); + const totalPagesRef = useRef(null); - useEffect(() => { - if (dataRes) { - setDataCw({ - ...dataCw, - data: dataRes?.data, - page: { - ...dataCw.page, - ...dataRes?.page, - }, - }); - } - }, [dataRes]); - - let totalPages = page?.total_page ?? 0; - let currentPage = page?.page_id ?? 1; - - const onPageChange = newPage => { - const pageObj = { - ...page, - page_id: newPage, - }; - if (!isOw20) { - return setPath(getListNFTToken(address, pageObj)); - } - return setPath(getListOWContract(address, pageObj)); + const onPageChange = page => { + setPageId(page); }; - // const tableSekeleton = () => { - // return isLargeScreen ? : ; - // }; + const limit = 10; + const path = `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${limit}&page_id=${pageId} `; + const { data, loading, error } = useGet({ + path, + }); let tableSection; let paginationSection; @@ -75,35 +38,24 @@ const NFTToken = memo(({ account = "", address = "", isOw20 = false }) => { tableSection = isLargeScreen ? : ; } else { if (error) { - currentPage = null; + totalPagesRef.current = null; tableSection = ; } else { - if (!isNaN(data?.page_id)) { - currentPage = data.page_id; + if (!isNaN(data?.page?.total_page)) { + totalPagesRef.current = data.page.total_page; } else { - currentPage = null; + totalPagesRef.current = null; } - if (Array.isArray(data) && data?.length > 0) { - tableSection = isLargeScreen ? ( - <> - - - - ) : ( - <> - - - ); + if (Array.isArray(data?.data) && data.data.length > 0) { + tableSection = isLargeScreen ? : ; } else { tableSection = ; } } } - if (totalPages > 0){ - paginationSection = onPageChange(page)} />; - } + paginationSection = totalPagesRef.current ? onPageChange(page)} /> : <>; return (
diff --git a/src/lib/api.js b/src/lib/api.js index e7a351e35..403b0f685 100644 --- a/src/lib/api.js +++ b/src/lib/api.js @@ -84,7 +84,7 @@ export const getListCwToken = (address, page) => { }; export const getListNFTToken = (address, page) => { - return `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`; + return `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${page?.limit || 10}&page_id=${page?.page_id || 1}`; }; export const getListOWContract = (address, page) => {