@dynamic-labs/sdk-react-core 3.8.3 → 3.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/package.cjs +1 -1
- package/package.js +1 -1
- package/package.json +11 -11
- package/src/lib/styles/index.shadow.cjs +1 -1
- package/src/lib/styles/index.shadow.js +1 -1
- package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.cjs +5 -1
- package/src/lib/widgets/DynamicBridgeWidget/DynamicBridgeWidget.js +5 -1
|
@@ -59,6 +59,7 @@ require('../../components/Transition/ZoomTransition/ZoomTransition.cjs');
|
|
|
59
59
|
require('../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
|
|
60
60
|
require('../../components/Transition/OpacityTransition/OpacityTransition.cjs');
|
|
61
61
|
require('../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.cjs');
|
|
62
|
+
var Skeleton = require('../../components/Skeleton/Skeleton.cjs');
|
|
62
63
|
require('../../context/SocialRedirectContext/SocialRedirectContext.cjs');
|
|
63
64
|
require('../../context/WalletGroupContext/WalletGroupContext.cjs');
|
|
64
65
|
require('../DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
|
|
@@ -89,7 +90,7 @@ var DynamicBridgeUserProfile = require('./components/DynamicBridgeUserProfile/Dy
|
|
|
89
90
|
var DynamicBridgeWidgetContext = require('./context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.cjs');
|
|
90
91
|
|
|
91
92
|
const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chain', }) => {
|
|
92
|
-
const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext.useInternalDynamicContext();
|
|
93
|
+
const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, sdkHasLoaded, } = useInternalDynamicContext.useInternalDynamicContext();
|
|
93
94
|
const { widgetRef, inlineControlsRef } = DynamicBridgeWidgetContext.useDynamicBridgeWidgetContext();
|
|
94
95
|
const { t } = reactI18next.useTranslation();
|
|
95
96
|
const closeOnOutsideClick = React.useCallback((e) => {
|
|
@@ -104,6 +105,9 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chai
|
|
|
104
105
|
index.useOnClickOutside(widgetRef, closeOnOutsideClick);
|
|
105
106
|
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 }) => {
|
|
106
107
|
const ChainIcon = getChainIcon.getChainIcon(chain);
|
|
108
|
+
if (!sdkHasLoaded) {
|
|
109
|
+
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}`));
|
|
110
|
+
}
|
|
107
111
|
const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
|
|
108
112
|
if (connectedChainWallets.length > 0) {
|
|
109
113
|
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)));
|
|
@@ -55,6 +55,7 @@ import '../../components/Transition/ZoomTransition/ZoomTransition.js';
|
|
|
55
55
|
import '../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
|
|
56
56
|
import '../../components/Transition/OpacityTransition/OpacityTransition.js';
|
|
57
57
|
import '../../components/OverlayCard/OverlayCardTarget/OverlayCardTarget.js';
|
|
58
|
+
import { Skeleton } from '../../components/Skeleton/Skeleton.js';
|
|
58
59
|
import '../../context/SocialRedirectContext/SocialRedirectContext.js';
|
|
59
60
|
import '../../context/WalletGroupContext/WalletGroupContext.js';
|
|
60
61
|
import '../DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
|
|
@@ -85,7 +86,7 @@ import { DynamicBridgeUserProfile } from './components/DynamicBridgeUserProfile/
|
|
|
85
86
|
import { useDynamicBridgeWidgetContext } from './context/DynamicBridgeWidgetContext/DynamicBridgeWidgetContext.js';
|
|
86
87
|
|
|
87
88
|
const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chain', }) => {
|
|
88
|
-
const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, } = useInternalDynamicContext();
|
|
89
|
+
const { showAuthFlow, setShowBridgeWidget, bridgeChains, setShowAuthFlow, connectedWallets, sdkHasLoaded, } = useInternalDynamicContext();
|
|
89
90
|
const { widgetRef, inlineControlsRef } = useDynamicBridgeWidgetContext();
|
|
90
91
|
const { t } = useTranslation();
|
|
91
92
|
const closeOnOutsideClick = useCallback((e) => {
|
|
@@ -100,6 +101,9 @@ const DynamicBridgeWidget = ({ className, variant = 'modal', iconVariant = 'chai
|
|
|
100
101
|
useOnClickOutside(widgetRef, closeOnOutsideClick);
|
|
101
102
|
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 }) => {
|
|
102
103
|
const ChainIcon = getChainIcon(chain);
|
|
104
|
+
if (!sdkHasLoaded) {
|
|
105
|
+
return (jsx(InlineWidgetButton, { icon: jsx(ChainIcon, {}), className: 'dynamic-bridge-widget__skeleton-button', children: jsx(Skeleton, { className: 'dynamic-bridge-widget__skeleton' }) }, `skeleton-${chain}`));
|
|
106
|
+
}
|
|
103
107
|
const connectedChainWallets = connectedWallets.filter(({ chain: connectedChain }) => connectedChain === chain);
|
|
104
108
|
if (connectedChainWallets.length > 0) {
|
|
105
109
|
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)));
|