Skip to content

Commit

Permalink
Merge pull request #1221 from Itheum/d-robert
Browse files Browse the repository at this point in the history 
D robert 1.12.0
  • Loading branch information
@damienen
damienen committed Feb 26, 2024
2 parents ea749f9 + 5665582 commit 7222eb6
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 31 deletions.
4 changes: 2 additions & 2 deletions src/components/CustomPagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const CustomPagination: FC<PropsType> = ({ pageCount, pageIndex, gotoPage
};

return (
<Flex justifyContent="center" alignItems="center" gap={3}>
<Flex justifyContent="center" alignItems="center" gap={3} py={2}>
<Flex>
<Tooltip label="First Page">
<IconButton
Expand Down Expand Up @@ -62,7 +62,7 @@ export const CustomPagination: FC<PropsType> = ({ pageCount, pageIndex, gotoPage
</Tooltip>
</Flex>

<Flex alignItems="center" mx={2} fontSize="sm" w={{ base: "5rem", lg: "auto" }}>
<Flex alignItems="center" justify={"center"} mx={2} fontSize="sm" w={{ base: "5rem", lg: "auto" }}>
<Box flexShrink="0">
Page{" "}
<Box fontWeight="bold" as="span">
Expand Down
49 changes: 30 additions & 19 deletions src/pages/DataNFT/DataNFTMarketplaceMultiversX.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ import { DataNftCollectionType, DataNftMetadataType } from "libs/MultiversX/type
import { convertWeiToEsdt, createNftId, hexZero, sleep, tokenDecimals } from "libs/utils";
import DataNFTDetails from "pages/DataNFT/DataNFTDetails";
import { useMarketStore } from "store";
import { DataNftCollection } from "./DataNftCollection";
import { DataNftCollectionCard } from "./DataNftCollection";
import { Offer } from "@itheum/sdk-mx-data-nft/out";

interface PropsType {
Expand Down Expand Up @@ -309,8 +309,12 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {

<Box position="relative">
<Tabs pt={10} index={tabState - 1}>
<TabList justifyContent={{ base: "start", lg: "space-between" }} overflowX={{ base: "scroll", md: "scroll", lg: "unset" }} overflowY="hidden">
<Flex>
<TabList
alignItems={{ base: "center", md: "start" }}
justifyContent={{ base: "center", lg: "space-between" }}
overflowX={{ base: "scroll", md: "scroll", lg: "unset" }}
flexDirection={{ base: "column", md: "row" }}>
<Flex flexDirection={{ base: "column", md: "row" }}>
<Tab
_selected={{ borderBottom: "5px solid", borderBottomColor: "teal.200" }}
flexDirection="row"
Expand All @@ -321,7 +325,7 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
if (hasPendingTransactions) return;
navigate("/datanfts/marketplace/market");
}}>
<Flex ml={{ base: "0.5rem", md: "4.7rem" }} alignItems="center" py={3}>
<Flex ml={{ base: "0", md: "4.7rem" }} alignItems="center" py={3}>
<Icon as={FaStore} mx={2} size="0.95rem" textColor={colorMode === "dark" ? "white" : "black"} />
<ConditionalRender
fallback={
Expand Down Expand Up @@ -352,7 +356,7 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
navigate("/datanfts/marketplace/my");
}}>
{isMxLoggedIn && (
<Flex ml={{ base: "0.5rem", md: "4.7rem" }} alignItems="center" py={3}>
<Flex ml={{ base: "0", md: "4.7rem" }} alignItems="center" py={3}>
<Icon as={FaBrush} size="0.95rem" mx={2} textColor={colorMode === "dark" ? "white" : "black"} />
<ConditionalRender
fallback={
Expand All @@ -375,19 +379,26 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
</Tab>
</Flex>

<Flex pr={{ lg: "10" }} gap={{ base: "5", lg: "20" }} ml={{ base: "1.7rem", xl: 0 }}>
{!window.location.href.includes("my") && (
<Checkbox isChecked={!showGroupedDataNfts} onChange={() => setShowGroupedDataNfts(!showGroupedDataNfts)} colorScheme={"teal"}>
<Tooltip colorScheme="teal" hasArrow label="Toggle this button to view all data NFTs ">
<HStack spacing="10px" width={"100%"}>
<Text align="center"> Show all offers </Text>
<Stack>
<MdOutlineInfo color={"teal"} />
</Stack>
</HStack>
</Tooltip>
</Checkbox>
)}
<Flex
pr={{ lg: "10" }}
gap={{ base: "5", lg: "20" }}
flexDirection={{ base: "column", md: "row" }}
alignItems={"center"}
justifyContent={"center"}>
<Flex height={{ base: "20px", md: "100%" }}>
{!window.location.href.includes("my") && (
<Checkbox isChecked={!showGroupedDataNfts} onChange={() => setShowGroupedDataNfts(!showGroupedDataNfts)} colorScheme={"teal"}>
<Tooltip colorScheme="teal" hasArrow label="Toggle this button to view all data NFTs ">
<HStack spacing="10px" width={"100%"}>
<Text align="center"> Show all offers </Text>
<Stack>
<MdOutlineInfo color={"teal"} />
</Stack>
</HStack>
</Tooltip>
</Checkbox>
)}
</Flex>
{
<CustomPagination
pageCount={showGroupedDataNfts && tabState === 1 ? 1 : pageCount}
Expand Down Expand Up @@ -428,7 +439,7 @@ export const Marketplace: FC<PropsType> = ({ tabState }) => {
))
: Array.from(groupedOffers.entries()).map(([nonce, offer], index) => {
return (
<DataNftCollection
<DataNftCollectionCard
key={index}
index={index}
nftImageLoading={oneNFTImgLoaded && !loadingOffers}
Expand Down
8 changes: 4 additions & 4 deletions src/pages/DataNFT/DataNftCollection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { DEFAULT_NFT_IMAGE } from "libs/mxConstants";
import { convertToLocalString, shouldPreviewDataBeEnabled, viewDataDisabledMessage } from "libs/utils";
import { useMarketStore } from "store";

type DataNftCollectionComponentProps = {
type DataNftCollectionCardComponentProps = {
index: number;
nftImageLoading: boolean;
imageUrl: string;
Expand All @@ -21,7 +21,7 @@ type DataNftCollectionComponentProps = {
dataPreview?: string;
};

export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
export const DataNftCollectionCard: FC<DataNftCollectionCardComponentProps> = ({
index,
nftImageLoading,
imageUrl,
Expand All @@ -38,6 +38,7 @@ export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
const { chainID } = useGetNetworkConfig();
const { loginMethod } = useGetLoginInfo();
const { colorMode } = useColorMode();

return (
<Skeleton
transform={{ base: "scale(0.5) ", sm: "scale(0.6)", md: "scale(0.75)", xl: "scale(1)" }}
Expand All @@ -62,7 +63,7 @@ export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
padding={"32px"}>
<VStack height={"100%"} justifyContent="flex-start" alignItems="flex-start" width={"60%"} gap={"8px"}>
<Tooltip label={title}>
<Text fontFamily="Satoshi-Medium" lineHeight="1" fontWeight="medium" fontSize="22px" noOfLines={1}>
<Text fontFamily="Satoshi-Medium" lineHeight="1" fontWeight="medium" fontSize="22px" noOfLines={1} p={1}>
{title}
</Text>
</Tooltip>
Expand All @@ -79,7 +80,6 @@ export const DataNftCollection: FC<DataNftCollectionComponentProps> = ({
/>
</Text>
</Stack>

<HStack>
<Text opacity=".7" fontFamily="Satoshi-Regular" maxWidth="100%">
Total supply: {supply}
Expand Down
12 changes: 10 additions & 2 deletions src/pages/DataNFT/MyDataNFTsMultiversX.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,8 +182,16 @@ export default function MyDataNFTsMx({ tabState }: { tabState: number }) {
isDisabled={tab.isDisabled}
p={{ base: "0", md: "initial" }}
_selected={{ borderBottom: "5px solid", borderBottomColor: "teal.200" }}
onClick={() => onChangeTab(index + 1)}>
<Flex ml={{ base: "0.5rem", md: "4.7rem" }} alignItems="center" py={3} overflow="hidden">
onClick={() => onChangeTab(index + 1)}
mx={"auto"}>
<Flex
height={"100%"}
flexDirection={{ base: "column", md: "row" }}
ml={{ base: "0", md: "4.7rem" }}
alignItems={{ base: "center", md: "center" }}
justify={{ md: "center" }}
py={3}
overflow="hidden">
<Icon as={tab.icon} mx={2} size="0.95rem" textColor={colorMode === "dark" ? "white" : "black"} />
<Text fontSize="lg" fontWeight="medium" color={colorMode === "dark" ? "white" : "black"} w="max-content">
{tab.tabName}
Expand Down
9 changes: 5 additions & 4 deletions src/pages/DataNFT/components/FavoriteCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const FavoriteCards: React.FC = () => {
const [favouriteItems, setFavouriteItems] = React.useState<Array<string>>([]);
const [dataNfts, setDataNfts] = React.useState<Array<DataNft>>([]);

const skeletonHeight = { base: "260px", md: "190px", "2xl": "220px" };
const skeletonHeight = { base: "160px", md: "190px", "2xl": "220px" };

useEffect(() => {
(async () => {
Expand Down Expand Up @@ -62,7 +62,7 @@ export const FavoriteCards: React.FC = () => {
// console.log(dataNfts);
return (
<Box>
<Flex flexDirection={{ base: "column", md: "row" }} flexWrap={"wrap"} gap={7} ml={16}>
<Flex flexDirection={{ base: "column", md: "row" }} flexWrap={"wrap"} gap={7} ml={{ base: 0, md: 16 }} alignItems={"center"}>
{favouriteItems.length === 0 ? (
<NoDataHere />
) : (
Expand All @@ -75,11 +75,12 @@ export const FavoriteCards: React.FC = () => {
backgroundColor="none"
border=".01rem solid transparent"
borderColor="#00C79740"
borderRadius="0.75rem">
borderRadius="0.75rem"
width={{ base: "250px", md: "300px" }}>
<CardBody mb={9}>
<Skeleton height={skeletonHeight} isLoaded={loadedOffers} fadeDuration={1} display="flex" justifyContent={"center"}>
<Link to={`/datanfts/marketplace/${dataNft.tokenIdentifier}`} as={ReactRouterLink}>
<Image src={dataNft.nftImgUrl} alt="Data NFT Image" borderRadius="lg" boxSize={{ base: "250px", md: "200px" }} />
<Image src={dataNft.nftImgUrl} alt="Data NFT Image" borderRadius="lg" boxSize={{ base: "150px", md: "200px" }} />
</Link>
</Skeleton>
<Skeleton height="76px" isLoaded={loadedOffers} fadeDuration={2}>
Expand Down

0 comments on commit 7222eb6

Please sign in to comment.