@dynamic-labs/sdk-react-core 0.18.0-RC.2 → 0.18.0-RC.21

package/src/lib/utils/hooks/multiWallet/useVerifyOnAwaitingSignature/useVerifyOnAwaitingSignature.js

@@ -21,24 +21,22 @@ import '../../../../context/AccessDeniedContext/AccessDeniedContext.js';
 import '../../../../context/CaptchaContext/CaptchaContext.js';
 
 const useVerifyOnAwaitingSignature = () => {
-    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, isVerifying, setIsVerifying, selectedWalletConnector, } = useInternalDynamicContext();
+    const { awaitingSignatureState, multiWalletWidgetState, setMultiWalletWidgetState, legacyIsVerifying, setLegacyIsVerifying, selectedWalletConnector, } = useInternalDynamicContext();
     const triggerConnectAndSign = useConnectAndSign();
     useEffect(() => {
-        if (!isVerifying &&
+        if (!legacyIsVerifying &&
             multiWalletWidgetState === 'awaiting_signature' &&
             selectedWalletConnector &&
             awaitingSignatureState === 'linking_new_wallet' &&
             !requiresTwoStepAuthentication(selectedWalletConnector)) {
-            setIsVerifying(true);
+            setLegacyIsVerifying(true);
             triggerConnectAndSign({ walletConnector: selectedWalletConnector })
-                .then(() => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
-            })
                 .catch((e) => {
-                setMultiWalletWidgetState('idle');
-                setIsVerifying(false);
                 logger.error(e);
+            })
+                .finally(() => {
+                setMultiWalletWidgetState('idle');
+                setLegacyIsVerifying(false);
             });
         }
     }, [
@@ -46,8 +44,7 @@ const useVerifyOnAwaitingSignature = () => {
         selectedWalletConnector === null || selectedWalletConnector === void 0 ? void 0 : selectedWalletConnector.name,
         multiWalletWidgetState,
         setMultiWalletWidgetState,
-        isVerifying,
-        setIsVerifying,
+        legacyIsVerifying,
     ]);
 };
 

