@xyo-network/react-xns 7.5.8 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-xns",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,49 +36,129 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
-  "dependencies": {
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-link": "~7.1.17",
-    "@xylabs/react-pixel": "~7.1.17",
-    "@xylabs/react-theme": "~7.1.17",
-    "@xyo-network/xns-record-payloadset-plugins": "~5.3.1"
-  },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@metamask/providers": "^22.1.1",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@scure/bip39": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "@xylabs/geo": "^5.0.100",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-pixel": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/account": "~5.5.1",
+    "@xyo-network/account-model": "^5.5.1",
+    "@xyo-network/api": "~5.5.1",
+    "@xyo-network/api-models": "~5.5.1",
+    "@xyo-network/boundwitness-builder": "^5.5.1",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/boundwitness-wrapper": "~5.5.1",
+    "@xyo-network/config-payload-plugin": "~5.5.1",
+    "@xyo-network/diviner-hash-lease": "^5.5.5",
+    "@xyo-network/huri": "^5.5.1",
+    "@xyo-network/manifest-model": "~5.5.1",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/payload-plugin": "^5.5.1",
+    "@xyo-network/payload-wrapper": "~5.5.1",
+    "@xyo-network/query-payload-plugin": "~5.5.1",
+    "@xyo-network/sdk-js": "^5.5.5",
+    "@xyo-network/sdk-protocol-js": "~5.5.1",
+    "@xyo-network/wallet": "~5.5.1",
+    "@xyo-network/wallet-model": "^5.5.1",
+    "@xyo-network/witness-model": "^5.5.5",
+    "@xyo-network/xns-record-payloadset-plugins": "~5.4.9",
+    "ajv": "^8.18.0",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "idb": "^8.0.3",
+    "js-cookie": "~3.0.5",
+    "lru-cache": "^11.3.5",
+    "mapbox-gl": "^3.22.0",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "store2": "~2.14.4",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
+    "webextension-polyfill": "^0.12.0",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "@xylabs/pixel": "~2",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-pixel": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/diviner-hash-lease": "^5.5.5",
+    "@xyo-network/module-model": "^5.5.5",
+    "@xyo-network/payload-model": "^5.5.1",
+    "@xyo-network/sdk-js": "^5.5.5",
+    "@xyo-network/witness-model": "^5.5.5",
+    "@xyo-network/xns-record-payloadset-plugins": "~5.4.9",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

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

@@ -1,23 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React, { useState } 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 TemplateWithExternalValue: StoryFn<typeof XnsEstimateNameTextField> = (args) => {
-  const [value] = useState('foobar')
-  return <XnsEstimateNameTextField value={value} {...args}></XnsEstimateNameTextField>
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithExternalValue = TemplateWithExternalValue.bind({})
-WithExternalValue.args = {}
-
-export { Default, WithExternalValue }

package/src/components/EstimateName/EstimateNameTextField.tsx

@@ -1,70 +0,0 @@
-import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'
-import { TextField, useTheme } from '@mui/material'
-import { alphaCss } from '@xylabs/react-theme'
-import { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'
-import React, {
-  useLayoutEffect,
-  useRef, useState,
-} from 'react'
-
-export interface XnsEstimateNameTextFieldProps {
-  maskOutput?: boolean
-}
-
-export const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({
-  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, value, ...props
-}) => {
-  const theme = useTheme()
-  const [validLength, setValidLength] = useState(false)
-
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // watch for external changes to the value and update the validLength state
-  const [previousValue, setPreviousValue] = useState<unknown>(value)
-  if (value !== previousValue) {
-    setPreviousValue(value)
-    const validValueLength = !!(value && typeof value === 'string' && value.length >= MIN_DOMAIN_LENGTH)
-    setValidLength(validValueLength)
-  }
-
-  // Update the input value when the value prop changes
-  // The intent of this component is to remain uncontrolled to avoid the need to manage the value state
-  // Therefore, we use useLayoutEffect to update the input value directly.
-  useLayoutEffect(() => {
-    if (inputRef.current && typeof value === 'string') {
-      inputRef.current.value = value
-    }
-  }, [value])
-
-  // 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)
-    }
-  }
-
-  // override onBlur to do a final mask of the input and update the event value
-  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {
-    if (maskOutput) {
-      const value = event.target.value
-      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })
-    }
-    onBlurProp?.(event)
-  }
-
-  return (
-    <TextField
-      inputRef={inputRef}
-      onBlur={handleBlur}
-      onChange={handleChange}
-      {...props}
-      slotProps={{ htmlInput: { style: { color: validLength ? theme.vars.palette.text.primary : alphaCss(theme.vars.palette.text.primary, 0.5) } } }}
-    />
-  )
-}

