text: /* @flow */
  import React, { useCallback } from "react";
  import { View, StyleSheet } from "react-native";
  import { useSelector } from "react-redux";
  import { Trans } from "react-i18next";
  import type { Operation } from "@ledgerhq/live-common/lib/types";
  import { accountScreenSelector } from "../../../reducers/accounts";
  import { TrackScreen } from "../../../analytics";
  import colors from "../../../colors";
  import { ScreenName } from "../../../const";
  import PreventNativeBack from "../../../components/PreventNativeBack";
  import ValidateSuccess from "../../../components/ValidateSuccess";
  
  type Props = {
    navigation: any,
    route: { params: RouteParams },
  };
  
  type RouteParams = {
    accountId: string,
    deviceId: string,
    transaction: any,
    result: Operation,
  };
  
  export default function ValidationSuccess({ navigation, route }: Props) {
    const { account } = useSelector(accountScreenSelector(route));
  
    const onClose = useCallback(() => {
      navigation.dangerouslyGetParent().pop();
    }, [navigation]);
  
    const goToOperationDetails = useCallback(() => {
      if (!account) return;
  
      const result = route.params?.result;
      if (!result) return;
  
      navigation.navigate(ScreenName.OperationDetails, {
        accountId: account.id,
        operation: result,
      });
    }, [account, route.params, navigation]);
  
    return (
      <View style={styles.root}>
        <TrackScreen category="CosmosDelegation" name="ValidationSuccess" />
        <PreventNativeBack />
        <ValidateSuccess
          onClose={onClose}
          onViewDetails={goToOperationDetails}
          title={
            <Trans i18nKey="cosmos.delegation.flow.steps.verification.success.title" />
          }
          description={
            <Trans i18nKey="cosmos.delegation.flow.steps.verification.success.text" />
          }
        />
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    root: {
      flex: 1,
      backgroundColor: colors.white,
    },
    button: {
      alignSelf: "stretch",
      marginTop: 24,
    },
    labelContainer: {
      alignItems: "center",
      justifyContent: "flex-end",
      padding: 16,
    },
    label: { fontSize: 12 },
    subLabel: { color: colors.grey },
  });
  