@dxos/react-ui 0.1.23 → 0.1.24

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -0,0 +1,94 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { cloneElement, Dispatch } from 'react';
+
+import type {
+  AuthenticatingInvitationObservable,
+  Profile as NaturalProfile,
+  Space as NaturalSpace
+} from '@dxos/client';
+import { InvitationResult } from '@dxos/react-client';
+
+export type Space = Pick<NaturalSpace, 'properties'>;
+
+export type Profile = Pick<NaturalProfile, 'displayName' | 'identityKey'>;
+
+export interface JoinPanelProps {
+  initialInvitationCode?: string;
+  titleId?: string;
+  exitActionParent?: Parameters<typeof cloneElement>[0];
+  onExit?: () => void;
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+  parseInvitationCodeInput?: (invitationCodeInput: string) => string;
+}
+
+export interface IdentityAction {
+  type: 'select identity' | 'added identity';
+  identity: Profile;
+}
+
+export interface EmptyJoinAction {
+  type: 'deselect identity' | 'cancel addition' | 'add identity';
+}
+
+export interface EmptyInvitationAction {
+  type:
+    | 'authenticating invitation'
+    | 'authenticate invitation'
+    | 'cancel invitation'
+    | 'cancelled invitation'
+    | 'connect invitation'
+    | 'fail invitation'
+    | 'accepted invitation'
+    | 'timeout invitation'
+    | 'reset invitation';
+  from: 'space' | 'halo';
+}
+
+export interface InvitationCodeAction {
+  type: 'connecting invitation';
+  from: 'space' | 'halo';
+  invitation: AuthenticatingInvitationObservable;
+}
+
+export type InvitationAction = EmptyInvitationAction | InvitationCodeAction;
+
+export interface AdditionMethodAction {
+  type: 'select addition method';
+  method: 'recover identity' | 'accept device invitation' | 'create identity';
+}
+
+export type JoinAction = IdentityAction | EmptyJoinAction | AdditionMethodAction | InvitationAction;
+
+export type JoinDispatch = Dispatch<JoinAction>;
+
+export type InvitationView =
+  | 'invitation input'
+  | 'invitation rescuer'
+  | 'invitation authenticator'
+  | 'invitation accepted';
+
+export type JoinView =
+  | 'identity selector'
+  | 'addition method selector'
+  | 'identity input'
+  | 'identity added'
+  | 'space invitation acceptor'
+  | 'halo invitation acceptor';
+
+export interface JoinState {
+  activeView: JoinView;
+  unredeemedSpaceInvitationCode?: string;
+  spaceInvitation?: AuthenticatingInvitationObservable;
+  spaceViewState: InvitationView;
+  spaceInvitationAnnotation?: 'authenticating' | 'authentication failed';
+  unredeemedHaloInvitationCode?: string;
+  haloInvitation?: AuthenticatingInvitationObservable;
+  haloViewState: InvitationView;
+  haloInvitationAnnotation?: 'authenticating' | 'authentication failed';
+  selectedIdentity?: Profile;
+  additionMethod?: AdditionMethodAction['method'];
+}

package/src/panels/JoinPanel/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './JoinPanel';
+export * from './JoinPanelProps';

