@dynamic-labs/sdk-react-core 0.17.0-RC.9 → 0.17.0

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var walletBook = require('@dynamic-labs/wallet-book');
+var IconButton = require('../IconButton/IconButton.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+var close = require('../../shared/assets/close.cjs');
+var chevronLeft = require('../../shared/assets/chevron-left.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var Typography = require('../Typography/Typography.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
+var Alert = require('../Alert/Alert.cjs');
+var SendBalanceForm = require('../SendBalanceForm/SendBalanceForm.cjs');
+var Chip = require('../Chip/Chip.cjs');
+var FormFieldLabel = require('../FormFieldLabel/FormFieldLabel.cjs');
+var TokenBalanceCard = require('./components/TokenBalanceCard/TokenBalanceCard.cjs');
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    const balanceNumber = React.useMemo(() => {
+        if (!balance)
+            return;
+        const number = parseFloat(balance);
+        if (isNaN(number))
+            return;
+        return parseFloat(balance);
+    }, [balance]);
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(walletBook.WalletIcon, { walletName: walletName }) }))), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress.shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsxRuntime.jsx(Chip.Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxRuntime.jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsxRuntime.jsx(FormFieldLabel.FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsxRuntime.jsx(TokenBalanceCard.TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsxRuntime.jsx(SendBalanceForm.SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+};
+
+exports.SendBalancePageLayout = SendBalancePageLayout;

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

@@ -0,0 +1,19 @@
+import { FC, MouseEventHandler, ReactNode } from 'react';
+import { SendBalanceFormValues } from '../SendBalanceForm/SendBalanceForm';
+export type SendBalancePageLayoutProps = {
+    balance: string | undefined;
+    chain: string;
+    currencySymbol: string;
+    displayPoweredByDynamicFooter?: boolean;
+    error?: string;
+    initialValues?: SendBalanceFormValues;
+    isLoading: boolean;
+    networkIcon?: ReactNode;
+    networkName?: string;
+    onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    onSubmit: (formValues: SendBalanceFormValues) => void;
+    walletAddress: string;
+    walletName: string;
+};
+export declare const SendBalancePageLayout: FC<SendBalancePageLayoutProps>;

package/src/lib/components/SendBalancePageLayout/SendBalancePageLayout.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { WalletIcon } from '@dynamic-labs/wallet-book';
+import { IconButton } from '../IconButton/IconButton.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
+import { shortenWalletAddress } from '../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+import { Typography } from '../Typography/Typography.js';
+import { Icon } from '../Icon/Icon.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
+import { Alert } from '../Alert/Alert.js';
+import { SendBalanceForm } from '../SendBalanceForm/SendBalanceForm.js';
+import { Chip } from '../Chip/Chip.js';
+import { FormFieldLabel } from '../FormFieldLabel/FormFieldLabel.js';
+import { TokenBalanceCard } from './components/TokenBalanceCard/TokenBalanceCard.js';
+
+const SendBalancePageLayout = ({ error, walletAddress, onClickClose, onClickBack, walletName, onSubmit, displayPoweredByDynamicFooter = false, balance, chain, currencySymbol, initialValues, networkName, networkIcon, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close-button' }, { children: jsx(SvgClose, {}) })));
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    const balanceNumber = useMemo(() => {
+        if (!balance)
+            return;
+        const number = parseFloat(balance);
+        if (isNaN(number))
+            return;
+        return parseFloat(balance);
+    }, [balance]);
+    return (jsxs("div", { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxs("div", Object.assign({ className: 'send-balance-page-layout__header-content' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: "Send from" })), walletName && (jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(WalletIcon, { walletName: walletName }) }))), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary', as: 'p' }, { children: shortenWalletAddress(walletAddress, 3, 3) }))] })) })), jsxs("div", Object.assign({ className: 'send-balance-page-layout__body' }, { children: [jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'send-balance-page-layout__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), networkName && networkIcon && (jsx("div", Object.assign({ className: 'send-balance-page-layout__network-container' }, { children: jsx(Chip, Object.assign({ icon: networkIcon }, { children: networkName })) }))), jsxs("div", Object.assign({ className: 'send-balance-page-layout__balance-container' }, { children: [jsx(FormFieldLabel, Object.assign({ divider: true }, { children: "Token" })), jsx(TokenBalanceCard, { chain: chain, currencySymbol: currencySymbol, balance: balance })] })), jsx(SendBalanceForm, { onSubmit: onSubmit, initialValues: initialValues, balance: balanceNumber }), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'send-balance-page-layout__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+};
+
+export { SendBalancePageLayout };

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('@dynamic-labs/sdk-api');
+require('../../../../shared/logger.cjs');
+require('../../../../config/LSSuffix.cjs');
+var getChainIcon = require('../../../../shared/utils/functions/chain/getChainIcon.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/utils');
+require('../../../../utils/constants/colors.cjs');
+require('ethers');
+require('react');
+require('@dynamic-labs/iconic');
+require('../../../../context/ViewContext/ViewContext.cjs');
+require('../../../../shared/consts/index.cjs');
+var Icon = require('../../../Icon/Icon.cjs');
+var Typography = require('../../../Typography/Typography.cjs');
+
+const TokenBalanceCard = ({ chain, currencySymbol, balance, }) => {
+    const ChainIcon = getChainIcon.getChainIcon(chain);
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card' }, { children: [jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__chain' }, { children: [jsxRuntime.jsx(Icon.Icon, Object.assign({ size: 'small' }, { children: jsxRuntime.jsx(ChainIcon, {}) })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: currencySymbol }))] })), Boolean(balance) && (jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__balance-container' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: "Balance:" })), jsxRuntime.jsxs("div", Object.assign({ className: 'token-balance-card__balance' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: balance })), jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: currencySymbol }))] }))] })))] })));
+};
+
+exports.TokenBalanceCard = TokenBalanceCard;

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type TokenBalanceCardProps = {
+    balance?: string;
+    chain: string;
+    currencySymbol: string;
+};
+export declare const TokenBalanceCard: FC<TokenBalanceCardProps>;
+export {};

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/TokenBalanceCard.js

