@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/HlsStatsOverlay.jsx

@@ -0,0 +1,101 @@
+import React, { memo } from 'react';
+import { CloseIcon } from '@100mslive/react-icons';
+import { Flex } from '../../Layout';
+import { Text } from '../../Text';
+import IconButton from '../IconButton';
+
+export function HlsStatsOverlay({ hlsStatsState, onClose }) {
+  return (
+    <Flex
+      css={{
+        position: 'absolute',
+        width: '$80',
+        marginLeft: '$8',
+        padding: '$8 $8 $10',
+        zIndex: 10,
+        backgroundColor: 'rgba(55,59,66, 0.84)',
+        borderRadius: '$1',
+      }}
+      direction="column"
+    >
+      <IconButton css={{ position: 'absolute', top: '$2', right: '$2' }} onClick={onClose}>
+        <CloseIcon />
+      </IconButton>
+      <HlsStatsRow label="URL">
+        <Flex align="center">
+          <a
+            style={{ cursor: 'pointer', textDecoration: 'underline' }}
+            href={hlsStatsState?.url}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Stream url
+          </a>
+        </Flex>
+      </HlsStatsRow>
+      <HlsStatsRow label="Video size">
+        {` ${hlsStatsState?.videoSize?.width}x${hlsStatsState?.videoSize?.height}`}
+      </HlsStatsRow>
+      <HlsStatsRow label="Buffer duration">{hlsStatsState?.bufferedDuration?.toFixed(2)} </HlsStatsRow>
+      <HlsStatsRow label="Connection speed">
+        {`${(hlsStatsState?.bandwidthEstimate / (1000 * 1000)).toFixed(2)} Mbps`}
+      </HlsStatsRow>
+      <HlsStatsRow label="Bitrate">{`${(hlsStatsState?.bitrate / (1000 * 1000)).toFixed(2)} Mbps`}</HlsStatsRow>
+      <HlsStatsRow label="distance from live">
+        {getDurationFromSeconds(hlsStatsState.distanceFromLive / 1000)}
+      </HlsStatsRow>
+      <HlsStatsRow label="Dropped frames">{`${hlsStatsState?.droppedFrames}`}</HlsStatsRow>
+    </Flex>
+  );
+}
+
+/**
+ * Extracted from HLS new Player PR.
+ * TODO: remove this and use HMSVideoUtils.js
+ * when that code is merged
+ */
+export function getDurationFromSeconds(timeInSeconds) {
+  let time = Math.floor(timeInSeconds);
+  const hours = Math.floor(time / 3600);
+  time = time - hours * 3600;
+  const minutes = Math.floor(time / 60);
+  const seconds = Math.floor(time - minutes * 60);
+
+  const prefixedMinutes = `${minutes < 10 ? '0' + minutes : minutes}`;
+  const prefixedSeconds = `${seconds < 10 ? '0' + seconds : seconds}`;
+
+  let videoTimeStr = `${prefixedMinutes}:${prefixedSeconds}`;
+  if (hours) {
+    const prefixedHours = `${hours < 10 ? '0' + hours : hours}`;
+    videoTimeStr = `${prefixedHours}:${prefixedMinutes}:${prefixedSeconds}`;
+  }
+  return videoTimeStr;
+}
+
+const HlsStatsRow = memo(({ label, children }) => {
+  return (
+    <Flex gap={4} justify="center" css={{ width: '100%' }}>
+      <Text
+        css={{
+          width: '50%',
+          '@md': { fontSize: '$md' },
+          '@sm': { fontSize: '$sm' },
+          // textAlign: "right",
+        }}
+      >
+        {label}
+      </Text>
+      <Text
+        css={{
+          '@md': { fontSize: '$md' },
+          '@sm': { fontSize: '$sm' },
+          width: '50%',
+          overflowWrap: 'break-word',
+          // textAlign: "left",
+        }}
+      >
+        {children}
+      </Text>
+    </Flex>
+  );
+});

package/src/Prebuilt/components/Image.jsx

@@ -0,0 +1,7 @@
+import { styled } from '../../Theme';
+
+export const Image = styled('img', {
+  width: '100%',
+  height: 'auto',
+  r: '$3',
+});