package/src/panels/JoinPanel/view-states/AdditionMethodSelector.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight, Plus, QrCode, Textbox } from 'phosphor-react';
+import React from 'react';
+
+import { Button, CompoundButton, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { Profile } from '../JoinPanelProps';
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface AdditionMethodSelectorProps extends ViewStateProps {
+  availableIdentities: Profile[];
+}
+
+export const AdditionMethodSelector = ({ availableIdentities, ...viewStateProps }: AdditionMethodSelectorProps) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+
+  const { t } = useTranslation('os');
+
+  const sharedButtonProps = {
+    disabled,
+    after: <CaretRight className={getSize(4)} weight='bold' />,
+    slots: { label: { className: 'text-sm' } }
+  };
+
+  return (
+    <ViewState {...viewStateProps}>
+      <ViewStateHeading>{t('addition method selector title')}</ViewStateHeading>
+      <div role='none' className='flex flex-col gap-1 grow'>
+        <CompoundButton
+          {...sharedButtonProps}
+          description={t('create identity description')}
+          before={<Plus className={getSize(6)} />}
+          onClick={() => dispatch({ type: 'select addition method', method: 'create identity' })}
+          data-autofocus='addition method selector'
+        >
+          {t('create identity label')}
+        </CompoundButton>
+        <CompoundButton
+          {...sharedButtonProps}
+          description={t('join identity description')}
+          before={<QrCode className={getSize(6)} />}
+          onClick={() => dispatch({ type: 'select addition method', method: 'accept device invitation' })}
+        >
+          {t('join identity label')}
+        </CompoundButton>
+        <CompoundButton
+          {...sharedButtonProps}
+          description={t('recover identity description')}
+          before={<Textbox className={getSize(6)} />}
+          onClick={() => dispatch({ type: 'select addition method', method: 'recover identity' })}
+        >
+          {t('recover identity label')}
+        </CompoundButton>
+      </div>
+      <Button
+        disabled={disabled || availableIdentities.length < 1}
+        onClick={() => dispatch({ type: 'deselect identity' })}
+      >
+        <CaretLeft className={getSize(4)} weight='bold' />
+        <span className='grow'>{t('deselect identity label')}</span>
+        <CaretRight className={mx(getSize(4), 'invisible')} weight='bold' />
+      </Button>
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/IdentityAdded.tsx

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React from 'react';
+
+import type { Profile } from '@dxos/client';
+import { Avatar, Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface IdentityAddedProps extends ViewStateProps {
+  addedIdentity?: Profile;
+}
+
+export const IdentityAdded = ({ addedIdentity, ...viewStateProps }: IdentityAddedProps) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation('os');
+
+  return (
+    <ViewState {...viewStateProps}>
+      <ViewStateHeading>{t('identity added label')}</ViewStateHeading>
+      <div role='none' className='grow flex flex-col items-center justify-center text-center gap-2'>
+        <Avatar
+          size={20}
+          fallbackValue={addedIdentity?.identityKey.toHex() ?? ''}
+          label={
+            <p className={mx('text-lg', !addedIdentity?.displayName && 'font-mono')}>
+              {addedIdentity?.displayName ?? addedIdentity?.identityKey.truncate() ?? ' '}
+            </p>
+          }
+          variant='circle'
+          status='active'
+        />
+      </div>
+      <div className='flex gap-2'>
+        <Button
+          disabled={disabled || !addedIdentity}
+          className='grow flex items-center gap-2 pli-2 order-2'
+          onClick={() => addedIdentity && dispatch({ type: 'select identity', identity: addedIdentity })}
+          data-autofocus='identity added'
+        >
+          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+          <span className='grow'>{t('continue label')}</span>
+          <CaretRight weight='bold' className={getSize(4)} />
+        </Button>
+        <Button
+          disabled={disabled}
+          onClick={() => dispatch({ type: 'deselect identity' })}
+          className='flex items-center gap-2 pis-2 pie-4'
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('deselect identity label')}</span>
+        </Button>
+      </div>
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/IdentityInput.tsx

@@ -0,0 +1,72 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React, { ComponentPropsWithoutRef, useState } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface IdentityCreatorProps extends ViewStateProps {
+  method: 'recover identity' | 'create identity';
+}
+
+export const IdentityInput = ({ method, ...viewStateProps }: IdentityCreatorProps) => {
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation('os');
+  const [inputValue, setInputValue] = useState('');
+  const client = useClient();
+  const [validationMessage, setValidationMessage] = useState('');
+  const isRecover = method === 'recover identity';
+  const handleNext = () => {
+    void client.halo.createProfile({ [isRecover ? 'seedphrase' : 'displayName']: inputValue }).then(
+      (identity) => {
+        dispatch({ type: 'added identity', identity });
+      },
+      (_error) => {
+        setValidationMessage(t(isRecover ? 'failed to recover identity message' : 'failed to create identity message'));
+      }
+    );
+  };
+  return (
+    <ViewState {...viewStateProps}>
+      <Input
+        disabled={disabled}
+        label={
+          <ViewStateHeading>
+            {t(isRecover ? 'recover identity input label' : 'new identity input label')}
+          </ViewStateHeading>
+        }
+        onChange={({ target: { value } }) => setInputValue(value)}
+        slots={{
+          root: { className: 'm-0' },
+          input: {
+            'data-autofocus': isRecover ? 'identity input; recover identity' : 'identity input; create identity',
+            onKeyUp: ({ key }) => key === 'Enter' && handleNext()
+          } as ComponentPropsWithoutRef<'input'>
+        }}
+        {...(validationMessage.length && { validationValence: 'error', validationMessage })}
+      />
+      <div role='none' className='grow' />
+      <div className='flex gap-2'>
+        <Button disabled={disabled} className='grow flex items-center gap-2 pli-2 order-2' onClick={handleNext}>
+          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+          <span className='grow'>{t('continue label')}</span>
+          <CaretRight weight='bold' className={getSize(4)} />
+        </Button>
+        <Button
+          disabled={disabled}
+          onClick={() => dispatch({ type: 'add identity' })}
+          className='flex items-center gap-2 pis-2 pie-4'
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('back label')}</span>
+        </Button>
+      </div>
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/IdentitySelector.tsx

@@ -0,0 +1,98 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import { CaretLeft, CaretRight, UserPlus } from 'phosphor-react';
+import React, { useCallback, useState } from 'react';
+
+import { Avatar, Button, themeVariantFocus, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { Profile } from '../JoinPanelProps';
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface IdentitySelectorProps extends ViewStateProps {
+  availableIdentities: Profile[];
+}
+
+export const IdentitySelector = ({ availableIdentities, ...viewStateProps }: IdentitySelectorProps) => {
+  const { dispatch } = viewStateProps;
+  const disabled = !viewStateProps.active;
+
+  const { t } = useTranslation('os');
+  const [activeIdentity, setActiveIdentity] = useState(availableIdentities[0]);
+  const onValueChange = useCallback(
+    (nextHex: string) =>
+      setActiveIdentity(
+        availableIdentities.find((identity) => identity.identityKey.toHex() === nextHex) || activeIdentity
+      ),
+    [availableIdentities]
+  );
+
+  return (
+    <ViewState {...viewStateProps}>
+      <ViewStateHeading>{t('identity selector title')}</ViewStateHeading>
+      <RadioGroup.Root
+        disabled={disabled}
+        value={activeIdentity?.identityKey.toHex()}
+        onValueChange={onValueChange}
+        className='overflow-y-auto grow shrink min-bs-10 pli-1 -mli-1'
+        aria-label={t('identity radio group title')}
+        data-autofocus='identity selector'
+      >
+        {availableIdentities.map(({ displayName, identityKey }) => {
+          const hex = identityKey.toHex();
+          const inputId = `identitySelector__item--${hex}`;
+          const labelId = `identitySelector__itemLabel--${hex}`;
+          return (
+            <label htmlFor={inputId} key={hex} className='flex items-center mbe-2 gap-2 cursor-pointer'>
+              <RadioGroup.Item
+                id={inputId}
+                aria-labelledby={labelId}
+                value={hex}
+                className={mx(
+                  'peer relative w-4 h-4 rounded-full',
+                  'border border-transparent text-white',
+                  'radix-state-checked:bg-primary-600',
+                  'radix-state-unchecked:bg-neutral-100 dark:radix-state-unchecked:bg-neutral-900',
+                  themeVariantFocus('os')
+                )}
+              >
+                <RadioGroup.Indicator className='absolute inset-0 flex items-center justify-center leading-0'>
+                  <div className='w-1.5 h-1.5 rounded-full bg-white' />
+                </RadioGroup.Indicator>
+              </RadioGroup.Item>
+              <Avatar fallbackValue={hex} labelId={labelId} variant='circle' />
+              <span id={labelId} className={mx(!displayName && 'font-mono')}>
+                {displayName ?? identityKey.truncate() ?? ''}
+              </span>
+            </label>
+          );
+        })}
+      </RadioGroup.Root>
+      <Button
+        disabled={disabled}
+        compact
+        onClick={() => dispatch({ type: 'add identity' })}
+        className='flex items-center gap-2 pli-2'
+      >
+        <span>{t('add identity label')}</span>
+        <UserPlus weight='bold' className={getSize(3.5)} />
+      </Button>
+      <Button
+        disabled={disabled || !activeIdentity}
+        className='flex items-center gap-2 pli-2'
+        onClick={() =>
+          dispatch({
+            type: 'select identity',
+            identity: activeIdentity
+          })
+        }
+      >
+        <CaretLeft weight='bold' className={mx(getSize(4), 'invisible')} />
+        <span className='grow'>{t('continue label')}</span>
+        <CaretRight weight='bold' className={getSize(4)} />
+      </Button>
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/InvitationAccepted.tsx

@@ -0,0 +1,69 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, Check } from 'phosphor-react';
+import React, { cloneElement } from 'react';
+
+import { AuthenticatingInvitationObservable } from '@dxos/client';
+import { InvitationResult, useInvitationStatus } from '@dxos/react-client';
+import { Button, getSize, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateProps } from './ViewState';
+
+export interface InvitationAcceptedProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+  doneActionParent?: Parameters<typeof cloneElement>[0];
+  onDone?: (result: InvitationResult | null) => void;
+}
+
+const PureInvitationAcceptedContent = ({
+  onDone,
+  result,
+  invitationType,
+  doneActionParent,
+  active
+}: InvitationAcceptedProps & { result: InvitationResult | null }) => {
+  const disabled = !active;
+  const { t } = useTranslation('os');
+
+  const doneButton = (
+    <Button
+      {...(onDone && { onClick: () => onDone(result) })}
+      disabled={disabled}
+      className='grow flex items-center gap-2 pli-2'
+      data-autofocus={`${invitationType} invitation acceptor; invitation accepted`}
+    >
+      <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+      <span className='grow'>{t('done label')}</span>
+      <Check weight='bold' className={getSize(4)} />
+    </Button>
+  );
+
+  return doneActionParent ? cloneElement(doneActionParent, {}, doneButton) : doneButton;
+};
+
+const InvitationAcceptedContent = (props: InvitationAcceptedProps) => {
+  const { result } = useInvitationStatus(props.activeInvitation as AuthenticatingInvitationObservable);
+  return <PureInvitationAcceptedContent {...props} result={result} />;
+};
+
+export const InvitationAccepted = (props: InvitationAcceptedProps) => {
+  const {
+    invitationType: _invitationType,
+    doneActionParent: _doneActionParent,
+    onDone: _onDone,
+    ...viewStateProps
+  } = props;
+  const { activeInvitation } = viewStateProps;
+
+  return (
+    <ViewState {...viewStateProps}>
+      {!activeInvitation || activeInvitation === true ? (
+        <PureInvitationAcceptedContent {...props} result={null} />
+      ) : (
+        <InvitationAcceptedContent {...props} />
+      )}
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/InvitationAuthenticator.tsx

@@ -0,0 +1,139 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React, { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, useCallback, useState } from 'react';
+
+import { AuthenticatingInvitationObservable } from '@dxos/client';
+import { useInvitationStatus } from '@dxos/react-client';
+import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateProps } from './ViewState';
+
+const pinLength = 6;
+
+export interface InvitationAuthenticatorProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+  failed?: boolean;
+}
+
+const PureInvitationAuthenticatorContent = ({
+  disabled,
+  failed,
+  dispatch,
+  invitationType,
+  onChange,
+  onAuthenticate
+}: {
+  disabled?: boolean;
+  dispatch: ViewStateProps['dispatch'];
+  invitationType: InvitationAuthenticatorProps['invitationType'];
+  failed: InvitationAuthenticatorProps['failed'];
+  onChange: ComponentProps<typeof Input>['onChange'];
+  onAuthenticate: ComponentProps<typeof Button>['onClick'];
+}) => {
+  const { t } = useTranslation('os');
+  return (
+    <>
+      <Input
+        label={t('pin input label')}
+        size='pin'
+        length={pinLength}
+        onChange={onChange}
+        disabled={disabled}
+        slots={{
+          root: { className: 'm-0' },
+          label: { className: 'sr-only' },
+          description: { className: 'text-center' },
+          input: {
+            disabled,
+            inputMode: 'numeric',
+            pattern: '\\d*',
+            'data-autofocus': `${invitationType} invitation acceptor; invitation authenticator`
+          } as ComponentPropsWithoutRef<'input'>
+        }}
+        {...(failed && {
+          validationValence: 'error',
+          validationMessage: t('failed to authenticate message')
+        })}
+      />
+      <div role='none' className='grow' />
+      <div className='flex gap-2'>
+        <Button
+          disabled={disabled}
+          className='grow flex items-center gap-2 pli-2 order-2'
+          onClick={onAuthenticate}
+          data-autofocus-pinlength={invitationType}
+        >
+          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+          <span className='grow'>{t('next label')}</span>
+          <CaretRight weight='bold' className={getSize(4)} />
+        </Button>
+        <Button
+          disabled={disabled}
+          className='flex items-center gap-2 pis-2 pie-4'
+          onClick={() => dispatch({ type: 'cancel invitation', from: invitationType })}
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('cancel label')}</span>
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const InvitationAuthenticatorContent = ({
+  disabled,
+  invitation,
+  dispatch,
+  invitationType,
+  failed
+}: {
+  disabled?: boolean;
+  invitation: AuthenticatingInvitationObservable;
+  dispatch: ViewStateProps['dispatch'];
+  invitationType: InvitationAuthenticatorProps['invitationType'];
+  failed: InvitationAuthenticatorProps['failed'];
+}) => {
+  const [pinValue, setPinValue] = useState('');
+  const { authenticate } = useInvitationStatus(invitation);
+  const onAuthenticate = useCallback(() => {
+    dispatch({ type: 'authenticating invitation', from: invitationType });
+    void authenticate(pinValue);
+  }, [dispatch, invitationType, authenticate, pinValue]);
+  const onChange = useCallback(
+    ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
+      setPinValue(value);
+      if (value.length === pinLength) {
+        (document.querySelector(`[data-autofocus-pinlength="${invitationType}"]`) as HTMLElement | null)?.focus();
+      }
+    },
+    [authenticate, pinValue]
+  );
+  return (
+    <PureInvitationAuthenticatorContent {...{ disabled, failed, dispatch, invitationType, onChange, onAuthenticate }} />
+  );
+};
+
+export const InvitationAuthenticator = ({
+  invitationType,
+  failed,
+  ...viewStateProps
+}: InvitationAuthenticatorProps) => {
+  const disabled = !viewStateProps.active;
+  const { activeInvitation, dispatch } = viewStateProps;
+  return (
+    <ViewState {...viewStateProps}>
+      {!activeInvitation || activeInvitation === true ? (
+        <PureInvitationAuthenticatorContent
+          {...{ disabled, failed, dispatch, invitationType, onChange: () => {}, onAuthenticate: () => {} }}
+        />
+      ) : (
+        <InvitationAuthenticatorContent
+          {...{ disabled, failed, invitation: activeInvitation, dispatch, invitationType }}
+        />
+      )}
+    </ViewState>
+  );
+};

package/src/panels/JoinPanel/view-states/InvitationInput.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CaretLeft, CaretRight } from 'phosphor-react';
+import React, { ComponentPropsWithoutRef, useState } from 'react';
+
+import { InvitationEncoder } from '@dxos/client';
+import { useClient } from '@dxos/react-client';
+import { Button, getSize, Input, mx, useTranslation } from '@dxos/react-components';
+
+import { ViewState, ViewStateHeading, ViewStateProps } from './ViewState';
+
+export interface InvitationInputProps extends ViewStateProps {
+  invitationType: 'space' | 'halo';
+}
+
+export const InvitationInput = ({ invitationType, ...viewStateProps }: InvitationInputProps) => {
+  const client = useClient();
+  const disabled = !viewStateProps.active;
+  const { dispatch } = viewStateProps;
+  const { t } = useTranslation('os');
+
+  const [inputValue, setInputValue] = useState('');
+
+  const handleNext = () =>
+    dispatch({
+      type: 'connecting invitation',
+      from: invitationType,
+      invitation: client[invitationType === 'halo' ? 'halo' : 'echo'].acceptInvitation(
+        InvitationEncoder.decode(inputValue)
+      )
+    });
+
+  return (
+    <ViewState {...viewStateProps}>
+      <Input
+        disabled={disabled}
+        label={<ViewStateHeading>{t('invitation input label')}</ViewStateHeading>}
+        onChange={({ target: { value } }) => setInputValue(value)}
+        slots={{
+          root: { className: 'm-0' },
+          label: { className: 'sr-only' },
+          input: {
+            'data-autofocus': `${invitationType} invitation acceptor; invitation input`,
+            onKeyUp: ({ key }) => key === 'Enter' && handleNext()
+          } as ComponentPropsWithoutRef<'input'>
+        }}
+      />
+      <div role='none' className='grow' />
+      <div className='flex gap-2'>
+        <Button disabled={disabled} className='grow flex items-center gap-2 pli-2 order-2' onClick={handleNext}>
+          <CaretLeft weight='bold' className={mx(getSize(2), 'invisible')} />
+          <span className='grow'>{t('continue label')}</span>
+          <CaretRight weight='bold' className={getSize(4)} />
+        </Button>
+        <Button
+          disabled={disabled}
+          onClick={() => dispatch({ type: 'add identity' })}
+          className='flex items-center gap-2 pis-2 pie-4'
+        >
+          <CaretLeft weight='bold' className={getSize(4)} />
+          <span>{t('back label')}</span>
+        </Button>
+      </div>
+    </ViewState>
+  );
+};