@xyo-network/react-xns 3.0.10 → 3.0.12

package/dist/browser/components/XnsNameCapture/Props.d.ts

@@ -4,7 +4,7 @@ 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>;
+    onCaptureName?: (name: string) => Promise<void>;
 }
 export interface XnsNameCaptureTrackingProps {
     event?: string;

package/dist/browser/components/XnsNameCapture/Props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/Props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAE1C,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAC5C;AAKD,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,UAAU,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;CACvD;AAKD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,EAAE,CAAA;CACR;AAKD,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACpC;AAED,MAAM,WAAW,mBAAoB,SAAQ,uBAAuB,EAClE,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,YAAY;CACZ;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;CAAE,CAAA"}
+{"version":3,"file":"Props.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/Props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAA;AAE1C,MAAM,WAAW,0BAA0B;IACzC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;CAChD;AAKD,MAAM,WAAW,2BAA2B;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAA;IACnB,UAAU,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;CACvD;AAKD,MAAM,WAAW,0BAA0B;IACzC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,EAAE,CAAC,EAAE,EAAE,CAAA;CACR;AAKD,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CACpC;AAED,MAAM,WAAW,mBAAoB,SAAQ,uBAAuB,EAClE,2BAA2B,EAC3B,0BAA0B,EAC1B,0BAA0B,EAC1B,YAAY;CACZ;AAEF,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAA;CAAE,CAAA"}

package/dist/browser/components/XnsNameCapture/XnsNameCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XnsNameCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/XnsNameCapture.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAIpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmGxD,CAAA"}
+{"version":3,"file":"XnsNameCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/XnsNameCapture.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAIpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAkGxD,CAAA"}

package/dist/browser/components/XnsNameCapture/hooks/useXnsNameCaptureProviders.d.ts

@@ -11,7 +11,7 @@ export declare const useXnsNameCaptureProviders: (props: XnsNameCaptureProps) =>
     event?: string;
     funnel?: string;
     userEvents?: import("@xylabs/pixel").UserEventHandler<Record<string, unknown>>;
-    onBuyName?: (name: string) => Promise<void>;
+    onCaptureName?: (name: string) => Promise<void>;
     navigate?: (to: string) => void;
     paramsString?: string;
     to?: import("react-router").To;

package/dist/browser/components/XnsNameCapture/hooks/useXnsNameCaptureRouting.d.ts

@@ -13,7 +13,7 @@ export declare const useXnsNameCaptureRouting: (props: XnsNameCaptureProps) => {
     funnel?: string;
     mixpanel?: import("mixpanel-browser").Mixpanel;
     userEvents?: import("@xylabs/pixel").UserEventHandler<Record<string, unknown>>;
-    onBuyName?: (name: string) => Promise<void>;
+    onCaptureName?: (name: string) => Promise<void>;
     to?: import("react-router-dom").To;
     background?: boolean;
     paper?: boolean;

package/dist/browser/index.mjs

@@ -115,7 +115,7 @@ 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 }) => {
+var XnsCaptureSecondaryLink = /* @__PURE__ */ __name(({ event = "Click to Reservation", funnel = "xns", mixpanel, navigate, onCaptureName, paramsString = "", placement = "", setError, text = "Or make a free reservation", to = "/xns/reservation", userEvents, xnsName, ...props }) => {
   return /* @__PURE__ */ React3.createElement(LinkEx, {
     paddingX: 0,
     color: "inherit",
@@ -137,7 +137,7 @@ var XnsCaptureSecondaryLink = /* @__PURE__ */ __name(({ event = "Click to Reserv
           elementType: "xns-cta"
         });
         navigate?.(`${to}?username=${xnsName}${paramsString}`);
-        await onBuyName?.(xnsName);
+        await onCaptureName?.(xnsName);
       } else {
         setError?.(new Error(errors.join(", ")));
       }
@@ -160,19 +160,19 @@ 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 }) => {
+var XnsNameCapture = /* @__PURE__ */ __name(({ autoFocus = false, buttonText = "Buy My Name", children, defaultXnsName, errorUi = "alert", event = "Click to Checkout", funnel = "xns", mixpanel, mobileButtonText = "Buy", navigate, onCaptureName: onCaptureNameProp, 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 captureDisabled = !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;
+  const onCaptureName = useCallback(async () => {
+    if (captureDisabled) return;
     mixpanel?.track(event, {
       Funnel: funnel,
       Placement: placement
@@ -185,7 +185,7 @@ var XnsNameCapture = /* @__PURE__ */ __name(({ autoFocus = false, buttonText = "
         elementName: event,
         elementType: "xns-cta"
       });
-      await onBuyNameProp?.(xnsName);
+      await onCaptureNameProp?.(xnsName);
       navigate?.(`${to}?username=${xnsName}${paramsString}`);
     } else {
       setError(new Error(errors.join(", ")));
@@ -201,12 +201,12 @@ var XnsNameCapture = /* @__PURE__ */ __name(({ autoFocus = false, buttonText = "
     xnsName
   ]);
   const onKeyDown = useCallback(async (event2) => {
-    if (event2.key === "Enter" && !buyDisabled) {
-      await onBuyName?.();
+    if (event2.key === "Enter" && !captureDisabled) {
+      await onCaptureName?.();
     }
   }, [
-    buyDisabled,
-    onBuyName
+    captureDisabled,
+    onCaptureName
   ]);
   return /* @__PURE__ */ React4.createElement(
     FlexCol,
@@ -227,11 +227,11 @@ var XnsNameCapture = /* @__PURE__ */ __name(({ autoFocus = false, buttonText = "
       onChange: handleChange,
       onBlur: handleChange
     }), /* @__PURE__ */ React4.createElement(ButtonEx, {
-      disabled: buyDisabled,
+      disabled: captureDisabled,
       variant: "contained",
       color: "success",
       endIcon: /* @__PURE__ */ React4.createElement(KeyboardArrowRightRounded, null),
-      onClick: onBuyName
+      onClick: onCaptureName
     }, isMobile ? mobileButtonText : buttonText)),
     showSecondary === true ? /* @__PURE__ */ React4.createElement(XnsCaptureSecondaryLink, {
       xnsName,

package/dist/browser/index.mjs.map

@@ -1 +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":";;;;AACA,SACEA,OAAOC,WAAWC,gBACb;AACP,SAASC,mBAAmBC,qBAAqB;AACjD,OAAOC,SAASC,gBAAgB;AAMzB,IAAMC,2BAAqF,wBAAC,EACjGC,aAAa,MAAMC,UAAUC,cAAcC,QAAQC,YAAY,GAAGC,MAAAA,MACnE;AACC,QAAMC,QAAQC,SAAAA;AACd,QAAM,CAACC,aAAaC,cAAAA,IAAkBC,SAAS,KAAA;AAE/C,QAAMC,WAAWC,MAAMC,OAAyB,IAAA;AAGhD,QAAMC,eAAmD,wBAACC,UAAAA;AACxD,QAAIf,YAAY;AACd,YAAMgB,QAAQD,MAAME,OAAOD;AAC3BD,YAAME,OAAOD,QAAQE,cAAcC,KAAKH,KAAAA;IAC1C;AACAd,mBAAea,KAAAA;AAEf,QAAIJ,SAASS,SAAS;AACpBX,qBAAeE,SAASS,QAAQJ,MAAMK,UAAUC,iBAAAA;IAClD;EACF,GAVyD;AAYzD,QAAMC,aAA+C,wBAACR,UAAAA;AACpD,QAAIf,YAAY;AACd,YAAMgB,QAAQD,MAAME,OAAOD;AAC3BD,YAAME,OAAOD,QAAQE,cAAcC,KAAKH,OAAO;QAAEQ,qBAAqB;MAAK,CAAA;IAC7E;AACApB,iBAAaW,KAAAA;EACf,GANqD;AAQrD,SACE,sBAAA,cAACU,WAAAA;IACCC,YAAY;MAAEC,OAAO;QAAEC,OAAOpB,cAAcF,MAAMuB,QAAQC,KAAKC,UAAUC,MAAM1B,MAAMuB,QAAQC,KAAKC,SAAS,GAAA;MAAK;IAAE;IAClHpB;IACAR,QAAQoB;IACRtB,UAAUa;IACT,GAAGT;;AAGV,GAtCkG;;;ACXlG,SACE4B,OAAOC,UAAUC,eAAeC,YAAAA,iBAC3B;AACP,SAASC,eAAe;AACxB,OAAOC,YAAW;AAQX,IAAMC,uBAA4D,wBAAC,EACxEC,OAAOC,SAASC,WAAU,MAC3B;AACC,QAAMC,QAAQC,UAAAA;AACd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAA,CAAA;AAEtD,SACE,gBAAAC,OAAA,cAAAA,OAAA,UAAA,MACIR,YAAY,UAER,gBAAAQ,OAAA,cAACC,UAAAA;IACCC,MAAM,CAAC,CAACX;IACRY,SAASZ,OAAOa,SAAAA;IAChBC,kBAAkB;IAClBC,SAAS,6BAAMb,aAAAA,GAAN;IACTc,cAAc;MAAEC,UAAU;MAAUC,YAAY;IAAS;KAEzD,gBAAAT,OAAA,cAACU,OAAAA;IACCC,UAAS;IACTC,IAAI;MACFC,OAAO;MAAQC,SAAUlB,YAAY,CAACL,QAAS,SAASwB;MAAWC,YAAYzB,QAAQ,YAAY;IACrG;KAECA,OAAOY,OAAAA,CAAAA,KAIb,MAAA;AAEC,WACE,gBAAAH,OAAA,cAACiB,SAAAA;MAAQC,WAAU;OACjB,gBAAAlB,OAAA,cAACU,OAAAA;MACCC,UAAS;MACTC,IAAI;QAAEE,SAAUlB,YAAY,CAACL,QAAS,SAASwB;QAAWC,YAAYzB,QAAQ,YAAY;MAAS;OAElGA,OAAOY,OAAAA,CAAAA;EAIhB,GAAA,CAAA;AAGV,GA1CyE;;;ACZzE,SAASgB,mBAAmB;AAC5B,SAASC,eAAe;AAIjB,IAAMC,6BAA6B,wBAACC,UAAAA;AACzC,QAAMC,WAAWC,YAAAA;AAEjB,SAAOC,QAAQ,OAAO;IACpB,GAAGH;IACHC,UAAUD,MAAMC,YAAYA;EAC9B,IAAI;IAACD;IAAOC;GAAS;AACvB,GAP0C;;;ACL1C,SAASG,WAAAA,gBAAe;AACxB,SAASC,aAAaC,uBAAuB;AAItC,IAAMC,2BAA2B,wBAACC,UAAAA;AACvC,QAAM,CAACC,MAAAA,IAAUC,gBAAAA;AACjB,QAAMC,iBAAiBF,OAAOG,IAAI,WAAA;AAClC,QAAMC,uBAAuBF,iBAAiB,cAAcG,mBAAmBH,cAAAA,CAAAA,KAAoB;AAEnG,QAAMI,WAAWC,YAAAA;AAEjB,SAAOC,SAAQ,OAAO;IACpB,GAAGT;IACHO,UAAUP,MAAMO,aAAa,CAACG,OAAeH,SAASG,EAAAA;IACtDC,cAAcN;EAChB,IAAI;IAACL;IAAOK;GAAqB;AACnC,GAZwC;;;ACLxC,SAASO,2BAA2B;AACpC,SAASC,aAAa;AAEtB,SAASC,cAAc;AACvB,SAASC,iBAAAA,sBAAqB;AAE9B,OAAOC,YAAW;AAeX,IAAMC,0BAAkE,wBAAC,EAC9EC,QAAQ,wBACRC,SAAS,OACTC,UACAC,UACAC,WACAC,eAAe,IACfC,YAAY,IACZC,UACAC,OAAO,8BACPC,KAAK,oBACLC,YACAC,SACA,GAAGC,MAAAA,MACJ;AACC,SACE,gBAAAC,OAAA,cAACC,QAAAA;IACCC,UAAU;IACVC,OAAM;IACNC,OAAO;MAAEC,gBAAgB;MAAaC,qBAAqB;IAAM;IACjEC,SAAS,mCAAA;AACPlB,gBAAUmB,MAAMrB,OAAO;QACrBsB,QAAQrB;QACRsB,WAAWjB;MACb,CAAA;AACA,YAAMkB,mBAAmB,GAAGb,OAAAA;AAC5B,YAAMc,SAASC,eAAcC,WAAWH,gBAAAA;AACxC,YAAM,CAACI,OAAOC,MAAAA,IAAU,MAAMJ,OAAOK,SAAQ;AAC7C,UAAIF,OAAO;AACT,cAAMlB,YAAYqB,UAAU;UAAEC,aAAahC;UAAOiC,aAAa;QAAU,CAAA;AACzE9B,mBAAW,GAAGM,EAAAA,aAAeE,OAAAA,GAAUN,YAAAA,EAAc;AACrD,cAAMD,YAAYO,OAAAA;MACpB,OAAO;AACLJ,mBAAW,IAAI2B,MAAML,OAAOM,KAAK,IAAA,CAAA,CAAA;MACnC;IACF,GAfS;IAgBR,GAAGvB;KAEJ,gBAAAC,OAAA,cAACuB,OAAAA;IAAMC,eAAc;IAAMC,KAAK;IAAKC,YAAW;IAASC,IAAI;MAAEC,QAAQ;IAAU;KAC9EjC,MACD,gBAAAK,OAAA,cAAC6B,qBAAAA,IAAAA,CAAAA,CAAAA;AAIT,GA5C+E;;;ACrB/E,SAASC,iCAAiC;AAE1C,SAASC,iBAAAA,gBAAeC,YAAAA,iBAAgB;AACxC,SAASC,gBAAgB;AACzB,SAASC,SAASC,WAAAA,gBAAe;AACjC,SAASC,qBAAAA,oBAAmBC,iBAAAA,sBAAqB;AAEjD,OAAOC,UAASC,aAAaC,YAAAA,iBAAgB;AAOtC,IAAMC,iBAAgD,wBAAC,EAC5DC,YAAY,OACZC,aAAa,eACbC,UACAC,gBACAC,UAAU,SACVC,QAAQ,qBACRC,SAAS,OACTC,UACAC,mBAAmB,OACnBC,UACAC,WAAWC,eACXC,eAAe,IACfC,YAAY,IACZC,gBAAgB,OAChBC,KAAK,mBACLC,YACA,GAAGC,MAAAA,MACJ;AACC,QAAM,CAACC,SAASC,UAAAA,IAAcC,UAAiB,MAAMjB,kBAAkB,EAAA;AACvE,QAAM,CAACkB,OAAOC,QAAAA,IAAYF,UAAAA;AAE1B,QAAMG,QAAQC,UAAAA;AACd,QAAMC,WAAWC,eAAcH,MAAMI,YAAYC,KAAK,IAAA,CAAA;AAEtD,QAAMC,cAAc,CAACX,WAAWA,QAAQY,SAASC;AAEjD,QAAMC,eAAmD,wBAAC3B,WAAAA;AACxD,UAAM4B,SAASC,eAAcC,KAAK9B,OAAM+B,OAAOC,KAAK;AACpDlB,eAAWc,MAAAA;AACXX,aAASgB,MAAAA;EACX,GAJyD;AAMzD,QAAM5B,YAAY6B,YAAY,YAAA;AAC5B,QAAI,CAACrB,QAAS;AAEdX,cAAUiC,MAAMnC,OAAO;MACrBoC,QAAQnC;MACRoC,WAAW7B;IACb,CAAA;AACA,UAAM8B,mBAAmB,GAAGzB,OAAAA;AAC5B,UAAM0B,SAASV,eAAcW,WAAWF,gBAAAA;AACxC,UAAM,CAACG,OAAOC,MAAAA,IAAU,MAAMH,OAAOI,SAAQ;AAC7C,QAAIF,OAAO;AACT,YAAM9B,YAAYiC,UAAU;QAAEC,aAAa7C;QAAO8C,aAAa;MAAU,CAAA;AACzE,YAAMxC,gBAAgBO,OAAAA;AACtBT,iBAAW,GAAGM,EAAAA,aAAeG,OAAAA,GAAUN,YAAAA,EAAc;IACvD,OAAO;AACLU,eAAS,IAAI8B,MAAML,OAAOM,KAAK,IAAA,CAAA,CAAA;IACjC;EACF,GAAG;IAAChD;IAAOC;IAAQC;IAAUK;IAAcC;IAAWE;IAAIC;IAAYE;GAAQ;AAE9E,QAAMoC,YAAkDf,YAAY,OAAOlC,WAAAA;AACzE,QAAIA,OAAMkD,QAAQ,WAAW,CAAC1B,aAAa;AACzC,YAAMnB,YAAAA;IACR;EACF,GAAG;IAACmB;IAAanB;GAAU;AAE3B,SACE,gBAAA8C,OAAA;IAACC;IAAAA;MAAQC,KAAK5C,gBAAgB,MAAM;MAAG6C,YAAW;MAAU,GAAG1C;;IAC7D,gBAAAuC,OAAA,cAACI,UAAAA;MAAQF,KAAK;OACZ,gBAAAF,OAAA,cAACK,0BAAAA;MACC7D;MACA8D,OAAM;MACNC,SAAQ;MACRC,MAAK;MACL3B,OAAOnB,WAAW;MAClBoC;MACAW,UAAUjC;MACVkC,QAAQlC;QAEV,gBAAAwB,OAAA,cAACW,UAAAA;MACCC,UAAUvC;MACVkC,SAAQ;MACRM,OAAM;MACNC,SAAS,gBAAAd,OAAA,cAACe,2BAAAA,IAAAA;MACVC,SAAS9D;OAERe,WAAWjB,mBAAmBP,UAAAA,CAAAA;IAGjCa,kBAAkB,OAEd,gBAAA0C,OAAA,cAACiB,yBAAAA;MACCvD;MACAL;MACAP;MACAgB;SAGJ;;IAGFR,gBAAgBA,gBAAgB;IAEjCZ;IACD,gBAAAsD,OAAA,cAACkB,sBAAAA;MAAqBrD;MAAcjB;MAAkBuE,YAAY,6BAAMrD,SAASgB,MAAAA,GAAf;;;AAGxE,GAnG6D;;;ACd7D,OAAOsC,UAASC,WAAAA,gBAAe;AAMxB,IAAMC,4BAA2D,wBAACC,UAAAA;AACvE,QAAMC,eAAeC,yBAAyBF,KAAAA;AAC9C,QAAMG,iBAAiBC,2BAA2BH,YAAAA;AAElD,QAAMI,eAAeC,SAA6B,OAAO;IACvD,GAAGN;IACH,GAAGC;IACH,GAAGE;EACL,IAAI;IAACA;GAAe;AAEpB,SACE,gBAAAI,OAAA,cAACC,gBAAmBH,YAAAA;AAExB,GAbwE;","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"]}
+{"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  onCaptureName,\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 onCaptureName?.(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  onCaptureName: onCaptureNameProp,\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 captureDisabled = !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 onCaptureName = useCallback(async () => {\n    if (captureDisabled) return\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 onCaptureNameProp?.(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' && !captureDisabled) {\n      await onCaptureName?.()\n    }\n  }, [captureDisabled, onCaptureName])\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={captureDisabled}\n          variant=\"contained\"\n          color=\"success\"\n          endIcon={<KeyboardArrowRightRounded />}\n          onClick={onCaptureName}\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","onCaptureName","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","onCaptureName","onCaptureNameProp","paramsString","placement","showSecondary","to","userEvents","props","xnsName","setXnsName","useState","error","setError","theme","useTheme","isMobile","useMediaQuery","breakpoints","down","captureDisabled","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

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-xns",
-  "version": "3.0.10",
+  "version": "3.0.12",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -59,7 +59,7 @@
     "@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",
+    "@xyo-network/react-storybook": "^3.0.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",

package/src/components/XnsNameCapture/Props.ts

@@ -5,7 +5,7 @@ import type { ReactNode } from 'react'
 import type { To } from 'react-router-dom'
 
 export interface XnsNameCaptureBuyCallbacks {
-  onBuyName?: (name: string) => Promise<void>
+  onCaptureName?: (name: string) => Promise<void>
 }
 
 /**

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

@@ -13,6 +13,6 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithOnBuyName = Template.bind({})
-WithOnBuyName.args = { xnsName: 'testing123', onBuyName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
+WithOnBuyName.args = { xnsName: 'testing123', onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
 
 export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/SecondaryLink.tsx

@@ -24,7 +24,7 @@ export const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = (
   funnel = 'xns',
   mixpanel,
   navigate,
-  onBuyName,
+  onCaptureName,
   paramsString = '',
   placement = '',
   setError,
@@ -50,7 +50,7 @@ export const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = (
         if (valid) {
           await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })
           navigate?.(`${to}?username=${xnsName}${paramsString}`)
-          await onBuyName?.(xnsName)
+          await onCaptureName?.(xnsName)
         } else {
           setError?.(new Error(errors.join(', ')))
         }

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

@@ -14,6 +14,6 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithOnBuyName = Template.bind({})
-WithOnBuyName.args = { navigate: (to: To) => alert(`navigated to: ${to}`), onBuyName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
+WithOnBuyName.args = { navigate: (to: To) => alert(`navigated to: ${to}`), onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
 
 export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/XnsNameCapture.tsx

@@ -23,7 +23,7 @@ export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
   mixpanel,
   mobileButtonText = 'Buy',
   navigate,
-  onBuyName: onBuyNameProp,
+  onCaptureName: onCaptureNameProp,
   paramsString = '',
   placement = '',
   showSecondary = false,
@@ -37,7 +37,7 @@ export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('md'))
 
-  const buyDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH
+  const captureDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH
 
   const handleChange: StandardTextFieldProps['onChange'] = (event) => {
     const NsName = XnsNameHelper.mask(event.target.value)
@@ -45,9 +45,8 @@ export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
     setError(undefined)
   }
 
-  const onBuyName = useCallback(async () => {
-    if (!xnsName) return
-
+  const onCaptureName = useCallback(async () => {
+    if (captureDisabled) return
     mixpanel?.track(event, {
       Funnel: funnel,
       Placement: placement,
@@ -57,7 +56,7 @@ export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
     const [valid, errors] = await helper.validate()
     if (valid) {
       await userEvents?.userClick({ elementName: event, elementType: 'xns-cta' })
-      await onBuyNameProp?.(xnsName)
+      await onCaptureNameProp?.(xnsName)
       navigate?.(`${to}?username=${xnsName}${paramsString}`)
     } else {
       setError(new Error(errors.join(', ')))
@@ -65,10 +64,10 @@ export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
   }, [event, funnel, mixpanel, paramsString, placement, to, userEvents, xnsName])
 
   const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {
-    if (event.key === 'Enter' && !buyDisabled) {
-      await onBuyName?.()
+    if (event.key === 'Enter' && !captureDisabled) {
+      await onCaptureName?.()
     }
-  }, [buyDisabled, onBuyName])
+  }, [captureDisabled, onCaptureName])
 
   return (
     <FlexCol gap={showSecondary ? 1.5 : 0} alignItems="center" {...props}>
@@ -84,11 +83,11 @@ export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
           onBlur={handleChange}
         />
         <ButtonEx
-          disabled={buyDisabled}
+          disabled={captureDisabled}
           variant="contained"
           color="success"
           endIcon={<KeyboardArrowRightRounded />}
-          onClick={onBuyName}
+          onClick={onCaptureName}
         >
           {isMobile ? mobileButtonText : buttonText}
         </ButtonEx>

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

@@ -27,6 +27,6 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithOnBuyName = Template.bind({})
-WithOnBuyName.args = { navigate: (to: To) => alert(`navigated to: ${to}`), onBuyName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
+WithOnBuyName.args = { navigate: (to: To) => alert(`navigated to: ${to}`), onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
 
 export { Default, WithOnBuyName }