>(null);
- const [props, setProps] = useState(window.xprops ?? {});
+ const { props } = useProps();
const {
renderToSelector,
buttonStyle,
@@ -54,13 +54,7 @@ export function CommitButton() {
context,
...commitWidgetProps
} = props;
- useEffect(() => {
- if ("xprops" in window && typeof window.xprops.onProps === "function") {
- window.xprops.onProps((newProps: typeof props) => {
- setProps({ ...newProps });
- });
- }
- }, []);
+
const modalMargin = props.modalMargin || "2%";
const sendDimensions = useCallback(() => {
if (
@@ -167,7 +161,12 @@ export function CommitButton() {
return "iframe";
}
- if (yup.mixed().oneOf(["iframe", "popup"]).isValidSync(context)) {
+ if (
+ yup
+ .mixed<"iframe" | "popup">()
+ .oneOf(["iframe", "popup"])
+ .isValidSync(context)
+ ) {
return context;
}
throw new Error(
diff --git a/src/components/widgets/roblox/Roblox.tsx b/src/components/widgets/roblox/Roblox.tsx
new file mode 100644
index 0000000..fcd8e36
--- /dev/null
+++ b/src/components/widgets/roblox/Roblox.tsx
@@ -0,0 +1,283 @@
+import {
+ ConfigId,
+ EnvironmentType,
+ RobloxWidget,
+ RobloxWidgetProps
+} from "@bosonprotocol/react-kit";
+import { useMemo } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { css } from "styled-components";
+import * as yup from "yup";
+
+import { useProps } from "../../../hooks/useProps";
+import { GlobalStyle } from "../styles";
+
+export const robloxPath = "/roblox";
+
+const roundnessObj = {
+ min: "min",
+ mid: "mid",
+ high: "high"
+} as const;
+const roundnessValues = Object.values(roundnessObj);
+const layoutObj = {
+ vertical: "vertical",
+ horizontal: "horizontal"
+} as const;
+const layoutValues = Object.values(layoutObj);
+const colorObj = {
+ green: "green",
+ white: "white",
+ black: "black"
+} as const;
+const colorValues = Object.values(colorObj);
+const showProductsPreloginObj = {
+ true: "true",
+ false: "false"
+} as const;
+const showProductsPreloginValues = Object.values(showProductsPreloginObj);
+type ConfigProps = Omit<
+ RobloxWidgetProps["configProps"],
+ | "roundness"
+ | "theme"
+ | "layout"
+ | "showProductsPreLogin"
+ | "backendOrigin"
+ | "walletConnectProjectId"
+ | "withMagicLink"
+ | "sendDeliveryInfoThroughXMTP"
+ | "raiseDisputeForExchangeUrl"
+> & {
+ sendDeliveryInfoThroughXMTP?: NonNullable<
+ RobloxWidgetProps["configProps"]["sendDeliveryInfoThroughXMTP"]
+ >;
+ raiseDisputeForExchangeUrl?: NonNullable<
+ RobloxWidgetProps["configProps"]["raiseDisputeForExchangeUrl"]
+ >;
+};
+const getTestThatItsAFunction = (field: string) =>
+ [
+ "is-function",
+ `'${field}' must be a function`,
+ (value: unknown) => {
+ return value === undefined ? true : typeof value === "function";
+ }
+ ] as const;
+export function Roblox() {
+ const { props } = useProps();
+ const { roundness, color, configProps, showProductsPrelogin, step3, layout } =
+ props;
+ const validatedConfigProps = useMemo(() => {
+ const configPropsSchema: yup.ObjectSchema
= yup.object({
+ sellerId: yup.string().required(),
+ raiseDisputeForExchangeUrl: yup.string().optional(),
+ configId: yup.mixed().required(),
+ envName: yup.mixed().required(),
+ sendDeliveryInfoThroughXMTP: yup.boolean().optional(),
+ ipfsGateway: yup.string().optional(),
+ defaultCurrencyTicker: yup.string().optional(),
+ defaultCurrencySymbol: yup.string().optional(),
+ deliveryInfoHandler: yup
+ .mixed>()
+ .test(...getTestThatItsAFunction("deliveryInfoHandler")),
+ redemptionSubmittedHandler: yup
+ .mixed>()
+ .test(...getTestThatItsAFunction("redemptionSubmittedHandler")),
+ redemptionConfirmedHandler: yup
+ .mixed>()
+ .test(...getTestThatItsAFunction("redemptionConfirmedHandler")),
+ postDeliveryInfoUrl: yup.string().optional(),
+ postRedemptionSubmittedUrl: yup.string().optional(),
+ metaTx: yup
+ .object({
+ apiKey: yup.string().required(),
+ apiIds: yup.string().required()
+ })
+ .optional()
+ .default(undefined),
+ deliveryInfo: yup
+ .object({
+ name: yup.string().required(),
+ streetNameAndNumber: yup.string().required(),
+ city: yup.string().required(),
+ state: yup.string().required(),
+ zip: yup.string().required(),
+ country: yup.string().required(),
+ email: yup.string().required(),
+ walletAddress: yup.string().required(),
+ phone: yup.string().required()
+ })
+ .optional()
+ .default(undefined),
+ ipfsImageGateway: yup.string().optional(),
+ minimumDisputePeriodInDays: yup.number().optional(),
+ minimumDisputeResolutionPeriodDays: yup.number().optional(),
+ postRedemptionConfirmedUrl: yup.string().optional(),
+ commitProxyAddress: yup.string().optional(),
+ openseaLinkToOriginalMainnetCollection: yup.string().optional(),
+ fairExchangePolicyRules: yup.string().optional(),
+ externalConnectedChainId: yup.number().optional(),
+ buyerSellerAgreementTemplate: yup.string().optional(),
+ sellerCurationListBetweenCommas: yup.string().optional(),
+ offerCurationListBetweenCommas: yup.string().optional(),
+ licenseTemplate: yup.string().optional(),
+ externalConnectedAccount: yup.string().optional(),
+ forcedAccount: yup.string().optional(),
+ parentOrigin: yup.string().optional(),
+ signatures: yup.array(yup.string().required()).optional(),
+ contactSellerForExchangeUrl: yup.string().optional(),
+ withOwnProducts: yup.mixed<"all" | "mine" | "custom">().optional(),
+ postDeliveryInfoHeaders: yup.object().optional(),
+ postRedemptionConfirmedHeaders: yup.object().optional(),
+ postRedemptionSubmittedHeaders: yup.object().optional(),
+ externalConnectedSigner: yup
+ .mixed>()
+ .optional(),
+ usePendingTransactions: yup.boolean().optional(),
+ enableCurationLists: yup.boolean().optional(),
+ withExternalConnectionProps: yup.boolean().optional(),
+ dateFormat: yup.string().optional(),
+ shortDateFormat: yup.string().optional(),
+ ipfsMetadataStorageUrl: yup.string().optional(),
+ ipfsProjectId: yup.string().optional(),
+ ipfsProjectSecret: yup.string().optional()
+ });
+ const validatedConfigProps = configPropsSchema.validateSync(configProps);
+ if (!validatedConfigProps) {
+ throw new Error(
+ `configProps is falsy ${JSON.stringify(roundnessValues)}`
+ );
+ }
+ return validatedConfigProps;
+ }, [configProps]);
+ const validatedStep3 = useMemo(() => {
+ const step3Schema: yup.ObjectSchema =
+ yup.object({
+ step3: yup.object({
+ titleForMobile: yup.string().required(),
+ title: yup.string().required(),
+ subtitle: yup.string().required(),
+ buttonText: yup.string().required(),
+ callback: yup
+ .mixed()
+ .test(...getTestThatItsAFunction("step3.callback"))
+ .required()
+ })
+ });
+ const validatedStep3 = step3Schema.validateSync({ step3 });
+ if (!validatedStep3) {
+ throw new Error(`step3 should is falsy ${JSON.stringify(step3)}`);
+ }
+ return validatedStep3;
+ }, [step3]);
+ const validatedRoundness = useMemo(() => {
+ const validatedRoundness = yup
+ .mixed<(typeof roundnessValues)[number]>()
+ .oneOf(roundnessValues)
+ .validateSync(roundness);
+ if (!validatedRoundness) {
+ throw new Error(
+ `roundness should be one of ${JSON.stringify(
+ roundnessValues
+ )}. Received: ${roundness}`
+ );
+ }
+ return validatedRoundness;
+ }, [roundness]);
+ const validatedLayout = useMemo(() => {
+ const validatedLayout = yup
+ .mixed<(typeof layoutValues)[number]>()
+ .oneOf(layoutValues)
+ .validateSync(layout);
+ if (!validatedLayout) {
+ throw new Error(
+ `layout should be one of ${JSON.stringify(
+ layoutValues
+ )}. Received: ${layout}`
+ );
+ }
+ return validatedLayout;
+ }, [layout]);
+ const validatedColor = useMemo(() => {
+ const validatedColor = yup
+ .mixed<(typeof colorValues)[number]>()
+ .oneOf(colorValues)
+ .validateSync(color);
+ if (!validatedColor) {
+ throw new Error(
+ `color should be one of ${JSON.stringify(
+ colorValues
+ )}. Received: ${color}`
+ );
+ }
+ return validatedColor;
+ }, [color]);
+ const validatedShowProductsPrelogin = useMemo(() => {
+ const validatedShowProductsPrelogin = yup
+ .mixed<(typeof showProductsPreloginValues)[number]>()
+ .oneOf(showProductsPreloginValues)
+ .validateSync(showProductsPrelogin);
+ if (!validatedShowProductsPrelogin) {
+ throw new Error(
+ `showProductsPrelogin should be one of ${JSON.stringify(
+ showProductsPreloginValues
+ )}. Received: ${showProductsPrelogin}`
+ );
+ }
+ return validatedShowProductsPrelogin;
+ }, [showProductsPrelogin]);
+ return (
+ (
+ <>
+ something went wrong
+ {error.message}
+
+ )}
+ onError={(error) => {
+ console.error("error in Roblox widget", error);
+ }}
+ >
+
+
+
+ );
+}
diff --git a/src/components/widgets/styles.tsx b/src/components/widgets/styles.tsx
index 9eb9e5f..89d3bc8 100644
--- a/src/components/widgets/styles.tsx
+++ b/src/components/widgets/styles.tsx
@@ -1,7 +1,8 @@
import styled, {
createGlobalStyle,
css,
- CSSProperties
+ CSSProperties,
+ FlattenSimpleInterpolation
} from "styled-components";
export const Pre = styled.pre`
@@ -23,7 +24,20 @@ export const Widget = styled.div`
export const GlobalStyle = createGlobalStyle<{
$bodyOverflow?: CSSProperties["overflow"] | null | undefined;
+ $color?: CSSProperties["color"] | null | undefined;
+ $htmlBodyRootStyle?: FlattenSimpleInterpolation;
+ $htmlStyle?: FlattenSimpleInterpolation;
+ $bodyStyle?: FlattenSimpleInterpolation;
+ $rootStyle?: FlattenSimpleInterpolation;
}>`
+html {
+ ${({ $color }) =>
+ $color &&
+ css`
+ color: ${$color};
+ `}
+ ${({ $htmlStyle }) => $htmlStyle}
+}
html, body, #root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -34,6 +48,12 @@ export const GlobalStyle = createGlobalStyle<{
margin: 0;
padding: 0;
font-style: normal;
+ ${({ $htmlBodyRootStyle }) => $htmlBodyRootStyle}
+ }
+ #root {
+ ${({ $rootStyle }) => {
+ return $rootStyle;
+ }}
}
body {
${({ $bodyOverflow }) =>
@@ -41,6 +61,7 @@ export const GlobalStyle = createGlobalStyle<{
css`
overflow: ${$bodyOverflow};
`}
+ ${({ $bodyStyle }) => $bodyStyle}
}
a,
@@ -64,6 +85,10 @@ export const GlobalStyle = createGlobalStyle<{
user-select: text;
}
+ * {
+ box-sizing: border-box;
+ }
+
* > small {
font-size: 65%;
margin: 0 0.5rem;
diff --git a/src/hooks/useProps.ts b/src/hooks/useProps.ts
new file mode 100644
index 0000000..adee863
--- /dev/null
+++ b/src/hooks/useProps.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+export const useProps = () => {
+ const [props, setProps] = useState(window.xprops ?? {});
+ useEffect(() => {
+ if ("xprops" in window && typeof window.xprops.onProps === "function") {
+ window.xprops.onProps((newProps: typeof props) => {
+ setProps({ ...newProps });
+ });
+ }
+ }, []);
+ return { props };
+};