Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

D robert 1.12.0 #1221

Merged
merged 3 commits into from
Feb 26, 2024
Merged

D robert 1.12.0 #1221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
802f712
fix: make visible all the tablist items
911-Benedek-RobertGeorge Feb 13, 2024
e5c63ca
fix: favorite card for mobile display tablist wallet
911-Benedek-RobertGeorge Feb 13, 2024
5665582
Merge branch 'milestone-1.12.0' into d-robert
911-Benedek-RobertGeorge Feb 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/CustomPagination.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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