@thenamespace/ens-components 0.37.0 → 1.1.0

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"styles.js","sources":["../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n  if ( ref === void 0 ) ref = {};\n  var insertAt = ref.insertAt;\n\n  if (!css || typeof document === 'undefined') { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.type = 'text/css';\n\n  if (insertAt === 'top') {\n    if (head.firstChild) {\n      head.insertBefore(style, head.firstChild);\n    } else {\n      head.appendChild(style);\n    }\n  } else {\n    head.appendChild(style);\n  }\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,MAAM,GAAG,GAAG,GAAG,EAAE;AAChC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ;;AAE7B,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,CAAC;;AAEzD,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACtE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU;;AAEzB,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC;AAC/C,IAAI,CAAC,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC7B,IAAI;AACJ,EAAE,CAAC,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,EAAE;;AAEF,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG;AAClC,EAAE,CAAC,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AACnD,EAAE;AACF;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/types/components/atoms/icon/Icon.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import "./Icon.css";
-export type IconName = "person" | "x" | "search" | "square-user" | "globe" | "pin" | "box" | "book" | "map-pin" | "mail" | "discord" | "github" | "telegram" | "youtube" | "image" | "circle-person" | "twitter" | "circle-alert" | "check-circle" | "check" | "alert-triangle" | "info" | "x-circle" | "rotate-circle" | "logout" | "edit" | "copy" | "clock" | "image" | "xSocial" | "chevron-up" | "chevron-down" | "chevron-left";
+export type IconName = "person" | "x" | "search" | "square-user" | "globe" | "pin" | "box" | "book" | "map-pin" | "mail" | "discord" | "github" | "telegram" | "youtube" | "image" | "circle-person" | "twitter" | "circle-alert" | "check-circle" | "check" | "alert-triangle" | "info" | "x-circle" | "rotate-circle" | "logout" | "edit" | "copy" | "clock" | "plus" | "image" | "xSocial" | "chevron-up" | "chevron-down" | "chevron-left";
 export interface IconProps {
     name: IconName;
     color?: string;

package/dist/types/components/ens-name-registration/ENSNameRegistrationForm.d.ts

@@ -6,9 +6,15 @@ export interface EnsNameRegistrationFormProps {
     referrer?: Address;
     noBorder?: boolean;
     className?: string;
+    title?: string;
+    subtitle?: string;
+    bannerImage?: string;
+    hideBanner?: boolean;
+    bannerWidth?: number;
     onRegistrationSuccess?: (result: RegistrationSuccessData) => void;
     onClose?: (isSuccess: boolean) => void;
     onRegistrationStart?: (name: string) => void;
+    onConnectWallet?: () => void;
 }
 interface RegistrationSuccessData {
     expiryInYears: number;

package/dist/types/components/ens-name-registration/RegistrationSummary.d.ts

@@ -22,6 +22,11 @@ export interface RegistrationSummaryProps {
         reason?: string;
     };
     isTestnet?: boolean;
+    title?: string;
+    subtitle?: string;
+    bannerImage?: string;
+    hideBanner?: boolean;
+    bannerWidth?: number;
     onLabelChange: (label: string) => void;
     onYearsChange: (years: number) => void;
     onPriceChange: (price: {
@@ -36,5 +41,6 @@ export interface RegistrationSummaryProps {
     }) => void;
     onSetProfile?: () => void;
     onStart?: () => void;
+    onConnectWallet?: () => void;
 }
 export declare const RegistrationSummary: React.FC<RegistrationSummaryProps>;

package/dist/types/components/ens-records-form/EnsRecordsForm.d.ts

@@ -10,10 +10,11 @@ export interface EnsRecordsFormProps {
     existingRecords: EnsRecords;
     noBorder?: boolean;
     className?: string;
+    avatarUploadDomain?: string;
     onCancel?: () => void;
     onRecordsUpdated?: (newRecords: EnsRecordsDiff) => void;
     onGreat?: () => void;
     onTransactionSent?: (hash: Hash) => void;
     txConfirmations?: number;
 }
-export declare const EnsRecordsForm: ({ name, existingRecords, resolverChainId, isTestnet, resolverAddress, noBorder, className, onCancel, onGreat, onRecordsUpdated, onTransactionSent, txConfirmations }: EnsRecordsFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EnsRecordsForm: ({ name, existingRecords, resolverChainId, isTestnet, resolverAddress, noBorder, className, avatarUploadDomain, onCancel, onGreat, onRecordsUpdated, onTransactionSent, txConfirmations }: EnsRecordsFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/ens-records-form/EnsUpdateRecordsForm.d.ts

@@ -1,4 +1,5 @@
 import { EnsRecords } from "@/types";
+import { AvatarUploadContext } from "../select-records-form/SelectRecordsForm";
 import { Address, Hash } from "viem";
 import { EnsRecordsDiff } from "@/utils";
 import "./EnsUpdateRecordsForm.css";
@@ -13,6 +14,7 @@ interface EnsUpdateRecordsForm {
     onGreat?: () => void;
     onTransactionSent?: (hash: Hash) => void;
     txConfirmations?: number;
+    avatarUpload?: AvatarUploadContext;
 }
-export declare const EnsUpdateRecordsForm: ({ name, existingRecords, resolverChainId, resolverAddress, isTestnet, onGreat, onRecordsUpdated, onCancel, onTransactionSent, txConfirmations }: EnsUpdateRecordsForm) => import("react/jsx-runtime").JSX.Element;
+export declare const EnsUpdateRecordsForm: ({ name, existingRecords, resolverChainId, resolverAddress, isTestnet, onGreat, onRecordsUpdated, onCancel, onTransactionSent, txConfirmations, avatarUpload, }: EnsUpdateRecordsForm) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/molecules/modal/Modal.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
 import "./Modal.css";
 export type ModalSize = "sm" | "md" | "lg";
+export type ModalPresentation = "dialog" | "drawer";
+export interface ModalResponsivePresentation {
+    mobile?: ModalPresentation;
+    breakpointPx?: number;
+}
 export interface ModalProps {
     isOpen: boolean;
     onClose: () => void;
@@ -18,6 +23,10 @@ export interface ModalProps {
     className?: string;
     /** Optional styles for the dialog container */
     style?: React.CSSProperties;
+    /** Visual presentation mode */
+    presentation?: ModalPresentation;
+    /** Optional responsive presentation overrides */
+    responsivePresentation?: ModalResponsivePresentation;
 }
 export declare const Modal: React.FC<ModalProps>;
 export default Modal;

package/dist/types/components/offchain-subname-form/OffchainSubnameForm.d.ts

@@ -14,7 +14,8 @@ interface OffchainSubnameFormProps {
     hideTitle?: boolean;
     onCancel?: () => void;
     isTestnet?: boolean;
+    avatarUploadDomain?: string;
     onSuccess?: (data: OffchainSubnameCreatedData) => void;
 }
-export declare const OffchainSubnameForm: ({ apiKeyOrToken, name, label: propLabel, hideTitle, isTestnet, onCancel, onSuccess, }: OffchainSubnameFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OffchainSubnameForm: ({ apiKeyOrToken, name, label: propLabel, hideTitle, isTestnet, avatarUploadDomain, onCancel, onSuccess, }: OffchainSubnameFormProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/select-records-form/SelectRecordsForm.d.ts

@@ -1,8 +1,14 @@
 import { EnsRecords } from "@/types";
 import "./SelectRecordsForm.css";
+export interface AvatarUploadContext {
+    ensName: string;
+    isTestnet?: boolean;
+    siweDomain?: string;
+}
 export interface SelectRecordsFormProps {
     records: EnsRecords;
     onRecordsUpdated: (records: EnsRecords) => void;
     actionButtons?: React.ReactNode;
+    avatarUpload?: AvatarUploadContext;
 }
-export declare const SelectRecordsForm: ({ records, onRecordsUpdated, actionButtons, }: SelectRecordsFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectRecordsForm: ({ records, onRecordsUpdated, actionButtons, avatarUpload, }: SelectRecordsFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/select-records-form/avatar-upload/AvatarUploadModal.d.ts

@@ -0,0 +1,12 @@
+export interface AvatarUploadModalProps {
+    isOpen: boolean;
+    ensName: string;
+    isTestnet?: boolean;
+    siweDomain?: string;
+    onClose: () => void;
+    onUploaded: (data: {
+        url: string;
+        uploadedAt: string;
+    }) => void;
+}
+export declare const AvatarUploadModal: (props: AvatarUploadModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/select-records-form/avatar-upload/cropImage.d.ts

@@ -0,0 +1,2 @@
+import { Area } from "react-easy-crop";
+export declare const getCroppedImageFile: (file: File, area: Area) => Promise<File>;

package/dist/types/components/select-records-form/header-upload/HeaderUploadModal.d.ts

@@ -0,0 +1,12 @@
+export interface HeaderUploadModalProps {
+    isOpen: boolean;
+    ensName: string;
+    isTestnet?: boolean;
+    siweDomain?: string;
+    onClose: () => void;
+    onUploaded: (data: {
+        url: string;
+        uploadedAt: string;
+    }) => void;
+}
+export declare const HeaderUploadModal: (props: HeaderUploadModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/select-records-form/image-records/ImageRecords.d.ts

@@ -4,6 +4,10 @@ interface ImageRecordProps {
     header?: string;
     onAvatarAdded: (value: string) => void;
     onHeaderAdded: (value: string) => void;
+    onAvatarUploadRequested?: () => void;
+    onAvatarManualUrlRequested?: () => void;
+    onHeaderUploadRequested?: () => void;
+    onHeaderManualUrlRequested?: () => void;
 }
-export declare const ImageRecords: ({ avatar, header, onAvatarAdded, onHeaderAdded, }: ImageRecordProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImageRecords: ({ avatar, header, onAvatarAdded, onHeaderAdded, onAvatarUploadRequested, onAvatarManualUrlRequested, onHeaderUploadRequested, onHeaderManualUrlRequested, }: ImageRecordProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/select-records-form/image-upload/ImageUploadModal.d.ts

@@ -0,0 +1,16 @@
+import { UploadImageType } from "@/hooks";
+import "./ImageUploadModal.css";
+interface ImageUploadModalProps {
+    isOpen: boolean;
+    ensName: string;
+    imageType: UploadImageType;
+    isTestnet?: boolean;
+    siweDomain?: string;
+    onClose: () => void;
+    onUploaded: (data: {
+        url: string;
+        uploadedAt: string;
+    }) => void;
+}
+export declare const ImageUploadModal: ({ isOpen, ensName, imageType, isTestnet, siweDomain, onClose, onUploaded, }: ImageUploadModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/select-records-form/text-records/TextRecords.d.ts

@@ -6,6 +6,8 @@ interface TextRecordsProps {
     onTextsChanged: (texts: EnsTextRecord[]) => void;
     category: TextRecordCategory;
     searchFilter?: string;
+    focusRecordKey?: string;
+    focusTrigger?: number;
 }
-export declare const TextRecords: ({ texts, onTextsChanged, category, initialTexts, searchFilter, }: TextRecordsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextRecords: ({ texts, onTextsChanged, category, initialTexts, searchFilter, focusRecordKey, focusTrigger, }: TextRecordsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/subname-mint-form/MintFormActions.d.ts

@@ -7,5 +7,7 @@ export interface MintFormActionsProps {
     chainName?: string;
     onSwitchChain?: () => void;
     isSwitchingChain?: boolean;
+    isConnected?: boolean;
+    onConnectWallet?: () => void;
 }
-export declare const MintFormActions: ({ onCancel, onMint, isMintDisabled, isWaitingWallet, needsChainSwitch, chainName, onSwitchChain, isSwitchingChain, }: MintFormActionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MintFormActions: ({ onCancel, onMint, isMintDisabled, isWaitingWallet, needsChainSwitch, chainName, onSwitchChain, isSwitchingChain, isConnected, onConnectWallet, }: MintFormActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/subname-mint-form/SetSubnameRecords.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import { EnsRecords } from "@/types";
+import { AvatarUploadContext } from "../select-records-form/SelectRecordsForm";
 export interface SetSubnameRecordsProps {
     records: EnsRecords;
     onRecordsChange: (records: EnsRecords) => void;
     onCancel: () => void;
     onSave: () => void;
     hasChanges?: boolean;
+    avatarUpload?: AvatarUploadContext;
 }
 export declare const SetSubnameRecords: React.FC<SetSubnameRecordsProps>;

package/dist/types/components/subname-mint-form/SubnameMintForm.d.ts

@@ -28,6 +28,7 @@ interface SubnameMintFormProps {
     onSuccess?: (data: MintSuccessData) => void;
     onSubnameMinted?: (data: SubnameMintedData) => void;
     txConfirmations?: number;
+    onConnectWallet?: () => void;
 }
-export declare const SubnameMintForm: ({ parentName, label, isTestnet, onCancel, onSuccess, onSubnameMinted, txConfirmations }: SubnameMintFormProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SubnameMintForm: ({ parentName, label, isTestnet, onCancel, onSuccess, onSubnameMinted, txConfirmations, onConnectWallet, }: SubnameMintFormProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/hooks/index.d.ts

@@ -4,3 +4,4 @@ export * from "./useENSResolver";
 export * from "./useMintManager";
 export * from "./useMintSubname";
 export * from "./useOffchainManager";
+export * from "./useAvatarClient";

package/dist/types/hooks/useAvatarClient.d.ts

@@ -0,0 +1,19 @@
+import type { UploadResult } from "@thenamespace/avatar";
+interface UseAvatarClientParams {
+    isTestnet?: boolean;
+    domain?: string;
+}
+export interface UploadAvatarParams {
+    ensName: string;
+    file: File;
+    onProgress?: (progress: number) => void;
+}
+export type UploadImageType = "avatar" | "header";
+export declare const getAvatarUploadErrorMessage: (err: unknown) => string;
+export declare const getImageUploadErrorMessage: (err: unknown, imageType?: UploadImageType) => string;
+export declare const useAvatarClient: ({ isTestnet, domain }: UseAvatarClientParams) => {
+    uploadAvatar: (params: UploadAvatarParams) => Promise<UploadResult>;
+    uploadHeader: (params: UploadAvatarParams) => Promise<UploadResult>;
+    getErrorMessage: (err: unknown, imageType?: UploadImageType) => string;
+};
+export {};

package/dist/types/web3/index.d.ts

@@ -1,2 +1 @@
 export * from "./resolver-abi";
-export * from "./wallet-connect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thenamespace/ens-components",
-  "version": "0.37.0",
+  "version": "1.1.0",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -38,16 +38,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "tsup --watch",
     "clean": "rimraf dist",
     "lint": "eslint .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "docker:up": "docker-compose up --build --force-recreate",
-    "docker:build": "docker-compose build --no-cache",
-    "test-app": "vite --port 4000",
-    "format": "prettier --write .",
     "format:check": "prettier --check .",
     "build:types": "tsc -p tsconfig.types.json",
     "build": "npm run clean && npm run build:types && rollup -c rollup.config.mjs"
@@ -60,27 +52,18 @@
     "access": "public"
   },
   "devDependencies": {
-    "@rainbow-me/rainbowkit": "^2.2.8",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@tanstack/react-query": "^5.0.0",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
-    "@vitejs/plugin-react": "^5.0.2",
     "autoprefixer": "^10.4.21",
     "axios": "^1.11.0",
-    "bootstrap": "^5.3.8",
     "cssnano": "^7.1.1",
-    "eslint": "^9.34.0",
     "postcss-import": "^16.1.1",
-    "prettier": "^3.6.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-easy-crop": "^5.5.6",
@@ -89,11 +72,8 @@
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-esbuild": "^6.2.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.6.14",
     "typescript": "^5.9.2",
     "viem": "^2.38.4",
-    "vite": "^6.3.5",
-    "vite-tsconfig-paths": "^5.1.4",
     "wagmi": "^2.18.2"
   },
   "dependencies": {
@@ -103,8 +83,10 @@
     "@namespacesdk/addresses": "^1.0.15",
     "@namespacesdk/indexer": "^1.0.1",
     "@thenamespace/addresses": "^1.1.0",
+    "@thenamespace/avatar": "^1.0.0",
     "@thenamespace/mint-manager": "^1.1.1",
     "@thenamespace/offchain-manager": "^1.0.10",
+    "bootstrap": "^5.3.0",
     "lodash": "^4.17.21",
     "lucide-react": ">=0.525.0",
     "react-confetti": "^6.4.0"

package/dist/types/web3/wallet-connect.d.ts

@@ -1,2 +0,0 @@
-import { PropsWithChildren } from "react";
-export declare const WalletConnectProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;