How to use the @polkadot/ui-settings.availableCryptos function in @polkadot/ui-settings

function Verify ({ t }: Props): React.ReactElement {
  const [{ cryptoType, isValid }, setValidity] = useState<{ cryptoType: CryptoTypes; isValid: boolean }>({ cryptoType: 'unknown', isValid: false });
  const [{ data, isHexData }, setData] = useState<{ data: string; isHexData: boolean }>({ data: '', isHexData: false });
  const [{ publicKey, isValidPk }, setPublicKey] = useState<{ publicKey: Uint8Array | null; isValidPk: boolean }>({ publicKey: null, isValidPk: false });
  const [{ signature, isValidSignature }, setSignature] = useState<{ signature: string; isValidSignature: boolean }>({ signature: '', isValidSignature: false });
  const [cryptoOptions] = useState([{ value: 'unknown', text: t('Crypto not detected') }].concat(uiSettings.availableCryptos as any[]));

  useEffect((): void => {
    let cryptoType: CryptoTypes = 'unknown';
    let isValid = isValidPk && isValidSignature;

    // We cannot just use the keyring verify since it may be an address. So here we first check
    // for ed25519, if not valid, we try against sr25519 - if neither are valid, well, we have
    // not been able to validate the signature
    if (isValid && publicKey) {
      let isValidSr = false;
      let isValidEd = false;

      try {
        isValidEd = naclVerify(data, signature, publicKey);
      } catch (error) {
        // do nothing, already set to false

label={t('password')}
            onChange={_onChangePass}
            onEnter={_onCommit}
            value={password}
          />
          <details open="">
            <summary>{t('Advanced creation options')}</summary>
            
            <input for="" path="">/////". The "/" and "//" may be repeated and mixed`. The "///password" is optional and should only occur once.')}
              isError={!!deriveError}
              label={t('secret derivation path')}
              onChange={_onChangeDerive}
              onEnter={_onCommit}
              placeholder={t('//hard/soft///password')}
              value={derivePath}
            /&gt;
            {deriveError &amp;&amp; (
              <article>{deriveError}</article>
            )}
          </details>

className='full'
              help={t('Name given to this account. You can edit it. To use the account to validate or nominate, it is a good practice to append the function of the account in the name, e.g "name_you_want - stash".')}
              isDisabled={isTesting}
              isEditable={!isTesting}
              label={t('name')}
              onChange={this.onChangeName}
              value={editedName}
            />
          
          <div>
            
          </div>
          {this.renderTags()}
        
      
    );
  }

help={t('Should the search be case sensitive, e.g if you select "no" your search for "Some" may return addresses containing "somE" or "sOme"...')}
            isDisabled={isRunning}
            label={t('case sensitive')}
            options={BOOL_OPTIONS}
            onChange={this.onChangeCase}
            value={withCase}
          />
        
        <div>
          
        </div>
      
    );
  }

label={t('password')}
            onChange={_onChangePass}
            onEnter={_onCommit}
            value={password}
          />
          <details open="">
            <summary>{t('Advanced creation options')}</summary>
            
            <input for="" path="">/////". The "/" and "//" may be repeated and mixed`. The "///password" is optional and should only occur once.')}
              isError={!!deriveError}
              label={t('secret derivation path')}
              onChange={_onChangeDerive}
              onEnter={_onCommit}
              placeholder={t('//hard/soft///password')}
              value={derivePath}
            /&gt;
            {deriveError &amp;&amp; (
              <article>{deriveError}</article>
            )}
          </details>