fixup

skinport · Mar 26, 2024 · 664036a · 664036a
1 parent 9e682dd
commit 664036a
Show file tree

Hide file tree

Showing 10 changed files with 274 additions and 163 deletions.
diff --git a/src/components/item-skinport-actions.tsx b/src/components/item-skinport-actions.tsx
@@ -21,15 +21,24 @@ export function ItemSkinportActions({
   children,
   actionType = "view",
 }: {
-  item: SteamItem;
+  item: Pick<
+    SteamItem,
+    "appId" | "marketHashName" | "inspectIngameLink" | "exterior"
+  >;
   className?: string;
   container: HTMLElement;
   children?: ReactNode;
   actionType?: "view" | "buy" | "sell";
 }) {
+  const itemSkinportLink = getSkinportItemUrl(item);
+
+  if (!itemSkinportLink) {
+    return;
+  }
+
   const viewOnSkinportButton = (
     <Button className={className} asChild>
-      <Link href={getSkinportItemUrl(item)} target="_blank">
+      <Link href={itemSkinportLink} target="_blank">
         <InterpolateMessage
           message={getI18nMessage(`common_${actionType}OnSkinport`)}
           values={{
@@ -40,7 +49,12 @@ export function ItemSkinportActions({
     </Button>
   );
 
-  if ((item.inspectIngameLink && item.exterior) || children)
+  const itemSkinportScreenshotUrl =
+    item.inspectIngameLink &&
+    item.exterior &&
+    getSkinportScreenshotUrl(`direct?link=${item.inspectIngameLink}`);
+
+  if (itemSkinportScreenshotUrl || children) {
     return (
       <div className="flex mb-4 [&>*:first-child]:rounded-tr-none [&>*:first-child]:rounded-br-none [&>*:not(:first-child)]:rounded-tl-none [&>*:not(:first-child)]:rounded-bl-none [&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-l-background">
         {viewOnSkinportButton}
@@ -51,14 +65,9 @@ export function ItemSkinportActions({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent container={container}>
-            {item.inspectIngameLink && item.exterior && (
+            {itemSkinportScreenshotUrl && (
               <DropdownMenuItem asChild>
-                <Link
-                  href={getSkinportScreenshotUrl(
-                    `direct?link=${item.inspectIngameLink}`,
-                  )}
-                  target="_blank"
-                >
+                <Link href={itemSkinportScreenshotUrl} target="_blank">
                   {getI18nMessage(
                     "steamcommunity_inventoryItemSkinportLinks_viewScreenshot",
                   )}
@@ -70,6 +79,7 @@ export function ItemSkinportActions({
         </DropdownMenu>
       </div>
     );
+  }
 
   return viewOnSkinportButton;
 }
diff --git a/src/components/item-skinport-price.tsx b/src/components/item-skinport-price.tsx
@@ -77,7 +77,7 @@ type ItemSkinportPriceProps = {
   discount?: string;
   className?: string;
   startingAtClassName?: string;
-  item?: SteamItem;
+  item?: Pick<SteamItem, "appId" | "marketHashName">;
   hidePriceTitle?: boolean;
   tooltipType?: "view" | "buy" | "sell";
 } & VariantProps<typeof priceVariants>;
@@ -99,31 +99,36 @@ export function ItemSkinportPrice({
   hidePriceTitle,
   tooltipType = "view",
 }: ItemSkinportPriceProps) {
-  const renderAsLinkToSkinport = (children: ReactNode) =>
-    item ? (
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Link
-            href={getSkinportItemUrl(item)}
-            target="_blank"
-            onClick={(event) => {
-              event.stopPropagation();
-            }}
-            className="flex gap-2 items-center"
-          >
-            {children}
-          </Link>
-        </TooltipTrigger>
-        <TooltipContent className="flex gap-1 items-center">
-          <InterpolateMessage
-            message={getI18nMessage(tooltipI18nMessageKey[tooltipType])}
-            values={{ skinportLogo: <SkinportLogo size={10} isInverted /> }}
-          />
-        </TooltipContent>
-      </Tooltip>
-    ) : (
-      children
-    );
+  const renderAsLinkToSkinport = (children: ReactNode) => {
+    const skinportItemUrl = item && getSkinportItemUrl(item);
+
+    if (skinportItemUrl) {
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Link
+              href={skinportItemUrl}
+              target="_blank"
+              onClick={(event) => {
+                event.stopPropagation();
+              }}
+              className="flex gap-2 items-center"
+            >
+              {children}
+            </Link>
+          </TooltipTrigger>
+          <TooltipContent className="flex gap-1 items-center">
+            <InterpolateMessage
+              message={getI18nMessage(tooltipI18nMessageKey[tooltipType])}
+              values={{ skinportLogo: <SkinportLogo size={10} isInverted /> }}
+            />
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return children;
+  };
 
   const priceElement = (
     <div
@@ -153,7 +158,7 @@ export function ItemSkinportPrice({
                 ? formatPrice(price.data[priceType], price.data.currency)
                 : "-"}
             </div>
-            {discount && typeof price === "number" && (
+            {discount && price.data !== null && (
               <Discount discount={discount} />
             )}
           </>,

diff --git a/src/content/steamcommunity/bridge/globals.d.ts b/src/content/steamcommunity/bridge/globals.d.ts
@@ -13,7 +13,7 @@ declare type CPage = {
   EnsurePageItemsCreated(): boolean;
 };
 
-type AssetMarketAction = { link: string; name: string };
+type MarketAction = { link: string; name: string };
 
 type Tag = {
   internal_name: string;
@@ -24,7 +24,7 @@ type Tag = {
 };
 
 declare type RgDescription = {
-  actions?: AssetMarketAction[];
+  actions?: MarketAction[];
   appid: AppId;
   classid: ClassId;
   market_hash_name: string;
@@ -44,7 +44,7 @@ declare type RgAsset = {
 
 type RgInventory = {
   [assetId: AssetId]: {
-    actions?: AssetMarketAction[];
+    actions?: MarketAction[];
     amount: string;
     appid: AppId;
     classid: string;
@@ -144,3 +144,35 @@ type AppContextData = {
 declare const g_rgAppContextData: AppContextData;
 
 declare const g_rgPartnerAppContextData: AppContextData;
+
+declare const g_rgAssets: Partial<{
+  [appId: string]: Partial<{
+    [contextId: string]: Partial<{
+      [assetId: string]: {
+        actions: MarketAction[];
+        amount: number;
+        appid: AppId;
+        classid: string;
+        contextid: ContextId;
+        id: string;
+        market_hash_name: string;
+        marketable: 0 | 1;
+        tradable: 0 | 1;
+      };
+    }>;
+  }>;
+}>;
+
+declare const g_rgListingInfo: Partial<{
+  [listingId: string]: {
+    asset: {
+      amount: string;
+      appid: AppId;
+      contextid: ContextId;
+      currency: number;
+      id: string;
+      market_actions: MarketAction[];
+    };
+    listingid: string;
+  };
+}>;
diff --git a/src/content/steamcommunity/bridge/index.ts b/src/content/steamcommunity/bridge/index.ts
@@ -71,4 +71,10 @@ export const bridge = {
       { itemsByAssetId: Record<string, SteamItem> }
     >("tradeOffer.getInventoryItems"),
   },
+  market: {
+    getListingItem: createBridgeAction<
+      { listingId: string } | never,
+      SteamItem
+    >("market.getListingItem"),
+  },
 };