package/src/Prebuilt/components/Input/KeyboardInputManager.js

@@ -0,0 +1,107 @@
+import { useEffect } from 'react';
+import {
+  selectAppData,
+  selectIsLocalAudioEnabled,
+  selectIsLocalVideoEnabled,
+  useHMSActions,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
+import { APP_DATA, isMacOS } from '../../common/constants';
+
+let isEvenListenersAttached = false;
+export class KeyboardInputManager {
+  #actions;
+  #store;
+  constructor(store, actions) {
+    this.#actions = actions;
+    this.#store = store;
+  }
+  #toggleAudio = async () => {
+    const enabled = this.#store.getState(selectIsLocalAudioEnabled);
+    await this.#actions.setLocalAudioEnabled(!enabled);
+  };
+
+  #toggleVideo = async () => {
+    const enabled = this.#store.getState(selectIsLocalVideoEnabled);
+    await this.#actions.setLocalVideoEnabled(!enabled);
+  };
+
+  #hideSidepane = () => {
+    if (this.#store.getState(selectAppData(APP_DATA.sidePane))) {
+      this.#actions.setAppData(APP_DATA.sidePane, '');
+    }
+  };
+
+  #toggleStatsForNerds = () => {
+    const uiSettings = this.#store.getState(selectAppData(APP_DATA.uiSettings));
+    const statsEnabled = uiSettings.showStatsOnTiles;
+    this.#actions.setAppData(APP_DATA.uiSettings, {
+      ...uiSettings,
+      showStatsOnTiles: !statsEnabled,
+    });
+  };
+
+  #toggleHlsStats = () => {
+    this.#actions.setAppData(APP_DATA.hlsStats, !this.#store.getState(selectAppData(APP_DATA.hlsStats)));
+  };
+
+  // eslint-disable-next-line complexity
+  #keyDownHandler = async e => {
+    const CONTROL_KEY = isMacOS ? e.metaKey : e.ctrlKey;
+    const D_KEY = e.key === 'd' || e.key === 'D';
+    const E_KEY = e.key === 'e' || e.key === 'E';
+    const SNF_KEY = e.key === ']' || e.key === '}';
+
+    const SHORTCUT_TOGGLE_AUDIO = CONTROL_KEY && D_KEY;
+    const SHORTCUT_TOGGLE_VIDEO = CONTROL_KEY && E_KEY;
+    const SHORTCUT_SIDEPANE_CLOSE = e.key === 'Escape';
+    const SHORTCUT_STATS_FOR_NERDS = CONTROL_KEY && SNF_KEY;
+
+    if (SHORTCUT_TOGGLE_AUDIO) {
+      e.preventDefault();
+      await this.#toggleAudio();
+    } else if (SHORTCUT_TOGGLE_VIDEO) {
+      e.preventDefault();
+      await this.#toggleVideo();
+    } else if (SHORTCUT_SIDEPANE_CLOSE) {
+      this.#hideSidepane();
+    } else if (SHORTCUT_STATS_FOR_NERDS) {
+      this.#toggleHlsStats();
+      this.#toggleStatsForNerds();
+    }
+  };
+
+  #bind = () => {
+    document.addEventListener('keydown', this.#keyDownHandler, false);
+  };
+
+  #unbind = () => {
+    document.removeEventListener('keydown', this.#keyDownHandler, false);
+  };
+
+  bindAllShortcuts = () => {
+    if (!isEvenListenersAttached) {
+      this.#bind();
+      isEvenListenersAttached = true;
+    }
+  };
+
+  unbindAllShortcuts = () => {
+    if (isEvenListenersAttached) {
+      this.#unbind();
+      isEvenListenersAttached = false;
+    }
+  };
+}
+
+export const KeyboardHandler = () => {
+  const store = useHMSVanillaStore();
+  const actions = useHMSActions();
+
+  useEffect(() => {
+    const keyboardManager = new KeyboardInputManager(store, actions);
+    keyboardManager.bindAllShortcuts();
+    return keyboardManager.unbindAllShortcuts;
+  }, [actions, store]);
+  return null;
+};

