@dynamic-labs/sdk-react-core 0.16.0

package/src/lib/components/IconWithSpinner/Indicator/Indicator.cjs.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var walletConnectLogo = require('../../../shared/assets/wallet-connect-logo.cjs.js');
+require('../../../utils/constants/colors.cjs.js');
+require('../../../shared/consts/index.cjs.js');
+var pixelToRem = require('../../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+
+const Indicator = ({ indicator, iconSize }) => {
+    const walletConnectSizes = {
+        container: (iconSize * 4) / 15,
+        icon: (iconSize * 3) / 15,
+    };
+    const connectedSizes = {
+        container: iconSize / 6,
+        icon: iconSize / 9,
+    };
+    if (indicator === 'walletConnect') {
+        return (jsxRuntime.jsx("div", Object.assign({ className: 'indicator__wallet-connect', style: {
+                height: pixelToRem.pixelToRem(walletConnectSizes.container),
+                width: pixelToRem.pixelToRem(walletConnectSizes.container),
+            } }, { children: jsxRuntime.jsx(walletConnectLogo.ReactComponent, { style: {
+                    height: pixelToRem.pixelToRem(walletConnectSizes.icon),
+                    width: pixelToRem.pixelToRem(walletConnectSizes.icon),
+                } }) })));
+    }
+    return (jsxRuntime.jsx("div", Object.assign({ className: 'indicator__container indicator__container--connected', style: {
+            height: pixelToRem.pixelToRem(connectedSizes.container),
+            width: pixelToRem.pixelToRem(connectedSizes.container),
+        }, "data-testid": 'connected-indicator' }, { children: jsxRuntime.jsx("div", { className: 'indicator__icon', style: {
+                height: pixelToRem.pixelToRem(connectedSizes.icon),
+                width: pixelToRem.pixelToRem(connectedSizes.icon),
+            } }) })));
+};
+
+exports.Indicator = Indicator;

package/src/lib/components/IconWithSpinner/Indicator/Indicator.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    iconSize: number;
+    indicator: 'connected' | 'walletConnect';
+};
+export declare const Indicator: ({ indicator, iconSize }: Props) => JSX.Element;
+export {};

package/src/lib/components/IconWithSpinner/Indicator/Indicator.es.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { ReactComponent as SvgWalletConnectLogo } from '../../../shared/assets/wallet-connect-logo.es.js';
+import '../../../utils/constants/colors.es.js';
+import '../../../shared/consts/index.es.js';
+import { pixelToRem } from '../../../utils/functions/pixelToRem/pixelToRem.es.js';
+
+const Indicator = ({ indicator, iconSize }) => {
+    const walletConnectSizes = {
+        container: (iconSize * 4) / 15,
+        icon: (iconSize * 3) / 15,
+    };
+    const connectedSizes = {
+        container: iconSize / 6,
+        icon: iconSize / 9,
+    };
+    if (indicator === 'walletConnect') {
+        return (jsx("div", Object.assign({ className: 'indicator__wallet-connect', style: {
+                height: pixelToRem(walletConnectSizes.container),
+                width: pixelToRem(walletConnectSizes.container),
+            } }, { children: jsx(SvgWalletConnectLogo, { style: {
+                    height: pixelToRem(walletConnectSizes.icon),
+                    width: pixelToRem(walletConnectSizes.icon),
+                } }) })));
+    }
+    return (jsx("div", Object.assign({ className: 'indicator__container indicator__container--connected', style: {
+            height: pixelToRem(connectedSizes.container),
+            width: pixelToRem(connectedSizes.container),
+        }, "data-testid": 'connected-indicator' }, { children: jsx("div", { className: 'indicator__icon', style: {
+                height: pixelToRem(connectedSizes.icon),
+                width: pixelToRem(connectedSizes.icon),
+            } }) })));
+};
+
+export { Indicator };

