remix-nlux/packages/shared/src/components/Avatar/utils/updateNameOnAvatar.ts

Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.

import {AvatarProps} from '../props';

export const updateNameOnAvatar = (
    element: HTMLElement,
    propsBefore: AvatarProps,
    propsAfter: AvatarProps,
): void => {
    if (propsBefore.name === propsAfter.name) {
        return;
    }

    if (typeof propsAfter.avatar === 'string') {
        const letter = propsAfter.name && propsAfter.name.length > 0 ?
            propsAfter.name[0].toUpperCase() : '';

        const letterContainer = element.querySelector(
            '* > .nlux-comp-avatarContainer > .avtr_ltr',
        );

        letterContainer?.replaceChildren(letter);
    }
};