Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Commit

Permalink
new desktop UI for the top creator token (#2506)
Browse files Browse the repository at this point in the history 
* new desktop UI for the top creator token

* fix spacing

* rename Trending with top creator tokens
  • Loading branch information
@alantoa
alantoa authored Nov 7, 2023
1 parent 9b88e27 commit 1dca3c2
Show file tree
Hide file tree
Showing 15 changed files with 282 additions and 190 deletions.
2 changes: 0 additions & 2 deletions apps/next/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import { CreatorTokenCollectedScreen } from "app/screens/creator-token/creator-t
import { CreatorTokenCollectorsScreen } from "app/screens/creator-token/creator-token-collectors";
import { InviteCreatorTokenScreen } from "app/screens/creator-token/invite-creator-token";
import { CreatorTokenInviteSignInScreen } from "app/screens/creator-token/invite-sign-in";
import { TopCreatorTokenScreen } from "app/screens/creator-token/top-creator-token";
import { CreatorTokensExplanationScreen } from "app/screens/creator-tokens-explanation";
import { CreatorTokensSelfServeExplainerScreen } from "app/screens/creator-tokens-self-serve-explainer";
import { CreatorTokensShareModalScreen } from "app/screens/creator-tokens-share";
Expand Down Expand Up @@ -267,7 +266,6 @@ function App({ Component, pageProps, router }: AppProps) {
<CreatorTokensSelfServeExplainerScreen />
<CreatorTokensImportAllowlistScreen />
<CreatorTokensImportAllowlistSuccessScreen />
<TopCreatorTokenScreen />
<CreatorTokenCollectedScreen />
<CreatorTokenCollectorsScreen />
{/* Login should be the last so it renders on top of others if needed */}
Expand Down
249 changes: 169 additions & 80 deletions packages/app/components/creator-token/creator-token-users.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Platform } from "react-native";
import { Platform, useWindowDimensions } from "react-native";

import { Avatar } from "@showtime-xyz/universal.avatar";
import { useIsDarkMode } from "@showtime-xyz/universal.hooks";
Expand All @@ -20,8 +20,11 @@ import {
TopCreatorTokenUser,
} from "app/hooks/creator-token/use-creator-tokens";
import { useHeaderHeight } from "app/lib/react-navigation/elements";
import { Link } from "app/navigation/link";
import { formatAddressShort } from "app/utilities";

import { breakpoints } from "design-system/theme";

export const CreatorTokensTitle = ({ title }: { title: string }) => {
const headerHeight = useHeaderHeight();
return (
Expand All @@ -42,51 +45,8 @@ export const CreatorTokensTitle = ({ title }: { title: string }) => {
</View>
);
};
export const CreatorTokenCard = ({
index,
tw,
item,
...rest
}: ViewProps & { index: number; item: CreatorTokenUser }) => {
const isDark = useIsDarkMode();
const router = useRouter();
return (
<PressableHover
tw={[
"mb-3 items-center rounded-md border border-gray-200 bg-slate-50 px-1 py-4 dark:border-gray-700 dark:bg-gray-900",
tw,
].join(" ")}
onPress={() => router.push(`/@${item.username}`)}
{...rest}
>
<>
<View tw="mb-3">
<View tw="absolute -left-1 top-0">
<Showtime
width={8}
height={8}
color={isDark ? colors.white : colors.gray[900]}
/>
</View>
<Avatar url={item?.img_url} size={44} />
</View>
<Text
tw="px-1 text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@{item?.username}
</Text>
{/* <View tw="h-3" />
<Text tw="text-sm font-bold text-gray-900 dark:text-white">$2.60</Text> */}
</>
{/* <View tw="absolute -right-2.5 -top-2.5 h-6 min-w-[24px] items-center justify-center rounded-full bg-slate-500 px-1.5 text-gray-500 dark:bg-gray-600">
<Text tw="text-xs font-semibold text-white">{index + 1}</Text>
</View> */}
</PressableHover>
);
};

export const TopCreatorTokenListItem = ({
export const TopCreatorTokenItemOnProfile = ({
index,
tw,
item,
Expand Down Expand Up @@ -180,54 +140,141 @@ export const TopCreatorTokenItem = ({
}) => {
const router = useRouter();
const isDark = useIsDarkMode();

return (
<PressableHover
tw={["py-1.5", tw].join(" ")}
onPress={() => router.push(`/@${item.owner_profile.username}`)}
{...rest}
<Link
href={
item.owner_profile?.username
? `/@${item.owner_profile?.username}`
: `/@${item.owner_address}`
}
>
<View tw="flex-row items-center">
<View tw="min-w-[24px]">
{index != undefined ? (
index < 3 ? (
<View tw="items-center justify-center">
<View tw="absolute -top-1">
<GoldHexagon width={18} height={18} />
<View tw={["py-1.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center">
<View tw="min-w-[24px]">
{index != undefined ? (
index < 3 ? (
<View tw="items-center justify-center">
<View tw="absolute -top-1">
<GoldHexagon width={18} height={18} />
</View>
<Text tw="text-xs font-bold text-white">{index + 1}</Text>
</View>
<Text tw="text-xs font-bold text-white">{index + 1}</Text>
) : (
<View tw="items-center justify-center">
<Text tw="text-xs font-bold text-gray-700 dark:text-white">
{index + 1}
</Text>
</View>
)
) : null}
</View>
<View tw="ml-1 flex-1 flex-row items-center">
<Avatar url={item?.owner_profile?.img_url} size={34} />
<View tw="ml-2 flex-1 justify-center">
<View tw="flex-row items-center">
<Text
tw="text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@
{item.owner_profile?.username
? item.owner_profile?.username
: formatAddressShort(item.owner_address)}
</Text>
{Boolean(item.owner_profile?.verified) && (
<View tw="ml-1">
<VerificationBadge size={14} />
</View>
)}
</View>
) : (
<View tw="items-center justify-center">
<Text tw="text-xs font-bold text-gray-700 dark:text-white">
{index + 1}
<View tw="mt-1 flex-row items-center">
<Text
tw="text-xs font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
{item.nft_count}
</Text>
<View tw="w-1" />
<ShowtimeRounded
width={14}
height={14}
color={isDark ? colors.white : colors.gray[900]}
/>
</View>
)
) : null}
</View>
</View>
</View>
<View tw="web:flex-1 ml-2 flex-row items-center">
<Avatar url={item?.owner_profile?.img_url} size={34} />
<View tw="w-2" />
<View tw="flex-1 justify-center">
<View tw="flex-row items-center">
{item?.owner_profile?.username ? (
<>
<Text
tw="text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@{item.owner_profile.username}
</View>
</Link>
);
};
export const TopCreatorTokenListItem = ({
index,
tw,
item,
isSimplified = false,
isMdWidth,
...rest
}: ViewProps & {
index?: number;
item: TopCreatorTokenUser;
isSimplified?: boolean;
isMdWidth?: boolean;
}) => {
const isDark = useIsDarkMode();
if (!isMdWidth) {
return <TopCreatorTokenItem index={index} tw={tw} item={item} {...rest} />;
}
return (
<Link
href={
item.owner_profile?.username
? `/@${item.owner_profile?.username}`
: `/@${item.owner_address}`
}
>
<View tw={["py-2.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center">
<View tw="min-w-[24px]">
{index != undefined ? (
index < 3 ? (
<View tw="items-center justify-center">
<View tw="absolute -top-1">
<GoldHexagon width={18} height={18} />
</View>
<Text tw="text-xs font-bold text-white">{index + 1}</Text>
</View>
) : (
<View tw="items-center justify-center">
<Text tw="text-xs font-bold text-gray-700 dark:text-white">
{index + 1}
</Text>
<View tw="h-1" />
</>
) : null}
</View>
)
) : null}
</View>
<View tw="web:flex-1 ml-2 flex-row items-center">
<Avatar url={item?.owner_profile?.img_url} size={34} />
<View tw="w-2" />
<View tw="min-w-[180px] flex-row items-center">
<Text
tw="text-sm font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
>
@
{item.owner_profile?.username
? item.owner_profile?.username
: formatAddressShort(item.owner_address)}
</Text>
<View tw="h-1" />
{Boolean(item.owner_profile?.verified) && (
<View tw="ml-1">
<VerificationBadge size={14} />
</View>
)}
</View>
<View tw="mt-1 flex-row items-center">
<View tw="min-w-[50px] flex-row items-center">
<Text
tw="text-xs font-semibold text-gray-900 dark:text-white"
numberOfLines={1}
Expand All @@ -241,10 +288,27 @@ export const TopCreatorTokenItem = ({
color={isDark ? colors.white : colors.gray[900]}
/>
</View>
{!isSimplified ? (
<View tw="ml-6 min-w-[150px] flex-1">
<Text
tw="text-sm font-bold text-gray-900 dark:text-white"
numberOfLines={1}
>
{item.owner_profile?.name}
</Text>
<View tw="h-1" />
<Text
tw="text-xs text-gray-500 dark:text-gray-400"
numberOfLines={1}
>
{item.owner_profile?.bio}
</Text>
</View>
) : null}
</View>
</View>
</View>
</PressableHover>
</Link>
);
};

Expand All @@ -266,3 +330,28 @@ export const TopCreatorTokenSkeleton = ({ tw, ...rest }: ViewProps) => {
</View>
);
};

export const TopCreatorTokenListItemSkeleton = ({
tw,
isMdWidth,
...rest
}: ViewProps & {
isMdWidth: boolean;
}) => {
if (!isMdWidth) {
return <TopCreatorTokenSkeleton tw={tw} {...rest} />;
}
return (
<View tw={["py-2.5", tw].join(" ")} {...rest}>
<View tw="flex-row items-center pl-1">
<Skeleton width={16} height={16} show radius={8} />
<View tw="w-2.5" />
<Skeleton width={34} height={34} show radius={999} />
<View tw="w-2" />
<Skeleton width={120} height={13} show radius={4} />
<View tw="w-4" />
<Skeleton width={44} height={14} show radius={4} />
</View>
</View>
);
};
Loading

0 comments on commit 1dca3c2

Please sign in to comment.