package/src/lib/components/IconWithSpinner/Spinner/Spinner.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ThemeContext = require('../../../context/ThemeContext/ThemeContext.cjs.js');
+require('../../../utils/constants/colors.cjs.js');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var pixelToRem = require('../../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+
+const defaultCustomColor = '#4779FF';
+const Spinner = ({ className = '', size = 16, customSpinnerColor = '', }) => {
+    const { theme } = ThemeContext.useThemeContext();
+    const color = customSpinnerColor || theme.customColor || defaultCustomColor;
+    return (jsxRuntime.jsxs("svg", Object.assign({ style: {
+            height: pixelToRem.pixelToRem(size),
+            width: pixelToRem.pixelToRem(size),
+        }, viewBox: '0 0 42 42', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: className, "data-testid": 'spinner' }, { children: [jsxRuntime.jsx("mask", Object.assign({ id: 'path-1-inside-1_1433_60360', fill: 'white' }, { children: jsxRuntime.jsx("path", { d: 'M40.53 42C41.3419 42 42.0027 41.3416 41.9743 40.5303C41.7987 35.5162 40.726 30.5699 38.8029 25.9273C36.6922 20.8316 33.5985 16.2016 29.6985 12.3015C25.7984 8.40145 21.1684 5.30776 16.0727 3.19706C11.4301 1.27403 6.48384 0.201284 1.46972 0.0257219C0.658363 -0.00268681 0 0.658141 0 1.47C0 2.28186 0.658382 2.93711 1.46967 2.96766C6.09758 3.1419 10.6617 4.138 14.9476 5.91326C19.6866 7.87621 23.9925 10.7534 27.6196 14.3804C31.2467 18.0075 34.1238 22.3134 36.0867 27.0524C37.862 31.3383 38.8581 35.9024 39.0323 40.5303C39.0629 41.3416 39.7181 42 40.53 42Z' }) })), jsxRuntime.jsx("path", { d: 'M40.53 42C41.3419 42 42.0027 41.3416 41.9743 40.5303C41.7987 35.5162 40.726 30.5699 38.8029 25.9273C36.6922 20.8316 33.5985 16.2016 29.6985 12.3015C25.7984 8.40145 21.1684 5.30776 16.0727 3.19706C11.4301 1.27403 6.48384 0.201284 1.46972 0.0257219C0.658363 -0.00268681 0 0.658141 0 1.47C0 2.28186 0.658382 2.93711 1.46967 2.96766C6.09758 3.1419 10.6617 4.138 14.9476 5.91326C19.6866 7.87621 23.9925 10.7534 27.6196 14.3804C31.2467 18.0075 34.1238 22.3134 36.0867 27.0524C37.862 31.3383 38.8581 35.9024 39.0323 40.5303C39.0629 41.3416 39.7181 42 40.53 42Z', stroke: 'url(#paint0_linear_1433_60360)', strokeWidth: '4', mask: 'url(#path-1-inside-1_1433_60360)' }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("linearGradient", Object.assign({ id: 'paint0_linear_1433_60360', x1: '41', y1: '42', x2: '1.5', y2: '-1.82007e-07', gradientUnits: 'userSpaceOnUse' }, { children: [jsxRuntime.jsx("stop", { stopColor: color }), jsxRuntime.jsx("stop", { offset: '1', stopColor: color, stopOpacity: '0' })] })) })] })));
+};
+
+exports.Spinner = Spinner;

package/src/lib/components/IconWithSpinner/Spinner/Spinner.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    className?: string;
+    customSpinnerColor?: string;
+    size?: number;
+};
+export declare const Spinner: ({ className, size, customSpinnerColor, }: Props) => JSX.Element;
+export {};

