discord-decomp/modules/webauthn/native/nav_steps/PasskeyInitStep.tsx

// Metro module 13763 (f13764).
import { useState, useEffect, useLayoutEffect } from "react";
import { Image as Image2, View } from "react-native";
import WebAuthnStore from "../../WebAuthnStore";
import { WebAuthnScreens } from "../../WebAuthnConstants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useStateFromStoresObject } from "../../../../_bundle/Module589";
import Module13753 from "../../../../_bundle/Module13753";
import { Text } from "../../../../design/components/Text/native/Text";
import { intl, t } from "../../../../intl/index.native";
import { ButtonGroup } from "../../../../design/components/ButtonGroup/native/ButtonGroup.native";
import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
import { TrashIcon } from "../../../../design/components/Icon/native/redesign/generated/TrashIcon";
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
import { PencilIcon } from "../../../../design/components/Icon/native/redesign/generated/PencilIcon";
import { TableRowGroup } from "../../../../design/components/TableRow/native/TableRowGroup.native";
import { TableRow } from "../../../../design/components/TableRow/native/TableRow.native";
import { formatDate } from "../../../auth_sessions/AuthSessionsUtils";
import { useNavigation } from "../../../../design/components/Navigator/native/useNavigation.native";
import { fetchWebAuthnCredentials } from "../../WebAuthnActionCreators";
import { hasWebAuthn } from "../../../../utils/MFAUtils";
import { HeaderActionButton } from "../../../../design/components/Navigator/native/HeaderActionButton.native";
import { Form } from "../../../../design/void/Form/native/index";
import { HermesBuiltin } from "../../../../_hermes/prelude";
let useStyles;
const CredentialList = function CredentialList(props) {
  let styles, state, setState;
  const navigation = props.navigation;
  styles = void 0;
  state = void 0;
  setState = void 0;
  const credentials = useStateFromStoresObject([WebAuthnStore], () => ({
    credentials: WebAuthnStore.getCredentials()
  })).credentials;
  styles = useStyles();
  [state, setState] = useState(false);
  if (credentials.length === 0) {
    return <View style={styles.upsellContainer}>
      <Image2 source={Module13753} style={styles.keychainImage} />
      <Text variant="text-md/normal" style={styles.upsellText}>
        {intl.string(t.FSNwFW)}
      </Text>
    </View>;
  }
  return <TableRowGroup title={intl.string(t["4RIqrQ"])} hasIcons={false}>
    {credentials.map((a0) => {
      const credential = a0;
      return <TableRow key={a0.id} label={a0.name} trailing={<ButtonGroup style={styles.iconButtonGroup}>
        <IconButton variant="secondary" icon={<TrashIcon color={Module712.colors.TEXT_FEEDBACK_CRITICAL} />} accessibilityLabel={intl.string(t.N86XcP)} size="sm" disabled={state} loading={state} onPress={() => ActionSheetActionCreators.openLazy(import("../WebAuthnDeleteActionSheet"), "WEBAUTHN_DELETE_SHEET_KEY", {
          credential,
          deleting: state,
          setDeleting: setState
        })} />
        <IconButton variant="secondary" icon={<PencilIcon />} accessibilityLabel={intl.string(t.bt75uw)} size="sm" disabled={state} loading={state} onPress={() => {
          navigation.push(WebAuthnScreens.EDIT, {
            credential
          });
        }} />
      </ButtonGroup>} subLabel={a0.last_used != null ? intl.format(t["7JgxF5"], {
        lastUsed: formatDate(a0.last_used)
      }) : null} />;
    })}
  </TableRowGroup>;
};
useStyles = createStyles({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "space-between",
    marginLeft: Module712.space.PX_16,
    marginRight: Module712.space.PX_16,
    marginTop: Module712.space.PX_8
  },
  upsellContainer: {
    marginTop: Module712.space.PX_16,
    alignItems: "center"
  },
  upsellText: {
    color: Module712.colors.TEXT_SUBTLE,
    marginTop: Module712.space.PX_16,
    textAlign: "center"
  },
  iconButtonGroup: {
    flexDirection: "row",
    paddingVertical: Module712.space.PX_8
  },
  keychainImage: {
    height: 125,
    width: 161
  }
});
export default function PasskeyInitStep(props) {
  if (props == null) {
    HermesBuiltin.throwTypeError("Cannot destructure 'undefined' or 'null'.");
    throw new Error("unreachable");
  }
  const navigation2 = useNavigation();
  const styles2 = useStyles();
  const hasFetchedCredentials = useStateFromStoresObject([WebAuthnStore], () => ({
    hasFetchedCredentials: WebAuthnStore.hasFetchedCredentials()
  })).hasFetchedCredentials;
  useEffect(() => {
    if (!hasFetchedCredentials) {
      fetchWebAuthnCredentials();
    }
  }, [hasFetchedCredentials]);
  useLayoutEffect(() => {
    navigation2.setOptions({
      headerRight: () => {
        if (hasWebAuthn) {
          return <HeaderActionButton text={intl.string(t.OYkgVk)} onPress={() => {
            navigation2.push(WebAuthnScreens.REGISTER);
          }} foregroundRipple />;
        }
      }
    });
  }, [navigation2]);
  return <Form>
    <View style={styles2.container}>
      <CredentialList navigation={navigation2} />
    </View>
  </Form>;
};