decentraland-ui2 0.40.0 → 0.40.1-19236027142.commit-389b58d

package/dist/components/CreditsToggle/CreditsToggle.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CreditsToggleProps } from "./CreditsToggle.types";
+declare const CreditsToggle: React.FC<CreditsToggleProps>;
+export { CreditsToggle };

package/dist/components/CreditsToggle/CreditsToggle.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import Lottie from "lottie-react";
+import toggleAnimation from "./toggleAnimation.json";
+import { formatEther } from "../../utils/format";
+import { CreditsIcon } from "../Icon/CreditsIcon";
+import { AnimationContainer, Container, LearnMoreButton, LeftSection, PopupContainer, StyledAmount, StyledNumber, StyledSwitch, StyledText, } from "./CreditsToggle.styled";
+const CreditsToggle = ({ totalCredits, assetPrice, useCredits, onToggle, className = "", showLearnMore = false, learnMoreUrl, label, showTooltip = true, tooltipContent, }) => {
+    const creditsToUseInEth = useMemo(() => {
+        if (!totalCredits) {
+            return "0";
+        }
+        const inEth = formatEther(totalCredits.toString());
+        const assetPriceInEth = assetPrice
+            ? formatEther(assetPrice.toString())
+            : "0";
+        return assetPrice
+            ? Math.min(Number(assetPriceInEth), Number(inEth)).toFixed(2)
+            : Number(inEth).toFixed(2);
+    }, [totalCredits, assetPrice]);
+    const handleToggleCredits = useCallback(() => {
+        onToggle(!useCredits);
+    }, [useCredits, onToggle]);
+    const handleLearnMore = useCallback(() => {
+        if (learnMoreUrl) {
+            window.open(learnMoreUrl, "_blank", "noopener noreferrer");
+        }
+    }, [learnMoreUrl]);
+    const hasCredits = totalCredits && BigInt(totalCredits) > BigInt(0);
+    // If user has no credits and showLearnMore is false, don't render anything
+    if (!hasCredits && !showLearnMore) {
+        return null;
+    }
+    // Show the GET CREDITS button
+    if (!hasCredits && showLearnMore) {
+        return (_jsxs(Container, { showLearnMore: true, className: className, children: [_jsxs(LeftSection, { children: [_jsx(CreditsIcon, { sx: { fontSize: 18 } }), _jsx(StyledText, { children: label || "Get with Credits" })] }), _jsx(StyledAmount, { children: _jsx(LearnMoreButton, { variant: "outlined", onClick: handleLearnMore, children: "Learn More" }) })] }));
+    }
+    return (_jsxs(Container, { active: useCredits, className: className, children: [_jsxs(LeftSection, { active: useCredits, children: [_jsx(AnimationContainer, { show: useCredits, children: useCredits && (_jsx(Lottie, { animationData: toggleAnimation, loop: false })) }), _jsx(StyledSwitch, { checked: useCredits, onChange: handleToggleCredits }), _jsx(StyledText, { active: useCredits, children: label || "Use Credits" })] }), _jsx(StyledAmount, { active: useCredits, children: showTooltip ? (_jsxs(PopupContainer, { title: tooltipContent || "Credits value", children: [_jsx(CreditsIcon, { sx: { fontSize: 18, marginLeft: 1.5 } }), _jsx(StyledNumber, { children: creditsToUseInEth })] })) : (_jsxs(PopupContainer, { children: [_jsx(CreditsIcon, { sx: { fontSize: 18, marginLeft: 1.5 } }), _jsx(StyledNumber, { children: creditsToUseInEth })] })) })] }));
+};
+CreditsToggle.displayName = "CreditsToggle";
+export { CreditsToggle };
+//# sourceMappingURL=CreditsToggle.js.map

package/dist/components/CreditsToggle/CreditsToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsToggle.js","sourceRoot":"","sources":["../../../src/components/CreditsToggle/CreditsToggle.tsx"],"names":[],"mappings":"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"}