package/src/Prebuilt/components/LeaveRoom.jsx

@@ -0,0 +1,202 @@
+import React, { Fragment, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { selectIsConnectedToRoom, selectPermissions, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { AlertTriangleIcon, ExitIcon, HangUpIcon, VerticalMenuIcon } from '@100mslive/react-icons';
+import { ToastManager } from './Toast/ToastManager';
+import { Button } from '../../Button';
+import { Dropdown } from '../../Dropdown';
+import { IconButton } from '../../IconButton';
+import { Box, Flex } from '../../Layout';
+import { Dialog } from '../../Modal';
+import { Text } from '../../Text';
+import { styled } from '../../Theme';
+import { Tooltip } from '../../Tooltip';
+import { useHMSPrebuiltContext } from '../AppContext';
+import { DialogCheckbox, DialogContent, DialogRow } from '../primitives/DialogContent';
+import { useDropdownList } from './hooks/useDropdownList';
+import { useNavigation } from './hooks/useNavigation';
+import { isStreamingKit } from '../common/utils';
+
+export const LeaveRoom = () => {
+  const navigate = useNavigation();
+  const params = useParams();
+  const [open, setOpen] = useState(false);
+  const [showEndRoomModal, setShowEndRoomModal] = useState(false);
+  const [lockRoom, setLockRoom] = useState(false);
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const permissions = useHMSStore(selectPermissions);
+  const hmsActions = useHMSActions();
+  const { showLeave, onLeave } = useHMSPrebuiltContext();
+  useDropdownList({ open, name: 'LeaveRoom' });
+
+  const redirectToLeavePage = () => {
+    if (showLeave) {
+      if (params.role) {
+        navigate('/leave/' + params.roomId + '/' + params.role);
+      } else {
+        navigate('/leave/' + params.roomId);
+      }
+    }
+    ToastManager.clearAllToast();
+    onLeave?.();
+  };
+
+  const leaveRoom = () => {
+    hmsActions.leave();
+    redirectToLeavePage();
+  };
+
+  const endRoom = () => {
+    hmsActions.endRoom(lockRoom, 'End Room');
+    redirectToLeavePage();
+  };
+
+  const isStreamKit = isStreamingKit();
+  if (!permissions || !isConnected) {
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {permissions.endRoom ? (
+        <Flex>
+          <LeaveIconButton
+            variant="danger"
+            key="LeaveRoom"
+            data-testid="leave_room_btn"
+            css={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}
+            onClick={leaveRoom}
+          >
+            <Tooltip title="Leave Room">
+              {!isStreamKit ? (
+                <Box>
+                  <HangUpIcon key="hangUp" />
+                </Box>
+              ) : (
+                <Flex gap={2}>
+                  <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>
+                    <ExitIcon key="hangUp" />
+                  </Box>
+                  <Text css={{ '@md': { display: 'none' }, color: 'inherit' }} variant="button">
+                    Leave Studio
+                  </Text>
+                </Flex>
+              )}
+            </Tooltip>
+          </LeaveIconButton>
+          <Dropdown.Root open={open} onOpenChange={setOpen}>
+            <Dropdown.Trigger
+              asChild
+              css={{
+                '&[data-state="open"]': {
+                  bg: '$errorDark',
+                },
+              }}
+            >
+              <MenuTriggerButton variant="danger" data-testid="leave_end_dropdown_trigger">
+                <VerticalMenuIcon />
+              </MenuTriggerButton>
+            </Dropdown.Trigger>
+            <Dropdown.Content css={{ p: 0 }} alignOffset={-50} sideOffset={10}>
+              <Dropdown.Item
+                css={{ w: '100%', bg: 'rgba(178, 71, 81, 0.1)' }}
+                onClick={() => {
+                  setShowEndRoomModal(true);
+                }}
+                data-testid="end_room_btn"
+              >
+                <Flex gap={4}>
+                  <Box css={{ color: '$error' }}>
+                    <AlertTriangleIcon />
+                  </Box>
+                  <Flex direction="column" align="start">
+                    <Text variant="lg" css={{ c: '$error' }}>
+                      End Room for All
+                    </Text>
+                    <Text variant="sm" css={{ c: '$textMedEmp', mt: '$2' }}>
+                      Warning: You can’t undo this action
+                    </Text>
+                  </Flex>
+                </Flex>
+              </Dropdown.Item>
+              <Dropdown.Item css={{ bg: '$surfaceDefault' }} onClick={leaveRoom} data-testid="just_leave_btn">
+                <Flex gap={4}>
+                  <Box>
+                    <ExitIcon />
+                  </Box>
+                  <Flex direction="column" align="start">
+                    <Text variant="lg">Leave {isStreamKit ? 'Studio' : 'Room'}</Text>
+                    <Text variant="sm" css={{ c: '$textMedEmp', mt: '$2' }}>
+                      You can always rejoin later
+                    </Text>
+                  </Flex>
+                </Flex>
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </Flex>
+      ) : (
+        <LeaveIconButton onClick={leaveRoom} variant="danger" key="LeaveRoom" data-testid="leave_room_btn">
+          <Tooltip title="Leave Room">
+            <Box>
+              {isStreamKit ? (
+                <Box css={{ '@md': { transform: 'rotate(180deg)' } }}>
+                  <ExitIcon />
+                </Box>
+              ) : (
+                <HangUpIcon key="hangUp" />
+              )}
+            </Box>
+          </Tooltip>
+        </LeaveIconButton>
+      )}
+
+      <Dialog.Root
+        open={showEndRoomModal}
+        onOpenChange={value => {
+          if (!value) {
+            setLockRoom(false);
+          }
+          setShowEndRoomModal(value);
+        }}
+      >
+        <DialogContent title="End Room" Icon={HangUpIcon}>
+          <DialogCheckbox id="lockRoom" title="Disable future joins" value={lockRoom} onChange={setLockRoom} />
+          <DialogRow justify="end">
+            <Button variant="danger" onClick={endRoom} data-testid="lock_end_room">
+              End Room
+            </Button>
+          </DialogRow>
+        </DialogContent>
+      </Dialog.Root>
+    </Fragment>
+  );
+};
+
+const LeaveIconButton = styled(IconButton, {
+  color: '$white',
+  h: '$14',
+  px: '$8',
+  r: '$1',
+  bg: '$error',
+  '&:not([disabled]):hover': {
+    bg: '$errorTint',
+  },
+  '&:not([disabled]):active': {
+    bg: '$errorTint',
+  },
+  '@md': {
+    px: '$4',
+    mx: 0,
+  },
+});
+
+const MenuTriggerButton = styled(LeaveIconButton, {
+  borderLeft: '1px solid $errorDark',
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  px: '$3',
+  '@md': {
+    px: '$2',
+  },
+});

package/src/Prebuilt/components/MetaActions.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { selectIsConnectedToRoom, useHMSStore } from '@100mslive/react-sdk';
+import { BrbIcon, HandIcon } from '@100mslive/react-icons';
+import { Flex } from '../../Layout';
+import { Tooltip } from '../../Tooltip';
+import IconButton from '../IconButton';
+import { useIsFeatureEnabled } from './hooks/useFeatures';
+import { useMyMetadata } from './hooks/useMetadata';
+import { FEATURE_LIST } from '../common/constants';
+
+const MetaActions = ({ isMobile = false, compact = false }) => {
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const { isHandRaised, isBRBOn, toggleHandRaise, toggleBRB } = useMyMetadata();
+  const isHandRaiseEnabled = useIsFeatureEnabled(FEATURE_LIST.HAND_RAISE);
+  const isBRBEnabled = useIsFeatureEnabled(FEATURE_LIST.BRB);
+
+  if (!isConnected || (!isHandRaiseEnabled && !isBRBEnabled)) {
+    return null;
+  }
+
+  return (
+    <Flex align="center" css={{ gap: compact ? '$4' : '$8' }}>
+      {isHandRaiseEnabled && (
+        <Tooltip title={`${!isHandRaised ? 'Raise' : 'Unraise'} hand`}>
+          <IconButton
+            onClick={toggleHandRaise}
+            active={!isHandRaised}
+            data-testid={`${isMobile ? 'raise_hand_btn_mobile' : 'raise_hand_btn'}`}
+          >
+            <HandIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+      {isBRBEnabled && (
+        <Tooltip title={`${isBRBOn ? `I'm back` : `I'll be right back`}`}>
+          <IconButton onClick={toggleBRB} active={!isBRBOn} data-testid="brb_btn">
+            <BrbIcon />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Flex>
+  );
+};
+
+export default MetaActions;

package/src/Prebuilt/components/MoreSettings/BulkRoleChangeModal.jsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { useHMSActions } from '@100mslive/react-sdk';
+import { AlertTriangleIcon, ChangeRoleIcon, CheckIcon } from '@100mslive/react-icons';
+import { Button, Checkbox, Dialog, Dropdown, Flex, Loading, Text } from '../../../';
+import { DialogContent, DialogRow } from '../../primitives/DialogContent';
+import { DialogDropdownTrigger } from '../../primitives/DropdownTrigger';
+import { useFilteredRoles } from '../../common/hooks';
+
+export const BulkRoleChangeModal = ({ onOpenChange }) => {
+  const roles = useFilteredRoles();
+  const hmsActions = useHMSActions();
+  const ref = useRef(null);
+  const roleRef = useRef(null);
+  const [selectedBulkRole, setBulkRole] = useState([]);
+  const [selectedRole, setRole] = useState('');
+  const [bulkRoleDialog, setBulkRoleDialog] = useState(false);
+  const [roleDialog, setRoleDialog] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+  const [isSubmiting, setIsSubmiting] = useState(false);
+
+  const changeBulkRole = useCallback(async () => {
+    if (selectedBulkRole.length > 0 && selectedRole) {
+      try {
+        setIsSubmiting(true);
+        await hmsActions.changeRoleOfPeersWithRoles(selectedBulkRole, selectedRole);
+        setIsSubmiting(false);
+        setErrorMessage('');
+        onOpenChange(false);
+      } catch (err) {
+        setErrorMessage(err?.message ? err?.message : 'Unknown error');
+        setIsSubmiting(false);
+      }
+    }
+  }, [selectedBulkRole, selectedRole, hmsActions, onOpenChange]);
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <DialogContent title="Bulk Role Change" Icon={ChangeRoleIcon}>
+        <DialogRow>
+          <Text>For Roles: </Text>
+          <Dropdown.Root
+            open={bulkRoleDialog}
+            onOpenChange={value => {
+              if (value) {
+                setBulkRoleDialog(value);
+              }
+            }}
+            modal={false}
+          >
+            <DialogDropdownTrigger
+              ref={ref}
+              title={selectedBulkRole.length === 0 ? 'Select Multiple Roles' : selectedBulkRole.toString()}
+              css={{
+                w: '70%',
+                p: '$8',
+              }}
+              open={bulkRoleDialog}
+            />
+            <Dropdown.Content
+              css={{ w: ref.current?.clientWidth, zIndex: 1000 }}
+              onInteractOutside={() => {
+                if (bulkRoleDialog) {
+                  setBulkRoleDialog(false);
+                }
+              }}
+            >
+              {roles &&
+                roles.map(role => {
+                  return (
+                    <Dropdown.CheckboxItem
+                      key={role}
+                      checked={selectedBulkRole.includes(role)}
+                      onCheckedChange={value => {
+                        setBulkRole(selection => {
+                          return value ? [...selection, role] : selection.filter(selectedRole => selectedRole !== role);
+                        });
+                        setErrorMessage('');
+                      }}
+                    >
+                      <Checkbox.Root css={{ margin: '$2' }} checked={selectedBulkRole.includes(role)}>
+                        <Checkbox.Indicator>
+                          <CheckIcon width={16} height={16} />
+                        </Checkbox.Indicator>
+                      </Checkbox.Root>
+                      {role}
+                    </Dropdown.CheckboxItem>
+                  );
+                })}
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </DialogRow>
+        <DialogRow>
+          <Text>To Role: </Text>
+          <Dropdown.Root open={roleDialog} onOpenChange={value => setRoleDialog(value)}>
+            <DialogDropdownTrigger
+              ref={roleRef}
+              title={selectedRole || 'Select Role'}
+              css={{
+                w: '70%',
+                p: '$8',
+              }}
+              open={roleDialog}
+            />
+            <Dropdown.Content css={{ w: roleRef.current?.clientWidth, zIndex: 1000 }}>
+              {roles &&
+                roles.map(role => {
+                  return (
+                    <Dropdown.Item
+                      key={role}
+                      onSelect={() => {
+                        setRole(role);
+                        setErrorMessage('');
+                      }}
+                    >
+                      {role}
+                    </Dropdown.Item>
+                  );
+                })}
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </DialogRow>
+        <DialogRow>
+          {errorMessage && (
+            <Flex gap={2} css={{ c: '$error', w: '70%', ml: 'auto' }}>
+              <AlertTriangleIcon />
+              <Text css={{ c: 'inherit' }}>{errorMessage}</Text>
+            </Flex>
+          )}
+        </DialogRow>
+        <DialogRow justify="end">
+          <Button variant="primary" onClick={changeBulkRole} disabled={!(selectedRole && selectedBulkRole.length > 0)}>
+            {isSubmiting && <Loading css={{ color: '$textSecondary' }} />}
+            Apply
+          </Button>
+        </DialogRow>
+      </DialogContent>
+    </Dialog.Root>
+  );
+};

package/src/Prebuilt/components/MoreSettings/ChangeNameModal.jsx

@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { selectLocalPeerName, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { Box, Button, Dialog, Flex, Input, Text } from '../../../';
+import { ToastManager } from '../Toast/ToastManager';
+import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
+
+export const ChangeNameModal = ({ onOpenChange }) => {
+  const [previewPreference, setPreviewPreference] = useUserPreferences(UserPreferencesKeys.PREVIEW);
+  const hmsActions = useHMSActions();
+  const localPeerName = useHMSStore(selectLocalPeerName);
+  const [currentName, setCurrentName] = useState(localPeerName);
+
+  const changeName = async () => {
+    const name = currentName.trim();
+    if (!name || name === localPeerName) {
+      return;
+    }
+    try {
+      await hmsActions.changeName(name);
+      setPreviewPreference({
+        ...(previewPreference || {}),
+        name,
+      });
+    } catch (error) {
+      console.error('failed to update name', error);
+      ToastManager.addToast({ title: error.message });
+    } finally {
+      onOpenChange(false);
+    }
+  };
+
+  return (
+    <Dialog.Root defaultOpen onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay />
+        <Dialog.Content css={{ width: 'min(400px,80%)', p: '$10' }}>
+          <Dialog.Title css={{ p: '0 $4' }}>
+            <Text variant="h6"> Change Name</Text>
+          </Dialog.Title>
+          <form
+            onSubmit={async e => {
+              e.preventDefault();
+              await changeName();
+            }}
+          >
+            <Flex justify="center" align="center" css={{ my: '$8', w: '100%' }}>
+              <Input
+                css={{ width: '100%' }}
+                value={currentName}
+                onChange={e => {
+                  setCurrentName(e.target.value);
+                }}
+                autoComplete="name"
+                required
+                data-testid="change_name_field"
+              />
+            </Flex>
+
+            <Flex
+              justify="between"
+              align="center"
+              css={{
+                width: '100%',
+                gap: '$md',
+                mt: '$10',
+              }}
+            >
+              <Box css={{ w: '50%' }}>
+                <Dialog.Close css={{ w: '100%' }}>
+                  <Button variant="standard" css={{ w: '100%' }} outlined type="submit" disabled={!localPeerName}>
+                    Cancel
+                  </Button>
+                </Dialog.Close>
+              </Box>
+              <Box css={{ w: '50%' }}>
+                <Button
+                  variant="primary"
+                  css={{ width: '100%' }}
+                  type="submit"
+                  disabled={!currentName.trim() || currentName.trim() === localPeerName}
+                  data-testid="popup_change_btn"
+                >
+                  Change
+                </Button>
+              </Box>
+            </Flex>
+          </form>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};