@@ -0,0 +1,22 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@dynamic-labs/sdk-api';
+import '../../../../shared/logger.js';
+import '../../../../config/LSSuffix.js';
+import { getChainIcon } from '../../../../shared/utils/functions/chain/getChainIcon.js';
+import '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/utils';
+import '../../../../utils/constants/colors.js';
+import 'ethers';
+import 'react';
+import '@dynamic-labs/iconic';
+import '../../../../context/ViewContext/ViewContext.js';
+import '../../../../shared/consts/index.js';
+import { Icon } from '../../../Icon/Icon.js';
+import { Typography } from '../../../Typography/Typography.js';
+
+const TokenBalanceCard = ({ chain, currencySymbol, balance, }) => {
+    const ChainIcon = getChainIcon(chain);
+    return (jsxs("div", Object.assign({ className: 'token-balance-card' }, { children: [jsxs("div", Object.assign({ className: 'token-balance-card__chain' }, { children: [jsx(Icon, Object.assign({ size: 'small' }, { children: jsx(ChainIcon, {}) })), jsx(Typography, Object.assign({ variant: 'body_normal', color: 'primary' }, { children: currencySymbol }))] })), Boolean(balance) && (jsxs("div", Object.assign({ className: 'token-balance-card__balance-container' }, { children: [jsx(Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: "Balance:" })), jsxs("div", Object.assign({ className: 'token-balance-card__balance' }, { children: [jsx(Typography, Object.assign({ variant: 'body_small', color: 'secondary' }, { children: balance })), jsx(Typography, Object.assign({ variant: 'body_small', color: 'tertiary' }, { children: currencySymbol }))] }))] })))] })));
+};
+
+export { TokenBalanceCard };

package/src/lib/components/SendBalancePageLayout/components/TokenBalanceCard/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from './TokenBalanceCard';

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

@@ -0,0 +1,2 @@
+export { SendBalancePageLayout } from './SendBalancePageLayout';
+export type { SendBalancePageLayoutProps } from './SendBalancePageLayout';

package/src/lib/components/ShadowDOM/utils.cjs

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('react/jsx-runtime');

package/src/lib/components/ShadowDOM/utils.js

@@ -1,5 +1,6 @@
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import 'react/jsx-runtime';

package/src/lib/components/Spinner/spinner.cjs

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');

package/src/lib/components/Spinner/spinner.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';

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

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+type StepProps = {
+    icon?: ReactElement;
+    active?: boolean;
+};
+export declare const Step: FC<PropsWithChildren<StepProps>>;
+export {};

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

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

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

@@ -0,0 +1,2 @@
+import { FC, PropsWithChildren } from 'react';
+export declare const Stepper: FC<PropsWithChildren>;

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

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