package/src/lib/components/IconWithSpinner/Spinner/Spinner.es.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useThemeContext } from '../../../context/ThemeContext/ThemeContext.es.js';
+import '../../../utils/constants/colors.es.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { pixelToRem } from '../../../utils/functions/pixelToRem/pixelToRem.es.js';
+
+const defaultCustomColor = '#4779FF';
+const Spinner = ({ className = '', size = 16, customSpinnerColor = '', }) => {
+    const { theme } = useThemeContext();
+    const color = customSpinnerColor || theme.customColor || defaultCustomColor;
+    return (jsxs("svg", Object.assign({ style: {
+            height: pixelToRem(size),
+            width: pixelToRem(size),
+        }, viewBox: '0 0 42 42', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', className: className, "data-testid": 'spinner' }, { children: [jsx("mask", Object.assign({ id: 'path-1-inside-1_1433_60360', fill: 'white' }, { children: jsx("path", { d: 'M40.53 42C41.3419 42 42.0027 41.3416 41.9743 40.5303C41.7987 35.5162 40.726 30.5699 38.8029 25.9273C36.6922 20.8316 33.5985 16.2016 29.6985 12.3015C25.7984 8.40145 21.1684 5.30776 16.0727 3.19706C11.4301 1.27403 6.48384 0.201284 1.46972 0.0257219C0.658363 -0.00268681 0 0.658141 0 1.47C0 2.28186 0.658382 2.93711 1.46967 2.96766C6.09758 3.1419 10.6617 4.138 14.9476 5.91326C19.6866 7.87621 23.9925 10.7534 27.6196 14.3804C31.2467 18.0075 34.1238 22.3134 36.0867 27.0524C37.862 31.3383 38.8581 35.9024 39.0323 40.5303C39.0629 41.3416 39.7181 42 40.53 42Z' }) })), jsx("path", { d: 'M40.53 42C41.3419 42 42.0027 41.3416 41.9743 40.5303C41.7987 35.5162 40.726 30.5699 38.8029 25.9273C36.6922 20.8316 33.5985 16.2016 29.6985 12.3015C25.7984 8.40145 21.1684 5.30776 16.0727 3.19706C11.4301 1.27403 6.48384 0.201284 1.46972 0.0257219C0.658363 -0.00268681 0 0.658141 0 1.47C0 2.28186 0.658382 2.93711 1.46967 2.96766C6.09758 3.1419 10.6617 4.138 14.9476 5.91326C19.6866 7.87621 23.9925 10.7534 27.6196 14.3804C31.2467 18.0075 34.1238 22.3134 36.0867 27.0524C37.862 31.3383 38.8581 35.9024 39.0323 40.5303C39.0629 41.3416 39.7181 42 40.53 42Z', stroke: 'url(#paint0_linear_1433_60360)', strokeWidth: '4', mask: 'url(#path-1-inside-1_1433_60360)' }), jsx("defs", { children: jsxs("linearGradient", Object.assign({ id: 'paint0_linear_1433_60360', x1: '41', y1: '42', x2: '1.5', y2: '-1.82007e-07', gradientUnits: 'userSpaceOnUse' }, { children: [jsx("stop", { stopColor: color }), jsx("stop", { offset: '1', stopColor: color, stopOpacity: '0' })] })) })] })));
+};
+
+export { Spinner };

package/src/lib/components/IconWithSpinner/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { Spinner } from './Spinner';

package/src/lib/components/IconWithSpinner/index.d.ts

@@ -0,0 +1 @@
+export { IconWithSpinner } from './IconWithSpinner';

package/src/lib/components/IconWithStatus/IconWithStatus.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('../../utils/constants/colors.cjs.js');
+require('@dynamic-labs/multi-wallet');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var pixelToRem = require('../../utils/functions/pixelToRem/pixelToRem.cjs.js');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var StatusDot = require('../StatusDot/StatusDot.cjs.js');
+
+const IconWithStatus = ({ Icon, InnerIcon, containerClassName, iconSize = 16, variant = 'green', }) => {
+    const Inner = (jsxRuntime.jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsxRuntime.jsx(InnerIcon, {}) })) })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('icon-with-status__container', containerClassName || '') }, { children: [typeof Icon === 'string' ? (jsxRuntime.jsx("img", { style: {
+                    height: pixelToRem.pixelToRem(iconSize),
+                    width: pixelToRem.pixelToRem(iconSize),
+                }, src: Icon, alt: '', className: 'icon' })) : (jsxRuntime.jsx(Icon, { style: {
+                    height: pixelToRem.pixelToRem(iconSize),
+                    width: pixelToRem.pixelToRem(iconSize),
+                } })), InnerIcon ? (Inner) : (jsxRuntime.jsx(StatusDot.StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
+};
+
+exports.IconWithStatus = IconWithStatus;

package/src/lib/components/IconWithStatus/IconWithStatus.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Icon } from '../../shared';
+type Props = {
+    Icon: Icon | string;
+    InnerIcon?: Icon;
+    containerClassName?: string;
+    iconSize?: number;
+    variant?: 'green' | 'red';
+};
+export declare const IconWithStatus: ({ Icon, InnerIcon, containerClassName, iconSize, variant, }: Props) => JSX.Element;
+export {};

package/src/lib/components/IconWithStatus/IconWithStatus.es.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../utils/constants/colors.es.js';
+import '@dynamic-labs/multi-wallet';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { pixelToRem } from '../../utils/functions/pixelToRem/pixelToRem.es.js';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { StatusDot } from '../StatusDot/StatusDot.es.js';
+
+const IconWithStatus = ({ Icon, InnerIcon, containerClassName, iconSize = 16, variant = 'green', }) => {
+    const Inner = (jsx("div", Object.assign({ className: 'inner-icon__container' }, { children: jsx("div", Object.assign({ className: classNames('inner-icon', `inner-icon--${variant}`) }, { children: InnerIcon && jsx(InnerIcon, {}) })) })));
+    return (jsxs("div", Object.assign({ className: classNames('icon-with-status__container', containerClassName || '') }, { children: [typeof Icon === 'string' ? (jsx("img", { style: {
+                    height: pixelToRem(iconSize),
+                    width: pixelToRem(iconSize),
+                }, src: Icon, alt: '', className: 'icon' })) : (jsx(Icon, { style: {
+                    height: pixelToRem(iconSize),
+                    width: pixelToRem(iconSize),
+                } })), InnerIcon ? (Inner) : (jsx(StatusDot, { variant: variant, containerClassName: 'icon-with-status__status-dot' }))] })));
+};
+
+export { IconWithStatus };

package/src/lib/components/IconWithStatus/index.d.ts

@@ -0,0 +1 @@
+export { IconWithStatus } from './IconWithStatus';

package/src/lib/components/Image/Image.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const Image = ({ src, alt = '', fallback, className, dataTestId, }) => {
+    const [error, setError] = React.useState(false);
+    const handleError = () => {
+        setError(true);
+    };
+    return src && !error ? (jsxRuntime.jsx("img", { src: src, alt: alt, onError: handleError, className: className, "data-testid": dataTestId })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }));
+};
+
+exports.Image = Image;

package/src/lib/components/Image/Image.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+type ImageProps = {
+    alt?: string;
+    className?: string;
+    dataTestId?: string;
+    fallback?: React.ReactNode;
+    src?: string;
+};
+export declare const Image: ({ src, alt, fallback, className, dataTestId, }: ImageProps) => JSX.Element;
+export {};

package/src/lib/components/Image/Image.es.js

@@ -0,0 +1,12 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+
+const Image = ({ src, alt = '', fallback, className, dataTestId, }) => {
+    const [error, setError] = useState(false);
+    const handleError = () => {
+        setError(true);
+    };
+    return src && !error ? (jsx("img", { src: src, alt: alt, onError: handleError, className: className, "data-testid": dataTestId })) : (jsx(Fragment, { children: fallback }));
+};
+
+export { Image };

package/src/lib/components/Image/index.d.ts

@@ -0,0 +1 @@
+export { Image } from './Image';

package/src/lib/components/InfoItem/InfoItem.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../Typography/Typography.cjs.js');
+
+const InfoItem = ({ title, content, Icon, className = '', iconClassName = '', textClassName = '', }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('info-item__container', className) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: classNames.classNames('info-item__icon-container', iconClassName, {
+                'icon-container--has-content': Boolean(content),
+            }) }, { children: jsxRuntime.jsx(Icon, {}) })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'h2', className: textClassName, variant: 'body_normal', color: 'primary', weight: 'medium' }, { children: title })), content && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'info-item__secondary-text' }, { children: content })))] })] })));
+
+exports.InfoItem = InfoItem;

