@dynamic-labs/sdk-react-core 3.1.3 → 3.2.0

package/src/lib/utils/functions/getWalletConnectorForWallet/getWalletConnectorForWallet.cjs

@@ -0,0 +1,24 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var walletConnectorOptions = require('../../../store/state/walletConnectorOptions.cjs');
+
+const getWalletConnectorForWallet = (wallet) => {
+    var _a, _b;
+    if (!wallet) {
+        return undefined;
+    }
+    const walletConnectorOptions$1 = walletConnectorOptions.getWalletConnectorOptions();
+    const { key: walletKey, chain } = wallet;
+    const walletConnector = (_a = walletConnectorOptions$1.find((wallet) => walletKey === wallet.key &&
+        wallet.walletConnector.connectedChain === chain)) === null || _a === void 0 ? void 0 : _a.walletConnector;
+    if (walletConnector) {
+        return walletConnector;
+    }
+    const fallbackConnector = (_b = walletConnectorOptions$1.find((wallet) => wallet.key === 'fallbackconnector')) === null || _b === void 0 ? void 0 : _b.walletConnector;
+    return fallbackConnector;
+};
+
+exports.getWalletConnectorForWallet = getWalletConnectorForWallet;

package/src/lib/utils/functions/getWalletConnectorForWallet/getWalletConnectorForWallet.js

@@ -0,0 +1,20 @@
+'use client'
+import { getWalletConnectorOptions } from '../../../store/state/walletConnectorOptions.js';
+
+const getWalletConnectorForWallet = (wallet) => {
+    var _a, _b;
+    if (!wallet) {
+        return undefined;
+    }
+    const walletConnectorOptions = getWalletConnectorOptions();
+    const { key: walletKey, chain } = wallet;
+    const walletConnector = (_a = walletConnectorOptions.find((wallet) => walletKey === wallet.key &&
+        wallet.walletConnector.connectedChain === chain)) === null || _a === void 0 ? void 0 : _a.walletConnector;
+    if (walletConnector) {
+        return walletConnector;
+    }
+    const fallbackConnector = (_b = walletConnectorOptions.find((wallet) => wallet.key === 'fallbackconnector')) === null || _b === void 0 ? void 0 : _b.walletConnector;
+    return fallbackConnector;
+};
+
+export { getWalletConnectorForWallet };

package/src/lib/utils/functions/socialStorage/socialStorage.d.ts

@@ -1,4 +1,5 @@
 import { ProviderEnum } from '@dynamic-labs/sdk-api-core';
+import { SocialAuthMode } from '../../hooks/useSocialAuth';
 export declare const SOCIAL_STORAGE_KEY = "dynamic_social_storage";
 export type SocialStorageItem = {
     provider: ProviderEnum;
@@ -10,6 +11,8 @@ export type SocialStorageItem = {
     captchaToken?: string;
     /** Oauth code from redirect from oauth provider, this will be provided on response from redirect endpoint **/
     code?: string;
+    /** Social auth mode, either sign-in or link */
+    mode: SocialAuthMode;
 };
 export type SocialStorage = Partial<Record<ProviderEnum, SocialStorageItem>>;
 export declare const searchSocialStorageByState: (targetState: string) => SocialStorageItem | undefined;

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.cjs

@@ -30,6 +30,7 @@ var session = require('../../../data/api/session/session.cjs');
 require('../../../locale/locale.cjs');
 var getWalletProvider = require('../../functions/getWalletProvider/getWalletProvider.cjs');
 var isConnectOnly = require('../authenticationHooks/helpers/isConnectOnly.cjs');
+var getWalletConnectorForWallet = require('../../functions/getWalletConnectorForWallet/getWalletConnectorForWallet.cjs');
 var updateUserWalletsFromConnectedWallets = require('./updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.cjs');
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, handleConnectedWallet, setShowAuthFlow, isBridgeFlow, user, }) => {
@@ -136,10 +137,11 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         var _a;
         const clonedConnectedWalletsList = [...connectedWallets];
         const connectedWalletIndex = clonedConnectedWalletsList.findIndex((connectedWallet) => connectedWallet.id === walletId);
-        if (connectedWalletIndex > -1) {
-            clonedConnectedWalletsList[connectedWalletIndex].address =
-                (_a = walletObject.address) !== null && _a !== void 0 ? _a : clonedConnectedWalletsList[connectedWalletIndex].address;
+        if (connectedWalletIndex < 0) {
+            return;
         }
+        clonedConnectedWalletsList[connectedWalletIndex] =
+            clonedConnectedWalletsList[connectedWalletIndex].connector.createWallet(Object.assign(Object.assign({}, clonedConnectedWalletsList[connectedWalletIndex]), { address: (_a = walletObject.address) !== null && _a !== void 0 ? _a : clonedConnectedWalletsList[connectedWalletIndex].address, connector: getWalletConnectorForWallet.getWalletConnectorForWallet(clonedConnectedWalletsList[connectedWalletIndex]) }));
         setConnectedWallets(clonedConnectedWalletsList);
     }, [connectedWallets, setConnectedWallets]);
     // Keeps connected wallet data inside localStorage

