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

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

@@ -24,16 +24,16 @@ var Portal = require('../../components/Portal/Portal.cjs');
 require('react-dom');
 require('../../config/ApiEndpoint.cjs');
 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');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/Alert/Alert.cjs');
-require('../../context/WalletGroupContext/WalletGroupContext.cjs');
-require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('../../context/MockContext/MockContext.cjs');
 require('../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.cjs');
@@ -43,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

@@ -20,16 +20,16 @@ import { Portal } from '../../components/Portal/Portal.js';
 import 'react-dom';
 import '../../config/ApiEndpoint.js';
 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';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/Alert/Alert.js';
-import '../../context/WalletGroupContext/WalletGroupContext.js';
-import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '../../context/MockContext/MockContext.js';
 import '../../context/CaptchaContext/CaptchaContext.js';
 import '../../utils/hooks/useUserUpdateRequest/useUserUpdateRequest.js';
@@ -39,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/modals/index.d.ts

@@ -1,4 +1,3 @@
 export * from './SignMessageConfirmationModal';
 export * from './TransactionConfirmationModal';
 export * from './SendBalanceModal';
-export * from './MultiWalletStepSelectorModal';

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.error(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,12 +59,26 @@ 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() {
+        if (typeof window === 'undefined') {
+            return [];
+        }
+        return Object.keys(window.localStorage);
+    }
 }
 LocalStorage.getSuffix = () => LocalStorage.__suffix__ || '';
 

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

@@ -2,10 +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.error(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,12 +55,26 @@ 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() {
+        if (typeof window === 'undefined') {
+            return [];
+        }
+        return Object.keys(window.localStorage);
+    }
 }
 LocalStorage.getSuffix = () => LocalStorage.__suffix__ || '';
 

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 };