package/src/lib/utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+
+//  This is temporary workaround what should be removed after refactoring the useWalletEventListeners.
+//  https://linear.app/dynamic-labs/issue/QNTM-74/cleanup-attached-events-to-wallet-connector-in-network-not-supported
+//  Currently the events and context properties f.e. `network` are based on primaryWallet
+//  which is define after signing the message
+const useApplyWalletConnectorNetwork = ({ walletConnector }) => {
+    const { network, setNetwork } = useInternalDynamicContext.useInternalDynamicContext();
+    // Updates the contexts 'network' based on the selected wallet connector.
+    // It helps ensure that the 'network' is always in sync with the wallet's actual network,
+    // Prevents 'network' from being 'undefined'.
+    React.useEffect(() => {
+        if (walletConnector) {
+            walletConnector.getNetwork().then((walletConnectorNetwork) => {
+                if (network !== walletConnectorNetwork) {
+                    setNetwork(walletConnectorNetwork);
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [network, walletConnector]);
+};
+
+exports.useApplyWalletConnectorNetwork = useApplyWalletConnectorNetwork;

package/src/lib/utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.d.ts

@@ -0,0 +1,5 @@
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+export type Props = {
+    walletConnector?: WalletConnector | null;
+};
+export declare const useApplyWalletConnectorNetwork: ({ walletConnector }: Props) => void;

package/src/lib/utils/hooks/useApplyWalletConnectorNetwork/useApplyWalletConnectorNetwork.js

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+
+//  This is temporary workaround what should be removed after refactoring the useWalletEventListeners.
+//  https://linear.app/dynamic-labs/issue/QNTM-74/cleanup-attached-events-to-wallet-connector-in-network-not-supported
+//  Currently the events and context properties f.e. `network` are based on primaryWallet
+//  which is define after signing the message
+const useApplyWalletConnectorNetwork = ({ walletConnector }) => {
+    const { network, setNetwork } = useInternalDynamicContext();
+    // Updates the contexts 'network' based on the selected wallet connector.
+    // It helps ensure that the 'network' is always in sync with the wallet's actual network,
+    // Prevents 'network' from being 'undefined'.
+    useEffect(() => {
+        if (walletConnector) {
+            walletConnector.getNetwork().then((walletConnectorNetwork) => {
+                if (network !== walletConnectorNetwork) {
+                    setNetwork(walletConnectorNetwork);
+                }
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [network, walletConnector]);
+};
+
+export { useApplyWalletConnectorNetwork };

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

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

package/src/lib/utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var useInternalDynamicContext = require('../../../context/DynamicContext/useInternalDynamicContext.cjs');
+var MockContext = require('../../../context/MockContext/MockContext.cjs');
+var ViewContext = require('../../../context/ViewContext/ViewContext.cjs');
+var isUserLinkingWallet = require('../../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.cjs');
+var QrCodeContext = require('../../../context/QrCodeContext/QrCodeContext.cjs');
+var getDynamicLayoutData = require('../../functions/getDynamicLayoutData/getDynamicLayoutData.cjs');
+
+const useAuthLayoutChecks = (walletConnector) => {
+    const { view } = ViewContext.useViewContext();
+    const { user, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, isBridgeFlow, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { showQrCodeMessage, showQrCodeImage } = QrCodeContext.useQrCodeContext();
+    const { mockedSDK } = MockContext.useMockContext();
+    const { helpHeaderData } = getDynamicLayoutData.getDynamicLayoutData({ view });
+    const isWalletListTypeView = view === 'wallet-connect-mobile-wallets-list' ||
+        view === 'wallet-list' ||
+        view === 'login-with-email-or-wallet-full-wallet-list';
+    const showHelpContent = Boolean(helpHeaderData &&
+        // Notice the negation here
+        !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
+            view === 'no-qr-not-installed' ||
+            view === 'wallet-used' ||
+            view === 'chainalysis-blocked-wallet' ||
+            view === 'wallet-sign' ||
+            view === 'collect-user-data' ||
+            isUserLinkingWallet.isUserLinkingWallet(user, view, mockedSDK)));
+    const showHeader = view !== 'collect-user-data' &&
+        view !== 'no-access' &&
+        view !== 'chainalysis-blocked-wallet' &&
+        view !== 'update-email' &&
+        view !== 'verify-email' &&
+        view !== 'network-not-supported' &&
+        view !== 'wallet-locked-view' &&
+        view !== 'gate-blocked-wallet' &&
+        view !== 'email-wallet-otp-verification-view' &&
+        view !== 'bridge-welcome' &&
+        view !== 'bridge-summary' &&
+        view !== 'bridge-next-wallet-connection';
+    const showConnectedWalletProgress = isBridgeFlow &&
+        (view === 'wallet-list' ||
+            view === 'qr-code' ||
+            view === 'wallet-connect-mobile-wallets-list' ||
+            view === 'pending-connect' ||
+            view === 'pending-signature' ||
+            view === 'pending-signature-without-back-button' ||
+            view === 'bridge-next-wallet-connection' ||
+            view === 'bridge-summary');
+    const showToSFooter = Boolean(!isUserLinkingWallet.isUserLinkingWallet(user, view, mockedSDK) &&
+        (view === 'wallet-list' ||
+            view === 'wallet-connect-mobile-wallets-list' ||
+            // Don't show empty footer on login-with-email-or-wallet-full-wallet-list
+            (view === 'login-with-email-or-wallet' &&
+                (termsOfServiceUrl ||
+                    privacyPolicyUrl ||
+                    customPrivacyPolicy ||
+                    customTermsOfServices)) ||
+            view === 'login-with-email-or-wallet-full-wallet-list'));
+    const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
+        view !== 'login-with-email-verification';
+    const showBackButton = view === 'qr-code' ||
+        view === 'pending-signature' ||
+        view === 'no-qr-not-installed' ||
+        view === 'wallet-connect-mobile-wallets-list' ||
+        view === 'login-with-email-verification' ||
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'wallet-group' ||
+        view === 'pending-connect';
+    const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
+    return {
+        isWalletListTypeView,
+        showBackButton,
+        showCloseButton,
+        showConnectedWalletProgress,
+        showHeader,
+        showHelpContent,
+        showQrCodePreHeader,
+        showToSFooter,
+    };
+};
+
+exports.useAuthLayoutChecks = useAuthLayoutChecks;

package/src/lib/utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.d.ts

@@ -0,0 +1,11 @@
+import { WalletConnector } from '@dynamic-labs/wallet-connector-core';
+export declare const useAuthLayoutChecks: (walletConnector?: WalletConnector | null) => {
+    isWalletListTypeView: boolean;
+    showBackButton: boolean;
+    showCloseButton: boolean;
+    showConnectedWalletProgress: boolean;
+    showHeader: boolean;
+    showHelpContent: boolean;
+    showQrCodePreHeader: boolean;
+    showToSFooter: boolean;
+};

package/src/lib/utils/hooks/useAuthLayoutChecks/useAuthLayoutChecks.js

@@ -0,0 +1,80 @@
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useInternalDynamicContext.js';
+import { useMockContext } from '../../../context/MockContext/MockContext.js';
+import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
+import { isUserLinkingWallet } from '../../../shared/utils/functions/isUserLinkingWallet/isUserLinkingWallet.js';
+import { useQrCodeContext } from '../../../context/QrCodeContext/QrCodeContext.js';
+import { getDynamicLayoutData } from '../../functions/getDynamicLayoutData/getDynamicLayoutData.js';
+
+const useAuthLayoutChecks = (walletConnector) => {
+    const { view } = useViewContext();
+    const { user, customPrivacyPolicy, customTermsOfServices, privacyPolicyUrl, termsOfServiceUrl, isBridgeFlow, } = useInternalDynamicContext();
+    const { showQrCodeMessage, showQrCodeImage } = useQrCodeContext();
+    const { mockedSDK } = useMockContext();
+    const { helpHeaderData } = getDynamicLayoutData({ view });
+    const isWalletListTypeView = view === 'wallet-connect-mobile-wallets-list' ||
+        view === 'wallet-list' ||
+        view === 'login-with-email-or-wallet-full-wallet-list';
+    const showHelpContent = Boolean(helpHeaderData &&
+        // Notice the negation here
+        !((view === 'qr-code' && !(walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.canConnectViaQrCode)) ||
+            view === 'no-qr-not-installed' ||
+            view === 'wallet-used' ||
+            view === 'chainalysis-blocked-wallet' ||
+            view === 'wallet-sign' ||
+            view === 'collect-user-data' ||
+            isUserLinkingWallet(user, view, mockedSDK)));
+    const showHeader = view !== 'collect-user-data' &&
+        view !== 'no-access' &&
+        view !== 'chainalysis-blocked-wallet' &&
+        view !== 'update-email' &&
+        view !== 'verify-email' &&
+        view !== 'network-not-supported' &&
+        view !== 'wallet-locked-view' &&
+        view !== 'gate-blocked-wallet' &&
+        view !== 'email-wallet-otp-verification-view' &&
+        view !== 'bridge-welcome' &&
+        view !== 'bridge-summary' &&
+        view !== 'bridge-next-wallet-connection';
+    const showConnectedWalletProgress = isBridgeFlow &&
+        (view === 'wallet-list' ||
+            view === 'qr-code' ||
+            view === 'wallet-connect-mobile-wallets-list' ||
+            view === 'pending-connect' ||
+            view === 'pending-signature' ||
+            view === 'pending-signature-without-back-button' ||
+            view === 'bridge-next-wallet-connection' ||
+            view === 'bridge-summary');
+    const showToSFooter = Boolean(!isUserLinkingWallet(user, view, mockedSDK) &&
+        (view === 'wallet-list' ||
+            view === 'wallet-connect-mobile-wallets-list' ||
+            // Don't show empty footer on login-with-email-or-wallet-full-wallet-list
+            (view === 'login-with-email-or-wallet' &&
+                (termsOfServiceUrl ||
+                    privacyPolicyUrl ||
+                    customPrivacyPolicy ||
+                    customTermsOfServices)) ||
+            view === 'login-with-email-or-wallet-full-wallet-list'));
+    const showCloseButton = view !== 'login-with-email-or-wallet-full-wallet-list' &&
+        view !== 'login-with-email-verification';
+    const showBackButton = view === 'qr-code' ||
+        view === 'pending-signature' ||
+        view === 'no-qr-not-installed' ||
+        view === 'wallet-connect-mobile-wallets-list' ||
+        view === 'login-with-email-verification' ||
+        view === 'login-with-email-or-wallet-full-wallet-list' ||
+        view === 'wallet-group' ||
+        view === 'pending-connect';
+    const showQrCodePreHeader = view === 'qr-code' && showQrCodeMessage && !showQrCodeImage;
+    return {
+        isWalletListTypeView,
+        showBackButton,
+        showCloseButton,
+        showConnectedWalletProgress,
+        showHeader,
+        showHelpContent,
+        showQrCodePreHeader,
+        showToSFooter,
+    };
+};
+
+export { useAuthLayoutChecks };

package/src/lib/utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.cjs

@@ -4,6 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+var localStorage$1 = require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+require('../../../shared/consts/index.cjs');
 
 const useClearWalletConnectSessions = ({ connectors }) => {
     const clearOphanedWalletConnectSessions = React.useCallback(() => {
@@ -12,7 +23,7 @@ const useClearWalletConnectSessions = ({ connectors }) => {
         if (connectors.length === 0)
             return;
         const names = new Set(connectors.map((connector) => walletConnectorCore.normalizeWalletName(connector.name)));
-        for (const key of Object.keys(localStorage)) {
+        for (const key of localStorage$1.LocalStorage.getKeys()) {
             if (key.startsWith('walletconnect') &&
                 !names.has(key.replace('walletconnect-', ''))) {
                 localStorage.removeItem(key);
@@ -22,8 +33,10 @@ const useClearWalletConnectSessions = ({ connectors }) => {
     const clearAllWalletConnectSessions = () => {
         if (typeof window === 'undefined')
             return;
-        for (const key of Object.keys(localStorage)) {
-            if (key.startsWith('walletconnect')) {
+        for (const key of localStorage$1.LocalStorage.getKeys()) {
+            if (key.startsWith('walletconnect') ||
+                key.startsWith('walletlink') ||
+                key.startsWith('wc@2')) {
                 localStorage.removeItem(key);
             }
         }

package/src/lib/utils/hooks/useClearWalletConnectSessions/useClearWalletConnectSessions.js

@@ -1,5 +1,16 @@
 import { useCallback } from 'react';
 import { normalizeWalletName } from '@dynamic-labs/wallet-connector-core';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import { LocalStorage } from '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import '../../../shared/consts/index.js';
 
 const useClearWalletConnectSessions = ({ connectors }) => {
     const clearOphanedWalletConnectSessions = useCallback(() => {
@@ -8,7 +19,7 @@ const useClearWalletConnectSessions = ({ connectors }) => {
         if (connectors.length === 0)
             return;
         const names = new Set(connectors.map((connector) => normalizeWalletName(connector.name)));
-        for (const key of Object.keys(localStorage)) {
+        for (const key of LocalStorage.getKeys()) {
             if (key.startsWith('walletconnect') &&
                 !names.has(key.replace('walletconnect-', ''))) {
                 localStorage.removeItem(key);
@@ -18,8 +29,10 @@ const useClearWalletConnectSessions = ({ connectors }) => {
     const clearAllWalletConnectSessions = () => {
         if (typeof window === 'undefined')
             return;
-        for (const key of Object.keys(localStorage)) {
-            if (key.startsWith('walletconnect')) {
+        for (const key of LocalStorage.getKeys()) {
+            if (key.startsWith('walletconnect') ||
+                key.startsWith('walletlink') ||
+                key.startsWith('wc@2')) {
                 localStorage.removeItem(key);
             }
         }

package/src/lib/utils/hooks/useColorSchemePreference/useColorSchemePreference.cjs

@@ -2,26 +2,24 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+require('@dynamic-labs/sdk-api');
+require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('react');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../../shared/utils/classes/storage/localStorage.cjs');
+require('ethers');
+var useMediaQuery = require('../../../shared/utils/hooks/useMediaQuery/useMediaQuery.cjs');
+require('../../../shared/consts/index.cjs');
 
 const useColorSchemePreference = () => {
-    const [preference, setPreference] = React.useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-    React.useEffect(() => {
-        const listener = (e) => {
-            setPreference(e.matches ? 'dark' : 'light');
-        };
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', listener);
-        return () => {
-            window
-                .matchMedia('(prefers-color-scheme: dark)')
-                .removeEventListener('change', listener);
-        };
-    }, []);
-    return preference;
+    const isDarkMode = useMediaQuery.useMediaQuery('(prefers-color-scheme: dark)');
+    return isDarkMode ? 'dark' : 'light';
 };
 
 exports.useColorSchemePreference = useColorSchemePreference;

package/src/lib/utils/hooks/useColorSchemePreference/useColorSchemePreference.js

@@ -1,23 +1,21 @@
-import { useState, useEffect } from 'react';
+import '@dynamic-labs/sdk-api';
+import '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import 'react';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../../shared/utils/classes/storage/localStorage.js';
+import 'ethers';
+import { useMediaQuery } from '../../../shared/utils/hooks/useMediaQuery/useMediaQuery.js';
+import '../../../shared/consts/index.js';
 
 const useColorSchemePreference = () => {
-    const [preference, setPreference] = useState(() => window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light');
-    useEffect(() => {
-        const listener = (e) => {
-            setPreference(e.matches ? 'dark' : 'light');
-        };
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', listener);
-        return () => {
-            window
-                .matchMedia('(prefers-color-scheme: dark)')
-                .removeEventListener('change', listener);
-        };
-    }, []);
-    return preference;
+    const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+    return isDarkMode ? 'dark' : 'light';
 };
 
 export { useColorSchemePreference };