hyperweb-io · yyyyaaa · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023 · Dec 1, 2023
diff --git a/compiler/plugins/react.plugin.js b/compiler/plugins/react.plugin.js
@@ -98,7 +98,12 @@ function fixReactTypeIssues(codeStr) {
       )
       // Fix some svg attributes not correctly compiled
       .replace(/(shape-rendering)="(.*)"/g, `shapeRendering="$2"`)
+      .replace(/(clip-path)="(.*)"/g, `clipPath="$2"`)
+      .replace(/(clip-rule)="(.*)"/g, `clipRule="$2"`)
+      .replace(/(stroke-linejoin)="(.*)"/g, `strokeLinejoin="$2"`)
+      .replace(/(stroke-linecap)="(.*)"/g, `strokeLinecap="$2"`)
       .replace(/(stroke-width)="(.*)"/g, `strokeWidth="$2"`)
+      .replace(/(fill-rule)="(.*)"/g, `fillRule="$2"`)
       .replace(/(srcset)={(.*)}/g, `srcSet={$2}`)
   );
 }
diff --git a/packages/react/stories/Tabs.stories.tsx b/packages/react/stories/Tabs.stories.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import Tabs from "../src/ui/tabs";
+import Button from "../src/ui/button";
+import Stack from "../src/ui/stack";
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -32,3 +34,47 @@ export const Primary: Story = {
     ],
   },
 };
+
+export const ControlledTabs: Story = {
+  args: {
+    tabs: [
+      {
+        label: "Tab One",
+        content: <h1>Tab1</h1>,
+      },
+      {
+        label: "Tab Two",
+        content: <h1>Tab2</h1>,
+      },
+      {
+        label: "Tab Three",
+        content: <h1>Tab3</h1>,
+      },
+    ],
+  },
+  render: (props) => {
+    const [activeTab, setActiveTab] = React.useState(0);
+
+    return (
+      <>
+        <Tabs
+          tabs={props.tabs}
+          activeTab={activeTab}
+          onActiveTabChange={(tabId) => setActiveTab(tabId)}
+        />
+        Click to change tab
+        <Stack direction="horizontal" space="$4">
+          <Button size="sm" onClick={() => setActiveTab(0)}>
+            tab 1
+          </Button>
+          <Button size="sm" onClick={() => setActiveTab(1)}>
+            tab 2
+          </Button>
+          <Button size="sm" onClick={() => setActiveTab(2)}>
+            tab 3
+          </Button>
+        </Stack>
+      </>
+    );
+  },
+};
diff --git a/packages/react/stories/nft/nft-detail/NftDetail.stories.tsx b/packages/react/stories/nft/nft-detail/NftDetail.stories.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import NftDetail from "../../../src/ui/nft-detail";
+import type { NftDetailProps } from "../../../src/ui/nft-detail/nft-detail.types";
 
