@dynamic-labs/sdk-react-core/src/lib/views/SessionPermissionsView/SessionPermissionsView.cjs

A React SDK for implementing wallet web3 authentication and authorization to your website.

'use client'
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var reactI18next = require('react-i18next');
var iconic = require('@dynamic-labs/iconic');
var Icon = require('../../components/Icon/Icon.cjs');
var Typography = require('../../components/Typography/Typography.cjs');
var Textarea = require('../../components/Textarea/Textarea.cjs');
require('@dynamic-labs/utils');
require('../../components/Accordion/components/AccordionItem/AccordionItem.cjs');
var AccordionToggle = require('../../components/Accordion/components/AccordionToggle/AccordionToggle.cjs');
var clock = require('../../shared/assets/clock.cjs');
var profileOutline = require('../../shared/assets/profile-outline.cjs');
require('../../context/ViewContext/ViewContext.cjs');
var getSessionInformation = require('../../utils/functions/getSessionInformation/getSessionInformation.cjs');

/**
 * A view component to render SessionInformation permissions
 */
const SessionPermissionsView = ({ session, showAdvanced = false, }) => {
    const { t } = reactI18next.useTranslation();
    const [isAdvancedExpanded, setIsAdvancedExpanded] = React.useState(false);
    const toggleAdvancedExpanded = React.useCallback(() => {
        setIsAdvancedExpanded(!isAdvancedExpanded);
    }, [isAdvancedExpanded]);
    const timeToExpire = React.useMemo(() => getSessionInformation.getSessionInformationExpiration(session), [session]);
    const spendingLimit = React.useMemo(() => getSessionInformation.getSessionInformationSpendingLimit(session), [session]);
    const sessionString = React.useMemo(() => getSessionInformation.getSessionInformationJson(session), [session]);
    return (jsxRuntime.jsxs("div", { className: 'session-permissions-view', children: [jsxRuntime.jsx("div", { className: 'session-permissions-view__header', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', children: t('dyn_session_permissions.permissions_label') }) }), jsxRuntime.jsxs("div", { className: 'session-permissions-view__card', children: [jsxRuntime.jsxs("div", { className: 'session-permissions-view__card-permission', children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-tertiary', children: jsxRuntime.jsx(profileOutline.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: t('dyn_session_permissions.permissions.ownership') })] }), jsxRuntime.jsxs("div", { className: 'session-permissions-view__card-permission', children: [jsxRuntime.jsx(Icon.Icon, { size: 'small', color: 'text-tertiary', children: jsxRuntime.jsx(clock.ReactComponent, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: t('dyn_session_permissions.permissions.access', {
                                    time: timeToExpire,
                                }) })] })] }), jsxRuntime.jsx("div", { className: 'session-permissions-view__header', children: jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', children: t('dyn_session_permissions.spending_label') }) }), jsxRuntime.jsxs("div", { className: 'session-permissions-view__card session-permissions-view__token-card', children: [jsxRuntime.jsxs("div", { className: 'session-permissions-view__token', children: [jsxRuntime.jsx(Icon.Icon, { size: 'medium', children: jsxRuntime.jsx(iconic.EthereumIcon, {}) }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_normal', children: "ETH" })] }), jsxRuntime.jsxs("div", { className: 'session-permissions-view__spending', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_session_permissions.spending_limit') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', children: spendingLimit })] })] }), showAdvanced && (jsxRuntime.jsxs("div", { className: 'session-permissions-view__panel', children: [jsxRuntime.jsxs(AccordionToggle.AccordionToggle, { className: 'session-permissions-view__panel-toggle', isOpen: isAdvancedExpanded, onClick: toggleAdvancedExpanded, labelClassName: 'session-permissions-view__panel-toggle-label', children: [jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', weight: 'bold', children: t('dyn_session_permissions.advanced_label') }), jsxRuntime.jsx(Typography.Typography, { variant: 'body_small', color: 'secondary', children: t('dyn_session_permissions.advanced_description') })] }), isAdvancedExpanded && (jsxRuntime.jsx("div", { className: 'session-permissions-view__panel-content', children: jsxRuntime.jsx(Textarea.Textarea, { value: sessionString, readOnly: true, rows: 8, id: 'session-permissions-view__raw-json', "data-testid": 'session-permissions-view__raw-json', label: '' }) }))] }))] }));
};

exports.SessionPermissionsView = SessionPermissionsView;