@iota/apps-ui-kit 0.7.0 → 0.7.2

package/src/lib/styles/variables/names-variables.css

@@ -0,0 +1,270 @@
+:root.names {
+    /* FONTS */
+    --font-family-heading: theme('fontFamily.roboto-flex');
+    --font-family-text: theme('fontFamily.inter');
+    --display-lg-font-weight: 700;
+    --display-lg-line-height: 100%;
+    --display-md-font-weight: 700;
+    --display-md-line-height: 100%;
+    --display-sm-font-weight: 700;
+    --display-sm-line-height: 100%;
+    --headline-lg-font-weight: 600;
+    --headline-md-font-weight: 600;
+    --headline-sm-font-weight: 600;
+
+    /* COLORS */
+    --warning-surface: theme('colors.names-warning.20');
+    --on-warning: theme('colors.names-warning.90');
+    --error-surface: theme('colors.names-error.20');
+    --on-error: theme('colors.names-error.90');
+    --success-surface: theme('colors.names-tertiary.20');
+    --on-success: theme('colors.names-tertiary.90');
+    --default-surface: theme('colors.names-primary.20');
+    --on-default: theme('colors.names-neutral.90');
+
+    /* STATE LAYER */
+    --state-layer-bg-color: theme('colors.names-primary.60');
+    --state-layer-secondary-bg-color: theme('colors.shader-primary-dark.100');
+    --state-layer-inverted-bg-color: theme('colors.names-primary.80');
+
+    /* ---------------- ATOMS ---------------- */
+
+    /* BADGE */
+    --badge-bg-color-neutral: theme('colors.names-neutral.12');
+    --badge-text-color-neutral: theme('colors.names-neutral.92');
+    --badge-border-color-neutral: theme('colors.names-neutral.12');
+    --badge-bg-color-primary: theme('colors.names-primary.30');
+    --badge-border-color-primary: theme('colors.names-primary.30');
+    --badge-text-color-primary: theme('colors.names-neutral.100');
+    --badge-bg-color-primary-soft: theme('colors.names-primary.20');
+    --badge-text-color-primary-soft: theme('colors.names-primary.90');
+    --badge-border-color-soft: theme('colors.names-primary.20');
+
+    /* INFOBOX */
+    --infobox-text-title: theme('colors.names-neutral.92');
+    --infobox-supporting-text: theme('colors.names-neutral.92');
+
+    /* BUTTON */
+    --button-bg-color-primary: theme('colors.names-primary.30');
+    --button-bg-color-disabled-primary: theme('colors.names-neutral.30');
+    --button-bg-color-secondary: theme('colors.names-neutral.20');
+    --button-bg-color-error: theme('colors.names-error.20');
+    --button-border-color-outline: theme('colors.names-neutral.60');
+    --button-text-color-primary: theme('colors.names-primary.100');
+    --button-text-color-neutral: theme('colors.names-neutral.92');
+    --button-text-color-error: theme('colors.names-error.90');
+
+    /* BUTTON PILL */
+    --button-pill-border-color: theme('colors.names-neutral.40');
+    --button-pill-text-color: theme('colors.names-neutral.60');
+
+    /* HEADER */
+    --header-bg-color: theme('colors.names-neutral.6');
+    --header-text-color: theme('colors.names-neutral.92');
+
+    /* LABEL */
+    --label-text-primary-neutral: theme('colors.names-neutral.92');
+    --label-text-secondary-neutral: theme('colors.names-neutral.50');
+
+    /* KEY VALUE */
+    --key-supporting-text-color: theme('colors.names-neutral.50');
+    --key-value-hover-text-color: theme('colors.iota-neutral.92');
+    --key-value-key-text-color: theme('colors.names-neutral.70');
+
+    /* CHECKBOX */
+    --checkbox-border-color-default: theme('colors.names-neutral.20');
+    --checkbox-border-color-checked: theme('colors.names-primary.30');
+    --checkbox-border-color-disabled: theme('colors.names-neutral.30');
+    --checkbox-border-color-disabled-checked: theme('colors.names-neutral.50');
+    --checkbox-bg-color-checked: theme('colors.names-primary.30');
+    --checkbox-bg-color-disabled-checked: theme('colors.names-neutral.50');
+    --checkbox-text-color: theme('colors.names-neutral.70');
+    --checkbox-text-color-checked: theme('colors.names-neutral.100');
+    --checkbox-label-text-color: theme('colors.names-neutral.70');
+
+    /* DIVIDER */
+    --divider-bg-color: theme('colors.shader-neutral-dark.8');
+
+    /* BUTTON SEGMENT */
+    --button-segment-text-color-default: theme('colors.names-neutral.50');
+    --button-segment-text-color-hover: theme('colors.names-neutral.70');
+    --button-segment-text-color-focused: theme('colors.names-neutral.70');
+    --button-segment-text-color-selected: theme('colors.names-neutral.92');
+    --button-segment-underline-default-color: theme('colors.shader-neutral-dark.8');
+    --button-segment-underline-hover-color: theme('colors.names-neutral.40');
+    --button-segment-underline-selected-color: theme('colors.names-primary.80');
+    --button-segment-bg-color-selected: theme('colors.names-neutral.6');
+
+    /* LOADING INDICATOR */
+    --loading-indicator-color: theme('colors.names-primary.80');
+
+    /* LIST ITEM */
+    --list-item-color: theme('colors.names-neutral.92');
+    --list-item-border-color: theme('colors.shader-neutral-dark.8');
+    --list-item-highlight-bg: theme('colors.shader-primary-dark.12');
+
+    /* PANEL */
+    --panel-bg: theme('colors.names-neutral.6');
+    --panel-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* RADIO BUTTON */
+    --radio-icon-color: theme('colors.names-neutral.70');
+    --radio-icon-checked-color: theme('colors.names-primary.30');
+    --radio-icon-checked-disabled-color: theme('colors.names-neutral.70');
+    --radio-label-color: theme('colors.names-neutral.70');
+
+    /* SECONDARY TEXT */
+    --secondary-text-color: theme('colors.names-neutral.70');
+    --secondary-text-error-color: theme('colors.names-error.80');
+
+    /* SKELETON */
+    --skeleton-bg: theme('colors.names-neutral.12');
+    --skeleton-secondary-bg: theme('colors.names-neutral.10');
+
+    /* TOGGLE */
+    --toggle-bg-active: theme('colors.names-primary.30');
+    --toggle-border-active: theme('colors.names-primary.30');
+    --toggle-bg-inactive: theme('colors.names-neutral.6');
+    --toggle-border-inactive: theme('colors.names-neutral.50');
+    --toggle-bg-disabled-active: theme('colors.names-neutral.50');
+    --toggle-border-disabled-active: theme('colors.names-neutral.50');
+    --toggle-thumb-color: theme('colors.names-neutral.50');
+    --toggle-thumb-color-checked: theme('colors.names-neutral.6');
+    --toggle-label-color: theme('colors.names-neutral.70');
+
+    /* TOOLTIP */
+    --tooltip-bg: theme('colors.names-neutral.0');
+    --tooltip-text-color: theme('colors.names-neutral.100');
+
+    /* VISUAL ASSET CARD */
+    --visual-asset-placeholder-bg: theme('colors.names-neutral.10');
+    --visual-asset-placeholder-icon: theme('colors.names-neutral.60');
+    --visual-asset-title-color: theme('colors.names-neutral.100');
+    --visual-asset-icon-color: theme('colors.names-neutral.100');
+
+    /* ACCOUNT */
+    --account-title-color: theme('colors.names-neutral.92');
+    --account-icon-color: theme('colors.names-neutral.70');
+    --account-check-active-color: theme('colors.names-primary.80');
+    --account-check-inactive-color: theme('colors.names-neutral.60');
+
+    /* ADDRESS */
+    --address-text-color: theme('colors.names-neutral.70');
+
+    /* CARD */
+    --card-filled-bg: theme('colors.names-neutral.10');
+    --card-image-bg-solid: theme('colors.names-neutral.10');
+    --card-image-bg-white: theme('colors.names-neutral.6');
+    --card-action-link-color: theme('colors.names-neutral.92');
+    --card-action-title-color: theme('colors.names-neutral.92');
+    --card-action-subtitle-color: theme('colors.names-neutral.40');
+    --card-body-title-color: theme('colors.names-neutral.92');
+    --card-body-subtitle-color: theme('colors.names-neutral.70');
+
+    /* CHIP */
+    --chip-bg-selected-outline: theme('colors.shader-primary-dark.16');
+    --chip-bg-elevated: theme('colors.names-neutral.12');
+    --chip-bg-brand: theme('colors.names-primary.30');
+    --chip-border-default: theme('colors.names-neutral.20');
+    --chip-text-default: theme('colors.names-neutral.92');
+    --chip-text-secondary: theme('colors.names-neutral.92');
+    --chip-focus-ring: theme('colors.names-primary.80');
+    --chip-border-color-brand: theme('colors.names-primary.30');
+    --chip-text-brand: theme('colors.names-primary.100');
+    --chip-bg-selected-overlay: theme('colors.shader-primary-dark.16');
+    --chip-close-icon-opacity: 0.4;
+
+    --chip-outline-color: theme('colors.shader-primary-dark.16');
+    --chip-outline-color-hover: theme('colors.shader-primary-dark.8');
+    --chip-outline-color-active: theme('colors.shader-primary-dark.12');
+
+    --chip-bg-color-hover: theme('colors.shader-primary-dark.8');
+    --chip-bg-color-active: theme('colors.shader-primary-dark.12');
+    --chip-bg-color-focus: theme('colors.shader-primary-dark.12');
+
+    /* DISPLAY STATS */
+    --display-stats-bg-default: theme('colors.names-neutral.10');
+    --display-stats-bg-highlight: theme('colors.names-primary.80');
+    --display-stats-bg-secondary: theme('colors.names-secondary.10');
+    --display-stats-text-default: theme('colors.names-neutral.92');
+    --display-stats-text-highlight: theme('colors.names-primary.10');
+    --display-stats-text-secondary: theme('colors.names-neutral.92');
+    --display-stats-icon-color: theme('colors.names-neutral.92');
+    --display-stats-copy-icon-color: theme('colors.names-neutral.40');
+
+    /* DROPDOWN */
+    --dropdown-bg: theme('colors.names-neutral.6');
+    --dropdown-border-color: theme('colors.names-neutral.20');
+
+    /* INPUT */
+    --input-text-color: theme('colors.names-neutral.92');
+    --input-placeholder-color: rgba(136, 146, 161, 0.4); /* neutral.60 with 40% opacity */
+    --input-label-color: theme('colors.names-neutral.60');
+    --input-border-color: theme('colors.names-neutral.20');
+    --input-border-hover-color: theme('colors.names-neutral.60');
+    --input-border-error-color: theme('colors.names-error.80');
+    --input-border-focus-color: theme('colors.names-primary.80');
+    --input-caret-color: theme('colors.names-primary.80');
+    --input-icon-color: theme('colors.names-neutral.92');
+    --input-copy-icon-color: theme('colors.names-neutral.40');
+    --input-visibility-bar-color: rgba(24, 27, 49, 0.6); /* neutral.10 with 60% opacity */
+
+    /* NAVBAR ITEM */
+    --navbar-item-icon-color: theme('colors.names-neutral.70');
+    --navbar-item-icon-selected-color: theme('colors.names-neutral.92');
+    --navbar-item-label-color: theme('colors.names-neutral.50');
+    --navbar-item-label-selected-color: theme('colors.names-neutral.92');
+
+    /* SEARCH */
+    --search-text-color: theme('colors.names-neutral.92');
+    --search-placeholder-color: theme('colors.names-neutral.70');
+    --search-border-color: theme('colors.names-neutral.40');
+    --search-bg-color-filled: theme('colors.names-neutral.12');
+    --search-suggestion-bg-color: theme('colors.names-neutral.12');
+    --search-selected-index-bg-color: theme('colors.shader-inverted-dark.16');
+
+    /* SEGMENTED BUTTON */
+    --segmented-filled-bg-color: theme('colors.names-neutral.10');
+    --segmented-outlined-border-color: theme('colors.names-neutral.40');
+
+    /* SELECT */
+    --select-border-color: theme('colors.names-neutral.20');
+    --select-border-hover-color: theme('colors.names-neutral.60');
+    --select-border-focus-color: theme('colors.names-primary.80');
+    --select-border-error-color: theme('colors.names-error.80');
+    --select-icon-color: theme('colors.names-neutral.92');
+    --select-label-color: theme('colors.names-neutral.92');
+
+    /* TABLE CELL */
+    --table-cell-supporting-label-color: theme('colors.names-neutral.40');
+    --table-cell-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* TABLE HEADER CELL */
+    --table-header-text-color: theme('colors.names-neutral.92');
+
+    /* TITLE */
+    --title-main-color: theme('colors.names-neutral.92');
+    --title-subtitle-color: theme('colors.names-neutral.50');
+    --title-icon-color: theme('colors.names-neutral.50');
+
+    /* ---------------- ORGANISMS ---------------- */
+
+    /* ACCORDION */
+    --accordion-bg: theme('colors.names-neutral.6');
+    --accordion-icon-color: theme('colors.names-neutral.92');
+    --accordion-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* DIALOG */
+    --dialog-content-bg: theme('colors.names-neutral.6');
+    --dialog-title-color: theme('colors.names-neutral.92');
+    --dialog-body-color: theme('colors.names-neutral.70');
+    --dialog-outline: 1px solid theme('colors.names-neutral.20');
+    --dialog-overlay-bg: theme('colors.names-neutral.0/0.12');
+
+    /* NAVBAR */
+    --navbar-icon-color: theme('colors.names-neutral.92');
+    --navbar-slideout-bg: theme('colors.names-neutral.6');
+
+    /* TABLE */
+    --table-text-color: theme('colors.names-neutral.70');
+}