-const meta: Meta<typeof NftDetail> = {
+const meta: Meta<NftDetailProps> = {
   component: NftDetail,
   title: "nft/nft-detail/NftDetail",
   tags: ["autodocs"],
@@ -12,22 +13,31 @@ const meta: Meta<typeof NftDetail> = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<NftDetailProps>;
 
 export const Primary: Story = {
   args: {
     type: "listForSale",
     imgSrc:
-      "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
+      "https://i.stargaze-apis.com/d0jFShn3t5aytKZw5OkUa1uuscynGjUNDYD5pg14p4w/f:jpg/resize:fit:700:::/dpr:2/plain/ipfs://QmbGvE3wmxex8KiBbbvMjR8f9adR28s3XkiZSTuGmHoMHV/3924.jpg",
     collectionName: "Shnubbles Breakfast Drop #2",
-    tokenName: "Bad Kid #9509",
+    name: "Bad Kid #9509",
     creatorName: "stars1ducj...vl342f",
     collectionDesc:
       "The tastiest NFT-heroes of the interchain Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend.",
     mintPrice: "300",
     rarityOrder: 2864,
     tokensCount: 10000,
     ownerName: "shane.stars",
+    price: 670,
+    detailInfo: {
+      price: 400,
+      lastSale: 385,
+      owner: 100,
+      topOffer: 400,
+      floorPrice: 400,
+      isNameVerified: true,
+    },
     traits: [
       {
         name: "Accessories",
@@ -89,7 +99,7 @@ export const MakeOffer: Story = {
     imgSrc:
       "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
     collectionName: "Shnubbles Breakfast Drop #2",
-    tokenName: "Breakfast Shnubble #127",
+    name: "Breakfast Shnubble #127",
     creatorName: "stars1ducj...vl342f",
     collectionDesc:
       "The tastiest NFT-heroes of the interchain Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend.",
@@ -136,7 +146,7 @@ export const MakeOffer: Story = {
     ],
     detailInfo: {
       price: 200,
-      // lastSale: 1000,
+      lastSale: 1000,
       owner: "shane.stars",
       topOffer: 5,
       floorPrice: 149,
@@ -183,7 +193,7 @@ export const BuyNow: Story = {
     imgSrc:
       "https://res.cloudinary.com/stargaze/image/upload/w_700/ndkbjpwtgys09w1xxwny.jpg",
     collectionName: "Shnubbles Breakfast Drop #2",
-    tokenName: "Breakfast Shnubble #127",
+    name: "Breakfast Shnubble #127",
     creatorName: "stars1ducj...vl342f",
     collectionDesc:
       "The tastiest NFT-heroes of the interchain Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend.",

diff --git a/src/ui/nft-detail-info/nft-detail-info.lite.tsx b/src/ui/nft-detail-info/nft-detail-info.lite.tsx
@@ -34,12 +34,14 @@ export default function NftDetailInfo(props: NftDetailInfoProps) {
           desktop: "$14",
         }}
       >
-        <Stack space="$0" direction="vertical">
-          <Text fontSize="$xs" color="$textSecondary">
-            Price
-          </Text>
-          <StarText value={props?.price} />
-        </Stack>
+        <Show when={!!props.price}>
+          <Stack space="$0" direction="vertical">
+            <Text fontSize="$xs" color="$textSecondary">
+              Price
+            </Text>
+            <StarText value={props.price} />
+          </Stack>
+        </Show>
 
         <Show when={!!props.lastSale}>
           <Stack direction="vertical" space="$0">
@@ -49,44 +51,50 @@ export default function NftDetailInfo(props: NftDetailInfoProps) {
 
             <Text fontWeight="$semibold">
               {`${
-                isNumber(props?.lastSale) ? `${props?.lastSale} STARS` : "---"
+                isNumber(props.lastSale) ? `${props.lastSale} STARS` : "---"
               }`}
             </Text>
           </Stack>
         </Show>
 
-        <Stack direction="vertical" space="0">
-          <Text fontSize="$xs" color="$textSecondary">
-            Owner
-          </Text>
-          <Stack attributes={{ alignItems: "center" }} space="$0">
-            <Text fontWeight="$semibold" attributes={{ marginRight: "$3" }}>
-              {props?.owner}
+        <Show when={!!props.owner}>
+          <Stack direction="vertical" space="0">
+            <Text fontSize="$xs" color="$textSecondary">
+              Owner
             </Text>
-            <Icon
-              attributes={{
-                transform: "translateY(1px)",
-              }}
-              name="jaggedCheck"
-              size="$md"
-              color="$text"
-            />
+            <Stack attributes={{ alignItems: "center" }} space="$0">
+              <Text fontWeight="$semibold" attributes={{ marginRight: "$3" }}>
+                {props.owner}
+              </Text>
+              <Icon
+                attributes={{
+                  transform: "translateY(1px)",
+                }}
+                name="jaggedCheck"
+                size="$md"
+                color="$text"
+              />
+            </Stack>
           </Stack>
-        </Stack>
+        </Show>
 
-        <Stack direction="vertical" space="0">
-          <Text fontSize="$xs" color="$textSecondary">
-            Top offer
-          </Text>
-          <StarText value={props?.topOffer} />
-        </Stack>
+        <Show when={!!props.topOffer}>
+          <Stack direction="vertical" space="0">
+            <Text fontSize="$xs" color="$textSecondary">
+              Top offer
+            </Text>
+            <StarText value={props.topOffer} />
+          </Stack>
+        </Show>
 
-        <Stack direction="vertical" space="$0">
-          <Text fontSize="$xs" color="$textSecondary">
-            Floor price
-          </Text>
-          <StarText value={props?.floorPrice} />
-        </Stack>
+        <Show when={!!props.floorPrice}>
+          <Stack direction="vertical" space="$0">
+            <Text fontSize="$xs" color="$textSecondary">
+              Floor price
+            </Text>
+            <StarText value={props.floorPrice} />
+          </Stack>
+        </Show>
       </Box>
     </Stack>
   );

diff --git a/src/ui/nft-detail-info/nft-detail-info.type.tsx b/src/ui/nft-detail-info/nft-detail-info.type.tsx
@@ -1,8 +1,8 @@
 export interface NftDetailInfoProps {
-  price: number;
+  price?: number;
   lastSale?: number;
-  owner: number;
-  topOffer: number;
-  floorPrice: number;
+  owner?: number;
+  topOffer?: number;
+  floorPrice?: number;
   isNameVerified: boolean;
 }
diff --git a/src/ui/nft-detail/nft-detail.lite.tsx b/src/ui/nft-detail/nft-detail.lite.tsx
@@ -140,7 +140,21 @@ export default function NftDetail(props: NftDetailProps) {
           </Text>
 
           <Show when={!!props.mintPrice}>
-            <StarText label="Minted for" value={props.mintPrice} />
+            <StarText
+              label="Minted for"
+              value={props.mintPrice}
+              iconSrc={props.tokenInfo?.iconSrc}
+              tokenName={props.tokenInfo?.tokenName}
+            />
+          </Show>
+
+          <Show when={!!props.detailInfo?.lastSale}>
+            <StarText
+              label="Last sale"
+              value={props.detailInfo?.lastSale}
+              iconSrc={props.tokenInfo?.iconSrc}
+              tokenName={props.tokenInfo?.tokenName}
+            />
           </Show>
 
           <Stack
@@ -173,6 +187,20 @@ export default function NftDetail(props: NftDetailProps) {
             </Text>
           </Stack>
 
+          <Show when={!!props.price}>
+            <StarText
+              label="Price"
+              size="lg"
+              value={props.detailInfo?.lastSale}
+              showTokenIcon={false}
+              iconSrc={props.tokenInfo?.iconSrc}
+              tokenName={props.tokenInfo?.tokenName}
+              attributes={{
+                py: "$4",
+              }}
+            />
+          </Show>
+
           {/* ==== CTA */}
           <Show when={props.type === "listForSale"}>
             <Button
@@ -203,7 +231,6 @@ export default function NftDetail(props: NftDetailProps) {
                   size="sm"
                   intent="text"
                   leftIcon="fireLine"
-                  attributes={{ width: "$full" }}
                   onClick={() => (props as ListForSale).onBurn?.()}
                 >
                   Burn

diff --git a/src/ui/nft-detail/nft-detail.types.tsx b/src/ui/nft-detail/nft-detail.types.tsx
@@ -6,6 +6,11 @@ import type { NftDetailActivityListProps } from "../nft-detail-activity-list/nft
 
 export type DetailType = "listForSale" | "makeOffer" | "buyNow" | "custom";
 
+export type TokenInfo = {
+  tokenName?: string;
+  iconSrc?: string;
+};
+
 interface BaseNftDetailProps extends BaseComponentProps {
   collectionName: string;
   name: string;
@@ -16,6 +21,8 @@ interface BaseNftDetailProps extends BaseComponentProps {
   tokensCount: number;
   ownerName: string;
   imgSrc: string;
+  price?: number;
+  tokenInfo?: TokenInfo;
   traits?: NftTraitListItemProps[];
   detailInfo?: NftDetailInfoProps;
   detailTopOffer?: NftDetailTopOfferProps;

diff --git a/src/ui/nft-fees/nft-fees.lite.tsx b/src/ui/nft-fees/nft-fees.lite.tsx
@@ -101,7 +101,7 @@ export default function NftFees(props: NftFeesProps) {
                   >
                     {item.feeName}
                   </Text>
-                  <Tooltip title={item?.feeName}>
+                  <Tooltip title={item?.desc}>
                     <Icon
                       name="informationLine"
                       size="$md"

diff --git a/src/ui/nft-mint/nft-mint.lite.tsx b/src/ui/nft-mint/nft-mint.lite.tsx
@@ -419,7 +419,7 @@ export default function NftMint(props: NftMintProps) {
             >{`${state.starsAmount} ${props.tokenName}`}</Text>
 
             <Show when={!!state.starsAmountPrice}>
-              <Text color="textSecondary">{`≈ $${state.starsAmountPrice}`}</Text>
+              <Text color="$textPlaceholder">{`≈ $${state.starsAmountPrice}`}</Text>
             </Show>
           </Stack>
         </Box>