@dynamic-labs/sdk-react-core 4.0.0-alpha.37 → 4.0.0-alpha.38

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

@@ -60,6 +60,7 @@ require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
 require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
 require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
 require('../../components/OverlayCardBase/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');
@@ -91,7 +92,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) => {
@@ -106,6 +107,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, { icon: wallet.connector.metadata.icon, walletKey: wallet.connector.key })) : (jsxRuntime.jsx(ChainIcon, {})), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress.shortenWalletAddress(wallet.address) }, wallet.id)));

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

@@ -56,6 +56,7 @@ import '../../components/Transition/ZoomTransition/ZoomTransition.js';
 import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
 import '../../components/Transition/OpacityTransition/OpacityTransition.js';
 import '../../components/OverlayCardBase/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';
@@ -87,7 +88,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) => {
@@ -102,6 +103,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, { icon: wallet.connector.metadata.icon, walletKey: wallet.connector.key })) : (jsx(ChainIcon, {})), onClick: () => setShowBridgeWidget(true), children: shortenWalletAddress(wallet.address) }, wallet.id)));