@dynamic-labs/sdk-react-core 0.18.0-RC.9 → 0.18.0-beta.28

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.cjs

@@ -32,6 +32,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
 var IconButton = require('../../components/IconButton/IconButton.cjs');
 var Button = require('../../components/Button/Button.cjs');
@@ -43,11 +44,13 @@ require('../../components/Popper/Popper/Popper.cjs');
 require('../../components/Popper/PopperContext/PopperContext.cjs');
 require('formik');
 require('yup');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
-const ConnectedWalletsListLayout = ({ title, onClickBack, onClickClose, onClickAction, actionButtonText = 'Done', children, }) => {
+const ConnectedWalletsListLayout = ({ title, body, onClickBack, onClickClose, onClickAction, actionButtonText = 'Continue', children, }) => {
     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, {}) })));
-    return (jsxRuntime.jsxs("div", Object.assign({ className: 'connected-wallets-list-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary' }, { children: title })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'connected-wallets-list-layout__body' }, { children: [children, jsxRuntime.jsx(Button.Button, Object.assign({ buttonPadding: 'large', buttonRounded: 'default', buttonVariant: 'primary', onClick: onClickAction }, { children: actionButtonText }))] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: 'connected-wallets-list-layout' }, { children: [jsxRuntime.jsx(ModalHeader.ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'title', color: 'primary' }, { children: title })) })), jsxRuntime.jsxs("div", Object.assign({ className: 'connected-wallets-list-layout__body' }, { children: [jsxRuntime.jsx(Typography.Typography, Object.assign({ variant: 'body_normal', color: 'secondary', className: 'connected-wallets-list-layout__body__text' }, { children: body })), children, jsxRuntime.jsx(Button.Button, Object.assign({ buttonPadding: 'large', buttonRounded: 'default', buttonVariant: 'primary', onClick: onClickAction }, { children: actionButtonText }))] }))] })));
 };
 
 exports.ConnectedWalletsListLayout = ConnectedWalletsListLayout;

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.d.ts

@@ -1,6 +1,7 @@
 import { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react';
 export type ConnectedWalletsListLayoutProps = {
     title: ReactNode;
+    body?: ReactNode;
     onClickClose?: MouseEventHandler<HTMLButtonElement>;
     onClickBack?: MouseEventHandler<HTMLButtonElement>;
     onClickAction?: MouseEventHandler<HTMLButtonElement>;

package/src/lib/layouts/ConnectedWalletsListLayout/ConnectedWalletsListLayout.js

@@ -28,6 +28,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
 import { IconButton } from '../../components/IconButton/IconButton.js';
 import { Button } from '../../components/Button/Button.js';
@@ -39,11 +40,13 @@ import '../../components/Popper/Popper/Popper.js';
 import '../../components/Popper/PopperContext/PopperContext.js';
 import 'formik';
 import 'yup';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
-const ConnectedWalletsListLayout = ({ title, onClickBack, onClickClose, onClickAction, actionButtonText = 'Done', children, }) => {
+const ConnectedWalletsListLayout = ({ title, body, onClickBack, onClickClose, onClickAction, actionButtonText = 'Continue', children, }) => {
     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, {}) })));
-    return (jsxs("div", Object.assign({ className: 'connected-wallets-list-layout' }, { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsx(Typography, Object.assign({ variant: 'title', color: 'primary' }, { children: title })) })), jsxs("div", Object.assign({ className: 'connected-wallets-list-layout__body' }, { children: [children, jsx(Button, Object.assign({ buttonPadding: 'large', buttonRounded: 'default', buttonVariant: 'primary', onClick: onClickAction }, { children: actionButtonText }))] }))] })));
+    return (jsxs("div", Object.assign({ className: 'connected-wallets-list-layout' }, { children: [jsx(ModalHeader, Object.assign({ leading: backButton, trailing: closeButton }, { children: jsx(Typography, Object.assign({ variant: 'title', color: 'primary' }, { children: title })) })), jsxs("div", Object.assign({ className: 'connected-wallets-list-layout__body' }, { children: [jsx(Typography, Object.assign({ variant: 'body_normal', color: 'secondary', className: 'connected-wallets-list-layout__body__text' }, { children: body })), children, jsx(Button, Object.assign({ buttonPadding: 'large', buttonRounded: 'default', buttonVariant: 'primary', onClick: onClickAction }, { children: actionButtonText }))] }))] })));
 };
 
 export { ConnectedWalletsListLayout };

package/src/lib/modals/SendBalanceModal/SendBalanceModal.cjs