package/src/lib/components/Toolkit/Toolkit.cjs

@@ -7,6 +7,7 @@ var React = require('react');
 var Typography = require('../Typography/Typography.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');

package/src/lib/components/Toolkit/Toolkit.js

@@ -3,6 +3,7 @@ import { useMemo } from 'react';
 import { Typography } from '../Typography/Typography.js';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';

package/src/lib/components/Toolkit/components/LoginWithEmailViewDisplayPriorityOrderSwitch.cjs

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
 require('@dynamic-labs/sdk-api');
 require('../../../shared/logger.cjs');
+require('../../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../../context/ViewContext/ViewContext.cjs');

package/src/lib/components/Toolkit/components/LoginWithEmailViewDisplayPriorityOrderSwitch.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
 import '@dynamic-labs/sdk-api';
 import '../../../shared/logger.js';
+import '../../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../../context/ViewContext/ViewContext.js';

package/src/lib/components/Tooltip/Tooltip.cjs

@@ -7,6 +7,7 @@ var React = require('react');
 var reactDom = require('react-dom');
 require('@dynamic-labs/sdk-api');
 require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
 require('@dynamic-labs/iconic');
 require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
@@ -22,6 +23,7 @@ require('@dynamic-labs/multi-wallet');
 require('@dynamic-labs/rpc-providers');
 require('../../context/DynamicContext/DynamicContext.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
 var useElementById = require('../../utils/hooks/useElementById/useElementById.cjs');
 var usePrevious = require('../../utils/hooks/usePrevious/usePrevious.cjs');
 var ShadowDOM = require('../ShadowDOM/ShadowDOM.cjs');
@@ -33,6 +35,11 @@ require('../Transition/OpacityTransition/OpacityTransition.cjs');
 var useHover = require('../../utils/hooks/useHover/useHover.cjs');
 require('../IconButton/IconButton.cjs');
 require('../Alert/Alert.cjs');
+require('@dynamic-labs/wallet-book');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('formik');
+require('yup');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');

package/src/lib/components/Tooltip/Tooltip.js

@@ -3,6 +3,7 @@ import { useState, useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import '@dynamic-labs/sdk-api';
 import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
 import '@dynamic-labs/iconic';
 import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
@@ -18,6 +19,7 @@ import '@dynamic-labs/multi-wallet';
 import '@dynamic-labs/rpc-providers';
 import '../../context/DynamicContext/DynamicContext.js';
 import '../../context/ErrorContext/ErrorContext.js';
+import '../../context/AccessDeniedContext/AccessDeniedContext.js';
 import { useElementById } from '../../utils/hooks/useElementById/useElementById.js';
 import { usePrevious } from '../../utils/hooks/usePrevious/usePrevious.js';
 import { ShadowDOM } from '../ShadowDOM/ShadowDOM.js';
@@ -29,6 +31,11 @@ import '../Transition/OpacityTransition/OpacityTransition.js';
 import { useHover } from '../../utils/hooks/useHover/useHover.js';
 import '../IconButton/IconButton.js';
 import '../Alert/Alert.js';
+import '@dynamic-labs/wallet-book';
+import '../Popper/Popper/Popper.js';
+import '../Popper/PopperContext/PopperContext.js';
+import 'formik';
+import 'yup';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.cjs

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var IconWithSpinner = require('../IconWithSpinner/IconWithSpinner.cjs');
+var Icon = require('../Icon/Icon.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var close = require('../../shared/assets/close.cjs');
+var chevronLeft = require('../../shared/assets/chevron-left.cjs');
+var signCircle = require('../../shared/assets/sign-circle.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var IconButton = require('../IconButton/IconButton.cjs');
+var Typography = require('../Typography/Typography.cjs');
+var AnimatePresence = require('../AnimatePresence/AnimatePresence.cjs');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+var VerticalDrawerTransition = require('../Transition/VerticalDrawerTransition/VerticalDrawerTransition.cjs');
+var Alert = require('../Alert/Alert.cjs');
+var AppOriginTile = require('../AppOriginTile/AppOriginTile.cjs');
+var Button = require('../Button/Button.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const backButton = onClickBack && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) })));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithSpinner.IconWithSpinner, { Icon: (props) => (jsxRuntime.jsx(Icon.Icon, Object.assign({ color: 'brand-primary' }, { children: jsxRuntime.jsx(signCircle.ReactComponent, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: error && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsxRuntime.jsx(AppOriginTile.AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsxRuntime.jsx(AnimatePresence.AnimatePresence, Object.assign({ animationComponent: jsxRuntime.jsx(VerticalDrawerTransition.VerticalDrawerTransition, {}) }, { children: warningMessage && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsxRuntime.jsx(Alert.Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] }));
+};
+
+exports.TransactionConfirmationPageLayout = TransactionConfirmationPageLayout;

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

@@ -0,0 +1,17 @@
+import { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
+type TransactionConfirmationPageLayoutProps = {
+    appLogoUrl?: string;
+    appName?: string;
+    appOrigin?: string;
+    disableSendButton?: boolean;
+    displayPoweredByDynamicFooter?: boolean;
+    error?: string;
+    isLoading: boolean;
+    onClickBack?: MouseEventHandler<HTMLButtonElement>;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    onClickSend: MouseEventHandler<HTMLButtonElement>;
+    title?: ReactNode;
+    warningMessage?: string;
+};
+export declare const TransactionConfirmationPageLayout: FC<PropsWithChildren<TransactionConfirmationPageLayoutProps>>;
+export {};

package/src/lib/components/TransactionConfirmationPageLayout/TransactionConfirmationPageLayout.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ModalHeader } from '../ModalHeader/ModalHeader.js';
+import { IconWithSpinner } from '../IconWithSpinner/IconWithSpinner.js';
+import { Icon } from '../Icon/Icon.js';
+import '@dynamic-labs/sdk-api';
+import '../../shared/logger.js';
+import '../../config/LSSuffix.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import '../../context/ViewContext/ViewContext.js';
+import 'react';
+import { ReactComponent as SvgClose } from '../../shared/assets/close.js';
+import { ReactComponent as SvgChevronLeft } from '../../shared/assets/chevron-left.js';
+import { ReactComponent as SvgSignCircle } from '../../shared/assets/sign-circle.js';
+import '@dynamic-labs/utils';
+import '../../utils/constants/colors.js';
+import 'ethers';
+import '../../shared/consts/index.js';
+import { IconButton } from '../IconButton/IconButton.js';
+import { Typography } from '../Typography/Typography.js';
+import { AnimatePresence } from '../AnimatePresence/AnimatePresence.js';
+import '../Transition/ZoomTransition/ZoomTransition.js';
+import '../Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../Transition/OpacityTransition/OpacityTransition.js';
+import { VerticalDrawerTransition } from '../Transition/VerticalDrawerTransition/VerticalDrawerTransition.js';
+import { Alert } from '../Alert/Alert.js';
+import { AppOriginTile } from '../AppOriginTile/AppOriginTile.js';
+import { Button } from '../Button/Button.js';
+import { PoweredByDynamic } from '../PoweredByDynamic/PoweredByDynamic.js';
+
+const TransactionConfirmationPageLayout = ({ onClickClose, isLoading, onClickBack, title, error, appOrigin, appLogoUrl, appName, onClickSend, disableSendButton, displayPoweredByDynamicFooter = false, warningMessage, children, }) => {
+    const closeButton = onClickClose && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close', disabled: isLoading }, { children: jsx(SvgClose, {}) })));
+    const backButton = onClickBack && (jsx(IconButton, Object.assign({ type: 'button', onClick: onClickBack, "data-testid": 'back-button' }, { children: jsx(SvgChevronLeft, {}) })));
+    return (jsxs(Fragment, { children: [jsx(ModalHeader, Object.assign({ trailing: closeButton, leading: backButton, alignContent: 'bottom' }, { children: jsx(IconWithSpinner, { Icon: (props) => (jsx(Icon, Object.assign({ color: 'brand-primary' }, { children: jsx(SvgSignCircle, Object.assign({}, props)) }))), iconSize: 64, isSpinning: true }) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__body' }, { children: [jsx(Typography, Object.assign({ variant: 'title', color: 'primary', className: 'transaction-confirmation__title' }, { children: title })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: error && (jsx("div", Object.assign({ className: 'transaction-confirmation__error' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'error' }, { children: error })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__content' }, { children: [jsx("div", Object.assign({ className: 'transaction-confirmation__app-origin-tile' }, { children: jsx(AppOriginTile, { appLogoUrl: appLogoUrl, appName: appName, appOrigin: appOrigin }) })), jsx("div", Object.assign({ className: 'transaction-confirmation__rows' }, { children: children }))] })), jsx(AnimatePresence, Object.assign({ animationComponent: jsx(VerticalDrawerTransition, {}) }, { children: warningMessage && (jsx("div", Object.assign({ className: 'transaction-confirmation__warning' }, { children: jsx(Alert, Object.assign({ icon: 'error', variant: 'warning', contentDataTestId: 'warning_content' }, { children: warningMessage })) }))) })), jsxs("div", Object.assign({ className: 'transaction-confirmation__actions' }, { children: [onClickClose && (jsx(Button, Object.assign({ buttonVariant: 'secondary', onClick: onClickClose, expanded: true, buttonPadding: 'large', buttonRounded: 'default', disabled: isLoading }, { children: "Cancel" }))), jsx(Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', onClick: onClickSend, expanded: true, buttonRounded: 'default', loading: isLoading, disabled: disableSendButton }, { children: "Send" }))] })), displayPoweredByDynamicFooter && (jsx("div", Object.assign({ className: 'transaction-confirmation__footer' }, { children: jsx(PoweredByDynamic, {}) })))] }))] }));
+};
+
+export { TransactionConfirmationPageLayout };

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Typography = require('../../../Typography/Typography.cjs');
+var Skeleton = require('../../../Skeleton/Skeleton.cjs');
+
+const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, }) => (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-row' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label' }, { children: label })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-row__content', "data-testid": dataTestId }, { children: [isLoading && (jsxRuntime.jsx(Skeleton.Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true }, { children: children })), suffix && (jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular' }, { children: suffix }))), icon] }))] }))] })));
+
+exports.TransactionRow = TransactionRow;

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren, ReactNode } from 'react';
+type TransactionRowProps = {
+    dataTestId?: string;
+    icon?: ReactNode;
+    isEmpty?: boolean;
+    isLoading?: boolean;
+    label: ReactNode;
+    suffix?: ReactNode;
+    title?: string;
+};
+export declare const TransactionRow: FC<PropsWithChildren<TransactionRowProps>>;
+export {};

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.js

