Skip to content

Commit

Permalink
fix nft detail title (#3493)
Browse files Browse the repository at this point in the history 
* cleanup

* cleanup
  • Loading branch information
@peterpme
peterpme authored Mar 30, 2023
1 parent b77f769 commit ea6784c
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 110 deletions.
21 changes: 15 additions & 6 deletions packages/app-mobile/src/components/NFTCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,16 @@ export function BaseCard({
imageUrl,
subtitle,
}: {
onPress: () => void;
onPress: (name?: string) => void;
imageUrl: string | null;
subtitle?: { name: string; length: string };
}): JSX.Element {
const theme = useTheme();
return (
<Pressable
onPress={onPress}
onPress={() => {
onPress(subtitle?.name);
}}
style={{
width: "50%",
padding: 4,
Expand All @@ -42,9 +44,9 @@ export function BaseCard({
style={{
backgroundColor: theme.custom.colors.nav,
position: "absolute",
bottom: 8,
left: 8,
right: 8,
bottom: 4,
left: 4,
right: 4,
borderRadius: 8,
paddingHorizontal: 8,
paddingVertical: 6,
Expand All @@ -59,9 +61,11 @@ export function BaseCard({
>
<Text
numberOfLines={1}
ellipsizeMode="tail"
style={{
justifyContent: "space-between",
color: theme.custom.colors.fontColor,
maxWidth: 100,
}}
>
{subtitle.name}
Expand Down Expand Up @@ -109,7 +113,12 @@ export function NFTCard({
return null;
}

const _subtitle = {
name: subtitle?.name || nft.name,
length: subtitle?.length || "",
};

return (
<BaseCard onPress={onPress} imageUrl={nft.imageUrl} subtitle={subtitle} />
<BaseCard onPress={onPress} imageUrl={nft.imageUrl} subtitle={_subtitle} />
);
}
167 changes: 63 additions & 104 deletions packages/app-mobile/src/screens/Unlocked/NftCollectiblesScreen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Nft, NftCollection } from "@coral-xyz/common";
import type { StackScreenProps } from "@react-navigation/stack";
import type { UnwrapRecoilValue } from "recoil";

import React, { useState } from "react";
Expand All @@ -16,7 +17,6 @@ import {

import * as Linking from "expo-linking";

import { UNKNOWN_NFT_ICON_SRC, Blockchain } from "@coral-xyz/common";
import {
// isAggregateWallets,
nftCollectionsWithIds,
Expand All @@ -35,7 +35,7 @@ import { useRecoilValue, useRecoilValueLoadable } from "recoil";
import { NftErrorBoundary } from "~components/ErrorBoundary";
import { NFTCard, BaseCard } from "~components/NFTCard";
import { NavHeader } from "~components/NavHeader";
import { Screen, EmptyState, Margin, CopyButtonIcon } from "~components/index";
import { Screen, EmptyState, CopyButtonIcon } from "~components/index";
import { useTheme } from "~hooks/useTheme";
import { WalletPickerButton } from "~screens/Unlocked/components/Balances";
import { TableHeader } from "~screens/Unlocked/components/index";
Expand All @@ -47,14 +47,28 @@ type NftCollectionsWithId = {
collections: NftCollection[];
};

type SingleNftData = {
title: string;
nftId: string;
publicKey: string;
connectionUrl: string;
};

type CollectionNftData = {
title: string;
collectionId: string;
publicKey: string;
connectionUrl: string;
};

function NftCollectionCard({
publicKey,
collection,
onPress,
}: {
publicKey: string;
collection: NftCollection;
onPress: (data: any) => void;
onPress: (route: string, data: SingleNftData | CollectionNftData) => void;
}): JSX.Element | null {
const wallets = useAllWallets();
const wallet = wallets.find((wallet) => wallet.publicKey === publicKey);
Expand All @@ -71,45 +85,41 @@ function NftCollectionCard({
})
);

const onPressItem = () => {
const onPressCollectionCard = () => {
if (collection.itemIds.length === 1) {
if (!collectionDisplayNft.name || !collectionDisplayNft.id) {
if (!collectionDisplayNft.collectionName || !collectionDisplayNft.id) {
throw new Error("invalid NFT data");
}

// If there is only one item in the collection, link straight to its detail page
onPress({
type: "NFT_SINGLE",
data: {
title: collectionDisplayNft.name || "",
nftName: collectionDisplayNft.name || "",
nftId: collectionDisplayNft.id,
publicKey,
connectionUrl,
},
onPress("NftDetail", {
title: collectionDisplayNft.name || collectionDisplayNft.collectionName,
nftId: collectionDisplayNft.id,
publicKey,
connectionUrl,
});
} else {
onPress({
type: "NFT_COLLECTION",
data: {
title: collection.symbol || "",
collectionId: collection.id,
publicKey,
connectionUrl,
},
// Link to the collection page and load another list
onPress("NftCollectionDetail", {
title: collectionDisplayNft.collectionName,
collectionId: collection.id,
publicKey,
connectionUrl,
});
}
};

return (
<BaseCard
onPress={onPressItem}
imageUrl={collectionDisplayNft.imageUrl}
subtitle={{
name: collectionDisplayNft.name,
length: collection.itemIds.length,
}}
/>
<NftErrorBoundary data={{ collection }}>
<BaseCard
onPress={onPressCollectionCard}
imageUrl={collectionDisplayNft.imageUrl}
subtitle={{
name: collectionDisplayNft.collectionName,
length: collection.itemIds.length,
}}
/>
</NftErrorBoundary>
);
}

Expand All @@ -129,47 +139,21 @@ function NoNFTsEmptyState() {
);
}

function SectionHeader({ title }: { title: string }): JSX.Element {
const theme = useTheme();
return (
<Text
style={[
// styles.sectionHeaderTitle,
{
fontSize: 14,
color: theme.custom.colors.fontColor,
backgroundColor: "#FFF",
},
]}
>
{title}
</Text>
);
}

export function NftCollectionListScreen({ navigation }): JSX.Element {
export function NftCollectionListScreen({
navigation,
}: StackScreenProps<NftStackParamList, "NftCollectionList">): JSX.Element {
const theme = useTheme();
const activeWallet = useActiveWallet();
const { contents, state } = useRecoilValueLoadable(nftCollectionsWithIds);
const allWalletCollections: NftCollectionsWithId[] =
(state === "hasValue" && contents) || [];
const isLoading = state === "loading";

// const nftCount = allWalletCollections
// ? allWalletCollections
// .map((c: any) => c.collections)
// .flat()
// .reduce((acc, c) => (c === null ? acc : c.itemIds.length + acc), 0)
// : 0;
//
// const isEmpty = nftCount === 0 && !isLoading;

if (isLoading) {
return (
<View
style={{
flex: 1,
backgroundColor: "#eee",
justifyContent: "center",
alignItems: "center",
}}
Expand All @@ -183,40 +167,6 @@ export function NftCollectionListScreen({ navigation }): JSX.Element {
allWalletCollections.find((c) => c.publicKey === activeWallet.publicKey)
?.collections || [];

const onSelectItem = ({ type, data }) => {
switch (type) {
case "NFT_ONE_COLLECTION": {
const { title, collectionId, nftMint } = data;
Alert.alert(JSON.stringify(title, collectionId, nftMint));
break;
}

case "NFT_SINGLE": {
const { title, nftName, nftId, publicKey, connectionUrl } = data;
navigation.push("NftDetail", {
title,
nftName,
nftId,
publicKey,
connectionUrl,
});
break;
}

case "NFT_COLLECTION": {
const { title, collectionId, publicKey, connectionUrl } = data;
navigation.push("NftCollectionDetail", {
title,
collectionId,
publicKey,
connectionUrl,
});
break;
}
default:
}
};

return (
<Screen>
<View
Expand Down Expand Up @@ -248,13 +198,11 @@ export function NftCollectionListScreen({ navigation }): JSX.Element {
keyExtractor={(collection) => collection.id}
renderItem={({ item: collection }) => {
return (
<NftErrorBoundary data={{ collection }}>
<NftCollectionCard
publicKey={activeWallet.publicKey}
collection={collection}
onPress={onSelectItem}
/>
</NftErrorBoundary>
<NftCollectionCard
publicKey={activeWallet.publicKey}
collection={collection}
onPress={navigation.push}
/>
);
}}
/>
Expand All @@ -263,7 +211,13 @@ export function NftCollectionListScreen({ navigation }): JSX.Element {
);
}

function NftCollectionDetailScreen({ navigation, route }): JSX.Element | null {
function NftCollectionDetailScreen({
navigation,
route,
}: StackScreenProps<
NftStackParamList,
"NftCollectionDetail"
>): JSX.Element | null {
const { title, collectionId, publicKey, connectionUrl } = route.params;
const { contents, state } = useRecoilValueLoadable<
UnwrapRecoilValue<typeof nftCollectionsWithIds>
Expand Down Expand Up @@ -295,9 +249,10 @@ function NftCollectionDetailScreen({ navigation, route }): JSX.Element | null {
nftId={item}
connectionUrl={connectionUrl}
publicKey={publicKey}
onPress={() => {
onPress={(name) => {
console.log("debug:name", name);
navigation.push("NftDetail", {
title,
title: name,
nftId: item,
publicKey,
connectionUrl,
Expand Down Expand Up @@ -338,7 +293,10 @@ export function NftCollectiblesNavigator(): JSX.Element {
<Stack.Screen
name="NftCollectionList"
component={NftCollectionListScreen}
options={{ title: "Collectibles" }}
options={{
title: "Collectibles",
headerTintColor: theme.custom.colors.fontColor,
}}
/>
<Stack.Screen
name="NftCollectionDetail"
Expand All @@ -353,6 +311,7 @@ export function NftCollectiblesNavigator(): JSX.Element {
component={NftDetailScreen}
options={({ route }) => ({
title: route.params.title,
headerTintColor: theme.custom.colors.fontColor,
})}
/>
<Stack.Screen name="SendNFT" component={NftDetailSendScreen} />
Expand Down

1 comment on commit ea6784c

@vercel
Copy link

@vercel vercel bot commented on ea6784c Mar 30, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

backpack – ./

www.backpack.app
backpack-git-master-200ms.vercel.app
backpack-200ms.vercel.app
backpack.app
devnet.backpack.app

Please sign in to comment.