package/src/components/EstimateName/index.ts

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

package/src/components/XnsNameCapture/Errors.tsx

@@ -1,56 +0,0 @@
-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>
-          )
-        // eslint-disable-next-line react-x/unsupported-syntax
-        : (() => {
-            // 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

@@ -1,48 +0,0 @@
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import type { ReactNode } from 'react'
-import type { To } from 'react-router-dom'
-
-export interface XnsNameCaptureBuyCallbacks {
-  onCaptureName?: (name: string) => Promise<void>
-}
-
-/**
- * Trackers for user actions
- */
-export interface XnsNameCaptureTrackingProps {
-  funnel?: string
-  intent?: string
-  placement?: string
-}
-
-/**
- * Properties derived from the route and used for navigation
- */
-export interface XnsNameCaptureRoutingProps {
-  navigate?: (to: string) => void
-  paramsString?: string
-  routingError?: Error
-  to?: To
-}
-
-/**
- * Base properties for the XnsNameCapture component related to the UI and Events
- */
-export interface XnsNameCaptureBaseProps {
-  autoFocus?: boolean
-  buttonText?: string
-  defaultXnsName?: string
-  disabled?: boolean
-  errorUi?: 'alert' | 'toast'
-  mobileButtonText?: string
-  onNameChange?: (name: string) => void
-  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

@@ -1,18 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-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', onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
-
-export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/SecondaryLink.tsx

@@ -1,61 +0,0 @@
-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 { useUserEvents } from '@xylabs/react-pixel'
-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 type XnsCaptureSecondaryLinkProps = XnsNameCaptureTrackingProps & XnsNameCaptureRoutingProps & XnsNameCaptureBuyCallbacks & LinkExProps & {
-  setError?: Dispatch<Error | undefined>
-  text?: string
-  xnsName: string
-}
-
-export const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({
-  funnel = 'xns',
-  navigate,
-  onCaptureName,
-  paramsString = '',
-  intent,
-  placement = '',
-  setError,
-  text = 'Or make a free reservation',
-  to = '/xns/reservation',
-  xnsName,
-  ...props
-}) => {
-  const userEvents = useUserEvents('warn')
-  return (
-    <LinkEx
-      paddingX={0}
-      color="inherit"
-      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}
-      onClick={async () => {
-        const formattedXnsName = `${xnsName}.xyo`
-        const helper = XnsNameHelper.fromString(formattedXnsName)
-        const [valid, errors] = await helper.validate()
-        if (valid) {
-          await userEvents?.userClick({
-            funnel, placement, intent,
-          })
-          navigate?.(`${to}?username=${xnsName}${paramsString}`)
-          await onCaptureName?.(xnsName)
-        } else {
-          setError?.(new Error(errors.join(', ')))
-        }
-      }}
-      {...props}
-    >
-      <Stack flexDirection="row" gap={0.5} alignItems="center" sx={{ cursor: 'pointer' }}>
-        {text}
-        <ArrowForwardRounded />
-      </Stack>
-    </LinkEx>
-  )
-}

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

@@ -1,19 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-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}`), onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
-
-export { Default, WithOnBuyName }

package/src/components/XnsNameCapture/XnsNameCapture.tsx

@@ -1,116 +0,0 @@
-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 { navigateWithUsername } from './lib/index.ts'
-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,
-  disabled,
-  errorUi = 'alert',
-  funnel = 'xns',
-  intent = 'unset',
-  mobileButtonText = 'Buy',
-  navigate,
-  onCaptureName: onCaptureNameProp,
-  onNameChange,
-  paramsString = '',
-  placement = '',
-  routingError,
-  showSecondary = false,
-  to = '/xns/estimation',
-  ...props
-}) => {
-  const [xnsName, setXnsName] = useState<string>(() => defaultXnsName ?? '')
-  const [error, setError] = useState<Error | undefined>(routingError)
-
-  const theme = useTheme()
-  const isMobile = useMediaQuery(theme.breakpoints.down('md'))
-
-  const captureDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH
-
-  const handleChange: StandardTextFieldProps['onChange'] = (event) => {
-    const NsName = XnsNameHelper.mask(event.target.value)
-    onNameChange?.(NsName)
-    setXnsName(NsName)
-    setError(undefined)
-  }
-
-  const onCaptureName = useCallback(async () => {
-    if (captureDisabled) return
-    const formattedXnsName = `${xnsName}.xyo`
-    const helper = XnsNameHelper.fromString(formattedXnsName)
-    const [valid, errors] = await helper.validate()
-    if (valid) {
-      await onCaptureNameProp?.(xnsName)
-
-      navigateWithUsername(xnsName, paramsString, navigate, to)
-    } else {
-      setError(new Error(errors.join(', ')))
-    }
-  }, [captureDisabled, xnsName, onCaptureNameProp, paramsString, navigate, to])
-
-  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {
-    if (event.key === 'Enter' && !captureDisabled) {
-      await onCaptureName?.()
-    }
-  }, [captureDisabled, onCaptureName])
-
-  return (
-    <FlexCol gap={showSecondary ? 1.5 : 0} alignItems="center" {...props}>
-      <FlexRow gap={1}>
-        <XnsEstimateNameTextField
-          autoFocus={autoFocus}
-          disabled={disabled}
-          label="xNS Name"
-          variant="outlined"
-          size="small"
-          value={xnsName ?? ''}
-          onKeyDown={onKeyDown}
-          onChange={handleChange}
-          onBlur={handleChange}
-        />
-        <ButtonEx
-          disabled={captureDisabled}
-          funnel={funnel}
-          intent={intent}
-          placement={placement}
-          variant="contained"
-          color="success"
-          endIcon={<KeyboardArrowRightRounded />}
-          onClick={onCaptureName}
-        >
-          {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

@@ -1,61 +0,0 @@
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-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 testableParams = ['signature', 'username'] as const
-type RouteDecorator = (params: [typeof testableParams[number], string][]) => Decorator
-
-const RouteDecorator: RouteDecorator = params => (Story, args) => {
-  // Get the URL object
-  const url = new URL(globalThis.location.href)
-
-  // Remove all stale testable params from the URL
-  for (const param of testableParams) url.searchParams.delete(param)
-  globalThis.history.replaceState({}, '', url)
-
-  // Add the new testable params to the URL
-  for (const [param, value] of params) url.searchParams.set(param, value)
-
-  // Replace the URL without reloading
-  globalThis.history.replaceState({}, '', url)
-
-  return <Story {...args} />
-}
-
-const Template: StoryFn<typeof XnsNameCaptureWithContext> = (args) => {
-  return (
-    <BrowserRouter>
-      <XnsNameCaptureWithContext {...args}></XnsNameCaptureWithContext>
-    </BrowserRouter>
-  )
-}
-
-const Default = Template.bind({})
-Default.decorators = [RouteDecorator([['signature', '0x1234567890abcdef']])]
-Default.args = {}
-
-const WithOnCaptureName = Template.bind({})
-WithOnCaptureName.decorators = [RouteDecorator([['signature', '0x1234567890abcdef']])]
-WithOnCaptureName.args = { navigate: (to: To) => alert(`navigated to: ${to}`), onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)) }
-
-const WithBadXnsNameInRoute = Template.bind({})
-WithBadXnsNameInRoute.decorators = [RouteDecorator([['signature', '0x1234567890abcdef'], ['username', 'badname.xyo.xyo']])]
-WithBadXnsNameInRoute.args = {
-  navigate: (to: To) => alert(`navigated to: ${to}`),
-  onCaptureName: (name: string) => Promise.resolve(alert(`Buy Name: ${name}`)),
-}
-
-const WithUserName = Template.bind({})
-WithUserName.decorators = [RouteDecorator([['username', 'foobar']])]
-WithUserName.args = { navigate: (to: To) => alert(`navigated to: ${to}`) }
-
-export {
-  Default, WithBadXnsNameInRoute, WithOnCaptureName, WithUserName,
-}

package/src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx

@@ -1,18 +0,0 @@
-import React, { useMemo } from 'react'
-
-import { 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 updatedProps = useMemo<XnsNameCaptureProps>(() => ({
-    ...props,
-    ...routingProps,
-  }), [routingProps, props])
-
-  return (
-    <XnsNameCapture {...updatedProps} />
-  )
-}

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

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