@@ -0,0 +1,7 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Typography } from '../../../Typography/Typography.js';
+import { Skeleton } from '../../../Skeleton/Skeleton.js';
+
+const TransactionRow = ({ label, title, children, isEmpty = false, isLoading = false, suffix, dataTestId, icon, }) => (jsxs("div", Object.assign({ className: 'transaction-row' }, { children: [jsx(Typography, Object.assign({ color: 'secondary', variant: 'body_normal', weight: 'regular', className: 'transaction-row__label' }, { children: label })), jsxs("div", Object.assign({ className: 'transaction-row__content', "data-testid": dataTestId }, { children: [isLoading && (jsx(Skeleton, { count: 1, className: 'transaction-row__skeleton' })), isLoading === false && children !== undefined && (jsxs(Fragment, { children: [jsx(Typography, Object.assign({ title: title, color: isEmpty ? 'secondary' : 'primary', variant: 'body_normal', weight: isEmpty ? 'regular' : 'medium', truncate: true }, { children: children })), suffix && (jsx(Typography, Object.assign({ as: 'span', color: 'secondary', weight: 'regular' }, { children: suffix }))), icon] }))] }))] })));
+
+export { TransactionRow };

package/src/lib/components/TransactionConfirmationPageLayout/components/TransactionRow/index.d.ts

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

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