package/src/lib/tailwind/base.presets.ts

@@ -17,6 +17,7 @@ import {
 } from './constants';
 import { THEMED_CUSTOM_COLORS } from './constants/customColors.constants';
 import { firefoxPlugin, namesVariant } from './plugins';
+import { NAMES_GRADIENTS } from './constants/gradients.constants';
 
 export const BASE_CONFIG: Config = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
@@ -49,6 +50,9 @@ export const BASE_CONFIG: Config = {
                 ...THEMED_CUSTOM_COLORS,
             },
             fontFamily: FONT_FAMILIES,
+            backgroundImage: {
+                ...NAMES_GRADIENTS,
+            },
         },
     },
 };

package/src/lib/tailwind/constants/gradients.constants.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const NAMES_GRADIENTS = {
+    'names-gradient-primary': `var(--names-gradient-primary)`,
+};

package/src/storybook/blocks/TypeSet.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { TypeSetItem } from './TypeSetItem';
 import { getFontSizeLabelFromClass } from '../helpers';
 import type { TailwindCustomFonts } from '@/lib/tailwind/constants';
@@ -17,16 +18,15 @@ export function TypeSet({ typeset, label }: TypeSetProps) {
             {textClasses.map(([fontClass, [_, fontConfig]], index) => {
                 const sizeText = getFontSizeLabelFromClass(fontClass);
                 return (
-                    <>
+                    <React.Fragment key={index}>
                         <TypeSetItem
-                            key={index}
                             sampleText={label}
                             fontClass={fontClass}
                             sizeText={sizeText}
                             {...fontConfig}
                         />
                         {index !== textClasses.length - 1 && <hr className="mb-sm mt-xxs" />}
-                    </>
+                    </React.Fragment>
                 );
             })}
         </div>

package/src/storybook/constants/gradients.constants.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { NAMES_GRADIENTS } from '@/lib/tailwind/constants/gradients.constants';
+
+export const COLOR_GRADIENTS = {
+    names: NAMES_GRADIENTS,
+};

package/src/storybook/helpers/formatGradientNames.ts

@@ -0,0 +1,15 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export function formatGradientNames(
+    title: string,
+    colors: Record<string, string>,
+): Record<string, string> {
+    const formattedColors: Record<string, string> = {};
+
+    Object.entries(colors).forEach(([key, value]) => {
+        formattedColors[key.replace(`${title}-`, '')] = value;
+    });
+
+    return formattedColors;
+}

package/src/storybook/stories/atoms/Skeleton.stories.tsx

@@ -18,15 +18,15 @@ export const SkeletonCard: Story = {
         <Card>
             <CardImage shape={ImageShape.SquareRounded}>
                 <div className="h-10 w-10 animate-pulse bg-iota-neutral-90 names:bg-names-neutral-12 dark:bg-iota-neutral-12" />
-                <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
+                <Skeleton className="h-10 w-10 rounded-none" />
             </CardImage>
             <div className="flex flex-col gap-y-xs">
-                <Skeleton widthClass="w-40" heightClass="h-3.5" />
-                <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+                <Skeleton className="h-3.5 w-40" />
+                <Skeleton className="h-3 w-32" hasSecondaryColors />
             </div>
             <div className="ml-auto flex flex-col gap-y-xs">
-                <Skeleton widthClass="w-20" heightClass="h-3.5" />
-                <Skeleton widthClass="w-16" heightClass="h-3" hasSecondaryColors />
+                <Skeleton className="h-3.5 w-20" />
+                <Skeleton className="h-3 w-16" hasSecondaryColors />
             </div>
         </Card>
     ),

package/src/storybook/stories/components/DocsSyncTheme.tsx

@@ -0,0 +1,20 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { UIKitTheme } from '../../../lib/enums/theme.enums';
+import { useEffect } from 'react';
+
+export function DocsSyncTheme() {
+    useEffect(() => {
+        const docsUrl = new URL(document.location.href);
+        const globals = docsUrl.searchParams.get('globals');
+
+        const currentTheme = globals?.replace('theme:', '') || UIKitTheme.Light;
+
+        for (const theme of Object.values(UIKitTheme)) {
+            document.documentElement.classList.toggle(theme, theme === currentTheme);
+        }
+    }, []);
+
+    return null;
+}

package/src/storybook/stories/components/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './VariableSpacingShowcase';
+export * from './DocsSyncTheme';

package/src/storybook/stories/design-tokens/colors.stories.mdx

@@ -4,7 +4,11 @@ import {
     IOTA_NAMES_COLOR_PALETTE,
     SHADER_COLOR_PALETTE,
 } from '../../../lib/constants/colors.constants';
+import { COLOR_GRADIENTS } from '../../constants/gradients.constants';
+import { DocsSyncTheme } from '../components';
+import { formatGradientNames } from '../../helpers/formatGradientNames';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Colors" />
 
 ## Primitives
@@ -23,6 +27,14 @@ import {
     })}
 </ColorPalette>
 
