@dynamic-labs/sdk-react-core 4.0.0-alpha.36 → 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)));

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.cjs

@@ -89,11 +89,27 @@ require('../../../../../components/Popper/Popper/Popper.cjs');
 require('../../../../../components/Popper/PopperContext/PopperContext.cjs');
 require('qrcode');
 
-const ActiveWalletAddress = ({ address, nameServiceName, menuOption, fullWidth = false, isLoading = false, }) => {
+/**
+ * If the wallet has no icon, returns its key, nicely formatted.
+ */
+const getNameIfNoIcon = (wallet) => {
+    if (!wallet)
+        return undefined;
+    const noIcon = !wallet.connector.metadata.icon ||
+        wallet.connector.metadata.icon.includes('unknown-wallet');
+    return noIcon
+        ? wallet.key
+            .replace(/[-_]/g, ' ')
+            .replace(/\b\w/g, (char) => char.toUpperCase())
+        : undefined;
+};
+const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth = false, isLoading = false, }) => {
     const { showAlert } = PasskeyContext.usePasskeyContext();
+    const header = nameServiceName || getNameIfNoIcon(wallet);
     return (jsxRuntime.jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Typography.Typography, { className: fullWidth
                             ? 'active-wallet-information__handle--full-width'
-                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameServiceName }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: nameServiceName ? 'regular' : 'medium', variant: nameServiceName ? 'body_small' : 'body_normal', color: nameServiceName ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(address, 4, 4)) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 }), variant: 'yellow' })) : (jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 })) })] }));
+                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: header }), jsxRuntime.jsx(Typography.Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsxRuntime.jsx(Skeleton.Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress.shortenWalletAddress(wallet === null || wallet === void 0 ? void 0 : wallet.address, 4, 4)) })] }), jsxRuntime.jsx(DotsMenu.DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsxRuntime.jsx(IconWithStatus.IconWithStatus, { Icon: () => jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 }), variant: 'yellow' })) : (jsxRuntime.jsx(gear.ReactComponent, { width: 16, height: 16 })) })] }));
 };
 
 exports.ActiveWalletAddress = ActiveWalletAddress;
+exports.getNameIfNoIcon = getNameIfNoIcon;

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.d.ts

@@ -1,11 +1,16 @@
-/// <reference types="react" />
+import { FC } from 'react';
+import { Wallet } from '../../../../../shared';
 import { DotsMenuOption } from '../../DotsMenu';
-type Props = {
-    address?: string;
+type ActiveWalletAddressProps = {
+    wallet: Wallet | null;
     nameServiceName?: string;
     menuOption: DotsMenuOption[];
     fullWidth?: boolean;
     isLoading?: boolean;
 };
-export declare const ActiveWalletAddress: ({ address, nameServiceName, menuOption, fullWidth, isLoading, }: Props) => JSX.Element;
+/**
+ * If the wallet has no icon, returns its key, nicely formatted.
+ */
+export declare const getNameIfNoIcon: (wallet: Wallet | null) => string | undefined;
+export declare const ActiveWalletAddress: FC<ActiveWalletAddressProps>;
 export {};

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletAddress/ActiveWalletAddress.js

@@ -85,11 +85,26 @@ import '../../../../../components/Popper/Popper/Popper.js';
 import '../../../../../components/Popper/PopperContext/PopperContext.js';
 import 'qrcode';
 
-const ActiveWalletAddress = ({ address, nameServiceName, menuOption, fullWidth = false, isLoading = false, }) => {
+/**
+ * If the wallet has no icon, returns its key, nicely formatted.
+ */
+const getNameIfNoIcon = (wallet) => {
+    if (!wallet)
+        return undefined;
+    const noIcon = !wallet.connector.metadata.icon ||
+        wallet.connector.metadata.icon.includes('unknown-wallet');
+    return noIcon
+        ? wallet.key
+            .replace(/[-_]/g, ' ')
+            .replace(/\b\w/g, (char) => char.toUpperCase())
+        : undefined;
+};
+const ActiveWalletAddress = ({ wallet, nameServiceName, menuOption, fullWidth = false, isLoading = false, }) => {
     const { showAlert } = usePasskeyContext();
+    const header = nameServiceName || getNameIfNoIcon(wallet);
     return (jsxs("div", { className: 'active-wallet-information__address-container', children: [jsxs("div", { children: [jsx(Typography, { className: fullWidth
                             ? 'active-wallet-information__handle--full-width'
-                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: nameServiceName }), jsx(Typography, { className: 'active-wallet-information__address', weight: nameServiceName ? 'regular' : 'medium', variant: nameServiceName ? 'body_small' : 'body_normal', color: nameServiceName ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(address, 4, 4)) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgGear, { width: 16, height: 16 }), variant: 'yellow' })) : (jsx(SvgGear, { width: 16, height: 16 })) })] }));
+                            : 'active-wallet-information__handle', color: 'primary', variant: 'body_normal', children: header }), jsx(Typography, { className: 'active-wallet-information__address', weight: header ? 'regular' : 'medium', variant: header ? 'body_small' : 'body_normal', color: header ? 'secondary' : 'primary', children: isLoading ? (jsx(Skeleton, { className: 'active-wallet-information__address-skeleton' })) : (shortenWalletAddress(wallet === null || wallet === void 0 ? void 0 : wallet.address, 4, 4)) })] }), jsx(DotsMenu, { "data-testid": 'dots-menu', options: menuOption, buttonClassName: 'active-wallet-information__dots-menu', buttonClassNameWithOpenMenu: 'active-wallet-information__dots-menu', iconOverride: showAlert() ? (jsx(IconWithStatus, { Icon: () => jsx(SvgGear, { width: 16, height: 16 }), variant: 'yellow' })) : (jsx(SvgGear, { width: 16, height: 16 })) })] }));
 };
 
