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

package/src/lib/views/WalletList/WalletListItem/WalletListItem.js

@@ -1,7 +1,7 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
 import { jsx } from 'react/jsx-runtime';
-import { useWalletBookContext, getWalletGroup, getWalletBookWallet, WalletIcon } from '@dynamic-labs/wallet-book';
+import { useWalletBookContext, getWalletGroup, WalletIcon } from '@dynamic-labs/wallet-book';
 import { isHardwareWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import '@dynamic-labs/iconic';
 import { useViewContext } from '../../../context/ViewContext/ViewContext.js';
@@ -121,7 +121,7 @@ const WalletListItem = ({ disabled = false, wallet, onResetSearchValue, recommen
     });
     const name = _isWalletGroup
         ? getWalletGroup(walletBook, wallet.key).name
-        : getWalletBookWallet(walletBook, wallet.key).name;
+        : wallet.walletConnector.metadata.name;
     const leading = (jsx(WalletIcon, { className: 'wallet-list-item__leading', icon: (_a = wallet.walletConnector) === null || _a === void 0 ? void 0 : _a.metadata.icon, walletKey: wallet.key, style: { height: pixelToRem(28), width: pixelToRem(28) } }));
     const trailing = (jsx(ListTileAnimatedTrailing, { hoverElement: 
         // eslint-disable-next-line react/jsx-wrap-multilines

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