+## Gradients
+
+<ColorPalette>
+    {Object.entries(COLOR_GRADIENTS).map(([color, values]) => {
+        return <ColorItem key={color} title={color} colors={formatGradientNames(color, values)} />;
+    })}
+</ColorPalette>
+
 ## Shaders
 
 <ColorPalette>

package/src/storybook/stories/design-tokens/icons.stories.mdx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
 import * as Icons from '@iota/apps-ui-icons';
+import { DocsSyncTheme } from '../components';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Icon Gallery" />
 
 # Icon Gallery

package/src/storybook/stories/design-tokens/typeset.stories.mdx

@@ -1,7 +1,9 @@
 import { Meta, Typeset, Unstyled } from '@storybook/blocks';
 import { TYPESETS } from '../../constants';
 import { TypeSet, TypeSetItem } from '../../blocks';
+import { DocsSyncTheme } from '../components';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Typesets" />
 
 # Typesets

package/src/storybook/stories/design-tokens/variable-spacing.stories.mdx

@@ -1,6 +1,7 @@
 import { Meta, Typeset, Unstyled } from '@storybook/blocks';
-import { VariableSpacingShowcase } from '../components';
+import { VariableSpacingShowcase, DocsSyncTheme } from '../components';
 
+<DocsSyncTheme />
 <Meta title="Design Tokens/Variable Spacing" />
 
 # Variable Spacing

