@dynamic-labs/sdk-react-core 4.0.0-alpha.33 → 4.0.0-alpha.34

package/CHANGELOG.md

@@ -1,4 +1,19 @@
 
+## [4.0.0-alpha.34](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.33...v4.0.0-alpha.34) (2024-11-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove `supportsSatsConnect` helper ([#7453](https://github.com/dynamic-labs/dynamic-auth/issues/7453)) ([920c63b](https://github.com/dynamic-labs/dynamic-auth/commit/920c63bbb5a38dc3d676664db512a4da539c0909))
+* moved `getWalletLinks` helper from `@dynamic-labs/wallet-book` to `@dynamic-labs/wallet-connector-core` ([#7416](https://github.com/dynamic-labs/dynamic-auth/issues/7416)) ([73fdfa8](https://github.com/dynamic-labs/dynamic-auth/commit/73fdfa8a19fe4c2cca55410d5ed3cb7b5bd8cdfd))
+
+### Features
+
+* allow listening to dynamic events without using a hook ([#7466](https://github.com/dynamic-labs/dynamic-auth/issues/7466)) ([3b34e1b](https://github.com/dynamic-labs/dynamic-auth/commit/3b34e1bd2737003b987887a02d0e21436e9bf908))
+* emit primaryWalletChanged event when primary wallets changes ([#7464](https://github.com/dynamic-labs/dynamic-auth/issues/7464)) ([3bc6ba0](https://github.com/dynamic-labs/dynamic-auth/commit/3bc6ba055e0232bff3c6c6bb93d3d57b1dd90bc6))
+* emit primaryWalletNetworkChanged event when primary wallet network changes ([#7465](https://github.com/dynamic-labs/dynamic-auth/issues/7465)) ([33cc629](https://github.com/dynamic-labs/dynamic-auth/commit/33cc629d3c6a03c381b7e5591a8f4557987cc6fc))
+
+
 ## [4.0.0-alpha.33](https://github.com/dynamic-labs/dynamic-auth/compare/v4.0.0-alpha.32...v4.0.0-alpha.33) (2024-11-18)
 
 

package/package.cjs

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

package/package.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.0.0-alpha.33",
+  "version": "4.0.0-alpha.34",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.565",
     "@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.33",
-    "@dynamic-labs/iconic": "4.0.0-alpha.33",
-    "@dynamic-labs/logger": "4.0.0-alpha.33",
-    "@dynamic-labs/multi-wallet": "4.0.0-alpha.33",
-    "@dynamic-labs/rpc-providers": "4.0.0-alpha.33",
-    "@dynamic-labs/store": "4.0.0-alpha.33",
-    "@dynamic-labs/types": "4.0.0-alpha.33",
-    "@dynamic-labs/utils": "4.0.0-alpha.33",
-    "@dynamic-labs/wallet-book": "4.0.0-alpha.33",
-    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.33",
+    "@dynamic-labs/assert-package-version": "4.0.0-alpha.34",
+    "@dynamic-labs/iconic": "4.0.0-alpha.34",
+    "@dynamic-labs/logger": "4.0.0-alpha.34",
+    "@dynamic-labs/multi-wallet": "4.0.0-alpha.34",
+    "@dynamic-labs/rpc-providers": "4.0.0-alpha.34",
+    "@dynamic-labs/store": "4.0.0-alpha.34",
+    "@dynamic-labs/types": "4.0.0-alpha.34",
+    "@dynamic-labs/utils": "4.0.0-alpha.34",
+    "@dynamic-labs/wallet-book": "4.0.0-alpha.34",
+    "@dynamic-labs/wallet-connector-core": "4.0.0-alpha.34",
     "bs58": "5.0.0",
     "eventemitter3": "5.0.1"
   },

package/src/index.cjs

@@ -61,7 +61,7 @@ var stroke = require('./lib/shared/assets/stroke.cjs');
 require('./lib/shared/consts/index.cjs');
 require('../_virtual/_tslib.cjs');
 require('react-dom');
-require('./lib/events/dynamicEvents.cjs');
+var dynamicEvents = require('./lib/events/dynamicEvents.cjs');
 var api = require('./lib/data/api/api.cjs');
 require('@dynamic-labs/multi-wallet');
 require('react-international-phone');
@@ -213,6 +213,7 @@ exports.LogoutIcon = logout.ReactComponent;
 exports.PencilIcon = pencil.ReactComponent;
 exports.SpinnerIcon = spinner.ReactComponent;
 exports.ArrowIcon = stroke.ReactComponent;
+exports.dynamicEvents = dynamicEvents.publicDynamicEvents;
 exports.apiClient = api.sdkApi;
 exports.mergeNetworks = mergeNetworks.mergeNetworks;
 exports.isAuthenticatedWithAWallet = isAuthenticatedWithAWallet.isAuthenticatedWithAWallet;

package/src/index.d.ts

@@ -98,6 +98,7 @@ export type { EvmNetwork, PhoneData, OtpDestination, UserProfile,
 AuthOptions as AuthOption, AuthOptions, 
 /** @deprecated use AuthMethod instead */
 AuthMethod as AuthType, AuthMethod, } from '@dynamic-labs/types';
+export { publicDynamicEvents as dynamicEvents } from './lib/events/dynamicEvents';
 export { mergeNetworks } from './lib/utils/functions/mergeNetworks';
 export { 
 /** @deprecated use https://www.npmjs.com/package/classnames */

package/src/index.js

@@ -57,7 +57,7 @@ export { ReactComponent as ArrowIcon } from './lib/shared/assets/stroke.js';
 import './lib/shared/consts/index.js';
 import '../_virtual/_tslib.js';
 import 'react-dom';
-import './lib/events/dynamicEvents.js';
+export { publicDynamicEvents as dynamicEvents } from './lib/events/dynamicEvents.js';
 export { sdkApi as apiClient } from './lib/data/api/api.js';
 import '@dynamic-labs/multi-wallet';
 import 'react-international-phone';

package/src/lib/components/OverlayCardBase/OverlayCardBase.cjs

@@ -92,9 +92,11 @@ const OverlayCardBase = ({ isOpen, children, onClickOverlay, style, className, }
     usePreventPageScroll.usePreventPageScroll(isOpen && !target);
     const contentRef = React.useRef(null);
     index.useOnClickOutside(contentRef, () => onClickOverlay === null || onClickOverlay === void 0 ? void 0 : onClickOverlay());
-    const content = (jsxRuntime.jsxs("div", { className: classNames.classNames('overlay-card-base', {
+    const opacityTransition = (jsxRuntime.jsx(OpacityTransition.OpacityTransition, { className: 'overlay-card-base__animation' }));
+    const slideTransition = (jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, { className: 'overlay-card-base__animation' }));
+    const content = (jsxRuntime.jsx("div", { className: classNames.classNames('overlay-card-base', {
             'overlay-card-base--disabled': !isOpen,
-        }), style: { position: target === undefined ? 'fixed' : 'absolute' }, children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, { className: 'overlay-card-base__animation' }), children: isOpen && (jsxRuntime.jsx("div", { onClick: onClickOverlay, className: 'overlay-card-base__overlay' })) }), jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(SlideInUpTransition.SlideInUpTransition, { className: 'overlay-card-base__animation overlay-card-base__animation--limit-height' }), children: isOpen && (jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: jsxRuntime.jsx(OpacityTransition.OpacityTransition, { className: 'overlay-card-base__animation' }), children: jsxRuntime.jsx("div", { ref: contentRef, className: classNames.classNames('overlay-card-base__content', className), style: style, children: children }) })) })] }));
+        }), style: { position: target === undefined ? 'fixed' : 'absolute' }, children: isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: opacityTransition, children: jsxRuntime.jsx("div", { onClick: onClickOverlay, className: 'overlay-card-base__overlay' }) }), jsxRuntime.jsx("div", { className: 'overlay-card-base__content-wrapper', children: jsxRuntime.jsx(AnimatePresence.AnimatePresence, { animationComponent: slideTransition, children: jsxRuntime.jsx("div", { ref: contentRef, className: classNames.classNames('overlay-card-base__content', className), style: style, children: children }) }) })] })) }));
     if (target)
         return reactDom.createPortal(content, target);
     return reactDom.createPortal(jsxRuntime.jsx(ShadowDOM.ShadowDOM, { children: content }), document.body);