package/src/lib/components/InfoItem/InfoItem.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Icon } from '../../shared';
+type Props = {
+    Icon: Icon;
+    className?: string;
+    content?: string | JSX.Element;
+    iconClassName?: string;
+    textClassName?: string;
+    title: string | JSX.Element;
+};
+export declare const InfoItem: ({ title, content, Icon, className, iconClassName, textClassName, }: Props) => JSX.Element;
+export {};

package/src/lib/components/InfoItem/InfoItem.es.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../Typography/Typography.es.js';
+
+const InfoItem = ({ title, content, Icon, className = '', iconClassName = '', textClassName = '', }) => (jsxs("div", Object.assign({ className: classNames('info-item__container', className) }, { children: [jsx("div", Object.assign({ className: classNames('info-item__icon-container', iconClassName, {
+                'icon-container--has-content': Boolean(content),
+            }) }, { children: jsx(Icon, {}) })), jsxs("div", { children: [jsx(Typography, Object.assign({ as: 'h2', className: textClassName, variant: 'body_normal', color: 'primary', weight: 'medium' }, { children: title })), content && (jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', weight: 'regular', className: 'info-item__secondary-text' }, { children: content })))] })] })));
+
+export { InfoItem };

package/src/lib/components/InfoItem/index.d.ts

@@ -0,0 +1 @@
+export { InfoItem } from './InfoItem';

package/src/lib/components/Input/Input.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../Typography/Typography.cjs.js');
+
+const Input = ({ className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message, }) => (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'input__container' }, { children: [jsxRuntime.jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, disabled: disabled, className: classNames.classNames('input', className, {
+                        input__error: error,
+                        input__has_trailing: optional,
+                    }) }), jsxRuntime.jsx("label", Object.assign({ htmlFor: id, className: classNames.classNames('input__label') }, { children: label })), optional && jsxRuntime.jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_mini', className: classNames.classNames('input__message', {
+                input__message__error: error,
+            }) }, { children: message })))] }));
+
+exports.Input = Input;

