wip

bosonprotocol · Jan 15, 2025 · 1068f76 · 1068f76
1 parent c6d9c4a
commit 1068f76
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 99 deletions.
diff --git a/...ct-kit/src/components/modal/components/common/OfferFullDescription/GeneralProductData.tsx b/...ct-kit/src/components/modal/components/common/OfferFullDescription/GeneralProductData.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useIsPhygital } from "../../../../../hooks/offer/useIsPhygital";
 import { breakpoint } from "../../../../../lib/ui/breakpoint";
@@ -21,6 +21,7 @@ import {
 } from "../detail/useGetOfferDetailData";
 import { Exchange } from "../../../../../types/exchange";
 import { PhygitalProduct } from "../detail/PhygitalProduct";
+import { getIsOfferRobloxGated } from "../../../../../lib/roblox/getIsOfferRobloxGated";
 
 const StyledPrice = styled(Price)`
   h3 {
@@ -71,6 +72,9 @@ export const GeneralProductData: React.FC<GeneralProductDataProps> = ({
     exchangePolicyCheckResult
   });
   const isPhygital = useIsPhygital({ offer });
+  const robloxGatedAssetId = useMemo(() => {
+    return getIsOfferRobloxGated({ offer });
+  }, [offer]);
   return (
     <Grid
       flexDirection="column"
@@ -108,11 +112,14 @@ export const GeneralProductData: React.FC<GeneralProductDataProps> = ({
       {offer.condition && (
         <>
           <TokenGatedGrid>
-            <Typography tag="h3">Token gated offer</Typography>
+            <Typography tag="h3">
+              {robloxGatedAssetId ? "Roblox gated offer" : "Token gated offer"}
+            </Typography>
             <TokenGatedItem
               offer={offer}
               isConditionMet={isConditionMet}
               onClickBuyOrSwap={onClickBuyOrSwap}
+              robloxGatedAssetId={robloxGatedAssetId}
             />
           </TokenGatedGrid>
           <Break />

diff --git a/packages/react-kit/src/components/modal/components/common/detail/DetailViewCore.tsx b/packages/react-kit/src/components/modal/components/common/detail/DetailViewCore.tsx
@@ -27,8 +27,7 @@ import { TokenGatedItem } from "./TokenGatedItem";
 import { DetailViewProps } from "./types";
 import { useGetOfferDetailData } from "./useGetOfferDetailData";
 import { SvgImage } from "../../../../ui/SvgImage";
-import { filterRobloxProduct } from "@bosonprotocol/roblox-sdk";
-import { isProductV1 } from "../../../../../lib/offer/filter";
+import { getIsOfferRobloxGated } from "../../../../../lib/roblox/getIsOfferRobloxGated";
 
 const StyledPrice = styled(Price)`
   h3 {
@@ -91,14 +90,7 @@ export const DetailViewCore = forwardRef<ElementRef<"div">, Props>(
     const closeDetailsRef = useRef(true);
     const isPhygital = useIsPhygital({ offer });
     const robloxGatedAssetId = useMemo(() => {
-      if (offer.metadata && isProductV1(offer) && offer.condition) {
-        return filterRobloxProduct(
-          offer.metadata,
-          offer.condition,
-          offer.condition?.tokenAddress
-        );
-      }
-      return "";
+      return getIsOfferRobloxGated({ offer });
     }, [offer]);
     return (
       <Widget>
@@ -131,78 +123,31 @@ export const DetailViewCore = forwardRef<ElementRef<"div">, Props>(
         {children}
         {offer.condition && (
           <>
-            {robloxGatedAssetId ? (
-              <DetailsSummary
-                summaryText="Roblox gated offer"
-                icon={
-                  isConditionMet ? (
-                    <LockOpen size={iconSize} />
-                  ) : (
-                    <Lock size={iconSize} />
-                  )
-                }
-                onSetOpen={(open) => {
-                  if (open && closeDetailsRef.current) {
-                    setDetailsOpen(false);
-                    closeDetailsRef.current = false;
-                  }
-                }}
-              >
-                {isConditionMet ? (
-                  <Grid
-                    flexDirection="column"
-                    alignItems="flex-start"
-                    style={{ display: "inline-block" }}
-                  >
-                    You can buy this item because you own
-                    <a
-                      href={`https://www.roblox.com/catalog/${robloxGatedAssetId}/`}
-                      style={{ margin: "0 0 0 4px" }}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      this roblox item
-                    </a>
-                  </Grid>
+            <DetailsSummary
+              summaryText={
+                robloxGatedAssetId ? "Roblox gated offer" : "Token gated offer"
+              }
+              icon={
+                isConditionMet ? (
+                  <LockOpen size={iconSize} />
                 ) : (
-                  <Grid flexDirection="column" alignItems="flex-start">
-                    You need &b
-                    <a
-                      href={`https://www.roblox.com/catalog/${robloxGatedAssetId}/`}
-                      style={{ margin: "0 0 0 4px" }}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      this roblox item
-                    </a>{" "}
-                    to buy this
-                  </Grid>
-                )}
-              </DetailsSummary>
-            ) : (
-              <DetailsSummary
-                summaryText="Token gated offer"
-                icon={
-                  isConditionMet ? (
-                    <LockOpen size={iconSize} />
-                  ) : (
-                    <Lock size={iconSize} />
-                  )
+                  <Lock size={iconSize} />
+                )
+              }
+              onSetOpen={(open) => {
+                if (open && closeDetailsRef.current) {
+                  setDetailsOpen(false);
+                  closeDetailsRef.current = false;
                 }
-                onSetOpen={(open) => {
-                  if (open && closeDetailsRef.current) {
-                    setDetailsOpen(false);
-                    closeDetailsRef.current = false;
-                  }
-                }}
-              >
-                <TokenGatedItem
-                  offer={offer}
-                  isConditionMet={isConditionMet}
-                  onClickBuyOrSwap={onClickBuyOrSwap}
-                />
-              </DetailsSummary>
-            )}
+              }}
+            >
+              <TokenGatedItem
+                offer={offer}
+                isConditionMet={isConditionMet}
+                onClickBuyOrSwap={onClickBuyOrSwap}
+                robloxGatedAssetId={robloxGatedAssetId}
+              />
+            </DetailsSummary>
           </>
         )}
         {isPhygital && (

diff --git a/packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx b/packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx
@@ -25,10 +25,13 @@ import ThemedButton from "../../../../ui/ThemedButton";
 import { BuyOrSwapContainer } from "./BuyOrSwapContainer";
 import { useDetailViewContext } from "./DetailViewProvider";
 import { OnClickBuyOrSwapHandler } from "./types";
+import { CONFIG } from "../../../../../lib/config/config";
+import { useRobloxGetItemDetails } from "../../../../../hooks/roblox/useRobloxGetItemDetails";
 
-type Props = OnClickBuyOrSwapHandler & {
+type TokenGatedItemProps = OnClickBuyOrSwapHandler & {
   offer: Offer;
   isConditionMet: boolean;
+  robloxGatedAssetId: string | false;
 };
 
 const Wrapper = styled(Grid)`
@@ -61,8 +64,9 @@ const ActionText = ({ children }: { children: ReactNode }) => {
 export const TokenGatedItem = ({
   offer,
   isConditionMet,
-  onClickBuyOrSwap
-}: Props) => {
+  onClickBuyOrSwap,
+  robloxGatedAssetId
+}: TokenGatedItemProps) => {
   const { condition } = offer;
   const coreSDK = useCoreSDKWithContext();
   const { swapParams } = useDetailViewContext();
@@ -76,6 +80,9 @@ export const TokenGatedItem = ({
   const [erc1155Info, setErc1155Info] = useState("NFT");
 
   useEffect(() => {
+    if (!robloxGatedAssetId) {
+      return;
+    }
     (async () => {
       if (
         condition?.tokenAddress &&
@@ -117,7 +124,7 @@ export const TokenGatedItem = ({
         }
       }
     })();
-  }, [condition, coreSDK]);
+  }, [condition, coreSDK, robloxGatedAssetId]);
   const { tokenAddress } = condition ?? {};
 
   const ContractButton = (
@@ -132,6 +139,18 @@ export const TokenGatedItem = ({
       </ThemedButton>
     </a>
   );
+  const VisitButton = robloxGatedAssetId ? (
+    <a
+      href={CONFIG.roblox.getItemDetailsWebsite({ itemId: robloxGatedAssetId })}
+      target="_blank"
+      rel="noreferrer"
+      style={{ flex: 0 }}
+    >
+      <ThemedButton size="regular" themeVal="blankSecondary">
+        <ActionText>Visit</ActionText> <ArrowSquareUpRight size="16" />
+      </ThemedButton>
+    </a>
+  ) : null;
   const BuyButton = !condition ? null : condition.tokenType ===
     TokenType.FungibleToken ? (
     <BuyOrSwapContainer swapParams={swapParams} style={{ flex: 0 }}>
@@ -171,7 +190,11 @@ export const TokenGatedItem = ({
     ),
     [isConditionMet]
   );
-  const ActionButton = isConditionMet ? ContractButton : BuyButton;
+  const ActionButton = robloxGatedAssetId
+    ? VisitButton
+    : isConditionMet
+      ? ContractButton
+      : BuyButton;
   const { config } = useConfigContext();
   const chainId = config.chainId;
 
@@ -255,7 +278,12 @@ export const TokenGatedItem = ({
     },
     { enabled: !!(erc1155Uri && erc1155Uri[0] && tokenIdForImage) }
   );
-
+  const { data: { Name: RobloxItemName = "" } = {} } = useRobloxGetItemDetails({
+    itemId: robloxGatedAssetId || "",
+    options: {
+      enabled: !!robloxGatedAssetId
+    }
+  });
   const Icon = useMemo(() => {
     return (
       <>
@@ -265,9 +293,9 @@ export const TokenGatedItem = ({
             size={imageSize}
             currencies={[currency]}
           />
-        ) : erc721Image ? (
+        ) : erc721Image?.[0]?.[0] ? (
           <ErcImage src={erc721Image[0][0]} alt="erc721" />
-        ) : erc1155Image ? (
+        ) : erc1155Image?.[0]?.[0] ? (
           <ErcImage src={erc1155Image[0][0]} alt="erc1155" />
         ) : null}
       </>
@@ -321,7 +349,8 @@ export const TokenGatedItem = ({
       flexWrap="wrap"
       gap="1rem"
     >
-      {condition.tokenType === TokenType.FungibleToken ? (
+      {condition.tokenType === TokenType.FungibleToken &&
+      !robloxGatedAssetId ? (
         <Condition>
           {condition.threshold && erc20Info?.decimals && (
             <div>
@@ -343,7 +372,8 @@ export const TokenGatedItem = ({
             <div>{erc20Info.symbol}</div>
           </Grid>
         </Condition>
-      ) : condition.tokenType === TokenType.NonFungibleToken ? (
+      ) : condition.tokenType === TokenType.NonFungibleToken &&
+        !robloxGatedAssetId ? (
         <>
           {condition.method === EvaluationMethod.Threshold ? (
             <Condition>
@@ -379,7 +409,8 @@ export const TokenGatedItem = ({
             <></>
           )}
         </>
-      ) : condition.tokenType === TokenType.MultiToken ? (
+      ) : condition.tokenType === TokenType.MultiToken &&
+        !robloxGatedAssetId ? (
         <>
           <Grid gap="1rem" justifyContent="flex-start" flexWrap="wrap">
             {Icon}
@@ -399,6 +430,26 @@ export const TokenGatedItem = ({
           </Grid>
           {ActionButton}
         </>
+      ) : robloxGatedAssetId ? (
+        <>
+          <Grid gap="1rem" justifyContent="flex-start" flexWrap="wrap">
+            {Icon}
+            <div>{condition.threshold}x</div>
+            <Grid
+              flexGrow={0}
+              flexShrink={0}
+              gap="1rem"
+              justifyContent="flex-start"
+              flex={0}
+              width="auto"
+            >
+              <Grid flexDirection="column" alignItems="flex-start">
+                {RobloxItemName || erc1155Info} {rangeText}
+              </Grid>
+            </Grid>
+          </Grid>
+          {ActionButton}
+        </>
       ) : (
         <></>
       )}

diff --git a/packages/react-kit/src/components/ui/ThemedButton.tsx b/packages/react-kit/src/components/ui/ThemedButton.tsx
@@ -159,7 +159,7 @@ export const bosonButtonThemes = () => {
       hover: {
         borderColor: colors.violet,
         background: colors.border,
-        color: colors.black
+        color: getCssVar("--main-text-color")
       }
     },
     blankSecondaryOutline: {
@@ -170,7 +170,7 @@ export const bosonButtonThemes = () => {
       hover: {
         borderColor: colors.violet,
         background: colors.border,
-        color: colors.black
+        color: getCssVar("--main-text-color")
       }
     },
     blankOutline: {
@@ -206,7 +206,7 @@ export const bosonButtonThemes = () => {
       }
     },
     warning: {
-      color: colors.black,
+      color: getCssVar("--main-text-color"),
       borderColor: colors.orange,
       borderWidth: 1,
       borderRadius: getCssVar("--button-border-radius"),
@@ -216,7 +216,7 @@ export const bosonButtonThemes = () => {
       }
     },
     escalate: {
-      color: colors.black,
+      color: getCssVar("--main-text-color"),
       background: colors.orange,
       borderColor: colors.orange,
       borderWidth: 1,
@@ -228,7 +228,7 @@ export const bosonButtonThemes = () => {
       }
     },
     accentFill: {
-      color: colors.black,
+      color: getCssVar("--main-text-color"),
       background: colors.violet,
       borderColor: "transparent",
       borderWidth: 1,