@dynamic-labs/sdk-react-core
Version:
A React SDK for implementing wallet web3 authentication and authorization to your website.
27 lines (24 loc) • 1.88 kB
JavaScript
'use client'
import { jsxs, jsx } from 'react/jsx-runtime';
import { DotsMenu } from '../../../components/DotsMenu/DotsMenu.js';
import { getTimeSince } from '../../../helpers/getTimeSince.js';
import 'react';
import { ReactComponent as SvgAuthenticator } from '../../../../../shared/assets/authenticator.js';
import '@dynamic-labs/iconic';
import '../../../../../context/ViewContext/ViewContext.js';
import { Typography } from '../../../../../components/Typography/Typography.js';
const UserDeviceTile = ({ userDevice, deleteDevice, isMfaRequired, }) => {
const optionsMenu = [
{
Icon: null,
callback: () => deleteDevice(userDevice.id),
text: 'Delete',
},
];
const timeSinceCreated = userDevice.verifiedAt && getTimeSince(new Date(userDevice.verifiedAt));
return (jsxs("div", { className: 'manage-mfa-widget-view__list-tile', children: [jsx(SvgAuthenticator, { className: 'manage-mfa-widget-view__list-tile__icon' }), jsxs("div", { className: 'manage-mfa-widget-view__list-tile__details', children: [jsx("div", { className: 'manage-mfa-widget-view__list-tile__details__title', children: jsx(Typography, { variant: 'body_normal', color: 'primary', children: userDevice.alias || 'Authenticator App' }) }), timeSinceCreated && (jsxs(Typography, { variant: 'body_small', color: 'secondary', children: ["Created ", timeSinceCreated.value, " ", timeSinceCreated.unit, " ago"] }))] }), isMfaRequired || (jsx("div", { style: {
cursor: 'pointer',
display: 'flex',
}, children: jsx(DotsMenu, { direction: 'left', "data-testid": 'dots-menu', options: optionsMenu, buttonClassName: 'manage-mfa-widget-view__list-tile__dots-menu', buttonClassNameWithOpenMenu: 'manage-mfa-widget-view__list-tile__dots-menu' }) }))] }, userDevice.id));
};
export { UserDeviceTile };