package/src/lib/components/Input/Input.d.ts

@@ -0,0 +1,2 @@
+import { InputComponent } from './Input.types';
+export declare const Input: InputComponent;

package/src/lib/components/Input/Input.es.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../Typography/Typography.es.js';
+
+const Input = ({ className = '', id, label, type, onChange, onBlur, name, value, optional, error = false, disabled, message, }) => (jsxs("div", { children: [jsxs("div", Object.assign({ className: 'input__container' }, { children: [jsx("input", { name: name, value: value, onChange: onChange, onBlur: onBlur, type: type, id: id, placeholder: label, disabled: disabled, className: classNames('input', className, {
+                        input__error: error,
+                        input__has_trailing: optional,
+                    }) }), jsx("label", Object.assign({ htmlFor: id, className: classNames('input__label') }, { children: label })), optional && jsx("span", Object.assign({ className: 'input__trailing' }, { children: "Optional" }))] })), Boolean(message) && (jsx(Typography, Object.assign({ variant: 'body_mini', className: classNames('input__message', {
+                input__message__error: error,
+            }) }, { children: message })))] }));
+
+export { Input };

package/src/lib/components/Input/Input.types.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+export type InputProps = React.ComponentPropsWithoutRef<'input'> & {
+    className?: string;
+    error?: boolean;
+    id: string;
+    label: string;
+    message?: ReactNode;
+    optional?: boolean;
+};
+export type InputComponent = FC<PropsWithChildren<InputProps>>;

package/src/lib/components/Input/index.d.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

