Skip to content

Commit

Permalink
Merge pull request #932 from oraichain/refactor/remove-tabs
Browse files Browse the repository at this point in the history 
add table CW-721 transactions to TxList/Tabs
  • Loading branch information
@haunv3
haunv3 authored Sep 12, 2023
2 parents 82172d0 + 1dc5a36 commit d00a06c
Show file tree
Hide file tree
Showing 16 changed files with 325 additions and 161 deletions.
2 changes: 1 addition & 1 deletion src/components/Account/TransactionCard/TransactionCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ const TransactionCard = memo(({ account = "", royalty = false }) => {
tableSection = isLargeScreen ? <TransactionTableSkeleton /> : <TransactionCardListSkeleton />;
} else {
if (error) {
totalPagesRef.current = null;
totalPagesRef.current = null;
tableSection = <NoResult />;
} else {
if (!isNaN(data?.page?.total_page)) {
Expand Down
6 changes: 6 additions & 0 deletions src/components/TxList/Tabs/Tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ export default function({activeTab, setActiveTab, address, isTab = false}) {
<div className={cx("tab-text")}>Royalty Transactions</div>
</div>
)}
{!isTab && (
<div className={cx("tab", activeTab === 3 ? "active" : "")} onClick={() => setActiveTab(3)}>
<TransactionsIcon className={cx("tab-icon")} />
<div className={cx("tab-text")}>CW-721 Transactions</div>
</div>
)}
{dataRes?.data && dataRes?.data?.length > 0 && (
<div className={cx("tab", activeTab === 2 ? "active" : "")} onClick={() => setActiveTab(2)}>
<TransactionsIcon className={cx("tab-icon")} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/TxList/Tabs/Tabs.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
29 changes: 20 additions & 9 deletions src/components/Wallet/NFTToken/NFTCard/NFTCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,34 +42,45 @@ const NFTCard = memo(({ data = [], address }) => {
<table>
<tbody>
{reduceStringAdress("TxHash", item?.tx_hash, `${consts.PATH.TXLIST}/${item.tx_hash}`)}

<tr>
<td>
<div className={cx("item-title")}>NFT ID</div>
<div className={cx("item-title")}>Name </div>
</td>
<td>
<span className={cx("item-text")}>{item?.nft_id}</span>
<span className={cx("item-text")}>{item?.nft_name}</span>
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>NFT Name </div>
<div className={cx("item-title")}>Type</div>
</td>
<td>
<span className={cx("item-text")}>{item?.nft_name}</span>
<span className={cx("type-data-cell")}>
<span className={cx("first-message-type")}>{item.creator_type}</span>
</span>
</td>
</tr>
{reduceStringAdress("Owner", item?.owner, `${consts.PATH.TXLIST}/${item.owner}`)}
<tr>
<td>
<div className={cx("item-title")}>Creator Type</div>
<div className={cx("item-title")}>Token ID</div>
</td>
<td>
<span className={cx("item-text")}>{item?.creator_type.toUpperCase()}</span>
<span className={cx("item-text")}>{item?.nft_id}</span>
</td>
</tr>
{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}`)}

{/* {reduceStringAdress("Contract address", item?.contract_address, `${consts.PATH.TXLIST}/${item.contract_address}`)} */}
{/* {reduceStringAdress("Contract", item?.contract, `${consts.PATH.TXLIST}/${item.contract}`)} */}
<tr>
<td>
<div className={cx("item-title")}>Description</div>
</td>
<td>
<span className={cx("item-text")}>{item?.description}</span>
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Time</div>
Expand Down
42 changes: 37 additions & 5 deletions src/components/Wallet/NFTToken/NFTCard/NFTCard.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
114 changes: 86 additions & 28 deletions src/components/Wallet/NFTToken/NFTCard/NFTCardSkeleton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
<div className={cx("NFTToken-card-list-item")} key={"NFTToken-card-list-item-" + i}>
NFTCardSkeletonItems.push(
<div className={cx("nftToken-card-list-item")} key={"nftToken-card-list-item-" + i}>
<table>
<tbody>
{dataSource.map(({ title }) => {
return (
<tr>
<td>
<div className={cx("item-title")}>{title}</div>
</td>
<td>
<Skeleton />
</td>
</tr>
)})}

<tr>
<td>
<div className={cx("item-title")}>TxHash</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Name</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Type</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Owner</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Token ID</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Creator</div>
</td>
<td>
<Skeleton />
</td>
</tr>
{/* <tr>
<td>
<div className={cx("item-title")}>Contract address</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Contract</div>
</td>
<td>
<Skeleton />
</td>
</tr> */}
<tr>
<td>
<div className={cx("item-title")}>Description</div>
</td>
<td>
<Skeleton />
</td>
</tr>
<tr>
<td>
<div className={cx("item-title")}>Time</div>
</td>
<td>
<Skeleton />
</td>
</tr>
</tbody>
</table>
</div>
);
}

return <div className='NFTToken-card-list'>{CwCardSkeletonItems}</div>;
return <div className='nftToken-card-list'>{NFTCardSkeletonItems}</div>;
});

export default CwCardSkeleton;
export default NFTCardSkeleton;
Loading

0 comments on commit d00a06c

Please sign in to comment.