package/dist/components/CreditsToggle/CreditsToggle.stories.d.ts

@@ -0,0 +1,12 @@
+import { CreditsToggle } from "./CreditsToggle";
+import type { Meta, StoryObj } from "@storybook/react";
+declare const meta: Meta<typeof CreditsToggle>;
+type Story = StoryObj<typeof CreditsToggle>;
+declare const WithCredits: Story;
+declare const Active: Story;
+declare const InsufficientCredits: Story;
+declare const NoCreditsWithLearnMore: Story;
+declare const NoCreditsHidden: Story;
+declare const CustomLabel: Story;
+export { WithCredits, Active, InsufficientCredits, NoCreditsWithLearnMore, NoCreditsHidden, CustomLabel, };
+export default meta;

package/dist/components/CreditsToggle/CreditsToggle.stories.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { CreditsToggle } from "./CreditsToggle";
+// Helper to convert ETH to Wei (avoiding ethers dependency)
+const parseEther = (value) => {
+    return (BigInt(value) * BigInt("1000000000000000000")).toString();
+};
+const meta = {
+    title: "Decentraland UI/CreditsToggle",
+    component: CreditsToggle,
+    tags: ["autodocs"],
+    argTypes: {
+        totalCredits: {
+            control: "text",
+            description: "Total credits available in wei",
+        },
+        assetPrice: {
+            control: "text",
+            description: "Price of the asset/item in wei",
+        },
+        useCredits: {
+            control: "boolean",
+            description: "Whether credits are currently being used",
+        },
+        showLearnMore: {
+            control: "boolean",
+            description: 'Show "Learn More" button instead of credits amount when user has no credits',
+        },
+        label: {
+            control: "text",
+            description: "Custom text for the toggle label",
+        },
+        showTooltip: {
+            control: "boolean",
+            description: "Show tooltip with credit value explanation",
+        },
+    },
+};
+// Interactive wrapper to handle state
+const InteractiveCreditsToggle = (args) => {
+    const [useCredits, setUseCredits] = useState(args.useCredits);
+    return (_jsx("div", { style: { maxWidth: "600px", padding: "20px" }, children: _jsx(CreditsToggle, { ...args, useCredits: useCredits, onToggle: setUseCredits }) }));
+};
+const WithCredits = {
+    render: (args) => _jsx(InteractiveCreditsToggle, { ...args }),
+    args: {
+        totalCredits: parseEther("100"),
+        assetPrice: parseEther("50"),
+        useCredits: false,
+        label: "Use Credits",
+        showTooltip: true,
+        tooltipContent: "Credits value",
+    },
+};
+const Active = {
+    render: (args) => _jsx(InteractiveCreditsToggle, { ...args }),
+    args: {
+        totalCredits: parseEther("100"),
+        assetPrice: parseEther("50"),
+        useCredits: true,
+        label: "Use Credits",
+        showTooltip: true,
+    },
+};
+const InsufficientCredits = {
+    render: (args) => _jsx(InteractiveCreditsToggle, { ...args }),
+    args: {
+        totalCredits: parseEther("10"),
+        assetPrice: parseEther("50"),
+        useCredits: false,
+        label: "Use Credits",
+        showTooltip: true,
+    },
+};
+const NoCreditsWithLearnMore = {
+    render: (args) => _jsx(InteractiveCreditsToggle, { ...args }),
+    args: {
+        totalCredits: "0",
+        assetPrice: parseEther("50"),
+        useCredits: false,
+        showLearnMore: true,
+        label: "Get with Credits",
+        learnMoreUrl: "https://decentraland.org/blog/announcements/marketplace-credits",
+    },
+};
+const NoCreditsHidden = {
+    render: (args) => _jsx(InteractiveCreditsToggle, { ...args }),
+    args: {
+        totalCredits: "0",
+        assetPrice: parseEther("50"),
+        useCredits: false,
+        showLearnMore: false,
+    },
+};
+const CustomLabel = {
+    render: (args) => _jsx(InteractiveCreditsToggle, { ...args }),
+    args: {
+        totalCredits: parseEther("75"),
+        assetPrice: parseEther("50"),
+        useCredits: false,
+        label: "Pagar con Créditos",
+        showTooltip: true,
+        tooltipContent: "Valor de los créditos",
+    },
+};
+export { WithCredits, Active, InsufficientCredits, NoCreditsWithLearnMore, NoCreditsHidden, CustomLabel, };
+// eslint-disable-next-line import/no-default-export
+export default meta;
+//# sourceMappingURL=CreditsToggle.stories.js.map

