@dynamic-labs/sdk-react-core/src/lib/components/IconWithSpinner/IconWithSpinner.js

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
import { jsxs, jsx } from 'react/jsx-runtime';
import { isLegacySafari } from '@dynamic-labs/utils';
import { classNames } from '../../utils/functions/classNames/classNames.js';
import '@dynamic-labs/sdk-api-core';
import '../../utils/constants/values.js';
import '../../../../_virtual/_tslib.js';
import '@dynamic-labs/multi-wallet';
import '../../shared/logger.js';
import '../../utils/constants/colors.js';
import 'react-international-phone';
import '@dynamic-labs/iconic';
import '@dynamic-labs/wallet-connector-core';
import 'react';
import '../../context/ViewContext/ViewContext.js';
import '@dynamic-labs/wallet-book';
import '../../shared/consts/index.js';
import '../../store/state/nonce/nonce.js';
import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.js';
import '../../store/state/projectSettings/projectSettings.js';
import '../../config/ApiEndpoint.js';
import '../../store/state/user/user.js';
import '../../locale/locale.js';
import '../../store/state/dynamicContextProps/dynamicContextProps.js';
import '../../store/state/primaryWalletId/primaryWalletId.js';
import '../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
import { Spinner } from './Spinner/Spinner.js';
import { Indicator } from './Indicator/Indicator.js';

const iconRatio = 7 / 11;
const IconWithSpinner = ({ iconSize = 24, Icon, isSpinning = false, className, style, indicator, customSpinnerColor, treatAsFunctionComponent, }) => {
    const realIconSize = iconSize * iconRatio;
    const spinnerIconSize = iconSize / 2;
    const effectiveContainerClassName = classNames('icon-with-spinner__container', className);
    const IconAsFC = Icon;
    return (jsxs("div", { className: effectiveContainerClassName, style: Object.assign({ height: pixelToRem(iconSize), width: pixelToRem(iconSize) }, style), children: [Icon && (jsxs("div", { style: {
                    height: pixelToRem(realIconSize),
                    width: pixelToRem(realIconSize),
                }, className: 'icon-with-spinner__icon-container', children: [treatAsFunctionComponent || typeof Icon === 'function' ? (jsx(IconAsFC, { height: realIconSize, width: realIconSize })) : (Icon), indicator && jsx(Indicator, { indicator: indicator, iconSize: iconSize })] })), isSpinning && !isLegacySafari() && (jsx("div", { className: 'icon-with-spinner__spinner-container icon-with-spinner__animation', "data-chromatic": 'ignore', style: {
                    height: pixelToRem(iconSize),
                    width: pixelToRem(iconSize),
                }, children: jsx(Spinner, { className: 'icon-with-spinner__spinner', customSpinnerColor: customSpinnerColor, size: spinnerIconSize }) }))] }));
};

export { IconWithSpinner, iconRatio };