@@ -27,6 +27,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var SendBalanceView = require('../../views/SendBalanceView/SendBalanceView.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
@@ -43,6 +44,8 @@ require('formik');
 require('yup');
 var Modal = require('../../components/Modal/Modal.cjs');
 var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const SendBalanceModal = ({ initialRecipientAddress, initialValue, onReject, onSuccess, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/SendBalanceModal/SendBalanceModal.js

@@ -23,6 +23,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { SendBalanceView } from '../../views/SendBalanceView/SendBalanceView.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
@@ -39,6 +40,8 @@ import 'formik';
 import 'yup';
 import { Modal } from '../../components/Modal/Modal.js';
 import { ModalCard } from '../../components/ModalCard/ModalCard.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const SendBalanceModal = ({ initialRecipientAddress, initialValue, onReject, onSuccess, }) => {
     usePreventPageScroll(true);

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.cjs

@@ -31,6 +31,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var ModalHeader = require('../../components/ModalHeader/ModalHeader.cjs');
 var IconButton = require('../../components/IconButton/IconButton.cjs');
 var PoweredByDynamic = require('../../components/PoweredByDynamic/PoweredByDynamic.cjs');
@@ -54,6 +55,8 @@ require('formik');
 require('yup');
 var Modal = require('../../components/Modal/Modal.cjs');
 var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/SignMessageConfirmationModal/SignMessageConfirmationModal.js

@@ -27,6 +27,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { ModalHeader } from '../../components/ModalHeader/ModalHeader.js';
 import { IconButton } from '../../components/IconButton/IconButton.js';
 import { PoweredByDynamic } from '../../components/PoweredByDynamic/PoweredByDynamic.js';
@@ -50,6 +51,8 @@ import 'formik';
 import 'yup';
 import { Modal } from '../../components/Modal/Modal.js';
 import { ModalCard } from '../../components/ModalCard/ModalCard.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const SignMessageConfirmationModal = ({ appLogoUrl, appName, appOrigin, message, handler, onReject, onSignMessage, }) => {
     usePreventPageScroll(true);

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.cjs

@@ -27,6 +27,7 @@ require('@dynamic-labs/rpc-providers');
 require('../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.cjs');
 require('../../context/ErrorContext/ErrorContext.cjs');
 require('../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../context/AccountExistsContext/AccountExistsContext.cjs');
 var TransactionConfirmationView = require('../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
 require('../../components/IconButton/IconButton.cjs');
 require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
@@ -42,6 +43,8 @@ require('formik');
 require('yup');
 var Modal = require('../../components/Modal/Modal.cjs');
 var ModalCard = require('../../components/ModalCard/ModalCard.cjs');
+require('../../components/InlineWidget/InlineWidget.cjs');
+require('../../components/MenuList/Dropdown/Dropdown.cjs');
 
 const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, }) => {
     usePreventPageScroll.usePreventPageScroll(true);

package/src/lib/modals/TransactionConfirmationModal/TransactionConfirmationModal.js

@@ -23,6 +23,7 @@ import '@dynamic-labs/rpc-providers';
 import '../../utils/hooks/useWallets/utils/verifyMagicIsSetup/verifyMagicIsSetup.js';
 import '../../context/ErrorContext/ErrorContext.js';
 import '../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../context/AccountExistsContext/AccountExistsContext.js';
 import { TransactionConfirmationView } from '../../views/TransactionConfirmationView/TransactionConfirmationView.js';
 import '../../components/IconButton/IconButton.js';
 import '../../components/Transition/ZoomTransition/ZoomTransition.js';
@@ -38,6 +39,8 @@ import 'formik';
 import 'yup';
 import { Modal } from '../../components/Modal/Modal.js';
 import { ModalCard } from '../../components/ModalCard/ModalCard.js';
+import '../../components/InlineWidget/InlineWidget.js';
+import '../../components/MenuList/Dropdown/Dropdown.js';
 
 const TransactionConfirmationModal = ({ title, handler, onReject, onTransactionResponseSuccess, transaction, provider, }) => {
     usePreventPageScroll(true);

package/src/lib/shared/types/index.d.ts

@@ -10,6 +10,7 @@ export type Wallet = {
     connected: boolean;
     connector: WalletConnector;
     id: string;
+    network?: string | number;
 };
 export type WalletAction = 'select' | 'unlink';
 export type WalletWithAction = {
@@ -28,6 +29,7 @@ export type UserProfile = UserFields & {
     userId?: string;
     verifiedCredentials: JwtVerifiedCredential[];
     wallet?: string;
+    scope?: string;
 };
 export type Icon = React.FunctionComponent<React.SVGProps<SVGSVGElement> & {
     title?: string | undefined;
@@ -78,7 +80,7 @@ export interface ProjectSettingsProps {
 export type WalletProvider = `${WalletProviderEnum}`;
 export interface VerifyWallet {
     captchaToken?: string;
-    chain: string;
+    chain: string | undefined;
     messageToSign: string;
     network: string | number | undefined;
     oauth?: OauthProviderRequest;
@@ -98,8 +100,9 @@ export type OnAuthSuccess = (params: {
     walletConnector: WalletConnector | undefined;
 }) => void;
 export type OnConnectSuccess = (params: {
-    walletConnector: WalletConnector | undefined;
+    walletConnector: WalletConnector | null;
 }) => void;
+export type OnBeforeConnectSuccessConfirmation = (wallet: Partial<Wallet>) => Promise<boolean>;
 export type OnUserProfileUpdate = (user: UserProfile) => void;
 export type MultiWalletWidgetState = 'idle' | 'awaiting_account_switch' | 'awaiting_connection' | 'awaiting_signature' | 'detected_new_wallet';
 export type AccountSwitchState = 'idle' | 'linking_new_wallet' | 'switching_primary' | 'primary_not_connected';
@@ -143,6 +146,7 @@ export type DynamicEventsCallbacks = {
     onAuthFlowOpen?: () => void;
     onAuthSuccess?: OnAuthSuccess;
     onConnectSuccess?: OnConnectSuccess;
+    onBeforeConnectSuccessConfirmation?: OnBeforeConnectSuccessConfirmation;
     onLinkSuccess?: OnAuthSuccess;
     onLogout?: (user: UserProfile | undefined) => void;
     onUnlinkSuccess?: (unlinkedWallet: JwtVerifiedCredential) => void;

package/src/lib/shared/utils/classes/storage/localStorage.cjs

@@ -6,46 +6,50 @@ var localStorage = require('../../../../utils/constants/localStorage.cjs');
 require('../../../../utils/constants/colors.cjs');
 var logger = require('../../../logger.cjs');
 
+const connectedKeys = {
+    [localStorage.AUTH_TOKEN]: [localStorage.AUTH_USER],
+    [localStorage.AUTH_USER]: [localStorage.AUTH_TOKEN],
+};
 class LocalStorage {
     static getDynamicLSKey(key) {
         return `${key}${LocalStorage.getSuffix()}`;
     }
+    static validateRequest(key, fromAuxiliarAuthFunctions) {
+        if (key === localStorage.AUTH_TOKEN && !fromAuxiliarAuthFunctions) {
+            throw new Error('You cannot access AUTH_TOKEN through localStorage. Use getAuthToken/ storeAuthToken helper functions instead');
+        }
+    }
     static setSuffix(localStorageSuffix) {
         if (!LocalStorage.__suffix__) {
             const suffix = (localStorageSuffix && `_${localStorageSuffix}`) || '';
             LocalStorage.__suffix__ = suffix;
         }
     }
-    // Will be refactored on INC-155
-    static getAuthTokenValue() {
+    /**
+     *
+     * @param key
+     * @param getAuth - verifies if the request to get AUTH_TOKEN is comming from getAuthToken and not directly
+     * @returns
+     */
+    static getFromLS(key, getAuth = false) {
         if (typeof window === 'undefined') {
             return undefined;
         }
-        const value = window.localStorage.getItem(LocalStorage.getDynamicLSKey(localStorage.AUTH_TOKEN));
-        try {
-            if (value) {
-                return JSON.parse(value);
-            }
-        }
-        catch (e) {
-            logger.logger.debug(e);
-            // Return auth token string for backwards compatibility
-            return value || undefined;
-        }
-        return undefined;
-    }
-    static getFromLS(key) {
-        if (typeof window === 'undefined') {
+        LocalStorage.validateRequest(key, getAuth);
+        const value = window.localStorage.getItem(LocalStorage.getDynamicLSKey(key));
+        if (!value) {
             return undefined;
         }
-        const value = window.localStorage.getItem(LocalStorage.getDynamicLSKey(key));
         try {
-            if (value) {
-                return JSON.parse(value);
-            }
+            return JSON.parse(value);
         }
-        catch (e) {
-            logger.logger.error(e);
+        catch (error) {
+            logger.logger.debug(`Error while parsing ${key} from local storage`, { value });
+            // keep it in case handleLogOut is not yet loaded when calling this method
+            [key]
+                .concat(connectedKeys[key] || [])
+                .forEach((_key) => LocalStorage.removeFromLS(_key));
+            window.dispatchEvent(new Event('logOut'));
         }
         return undefined;
     }
@@ -55,10 +59,18 @@ class LocalStorage {
         }
         return window.localStorage.removeItem(LocalStorage.getDynamicLSKey(key));
     }
-    static setToLS(key, value) {
+    /**
+     *
+     * @param key
+     * @param value
+     * @param storeAuth - verifies if the request to get AUTH_TOKEN is comming from getAuthToken and not directly
+     * @returns
+     */
+    static setToLS(key, value, storeAuth = false) {
         if (typeof window === 'undefined') {
             return;
         }
+        LocalStorage.validateRequest(key, storeAuth);
         window.localStorage.setItem(LocalStorage.getDynamicLSKey(key), JSON.stringify(value));
     }
     static getKeys() {

package/src/lib/shared/utils/classes/storage/localStorage.d.ts

@@ -2,11 +2,24 @@ export declare class LocalStorage {
     private static __suffix__;
     static getSuffix: () => string;
     private static getDynamicLSKey;
+    private static validateRequest;
     static setSuffix(localStorageSuffix?: string): void;
-    static getAuthTokenValue(): string | undefined;
-    static getFromLS<T = any>(key: string): T | undefined;
+    /**
+     *
+     * @param key
+     * @param getAuth - verifies if the request to get AUTH_TOKEN is comming from getAuthToken and not directly
+     * @returns
+     */
+    static getFromLS<T = any>(key: string, getAuth?: boolean): T | undefined;
     static removeFromLS(key: string): void;
-    static setToLS<T = any>(key: string, value: T): void;
+    /**
+     *
+     * @param key
+     * @param value
+     * @param storeAuth - verifies if the request to get AUTH_TOKEN is comming from getAuthToken and not directly
+     * @returns
+     */
+    static setToLS<T = any>(key: string, value: T, storeAuth?: boolean): void;
     static getKeys(): string[];
 }
 export default LocalStorage;

package/src/lib/shared/utils/classes/storage/localStorage.js

@@ -1,47 +1,51 @@
-import { AUTH_TOKEN } from '../../../../utils/constants/localStorage.js';
+import { AUTH_TOKEN, AUTH_USER } from '../../../../utils/constants/localStorage.js';
 import '../../../../utils/constants/colors.js';
 import { logger } from '../../../logger.js';
 
+const connectedKeys = {
+    [AUTH_TOKEN]: [AUTH_USER],
+    [AUTH_USER]: [AUTH_TOKEN],
+};
 class LocalStorage {
     static getDynamicLSKey(key) {
         return `${key}${LocalStorage.getSuffix()}`;
     }
+    static validateRequest(key, fromAuxiliarAuthFunctions) {
+        if (key === AUTH_TOKEN && !fromAuxiliarAuthFunctions) {
+            throw new Error('You cannot access AUTH_TOKEN through localStorage. Use getAuthToken/ storeAuthToken helper functions instead');
+        }
+    }
     static setSuffix(localStorageSuffix) {
         if (!LocalStorage.__suffix__) {
             const suffix = (localStorageSuffix && `_${localStorageSuffix}`) || '';
             LocalStorage.__suffix__ = suffix;
         }
     }
-    // Will be refactored on INC-155
-    static getAuthTokenValue() {
+    /**
+     *
+     * @param key
+     * @param getAuth - verifies if the request to get AUTH_TOKEN is comming from getAuthToken and not directly
+     * @returns
+     */
+    static getFromLS(key, getAuth = false) {
         if (typeof window === 'undefined') {
             return undefined;
         }
-        const value = window.localStorage.getItem(LocalStorage.getDynamicLSKey(AUTH_TOKEN));
-        try {
-            if (value) {
-                return JSON.parse(value);
-            }
-        }
-        catch (e) {
-            logger.debug(e);
-            // Return auth token string for backwards compatibility
-            return value || undefined;
-        }
-        return undefined;
-    }
-    static getFromLS(key) {
-        if (typeof window === 'undefined') {
+        LocalStorage.validateRequest(key, getAuth);
+        const value = window.localStorage.getItem(LocalStorage.getDynamicLSKey(key));
+        if (!value) {
             return undefined;
         }
-        const value = window.localStorage.getItem(LocalStorage.getDynamicLSKey(key));
         try {
-            if (value) {
-                return JSON.parse(value);
-            }
+            return JSON.parse(value);
         }
-        catch (e) {
-            logger.error(e);
+        catch (error) {
+            logger.debug(`Error while parsing ${key} from local storage`, { value });
+            // keep it in case handleLogOut is not yet loaded when calling this method
+            [key]
+                .concat(connectedKeys[key] || [])
+                .forEach((_key) => LocalStorage.removeFromLS(_key));
+            window.dispatchEvent(new Event('logOut'));
         }
         return undefined;
     }
@@ -51,10 +55,18 @@ class LocalStorage {
         }
         return window.localStorage.removeItem(LocalStorage.getDynamicLSKey(key));
     }
-    static setToLS(key, value) {
+    /**
+     *
+     * @param key
+     * @param value
+     * @param storeAuth - verifies if the request to get AUTH_TOKEN is comming from getAuthToken and not directly
+     * @returns
+     */
+    static setToLS(key, value, storeAuth = false) {
         if (typeof window === 'undefined') {
             return;
         }
+        LocalStorage.validateRequest(key, storeAuth);
         window.localStorage.setItem(LocalStorage.getDynamicLSKey(key), JSON.stringify(value));
     }
     static getKeys() {

package/src/lib/shared/utils/hooks/index.d.ts

@@ -3,3 +3,5 @@ export { useOnClickOutside } from './useOnClickOutside';
 export { usePreventPageScroll } from './usePreventPageScroll';
 export { useGlobalLoading } from './useGlobalLoading';
 export { useMediaQuery } from './useMediaQuery';
+export { useEffectOnce } from './useEffectOnce';
+export { useForwardedRef } from './useForwardedRef';

package/src/lib/shared/utils/hooks/useEffectOnce/index.d.ts

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

package/src/lib/shared/utils/hooks/useEffectOnce/useEffectOnce.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Runs an effect function only once during component initialization.
+ *
+ * @param {Function} effect - The effect function to be executed.
+ * @returns {void}
+ *
+ * @example
+ * function ExampleComponent() {
+ *   useEffectOnce(() => {
+ *     console.log('Effect executed once');
+ *   });
+ *
+ *   return <div>Example Component</div>;
+ * }
+ */
+const useEffectOnce = (effect) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(effect, []);
+};
+
+exports.useEffectOnce = useEffectOnce;

package/src/lib/shared/utils/hooks/useEffectOnce/useEffectOnce.d.ts

@@ -0,0 +1,17 @@
+import { EffectCallback } from 'react';
+/**
+ * Runs an effect function only once during component initialization.
+ *
+ * @param {Function} effect - The effect function to be executed.
+ * @returns {void}
+ *
+ * @example
+ * function ExampleComponent() {
+ *   useEffectOnce(() => {
+ *     console.log('Effect executed once');
+ *   });
+ *
+ *   return <div>Example Component</div>;
+ * }
+ */
+export declare const useEffectOnce: (effect: EffectCallback) => void;

package/src/lib/shared/utils/hooks/useEffectOnce/useEffectOnce.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+/**
+ * Runs an effect function only once during component initialization.
+ *
+ * @param {Function} effect - The effect function to be executed.
+ * @returns {void}
+ *
+ * @example
+ * function ExampleComponent() {
+ *   useEffectOnce(() => {
+ *     console.log('Effect executed once');
+ *   });
+ *
+ *   return <div>Example Component</div>;
+ * }
+ */
+const useEffectOnce = (effect) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+};
+
+export { useEffectOnce };

package/src/lib/shared/utils/hooks/useForwardedRef/index.d.ts

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

package/src/lib/shared/utils/hooks/useForwardedRef/useForwardedRef.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+// Allows access to a forwarded ref's "current" field
+// source: https://stackoverflow.com/questions/73015696/whats-the-difference-between-reacts-forwardedref-and-refobject
+//
+const useForwardedRef = (ref) => {
+    const innerRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(innerRef.current);
+        }
+        else {
+            ref.current = innerRef.current;
+        }
+    }, [ref, innerRef]);
+    return innerRef;
+};
+
+exports.useForwardedRef = useForwardedRef;

package/src/lib/shared/utils/hooks/useForwardedRef/useForwardedRef.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useForwardedRef: <T>(ref: import("react").ForwardedRef<T>) => import("react").RefObject<T>;

package/src/lib/shared/utils/hooks/useForwardedRef/useForwardedRef.js

@@ -0,0 +1,21 @@
+import { useRef, useEffect } from 'react';
+
+// Allows access to a forwarded ref's "current" field
+// source: https://stackoverflow.com/questions/73015696/whats-the-difference-between-reacts-forwardedref-and-refobject
+//
+const useForwardedRef = (ref) => {
+    const innerRef = useRef(null);
+    useEffect(() => {
+        if (!ref)
+            return;
+        if (typeof ref === 'function') {
+            ref(innerRef.current);
+        }
+        else {
+            ref.current = innerRef.current;
+        }
+    }, [ref, innerRef]);
+    return innerRef;
+};
+
+export { useForwardedRef };