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

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

'use client'
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { EthereumIcon } from '@dynamic-labs/iconic';
import { Icon } from '../../components/Icon/Icon.js';
import { Typography } from '../../components/Typography/Typography.js';
import { Textarea } from '../../components/Textarea/Textarea.js';
import '@dynamic-labs/utils';
import '../../components/Accordion/components/AccordionItem/AccordionItem.js';
import { AccordionToggle } from '../../components/Accordion/components/AccordionToggle/AccordionToggle.js';
import { ReactComponent as SvgClock } from '../../shared/assets/clock.js';
import { ReactComponent as SvgProfileOutline } from '../../shared/assets/profile-outline.js';
import '../../context/ViewContext/ViewContext.js';
import { getSessionInformationExpiration, getSessionInformationSpendingLimit, getSessionInformationJson } from '../../utils/functions/getSessionInformation/getSessionInformation.js';

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

export { SessionPermissionsView };