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

package/CHANGELOG.md

@@ -1,4 +1,11 @@
 
+## [4.0.0-alpha.37](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.36...v4.0.0-alpha.37) (2024-11-27)
+
+
+### Features
+
+* show the name of a wallet when it is unknown ([#7478](https://github.com/dynamic-labs/dynamic-auth/issues/7478)) ([698acc5](https://github.com/dynamic-labs/dynamic-auth/commit/698acc5b63a489f56bf403747a40c36027045bf7))
+
 ## [4.0.0-alpha.36](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.35...v4.0.0-alpha.36) (2024-11-26)
 
 

package/package.cjs

@@ -3,7 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var version = "4.0.0-alpha.36";
+var version = "4.0.0-alpha.37";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.570",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.0.0-alpha.36";
+var version = "4.0.0-alpha.37";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.570",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.0.0-alpha.36",
+  "version": "4.0.0-alpha.37",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.570",
     "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -13,16 +13,16 @@
     "react-i18next": "13.5.0",
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
-    "@dynamic-labs/assert-package-version": "4.0.0-alpha.36",
-    "@dynamic-labs/iconic": "4.0.0-alpha.36",
-    "@dynamic-labs/logger": "4.0.0-alpha.36",
-    "@dynamic-labs/multi-wallet": "4.0.0-alpha.36",
-    "@dynamic-labs/rpc-providers": "4.0.0-alpha.36",
-    "@dynamic-labs/store": "4.0.0-alpha.36",
-    "@dynamic-labs/types": "4.0.0-alpha.36",
-    "@dynamic-labs/utils": "4.0.0-alpha.36",
-    "@dynamic-labs/wallet-book": "4.0.0-alpha.36",
-    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.36",
+    "@dynamic-labs/assert-package-version": "4.0.0-alpha.37",
+    "@dynamic-labs/iconic": "4.0.0-alpha.37",
+    "@dynamic-labs/logger": "4.0.0-alpha.37",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.37",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.37",
+    "@dynamic-labs/store": "4.0.0-alpha.37",
+    "@dynamic-labs/types": "4.0.0-alpha.37",
+    "@dynamic-labs/utils": "4.0.0-alpha.37",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.37",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.37",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

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