@dynamic-labs/sdk-react-core 3.8.3 → 3.8.5

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

@@ -27,7 +27,7 @@ var isCookieEnabled = require('../../functions/isCookieEnabled/isCookieEnabled.c
 var useDynamicEvents = require('../events/useDynamicEvents/useDynamicEvents.cjs');
 
 const useResetCookieLocalStorage = ({ environmentId, projectSettings, setPrimaryWalletId, }) => {
-    const isLoadingRef = React.useRef(true);
+    const [isLoading, setIsLoading] = React.useState(true);
     const didRefreshUserRef = React.useRef(false);
     const user$2 = user.getUser();
     /**
@@ -77,7 +77,7 @@ const useResetCookieLocalStorage = ({ environmentId, projectSettings, setPrimary
             if (projectSettings) {
                 // only set to false if projectSettings are available,
                 // otherwise isCookieEnabled might be a false negative
-                isLoadingRef.current = false;
+                setIsLoading(false);
             }
         });
         // Ensure this effect only runs once
@@ -85,9 +85,7 @@ const useResetCookieLocalStorage = ({ environmentId, projectSettings, setPrimary
             return;
         maybeInitUserRefresh();
     }, [user$2, projectSettings, environmentId, setPrimaryWalletId]);
-    return {
-        isLoading: isLoadingRef.current,
-    };
+    return { isLoading };
 };
 
 exports.useResetCookieLocalStorage = useResetCookieLocalStorage;

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

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { JwtVerifiedCredentialFormatEnum } from '@dynamic-labs/sdk-api-core';
 import { logger } from '../../../shared/logger.js';
 import '@dynamic-labs/iconic';
@@ -23,7 +23,7 @@ import { isCookieEnabled } from '../../functions/isCookieEnabled/isCookieEnabled
 import { useInternalDynamicEvents } from '../events/useDynamicEvents/useDynamicEvents.js';
 
 const useResetCookieLocalStorage = ({ environmentId, projectSettings, setPrimaryWalletId, }) => {
-    const isLoadingRef = useRef(true);
+    const [isLoading, setIsLoading] = useState(true);
     const didRefreshUserRef = useRef(false);
     const user = getUser();
     /**
@@ -73,7 +73,7 @@ const useResetCookieLocalStorage = ({ environmentId, projectSettings, setPrimary
             if (projectSettings) {
                 // only set to false if projectSettings are available,
                 // otherwise isCookieEnabled might be a false negative
-                isLoadingRef.current = false;
+                setIsLoading(false);
             }
         });
         // Ensure this effect only runs once
@@ -81,9 +81,7 @@ const useResetCookieLocalStorage = ({ environmentId, projectSettings, setPrimary
             return;
         maybeInitUserRefresh();
     }, [user, projectSettings, environmentId, setPrimaryWalletId]);
-    return {
-        isLoading: isLoadingRef.current,
-    };
+    return { isLoading };
 };
 
 export { useResetCookieLocalStorage };

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.cjs

@@ -59,6 +59,7 @@ require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
+var Skeleton = require('../../components/Skeleton/Skeleton.cjs');
 require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
 require('../../context/WalletGroupContext/WalletGroupContext.cjs');
 require('../DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
@@ -89,7 +90,7 @@ var DynamicBridgeUserProfile = require('./components/DynamicBridgeUserProfile/Dy
 var DynamicBridgeWidgetContext = require('./context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
 
 const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chain', }) => {
-    const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
+    const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, sdkHasLoaded, } = useInternalDynamicContext.useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = DynamicBridgeWidgetContext.useDynamicBridgeWidgetContext();
     const { t } = reactI18next.useTranslation();
     const closeOnOutsideClick = React.useCallback((e) => {
@@ -104,6 +105,9 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chai
     index.useOnClickOutside(widgetRef, closeOnOutsideClick);
     return (jsxRuntime.jsxs(ShadowDOM.ShadowDOM, { id: 'dynamic-bridge-widget', className: 'dynamic-widget__container', children: [jsxRuntime.jsx(InlineWidget.InlineWidget, { ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav', children: bridgeChains === null || bridgeChains === void 0 ? void 0 : bridgeChains.map(({ chain }) => {
                     const ChainIcon = getChainIcon.getChainIcon(chain);
+                    if (!sdkHasLoaded) {
+                        return (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, { icon: jsxRuntime.jsx(ChainIcon, {}), className: 'dynamic-bridge-widget__skeleton-button', children: jsxRuntime.jsx(Skeleton.Skeleton, { className: 'dynamic-bridge-widget__skeleton' }) }, `skeleton-${chain}`));
+                    }
                     const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
                     if (connectedChainWallets.length > 0) {
                         return connectedChainWallets.map((wallet) => (jsxRuntime.jsx(InlineWidgetButton.InlineWidgetButton, { icon: iconVariant === 'wallet' ? (jsxRuntime.jsx(walletBook.WalletIcon, { walletKey: wallet.connector.key })) : (jsxRuntime.jsx(ChainIcon, {})), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress.shortenWalletAddress(wallet.address) }, wallet.id)));

package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.js

@@ -55,6 +55,7 @@ import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
+import { Skeleton } from '../../components/Skeleton/Skeleton.js';
 import '../../context/SocialRedirectContext/SocialRedirectContext.js';
 import '../../context/WalletGroupContext/WalletGroupContext.js';
 import '../DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
@@ -85,7 +86,7 @@ import { DynamicBridgeUserProfile } from './components/DynamicBridgeUserProfile/
 import { useDynamicBridgeWidgetContext } from './context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
 
 const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chain', }) => {
-    const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext();
+    const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, sdkHasLoaded, } = useInternalDynamicContext();
     const { widgetRef, inlineControlsRef } = useDynamicBridgeWidgetContext();
     const { t } = useTranslation();
     const closeOnOutsideClick = useCallback((e) => {
@@ -100,6 +101,9 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chai
     useOnClickOutside(widgetRef, closeOnOutsideClick);
     return (jsxs(ShadowDOM, { id: 'dynamic-bridge-widget', className: 'dynamic-widget__container', children: [jsx(InlineWidget, { ref: inlineControlsRef, className: className, dataTestId: 'BridgeWidgetNav', children: bridgeChains === null || bridgeChains === void 0 ? void 0 : bridgeChains.map(({ chain }) => {
                     const ChainIcon = getChainIcon(chain);
+                    if (!sdkHasLoaded) {
+                        return (jsx(InlineWidgetButton, { icon: jsx(ChainIcon, {}), className: 'dynamic-bridge-widget__skeleton-button', children: jsx(Skeleton, { className: 'dynamic-bridge-widget__skeleton' }) }, `skeleton-${chain}`));
+                    }
                     const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
                     if (connectedChainWallets.length > 0) {
                         return connectedChainWallets.map((wallet) => (jsx(InlineWidgetButton, { icon: iconVariant === 'wallet' ? (jsx(WalletIcon, { walletKey: wallet.connector.key })) : (jsx(ChainIcon, {})), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress(wallet.address) }, wallet.id)));