package/dist/components/CreditsToggle/CreditsToggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsToggle.stories.js","sourceRoot":"","sources":["../../../src/components/CreditsToggle/CreditsToggle.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/CreditsToggle/CreditsToggle.styled.d.ts

@@ -0,0 +1,52 @@
+declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    active?: boolean;
+    showLearnMore?: boolean;
+}, {}, {}>;
+declare const LeftSection: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    active?: boolean;
+}, {}, {}>;
+declare const StyledText: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & {
+    active?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const StyledAmount: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+} & {
+    active?: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const StyledNumber: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+declare const PopupContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const AnimationContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    show: boolean;
+}, {}, {}>;
+declare const LearnMoreButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "size"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledSwitch: import("@emotion/styled").StyledComponent<import("@mui/material").SwitchProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export { AnimationContainer, Container, LeftSection, LearnMoreButton, PopupContainer, StyledAmount, StyledNumber, StyledSwitch, StyledText, };

package/dist/components/CreditsToggle/CreditsToggle.styled.js

@@ -0,0 +1,117 @@
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+import { Box, Button as MuiButton, Switch as MuiSwitch } from "@mui/material";
+// TODO: Add credits color (#a0abff) to theme palette
+const CREDITS_COLOR = "#a0abff";
+const CREDITS_COLOR_TRANSPARENT = "rgba(160, 171, 255, 0.15)";
+const moveGradient = keyframes({
+    "0%": {
+        backgroundPosition: "300% 0%",
+    },
+    "100%": {
+        backgroundPosition: "0% 0%",
+    },
+});
+const Container = styled(Box)(({ theme, active, showLearnMore }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    padding: `${theme.spacing(0.5)} ${theme.spacing(2.25)}`,
+    paddingLeft: theme.spacing(0.5),
+    borderRadius: theme.spacing(1),
+    border: "1px solid",
+    borderColor: active ? CREDITS_COLOR : CREDITS_COLOR_TRANSPARENT,
+    transition: "all 0.2s ease",
+    marginBottom: theme.spacing(2),
+    position: "relative",
+    gap: showLearnMore ? theme.spacing(1.5) : 0,
+    ...(active
+        ? {}
+        : {
+            "&::before": {
+                content: '""',
+                position: "absolute",
+                inset: "-2px",
+                borderRadius: theme.spacing(1.25),
+                background: `linear-gradient(90deg, transparent, transparent, ${CREDITS_COLOR}, ${CREDITS_COLOR}, transparent, transparent)`,
+                backgroundSize: "300% 100%",
+                animation: `${moveGradient} 6s linear infinite`,
+                WebkitMask: `
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0)
+          `,
+                WebkitMaskComposite: "xor",
+                mask: `
+            linear-gradient(#fff 0 0) content-box,
+            linear-gradient(#fff 0 0)
+          `,
+                maskComposite: "exclude",
+                padding: "2px",
+                pointerEvents: "none",
+                zIndex: 1,
+            },
+        }),
+}));
+const LeftSection = styled(Box)(({ theme, active }) => ({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1.5),
+    paddingLeft: theme.spacing(1.5),
+    "& .MuiSwitch-root.MuiSwitch-sizeMedium": {
+        marginLeft: theme.spacing(-1.5),
+    },
+    ...(active && {
+        "& .MuiSwitch-thumb": {
+            backgroundColor: `${CREDITS_COLOR} !important`,
+        },
+        "& .Mui-checked + .MuiSwitch-track": {
+            backgroundColor: `${CREDITS_COLOR} !important`,
+        },
+    }),
+}));
+const StyledText = styled("span")(({ theme, active }) => ({
+    fontSize: "15px",
+    fontWeight: 500,
+    color: active ? CREDITS_COLOR : theme.palette.text.primary,
+    transition: "color 0.2s ease",
+}));
+const StyledAmount = styled("span")(({ theme, active }) => ({
+    fontSize: "15px",
+    color: active ? CREDITS_COLOR : theme.palette.text.primary,
+    transition: "color 0.2s ease",
+}));
+const StyledNumber = styled("span")({
+    fontWeight: 600,
+    color: CREDITS_COLOR,
+    cursor: "pointer",
+    transition: "color 0.2s ease",
+});
+const PopupContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+}));
+const AnimationContainer = styled(Box)(({ show }) => ({
+    position: "absolute",
+    left: "-175px",
+    bottom: "-200px",
+    width: "500px",
+    height: "500px",
+    opacity: show ? 1 : 0,
+    pointerEvents: "none",
+}));
+const LearnMoreButton = styled(MuiButton)(({ theme }) => ({
+    color: theme.palette.primary.main,
+    textTransform: "uppercase",
+}));
+const StyledSwitch = styled(MuiSwitch)({
+    "& .MuiSwitch-switchBase": {
+        "&:hover": {
+            backgroundColor: "transparent",
+        },
+    },
+});
+export { AnimationContainer, Container, LeftSection, LearnMoreButton, PopupContainer, StyledAmount, StyledNumber, StyledSwitch, StyledText, };
+//# sourceMappingURL=CreditsToggle.styled.js.map

