{"size": 2107, "ext": "js", "max_stars_repo_path": "src/renderer/screens/USBTroubleshooting/solutions/TryAnotherComputer.js", "max_stars_repo_name": "pitpite/ledger-live-desktop", "max_stars_repo_stars_event_min_datetime": "2018-04-30T14:59:56.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-29T22:21:50.000Z", "max_issues_repo_path": "src/renderer/screens/USBTroubleshooting/solutions/TryAnotherComputer.js", "max_issues_repo_name": "pitpite/ledger-live-desktop", "max_issues_repo_issues_event_min_datetime": "2018-04-20T09:59:28.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T16:44:52.000Z", "max_forks_repo_path": "src/renderer/screens/USBTroubleshooting/solutions/TryAnotherComputer.js", "max_forks_repo_name": "JunichiSugiura/ledger-live-desktop", "max_forks_repo_forks_event_min_datetime": "2018-04-20T14:59:59.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-27T14:57:37.000Z"}
{"max_stars_count": 1003, "max_issues_count": 2540, "max_forks_count": 354, "avg_line_length": 33.9838709677, "max_line_length": 88, "alphanum_fraction": 0.5562411011}
// @flow
import React, { useCallback } from "react";
import { Trans, useTranslation } from "react-i18next";
import { Wrapper, Illustration, Number, Title, Content, BulletRowIcon } from "./shared";
import Box from "~/renderer/components/Box";
import BulletRow from "~/renderer/components/BulletRow";
import Text from "~/renderer/components/Text";
import FakeLink from "~/renderer/components/FakeLink";
import { openURL } from "~/renderer/linking";

import illustration from "~/renderer/images/USBTroubleshooting/illus4.png";

const TryAnotherComputerSolution = ({ number = 1 }: { number?: number }) => {
  const { t } = useTranslation();
  const link = "https://ledger.com/ledger-live";
  const onClickLink = useCallback(() => {
    openURL(link);
  }, []);

  return (
    <Wrapper>
      <Number>{t("connectTroubleshooting.solution", { number })}</Number>
      <Title>{t("connectTroubleshooting.steps.2.anotherComputer.title")}</Title>
      <Content>
        <Illustration image={illustration} height={148} />
        <Box flex={2}>
          <Text mb={3} ff="Inter|SemiBold" color="palette.text.shade90" fontSize={5}>
            {t("connectTroubleshooting.followSteps")}
          </Text>
          <BulletRow
            step={{
              icon: <BulletRowIcon>1</BulletRowIcon>,
              desc: (
                <Text ff="Inter|Medium" fontSize={4}>
                  <Trans
                    i18nKey="connectTroubleshooting.steps.2.anotherComputer.bullets.0"
                    values={{ link }}
                  >
                    <FakeLink onClick={onClickLink} />
                  </Trans>
                </Text>
              ),
            }}
          />
          <BulletRow
            step={{
              icon: <BulletRowIcon>1</BulletRowIcon>,
              desc: (
                <Text ff="Inter|Medium" fontSize={4}>
                  {t("connectTroubleshooting.steps.2.anotherComputer.bullets.1")}
                </Text>
              ),
            }}
          />
        </Box>
      </Content>
    </Wrapper>
  );
};

export default TryAnotherComputerSolution;