package/src/lib/components/OverlayCardBase/OverlayCardBase.js

@@ -1,5 +1,5 @@
 'use client'
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import '@dynamic-labs/sdk-api-core';
@@ -88,9 +88,11 @@ const OverlayCardBase = ({ isOpen, children, onClickOverlay, style, className, }
     usePreventPageScroll(isOpen && !target);
     const contentRef = useRef(null);
     useOnClickOutside(contentRef, () => onClickOverlay === null || onClickOverlay === void 0 ? void 0 : onClickOverlay());
-    const content = (jsxs("div", { className: classNames('overlay-card-base', {
+    const opacityTransition = (jsx(OpacityTransition, { className: 'overlay-card-base__animation' }));
+    const slideTransition = (jsx(SlideInUpTransition, { className: 'overlay-card-base__animation' }));
+    const content = (jsx("div", { className: classNames('overlay-card-base', {
             'overlay-card-base--disabled': !isOpen,
-        }), style: { position: target === undefined ? 'fixed' : 'absolute' }, children: [jsx(AnimatePresence, { animationComponent: jsx(OpacityTransition, { className: 'overlay-card-base__animation' }), children: isOpen && (jsx("div", { onClick: onClickOverlay, className: 'overlay-card-base__overlay' })) }), jsx(AnimatePresence, { animationComponent: jsx(SlideInUpTransition, { className: 'overlay-card-base__animation overlay-card-base__animation--limit-height' }), children: isOpen && (jsx(AnimatePresence, { animationComponent: jsx(OpacityTransition, { className: 'overlay-card-base__animation' }), children: jsx("div", { ref: contentRef, className: classNames('overlay-card-base__content', className), style: style, children: children }) })) })] }));
+        }), style: { position: target === undefined ? 'fixed' : 'absolute' }, children: isOpen && (jsxs(Fragment, { children: [jsx(AnimatePresence, { animationComponent: opacityTransition, children: jsx("div", { onClick: onClickOverlay, className: 'overlay-card-base__overlay' }) }), jsx("div", { className: 'overlay-card-base__content-wrapper', children: jsx(AnimatePresence, { animationComponent: slideTransition, children: jsx("div", { ref: contentRef, className: classNames('overlay-card-base__content', className), style: style, children: children }) }) })] })) }));
     if (target)
         return createPortal(content, target);
     return createPortal(jsx(ShadowDOM, { children: content }), document.body);

package/src/lib/components/RenderView/RenderView.cjs

@@ -7,6 +7,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var ViewContext = require('../../context/ViewContext/ViewContext.cjs');
 require('react-i18next');
 require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/wallet-connector-core');
 require('../Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../Alert/Alert.cjs');
 require('react');
@@ -17,7 +18,6 @@ require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
 require('../../store/state/loadingAndLifecycle.cjs');

package/src/lib/components/RenderView/RenderView.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useViewContext } from '../../context/ViewContext/ViewContext.js';
 import 'react-i18next';
 import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/wallet-connector-core';
 import '../Accordion/components/AccordionItem/AccordionItem.js';
 import '../Alert/Alert.js';
 import 'react';