package/src/lib/utils/hooks/useConnectWallet/useConnectWallet.js

@@ -26,6 +26,7 @@ import { createVisit } from '../../../data/api/session/session.js';
 import '../../../locale/locale.js';
 import { getWalletProvider } from '../../functions/getWalletProvider/getWalletProvider.js';
 import { isConnectOnly } from '../authenticationHooks/helpers/isConnectOnly.js';
+import { getWalletConnectorForWallet } from '../../functions/getWalletConnectorForWallet/getWalletConnectorForWallet.js';
 import { updateUserWalletsFromConnectedWallets } from './updateUserWalletsFromConnectedWallets/updateUserWalletsFromConnectedWallets.js';
 
 const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingOnConnectOnly, environmentId, primaryWalletId, setPrimaryWalletId, walletConnectorOptions, handleConnectedWallet, setShowAuthFlow, isBridgeFlow, user, }) => {
@@ -132,10 +133,11 @@ const useConnectWallet = ({ authMode, clearPrimaryWalletId, enableVisitTrackingO
         var _a;
         const clonedConnectedWalletsList = [...connectedWallets];
         const connectedWalletIndex = clonedConnectedWalletsList.findIndex((connectedWallet) => connectedWallet.id === walletId);
-        if (connectedWalletIndex > -1) {
-            clonedConnectedWalletsList[connectedWalletIndex].address =
-                (_a = walletObject.address) !== null && _a !== void 0 ? _a : clonedConnectedWalletsList[connectedWalletIndex].address;
+        if (connectedWalletIndex < 0) {
+            return;
         }
+        clonedConnectedWalletsList[connectedWalletIndex] =
+            clonedConnectedWalletsList[connectedWalletIndex].connector.createWallet(Object.assign(Object.assign({}, clonedConnectedWalletsList[connectedWalletIndex]), { address: (_a = walletObject.address) !== null && _a !== void 0 ? _a : clonedConnectedWalletsList[connectedWalletIndex].address, connector: getWalletConnectorForWallet(clonedConnectedWalletsList[connectedWalletIndex]) }));
         setConnectedWallets(clonedConnectedWalletsList);
     }, [connectedWallets, setConnectedWallets]);
     // Keeps connected wallet data inside localStorage

package/src/lib/utils/hooks/useConnectedWalletsNetworkValidation/useConnectedWalletsNetworkValidation.cjs

@@ -19,6 +19,7 @@ require('../../constants/values.cjs');
 require('../../../store/state/loadingAndLifecycle.cjs');
 require('../../../shared/consts/index.cjs');
 require('../../../events/dynamicEvents.cjs');
+var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWalletConnectorEvent.cjs');
 require('../../../context/CaptchaContext/CaptchaContext.cjs');
 require('../../../context/ErrorContext/ErrorContext.cjs');
 require('@dynamic-labs/multi-wallet');
@@ -140,6 +141,14 @@ const useConnectedWalletsNetworkValidation = () => {
         setShowAuthFlow,
         setView,
     ]);
+    const uniqueConnectors = React.useMemo(() => {
+        const connectors = connectedWallets.map(({ connector }) => connector);
+        const allWalletConnectors = new Set([...connectors].filter((connector) => Boolean(connector)));
+        return Array.from(allWalletConnectors);
+    }, [connectedWallets]);
+    useWalletConnectorEvent.useWalletConnectorEvent(uniqueConnectors, 'chainChange', ({ chain }) => {
+        validateNetwork();
+    });
     React.useEffect(() => {
         /**
          * This check was added to prevent the "wrong network" modal from appearing

package/src/lib/utils/hooks/useConnectedWalletsNetworkValidation/useConnectedWalletsNetworkValidation.js

@@ -1,6 +1,6 @@
 'use client'
 import { __awaiter } from '../../../../../_virtual/_tslib.js';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useMemo, useEffect } from 'react';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
@@ -15,6 +15,7 @@ import '../../constants/values.js';
 import '../../../store/state/loadingAndLifecycle.js';
 import '../../../shared/consts/index.js';
 import '../../../events/dynamicEvents.js';
+import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWalletConnectorEvent.js';
 import '../../../context/CaptchaContext/CaptchaContext.js';
 import '../../../context/ErrorContext/ErrorContext.js';
 import '@dynamic-labs/multi-wallet';
@@ -136,6 +137,14 @@ const useConnectedWalletsNetworkValidation = () => {
         setShowAuthFlow,
         setView,
     ]);
+    const uniqueConnectors = useMemo(() => {
+        const connectors = connectedWallets.map(({ connector }) => connector);
+        const allWalletConnectors = new Set([...connectors].filter((connector) => Boolean(connector)));
+        return Array.from(allWalletConnectors);
+    }, [connectedWallets]);
+    useWalletConnectorEvent(uniqueConnectors, 'chainChange', ({ chain }) => {
+        validateNetwork();
+    });
     useEffect(() => {
         /**
          * This check was added to prevent the "wrong network" modal from appearing

package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.cjs

@@ -369,6 +369,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         socialStorage.setSocialStorageFor(provider, {
             captchaToken,
             codeVerifier: usingPkce ? verifier : undefined,
+            mode: authMode,
             state,
         });
         const loginUrlString = getOauthLoginUrl.getOauthLoginUrl((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _d !== void 0 ? _d : [], provider);

package/src/lib/utils/hooks/useSocialAuth/useSocialAuth.js

@@ -365,6 +365,7 @@ const useSocialAuth = ({ sessionTimeout, onSettled, onError, onFarcasterUrl, })
         setSocialStorageFor(provider, {
             captchaToken,
             codeVerifier: usingPkce ? verifier : undefined,
+            mode: authMode,
             state,
         });
         const loginUrlString = getOauthLoginUrl((_d = projectSettings === null || projectSettings === void 0 ? void 0 : projectSettings.providers) !== null && _d !== void 0 ? _d : [], provider);

package/src/lib/utils/hooks/useWalletConnectors/utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.cjs

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var sdkApiCore = require('@dynamic-labs/sdk-api-core');
+var walletConnectorCore = require('@dynamic-labs/wallet-connector-core');
 var findWalletOptionFor = require('../../../../functions/findWalletOptionFor/findWalletOptionFor.cjs');
 var shouldManuallyReconnectOnRefresh = require('../../../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.cjs');
 var convertLegacyPhantomLedgerConnector = require('../convertLegacyPhantomLedgerConnector/convertLegacyPhantomLedgerConnector.cjs');
@@ -17,7 +18,7 @@ const createLinkedWalletsFromWalletOptions = ({ user, walletConnectorOptions, pr
     return user.verifiedCredentials
         .map(convertLegacyPhantomLedger)
         .map((account) => {
-        var _a;
+        var _a, _b;
         const wallet = findWalletOptionFor.findWalletOptionFor(account, walletConnectorOptions);
         // this probably shouldn't happen. this would mean that the user has an account linked
         // with wallet W, but the customer has toggled off wallet W or the chain that
@@ -29,6 +30,12 @@ const createLinkedWalletsFromWalletOptions = ({ user, walletConnectorOptions, pr
             shouldManuallyReconnectOnRefresh.shouldManuallyReconnectOnRefresh(wallet.walletConnector)) {
             wallet.walletConnector.connect();
         }
+        // only checking for ledger hardware wallets since we only specify ledger as a hardware wallet
+        if (((_a = account.walletProperties) === null || _a === void 0 ? void 0 : _a.hardwareWallet) ===
+            sdkApiCore.HardwareWalletEnum.Ledger &&
+            walletConnectorCore.isHardwareWalletConnector(wallet.walletConnector)) {
+            wallet.walletConnector.isHardwareWalletEnabled = true;
+        }
         // this account is the owner of a smart wallet, and should not be surfaced
         if (smartWallet.isOwnerOfASmartWallet(account, user.verifiedCredentials)) {
             return null;
@@ -48,7 +55,7 @@ const createLinkedWalletsFromWalletOptions = ({ user, walletConnectorOptions, pr
                 connector: wallet.walletConnector,
                 id: account.id,
                 isAuthenticated: true,
-                key: (_a = account.walletName) !== null && _a !== void 0 ? _a : wallet.walletConnector.key,
+                key: (_b = account.walletName) !== null && _b !== void 0 ? _b : wallet.walletConnector.key,
             });
         }
         return null;

package/src/lib/utils/hooks/useWalletConnectors/utils/createLinkedWalletsFromWalletOptions/createLinkedWalletsFromWalletOptions.js

@@ -1,5 +1,6 @@
 'use client'
-import { WalletProviderEnum } from '@dynamic-labs/sdk-api-core';
+import { HardwareWalletEnum, WalletProviderEnum } from '@dynamic-labs/sdk-api-core';
+import { isHardwareWalletConnector } from '@dynamic-labs/wallet-connector-core';
 import { findWalletOptionFor } from '../../../../functions/findWalletOptionFor/findWalletOptionFor.js';
 import { shouldManuallyReconnectOnRefresh } from '../../../../functions/shouldManuallyReconnectOnRefresh/shouldManuallyReconnectOnRefresh.js';
 import { convertLegacyPhantomLedgerConnector } from '../convertLegacyPhantomLedgerConnector/convertLegacyPhantomLedgerConnector.js';
@@ -13,7 +14,7 @@ const createLinkedWalletsFromWalletOptions = ({ user, walletConnectorOptions, pr
     return user.verifiedCredentials
         .map(convertLegacyPhantomLedger)
         .map((account) => {
-        var _a;
+        var _a, _b;
         const wallet = findWalletOptionFor(account, walletConnectorOptions);
         // this probably shouldn't happen. this would mean that the user has an account linked
         // with wallet W, but the customer has toggled off wallet W or the chain that
@@ -25,6 +26,12 @@ const createLinkedWalletsFromWalletOptions = ({ user, walletConnectorOptions, pr
             shouldManuallyReconnectOnRefresh(wallet.walletConnector)) {
             wallet.walletConnector.connect();
         }
+        // only checking for ledger hardware wallets since we only specify ledger as a hardware wallet
+        if (((_a = account.walletProperties) === null || _a === void 0 ? void 0 : _a.hardwareWallet) ===
+            HardwareWalletEnum.Ledger &&
+            isHardwareWalletConnector(wallet.walletConnector)) {
+            wallet.walletConnector.isHardwareWalletEnabled = true;
+        }
         // this account is the owner of a smart wallet, and should not be surfaced
         if (isOwnerOfASmartWallet(account, user.verifiedCredentials)) {
             return null;
@@ -44,7 +51,7 @@ const createLinkedWalletsFromWalletOptions = ({ user, walletConnectorOptions, pr
                 connector: wallet.walletConnector,
                 id: account.id,
                 isAuthenticated: true,
-                key: (_a = account.walletName) !== null && _a !== void 0 ? _a : wallet.walletConnector.key,
+                key: (_b = account.walletName) !== null && _b !== void 0 ? _b : wallet.walletConnector.key,
             });
         }
         return null;

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.cjs

@@ -22,13 +22,6 @@ var useWalletConnectorEvent = require('../events/useWalletConnectorEvent/useWall
 var dynamicEvents = require('../../../events/dynamicEvents.cjs');
 
 const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, detectNewWalletsForLinking, }) => {
-    useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', ({ chain }) => {
-        logger.logger.debug('primary wallet chain change', { chain });
-        if (!primaryWallet) {
-            return;
-        }
-        refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-    });
     const handleAccountChangeWhenAwaitingAccountSwitch = React.useCallback((isPrimaryWallet, newAddress) => {
         logger.logger.debug('handleAccountChangeWhenAwaitingAccountSwitch', {
             isPrimaryWallet,
@@ -149,13 +142,6 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
         }
     }));
-    useWalletConnectorEvent.useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', (_, changedConnector) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-        logger.logger.debug('secondary wallet chain change');
-        // Get all wallets with this connector
-        const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
-        for (const wallet of affectedWallets)
-            refreshConnectedWallet(wallet.id, wallet.connector);
-    }));
     useWalletConnectorEvent.useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
         logger.logger.debug('primary wallet disconnect');
         if (authMode === 'connect-only') {

package/src/lib/utils/hooks/useWalletEventListeners/useWalletEventListeners.js

@@ -18,13 +18,6 @@ import { useWalletConnectorEvent } from '../events/useWalletConnectorEvent/useWa
 import { dynamicEvents } from '../../../events/dynamicEvents.js';
 
 const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet, multiWalletWidgetState, primaryWallet, secondaryWallets, selectedWalletConnector, selectedWalletWithAction, setSelectedWalletConnectorKey, setSelectedWalletWithAction, setMultiWalletWidgetState, user, setPrimaryWalletId, authMode, refreshConnectedWallet, detectNewWalletsForLinking, }) => {
-    useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'chainChange', ({ chain }) => {
-        logger.debug('primary wallet chain change', { chain });
-        if (!primaryWallet) {
-            return;
-        }
-        refreshConnectedWallet(primaryWallet.id, primaryWallet.connector);
-    });
     const handleAccountChangeWhenAwaitingAccountSwitch = useCallback((isPrimaryWallet, newAddress) => {
         logger.debug('handleAccountChangeWhenAwaitingAccountSwitch', {
             isPrimaryWallet,
@@ -145,13 +138,6 @@ const useWalletEventListeners = ({ disconnectWallet, handleLogOut, multiWallet,
             handleAccountChangeWhenAwaitingAccountSwitch(false, (selectedWalletWithAction === null || selectedWalletWithAction === void 0 ? void 0 : selectedWalletWithAction.wallet.address) || '');
         }
     }));
-    useWalletConnectorEvent(uniqueNonPrimaryWallets, 'chainChange', (_, changedConnector) => __awaiter(void 0, void 0, void 0, function* () {
-        logger.debug('secondary wallet chain change');
-        // Get all wallets with this connector
-        const affectedWallets = secondaryWallets.filter(({ connector }) => connector.key === changedConnector.key);
-        for (const wallet of affectedWallets)
-            refreshConnectedWallet(wallet.id, wallet.connector);
-    }));
     useWalletConnectorEvent(primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector, 'disconnect', () => {
         logger.debug('primary wallet disconnect');
         if (authMode === 'connect-only') {

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

@@ -13,8 +13,10 @@ var ManagePasskeysWidgetView = require('../../views/ManagePasskeysWidgetView/Man
 var SettingsView = require('../../views/SettingsView/SettingsView.cjs');
 var ManageMfaWidgetView = require('../../views/ManageMfaWidgetView/ManageMfaWidgetView.cjs');
 var GlobalWalletView = require('../../views/GlobalWalletView/GlobalWalletView.cjs');
+var ConnectedAppsView = require('../../views/ConnectedAppsView/ConnectedAppsView.cjs');
 
 const mapViewToComponent = {
+    'connected-apps': ConnectedAppsView.ConnectedAppsView,
     'edit-profile': EditProfileView.EditProfileView,
     'global-wallet': GlobalWalletView.GlobalWalletView,
     'manage-mfa': ManageMfaWidgetView.ManageMfaWidgetView,
@@ -25,9 +27,9 @@ const mapViewToComponent = {
     wallets: WalletsView.WalletsView,
 };
 const DynamicWidgetViews = () => {
-    const { dynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { dynamicWidgetView, viewProps } = DynamicWidgetContext.useWidgetContext();
     const ViewComponent = mapViewToComponent[dynamicWidgetView] || mapViewToComponent.wallets;
-    return jsxRuntime.jsx(ViewComponent, {});
+    return jsxRuntime.jsx(ViewComponent, Object.assign({}, viewProps));
 };
 
 exports.DynamicWidgetViews = DynamicWidgetViews;

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

@@ -9,8 +9,10 @@ import { ManagePasskeysWidgetView } from '../../views/ManagePasskeysWidgetView/M
 import { SettingsView } from '../../views/SettingsView/SettingsView.js';
 import { ManageMfaWidgetView } from '../../views/ManageMfaWidgetView/ManageMfaWidgetView.js';
 import { GlobalWalletView } from '../../views/GlobalWalletView/GlobalWalletView.js';
+import { ConnectedAppsView } from '../../views/ConnectedAppsView/ConnectedAppsView.js';
 
 const mapViewToComponent = {
+    'connected-apps': ConnectedAppsView,
     'edit-profile': EditProfileView,
     'global-wallet': GlobalWalletView,
     'manage-mfa': ManageMfaWidgetView,
@@ -21,9 +23,9 @@ const mapViewToComponent = {
     wallets: WalletsView,
 };
 const DynamicWidgetViews = () => {
-    const { dynamicWidgetView } = useWidgetContext();
+    const { dynamicWidgetView, viewProps } = useWidgetContext();
     const ViewComponent = mapViewToComponent[dynamicWidgetView] || mapViewToComponent.wallets;
-    return jsx(ViewComponent, {});
+    return jsx(ViewComponent, Object.assign({}, viewProps));
 };
 
 export { DynamicWidgetViews, mapViewToComponent };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.cjs

@@ -100,7 +100,12 @@ const DynamicWidgetContextProvider = ({ children, }) => {
     const availableWalletsContainerRef = React.useRef(null);
     const { setShowDynamicUserProfile, showDynamicUserProfile, multiWallet } = useInternalDynamicContext.useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag.useKYCFlag();
-    const { view: dynamicWidgetView, setView: setDynamicWidgetView, goToInitialView: goToInitialDynamicWidgetView, } = useViewController.useViewController(isKYCEnabled && !multiWallet ? 'profile' : 'wallets');
+    const { view: dynamicWidgetView, setView, goToInitialView: goToInitialDynamicWidgetView, } = useViewController.useViewController(isKYCEnabled && !multiWallet ? 'profile' : 'wallets');
+    const [viewProps, setViewProps] = React.useState({});
+    const setDynamicWidgetView = React.useCallback((view, props) => {
+        setView(view);
+        setViewProps(props || {});
+    }, [setView]);
     const goToProfileView = React.useCallback(() => {
         if (isKYCEnabled)
             return setDynamicWidgetView('profile');
@@ -132,6 +137,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         overridenWidgetView,
         setDynamicWidgetView,
         setIsOpen: setShowDynamicUserProfile,
+        viewProps,
         widgetRef,
     }), [
         dynamicWidgetView,
@@ -141,6 +147,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         setDynamicWidgetView,
         setShowDynamicUserProfile,
         overridenWidgetView,
+        viewProps,
     ]);
     return (jsxRuntime.jsx(DynamicWidgetContext.Provider, { value: value, children: children }));
 };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useRef, useCallback, useMemo, useContext } from 'react';
+import { createContext, useRef, useState, useCallback, useMemo, useContext } from 'react';
 import '../../../context/DynamicContext/DynamicContext.js';
 import '@dynamic-labs/sdk-api-core';
 import '../../../shared/logger.js';
@@ -96,7 +96,12 @@ const DynamicWidgetContextProvider = ({ children, }) => {
     const availableWalletsContainerRef = useRef(null);
     const { setShowDynamicUserProfile, showDynamicUserProfile, multiWallet } = useInternalDynamicContext();
     const isKYCEnabled = useKYCFlag();
-    const { view: dynamicWidgetView, setView: setDynamicWidgetView, goToInitialView: goToInitialDynamicWidgetView, } = useViewController(isKYCEnabled && !multiWallet ? 'profile' : 'wallets');
+    const { view: dynamicWidgetView, setView, goToInitialView: goToInitialDynamicWidgetView, } = useViewController(isKYCEnabled && !multiWallet ? 'profile' : 'wallets');
+    const [viewProps, setViewProps] = useState({});
+    const setDynamicWidgetView = useCallback((view, props) => {
+        setView(view);
+        setViewProps(props || {});
+    }, [setView]);
     const goToProfileView = useCallback(() => {
         if (isKYCEnabled)
             return setDynamicWidgetView('profile');
@@ -128,6 +133,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         overridenWidgetView,
         setDynamicWidgetView,
         setIsOpen: setShowDynamicUserProfile,
+        viewProps,
         widgetRef,
     }), [
         dynamicWidgetView,
@@ -137,6 +143,7 @@ const DynamicWidgetContextProvider = ({ children, }) => {
         setDynamicWidgetView,
         setShowDynamicUserProfile,
         overridenWidgetView,
+        viewProps,
     ]);
     return (jsx(DynamicWidgetContext.Provider, { value: value, children: children }));
 };

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.cjs

@@ -4,7 +4,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const DynamicSettingsViews = ['settings'];
-const DynamicGlobalWalletViews = ['global-wallet'];
+const DynamicGlobalWalletViews = [
+    'global-wallet',
+    'connected-apps',
+];
 const DynamicPasskeyWidgetViews = ['manage-passkeys'];
 const DynamicMfaWidgetViews = ['manage-mfa'];
 const DynamicTransactionsWidgetViews = ['send-balance'];

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.d.ts

@@ -1,19 +1,8 @@
 import { Dispatch, RefObject, SetStateAction } from 'react';
-export interface WidgetContextProps {
-    availableWalletsContainerRef: RefObject<HTMLDivElement>;
-    dynamicWidgetView: DynamicWidgetViews;
-    goToProfileView: () => void;
-    goToInitialDynamicWidgetView: () => void;
-    inlineControlsRef: RefObject<HTMLDivElement>;
-    isOpen: boolean;
-    setDynamicWidgetView: Dispatch<SetStateAction<DynamicWidgetViews>>;
-    setIsOpen: Dispatch<SetStateAction<boolean>>;
-    widgetRef: RefObject<HTMLDivElement>;
-    overridenWidgetView: DynamicWidgetViews;
-}
+import { ConnectedAppsViewProps } from '../views/ConnectedAppsView/ConnectedAppsView';
 export declare const DynamicSettingsViews: readonly ["settings"];
 export type DynamicSettingsType = typeof DynamicSettingsViews[number];
-export declare const DynamicGlobalWalletViews: readonly ["global-wallet"];
+export declare const DynamicGlobalWalletViews: readonly ["global-wallet", "connected-apps"];
 export type DynamicGlobalWalletType = typeof DynamicGlobalWalletViews[number];
 export declare const DynamicPasskeyWidgetViews: readonly ["manage-passkeys"];
 export declare const DynamicMfaWidgetViews: readonly ["manage-mfa"];
@@ -21,4 +10,20 @@ export type DynamicPasskeyWidgetViewsType = typeof DynamicPasskeyWidgetViews[num
 export type DynamicMfaWidgetViewsType = typeof DynamicMfaWidgetViews[number];
 export declare const DynamicTransactionsWidgetViews: readonly ["send-balance"];
 export type DynamicTransactionsWidgetViewsType = typeof DynamicTransactionsWidgetViews[number];
-export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicMfaWidgetViewsType | DynamicSettingsType | DynamicGlobalWalletType;
+export type DynamicWidgetViews = 'wallets' | 'profile' | 'edit-profile' | DynamicTransactionsWidgetViewsType | DynamicPasskeyWidgetViewsType | DynamicMfaWidgetViewsType | DynamicSettingsType | DynamicGlobalWalletType | 'connected-apps';
+export type ViewProps = {
+    'connected-apps': ConnectedAppsViewProps;
+};
+export type WidgetContextProps = {
+    availableWalletsContainerRef: RefObject<HTMLDivElement>;
+    dynamicWidgetView: DynamicWidgetViews;
+    goToInitialDynamicWidgetView: () => void;
+    goToProfileView: () => void;
+    inlineControlsRef: RefObject<HTMLDivElement>;
+    isOpen: boolean;
+    overridenWidgetView: DynamicWidgetViews;
+    setDynamicWidgetView: <T extends DynamicWidgetViews>(view: T, props?: T extends keyof ViewProps ? ViewProps[T] : never) => void;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    widgetRef: RefObject<HTMLDivElement>;
+    viewProps: Record<string, unknown>;
+};

package/src/lib/widgets/DynamicWidget/context/DynamicWidgetContext.types.js

@@ -1,6 +1,9 @@
 'use client'
 const DynamicSettingsViews = ['settings'];
-const DynamicGlobalWalletViews = ['global-wallet'];
+const DynamicGlobalWalletViews = [
+    'global-wallet',
+    'connected-apps',
+];
 const DynamicPasskeyWidgetViews = ['manage-passkeys'];
 const DynamicMfaWidgetViews = ['manage-mfa'];
 const DynamicTransactionsWidgetViews = ['send-balance'];