package/dist/components/CreditsToggle/CreditsToggle.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsToggle.styled.js","sourceRoot":"","sources":["../../../src/components/CreditsToggle/CreditsToggle.styled.ts"],"names":[],"mappings":"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"}

package/dist/components/CreditsToggle/CreditsToggle.types.d.ts

@@ -0,0 +1,42 @@
+export type CreditsToggleProps = {
+    /**
+     * Total credits available in wei
+     */
+    totalCredits: string | number;
+    /**
+     * Price of the asset/item in wei
+     */
+    assetPrice: string;
+    /**
+     * Whether credits are currently being used
+     */
+    useCredits: boolean;
+    /**
+     * Callback when toggle changes
+     */
+    onToggle: (useCredits: boolean) => void;
+    /**
+     * Optional className for the container
+     */
+    className?: string;
+    /**
+     * Optional: Show "Learn More" button instead of credits amount when user has no credits
+     */
+    showLearnMore?: boolean;
+    /**
+     * Optional: URL for the "Learn More" button
+     */
+    learnMoreUrl?: string;
+    /**
+     * Optional: Custom text for the toggle label
+     */
+    label?: string;
+    /**
+     * Optional: Show tooltip with credit value explanation
+     */
+    showTooltip?: boolean;
+    /**
+     * Optional: Tooltip content
+     */
+    tooltipContent?: string;
+};

package/dist/components/CreditsToggle/CreditsToggle.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CreditsToggle.types.js.map

package/dist/components/CreditsToggle/CreditsToggle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditsToggle.types.js","sourceRoot":"","sources":["../../../src/components/CreditsToggle/CreditsToggle.types.ts"],"names":[],"mappings":""}

package/dist/components/CreditsToggle/index.d.ts

@@ -0,0 +1,2 @@
+export { CreditsToggle } from "./CreditsToggle";
+export type { CreditsToggleProps } from "./CreditsToggle.types";

package/dist/components/CreditsToggle/index.js

@@ -0,0 +1,2 @@
+export { CreditsToggle } from "./CreditsToggle";
+//# sourceMappingURL=index.js.map

package/dist/components/CreditsToggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CreditsToggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}