package/src/storybook/stories/molecules/Chip.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Chip } from '@/components/molecules/chip/Chip';
 import { PlaceholderReplace } from '@iota/apps-ui-icons';
+import { ChipType } from '@/lib';
 
 const meta: Meta<typeof Chip> = {
     component: Chip,
@@ -25,6 +26,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         label: 'Label',
+        type: ChipType.Outline,
     },
     argTypes: {
         label: {
@@ -33,6 +35,9 @@ export const Default: Story = {
         showClose: {
             control: 'boolean',
         },
+        type: {
+            control: 'select',
+        },
         selected: {
             control: 'boolean',
         },

package/src/storybook/stories/molecules/Input.stories.tsx

@@ -4,10 +4,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Input, InputType } from '@/lib/components/molecules/input';
-import { PlaceholderReplace } from '@iota/apps-ui-icons';
+import { CheckmarkFilled, Close, Loader2, PlaceholderReplace } from '@iota/apps-ui-icons';
 import type { ComponentProps } from 'react';
 import { useCallback, useEffect, useState } from 'react';
-import { ButtonPill } from '@/lib/components/atoms/button';
+import { ButtonPill, ButtonUnstyled } from '@/lib/components/atoms/button';
+import classNames from 'classnames';
 
 type CustomStoryProps = {
     withLeadingIcon?: boolean;
@@ -160,3 +161,79 @@ export const NumericFormatInput: Story = {
         );
     },
 };
+
+export const NameResolverInput: Story = {
+    args: {
+        type: InputType.Text,
+    },
+    render: ({ type }) => {
+        const [value, setValue] = useState<string>('');
+        const { address, isLoading, error } = useNameResolver(value);
+
+        const ICON_COLORS =
+            'text-iota-primary-30 dark:text-iota-primary-70 names:text-names-primary-70';
+
+        return (
+            <Input
+                type={type}
+                placeholder="@name"
+                label="Name Resolver"
+                caption="Enter the name to resolve"
+                value={value}
+                onInput={(e) => setValue(e.currentTarget.value)}
+                supportingValue={address}
+                errorMessage={error || undefined}
+                trailingElement={
+                    <>
+                        {value.length > 0 && (
+                            <ButtonUnstyled
+                                className="input-icon-color"
+                                onClick={() => setValue('')}
+                                tabIndex={-1}
+                            >
+                                <Close className="h-5 w-5" />
+                            </ButtonUnstyled>
+                        )}
+                        {isLoading ? (
+                            <Loader2 className={classNames('h-5 w-5 animate-spin', ICON_COLORS)} />
+                        ) : address ? (
+                            <CheckmarkFilled className={classNames('h-5 w-5', ICON_COLORS)} />
+                        ) : null}
+                    </>
+                }
+            />
+        );
+    },
+};
+
+function useNameResolver(name: string) {
+    const [address, setAddress] = useState<string | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        setAddress(null);
+        setError(null);
+
+        if (!name) {
+            setIsLoading(false);
+            return;
+        }
+
+        setIsLoading(true);
+
+        const id = setTimeout(() => {
+            if (name.includes('@')) {
+                setAddress(`0x3c14…187b`);
+            } else {
+                setError("Only names with '@' are supported");
+                setAddress(null);
+            }
+            setIsLoading(false);
+        }, 1500);
+
+        return () => clearTimeout(id);
+    }, [name]);
+
+    return { address, isLoading, error };
+}