@xyo-network/react-xns 3.0.10

package/dist/browser/index.mjs

@@ -0,0 +1,276 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/EstimateName/EstimateNameTextField.tsx
+import { alpha, TextField, useTheme } from "@mui/material";
+import { MIN_DOMAIN_LENGTH, XnsNameHelper } from "@xyo-network/xns-record-payloadset-plugins";
+import React, { useState } from "react";
+var XnsEstimateNameTextField = /* @__PURE__ */ __name(({ maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, ...props }) => {
+  const theme = useTheme();
+  const [validLength, setValidLength] = useState(false);
+  const inputRef = React.useRef(null);
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    if (maskOutput) {
+      const value = event.target.value;
+      event.target.value = XnsNameHelper.mask(value);
+    }
+    onChangeProp?.(event);
+    if (inputRef.current) {
+      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH);
+    }
+  }, "handleChange");
+  const handleBlur = /* @__PURE__ */ __name((event) => {
+    if (maskOutput) {
+      const value = event.target.value;
+      event.target.value = XnsNameHelper.mask(value, {
+        maskStartEndHyphens: true
+      });
+    }
+    onBlurProp?.(event);
+  }, "handleBlur");
+  return /* @__PURE__ */ React.createElement(TextField, {
+    inputProps: {
+      style: {
+        color: validLength ? theme.palette.text.primary : alpha(theme.palette.text.primary, 0.5)
+      }
+    },
+    inputRef,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    ...props
+  });
+}, "XnsEstimateNameTextField");
+
+// src/components/XnsNameCapture/Errors.tsx
+import { Alert, Snackbar, useMediaQuery, useTheme as useTheme2 } from "@mui/material";
+import { FlexRow } from "@xylabs/react-flexbox";
+import React2 from "react";
+var XnsNameCaptureErrors = /* @__PURE__ */ __name(({ error, errorUi, resetError }) => {
+  const theme = useTheme2();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, errorUi === "toast" ? /* @__PURE__ */ React2.createElement(Snackbar, {
+    open: !!error,
+    message: error?.toString(),
+    autoHideDuration: 3e3,
+    onClose: /* @__PURE__ */ __name(() => resetError?.(), "onClose"),
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "center"
+    }
+  }, /* @__PURE__ */ React2.createElement(Alert, {
+    severity: "error",
+    sx: {
+      width: "100%",
+      display: isMobile && !error ? "none" : void 0,
+      visibility: error ? "visible" : "hidden"
+    }
+  }, error?.message)) : (() => {
+    return /* @__PURE__ */ React2.createElement(FlexRow, {
+      alignSelf: "stretch"
+    }, /* @__PURE__ */ React2.createElement(Alert, {
+      severity: "error",
+      sx: {
+        display: isMobile && !error ? "none" : void 0,
+        visibility: error ? "visible" : "hidden"
+      }
+    }, error?.message));
+  })());
+}, "XnsNameCaptureErrors");
+
+// src/components/XnsNameCapture/hooks/useXnsNameCaptureProviders.ts
+import { useMixpanel } from "@xylabs/react-mixpanel";
+import { useMemo } from "react";
+var useXnsNameCaptureProviders = /* @__PURE__ */ __name((props) => {
+  const mixpanel = useMixpanel();
+  return useMemo(() => ({
+    ...props,
+    mixpanel: props.mixpanel ?? mixpanel
+  }), [
+    props,
+    mixpanel
+  ]);
+}, "useXnsNameCaptureProviders");
+
+// src/components/XnsNameCapture/hooks/useXnsNameCaptureRouting.ts
+import { useMemo as useMemo2 } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+var useXnsNameCaptureRouting = /* @__PURE__ */ __name((props) => {
+  const [params] = useSearchParams();
+  const signatureParam = params.get("signature");
+  const signatureParamString = signatureParam ? `&signature=${encodeURIComponent(signatureParam)}` : "";
+  const navigate = useNavigate();
+  return useMemo2(() => ({
+    ...props,
+    navigate: props.navigate ?? ((to) => navigate(to)),
+    paramsString: signatureParamString
+  }), [
+    props,
+    signatureParamString
+  ]);
+}, "useXnsNameCaptureRouting");
+
+// src/components/XnsNameCapture/SecondaryLink.tsx
+import { ArrowForwardRounded } from "@mui/icons-material";
+import { Stack } from "@mui/material";
+import { LinkEx } from "@xylabs/react-link";
+import { XnsNameHelper as XnsNameHelper2 } from "@xyo-network/xns-record-payloadset-plugins";
+import React3 from "react";
+var XnsCaptureSecondaryLink = /* @__PURE__ */ __name(({ event = "Click to Reservation", funnel = "xns", mixpanel, navigate, onBuyName, paramsString = "", placement = "", setError, text = "Or make a free reservation", to = "/xns/reservation", userEvents, xnsName, ...props }) => {
+  return /* @__PURE__ */ React3.createElement(LinkEx, {
+    paddingX: 0,
+    color: "inherit",
+    style: {
+      textDecoration: "underline",
+      textUnderlineOffset: "5px"
+    },
+    onClick: /* @__PURE__ */ __name(async () => {
+      mixpanel?.track(event, {
+        Funnel: funnel,
+        Placement: placement
+      });
+      const formattedXnsName = `${xnsName}.xyo`;
+      const helper = XnsNameHelper2.fromString(formattedXnsName);
+      const [valid, errors] = await helper.validate();
+      if (valid) {
+        await userEvents?.userClick({
+          elementName: event,
+          elementType: "xns-cta"
+        });
+        navigate?.(`${to}?username=${xnsName}${paramsString}`);
+        await onBuyName?.(xnsName);
+      } else {
+        setError?.(new Error(errors.join(", ")));
+      }
+    }, "onClick"),
+    ...props
+  }, /* @__PURE__ */ React3.createElement(Stack, {
+    flexDirection: "row",
+    gap: 0.5,
+    alignItems: "center",
+    sx: {
+      cursor: "pointer"
+    }
+  }, text, /* @__PURE__ */ React3.createElement(ArrowForwardRounded, null)));
+}, "XnsCaptureSecondaryLink");
+
+// src/components/XnsNameCapture/XnsNameCapture.tsx
+import { KeyboardArrowRightRounded } from "@mui/icons-material";
+import { useMediaQuery as useMediaQuery2, useTheme as useTheme3 } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexCol, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { MIN_DOMAIN_LENGTH as MIN_DOMAIN_LENGTH2, XnsNameHelper as XnsNameHelper3 } from "@xyo-network/xns-record-payloadset-plugins";
+import React4, { useCallback, useState as useState2 } from "react";
+var XnsNameCapture = /* @__PURE__ */ __name(({ autoFocus = false, buttonText = "Buy My Name", children, defaultXnsName, errorUi = "alert", event = "Click to Checkout", funnel = "xns", mixpanel, mobileButtonText = "Buy", navigate, onBuyName: onBuyNameProp, paramsString = "", placement = "", showSecondary = false, to = "/xns/estimation", userEvents, ...props }) => {
+  const [xnsName, setXnsName] = useState2(() => defaultXnsName ?? "");
+  const [error, setError] = useState2();
+  const theme = useTheme3();
+  const isMobile = useMediaQuery2(theme.breakpoints.down("md"));
+  const buyDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH2;
+  const handleChange = /* @__PURE__ */ __name((event2) => {
+    const NsName = XnsNameHelper3.mask(event2.target.value);
+    setXnsName(NsName);
+    setError(void 0);
+  }, "handleChange");
+  const onBuyName = useCallback(async () => {
+    if (!xnsName) return;
+    mixpanel?.track(event, {
+      Funnel: funnel,
+      Placement: placement
+    });
+    const formattedXnsName = `${xnsName}.xyo`;
+    const helper = XnsNameHelper3.fromString(formattedXnsName);
+    const [valid, errors] = await helper.validate();
+    if (valid) {
+      await userEvents?.userClick({
+        elementName: event,
+        elementType: "xns-cta"
+      });
+      await onBuyNameProp?.(xnsName);
+      navigate?.(`${to}?username=${xnsName}${paramsString}`);
+    } else {
+      setError(new Error(errors.join(", ")));
+    }
+  }, [
+    event,
+    funnel,
+    mixpanel,
+    paramsString,
+    placement,
+    to,
+    userEvents,
+    xnsName
+  ]);
+  const onKeyDown = useCallback(async (event2) => {
+    if (event2.key === "Enter" && !buyDisabled) {
+      await onBuyName?.();
+    }
+  }, [
+    buyDisabled,
+    onBuyName
+  ]);
+  return /* @__PURE__ */ React4.createElement(
+    FlexCol,
+    {
+      gap: showSecondary ? 1.5 : 0,
+      alignItems: "center",
+      ...props
+    },
+    /* @__PURE__ */ React4.createElement(FlexRow2, {
+      gap: 1
+    }, /* @__PURE__ */ React4.createElement(XnsEstimateNameTextField, {
+      autoFocus,
+      label: "xNS Name",
+      variant: "outlined",
+      size: "small",
+      value: xnsName ?? "",
+      onKeyDown,
+      onChange: handleChange,
+      onBlur: handleChange
+    }), /* @__PURE__ */ React4.createElement(ButtonEx, {
+      disabled: buyDisabled,
+      variant: "contained",
+      color: "success",
+      endIcon: /* @__PURE__ */ React4.createElement(KeyboardArrowRightRounded, null),
+      onClick: onBuyName
+    }, isMobile ? mobileButtonText : buttonText)),
+    showSecondary === true ? /* @__PURE__ */ React4.createElement(XnsCaptureSecondaryLink, {
+      xnsName,
+      placement,
+      funnel,
+      setError
+    }) : null,
+    // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary
+    showSecondary ? showSecondary : null,
+    children,
+    /* @__PURE__ */ React4.createElement(XnsNameCaptureErrors, {
+      error,
+      errorUi,
+      resetError: /* @__PURE__ */ __name(() => setError(void 0), "resetError")
+    })
+  );
+}, "XnsNameCapture");
+
+// src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx
+import React5, { useMemo as useMemo3 } from "react";
+var XnsNameCaptureWithContext = /* @__PURE__ */ __name((props) => {
+  const routingProps = useXnsNameCaptureRouting(props);
+  const providersProps = useXnsNameCaptureProviders(routingProps);
+  const updatedProps = useMemo3(() => ({
+    ...props,
+    ...routingProps,
+    ...providersProps
+  }), [
+    providersProps
+  ]);
+  return /* @__PURE__ */ React5.createElement(XnsNameCapture, updatedProps);
+}, "XnsNameCaptureWithContext");
+export {
+  XnsCaptureSecondaryLink,
+  XnsEstimateNameTextField,
+  XnsNameCapture,
+  XnsNameCaptureErrors,
+  XnsNameCaptureWithContext,
+  useXnsNameCaptureProviders,
+  useXnsNameCaptureRouting
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/EstimateName/EstimateNameTextField.tsx","../../src/components/XnsNameCapture/Errors.tsx","../../src/components/XnsNameCapture/hooks/useXnsNameCaptureProviders.ts","../../src/components/XnsNameCapture/hooks/useXnsNameCaptureRouting.ts","../../src/components/XnsNameCapture/SecondaryLink.tsx","../../src/components/XnsNameCapture/XnsNameCapture.tsx","../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"sourcesContent":["import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'\nimport {\n  alpha, TextField, useTheme,\n} from '@mui/material'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport React, { useState } from 'react'\n\nexport interface XnsEstimateNameTextFieldProps {\n  maskOutput?: boolean\n}\n\nexport const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({\n  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, ...props\n}) => {\n  const theme = useTheme()\n  const [validLength, setValidLength] = useState(false)\n\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  // override onChange to mask the input and update the event value\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value)\n    }\n    onChangeProp?.(event)\n\n    if (inputRef.current) {\n      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH)\n    }\n  }\n\n  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })\n    }\n    onBlurProp?.(event)\n  }\n\n  return (\n    <TextField\n      inputProps={{ style: { color: validLength ? theme.palette.text.primary : alpha(theme.palette.text.primary, 0.5) } }}\n      inputRef={inputRef}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      {...props}\n    />\n  )\n}\n","import {\n  Alert, Snackbar, useMediaQuery, useTheme,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface XnsNameCaptureErrorsProps {\n  error?: Error\n  errorUi?: 'alert' | 'toast'\n  resetError?: () => void\n}\n\nexport const XnsNameCaptureErrors: React.FC<XnsNameCaptureErrorsProps> = ({\n  error, errorUi, resetError,\n}) => {\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  return (\n    <>\n      {(errorUi === 'toast')\n        ? (\n            <Snackbar\n              open={!!error}\n              message={error?.toString()}\n              autoHideDuration={3000}\n              onClose={() => resetError?.()}\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n            >\n              <Alert\n                severity=\"error\"\n                sx={{\n                  width: '100%', display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden',\n                }}\n              >\n                {error?.message}\n              </Alert>\n            </Snackbar>\n          )\n        : (() => {\n            // setTimeout(() => setError(undefined), 1500)\n            return (\n              <FlexRow alignSelf=\"stretch\">\n                <Alert\n                  severity=\"error\"\n                  sx={{ display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden' }}\n                >\n                  {error?.message}\n                </Alert>\n              </FlexRow>\n            )\n          })()}\n    </>\n  )\n}\n","import { useMixpanel } from '@xylabs/react-mixpanel'\nimport { useMemo } from 'react'\n\nimport type { XnsNameCaptureProps } from '../Props.ts'\n\nexport const useXnsNameCaptureProviders = (props: XnsNameCaptureProps) => {\n  const mixpanel = useMixpanel()\n\n  return useMemo(() => ({\n    ...props,\n    mixpanel: props.mixpanel ?? mixpanel,\n  }), [props, mixpanel])\n}\n","import { useMemo } from 'react'\nimport { useNavigate, useSearchParams } from 'react-router-dom'\n\nimport type { XnsNameCaptureProps } from '../Props.ts'\n\nexport const useXnsNameCaptureRouting = (props: XnsNameCaptureProps) => {\n  const [params] = useSearchParams()\n  const signatureParam = params.get('signature')\n  const signatureParamString = signatureParam ? `&signature=${encodeURIComponent(signatureParam)}` : ''\n\n  const navigate = useNavigate()\n\n  return useMemo(() => ({\n    ...props,\n    navigate: props.navigate ?? ((to: string) => navigate(to)),\n    paramsString: signatureParamString,\n  }), [props, signatureParamString])\n}\n","import { ArrowForwardRounded } from '@mui/icons-material'\nimport { Stack } from '@mui/material'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { Dispatch } from 'react'\nimport React from 'react'\n\nimport type {\n  XnsNameCaptureBuyCallbacks, XnsNameCaptureRoutingProps, XnsNameCaptureTrackingProps,\n} from './Props.ts'\n\nexport interface XnsCaptureSecondaryLinkProps extends XnsNameCaptureTrackingProps, XnsNameCaptureRoutingProps, XnsNameCaptureBuyCallbacks, LinkExProps {\n  event?: string\n  funnel?: string\n  placement?: string\n  setError?: Dispatch<Error | undefined>\n  text?: string\n  xnsName: string\n}\n\nexport const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({\n  event = 'Click to Reservation',\n  funnel = 'xns',\n  mixpanel,\n  navigate,\n  onBuyName,\n  paramsString = '',\n  placement = '',\n  setError,\n  text = 'Or make a free reservation',\n  to = '/xns/reservation',\n  userEvents,\n  xnsName,\n  ...props\n}) => {\n  return (\n    <LinkEx\n      paddingX={0}\n      color=\"inherit\"\n      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}\n      onClick={async () => {\n        mixpanel?.track(event, {\n          Funnel: funnel,\n          Placement: placement,\n        })\n        const formattedXnsName = `${xnsName}.xyo`\n        const helper = XnsNameHelper.fromString(formattedXnsName)\n        const [valid, errors] = await helper.validate()\n        if (valid) {\n          await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })\n          navigate?.(`${to}?username=${xnsName}${paramsString}`)\n          await onBuyName?.(xnsName)\n        } else {\n          setError?.(new Error(errors.join(', ')))\n        }\n      }}\n      {...props}\n    >\n      <Stack flexDirection=\"row\" gap={0.5} alignItems=\"center\" sx={{ cursor: 'pointer' }}>\n        {text}\n        <ArrowForwardRounded />\n      </Stack>\n    </LinkEx>\n  )\n}\n","import { KeyboardArrowRightRounded } from '@mui/icons-material'\nimport type { StandardTextFieldProps } from '@mui/material'\nimport { useMediaQuery, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { KeyboardEventHandler } from 'react'\nimport React, { useCallback, useState } from 'react'\n\nimport { XnsEstimateNameTextField } from '../EstimateName/index.ts'\nimport { XnsNameCaptureErrors } from './Errors.tsx'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsCaptureSecondaryLink } from './SecondaryLink.js'\n\nexport const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({\n  autoFocus = false,\n  buttonText = 'Buy My Name',\n  children,\n  defaultXnsName,\n  errorUi = 'alert',\n  event = 'Click to Checkout',\n  funnel = 'xns',\n  mixpanel,\n  mobileButtonText = 'Buy',\n  navigate,\n  onBuyName: onBuyNameProp,\n  paramsString = '',\n  placement = '',\n  showSecondary = false,\n  to = '/xns/estimation',\n  userEvents,\n  ...props\n}) => {\n  const [xnsName, setXnsName] = useState<string>(() => defaultXnsName ?? '')\n  const [error, setError] = useState<Error | undefined>()\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  const buyDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH\n\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    const NsName = XnsNameHelper.mask(event.target.value)\n    setXnsName(NsName)\n    setError(undefined)\n  }\n\n  const onBuyName = useCallback(async () => {\n    if (!xnsName) return\n\n    mixpanel?.track(event, {\n      Funnel: funnel,\n      Placement: placement,\n    })\n    const formattedXnsName = `${xnsName}.xyo`\n    const helper = XnsNameHelper.fromString(formattedXnsName)\n    const [valid, errors] = await helper.validate()\n    if (valid) {\n      await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })\n      await onBuyNameProp?.(xnsName)\n      navigate?.(`${to}?username=${xnsName}${paramsString}`)\n    } else {\n      setError(new Error(errors.join(', ')))\n    }\n  }, [event, funnel, mixpanel, paramsString, placement, to, userEvents, xnsName])\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {\n    if (event.key === 'Enter' && !buyDisabled) {\n      await onBuyName?.()\n    }\n  }, [buyDisabled, onBuyName])\n\n  return (\n    <FlexCol gap={showSecondary ? 1.5 : 0} alignItems=\"center\" {...props}>\n      <FlexRow gap={1}>\n        <XnsEstimateNameTextField\n          autoFocus={autoFocus}\n          label=\"xNS Name\"\n          variant=\"outlined\"\n          size=\"small\"\n          value={xnsName ?? ''}\n          onKeyDown={onKeyDown}\n          onChange={handleChange}\n          onBlur={handleChange}\n        />\n        <ButtonEx\n          disabled={buyDisabled}\n          variant=\"contained\"\n          color=\"success\"\n          endIcon={<KeyboardArrowRightRounded />}\n          onClick={onBuyName}\n        >\n          {isMobile ? mobileButtonText : buttonText}\n        </ButtonEx>\n      </FlexRow>\n      {(showSecondary === true)\n        ? (\n            <XnsCaptureSecondaryLink\n              xnsName={xnsName}\n              placement={placement}\n              funnel={funnel}\n              setError={setError}\n            />\n          )\n        : null}\n      {\n        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary\n        showSecondary ? showSecondary : null\n      }\n      {children}\n      <XnsNameCaptureErrors error={error} errorUi={errorUi} resetError={() => setError(undefined)} />\n    </FlexCol>\n  )\n}\n","import React, { useMemo } from 'react'\n\nimport { useXnsNameCaptureProviders, useXnsNameCaptureRouting } from './hooks/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsNameCapture } from './XnsNameCapture.tsx'\n\nexport const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {\n  const routingProps = useXnsNameCaptureRouting(props)\n  const providersProps = useXnsNameCaptureProviders(routingProps)\n\n  const updatedProps = useMemo<XnsNameCaptureProps>(() => ({\n    ...props,\n    ...routingProps,\n    ...providersProps,\n  }), [providersProps])\n\n  return (\n    <XnsNameCapture {...updatedProps} />\n  )\n}\n"],"mappings":"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","names":["alpha","TextField","useTheme","MIN_DOMAIN_LENGTH","XnsNameHelper","React","useState","XnsEstimateNameTextField","maskOutput","onChange","onChangeProp","onBlur","onBlurProp","props","theme","useTheme","validLength","setValidLength","useState","inputRef","React","useRef","handleChange","event","value","target","XnsNameHelper","mask","current","length","MIN_DOMAIN_LENGTH","handleBlur","maskStartEndHyphens","TextField","inputProps","style","color","palette","text","primary","alpha","Alert","Snackbar","useMediaQuery","useTheme","FlexRow","React","XnsNameCaptureErrors","error","errorUi","resetError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","React","Snackbar","open","message","toString","autoHideDuration","onClose","anchorOrigin","vertical","horizontal","Alert","severity","sx","width","display","undefined","visibility","FlexRow","alignSelf","useMixpanel","useMemo","useXnsNameCaptureProviders","props","mixpanel","useMixpanel","useMemo","useMemo","useNavigate","useSearchParams","useXnsNameCaptureRouting","props","params","useSearchParams","signatureParam","get","signatureParamString","encodeURIComponent","navigate","useNavigate","useMemo","to","paramsString","ArrowForwardRounded","Stack","LinkEx","XnsNameHelper","React","XnsCaptureSecondaryLink","event","funnel","mixpanel","navigate","onBuyName","paramsString","placement","setError","text","to","userEvents","xnsName","props","React","LinkEx","paddingX","color","style","textDecoration","textUnderlineOffset","onClick","track","Funnel","Placement","formattedXnsName","helper","XnsNameHelper","fromString","valid","errors","validate","userClick","elementName","elementType","Error","join","Stack","flexDirection","gap","alignItems","sx","cursor","ArrowForwardRounded","KeyboardArrowRightRounded","useMediaQuery","useTheme","ButtonEx","FlexCol","FlexRow","MIN_DOMAIN_LENGTH","XnsNameHelper","React","useCallback","useState","XnsNameCapture","autoFocus","buttonText","children","defaultXnsName","errorUi","event","funnel","mixpanel","mobileButtonText","navigate","onBuyName","onBuyNameProp","paramsString","placement","showSecondary","to","userEvents","props","xnsName","setXnsName","useState","error","setError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","buyDisabled","length","MIN_DOMAIN_LENGTH","handleChange","NsName","XnsNameHelper","mask","target","value","undefined","useCallback","track","Funnel","Placement","formattedXnsName","helper","fromString","valid","errors","validate","userClick","elementName","elementType","Error","join","onKeyDown","key","React","FlexCol","gap","alignItems","FlexRow","XnsEstimateNameTextField","label","variant","size","onChange","onBlur","ButtonEx","disabled","color","endIcon","KeyboardArrowRightRounded","onClick","XnsCaptureSecondaryLink","XnsNameCaptureErrors","resetError","React","useMemo","XnsNameCaptureWithContext","props","routingProps","useXnsNameCaptureRouting","providersProps","useXnsNameCaptureProviders","updatedProps","useMemo","React","XnsNameCapture"]}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@xyo-network/react-xns",
+  "version": "3.0.10",
+  "description": "Common React library for all XYO projects that use React",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "homepage": "https://xyo.network",
+  "bugs": {
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues",
+    "email": "support@xyo.network"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "license": "LGPL-3.0-only",
+  "author": {
+    "name": "XYO Development Team",
+    "email": "support@xyo.network",
+    "url": "https://xyo.network"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
+      },
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "module": "dist/browser/index.mjs",
+  "types": "dist/browser/index.d.ts",
+  "scripts": {
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\"",
+    "lint-pkg": "npmPkgJsonLint ."
+  },
+  "dependencies": {
+    "@xylabs/pixel": "^2.0.1",
+    "@xylabs/react-button": "^4.2.5",
+    "@xylabs/react-flexbox": "^4.2.5",
+    "@xylabs/react-link": "^4.2.5",
+    "@xylabs/react-mixpanel": "^4.2.5",
+    "@xyo-network/xns-record-payloadset-plugins": "^3.0.17",
+    "mixpanel-browser": "^2.55.1"
+  },
+  "devDependencies": {
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
+    "@storybook/react": "^8.2.9",
+    "@types/mixpanel-browser": "^2.50.0",
+    "@xylabs/ts-scripts-yarn3": "^4.0.7",
+    "@xylabs/tsconfig-react": "^4.0.7",
+    "@xyo-network/react-storybook": "^3.0.10",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.1",
+    "storybook": "^8.2.9",
+    "typescript": "^5.5.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/styles": "^5",
+    "@xylabs/pixel": "^2",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-helmet": "^6",
+    "react-router-dom": "^6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "docs": "dist/docs.json"
+}

package/src/components/EstimateName/EstimateNameTextField.stories.tsx

@@ -0,0 +1,15 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { XnsEstimateNameTextField } from './EstimateNameTextField.tsx'
+
+export default { title: 'modules/xns/XnsNameEstimateTextField' } as Meta
+
+const Template: StoryFn<typeof XnsEstimateNameTextField> = (args) => {
+  return <XnsEstimateNameTextField {...args}></XnsEstimateNameTextField>
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/components/EstimateName/EstimateNameTextField.tsx

@@ -0,0 +1,50 @@
+import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'
+import {
+  alpha, TextField, useTheme,
+} from '@mui/material'
+import { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'
+import React, { useState } from 'react'
+
+export interface XnsEstimateNameTextFieldProps {
+  maskOutput?: boolean
+}
+
+export const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({
+  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, ...props
+}) => {
+  const theme = useTheme()
+  const [validLength, setValidLength] = useState(false)
+
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  // override onChange to mask the input and update the event value
+  const handleChange: StandardTextFieldProps['onChange'] = (event) => {
+    if (maskOutput) {
+      const value = event.target.value
+      event.target.value = XnsNameHelper.mask(value)
+    }
+    onChangeProp?.(event)
+
+    if (inputRef.current) {
+      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH)
+    }
+  }
+
+  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {
+    if (maskOutput) {
+      const value = event.target.value
+      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })
+    }
+    onBlurProp?.(event)
+  }
+
+  return (
+    <TextField
+      inputProps={{ style: { color: validLength ? theme.palette.text.primary : alpha(theme.palette.text.primary, 0.5) } }}
+      inputRef={inputRef}
+      onBlur={handleBlur}
+      onChange={handleChange}
+      {...props}
+    />
+  )
+}