package/src/lib/components/IsBrowser/IsBrowser.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+const IsBrowser = ({ children }) => {
+    const [isBrowser, setIsBrowser] = React.useState(false);
+    // this useEffect does not run during SSR
+    React.useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    if (!isBrowser) {
+        // Justification: We specifically need to return an element instead of null
+        // in order to have stable content during SSR
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
+};
+
+exports.IsBrowser = IsBrowser;

package/src/lib/components/IsBrowser/IsBrowser.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+type IsBrowserProps = {
+    children: ReactNode;
+};
+export declare const IsBrowser: ({ children }: IsBrowserProps) => JSX.Element;
+export {};

package/src/lib/components/IsBrowser/IsBrowser.es.js

@@ -0,0 +1,20 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+const IsBrowser = ({ children }) => {
+    const [isBrowser, setIsBrowser] = useState(false);
+    // this useEffect does not run during SSR
+    useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    if (!isBrowser) {
+        // Justification: We specifically need to return an element instead of null
+        // in order to have stable content during SSR
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return jsx(Fragment, {});
+    }
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return jsx(Fragment, { children: children });
+};
+
+export { IsBrowser };

package/src/lib/components/IsBrowser/index.d.ts

@@ -0,0 +1 @@
+export { IsBrowser } from './IsBrowser';

package/src/lib/components/ListTile/ListTile.cjs.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+var Typography = require('../Typography/Typography.cjs.js');
+
+const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxRuntime.jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames.classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsxRuntime.jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: children })) })), trailing] })));
+
+exports.ListTile = ListTile;

package/src/lib/components/ListTile/ListTile.d.ts

@@ -0,0 +1,2 @@
+import { ListTileComponent } from './ListTile.types';
+export declare const ListTile: ListTileComponent;

package/src/lib/components/ListTile/ListTile.es.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+import { Typography } from '../Typography/Typography.es.js';
+
+const ListTile = ({ children, onClick, leading, trailing, style, className = '', dataTestId, }) => (jsxs("button", Object.assign({ "data-testid": dataTestId, type: 'button', className: classNames(className, 'list-tile'), onClick: onClick, style: style }, { children: [leading, jsx("div", Object.assign({ className: 'list-tile__children' }, { children: jsx(Typography, Object.assign({ weight: 'medium', variant: 'body_normal', color: 'primary' }, { children: children })) })), trailing] })));
+
+export { ListTile };

package/src/lib/components/ListTile/ListTile.types.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties, FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+export type ListTileProps = {
+    className?: string;
+    dataTestId?: string;
+    leading?: ReactNode;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    style?: CSSProperties;
+    trailing?: ReactNode;
+};
+export type ListTileComponent = FC<PropsWithChildren<ListTileProps>>;

package/src/lib/components/ListTile/index.d.ts

@@ -0,0 +1 @@
+export { ListTile } from './ListTile';

package/src/lib/components/LogoutButton/LogoutButton.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var useInternalDynamicContext = require('../../context/DynamicContext/useInternalDynamicContext.cjs.js');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs.js');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ViewContext/ViewContext.cjs.js');
+require('react');
+var logout = require('../../shared/assets/logout.cjs.js');
+require('../../utils/constants/colors.cjs.js');
+require('../../shared/consts/index.cjs.js');
+var Button = require('../Button/Button.cjs.js');
+
+const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
+    const { handleLogOut } = useInternalDynamicContext.useInternalDynamicContext();
+    return (jsxRuntime.jsx(Button.Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', onClick: handleLogOut, typographyProps: isTextButton
+            ? { color: 'secondary', variant: 'button_tertiary' }
+            : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsxRuntime.jsx(logout.ReactComponent, {}) : undefined, expanded: !isTextButton, type: 'button' }, { children: "Log out" })));
+};
+
+exports.LogoutButton = LogoutButton;

package/src/lib/components/LogoutButton/LogoutButton.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+type Props = {
+    buttonClassName?: string;
+    isTextButton?: boolean;
+};
+export declare const LogoutButton: FC<Props>;
+export {};

package/src/lib/components/LogoutButton/LogoutButton.es.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useInternalDynamicContext } from '../../context/DynamicContext/useInternalDynamicContext.es.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.es.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/multi-wallet';
+import '../../context/ViewContext/ViewContext.es.js';
+import 'react';
+import { ReactComponent as SvgLogout } from '../../shared/assets/logout.es.js';
+import '../../utils/constants/colors.es.js';
+import '../../shared/consts/index.es.js';
+import { Button } from '../Button/Button.es.js';
+
+const LogoutButton = ({ buttonClassName = '', isTextButton = false, }) => {
+    const { handleLogOut } = useInternalDynamicContext();
+    return (jsx(Button, Object.assign({ buttonClassName: buttonClassName, buttonVariant: 'tertiary', buttonRounded: 'small', buttonPadding: isTextButton ? 'none' : 'medium', onClick: handleLogOut, typographyProps: isTextButton
+            ? { color: 'secondary', variant: 'button_tertiary' }
+            : { color: 'primary', variant: 'button_secondary' }, dataTestId: 'logout-button', startSlot: isTextButton ? jsx(SvgLogout, {}) : undefined, expanded: !isTextButton, type: 'button' }, { children: "Log out" })));
+};
+
+export { LogoutButton };

