Skip to content

Commit

Permalink
fix: better align dao and nft list + better nft list loading behavior (…
Browse files Browse the repository at this point in the history 
…#654)

Signed-off-by: Norman Meier <[email protected]>
  • Loading branch information
@n0izn0iz
n0izn0iz authored Aug 6, 2023
1 parent 8e60150 commit 3f97336
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 111 deletions.
8 changes: 6 additions & 2 deletions packages/components/ImageWithTextInsert.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { View, ViewStyle, StyleProp } from "react-native";
import { View, ViewStyle, StyleProp, StyleSheet } from "react-native";

import { BrandText } from "./BrandText";
import { OptimizedImage } from "./OptimizedImage";
Expand All @@ -11,11 +11,15 @@ export const ImageWithTextInsert: React.FC<{
style?: StyleProp<ViewStyle>;
}> = ({ imageURL, textInsert, size, style }) => {
const padding = size * 0.045;
const flatStyle = StyleSheet.flatten(style);
return (
<View style={[{ overflow: "hidden" }, style]}>
<OptimizedImage
sourceURI={imageURL}
style={{ width: size, height: size }}
style={{
width: flatStyle.width || size,
height: flatStyle.height || size,
}}
height={size}
width={size}
/>
Expand Down
179 changes: 98 additions & 81 deletions packages/components/collections/CollectionHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { SortDirection } from "../../api/marketplace/v1/marketplace";
import { useFeedbacks } from "../../context/FeedbacksProvider";
import { useCollectionStats } from "../../hooks/useCollectionStats";
import { useIsMobile } from "../../hooks/useIsMobile";
import { useMaxResolution } from "../../hooks/useMaxResolution";
import useSelectedWallet from "../../hooks/useSelectedWallet";
import { contractExplorerLink, parseCollectionId } from "../../networks";
import { prettyPrice } from "../../utils/coins";
Expand Down Expand Up @@ -47,7 +46,6 @@ export const CollectionHeader: React.FC<{
const wallet = useSelectedWallet();
// variables
const stats = useCollectionStats(collectionId, wallet?.userId);
const { width } = useMaxResolution({ isLarge: true });
const [network, collectionMintAddress] = parseCollectionId(collectionId);
const { setToastSuccess } = useFeedbacks();

Expand Down Expand Up @@ -92,7 +90,7 @@ export const CollectionHeader: React.FC<{
};

// returns
return width > 0 && stats && network ? (
return (
<View
style={{
width: "100%",
Expand Down Expand Up @@ -129,89 +127,108 @@ export const CollectionHeader: React.FC<{
: {},
]}
>
{collectionInfo.name}
{collectionInfo.name || "Loading..."}
</BrandText>
{stats.floorPrice.length > 0 && (
<View
style={{
flexDirection: "row",
flexWrap: "wrap",
justifyContent: isMobile ? "center" : "flex-start",
marginTop: layout.padding_x2_5,
alignItems: "center",
flex: 1,
}}
>
<CollectionStat
label="Floor"
value={
stats
? prettyPrice(
network.id,
stats.floorPrice[0].quantity,
stats.floorPrice[0].denom,
true
)
: "-"
}
currencyIcon={{
networkId: network.id,
value: 0,
denom: stats.floorPrice[0].denom,
}}
/>
<SpacerRow size={1.5} />
<CollectionStat
label="Total Volume"
value={prettyPrice(
network.id,
parseFloat(stats.totalVolume).toFixed(0),
stats.floorPrice[0].denom,
true
)}
currencyIcon={{
networkId: network.id,
value: parseFloat(stats.totalVolume),
denom: stats.floorPrice[0].denom,
}}
/>
<SpacerRow size={1.5} />
{!isMobile && (
<>
<CollectionStat
label="Owners"
value={(stats?.owners || 0).toString()}
/>
<SpacerRow size={1.5} />

<CollectionStat
label="Listed"
value={(stats?.listed || 0).toString()}
/>
<SpacerRow size={1.5} />
<CollectionStat
label="Avg Sale (24hr)"
value={prettyPrice(
<View
style={{
flexDirection: "row",
flexWrap: "wrap",
justifyContent: isMobile ? "center" : "flex-start",
marginTop: layout.padding_x2_5,
alignItems: "center",
flex: 1,
}}
>
<CollectionStat
label="Floor"
value={
stats?.floorPrice?.length && network
? prettyPrice(
network.id,
stats.avgPricePeriod.toFixed(0),
stats.floorPrice[0].quantity,
stats.floorPrice[0].denom,
true
)}
currencyIcon={{
)
: "-"
}
currencyIcon={
stats?.floorPrice?.length && network
? {
networkId: network.id,
value: stats.avgPricePeriod,
value: 0,
denom: stats.floorPrice[0].denom,
}}
/>
</>
)}
<SpacerRow size={1.5} />
<CollectionStat
label="Total Supply"
value={(stats?.totalSupply || 0).toString()}
/>
</View>
)}
}
: undefined
}
/>
<SpacerRow size={1.5} />
<CollectionStat
label="Total Volume"
value={
stats?.floorPrice?.length && network
? prettyPrice(
network.id,
parseFloat(stats.totalVolume).toFixed(0),
stats.floorPrice[0].denom,
true
)
: "-"
}
currencyIcon={
stats?.floorPrice?.length && network
? {
networkId: network.id,
value: parseFloat(stats.totalVolume),
denom: stats.floorPrice[0].denom,
}
: undefined
}
/>
<SpacerRow size={1.5} />
{!isMobile && (
<>
<CollectionStat
label="Owners"
value={(stats?.owners || 0).toString()}
/>
<SpacerRow size={1.5} />

<CollectionStat
label="Listed"
value={(stats?.listed || 0).toString()}
/>
<SpacerRow size={1.5} />
<CollectionStat
label="Avg Sale (24hr)"
value={
stats?.floorPrice?.length && network
? prettyPrice(
network.id,
stats.avgPricePeriod.toFixed(0),
stats.floorPrice[0].denom,
true
)
: "-"
}
currencyIcon={
stats?.floorPrice?.length && network
? {
networkId: network.id,
value: stats.avgPricePeriod,
denom: stats.floorPrice[0].denom,
}
: undefined
}
/>
</>
)}
<SpacerRow size={1.5} />
<CollectionStat
label="Total Supply"
value={(stats?.totalSupply || 0).toString()}
/>
</View>

<View
style={{
flexDirection: "row",
Expand Down Expand Up @@ -286,5 +303,5 @@ export const CollectionHeader: React.FC<{
)}
</View>
</View>
) : null;
);
};
11 changes: 11 additions & 0 deletions packages/components/dao/DAOsList.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useState } from "react";
import { View } from "react-native";

import { DAOCard, GnoDAOCard } from "./DAOCard";
Expand All @@ -10,14 +11,22 @@ import { layout } from "../../utils/style/layout";

const halfGap = layout.padding_x1;

const maxElemWidth = 250;

export const DAOsList: React.FC<{
req: Partial<DAOsRequest>;
}> = ({ req }) => {
const { daos } = useDAOs(req);
const networkId = useSelectedNetworkId();
const { gnoDAOs } = useGnoDAOs(networkId);
const [containerWidth, setContainerWidth] = useState(0);
const elemsPerRow = Math.floor(containerWidth / maxElemWidth) || 1;
const elemSize = elemsPerRow
? (containerWidth - halfGap * elemsPerRow * 2) / elemsPerRow
: daos?.length || 0;
return (
<View
onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
style={{
flex: 1,
flexDirection: "row",
Expand All @@ -31,6 +40,7 @@ export const DAOsList: React.FC<{
key={item.id}
daoId={item.id}
style={{
width: elemSize,
marginHorizontal: halfGap,
marginVertical: halfGap,
}}
Expand All @@ -42,6 +52,7 @@ export const DAOsList: React.FC<{
daoId={getUserId(networkId, item.pkgPath)}
registration={item}
style={{
width: elemSize,
marginHorizontal: halfGap,
marginVertical: halfGap,
}}
Expand Down
26 changes: 20 additions & 6 deletions packages/components/nfts/NFTView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
import { useSelector } from "react-redux";

import { NFTTransferModal } from "./NFTTransferModal";
import { minNFTWidth } from "./NFTs";
import checkMark from "../../../assets/icons/checkmark-marketplace.svg";
import dotsCircleSVG from "../../../assets/icons/dots-circle.svg";
import footerSVG from "../../../assets/icons/footer-regular.svg";
Expand Down Expand Up @@ -56,9 +57,8 @@ export const NFTView: React.FC<{
}> = ({ data: nft, style }) => {
const isMobile = useIsMobile();
const cardWidth = isMobile ? 220 : 250;
const { width } = useMaxResolution({ isLarge: true });
const { width: maxWidth } = useMaxResolution({ isLarge: true });
const insideMargin = layout.padding_x2;
const contentWidth = cardWidth - insideMargin * 2;
const flatStyle = StyleSheet.flatten(style);
const selectedWallet = useSelectedWallet();
const userInfo = useNSUserInfo(nft.ownerId);
Expand All @@ -70,7 +70,7 @@ export const NFTView: React.FC<{
const localSelected = new Set(useSelector(selectSelectedNFTIds)).has(nft.id);
const dispatch = useAppDispatch();
const handleClick = (nft: NFT, selected: boolean) => {
if (width < 500) return; // disable cart on mobile
if (maxWidth < 500) return; // disable cart on mobile
dispatch(setShowCart(true));
if (!selected) {
dispatch(addSelected(nft));
Expand All @@ -93,13 +93,21 @@ export const NFTView: React.FC<{
marginEnd,
marginStart,
marginTop,
width,
...styleWithoutMargins
} = flatStyle || {};

// functions
const toggleTransferNFT = () =>
setIsTransferNFTVisible(!isTransferNFTVisible);

if (nft.id.startsWith("padded-")) {
return <View style={{ width }} />;
}

const widthNumber =
typeof width === "number" ? width : parseInt(width || "0", 10) || cardWidth;

// returns
return (
<>
Expand All @@ -118,7 +126,7 @@ export const NFTView: React.FC<{
<TertiaryBox
key={nft.name}
// height={438}
width={cardWidth}
width={widthNumber}
style={styleWithoutMargins}
>
<View style={{ width: "100%" }}>
Expand Down Expand Up @@ -250,10 +258,16 @@ export const NFTView: React.FC<{
}}
>
<ImageWithTextInsert
size={contentWidth}
size={minNFTWidth}
imageURL={nft.imageUri}
textInsert={nft.textInsert}
style={{ marginTop: 15, marginBottom: 20, borderRadius: 12 }}
style={{
marginTop: 15,
marginBottom: 20,
borderRadius: 12,
width: widthNumber - insideMargin * 2,
height: widthNumber - insideMargin * 2,
}}
/>
<BrandText
style={{
Expand Down
Loading

0 comments on commit 3f97336

Please sign in to comment.