@@ -0,0 +1 @@
+export * from './TransactionRow';

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

@@ -0,0 +1,2 @@
+export { TransactionConfirmationPageLayout } from './TransactionConfirmationPageLayout';
+export { TransactionRow } from './components';

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

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+export type Props = {
+    arrowIconClassName?: string;
+    className?: string;
+    destinationAddress: string;
+    originAddress: string;
+    textClassName?: string;
+    walletIconClassName?: string;
+    walletName?: string;
+};
+export declare const TransactionOriginDestination: FC<Props>;

package/src/lib/components/TransactionStatusLayout/TransactionStatusLayout.cjs

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ModalHeader = require('../ModalHeader/ModalHeader.cjs');
+var IconButton = require('../IconButton/IconButton.cjs');
+require('@dynamic-labs/sdk-api');
+require('../../shared/logger.cjs');
+require('../../config/LSSuffix.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('../../context/ViewContext/ViewContext.cjs');
+require('react');
+var close = require('../../shared/assets/close.cjs');
+var check = require('../../shared/assets/check.cjs');
+var signCircle = require('../../shared/assets/sign-circle.cjs');
+var shortenWalletAddress = require('../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+require('@dynamic-labs/utils');
+require('../../utils/constants/colors.cjs');
+require('ethers');
+require('../../shared/consts/index.cjs');
+var IconWithStatus = require('../IconWithStatus/IconWithStatus.cjs');
+var Typography = require('../Typography/Typography.cjs');
+var PoweredByDynamic = require('../PoweredByDynamic/PoweredByDynamic.cjs');
+var Button = require('../Button/Button.cjs');
+require('@dynamic-labs/multi-wallet');
+require('../../context/ThemeContext/ThemeContext.cjs');
+require('../../config/ApiEndpoint.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../context/DynamicContext/DynamicContext.cjs');
+require('../../context/ErrorContext/ErrorContext.cjs');
+require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('react-dom');
+require('../ShadowDOM/ShadowDOM.cjs');
+require('react-focus-lock');
+require('../Transition/ZoomTransition/ZoomTransition.cjs');
+require('../Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../Transition/OpacityTransition/OpacityTransition.cjs');
+require('../Alert/Alert.cjs');
+require('../Popper/Popper/Popper.cjs');
+require('../Popper/PopperContext/PopperContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('formik');
+require('yup');
+require('../../context/MockContext/MockContext.cjs');
+require('../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
+var TransactionRow = require('../TransactionConfirmationPageLayout/components/TransactionRow/TransactionRow.cjs');
+
+const TransactionStatusLayout = ({ destinationAddress, amount, networkName, networkCurrency, NetworkIcon, onDone, displayPoweredByDynamicFooter = true, onClickClose, }) => {
+    const closeButton = onClickClose && (jsxRuntime.jsx(IconButton.IconButton, Object.assign({ type: 'button', onClick: onClickClose, "data-testid": 'close' }, { children: jsxRuntime.jsx(close.ReactComponent, {}) })));
+    const networkIcon = (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__network-icon' }, { children: NetworkIcon })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ trailing: closeButton, alignContent: 'bottom' }, { children: jsxRuntime.jsx(IconWithStatus.IconWithStatus, { containerClassName: 'transaction-status-layout__status-icon', iconSize: 50, Icon: signCircle.ReactComponent, InnerIcon: check.ReactComponent }) })), jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ weight: 'medium', variant: 'title', color: 'primary', className: 'transaction-status-layout__title' }, { children: "Transaction successfully sent" })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__content' }, { children: jsxRuntime.jsxs("div", Object.assign({ className: 'transaction-status-layout__rows' }, { children: [jsxRuntime.jsx(TransactionRow.TransactionRow, Object.assign({ label: 'Recipient' }, { children: shortenWalletAddress.shortenWalletAddress(destinationAddress, 3, 3) })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Network' }, { children: [networkIcon, jsxRuntime.jsx("span", Object.assign({ className: 'transaction-status-layout__network-name' }, { children: networkName }))] })), jsxRuntime.jsxs(TransactionRow.TransactionRow, Object.assign({ label: 'Total amount' }, { children: [amount, jsxRuntime.jsx(Typography.Typography, Object.assign({ as: 'span', color: 'secondary', className: 'transaction-status-layout__network-currency' }, { children: networkCurrency }))] }))] })) })), jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__actions' }, { children: jsxRuntime.jsx(Button.Button, Object.assign({ buttonVariant: 'primary', buttonPadding: 'large', expanded: true, buttonRounded: 'default', onClick: onDone }, { children: "Continue" })) })), displayPoweredByDynamicFooter && (jsxRuntime.jsx("div", Object.assign({ className: 'transaction-status-layout__footer' }, { children: jsxRuntime.jsx(PoweredByDynamic.PoweredByDynamic, {}) })))] }))] })));
+};
+
+exports.TransactionStatusLayout = TransactionStatusLayout;

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

@@ -0,0 +1,12 @@
+import { FC, MouseEventHandler, ReactNode } from 'react';
+export type Props = {
+    NetworkIcon?: ReactNode;
+    amount: string;
+    destinationAddress: string;
+    displayPoweredByDynamicFooter?: boolean;
+    networkCurrency: string;
+    networkName: string;
+    onClickClose?: MouseEventHandler<HTMLButtonElement>;
+    onDone: MouseEventHandler<HTMLButtonElement>;
+};
+export declare const TransactionStatusLayout: FC<Props>;