diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js index 6b4c165..7384e12 100644 --- a/src/app/ItemPage.js +++ b/src/app/ItemPage.js @@ -74,6 +74,7 @@ export function ItemPageContent({ itemId, isEmbedded }) { thumbnailUrl description createdAt + wakaValueText # For Support users. rarityIndex diff --git a/src/app/ItemPageLayout.js b/src/app/ItemPageLayout.js index 9caad8c..d8c9ee2 100644 --- a/src/app/ItemPageLayout.js +++ b/src/app/ItemPageLayout.js @@ -5,6 +5,7 @@ import { Flex, Popover, PopoverArrow, + PopoverBody, PopoverContent, PopoverTrigger, Portal, @@ -12,10 +13,15 @@ import { Skeleton, Spinner, Tooltip, + useBreakpointValue, useToast, VStack, } from "@chakra-ui/react"; -import { ExternalLinkIcon, ChevronRightIcon } from "@chakra-ui/icons"; +import { + ExternalLinkIcon, + ChevronRightIcon, + QuestionIcon, +} from "@chakra-ui/icons"; import { gql, useMutation } from "@apollo/client"; import { @@ -150,6 +156,42 @@ function ItemPageBadges({ item, isEmbedded }) { Jellyneo + {item.isNc && ( + + {item.wakaValueText && ( + <> + {/* For hover-y devices, use a hover popover over the badge. */} + + + + Waka: {item.wakaValueText} + + + + {/* For touch-y devices, use a tappable help icon. */} + + + Waka: {item.wakaValueText} + + + + + + + + + )} + + )} {!item?.isNc && !item?.isPb && ( ; } -function LinkBadge({ children, href, isEmbedded }) { - return ( - - {children} - { - // We also change the icon to signal whether this will launch in a new - // window or not! - isEmbedded ? : - } - - ); -} +const LinkBadge = React.forwardRef( + ({ children, href, isEmbedded, ...props }, ref) => { + return ( + + {children} + { + // We also change the icon to signal whether this will launch in a new + // window or not! + isEmbedded ? ( + + ) : ( + + ) + } + + ); + } +); const fullDateFormatter = new Intl.DateTimeFormat("en-US", { dateStyle: "long", @@ -380,4 +431,36 @@ function ShortTimestamp({ when }) { ); } +function WakaPopover({ children, ...props }) { + const placement = useBreakpointValue({ base: "bottom", md: "right" }); + + return ( + + {children} + + + + +

+ Waka is a community resource that tracks the approximate value of + NC items, based on real-world trades. +

+ +

+ Other factors, like rarity and popularity, can affect the trade + economy too—and it can change quickly! +

+ +

+ Be sure to take all factors into account for your trades! And + consider asking for a "value check" on the Neoboards if you're not + sure. +

+
+
+
+
+ ); +} + export default ItemPageLayout; diff --git a/src/app/ItemTradesPage.js b/src/app/ItemTradesPage.js index 75c4e5c..5120f98 100644 --- a/src/app/ItemTradesPage.js +++ b/src/app/ItemTradesPage.js @@ -102,6 +102,7 @@ function ItemTradesPage({ thumbnailUrl description createdAt + wakaValueText } } `,