package/src/components/EstimateName/index.ts

@@ -0,0 +1 @@
+export * from './EstimateNameTextField.tsx'

package/src/components/XnsNameCapture/Errors.tsx

@@ -0,0 +1,55 @@
+import {
+  Alert, Snackbar, useMediaQuery, useTheme,
+} from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+import React from 'react'
+
+export interface XnsNameCaptureErrorsProps {
+  error?: Error
+  errorUi?: 'alert' | 'toast'
+  resetError?: () => void
+}
+
+export const XnsNameCaptureErrors: React.FC<XnsNameCaptureErrorsProps> = ({
+  error, errorUi, resetError,
+}) => {
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+
+  return (
+    <>
+      {(errorUi === 'toast')
+        ? (
+            <Snackbar
+              open={!!error}
+              message={error?.toString()}
+              autoHideDuration={3000}
+              onClose={() => resetError?.()}
+              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+            >
+              <Alert
+                severity="error"
+                sx={{
+                  width: '100%', display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden',
+                }}
+              >
+                {error?.message}
+              </Alert>
+            </Snackbar>
+          )
+        : (() => {
+            // setTimeout(() => setError(undefined), 1500)
+            return (
+              <FlexRow alignSelf="stretch">
+                <Alert
+                  severity="error"
+                  sx={{ display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden' }}
+                >
+                  {error?.message}
+                </Alert>
+              </FlexRow>
+            )
+          })()}
+    </>
+  )
+}

package/src/components/XnsNameCapture/Props.ts

@@ -0,0 +1,50 @@
+import type { UserEventHandler } from '@xylabs/pixel'
+import type { FlexBoxProps } from '@xylabs/react-flexbox'
+import type { Mixpanel } from 'mixpanel-browser'
+import type { ReactNode } from 'react'
+import type { To } from 'react-router-dom'
+
+export interface XnsNameCaptureBuyCallbacks {
+  onBuyName?: (name: string) => Promise<void>
+}
+
+/**
+ * Trackers for user actions
+ */
+export interface XnsNameCaptureTrackingProps {
+  event?: string
+  funnel?: string
+  mixpanel?: Mixpanel
+  userEvents?: UserEventHandler<Record<string, unknown>>
+}
+
+/**
+ * Properties derived from the route and used for navigation
+ */
+export interface XnsNameCaptureRoutingProps {
+  navigate?: (to: string) => void
+  paramsString?: string
+  to?: To
+}
+
+/**
+ * Base properties for the XnsNameCapture component related to the UI and Events
+ */
+export interface XnsNameCaptureBaseProps {
+  autoFocus?: boolean
+  buttonText?: string
+  defaultXnsName?: string
+  errorUi?: 'alert' | 'toast'
+  mobileButtonText?: string
+  placement?: string
+  showSecondary?: boolean | ReactNode
+}
+
+export interface XnsNameCaptureProps extends XnsNameCaptureBaseProps,
+  XnsNameCaptureTrackingProps,
+  XnsNameCaptureBuyCallbacks,
+  XnsNameCaptureRoutingProps,
+  FlexBoxProps
+{}
+
+export type WithXnsCapture<T> = T & { XnsCapture?: React.FC<XnsNameCaptureProps> }

package/src/components/XnsNameCapture/SecondaryLink.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { XnsCaptureSecondaryLink } from './SecondaryLink.tsx'
+
+export default { title: 'modules/xns/XnsCaptureSecondaryLink' } as Meta
+
+const Template: StoryFn<typeof XnsCaptureSecondaryLink> = (args) => {
+  return <XnsCaptureSecondaryLink {...args}></XnsCaptureSecondaryLink>
+}
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithOnBuyName = Template.bind({})
+WithOnBuyName.args = { xnsName: 'testing123', onBuyName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
+
+export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/SecondaryLink.tsx

@@ -0,0 +1,66 @@
+import { ArrowForwardRounded } from '@mui/icons-material'
+import { Stack } from '@mui/material'
+import type { LinkExProps } from '@xylabs/react-link'
+import { LinkEx } from '@xylabs/react-link'
+import { XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'
+import type { Dispatch } from 'react'
+import React from 'react'
+
+import type {
+  XnsNameCaptureBuyCallbacks, XnsNameCaptureRoutingProps, XnsNameCaptureTrackingProps,
+} from './Props.ts'
+
+export interface XnsCaptureSecondaryLinkProps extends XnsNameCaptureTrackingProps, XnsNameCaptureRoutingProps, XnsNameCaptureBuyCallbacks, LinkExProps {
+  event?: string
+  funnel?: string
+  placement?: string
+  setError?: Dispatch<Error | undefined>
+  text?: string
+  xnsName: string
+}
+
+export const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({
+  event = 'Click to Reservation',
+  funnel = 'xns',
+  mixpanel,
+  navigate,
+  onBuyName,
+  paramsString = '',
+  placement = '',
+  setError,
+  text = 'Or make a free reservation',
+  to = '/xns/reservation',
+  userEvents,
+  xnsName,
+  ...props
+}) => {
+  return (
+    <LinkEx
+      paddingX={0}
+      color="inherit"
+      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}
+      onClick={async () => {
+        mixpanel?.track(event, {
+          Funnel: funnel,
+          Placement: placement,
+        })
+        const formattedXnsName = `${xnsName}.xyo`
+        const helper = XnsNameHelper.fromString(formattedXnsName)
+        const [valid, errors] = await helper.validate()
+        if (valid) {
+          await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })
+          navigate?.(`${to}?username=${xnsName}${paramsString}`)
+          await onBuyName?.(xnsName)
+        } else {
+          setError?.(new Error(errors.join(', ')))
+        }
+      }}
+      {...props}
+    >
+      <Stack flexDirection="row" gap={0.5} alignItems="center" sx={{ cursor: 'pointer' }}>
+        {text}
+        <ArrowForwardRounded />
+      </Stack>
+    </LinkEx>
+  )
+}