-export { ActiveWalletAddress };
+export { ActiveWalletAddress, getNameIfNoIcon };

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.cjs

@@ -177,7 +177,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             return (jsxRuntime.jsx(ActiveBitcoinWalletAddresses.ActiveBitcoinWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }
         else {
-            return (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddress, { address: address, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading, fullWidth: shouldHideNetwork }));
+            return (jsxRuntime.jsx(ActiveWalletAddress.ActiveWalletAddress, { wallet: primaryWallet, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading, fullWidth: shouldHideNetwork }));
         }
     };
     const enableMultiAsset = (authMode === 'connect-and-sign' ||

package/src/lib/widgets/DynamicWidget/components/ActiveWalletInformation/ActiveWalletInformation.js

@@ -173,7 +173,7 @@ const ActiveWalletInformation = ({ isLoading = false, }) => {
             return (jsx(ActiveBitcoinWalletAddresses, { wallet: primaryWallet, menuOption: options }));
         }
         else {
-            return (jsx(ActiveWalletAddress, { address: address, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading, fullWidth: shouldHideNetwork }));
+            return (jsx(ActiveWalletAddress, { wallet: primaryWallet, nameServiceName: (nameService === null || nameService === void 0 ? void 0 : nameService.name) || (user === null || user === void 0 ? void 0 : user.email), menuOption: options, isLoading: isLoading, fullWidth: shouldHideNetwork }));
         }
     };
     const enableMultiAsset = (authMode === 'connect-and-sign' ||

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.cjs

@@ -114,16 +114,17 @@ LinkButton.displayName = 'LinkButton';
 const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { primaryWallet, user } = useInternalDynamicContext.useInternalDynamicContext();
     const { open: openSendBalanceModal } = SendBalanceContext.useSendBalance();
-    const { supportsFunding, setShowFunding, fundingEnabled } = FundingContext.useFundingContext();
+    const { supportsFunding: _supportsFunding, setShowFunding, fundingEnabled, } = FundingContext.useFundingContext();
     const { setDynamicWidgetView, setIsOpen } = DynamicWidgetContext.useWidgetContext();
     const { isLoadingEmbeddedWallet } = WalletContext.useWalletContext();
     const { t } = reactI18next.useTranslation();
+    const supportsFunding = _supportsFunding && (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isAvailable);
     const isSendBalanceEnabled = React.useMemo(() => {
         const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         if (!connector)
             return false;
         return walletConnectorCore.isSendBalanceWalletConnector(connector);
-    }, [primaryWallet]);
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
     const handleOnClickSend = () => {
         if (variant === 'dropdown') {
             setIsOpen(false);

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetWalletHeader/DynamicWidgetWalletHeader.js

@@ -106,16 +106,17 @@ LinkButton.displayName = 'LinkButton';
 const DynamicWidgetWalletHeader = ({ variant, }) => {
     const { primaryWallet, user } = useInternalDynamicContext();
     const { open: openSendBalanceModal } = useSendBalance();
-    const { supportsFunding, setShowFunding, fundingEnabled } = useFundingContext();
+    const { supportsFunding: _supportsFunding, setShowFunding, fundingEnabled, } = useFundingContext();
     const { setDynamicWidgetView, setIsOpen } = useWidgetContext();
     const { isLoadingEmbeddedWallet } = useWalletContext();
     const { t } = useTranslation();
+    const supportsFunding = _supportsFunding && (primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector.isAvailable);
     const isSendBalanceEnabled = useMemo(() => {
         const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
         if (!connector)
             return false;
         return isSendBalanceWalletConnector(connector);
-    }, [primaryWallet]);
+    }, [primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector]);
     const handleOnClickSend = () => {
         if (variant === 'dropdown') {
             setIsOpen(false);