package/src/lib/components/LogoutButton/index.d.ts

@@ -0,0 +1 @@
+export { LogoutButton } from './LogoutButton';

package/src/lib/components/MockedQrCode/MockedQrCode.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var iconic = require('@dynamic-labs/iconic');
+var MockContext = require('../../context/MockContext/MockContext.cjs.js');
+var ThemeContext = require('../../context/ThemeContext/ThemeContext.cjs.js');
+var QRCode = require('../../views/QrCodeView/QRCode.cjs.js');
+
+const MockedQrCode = () => {
+    const { mockedSDK } = MockContext.useMockContext();
+    const { theme } = ThemeContext.useThemeContext();
+    if (!mockedSDK)
+        return null;
+    const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
+    return (jsxRuntime.jsx(QRCode.QRCode, { Icon: jsxRuntime.jsx(iconic.CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+};
+
+exports.MockedQrCode = MockedQrCode;

package/src/lib/components/MockedQrCode/MockedQrCode.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MockedQrCode: () => JSX.Element | null;

package/src/lib/components/MockedQrCode/MockedQrCode.es.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import { CoinbaseIcon } from '@dynamic-labs/iconic';
+import { useMockContext } from '../../context/MockContext/MockContext.es.js';
+import { useThemeContext } from '../../context/ThemeContext/ThemeContext.es.js';
+import { QRCode } from '../../views/QrCodeView/QRCode.es.js';
+
+const MockedQrCode = () => {
+    const { mockedSDK } = useMockContext();
+    const { theme } = useThemeContext();
+    if (!mockedSDK)
+        return null;
+    const accentColor = theme.theme.name === 'dark' ? '#FFF' : '#1648F9';
+    return (jsx(QRCode, { Icon: jsx(CoinbaseIcon, {}), logoSize: 50, accentColor: accentColor, value: 'hello world!'.repeat(20), walletName: 'Coinbase' }));
+};
+
+export { MockedQrCode };

package/src/lib/components/MockedQrCode/index.d.ts

@@ -0,0 +1 @@
+export { MockedQrCode } from './MockedQrCode';

package/src/lib/components/ModalHeader/ModalHeader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var classNames = require('../../utils/functions/classNames/classNames.cjs.js');
+
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxRuntime.jsxs("div", Object.assign({ className: classNames.classNames('modal-header', {
+        'modal-header--absolute': positionAbsolute,
+        'modal-header--align-content-bottom': alignContent === 'bottom',
+    }) }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsxRuntime.jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+
+exports.ModalHeader = ModalHeader;

package/src/lib/components/ModalHeader/ModalHeader.d.ts

@@ -0,0 +1,2 @@
+import { ModalHeaderComponent } from './ModalHeader.types';
+export declare const ModalHeader: ModalHeaderComponent;

package/src/lib/components/ModalHeader/ModalHeader.es.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { classNames } from '../../utils/functions/classNames/classNames.es.js';
+
+const ModalHeader = ({ alignContent, children, leading, trailing, positionAbsolute = false, }) => (jsxs("div", Object.assign({ className: classNames('modal-header', {
+        'modal-header--absolute': positionAbsolute,
+        'modal-header--align-content-bottom': alignContent === 'bottom',
+    }) }, { children: [jsx("div", Object.assign({ className: 'modal-header__leading' }, { children: leading })), children, jsx("div", Object.assign({ className: 'modal-header__trailing' }, { children: trailing }))] })));
+
+export { ModalHeader };