@@ -13,7 +14,6 @@ import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
 import '../../store/state/loadingAndLifecycle.js';

package/src/lib/components/Transition/SlideInUpTransition/SlideInUpTransition.cjs

@@ -20,10 +20,10 @@ const transitionStyles = {
         transform: 'translateY(0)',
     },
     ENTERING: {
-        transform: 'translateY(0.625rem)',
+        transform: 'translateY(50vh)',
     },
     EXITING: {
-        transform: 'translateY(0.625rem)',
+        transform: 'translateY(50vh)',
     },
 };
 const UnoptimizedSlideInUpTransition = (_a) => {

package/src/lib/components/Transition/SlideInUpTransition/SlideInUpTransition.js

@@ -12,10 +12,10 @@ const transitionStyles = {
         transform: 'translateY(0)',
     },
     ENTERING: {
-        transform: 'translateY(0.625rem)',
+        transform: 'translateY(50vh)',
     },
     EXITING: {
-        transform: 'translateY(0.625rem)',
+        transform: 'translateY(50vh)',
     },
 };
 const UnoptimizedSlideInUpTransition = (_a) => {

package/src/lib/context/DynamicContext/DynamicContext.cjs

@@ -15,7 +15,7 @@ var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var app = require('../../app.cjs');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
-require('../../events/dynamicEvents.cjs');
+var dynamicEvents = require('../../events/dynamicEvents.cjs');
 require('@dynamic-labs/sdk-api-core');
 var logger$1 = require('../../shared/logger.cjs');
 var ViewContext = require('../ViewContext/ViewContext.cjs');
@@ -393,7 +393,13 @@ const InnerDynamicContextProvider = ({ children, theme, settings: settings$1, lo
         secondaryWallets,
         verifiedCredentials: (user$1 === null || user$1 === void 0 ? void 0 : user$1.verifiedCredentials) || [],
     });
-    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork.useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
+    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork.useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, {
+        onChange: (newNetwork) => {
+            if (newNetwork) {
+                dynamicEvents.dynamicEvents.emit('primaryWalletNetworkChanged', newNetwork);
+            }
+        },
+    });
     useWalletEventListeners.useWalletEventListeners({
         authMode,
         detectNewWalletsForLinking,

package/src/lib/context/DynamicContext/DynamicContext.js

@@ -11,7 +11,7 @@ import { setChainInfoOverrides, logger as logger$1, isSessionKeyCompatibleWallet
 import { DynamicAuthFlow } from '../../app.js';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
-import '../../events/dynamicEvents.js';
+import { dynamicEvents } from '../../events/dynamicEvents.js';
 import '@dynamic-labs/sdk-api-core';
 import { logger } from '../../shared/logger.js';
 import { ViewContextProvider } from '../ViewContext/ViewContext.js';
@@ -389,7 +389,13 @@ const InnerDynamicContextProvider = ({ children, theme, settings, locale, enable
         secondaryWallets,
         verifiedCredentials: (user === null || user === void 0 ? void 0 : user.verifiedCredentials) || [],
     });
-    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector);
+    const { isLoading: loadingNetwork, network } = useWalletConnectorNetwork(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, {
+        onChange: (newNetwork) => {
+            if (newNetwork) {
+                dynamicEvents.emit('primaryWalletNetworkChanged', newNetwork);
+            }
+        },
+    });
     useWalletEventListeners({
         authMode,
         detectNewWalletsForLinking,

package/src/lib/events/dynamicEvents.cjs

@@ -9,6 +9,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var EventEmitter__default = /*#__PURE__*/_interopDefaultLegacy(EventEmitter);
 
+// ATTENTION
+// Everything below should be made public soon, but we need to plan this out first
+// Main issues:
+// 1. How should we map customer callback names to our dynamic event names?
+//  -> Gui's suggestion: breaking change to rename customer callbacks so they fit these events names
+// 2. We would have to remove these callbacks from the useCustomerCallbacks hook
+/** Which events are accessible by our clients */
+const externalEvents = [
+    'emailVerificationResult',
+    'embeddedWalletCreated',
+    'logout',
+    'walletAdded',
+    'primaryWalletChanged',
+    'primaryWalletNetworkChanged',
+    'mfaCompletionSuccess',
+    'mfaCompletionFailure',
+];
+// Full internal event emitter
 const dynamicEvents = new EventEmitter__default["default"]();
+// Limited public event emitter with subset of events
+const publicDynamicEvents = dynamicEvents;
 
 exports.dynamicEvents = dynamicEvents;
+exports.externalEvents = externalEvents;
+exports.publicDynamicEvents = publicDynamicEvents;

package/src/lib/events/dynamicEvents.d.ts

@@ -10,5 +10,8 @@ import { MultiWalletInternalEvents } from './multiWallet';
 import { tokenBalancesEvents } from './tokenBalances';
 /** Maps internal event names to their listeners */
 export type DynamicEvents = AuthEvents & UIEvents & OTPEvents & WalletEvents & PasskeyEvents & SocialEvents & EmbeddedWalletEvents & MultiWalletInternalEvents & tokenBalancesEvents;
+/** Which events are accessible by our clients */
+export declare const externalEvents: ("logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "emailVerificationResult" | "walletAdded" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated")[];
 export declare const dynamicEvents: EventEmitter<DynamicEvents, any>;
+export declare const publicDynamicEvents: EventEmitter<"logout" | "mfaCompletionSuccess" | "mfaCompletionFailure" | "emailVerificationResult" | "walletAdded" | "primaryWalletChanged" | "primaryWalletNetworkChanged" | "embeddedWalletCreated", any>;
 export type DynamicEventEmitter = typeof dynamicEvents;

package/src/lib/events/dynamicEvents.js

@@ -1,6 +1,26 @@
 'use client'
 import EventEmitter from 'eventemitter3';
 
+// ATTENTION
+// Everything below should be made public soon, but we need to plan this out first
+// Main issues:
+// 1. How should we map customer callback names to our dynamic event names?
+//  -> Gui's suggestion: breaking change to rename customer callbacks so they fit these events names
+// 2. We would have to remove these callbacks from the useCustomerCallbacks hook
+/** Which events are accessible by our clients */
+const externalEvents = [
+    'emailVerificationResult',
+    'embeddedWalletCreated',
+    'logout',
+    'walletAdded',
+    'primaryWalletChanged',
+    'primaryWalletNetworkChanged',
+    'mfaCompletionSuccess',
+    'mfaCompletionFailure',
+];
+// Full internal event emitter
 const dynamicEvents = new EventEmitter();
+// Limited public event emitter with subset of events
+const publicDynamicEvents = dynamicEvents;
 
-export { dynamicEvents };
+export { dynamicEvents, externalEvents, publicDynamicEvents };

package/src/lib/events/wallets.d.ts

@@ -4,4 +4,8 @@ export type WalletEvents = {
     walletAdded: (wallet: Wallet, userWallets: Wallet[]) => void;
     /** Triggered when a wallet is removed from user wallets list */
     walletRemoved: (wallet: Wallet, userWallets: Wallet[]) => void;
+    /** Triggered when the primary wallet changes (a different wallet is selected) */
+    primaryWalletChanged: (newPrimaryWallet: Wallet) => void;
+    /** Triggered when the network changes in primary wallet */
+    primaryWalletNetworkChanged: (newNetwork: string | number) => void;
 };

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.cjs

@@ -8,10 +8,10 @@ var React = require('react');
 var iconic = require('@dynamic-labs/iconic');
 var walletBook = require('@dynamic-labs/wallet-book');
 var utils = require('@dynamic-labs/utils');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../../../shared/logger.cjs');
-require('@dynamic-labs/wallet-connector-core');
 require('../../../../context/ViewContext/ViewContext.cjs');
 var puzzle = require('../../../../shared/assets/puzzle.cjs');
 var index = require('../../../../shared/utils/functions/getValueByKey/index.cjs');
@@ -102,7 +102,8 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
     const walletKey = index.getValueByKey(newToWeb3WalletChainMap === null || newToWeb3WalletChainMap === void 0 ? void 0 : newToWeb3WalletChainMap.wallets, chainName);
     const newToWeb3Wallet = walletConnectorOptions.find((wallet) => wallet.key === walletKey);
     const isCustodialServiceWallet = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.canConnectViaCustodialService;
-    const links = walletBook.getWalletLinks(walletBook$1, walletKey);
+    const metadata = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata;
+    const links = walletConnectorCore.getWalletLinks(metadata === null || metadata === void 0 ? void 0 : metadata.downloadLinks);
     const { currentDesktopUrl, canShowAndroidAppButton, canShowIosAppButton } = parseWalletLinks.parseWalletLinks(links);
     const walletLinksElements = [
         {
@@ -127,7 +128,7 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
     if (!Object.keys((_b = walletBook$1 === null || walletBook$1 === void 0 ? void 0 : walletBook$1.wallets) !== null && _b !== void 0 ? _b : {}).length) {
         return jsxRuntime.jsx(Skeleton.Skeleton, { className: 'walletlist-footer-content__container' });
     }
-    return (jsxRuntime.jsx("div", { className: 'walletlist-help-content__container', children: jsxRuntime.jsxs(EnterTileAnimation.EnterTileAnimation, { delay: '300ms', children: [jsxRuntime.jsx("div", { className: 'walletlist-help-content__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { icon: newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata.icon, walletKey: walletKey, style: { height: pixelToRem.pixelToRem(56), width: pixelToRem.pixelToRem(56) } }) }), jsxRuntime.jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxRuntime.jsxs(Typography.Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing", ' ', walletBook.getWalletBookWallet(walletBook$1, walletKey).name] }), jsxRuntime.jsx(Typography.Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsxRuntime.jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsxRuntime.jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsxRuntime.jsx(Item.Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxRuntime.jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsxRuntime.jsx(Typography.Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsxRuntime.jsx(WalletExtensionOrAppContinueButton.WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
+    return (jsxRuntime.jsx("div", { className: 'walletlist-help-content__container', children: jsxRuntime.jsxs(EnterTileAnimation.EnterTileAnimation, { delay: '300ms', children: [jsxRuntime.jsx("div", { className: 'walletlist-help-content__icon', children: jsxRuntime.jsx(walletBook.WalletIcon, { icon: metadata === null || metadata === void 0 ? void 0 : metadata.icon, walletKey: walletKey, style: { height: pixelToRem.pixelToRem(56), width: pixelToRem.pixelToRem(56) } }) }), jsxRuntime.jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxRuntime.jsxs(Typography.Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing ", metadata === null || metadata === void 0 ? void 0 : metadata.name] }), jsxRuntime.jsx(Typography.Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsxRuntime.jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsxRuntime.jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsxRuntime.jsx(Item.Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxRuntime.jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsxRuntime.jsx(Typography.Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsxRuntime.jsx(NewToWeb3WalletItem.NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsxRuntime.jsx(WalletExtensionOrAppContinueButton.WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
 };
 
 exports.WalletListHelpContent = WalletListHelpContent;

package/src/lib/layout/DynamicAuthLayout/HelpContent/WalletListHelpContent/WalletListHelpContent.js

@@ -2,12 +2,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { AppleIcon, AndroidIcon } from '@dynamic-labs/iconic';
-import { useWalletBookContext, getWalletLinks, WalletIcon, getWalletBookWallet } from '@dynamic-labs/wallet-book';
+import { useWalletBookContext, WalletIcon } from '@dynamic-labs/wallet-book';
 import { isMobile } from '@dynamic-labs/utils';
+import { getWalletLinks } from '@dynamic-labs/wallet-connector-core';
 import '../../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../../shared/logger.js';
-import '@dynamic-labs/wallet-connector-core';
 import '../../../../context/ViewContext/ViewContext.js';
 import { ReactComponent as SvgPuzzle } from '../../../../shared/assets/puzzle.js';
 import { getValueByKey } from '../../../../shared/utils/functions/getValueByKey/index.js';
@@ -98,7 +98,8 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
     const walletKey = getValueByKey(newToWeb3WalletChainMap === null || newToWeb3WalletChainMap === void 0 ? void 0 : newToWeb3WalletChainMap.wallets, chainName);
     const newToWeb3Wallet = walletConnectorOptions.find((wallet) => wallet.key === walletKey);
     const isCustodialServiceWallet = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.canConnectViaCustodialService;
-    const links = getWalletLinks(walletBook, walletKey);
+    const metadata = newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata;
+    const links = getWalletLinks(metadata === null || metadata === void 0 ? void 0 : metadata.downloadLinks);
     const { currentDesktopUrl, canShowAndroidAppButton, canShowIosAppButton } = parseWalletLinks(links);
     const walletLinksElements = [
         {
@@ -123,7 +124,7 @@ const WalletListHelpContent = ({ chains, newToWeb3WalletChainMap, }) => {
     if (!Object.keys((_b = walletBook === null || walletBook === void 0 ? void 0 : walletBook.wallets) !== null && _b !== void 0 ? _b : {}).length) {
         return jsx(Skeleton, { className: 'walletlist-footer-content__container' });
     }
-    return (jsx("div", { className: 'walletlist-help-content__container', children: jsxs(EnterTileAnimation, { delay: '300ms', children: [jsx("div", { className: 'walletlist-help-content__icon', children: jsx(WalletIcon, { icon: newToWeb3Wallet === null || newToWeb3Wallet === void 0 ? void 0 : newToWeb3Wallet.walletConnector.metadata.icon, walletKey: walletKey, style: { height: pixelToRem(56), width: pixelToRem(56) } }) }), jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxs(Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing", ' ', getWalletBookWallet(walletBook, walletKey).name] }), jsx(Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsx(Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
+    return (jsx("div", { className: 'walletlist-help-content__container', children: jsxs(EnterTileAnimation, { delay: '300ms', children: [jsx("div", { className: 'walletlist-help-content__icon', children: jsx(WalletIcon, { icon: metadata === null || metadata === void 0 ? void 0 : metadata.icon, walletKey: walletKey, style: { height: pixelToRem(56), width: pixelToRem(56) } }) }), jsxs("div", { className: 'walletlist-help-content__typography-wrapper', children: [jsxs(Typography, { as: 'p', variant: 'title', weight: 'medium', children: ["We recommend installing ", metadata === null || metadata === void 0 ? void 0 : metadata.name] }), jsx(Typography, { as: 'label', variant: 'body_normal', weight: 'regular', color: 'secondary', className: 'walletlist-help-content__typography--label', children: "Select your preferred option below:" })] }), jsx("div", { className: 'walletlist-help-content__buttons-wrapper', children: walletLinksElements.map((element, i) => element.isEnabled ? (jsx("button", { onClick: () => setSelectedUrl(element.url), children: jsx(Item, { StartIcon: element.icon, heading: element.content, url: element.url }) }, i)) : undefined) }), isCustodialServiceWallet && (jsxs("div", { className: 'walletlist-help-content__custodial-wallet-area', children: [jsx(Typography, { className: 'walletlist-help-content__custodial-wallet-area--title', as: 'p', color: 'secondary', variant: 'body_normal', weight: 'regular', children: "If you don't want to install a wallet, then use:" }), jsx(NewToWeb3WalletItem, { wallet: newToWeb3Wallet })] })), jsx(WalletExtensionOrAppContinueButton, { selectedUrl: selectedUrl, wallet: newToWeb3Wallet })] }) }));
 };
 
 export { WalletListHelpContent };

package/src/lib/modals/AddNetworkModal/AddNetworkModal.cjs

@@ -8,6 +8,7 @@ var ConfirmationModal = require('../ConfirmationModal/ConfirmationModal.cjs');
 var useConfirmationPortal = require('../../utils/hooks/useConfirmationPortal/useConfirmationPortal.cjs');
 require('react-i18next');
 require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/wallet-connector-core');
 require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
 require('../../components/Alert/Alert.cjs');
 require('react');
@@ -18,7 +19,6 @@ require('../../context/DynamicContext/DynamicContext.cjs');
 require('@dynamic-labs/sdk-api-core');
 require('../../shared/logger.cjs');
 require('@dynamic-labs/iconic');
-require('@dynamic-labs/wallet-connector-core');
 require('../../context/ViewContext/ViewContext.cjs');
 require('../../utils/constants/colors.cjs');
 require('../../utils/constants/values.cjs');
@@ -85,7 +85,7 @@ require('../../context/IpConfigurationContext/IpConfigurationContext.cjs');
 require('../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
 require('@hcaptcha/react-hcaptcha');
 
-const AddNetworkModal = ({ walletKey, network, onCancel, onNetworkAdded, addNetworkMutation, }) => {
+const AddNetworkModal = ({ walletConnector, network, onCancel, onNetworkAdded, addNetworkMutation, }) => {
     const { onSuccess, show, handleOnModalUnmount, closeModal } = useConfirmationPortal.useConfirmationPortal({
         defaultErrorMessage: 'User canceled',
         onReject: onCancel,
@@ -93,7 +93,7 @@ const AddNetworkModal = ({ walletKey, network, onCancel, onNetworkAdded, addNetw
     });
     return (jsxRuntime.jsx(ConfirmationModal.ConfirmationModal, { modalId: 'prompt-to-add-network', show: show, 
         // Disables the closing by clicking outside the modal
-        closeModal: () => { }, handleOnModalUnmount: handleOnModalUnmount, children: jsxRuntime.jsx(AddNetworkView.AddNetworkView, { walletKey: walletKey, addNetworkMutation: addNetworkMutation, network: network, onCancel: closeModal, onNetworkAdded: onSuccess }) }));
+        closeModal: () => { }, handleOnModalUnmount: handleOnModalUnmount, children: jsxRuntime.jsx(AddNetworkView.AddNetworkView, { walletConnector: walletConnector, addNetworkMutation: addNetworkMutation, network: network, onCancel: closeModal, onNetworkAdded: onSuccess }) }));
 };
 
 exports.AddNetworkModal = AddNetworkModal;

package/src/lib/modals/AddNetworkModal/AddNetworkModal.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
 import { GenericNetwork } from '@dynamic-labs/types';
+import { InternalWalletConnector } from '@dynamic-labs/wallet-connector-core';
 type AddNetworkModalProps = {
-    walletKey: string;
+    walletConnector: InternalWalletConnector;
     network: GenericNetwork;
     onCancel: () => void;
     onNetworkAdded: () => void;

package/src/lib/modals/AddNetworkModal/AddNetworkModal.js

@@ -4,6 +4,7 @@ import { ConfirmationModal } from '../ConfirmationModal/ConfirmationModal.js';
 import { useConfirmationPortal } from '../../utils/hooks/useConfirmationPortal/useConfirmationPortal.js';
 import 'react-i18next';
 import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/wallet-connector-core';
 import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
 import '../../components/Alert/Alert.js';
 import 'react';
@@ -14,7 +15,6 @@ import '../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../shared/logger.js';
 import '@dynamic-labs/iconic';
-import '@dynamic-labs/wallet-connector-core';
 import '../../context/ViewContext/ViewContext.js';
 import '../../utils/constants/colors.js';
 import '../../utils/constants/values.js';
@@ -81,7 +81,7 @@ import '../../context/IpConfigurationContext/IpConfigurationContext.js';
 import '../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
 import '@hcaptcha/react-hcaptcha';
 
-const AddNetworkModal = ({ walletKey, network, onCancel, onNetworkAdded, addNetworkMutation, }) => {
+const AddNetworkModal = ({ walletConnector, network, onCancel, onNetworkAdded, addNetworkMutation, }) => {
     const { onSuccess, show, handleOnModalUnmount, closeModal } = useConfirmationPortal({
         defaultErrorMessage: 'User canceled',
         onReject: onCancel,
@@ -89,7 +89,7 @@ const AddNetworkModal = ({ walletKey, network, onCancel, onNetworkAdded, addNetw
     });
     return (jsx(ConfirmationModal, { modalId: 'prompt-to-add-network', show: show, 
         // Disables the closing by clicking outside the modal
-        closeModal: () => { }, handleOnModalUnmount: handleOnModalUnmount, children: jsx(AddNetworkView, { walletKey: walletKey, addNetworkMutation: addNetworkMutation, network: network, onCancel: closeModal, onNetworkAdded: onSuccess }) }));
+        closeModal: () => { }, handleOnModalUnmount: handleOnModalUnmount, children: jsx(AddNetworkView, { walletConnector: walletConnector, addNetworkMutation: addNetworkMutation, network: network, onCancel: closeModal, onNetworkAdded: onSuccess }) }));
 };
 
 export { AddNetworkModal };