|
- NFT ID
+ Name
|
- {item?.nft_id} + {item?.nft_name} | |||||||||||||||||||||
|
- NFT Name
+ Type
|
- {item?.nft_name} + + {item.creator_type} + | |||||||||||||||||||||
|
- Creator Type
+ Token ID
|
- {item?.creator_type.toUpperCase()} + {item?.nft_id} | |||||||||||||||||||||
|
+ Description
+ |
+ + {item?.description} + | +|||||||||||||||||||||
|
Time
diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss b/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss
index ccd9ffa0..40126dd0 100644
--- a/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss
+++ b/src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss
@@ -28,7 +28,7 @@
.item-title {
color: var(--common-textColor);
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: 500;
font-size: 16px;
@@ -37,16 +37,48 @@
.item-text {
color: var(--common-textColor);
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
font-size: 16px;
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;
+ text-transform: uppercase;
+ 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';
+ color: var(--common-linkColor);
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
font-size: 16px;
@@ -69,7 +101,7 @@
.address {
color: var(--common-linkColor);
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
font-size: 16px;
diff --git a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js
index 7ae70a07..1d6f0181 100644
--- a/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js
+++ b/src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js
@@ -3,44 +3,102 @@ 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(
+
{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 52394c88..4e10cd8e 100644
--- a/src/components/Wallet/NFTToken/NFTTable/NFTTable.js
+++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.js
@@ -13,33 +13,39 @@ const cx = classNames.bind(styles);
export const getHeaderRow = () => {
const txHashHeaderCell = TxHash ;
- const contractAddrHeaderCell = Contract address ;
- const contractHeaderCell = Contract ;
+ // const contractAddrHeaderCell = Contract address ;
+ // const contractHeaderCell = Contract ;
const creatorHeaderCell = Creator ;
- const creatorTypeHeaderCell = Creator Type ;
- const nftNameHeaderCell = NFT Name ;
- const nftIDHeaderCell = NFT ID ;
- const timeHeaderCell = Time ;
+ 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,
+ nftIDHeaderCell,
creatorHeaderCell,
- contractAddrHeaderCell,
- contractHeaderCell,
+ // contractAddrHeaderCell,
+ // contractHeaderCell,
+ descriptionHeaderCell,
timeHeaderCell,
];
let headerCellStyles = [
- { width: "14%", minWidth: "180px" }, // 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" }, // Time
+ { width: "14%", minWidth: "120px" }, // TxHash
+ { width: "14%", minWidth: "120px" }, // Name
+ { width: "8%", minWidth: "80px" }, // Type
+ { width: "12%", minWidth: "120px" }, //Owner
+ { 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" }, // Description
+ { width: "8%", minWidth: "80px" }, // time
];
return {
@@ -59,6 +65,17 @@ const reduceStringAdress = (value, toHref = "", isStyle, rawString = false) => {
return result;
};
+const reduceStringDes = (value, isStyle, rawString = false) => {
+ const result = _.isNil(value) ? (
+ -
+ ) : (
+
+ {isStyle === 1 ?
+ );
+ return result;
+};
+
const NFTTable = memo(({ data = [], address }) => {
const getDataRows = data => {
if (!Array.isArray(data)) {
@@ -67,16 +84,17 @@ const NFTTable = memo(({ data = [], address }) => {
return data.map(item => {
const txHashDataCell = reduceStringAdress(item?.tx_hash, `${consts.PATH.TXLIST}/${item.tx_hash}`);
-
- const contractAddrDataCell = reduceStringAdress(item?.contract_address, `${consts.PATH.ACCOUNT}/${item?.contract_address}`);
- const contractDataCell = reduceStringAdress(item?.contract, `${consts.PATH.ACCOUNT}/${item?.contract}`);
+ // 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) ? (
- {rawString ? value : reduceString(value, 6, 6)} : rawString ? value : reduceString(value, 6, 6)}
+ -
+ -
) : (
-
- {item.creator_type.toUpperCase()}
+
);
- const ageDataCell = (
+ const nftIDDataCell = (
+
);
@@ -99,10 +117,21 @@ const NFTTable = memo(({ data = [], address }) => {
const timeDataCell = _.isNil(item?.timestamp) ? (
{item.creator_type}
-
) : (
- {setAgoTime(item.timestamp)}
+ {setAgoTime(item.timestamp)}
);
- return [txHashDataCell, nftIDDataCell, nftNameDataCell, creatorTypeDataCell, creatorDataCell, contractAddrDataCell, contractDataCell, timeDataCell];
+ return [
+ txHashDataCell,
+ nftNameDataCell,
+ creatorTypeDataCell,
+ ownerDataCell,
+ nftIDDataCell,
+ creatorDataCell,
+ // contractAddrDataCell,
+ // contractDataCell,
+ descriptionDataCell,
+ timeDataCell,
+ ];
});
};
diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss b/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss
index a0612e27..0f2dbe96 100644
--- a/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss
+++ b/src/components/Wallet/NFTToken/NFTTable/NFTTable.module.scss
@@ -12,8 +12,8 @@
}
.header-cell {
- color: var(--common-textColor);
- font-family: 'IBM Plex Sans';
+ color: var(--common-textColor);
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: bold;
font-size: 14px;
@@ -27,7 +27,7 @@
.sm-contract-data-cell {
color: var(--common-linkColor);
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
font-size: 14px;
@@ -45,9 +45,10 @@
margin-right: 5px;
border: 1px solid #5f51ff;
box-sizing: border-box;
+ text-transform: uppercase;
border-radius: 4px;
color: #5f51ff;
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
font-size: 12px;
@@ -56,7 +57,7 @@
.number-of-message {
color: #5f51ff;
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
font-size: 12px;
@@ -106,12 +107,42 @@
.height-data-cell {
display: block;
color: var(--common-textColor);
- font-family: 'IBM Plex Sans';
+ font-family: "IBM Plex Sans";
font-style: normal;
font-weight: normal;
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;
diff --git a/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js b/src/components/Wallet/NFTToken/NFTTable/NFTTableSkeleton.js
index 1ac0c305..0377d14b 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 contractDataCell = (
+ //
+ //
+ // );
+ const timeDataCell = (
+
+ );
+ 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 fad18515..f67ed4f9 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,80 +8,59 @@ 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 { 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 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 [pageId, setPageId] = useState(1);
+ const totalPagesRef = useRef(null);
+
+ const onPageChange = page => {
+ setPageId(page);
+ };
- const { data: dataRes } = useGet({
+ const limit = 10;
+ const path = `${consts.API_BASE}${consts.API.NFT_TXS}/${address}?limit=${limit}&page_id=${pageId} `;
+ const { data, loading, error } = useGet({
path,
});
- useEffect(() => {
- if (dataRes) {
- setDataCw({
- ...dataCw,
- data: dataRes?.data,
- page: {
- ...dataCw.page,
- ...dataRes?.page,
- },
- });
- }
- }, [dataRes]);
+ let tableSection;
+ let paginationSection;
- const totalPages = page?.total_page ?? 0;
- const currentPage = page?.page_id ?? 1;
+ if (loading) {
+ tableSection = isLargeScreen ?
- {!dataRes ? (
- tableSekeleton()
- ) : Array.isArray(data) && data.length > 0 ? (
- <>
- {isLargeScreen ?
)}
- {/* {dataRes && dataRes?.length > 0 && (
+ {dataRes && dataRes?.length > 0 && (
+ {tableSection}
+ {paginationSection}
);
});
diff --git a/src/components/Wallet/NFTToken/NFTToken.module.scss b/src/components/Wallet/NFTToken/NFTToken.module.scss
index b234ff64..339ac36d 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 ed0a8d5b..3a2b117e 100644
--- a/src/components/Wallet/Tabs/Tabs.js
+++ b/src/components/Wallet/Tabs/Tabs.js
@@ -27,11 +27,11 @@ export default function({ activeTab, setActiveTab, isBecomeValidator, address })
CW-20 Token Txs
setActiveTab(7)}>
-
- )} */}
+ )}
{isBecomeValidator && (
NFT Txs
+ CW-721 Transactions
setActiveTab(3)}>
diff --git a/src/lib/api.js b/src/lib/api.js
index 8ae98dc0..403b0f68 100644
--- a/src/lib/api.js
+++ b/src/lib/api.js
@@ -80,39 +80,39 @@ export const getListTxs = cancelToken => {
};
export const getListCwToken = (address, page) => {
- return `${consts.API_BASE}${consts.API.OW20_SMART_CONTRACTS}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`
-}
+ return `${consts.API_BASE}${consts.API.OW20_SMART_CONTRACTS}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`;
+};
export const getListNFTToken = (address, page) => {
- return `https://api.testnet.scan.orai.io/v1/nft_transaction/${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) => {
- return `${consts.API_BASE}${consts.API.OW20_SMART_CONTRACTS}${consts.API.OW20_CONTRACT}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`
-}
+ return `${consts.API_BASE}${consts.API.OW20_SMART_CONTRACTS}${consts.API.OW20_CONTRACT}/${address}?limit=${page?.limit || 1}&page_id=${page?.page_id || 1}`;
+};
-export const getGeckoMarketBalance = async (ids = '', currency = 'usd') => {
+export const getGeckoMarketBalance = async (ids = "", currency = "usd") => {
// remove undefined
- ids = ids.replace(new RegExp("\,undefined", "gm"), "");
+ ids = ids.replace(new RegExp(",undefined", "gm"), "");
return ids ? await axios(`${consts.API_COINGECKO.PRICE(ids, currency)}`) : { data: {} };
};
-export const getImagesValidator = async (address) => {
+export const getImagesValidator = async address => {
return await axios.get(`${consts.API_BASE}${consts.API.GET_IMAGES_VALIDATORS}/${address}`);
-}
+};
export const getListRequest = (aiOracle, aiRequest) => {
return axios.get(`${consts.LCD_API_BASE}${consts.LCD_API.WASM}/${aiOracle}/smart/${aiRequest}`);
};
-export const uploadImagesValidator = async (data) => {
+export const uploadImagesValidator = async data => {
return await axios({ url: `${consts.API_BASE}${consts.API.UPLOAD_IMAGES_VALIDATORS}`, ...data });
};
-export const uploadSchema = async (data) => {
+export const uploadSchema = async data => {
return await axios({ url: `${consts.API_CONTRACT_DEPLOY}${consts.PATH_CONTRACT.UPLOAD_SCHEMA}`, ...data });
};
-export const axiosCall = async (data) => {
+export const axiosCall = async data => {
return await axios({ ...data });
-};
\ No newline at end of file
+};
|