@dynamic-labs/sdk-react-core 4.18.8 → 4.19.1

package/CHANGELOG.md

@@ -1,4 +1,27 @@
 
+### [4.19.1](https://github.com/dynamic-labs/dynamic-auth/compare/v4.19.0...v4.19.1) (2025-05-26)
+
+
+### Bug Fixes
+
+* **react-native:** reload webview when disconnected ([#8765](https://github.com/dynamic-labs/dynamic-auth/issues/8765)) ([addf90b](https://github.com/dynamic-labs/dynamic-auth/commit/addf90b6fccbe4b883e9778cf7a07e0471f85318))
+
+## [4.19.0](https://github.com/dynamic-labs/dynamic-auth/compare/v4.18.8...v4.19.0) (2025-05-23)
+
+
+### Features
+
+* expose 7702 kernel and add viem controller ([#8786](https://github.com/dynamic-labs/dynamic-auth/issues/8786)) ([eea710e](https://github.com/dynamic-labs/dynamic-auth/commit/eea710e238ccbc36e6be37d8f7493954b99858ef))
+* use browser wallet client & iframe for waas operations ([#8697](https://github.com/dynamic-labs/dynamic-auth/issues/8697)) ([13a47b1](https://github.com/dynamic-labs/dynamic-auth/commit/13a47b1c9a2984f08682e833ca8c87605a3a872f))
+
+
+### Bug Fixes
+
+* **global-wallet:** close popup when page unloads to prevent orphaned popup windows ([#8787](https://github.com/dynamic-labs/dynamic-auth/issues/8787)) ([441b04c](https://github.com/dynamic-labs/dynamic-auth/commit/441b04ca04a02feb37473e43bca0e66c5d772ce2))
+* override network when requesting BTC networks in useTokenBalances ([#8773](https://github.com/dynamic-labs/dynamic-auth/issues/8773)) ([fd07d09](https://github.com/dynamic-labs/dynamic-auth/commit/fd07d09de970c7e6f85b251a88854e8eca57e249))
+* remove libmpc executor dependency global wallet ([#8792](https://github.com/dynamic-labs/dynamic-auth/issues/8792)) ([7502585](https://github.com/dynamic-labs/dynamic-auth/commit/75025859d2f952915322cf65504117ec2506152b))
+* standardize font on headers ([#8734](https://github.com/dynamic-labs/dynamic-auth/issues/8734)) ([9f0900c](https://github.com/dynamic-labs/dynamic-auth/commit/9f0900cb7c4294201cc952ae7538648bdea83ff5))
+
 ### [4.18.8](https://github.com/dynamic-labs/dynamic-auth/compare/v4.18.7...v4.18.8) (2025-05-22)
 
 ### Bug Fixes

package/package.cjs

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

package/package.js

@@ -1,5 +1,5 @@
 'use client'
-var version = "4.18.8";
+var version = "4.19.1";
 var dependencies = {
 	"@dynamic-labs/sdk-api-core": "0.0.672",
 	"@hcaptcha/react-hcaptcha": "1.4.4",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/sdk-react-core",
-  "version": "4.18.8",
+  "version": "4.19.1",
   "dependencies": {
     "@dynamic-labs/sdk-api-core": "0.0.672",
     "@hcaptcha/react-hcaptcha": "1.4.4",
@@ -14,16 +14,16 @@
     "yup": "0.32.11",
     "react-international-phone": "4.2.5",
     "bs58": "5.0.0",
-    "@dynamic-labs/assert-package-version": "4.18.8",
-    "@dynamic-labs/iconic": "4.18.8",
-    "@dynamic-labs/logger": "4.18.8",
-    "@dynamic-labs/multi-wallet": "4.18.8",
-    "@dynamic-labs/rpc-providers": "4.18.8",
-    "@dynamic-labs/store": "4.18.8",
-    "@dynamic-labs/types": "4.18.8",
-    "@dynamic-labs/utils": "4.18.8",
-    "@dynamic-labs/wallet-book": "4.18.8",
-    "@dynamic-labs/wallet-connector-core": "4.18.8",
+    "@dynamic-labs/assert-package-version": "4.19.1",
+    "@dynamic-labs/iconic": "4.19.1",
+    "@dynamic-labs/logger": "4.19.1",
+    "@dynamic-labs/multi-wallet": "4.19.1",
+    "@dynamic-labs/rpc-providers": "4.19.1",
+    "@dynamic-labs/store": "4.19.1",
+    "@dynamic-labs/types": "4.19.1",
+    "@dynamic-labs/utils": "4.19.1",
+    "@dynamic-labs/wallet-book": "4.19.1",
+    "@dynamic-labs/wallet-connector-core": "4.19.1",
     "eventemitter3": "5.0.1"
   },
   "devDependencies": {

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

@@ -0,0 +1,10 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shortenWalletAddress = require('../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.cjs');
+
+const getSessionInformationName = (session) => { var _a; return (_a = session.origin) !== null && _a !== void 0 ? _a : shortenWalletAddress.shortenWalletAddress(session.sessionId); };
+
+exports.getSessionInformationName = getSessionInformationName;

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

@@ -0,0 +1,2 @@
+import { SessionInformation } from '../../types/SessionInformation';
+export declare const getSessionInformationName: (session: SessionInformation) => string;

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

@@ -0,0 +1,6 @@
+'use client'
+import { shortenWalletAddress } from '../../../shared/utils/functions/shortenWalletAddress/shortenWalletAddress.js';
+
+const getSessionInformationName = (session) => { var _a; return (_a = session.origin) !== null && _a !== void 0 ? _a : shortenWalletAddress(session.sessionId); };
+
+export { getSessionInformationName };

package/src/lib/utils/functions/getSessionInformationName/index.d.ts

@@ -0,0 +1 @@
+export * from './getSessionInformationName';

package/src/lib/utils/hooks/useDynamicWaas/useDynamicWaas.d.ts

@@ -10,9 +10,8 @@ export declare const useDynamicWaas: () => {
     createWalletAccount: () => Promise<({
         chainName: string;
         accountAddress: string;
-        rawPublicKey: Uint8Array;
-        clientKeyShares: string[];
-        publicKeyHex?: string | undefined;
+        publicKeyHex: string;
+        rawPublicKey: string | Uint8Array | undefined;
     } | undefined)[]>;
     dynamicWaasIsEnabled: boolean;
     getWalletConnector: (chainName: string) => IDynamicWaasConnector | undefined;

package/src/lib/utils/hooks/useSessionKeys/index.d.ts

@@ -0,0 +1 @@
+export * from './useSessionKeys';

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

@@ -0,0 +1,140 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../../_virtual/_tslib.cjs');
+var React = require('react');
+require('../../../context/DynamicContext/DynamicContext.cjs');
+require('../../../store/state/loadingAndLifecycle/loadingAndLifecycle.cjs');
+require('@dynamic-labs/sdk-api-core');
+var logger = require('../../../shared/logger.cjs');
+require('@dynamic-labs/iconic');
+require('@dynamic-labs/wallet-connector-core');
+require('react/jsx-runtime');
+require('../../../context/ViewContext/ViewContext.cjs');
+require('@dynamic-labs/wallet-book');
+require('@dynamic-labs/utils');
+require('../../constants/colors.cjs');
+require('../../constants/values.cjs');
+require('../../../shared/consts/index.cjs');
+require('../../../events/dynamicEvents.cjs');
+require('../../../context/CaptchaContext/CaptchaContext.cjs');
+require('../../../context/ErrorContext/ErrorContext.cjs');
+require('@dynamic-labs/multi-wallet');
+require('react-international-phone');
+require('../../../store/state/nonce/nonce.cjs');
+require('../../../store/state/projectSettings/projectSettings.cjs');
+require('../../../config/ApiEndpoint.cjs');
+require('../../../store/state/user/user.cjs');
+require('../../../locale/locale.cjs');
+require('../../../store/state/dynamicContextProps/dynamicContextProps.cjs');
+require('../../../store/state/primaryWalletId/primaryWalletId.cjs');
+require('../../../store/state/connectedWalletsInfo/connectedWalletsInfo.cjs');
+require('../../../context/AccessDeniedContext/AccessDeniedContext.cjs');
+require('../../../context/AccountExistsContext/AccountExistsContext.cjs');
+require('../../../context/UserWalletsContext/UserWalletsContext.cjs');
+require('../../../store/state/authMode/authMode.cjs');
+require('../../../context/VerificationContext/VerificationContext.cjs');
+require('react-dom');
+require('../../functions/compareChains/compareChains.cjs');
+require('../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.cjs');
+require('../../../context/ThemeContext/ThemeContext.cjs');
+require('../useUserUpdateRequest/useUpdateUser/userFieldsSchema.cjs');
+require('bs58');
+require('@dynamic-labs/types');
+require('../../../context/SocialRedirectContext/SocialRedirectContext.cjs');
+require('../../../context/LoadingContext/LoadingContext.cjs');
+require('../../../context/WalletContext/WalletContext.cjs');
+require('../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.cjs');
+require('yup');
+require('../../../context/MockContext/MockContext.cjs');
+require('../../../views/CollectUserDataView/useFields.cjs');
+require('../../../context/FieldsStateContext/FieldsStateContext.cjs');
+require('../../../context/UserFieldEditorContext/UserFieldEditorContext.cjs');
+require('@dynamic-labs/rpc-providers');
+require('../../../store/state/walletOptions/walletOptions.cjs');
+require('react-i18next');
+require('../../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
+require('../../../components/Alert/Alert.cjs');
+require('../../../components/ShadowDOM/ShadowDOM.cjs');
+require('../../../components/IconButton/IconButton.cjs');
+require('../../../components/InlineWidget/InlineWidget.cjs');
+require('../../../components/Input/Input.cjs');
+require('../../../components/IsBrowser/IsBrowser.cjs');
+require('../../../components/MenuList/Dropdown/Dropdown.cjs');
+require('../../../components/OverlayCard/OverlayCard.cjs');
+require('../../../components/Transition/ZoomTransition/ZoomTransition.cjs');
+require('../../../components/Transition/SlideInUpTransition/SlideInUpTransition.cjs');
+require('../../../components/Transition/OpacityTransition/OpacityTransition.cjs');
+require('../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.cjs');
+require('../../../components/Popper/Popper/Popper.cjs');
+require('../../../components/Popper/PopperContext/PopperContext.cjs');
+require('react-focus-lock');
+require('qrcode');
+require('formik');
+require('../useSubdomainCheck/useSubdomainCheck.cjs');
+require('../../../context/WalletGroupContext/WalletGroupContext.cjs');
+require('../../../context/IpConfigurationContext/IpConfigurationContext.cjs');
+require('../../../context/ConnectWithOtpContext/ConnectWithOtpContext.cjs');
+require('../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.cjs');
+require('@hcaptcha/react-hcaptcha');
+require('../../../widgets/DynamicWidget/context/DynamicWidgetContext.cjs');
+require('../../../context/FooterAnimationContext/index.cjs');
+require('../../../context/ErrorContext/hooks/useErrorText/useErrorText.cjs');
+require('../../../context/PasskeyContext/PasskeyContext.cjs');
+require('../../../store/state/sendBalances.cjs');
+require('../../../store/state/connectorsInitializing/connectorsInitializing.cjs');
+require('../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.cjs');
+require('../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.cjs');
+require('../../../views/TransactionConfirmationView/TransactionConfirmationView.cjs');
+require('../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.cjs');
+require('../../../context/OnrampContext/OnrampContext.cjs');
+require('../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.cjs');
+require('../../../../index.cjs');
+require('../../../store/state/tokenBalances.cjs');
+require('../../../shared/utils/functions/getInitialUrl/getInitialUrl.cjs');
+var useInternalDynamicContext = require('../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.cjs');
+
+const useSessionKeys = () => {
+    const { primaryWallet } = useInternalDynamicContext.useInternalDynamicContext();
+    const listSessions = React.useCallback(() => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (!(connector === null || connector === void 0 ? void 0 : connector.listSessions)) {
+            logger.logger.error('Connector does not support session key management');
+            return [];
+        }
+        logger.logger.debug('[ZkSyncConnector] listSessions');
+        try {
+            const sessions = yield connector.listSessions();
+            return sessions;
+        }
+        catch (error) {
+            logger.logger.error('Error fetching session keys:', error);
+            return [];
+        }
+    }), [primaryWallet]);
+    const revokeSession = React.useCallback((sessionId) => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (!(connector === null || connector === void 0 ? void 0 : connector.revokeSession)) {
+            logger.logger.error('Connector does not support session key management');
+            return;
+        }
+        logger.logger.debug('[ZkSyncConnector] revokeSession', sessionId);
+        try {
+            yield connector.revokeSession(sessionId);
+        }
+        catch (error) {
+            logger.logger.error('Error revoking session:', error);
+        }
+    }), [primaryWallet]);
+    const value = React.useMemo(() => ({
+        listSessions,
+        revokeSession,
+    }), [listSessions, revokeSession]);
+    return value;
+};
+
+exports.useSessionKeys = useSessionKeys;

package/src/lib/utils/hooks/useSessionKeys/useSessionKeys.d.ts

@@ -0,0 +1,5 @@
+import { SessionInformation } from '../../types/SessionInformation';
+export declare const useSessionKeys: () => {
+    listSessions: () => Promise<SessionInformation[]>;
+    revokeSession: (sessionId: string) => Promise<void>;
+};

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

@@ -0,0 +1,136 @@
+'use client'
+import { __awaiter } from '../../../../../_virtual/_tslib.js';
+import { useCallback, useMemo } from 'react';
+import '../../../context/DynamicContext/DynamicContext.js';
+import '../../../store/state/loadingAndLifecycle/loadingAndLifecycle.js';
+import '@dynamic-labs/sdk-api-core';
+import { logger } from '../../../shared/logger.js';
+import '@dynamic-labs/iconic';
+import '@dynamic-labs/wallet-connector-core';
+import 'react/jsx-runtime';
+import '../../../context/ViewContext/ViewContext.js';
+import '@dynamic-labs/wallet-book';
+import '@dynamic-labs/utils';
+import '../../constants/colors.js';
+import '../../constants/values.js';
+import '../../../shared/consts/index.js';
+import '../../../events/dynamicEvents.js';
+import '../../../context/CaptchaContext/CaptchaContext.js';
+import '../../../context/ErrorContext/ErrorContext.js';
+import '@dynamic-labs/multi-wallet';
+import 'react-international-phone';
+import '../../../store/state/nonce/nonce.js';
+import '../../../store/state/projectSettings/projectSettings.js';
+import '../../../config/ApiEndpoint.js';
+import '../../../store/state/user/user.js';
+import '../../../locale/locale.js';
+import '../../../store/state/dynamicContextProps/dynamicContextProps.js';
+import '../../../store/state/primaryWalletId/primaryWalletId.js';
+import '../../../store/state/connectedWalletsInfo/connectedWalletsInfo.js';
+import '../../../context/AccessDeniedContext/AccessDeniedContext.js';
+import '../../../context/AccountExistsContext/AccountExistsContext.js';
+import '../../../context/UserWalletsContext/UserWalletsContext.js';
+import '../../../store/state/authMode/authMode.js';
+import '../../../context/VerificationContext/VerificationContext.js';
+import 'react-dom';
+import '../../functions/compareChains/compareChains.js';
+import '../../../views/Passkey/utils/findPrimaryEmbeddedChain/findPrimaryEmbeddedChain.js';
+import '../../../context/ThemeContext/ThemeContext.js';
+import '../useUserUpdateRequest/useUpdateUser/userFieldsSchema.js';
+import 'bs58';
+import '@dynamic-labs/types';
+import '../../../context/SocialRedirectContext/SocialRedirectContext.js';
+import '../../../context/LoadingContext/LoadingContext.js';
+import '../../../context/WalletContext/WalletContext.js';
+import '../useEmbeddedWallet/useSecureEnclaveEmbeddedWallet/constants.js';
+import 'yup';
+import '../../../context/MockContext/MockContext.js';
+import '../../../views/CollectUserDataView/useFields.js';
+import '../../../context/FieldsStateContext/FieldsStateContext.js';
+import '../../../context/UserFieldEditorContext/UserFieldEditorContext.js';
+import '@dynamic-labs/rpc-providers';
+import '../../../store/state/walletOptions/walletOptions.js';
+import 'react-i18next';
+import '../../../components/Accordion/components/AccordionItem/AccordionItem.js';
+import '../../../components/Alert/Alert.js';
+import '../../../components/ShadowDOM/ShadowDOM.js';
+import '../../../components/IconButton/IconButton.js';
+import '../../../components/InlineWidget/InlineWidget.js';
+import '../../../components/Input/Input.js';
+import '../../../components/IsBrowser/IsBrowser.js';
+import '../../../components/MenuList/Dropdown/Dropdown.js';
+import '../../../components/OverlayCard/OverlayCard.js';
+import '../../../components/Transition/ZoomTransition/ZoomTransition.js';
+import '../../../components/Transition/SlideInUpTransition/SlideInUpTransition.js';
+import '../../../components/Transition/OpacityTransition/OpacityTransition.js';
+import '../../../components/PasskeyCreatedSuccessBanner/PasskeyCreatedSuccessBanner.js';
+import '../../../components/Popper/Popper/Popper.js';
+import '../../../components/Popper/PopperContext/PopperContext.js';
+import 'react-focus-lock';
+import 'qrcode';
+import 'formik';
+import '../useSubdomainCheck/useSubdomainCheck.js';
+import '../../../context/WalletGroupContext/WalletGroupContext.js';
+import '../../../context/IpConfigurationContext/IpConfigurationContext.js';
+import '../../../context/ConnectWithOtpContext/ConnectWithOtpContext.js';
+import '../../../widgets/DynamicBridgeWidget/views/WalletsView/components/SecondaryWallets/SecondaryWallets.js';
+import '@hcaptcha/react-hcaptcha';
+import '../../../widgets/DynamicWidget/context/DynamicWidgetContext.js';
+import '../../../context/FooterAnimationContext/index.js';
+import '../../../context/ErrorContext/hooks/useErrorText/useErrorText.js';
+import '../../../context/PasskeyContext/PasskeyContext.js';
+import '../../../store/state/sendBalances.js';
+import '../../../store/state/connectorsInitializing/connectorsInitializing.js';
+import '../../../components/OverlayCardBase/OverlayCardTarget/OverlayCardTarget.js';
+import '../../../widgets/DynamicWidget/components/DynamicWidgetHeader/DynamicWidgetHeader.js';
+import '../../../views/TransactionConfirmationView/TransactionConfirmationView.js';
+import '../../../widgets/DynamicWidget/views/ManagePasskeysWidgetView/PasskeyCard/PasskeyCard.js';
+import '../../../context/OnrampContext/OnrampContext.js';
+import '../../../widgets/DynamicWidget/views/ReceiveWalletFunds/ReceiveWalletFunds.js';
+import '../../../../index.js';
+import '../../../store/state/tokenBalances.js';
+import '../../../shared/utils/functions/getInitialUrl/getInitialUrl.js';
+import { useInternalDynamicContext } from '../../../context/DynamicContext/useDynamicContext/useInternalDynamicContext/useInternalDynamicContext.js';
+
+const useSessionKeys = () => {
+    const { primaryWallet } = useInternalDynamicContext();
+    const listSessions = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (!(connector === null || connector === void 0 ? void 0 : connector.listSessions)) {
+            logger.error('Connector does not support session key management');
+            return [];
+        }
+        logger.debug('[ZkSyncConnector] listSessions');
+        try {
+            const sessions = yield connector.listSessions();
+            return sessions;
+        }
+        catch (error) {
+            logger.error('Error fetching session keys:', error);
+            return [];
+        }
+    }), [primaryWallet]);
+    const revokeSession = useCallback((sessionId) => __awaiter(void 0, void 0, void 0, function* () {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const connector = primaryWallet === null || primaryWallet === void 0 ? void 0 : primaryWallet.connector;
+        if (!(connector === null || connector === void 0 ? void 0 : connector.revokeSession)) {
+            logger.error('Connector does not support session key management');
+            return;
+        }
+        logger.debug('[ZkSyncConnector] revokeSession', sessionId);
+        try {
+            yield connector.revokeSession(sessionId);
+        }
+        catch (error) {
+            logger.error('Error revoking session:', error);
+        }
+    }), [primaryWallet]);
+    const value = useMemo(() => ({
+        listSessions,
+        revokeSession,
+    }), [listSessions, revokeSession]);
+    return value;
+};
+
+export { useSessionKeys };

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

@@ -124,7 +124,11 @@ const useTokenBalances = ({ accountAddress, networkId, chainName = sdkApiCore.Ch
         // the reason why we need to get the network here again insteaf of using the value
         // from DynamicContext is because this function might run before the network state is
         // properly set when switching wallets, so we want to make sure we have the latest network
-        const requestNetwork = networkId !== null && networkId !== void 0 ? networkId : (yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(true)));
+        let requestNetwork = networkId !== null && networkId !== void 0 ? networkId : (yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(true)));
+        if (requestChainName === sdkApiCore.ChainEnum.Btc) {
+            // Bitcoin does not need a network ID to fetch token balances but the request requires a network ID
+            requestNetwork = 1;
+        }
         const isValidRequest = requestNetwork && !isNaN(Number(requestNetwork));
         logger.logger.logVerboseTroubleshootingMessage('[useTokenBalances] will try to fetch token balances', {
             isLoading,

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

@@ -120,7 +120,11 @@ const useTokenBalances = ({ accountAddress, networkId, chainName = ChainEnum.Evm
         // the reason why we need to get the network here again insteaf of using the value
         // from DynamicContext is because this function might run before the network state is
         // properly set when switching wallets, so we want to make sure we have the latest network
-        const requestNetwork = networkId !== null && networkId !== void 0 ? networkId : (yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(true)));
+        let requestNetwork = networkId !== null && networkId !== void 0 ? networkId : (yield (walletConnector === null || walletConnector === void 0 ? void 0 : walletConnector.getNetwork(true)));
+        if (requestChainName === ChainEnum.Btc) {
+            // Bitcoin does not need a network ID to fetch token balances but the request requires a network ID
+            requestNetwork = 1;
+        }
         const isValidRequest = requestNetwork && !isNaN(Number(requestNetwork));
         logger.logVerboseTroubleshootingMessage('[useTokenBalances] will try to fetch token balances', {
             isLoading,

package/src/lib/utils/types/SessionInformation.d.ts

@@ -0,0 +1,25 @@
+export type SessionInformation = {
+    blockNumber: bigint;
+    sessionId: string;
+    session: SessionConfig;
+    timestamp: number;
+    transactionHash: string;
+    origin?: string;
+};
+export type SessionConfig = {
+    signer: string;
+    expiresAt: bigint;
+    feeLimit: Limit;
+    callPolicies: unknown[];
+    transferPolicies: unknown[];
+};
+export type Limit = {
+    limitType: LimitType;
+    limit: bigint;
+    period: bigint;
+};
+export declare enum LimitType {
+    Unlimited = 0,
+    Lifetime = 1,
+    Allowance = 2
+}

package/src/lib/widgets/DynamicWidget/components/DynamicWidgetViews/mapViewToComponent.d.ts

@@ -20,7 +20,7 @@ export declare const mapViewToComponent: {
     'send-balance': import("react").FC;
     'session-management': import("react").FC<import("../../views/SessionManagementView").SessionManagementViewProps>;
     'session-management-info': import("react").FC;
-    'session-management-revoke-access': import("react").FC;
+    'session-management-revoke-access': import("react").FC<import("../../views/SessionManagementView/RevokeAccessView").RevokeAccessViewProps>;
     settings: import("react").FC;
     wallets: import("react").FC;
 };

package/src/lib/widgets/DynamicWidget/views/ConnectedAppsView/ConnectedAppsView.cjs

@@ -172,7 +172,7 @@ const ConnectedAppsView = ({ name }) => {
             logger.logger.warn('Error disconnecting app', error);
         }
     });
-    return (jsxRuntime.jsxs("div", { className: 'connected-apps-view', children: [jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', className: 'back-button', type: 'button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, { className: 'arrow-left-icon' }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.title') })] }), jsxRuntime.jsx("div", { className: 'subheader', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.subtitle') }) }), connectedApps.length > 0 && (jsxRuntime.jsx("ul", { className: 'connected-apps-list', children: connectedApps.map((app) => (jsxRuntime.jsxs("li", { className: 'connected-app-item', children: [jsxRuntime.jsx("img", { src: app.icon, alt: app.name, className: 'app-icon' }), jsxRuntime.jsx("div", { className: 'app-info', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: app.url }) }), jsxRuntime.jsxs("div", { className: 'app-actions', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => utils.PlatformService.openURL(app.url, 'blank'), buttonVariant: 'tertiary', buttonPadding: 'none', startSlot: jsxRuntime.jsx(externalLink.ReactComponent, {}), typographyProps: {
+    return (jsxRuntime.jsxs("div", { className: 'connected-apps-view', children: [jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', className: 'back-button', type: 'button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, { className: 'arrow-left-icon' }) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.title') })] }), jsxRuntime.jsx("div", { className: 'subheader', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.subtitle') }) }), connectedApps.length > 0 && (jsxRuntime.jsx("ul", { className: 'connected-apps-list', children: connectedApps.map((app) => (jsxRuntime.jsxs("li", { className: 'connected-app-item', children: [jsxRuntime.jsx("img", { src: app.icon, alt: app.name, className: 'app-icon' }), jsxRuntime.jsx("div", { className: 'app-info', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', children: app.url }) }), jsxRuntime.jsxs("div", { className: 'app-actions', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => utils.PlatformService.openURL(app.url, 'blank'), buttonVariant: 'tertiary', buttonPadding: 'none', startSlot: jsxRuntime.jsx(externalLink.ReactComponent, {}), typographyProps: {
                                         color: 'secondary',
                                         variant: 'button_secondary',
                                     }, dataTestId: 'open-app-button' }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: () => handleDisconnect(app.topic), buttonVariant: 'tertiary', buttonPadding: 'none', startSlot: jsxRuntime.jsx(unlink.ReactComponent, {}), typographyProps: {

package/src/lib/widgets/DynamicWidget/views/ConnectedAppsView/ConnectedAppsView.js

@@ -168,7 +168,7 @@ const ConnectedAppsView = ({ name }) => {
             logger.warn('Error disconnecting app', error);
         }
     });
-    return (jsxs("div", { className: 'connected-apps-view', children: [jsxs("div", { className: 'header', children: [jsx(IconButton, { onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', className: 'back-button', type: 'button', children: jsx(SvgArrowLeft, { className: 'arrow-left-icon' }) }), jsx(Typography, { variant: 'title', weight: 'medium', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.title') })] }), jsx("div", { className: 'subheader', children: jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.subtitle') }) }), connectedApps.length > 0 && (jsx("ul", { className: 'connected-apps-list', children: connectedApps.map((app) => (jsxs("li", { className: 'connected-app-item', children: [jsx("img", { src: app.icon, alt: app.name, className: 'app-icon' }), jsx("div", { className: 'app-info', children: jsx(Typography, { variant: 'body_normal', color: 'primary', children: app.url }) }), jsxs("div", { className: 'app-actions', children: [jsx(TypographyButton, { onClick: () => PlatformService.openURL(app.url, 'blank'), buttonVariant: 'tertiary', buttonPadding: 'none', startSlot: jsx(SvgExternalLink, {}), typographyProps: {
+    return (jsxs("div", { className: 'connected-apps-view', children: [jsxs("div", { className: 'header', children: [jsx(IconButton, { onClick: () => setDynamicWidgetView('settings'), "data-testid": 'back-button', className: 'back-button', type: 'button', children: jsx(SvgArrowLeft, { className: 'arrow-left-icon' }) }), jsx(Typography, { variant: 'title', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.title') })] }), jsx("div", { className: 'subheader', children: jsx(Typography, { variant: 'body_small', weight: 'medium', color: 'primary', className: 'title', children: t('global_wallet.connected_apps.subtitle') }) }), connectedApps.length > 0 && (jsx("ul", { className: 'connected-apps-list', children: connectedApps.map((app) => (jsxs("li", { className: 'connected-app-item', children: [jsx("img", { src: app.icon, alt: app.name, className: 'app-icon' }), jsx("div", { className: 'app-info', children: jsx(Typography, { variant: 'body_normal', color: 'primary', children: app.url }) }), jsxs("div", { className: 'app-actions', children: [jsx(TypographyButton, { onClick: () => PlatformService.openURL(app.url, 'blank'), buttonVariant: 'tertiary', buttonPadding: 'none', startSlot: jsx(SvgExternalLink, {}), typographyProps: {
                                         color: 'secondary',
                                         variant: 'button_secondary',
                                     }, dataTestId: 'open-app-button' }), jsx(TypographyButton, { onClick: () => handleDisconnect(app.topic), buttonVariant: 'tertiary', buttonPadding: 'none', startSlot: jsx(SvgUnlink, {}), typographyProps: {

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/GlobalWalletView.cjs

@@ -228,7 +228,7 @@ const GlobalWalletView = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [walletConnectUri]);
-    const renderHeader = () => (jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), utils.isMobile() && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => {
+    const renderHeader = () => (jsxRuntime.jsxs("div", { className: 'header', children: [jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsxRuntime.jsx(arrowLeft.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), utils.isMobile() && (jsxRuntime.jsx(IconButton.IconButton, { type: 'button', onClick: () => {
                     pushView('global-wallet-info');
                     setShowAuthFlow(true, {
                         ignoreIfIsEmbeddedWidget: false,

package/src/lib/widgets/DynamicWidget/views/GlobalWalletView/GlobalWalletView.js

@@ -224,7 +224,7 @@ const GlobalWalletView = () => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [walletConnectUri]);
-    const renderHeader = () => (jsxs("div", { className: 'header', children: [jsx(IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }), jsx(Typography, { variant: 'title', weight: 'medium', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), isMobile() && (jsx(IconButton, { type: 'button', onClick: () => {
+    const renderHeader = () => (jsxs("div", { className: 'header', children: [jsx(IconButton, { type: 'button', onClick: goToInitialDynamicWidgetView, "data-testid": 'back-button', children: jsx(SvgArrowLeft, {}) }), jsx(Typography, { variant: 'title', color: 'primary', as: 'h1', copykey: 'global_wallet.connect_to_apps', children: t('global_wallet.connect_to_apps') }), isMobile() && (jsx(IconButton, { type: 'button', onClick: () => {
                     pushView('global-wallet-info');
                     setShowAuthFlow(true, {
                         ignoreIfIsEmbeddedWidget: false,

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/RevokeAccessView/RevokeAccessView.cjs

@@ -3,6 +3,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../../../../_virtual/_tslib.cjs');
 var jsxRuntime = require('react/jsx-runtime');
 var reactI18next = require('react-i18next');
 var ModalHeader = require('../../../../../components/ModalHeader/ModalHeader.cjs');
@@ -14,22 +15,35 @@ var close = require('../../../../../shared/assets/close.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../../context/ViewContext/ViewContext.cjs');
 var TypographyButton = require('../../../../../components/TypographyButton/TypographyButton.cjs');
+var useSessionKeys = require('../../../../../utils/hooks/useSessionKeys/useSessionKeys.cjs');
+var getSessionInformationName = require('../../../../../utils/functions/getSessionInformationName/getSessionInformationName.cjs');
 
-const RevokeAccessView = () => {
+const RevokeAccessView = ({ session }) => {
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
+    const { revokeSession } = useSessionKeys.useSessionKeys();
     const handleCancel = () => {
         setDynamicWidgetView('session-management');
     };
-    const handleRevoke = () => {
-        // TODO: Implement revoke logic
-        setDynamicWidgetView('session-management', {
-            bannerMessage: {
-                message: 'revoked',
-                type: 'success',
-            },
-        });
-    };
+    const handleRevoke = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield revokeSession(session.sessionId);
+            setDynamicWidgetView('session-management', {
+                bannerMessage: {
+                    message: `Revoked ${getSessionInformationName.getSessionInformationName(session)}`,
+                    type: 'success',
+                },
+            });
+        }
+        catch (error) {
+            setDynamicWidgetView('session-management', {
+                bannerMessage: {
+                    message: `Failed to revoke ${getSessionInformationName.getSessionInformationName(session)}`,
+                    type: 'error',
+                },
+            });
+        }
+    });
     const renderCloseButton = () => (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleCancel, "aria-label": t('dyn_session_management.aria.close_button_label'), children: jsxRuntime.jsx(close.ReactComponent, {}) }));
     return (jsxRuntime.jsxs("div", { className: 'revoke-access-view', children: [jsxRuntime.jsx(ModalHeader.ModalHeader, { trailing: renderCloseButton(), children: jsxRuntime.jsx(Typography.Typography, { variant: 'title', color: 'primary', copykey: 'dyn_session_management.revoke_access_view.title', children: t('dyn_session_management.revoke_access_view.title') }) }), jsxRuntime.jsx("div", { className: 'revoke-access-view__body', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_session_management.revoke_access_view.description', align: 'center', children: t('dyn_session_management.revoke_access_view.description') }) }), jsxRuntime.jsxs("div", { className: 'revoke-access-view__footer', children: [jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonVariant: 'danger', buttonPadding: 'small', onClick: handleRevoke, dataTestId: 'revoke-access-confirm-button', copykey: 'dyn_session_management.revoke_access_view.revoke_button', expanded: true, children: t('dyn_session_management.revoke_access_view.revoke_button') }), jsxRuntime.jsx(TypographyButton.TypographyButton, { buttonPadding: 'small', onClick: handleCancel, dataTestId: 'revoke-access-cancel-button', copykey: 'dyn_session_management.revoke_access_view.cancel_button', expanded: true, children: t('dyn_session_management.revoke_access_view.cancel_button') })] })] }));
 };

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/RevokeAccessView/RevokeAccessView.d.ts

@@ -1,2 +1,6 @@
 import { FC } from 'react';
-export declare const RevokeAccessView: FC;
+import { SessionInformation } from '../../../../../utils/types/SessionInformation';
+export interface RevokeAccessViewProps {
+    session: SessionInformation;
+}
+export declare const RevokeAccessView: FC<RevokeAccessViewProps>;

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/RevokeAccessView/RevokeAccessView.js

@@ -1,4 +1,5 @@
 'use client'
+import { __awaiter } from '../../../../../../../_virtual/_tslib.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTranslation } from 'react-i18next';
 import { ModalHeader } from '../../../../../components/ModalHeader/ModalHeader.js';
@@ -10,22 +11,35 @@ import { ReactComponent as SvgClose } from '../../../../../shared/assets/close.j
 import '@dynamic-labs/iconic';
 import '../../../../../context/ViewContext/ViewContext.js';
 import { TypographyButton } from '../../../../../components/TypographyButton/TypographyButton.js';
+import { useSessionKeys } from '../../../../../utils/hooks/useSessionKeys/useSessionKeys.js';
+import { getSessionInformationName } from '../../../../../utils/functions/getSessionInformationName/getSessionInformationName.js';
 
-const RevokeAccessView = () => {
+const RevokeAccessView = ({ session }) => {
     const { t } = useTranslation();
     const { setDynamicWidgetView } = useWidgetContext();
+    const { revokeSession } = useSessionKeys();
     const handleCancel = () => {
         setDynamicWidgetView('session-management');
     };
-    const handleRevoke = () => {
-        // TODO: Implement revoke logic
-        setDynamicWidgetView('session-management', {
-            bannerMessage: {
-                message: 'revoked',
-                type: 'success',
-            },
-        });
-    };
+    const handleRevoke = () => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            yield revokeSession(session.sessionId);
+            setDynamicWidgetView('session-management', {
+                bannerMessage: {
+                    message: `Revoked ${getSessionInformationName(session)}`,
+                    type: 'success',
+                },
+            });
+        }
+        catch (error) {
+            setDynamicWidgetView('session-management', {
+                bannerMessage: {
+                    message: `Failed to revoke ${getSessionInformationName(session)}`,
+                    type: 'error',
+                },
+            });
+        }
+    });
     const renderCloseButton = () => (jsx(IconButton, { onClick: handleCancel, "aria-label": t('dyn_session_management.aria.close_button_label'), children: jsx(SvgClose, {}) }));
     return (jsxs("div", { className: 'revoke-access-view', children: [jsx(ModalHeader, { trailing: renderCloseButton(), children: jsx(Typography, { variant: 'title', color: 'primary', copykey: 'dyn_session_management.revoke_access_view.title', children: t('dyn_session_management.revoke_access_view.title') }) }), jsx("div", { className: 'revoke-access-view__body', children: jsx(Typography, { variant: 'body_normal', color: 'primary', copykey: 'dyn_session_management.revoke_access_view.description', align: 'center', children: t('dyn_session_management.revoke_access_view.description') }) }), jsxs("div", { className: 'revoke-access-view__footer', children: [jsx(TypographyButton, { buttonVariant: 'danger', buttonPadding: 'small', onClick: handleRevoke, dataTestId: 'revoke-access-confirm-button', copykey: 'dyn_session_management.revoke_access_view.revoke_button', expanded: true, children: t('dyn_session_management.revoke_access_view.revoke_button') }), jsx(TypographyButton, { buttonPadding: 'small', onClick: handleCancel, dataTestId: 'revoke-access-cancel-button', copykey: 'dyn_session_management.revoke_access_view.cancel_button', expanded: true, children: t('dyn_session_management.revoke_access_view.cancel_button') })] })] }));
 };

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionListItem/SessionListItem.cjs

@@ -12,17 +12,18 @@ var IconButton = require('../../../../../components/IconButton/IconButton.cjs');
 var chevronDown = require('../../../../../shared/assets/chevron-down.cjs');
 require('@dynamic-labs/iconic');
 require('../../../../../context/ViewContext/ViewContext.cjs');
+var getSessionInformationName = require('../../../../../utils/functions/getSessionInformationName/getSessionInformationName.cjs');
 
 const SessionListItem = ({ session, onRevokeAccessClick, }) => {
     const { t } = reactI18next.useTranslation();
     const [isExpanded, setIsExpanded] = React.useState(false);
     const handleRevokeAccess = React.useCallback(() => {
-        onRevokeAccessClick(session.sessionId);
-    }, [onRevokeAccessClick, session.sessionId]);
+        onRevokeAccessClick(session);
+    }, [onRevokeAccessClick, session]);
     const toggleExpanded = React.useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);
-    return (jsxRuntime.jsxs("div", { className: 'session-management-session', children: [jsxRuntime.jsxs("div", { className: 'session-management-session__main', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', children: session.site }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: handleRevokeAccess, children: t('dyn_session_management.session_component.revoke_button') })] }), jsxRuntime.jsxs("div", { className: 'session-management-session__permissions-toggle', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: t('dyn_session_management.session_component.permission_details') }), jsxRuntime.jsx(IconButton.IconButton, { onClick: toggleExpanded, "aria-label": t(isExpanded
+    return (jsxRuntime.jsxs("div", { className: 'session-management-session', children: [jsxRuntime.jsxs("div", { className: 'session-management-session__main', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', children: getSessionInformationName.getSessionInformationName(session) }), jsxRuntime.jsx(TypographyButton.TypographyButton, { onClick: handleRevokeAccess, children: t('dyn_session_management.session_component.revoke_button') })] }), jsxRuntime.jsxs("div", { className: 'session-management-session__permissions-toggle', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: t('dyn_session_management.session_component.permission_details') }), jsxRuntime.jsx(IconButton.IconButton, { onClick: toggleExpanded, "aria-label": t(isExpanded
                             ? 'dyn_session_management.session_component.aria.collapse_permissions'
                             : 'dyn_session_management.session_component.aria.expand_permissions'), className: 'session-management-session__icon-button', children: jsxRuntime.jsx(chevronDown.ReactComponent, {}) })] }), isExpanded && (jsxRuntime.jsx("div", { className: 'session-management-session__permissions', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', children: "TODO: Add permission details" }) }))] }));
 };

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionListItem/SessionListItem.d.ts

@@ -1,10 +1,8 @@
 import { FC } from 'react';
+import { SessionInformation } from '../../../../../utils/types/SessionInformation';
 interface SessionListItemProps {
-    session: {
-        sessionId: string;
-        site?: string;
-    };
-    onRevokeAccessClick: (sessionId: string) => void;
+    session: SessionInformation;
+    onRevokeAccessClick: (session: SessionInformation) => void;
 }
 export declare const SessionListItem: FC<SessionListItemProps>;
 export {};

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionListItem/SessionListItem.js

@@ -8,17 +8,18 @@ import { IconButton } from '../../../../../components/IconButton/IconButton.js';
 import { ReactComponent as SvgChevronDown } from '../../../../../shared/assets/chevron-down.js';
 import '@dynamic-labs/iconic';
 import '../../../../../context/ViewContext/ViewContext.js';
+import { getSessionInformationName } from '../../../../../utils/functions/getSessionInformationName/getSessionInformationName.js';
 
 const SessionListItem = ({ session, onRevokeAccessClick, }) => {
     const { t } = useTranslation();
     const [isExpanded, setIsExpanded] = useState(false);
     const handleRevokeAccess = useCallback(() => {
-        onRevokeAccessClick(session.sessionId);
-    }, [onRevokeAccessClick, session.sessionId]);
+        onRevokeAccessClick(session);
+    }, [onRevokeAccessClick, session]);
     const toggleExpanded = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);
-    return (jsxs("div", { className: 'session-management-session', children: [jsxs("div", { className: 'session-management-session__main', children: [jsx(Typography, { variant: 'body_normal', children: session.site }), jsx(TypographyButton, { onClick: handleRevokeAccess, children: t('dyn_session_management.session_component.revoke_button') })] }), jsxs("div", { className: 'session-management-session__permissions-toggle', children: [jsx(Typography, { variant: 'body_small', children: t('dyn_session_management.session_component.permission_details') }), jsx(IconButton, { onClick: toggleExpanded, "aria-label": t(isExpanded
+    return (jsxs("div", { className: 'session-management-session', children: [jsxs("div", { className: 'session-management-session__main', children: [jsx(Typography, { variant: 'body_normal', children: getSessionInformationName(session) }), jsx(TypographyButton, { onClick: handleRevokeAccess, children: t('dyn_session_management.session_component.revoke_button') })] }), jsxs("div", { className: 'session-management-session__permissions-toggle', children: [jsx(Typography, { variant: 'body_small', children: t('dyn_session_management.session_component.permission_details') }), jsx(IconButton, { onClick: toggleExpanded, "aria-label": t(isExpanded
                             ? 'dyn_session_management.session_component.aria.collapse_permissions'
                             : 'dyn_session_management.session_component.aria.expand_permissions'), className: 'session-management-session__icon-button', children: jsx(SvgChevronDown, {}) })] }), isExpanded && (jsx("div", { className: 'session-management-session__permissions', children: jsx(Typography, { variant: 'body_small', weight: 'bold', children: "TODO: Add permission details" }) }))] }));
 };

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionManagementView.cjs

@@ -15,37 +15,27 @@ var ModalHeader = require('../../../../components/ModalHeader/ModalHeader.cjs');
 var Typography = require('../../../../components/Typography/Typography.cjs');
 var IconButton = require('../../../../components/IconButton/IconButton.cjs');
 var ErrorContainer = require('../../../../components/ErrorContainer/ErrorContainer.cjs');
+var useSessionKeys = require('../../../../utils/hooks/useSessionKeys/useSessionKeys.cjs');
 var EmptySessionsView = require('./EmptySessionsView/EmptySessionsView.cjs');
 var SessionListItem = require('./SessionListItem/SessionListItem.cjs');
 
 const SessionManagementView = ({ bannerMessage, }) => {
     const { t } = reactI18next.useTranslation();
     const { setDynamicWidgetView } = DynamicWidgetContext.useWidgetContext();
-    const sessions = React.useMemo(() => [
-        {
-            expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
-            permissions: [],
-            sessionId: '1',
-            site: 'app.lumfi.xyz',
-            url: 'https://app.lumfi.xyz',
-        },
-        {
-            expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
-            permissions: [],
-            sessionId: '2',
-            site: 'app.sophon.xyz',
-            url: 'https://app.sophon.xyz',
-        },
-    ], []);
+    const { listSessions } = useSessionKeys.useSessionKeys();
+    const [sessions, setSessions] = React.useState([]);
+    React.useEffect(() => {
+        listSessions().then(setSessions);
+    }, [listSessions]);
     const handleBackButtonClick = React.useCallback(() => {
         setDynamicWidgetView('account-and-security-settings');
     }, [setDynamicWidgetView]);
     const handleInfoButtonClick = React.useCallback(() => {
         setDynamicWidgetView('session-management-info');
     }, [setDynamicWidgetView]);
-    const handleRevokeAccessClick = React.useCallback((sessionId) => {
+    const handleRevokeAccessClick = React.useCallback((session) => {
         setDynamicWidgetView('session-management-revoke-access', {
-            sessionId,
+            session,
         });
     }, [setDynamicWidgetView]);
     const renderBackButton = () => (jsxRuntime.jsx(IconButton.IconButton, { onClick: handleBackButtonClick, "aria-label": t('dyn_session_management.aria.back_button_label'), children: jsxRuntime.jsx(chevronLeft.ReactComponent, {}) }));

package/src/lib/widgets/DynamicWidget/views/SessionManagementView/SessionManagementView.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useMemo, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as SvgChevronLeft } from '../../../../shared/assets/chevron-left.js';
 import { ReactComponent as SvgFooterInfoIcon } from '../../../../shared/assets/footer-info-icon.js';
@@ -11,37 +11,27 @@ import { ModalHeader } from '../../../../components/ModalHeader/ModalHeader.js';
 import { Typography } from '../../../../components/Typography/Typography.js';
 import { IconButton } from '../../../../components/IconButton/IconButton.js';
 import { ErrorContainer } from '../../../../components/ErrorContainer/ErrorContainer.js';
+import { useSessionKeys } from '../../../../utils/hooks/useSessionKeys/useSessionKeys.js';
 import { EmptySessionsView } from './EmptySessionsView/EmptySessionsView.js';
 import { SessionListItem } from './SessionListItem/SessionListItem.js';
 
 const SessionManagementView = ({ bannerMessage, }) => {
     const { t } = useTranslation();
     const { setDynamicWidgetView } = useWidgetContext();
-    const sessions = useMemo(() => [
-        {
-            expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
-            permissions: [],
-            sessionId: '1',
-            site: 'app.lumfi.xyz',
-            url: 'https://app.lumfi.xyz',
-        },
-        {
-            expiresAt: new Date(Date.now() + 1000 * 60 * 60 * 24),
-            permissions: [],
-            sessionId: '2',
-            site: 'app.sophon.xyz',
-            url: 'https://app.sophon.xyz',
-        },
-    ], []);
+    const { listSessions } = useSessionKeys();
+    const [sessions, setSessions] = useState([]);
+    useEffect(() => {
+        listSessions().then(setSessions);
+    }, [listSessions]);
     const handleBackButtonClick = useCallback(() => {
         setDynamicWidgetView('account-and-security-settings');
     }, [setDynamicWidgetView]);
     const handleInfoButtonClick = useCallback(() => {
         setDynamicWidgetView('session-management-info');
     }, [setDynamicWidgetView]);
-    const handleRevokeAccessClick = useCallback((sessionId) => {
+    const handleRevokeAccessClick = useCallback((session) => {
         setDynamicWidgetView('session-management-revoke-access', {
-            sessionId,
+            session,
         });
     }, [setDynamicWidgetView]);
     const renderBackButton = () => (jsx(IconButton, { onClick: handleBackButtonClick, "aria-label": t('dyn_session_management.aria.back_button_label'), children: jsx(SvgChevronLeft, {}) }));