@xyo-network/react-xns 3.0.10

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import type { To } from 'react-router-dom'
+
+import { XnsNameCapture } from './XnsNameCapture.tsx'
+
+export default { title: 'modules/xns/XnsNameCapture' } as Meta
+
+const Template: StoryFn<typeof XnsNameCapture> = (args) => {
+  return <XnsNameCapture {...args}></XnsNameCapture>
+}
+
+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}`)) }
+
+export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/XnsNameCapture.tsx

@@ -0,0 +1,114 @@
+import { KeyboardArrowRightRounded } from '@mui/icons-material'
+import type { StandardTextFieldProps } from '@mui/material'
+import { useMediaQuery, useTheme } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'
+import type { KeyboardEventHandler } from 'react'
+import React, { useCallback, useState } from 'react'
+
+import { XnsEstimateNameTextField } from '../EstimateName/index.ts'
+import { XnsNameCaptureErrors } from './Errors.tsx'
+import type { XnsNameCaptureProps } from './Props.ts'
+import { XnsCaptureSecondaryLink } from './SecondaryLink.js'
+
+export const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({
+  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] = useState<string>(() => defaultXnsName ?? '')
+  const [error, setError] = useState<Error | undefined>()
+
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
+
+  const buyDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH
+
+  const handleChange: StandardTextFieldProps['onChange'] = (event) => {
+    const NsName = XnsNameHelper.mask(event.target.value)
+    setXnsName(NsName)
+    setError(undefined)
+  }
+
+  const onBuyName = useCallback(async () => {
+    if (!xnsName) return
+
+    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' })
+      await onBuyNameProp?.(xnsName)
+      navigate?.(`${to}?username=${xnsName}${paramsString}`)
+    } else {
+      setError(new Error(errors.join(', ')))
+    }
+  }, [event, funnel, mixpanel, paramsString, placement, to, userEvents, xnsName])
+
+  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {
+    if (event.key === 'Enter' && !buyDisabled) {
+      await onBuyName?.()
+    }
+  }, [buyDisabled, onBuyName])
+
+  return (
+    <FlexCol gap={showSecondary ? 1.5 : 0} alignItems="center" {...props}>
+      <FlexRow gap={1}>
+        <XnsEstimateNameTextField
+          autoFocus={autoFocus}
+          label="xNS Name"
+          variant="outlined"
+          size="small"
+          value={xnsName ?? ''}
+          onKeyDown={onKeyDown}
+          onChange={handleChange}
+          onBlur={handleChange}
+        />
+        <ButtonEx
+          disabled={buyDisabled}
+          variant="contained"
+          color="success"
+          endIcon={<KeyboardArrowRightRounded />}
+          onClick={onBuyName}
+        >
+          {isMobile ? mobileButtonText : buttonText}
+        </ButtonEx>
+      </FlexRow>
+      {(showSecondary === true)
+        ? (
+            <XnsCaptureSecondaryLink
+              xnsName={xnsName}
+              placement={placement}
+              funnel={funnel}
+              setError={setError}
+            />
+          )
+        : null}
+      {
+        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary
+        showSecondary ? showSecondary : null
+      }
+      {children}
+      <XnsNameCaptureErrors error={error} errorUi={errorUi} resetError={() => setError(undefined)} />
+    </FlexCol>
+  )
+}

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import type { To } from 'react-router-dom'
+import { BrowserRouter } from 'react-router-dom'
+
+import { XnsNameCaptureWithContext } from './XnsNameCaptureWithContext.tsx'
+
+export default { title: 'modules/xns/XnsNameCaptureWithContext' } as Meta
+
+const Template: StoryFn<typeof XnsNameCaptureWithContext> = (args) => {
+  // Get the current URL
+  const url = new URL(window.location.href)
+
+  // Update or add the URL parameter
+  url.searchParams.set('signature', '0x1234567890abcdef')
+
+  // Update the URL without reloading the page
+  window.history.replaceState({}, '', url)
+  return (
+    <BrowserRouter>
+      <XnsNameCaptureWithContext {...args}></XnsNameCaptureWithContext>
+    </BrowserRouter>
+  )
+}
+
+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}`)) }
+
+export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react'
+
+import { useXnsNameCaptureProviders, useXnsNameCaptureRouting } from './hooks/index.ts'
+import type { XnsNameCaptureProps } from './Props.ts'
+import { XnsNameCapture } from './XnsNameCapture.tsx'
+
+export const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {
+  const routingProps = useXnsNameCaptureRouting(props)
+  const providersProps = useXnsNameCaptureProviders(routingProps)
+
+  const updatedProps = useMemo<XnsNameCaptureProps>(() => ({
+    ...props,
+    ...routingProps,
+    ...providersProps,
+  }), [providersProps])
+
+  return (
+    <XnsNameCapture {...updatedProps} />
+  )
+}

package/src/components/XnsNameCapture/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useXnsNameCaptureProviders.ts'
+export * from './useXnsNameCaptureRouting.ts'

package/src/components/XnsNameCapture/hooks/useXnsNameCaptureProviders.ts

@@ -0,0 +1,13 @@
+import { useMixpanel } from '@xylabs/react-mixpanel'
+import { useMemo } from 'react'
+
+import type { XnsNameCaptureProps } from '../Props.ts'
+
+export const useXnsNameCaptureProviders = (props: XnsNameCaptureProps) => {
+  const mixpanel = useMixpanel()
+
+  return useMemo(() => ({
+    ...props,
+    mixpanel: props.mixpanel ?? mixpanel,
+  }), [props, mixpanel])
+}

package/src/components/XnsNameCapture/hooks/useXnsNameCaptureRouting.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react'
+import { useNavigate, useSearchParams } from 'react-router-dom'
+
+import type { XnsNameCaptureProps } from '../Props.ts'
+
+export const useXnsNameCaptureRouting = (props: XnsNameCaptureProps) => {
+  const [params] = useSearchParams()
+  const signatureParam = params.get('signature')
+  const signatureParamString = signatureParam ? `&signature=${encodeURIComponent(signatureParam)}` : ''
+
+  const navigate = useNavigate()
+
+  return useMemo(() => ({
+    ...props,
+    navigate: props.navigate ?? ((to: string) => navigate(to)),
+    paramsString: signatureParamString,
+  }), [props, signatureParamString])
+}

package/src/components/XnsNameCapture/index.ts

@@ -0,0 +1,6 @@
+export * from './Errors.tsx'
+export * from './hooks/index.ts'
+export * from './Props.ts'
+export * from './SecondaryLink.tsx'
+export * from './XnsNameCapture.tsx'
+export * from './XnsNameCaptureWithContext.tsx'

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './EstimateName/index.ts'
+export * from './XnsNameCapture/index.ts'

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components/index.ts'

package/typedoc.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "entryPoints": ["src/index.ts"],
+  "tsconfig": "./tsconfig.typedoc.json"
+}

package/xy.config.ts

@@ -0,0 +1,10 @@
+import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
+const config: XyTsupConfig = {
+  compile: {
+    browser: { src: true },
+    node: {},
+    neutral: {},
+  },
+}
+
+export default config