react-i18next#Trans JavaScript Examples

DeckStatusSummary = ({ status }) => {
    let { basicRules, hasConjurations, tenDice, uniques } = status;
    let items = [
        { title: 'Basic rules (deck size)', value: basicRules },
        { title: 'Conjurations included', value: hasConjurations },
        { title: 'Ten dice', value: tenDice },
        { title: 'Phoenixborn unique cards', value: uniques }
    ];

    return (
        <ul className='deck-status-summary'>
            {items.map((item, index) => (
                <li className={item.value ? 'valid' : 'invalid'} key={index}>
                    <FontAwesomeIcon icon={item.value ? faCheck : faTimes} />
                    &nbsp;<Trans>{item.title}</Trans>
                </li>
            ))}
        </ul>
    );
}

HealthLogToggle = props => {
  const { toggleValue, setToggleValue, setDetailData } = props;
  const classes = useStyles();

  const onShowMeMoreClick = () => {
    setDetailData([]);
    setToggleValue('showMeMore');
  };

  return (
    <div>
      <div>
        <ButtonGroup size="medium" aria-label="outlined button group">
          <Button onClick={() => setToggleValue('myHealthLog')} className={classes.buttons}>
            <Trans i18nKey="logSection.text.showLog.myHealthLog" />
          </Button>
          <Button onClick={onShowMeMoreClick} className={classes.buttons}>
            <Trans i18nKey="logSection.text.showMore.showMeMore" />
          </Button>
        </ButtonGroup>
      </div>
      {toggleValue === 'myHealthLog' && <MyHealthLog />}
      {toggleValue === 'showMeMore' && <ShowMeMore />}
    </div>
  );
}

function Navbar() {
  const classes = useStyles()

  // Get auth from redux state
  const auth = useSelector(({ firebase }) => firebase.auth)
  const authExists = isLoaded(auth) && !isEmpty(auth)

  return (
    <NavbarWithoutAuth brandPath="/">
      {authExists ? (
        <AccountMenu />
      ) : (
        <Button
          className={classes.signIn}
          component={Link}
          to={LOGIN_PATH}
          color="secondary"
          data-test="sign-in">
          <Trans>Sign In</Trans>
        </Button>
      )}
    </NavbarWithoutAuth>
  )
}

QRButton = React.forwardRef(({config={}, ...props}, ref) => {
  const { t } = useTranslation();
  return <QRButtonEng ref={ref} {...props} config={
    {
      title: <Trans i18nKey="qr_button.title"><span>Scan this QR code <br /> with your mobile phone</span></Trans>,
      downloadTitle: t("qr_button.download_title", "Download Obyte wallet"),
      tooltip: t("qr_button.tooltip", "This will open your Obyte wallet installed on this computer and send the transaction"),
      tooltipMobile: t("qr_button.tooltip_mob", "Send the transaction from your mobile phone"),
      install: t("qr_button.install", "Install Obyte wallet for [ios] or [android] if you don't have one yet"),
      obyteIn: t("qr_button.obyte_in", "Obyte in"),
      ...config
    }
  } />;
})

function NoAppointmentsAlert() {
    const { t } = useTranslation("main");
    return (
        <div role="status">
            <br />
            <Alert severity={"info"}>
                <AlertTitle>{t("no_appointments.title")}</AlertTitle>
                <p>
                    <Trans t={t} i18nKey="no_appointments.paragraph1">
                        None of the vaccine sites that we monitor currently have
                        available appointments. This website gathers data every
                        minute from COVID-19 vaccine sites across Massachusetts.
                    </Trans>
                </p>
                <p>
                    <Trans t={t} i18nKey="no_appointments.paragraph2">
                        Check back for updated information. For more information
                        on the vaccine rollout in Massachusetts, visit{" "}
                        <a
                            href="https://www.mass.gov/covid-19-vaccine"
                            target="_blank"
                            rel="noreferrer"
                        >
                            www.mass.gov/covid-19-vaccine
                        </a>
                        .
                    </Trans>
                </p>
            </Alert>
            <br />
        </div>
    );
}

Footer = () => {
  const disclaimerLink =
    'https://nquestionblob.blob.core.windows.net/images/' +
    'Full%20Disclaimer%20_%20Legal%20Information%20and%20Disclosures_%20Nth%20Opinion.pdf';

  /* eslint-disable jsx-a11y/anchor-has-content */
  return (
    <div className="footer-wrapper">
      <p>
        <Trans i18nKey="patientBoard:footer">
          <br />
          <br />
          <a href={disclaimerLink} target="_blank" rel="noopener noreferrer" />
        </Trans>
      </p>
    </div>
  );
}

EmptyProposalsList = () => {
  const { t } = useTranslation()

  return (
    <Card className='mb-6'>
      <img src={EmptyBox} className='mx-auto w-16 h-16 sm:w-auto sm:h-auto my-4 sm:my-8' />
      <h4 className='mt-4 mb-2 text-center text-accent-1'>{t('noActiveProposalsAtTheMoment')}</h4>
      <p className='text-center text-accent-1 mb-4 sm:mb-6'>
        <Trans
          i18nKey='discussIdeasOnDiscordOrDiscourse'
          components={{
            LinkToDiscord: (
              <ExternalLink
                theme={LinkTheme.light}
                underline
                href='https://discord.gg/hxPhPDW'
                title='Discord'
              />
            ),
            LinkToDiscourse: (
              <ExternalLink
                theme={LinkTheme.light}
                underline
                href='https://gov.pooltogether.com/'
                title='Discourse'
              />
            )
          }}
        />
      </p>
    </Card>
  )
}

V3Warning = (props) => {
  const { isDepositsEnabled } = props

  if (isDepositsEnabled) {
    return null
  }

  return (
    <div className='text-center bg-default rounded-lg mt-4 pt-4 pb-2 xs:py-4 px-4 text-orange'>
      <div className='flex flex-col xs:flex-row items-center justify-center'>
        <div className='mb-2 xs:mb-0 xs:mr-4'>
          <img className='shake' src={Bell} width='20' height='20' />
        </div>

        <span>
          <Trans
            i18nKey='v3BannerWarning'
            components={{
              a: (
                <a
                  href='http://app.pooltogether.com'
                  className='underline text-xs'
                  target='_blank'
                  rel='noopener noreferrer'
                />
              )
            }}
          />
        </span>
      </div>
    </div>
  )
}

getPlayers(game) {
        let firstPlayer = true;
        let players = Object.values(game.players).map((player) => {
            let classes = classNames('game-player-row', {
                'first-player': firstPlayer,
                'other-player': !firstPlayer
            });

            let retPlayer = (
                <div key={player.name} className={classes}>
                    <div>{this.getPlayerCards(player, firstPlayer, game.started)}</div>
                </div>
            );

            firstPlayer = false;

            return retPlayer;
        });

        if (players.length === 1) {
            if (this.canJoin(game)) {
                players.push(
                    <div key={players[0].name} className={'game-player-row other-player'}>
                        <div className='game-faction-row other-player'>
                            <button
                                className='btn btn-success gamelist-button img-fluid'
                                onClick={(event) => this.joinGame(event, game)}
                            >
                                <Trans>Join</Trans>
                            </button>
                        </div>
                    </div>
                );
            } else {
                players.push(
                    <div key={players[0].name} className='game-faction-row other-player' />
                );
            }
        }

        return players;
    }

WeeklyTrackerDay = props => {
  const { dayData, tempUnit } = props;
  const classes = useStyles();
  const date = new Date(dayData.date);

  return (
    <div className={classes.div}>
      <Grid container spacing={1} alignItems="center">
        <Grid item xs={1}>
          <Typography variant="body1" className={`${classes.bold} ${classes.rotated}`}>
            <Trans i18nKey="logSection.text.surveyDataSliderSelected.selected" />
          </Typography>
        </Grid>
        <Grid item xs={2} container>
          <Grid item xs={12}>
            <Typography variant="body1" className={classes.bold}>
              {date.toString().split(' ')[0]}
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="body1" className={classes.date}>
              {date.getDate()}
            </Typography>
          </Grid>
        </Grid>
        <Grid item xs={3} sm={4} container>
          <Grid item xs={12}>
            <Typography variant="body2">
              <Trans i18nKey="logSection.text.surveyDataSliderYouFelt.youSaidYouFelt" />
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="body1" className={`${classes.bold} ${classes.feeling}`}>
              {dayData.physical.dailyfeeling}/5
            </Typography>
          </Grid>
        </Grid>
        <Grid item xs={6} sm={5} container className={classes.textAlignLeft}>
          <Grid item xs={12}>
            <Typography variant="body2">
              <Trans i18nKey="logSection.text.surveyDataSliderTemperature.temperature" />
              :&nbsp;
              <strong>
                {dayData.physical.feverSeverity
                  ? `${dayData.physical.feverSeverity} ${String.fromCharCode(176)}${
                      tempUnit === 'fahrenheit' ? 'F' : 'C'
                    }`
                  : noDataText}
              </strong>
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="body2">
              <Trans i18nKey="logSection.text.surveyDataSliderSymptoms.symptoms" />
              &nbsp;
              <strong>
                {dayData.physical.dailySymptomsFeeling ? `${dayData.physical.dailySymptomsFeeling}/5` : noDataText}
              </strong>
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="body2" className={classes.ellipsis}>
              <Trans i18nKey="logSection.text.surveyDataSliderComments.comments" />
              &nbsp;
              <strong>{dayData.nonPhysical.openComment || noDataText}</strong>
            </Typography>
          </Grid>
          <Grid item xs={12}>
            <Typography variant="body2" className={classes.bold}>
              Swipe for Details &gt; &gt; &gt;
            </Typography>
          </Grid>
        </Grid>
      </Grid>
    </div>
  );
}

function LoginForm({ onSubmit }) {
  const classes = useStyles()
  const {
    register,
    handleSubmit,
    errors,
    formState: { isSubmitting, isValid }
  } = useForm({
    mode: 'onChange',
    nativeValidation: false
  })

  return (
    <form className={classes.root} onSubmit={handleSubmit(onSubmit)}>
      <TextField
        type="email"
        varient="outlined"
        name="email"
        label={<Trans>Your email here...</Trans>}
        margin="normal"
        fullWidth
        inputRef={register({
          required: true,
          validate: validateEmail
        })}
        error={!!errors.email}
        helperText={errors.email && <Trans>Email must be valid</Trans>}
      />
      <TextField
        type="password"
        varient="outlined"
        name="password"
        label={<Trans>Your password here...</Trans>}
        margin="normal"
        fullWidth
        inputRef={register({
          required: true
        })}
        error={!!errors.password}
        helperText={errors.password && <Trans>Password is required</Trans>}
      />
      <div className={classes.submit}>
        <Button
          color="primary"
          type="submit"
          variant="contained"
          disabled={isSubmitting || !isValid}>
          {isSubmitting ? <Trans>Loading</Trans> : <Trans>Login</Trans>}
        </Button>
      </div>
    </form>
  )
}

Localize = ({ translate_text, values, components }) => (
    <Trans defaults={translate_text} values={values} components={components} />
)

RedeemBothModal = ({ visible, onCancel }) => {

  const { activeWallet } = useSelector((state) => state.settings);
  const { address: carburetorAddress } = useSelector((state) => state.carburetor);
  const { symbol1, symbol2 } = useSelector((state) => state.active);
  const [pending, setPending] = useState(false);
  const { t } = useTranslation();

  useEffect(() => {
    let getCarburetor;
    if (pending) {
      getCarburetor = setInterval(() => {
        if (carburetorAddress) {
          clearInterval(getCarburetor);
          setPending(false);
        }
      }, 10 * 1000)
    }

    return () => {
      getCarburetor && clearInterval(getCarburetor);
    }
  }, [pending]);

  useEffect(() => {
    setPending(false);
  }, [activeWallet]);

  return (
    <Modal
      title={<b>{t("modals.redeem-both.modal_title", "Simultaneously redeem")}<sup>Beta</sup></b>}
      visible={visible}
      onCancel={onCancel}
      footer={null}
      size="large"
      width="800px"
    >
      <Text type="secondary">
        <Trans i18nKey="modals.redeem-both.desc" symbol1={symbol1 || "T1"} symbol2={symbol2 || "T2"}>
          To <b>simultaneously</b> redeem {{ symbol1: symbol1 || "T1" }} and {{ symbol2: symbol2 || "T2" }}, you need to
          <ul>
            <li>create an intermediary Autonomous Agent</li>
            <li>send {{ symbol1: symbol1 || "T1" }} and {{ symbol2: symbol2 || "T2" }} to the intermediary AA in two separate transactions.</li>
          </ul>
          <p>
            Once the AA has received both tokens, it will automatically redeem them in such a proportion that the fee is 0. Then, you'll be able to withdraw the excess amount of the token ({symbol1 || "T1"} or {symbol2 || "T2"}) that was not fully redeemed.
          </p>
        </Trans>
      </Text>

      {carburetorAddress ?
        <div>
          <Title level={4}>{t("modals.redeem-both.add_title", "Add tokens")}</Title>
          <AddTokensToCarburetor />
        </div> : <CreateCarburetor pending={pending} setPending={setPending} />}

      <div style={{ textAlign: "center", marginTop: 20 }}>
        <a href="https://github.com/Taump/redeem-both" target="_blank" rel="noopener">{t("modals.redeem-both.github", "Open github page with the AA source code")}</a>
      </div>
    </Modal>
  )
}

export default function AboutENS(props) {
  const { t } = useTranslation()
  return (
    <AboutENSContainer id="about-ens">
      <AnchorContainer href={"#about-ens"}>
        <h3>
          {t("about.aboutENS.title")}
          <Anchor />
        </h3>
      </AnchorContainer>

      <p className="prelede">
        <Trans i18nKey="about.aboutENS.text">
          Started at the Ethereum Foundation in early 2017, ENS spun off as a
          separate organization in 2018. ENS is managed by the Singaporean
          non-profit True Names LTD and is a{" "}
          <a href="https://medium.com/the-ethereum-name-service/who-should-own-the-naming-system-of-the-future-ens-as-a-public-good-10e4a0ab71d8">
            public good
          </a>
          , a basic piece of Internet infrastructure that belongs to the
          community. We welcome all feedback and contributions!
        </Trans>
      </p>

      <AnchorContainer href={"#about-tnl"}>
        <h3>
          {t("about.aboutTNL.title")}
          <Anchor />
        </h3>
      </AnchorContainer>

      <p className="prelede">
        <Trans i18nKey="about.aboutTNL.text"></Trans>
      </p>
      <Support>
        <List1>
          <p>{t("about.aboutENS.support")}</p>
          <Logos>
            {partners.map(logo => (
              <img src={logo.src.default} alt={logo.name} />
            ))}
          </Logos>
        </List1>
        <List2>
          <p>{t("about.aboutENS.support2")}</p>

          <Logos>
            {associated.map(logo => (
              <img src={logo.src.default} alt={logo.name} />
            ))}
          </Logos>
        </List2>
      </Support>
    </AboutENSContainer>
  )
}

export default function Custom404() {
  const router = useRouter()
  const {t} = useTranslation()
  return (
    <Flex h="100vh" direction="column">
      <Flex flexGrow={1} align="center" justify="center" direction="column">
        <Stack spacing="60px">
          <Image ignoreFallback src="/static/idena-logo-circle.svg" h={16} />
          <Image ignoreFallback src="/static/404.jpg" h="180px" />
          <Flex
            fontSize="lg"
            color="gray.500"
            fontWeight="500"
            align="center"
            direction="column"
          >
            <Text>{t('The screen you were looking for doesn’t exist.')}</Text>
            <Text>{t('Return to homepage or explore')}</Text>
          </Flex>
        </Stack>

        <PrimaryButton mt={7} onClick={() => router.push('/home')}>
          {t('Back to My Idena')}
        </PrimaryButton>
      </Flex>
      <Flex justify="center" mb="45px">
        <Trans i18nKey="notFoundContactUs" t={t}>
          <Text color="muted" fontSize="md">
            If you have troubles, please{' '}
            <Link href="mailto:[email protected]" color="blue.500">
              contact us
            </Link>
          </Text>
        </Trans>
      </Flex>
    </Flex>
  )
}

AboutModal = ({ show, setShow }) => {
  const { t } = useTranslation();

  return (
    <Modal
      title={t("About")}
      setShow={setShow}
      show={show}
      footer={
        <div style={{ display: "flex", justifyContent: "end" }}>
          <button
            onClick={() => {
              setShow(false);
            }}
            className="button"
          >
            {t("Close")}
          </button>
        </div>
      }
    >
      <Trans i18nKey="about">
        <p>
          Air Board Game is a plateform designed to play any board games with
          your friends online. For more information or to access source code
          visit <a href="https://github.com/jrmi/airboardgame">Github</a>.
        </p>
        <h3>Legal mentions</h3>
        <p>
          This site is hosted by Netlify (San Franscico, US) and OVH (2, rue
          Kellermann, 59100 Roubaix)
        </p>
        <h3>Abuse report</h3>
        <p>
          To report abuse, please email at abu
          <span style={{ display: "none" }}>anti-span</span>
          [email protected]
        </p>
        <h3>RGPD</h3>
        <p>
          No personnal data are collected. When you use your email to login,
          this information is lost and not used for anything else than sending
          you an authentication link.
        </p>
        <h3>Credits</h3>
        <p>Thanks to everybody !</p>
      </Trans>
    </Modal>
  );
}

function ResourcesDialog(props) {
    const { t } = useTranslation("main");
    return (
        <Dialog {...props}>
            <DialogTitle id="about-dialog-title">
                {t("resources.title")}
            </DialogTitle>
            <DialogContent>
                <DialogContentText
                    id="about-dialog-description"
                    component="div"
                >
                    <p>{t("resources.other_sites")}</p>
                    <ul>
                        <li>
                            <Trans ns="main" i18nKey="resources.vaccinate_ma">
                                <a
                                    href="https://vaccinatema.com"
                                    target="_blank"
                                    rel="noreferrer"
                                >
                                    Vaccinate MA
                                </a>{" "}
                                (volunteer-run)
                            </Trans>
                        </li>
                        <li>
                            <Trans ns="main" i18nKey="resources.vaxfinder">
                                <a
                                    href="https://vaxfinder.mass.gov"
                                    target="_blank"
                                    rel="noreferrer"
                                >
                                    Vax Finder
                                </a>{" "}
                                (state-run)
                            </Trans>
                        </li>
                    </ul>
                    <p>
                        <Trans ns="main" i18nKey="resources.more_information">
                            For more information on the vaccine rollout in
                            Massachusetts, visit{" "}
                            <a
                                href="https://www.mass.gov/covid-19-vaccine"
                                target="_blank"
                                rel="noreferrer"
                            >
                                www.mass.gov/covid-19-vaccine
                            </a>
                            .
                        </Trans>
                    </p>
                </DialogContentText>
            </DialogContent>
        </Dialog>
    );
}

ErrorLoadingProposalsList = () => (
  <div className='w-full flex flex-col justify-center p-12 sm:p-24 text-center'>
    <FeatherIcon icon='alert-triangle' className='w-12 h-12 mb-4 text-orange mx-auto' />
    <p>
      <Trans i18nKey='errorLoadingProposals' />
    </p>
  </div>
)

AccountUI = () => {
  const { t } = useTranslation()

  const { address: usersAddress } = useOnboard()

  const router = useRouter()
  const playerAddress = router?.query?.playerAddress
  const address = playerAddress || usersAddress

  const [isSelf, setIsSelf] = useAtom(isSelfAtom)

  useEffect(() => {
    const addressMatches = usersAddress?.toLowerCase() === playerAddress?.toLowerCase()
    let isSelf = playerAddress ? addressMatches : router?.pathname === '/account'
    setIsSelf(isSelf)
  }, [playerAddress, usersAddress])

  const pageTitle = isSelf ? (
    t('myAccount')
  ) : (
    <Trans
      i18nKey='playerAddressWithLabel'
      defaults='Player <label>{{address}}</label>'
      components={{
        label: (
          <PlayerLabel
            id={`tooltip-playerLabel-${playerAddress}-accountUi`}
            playerAddress={playerAddress}
          />
        ),
        address: playerAddress
      }}
    />
  )

  const addressError = testAddress(address)

  const isAddressAPod = useIsAddressAPod(address)

  return (
    <>
      <Meta title={isSelf ? t('myAccount') : t('playerAddress', { address })} />

      {isSelf && <RetroactivePoolClaimBanner />}

      <PageTitleAndBreadcrumbs
        Link={Link}
        title={pageTitle}
        breadcrumbs={[
          {
            name: t('accountOverview')
          }
        ]}
      />

      {!address ? (
        <AccountSummary />
      ) : addressError ? (
        <h6 className='text-orange my-4 font-normal'>
          There was an issue with the address provided: {playerAddress}
        </h6>
      ) : (
        <>
          <AccountSummary />

          <AccountDeposits />

          {!isAddressAPod && <AccountTokenFaucets />}

          <AccountLootBoxes />

          <AccountWinnings />
        </>
      )}
    </>
  )
}

function UnsupportedCheck() {
  const { setForcedView } = useContext(store);
  const { palette } = useTheme();
  const { t } = useTranslation("translation");
  const theme = {
    container: {
      display: "flex",
      background: palette.primary.main,
      justifyContent: "center",
      alignItems: "center",
      minHeight: "100vh",
      overflowY: "auto",
    },
  };
  return (
    <div style={theme.container}>
      <Paper
        variant="outlined"
        style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "24px",
          overflowY: "auto",
        }}
      >
        <Typography variant="h4" gutterBottom={true}>
          {t("Unsupported browser title")}
        </Typography>
        <Typography variant="h6" gutterBottom={true} align={"center"}>
          <Trans t={t} i18nKey="Unsupported browser description"></Trans>
        </Typography>

        <Trans t={t} i18nKey="Unsupported browser help">
          Unsupported browser help
          <Typography variant="subtitle1">Unsupported browser help</Typography>
          <Button
            variant="contained"
            color="primary"
            size="large"
            style={{ fontWeight: 600 }}
            type="submit"
            onClick={() =>
              window.open("https://www.google.com/chrome/", "_blank")
            }
            disabled={false}
          >
            "download"
          </Button>
          <Typography variant="body2">Unsupported browser help</Typography>
          <Button
            variant="contained"
            color="primary"
            size="small"
            style={{ fontWeight: 600 }}
            type="submit"
            onClick={() => setForcedView(CONSTANTS.ADVANCED_VIEW)}
            disabled={false}
          >
            "advanced"
          </Button>
        </Trans>
      </Paper>
    </div>
  );
}

render() {
        if (Object.values(this.props.cards).length === 0 || !this.props.currentGame?.started) {
            return (
                <div>
                    <Trans>Waiting for server...</Trans>
                </div>
            );
        }

        if (!this.props.user) {
            this.props.navigate('/');
            return (
                <div>
                    <Trans>You are not logged in, redirecting...</Trans>
                </div>
            );
        }

        let spectating = !this.props.currentGame.players[this.props.user.username];
        let thisPlayer = this.props.currentGame.players[this.props.user.username];
        if (!thisPlayer) {
            thisPlayer = Object.values(this.props.currentGame.players)[0];
        }

        if (!thisPlayer) {
            return (
                <div>
                    <Trans>Waiting for game to have players or close...</Trans>
                </div>
            );
        }

        let otherPlayer = Object.values(this.props.currentGame.players).find((player) => {
            return player.name !== thisPlayer.name;
        });

        // Default any missing information
        thisPlayer = this.defaultPlayerInfo(thisPlayer);
        otherPlayer = this.defaultPlayerInfo(otherPlayer);

        let boundActionCreators = bindActionCreators(actions, this.props.dispatch);

        let boardClass = classNames('game-board', {
            'select-cursor': thisPlayer && thisPlayer.selectCard
        });

        let manualMode = this.props.currentGame.manualMode;
        let cardToZoom;

        if (this.props.cardToZoom && this.props.cards[this.props.cardToZoom.code]) {
            cardToZoom = this.props.cards[this.props.cardToZoom.code];
        } else if (this.props.cardToZoom) {
            cardToZoom = this.props.cardToZoom;
        }

        return (
            <div className={boardClass}>
                {this.state.showModal && (
                    <GameConfigurationModal
                        optionSettings={thisPlayer.optionSettings}
                        onOptionSettingToggle={this.onOptionSettingToggle.bind(this)}
                        onClose={() => this.setState({ showModal: false })}
                    />
                )}
                <div className='stats-top'>
                    <PlayerStats
                        stats={otherPlayer.stats}
                        user={otherPlayer.user}
                        activePlayer={otherPlayer.activePlayer}
                        actions={otherPlayer.actions}
                        firstPlayer={otherPlayer.firstPlayer}
                        phoenixborn={otherPlayer.phoenixborn}
                    />
                </div>
                <div className='main-window'>
                    {thisPlayer.optionSettings.leftPrompt && this.getPromptArea(thisPlayer)}

                    {this.renderBoard(thisPlayer, otherPlayer)}
                    {cardToZoom && (
                        <CardZoom
                            imageUrl={cardToZoom.imageUrl ? imageUrl(cardToZoom.imageUrl) : ''}
                            cardName={cardToZoom ? cardToZoom.name : null}
                            card={cardToZoom}
                        />
                    )}
                    {this.state.showManualCommands && (
                        <div className='info-panel'>
                            <MovablePanel
                                title='Manual Commands'
                                name='Manual'
                                onCloseClick={this.onManualCommandsClick}
                                side='bottom'
                            >
                                <ManualCommands />
                            </MovablePanel>
                        </div>
                    )}
                    {this.state.showDiceHistory && (
                        <div>
                            <DiceHistory
                                firstFive={thisPlayer.firstFive}
                                diceHistory={thisPlayer.diceHistory}
                                onCloseClick={this.onDiceHistoryClick}
                                side='bottom'
                            />
                        </div>
                    )}
                    <div className='right-side'>
                        {!thisPlayer.optionSettings.leftPrompt && this.getPromptArea(thisPlayer)}

                        {this.state.showMessages && (
                            <div className='gamechat'>
                                <GameChat
                                    key='gamechat'
                                    messages={this.props.currentGame.messages}
                                    onCardMouseOut={this.onMouseOut}
                                    onCardMouseOver={this.onMouseOver}
                                    onSendChat={this.sendChatMessage}
                                    muted={spectating && this.props.currentGame.muteSpectators}
                                />
                            </div>
                        )}
                    </div>
                </div>
                <div>
                    <PlayerStats
                        {...boundActionCreators}
                        activePlayer={thisPlayer.activePlayer}
                        bluffTimer={thisPlayer.optionSettings.bluffTimer}
                        manualModeEnabled={manualMode}
                        matchRecord={this.getMatchRecord(thisPlayer, otherPlayer)}
                        muteSpectators={this.props.currentGame.muteSpectators}
                        numMessages={this.state.newMessages}
                        onManualModeClick={this.onManualModeClick}
                        onMessagesClick={this.onMessagesClick}
                        onMuteClick={this.onMuteClick}
                        onSettingsClick={this.onSettingsClick}
                        showControls={!spectating && manualMode}
                        showManualMode={!spectating}
                        showMessages
                        stats={thisPlayer.stats}
                        user={thisPlayer.user}
                        actions={thisPlayer.actions}
                        firstPlayer={thisPlayer.firstPlayer}
                        onDiceHistoryClick={this.onDiceHistoryClick}
                        onManualCommandsClick={this.onManualCommandsClick}
                        phoenixborn={thisPlayer.phoenixborn}
                    />
                </div>
            </div>
        );
    }

render () {
    return (
      <nav className="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div className="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
          <Link className="navbar-brand brand-logo" to="/"><img src={require('../../assets/images/logo.svg')} alt="logo" /></Link>
          <Link className="navbar-brand brand-logo-mini" to="/"><img src={require('../../assets/images/logo-mini.svg')} alt="logo" /></Link>
        </div>
        <div className="navbar-menu-wrapper d-flex align-items-stretch">
          <button className="navbar-toggler navbar-toggler align-self-center" type="button" onClick={ () => document.body.classList.toggle('sidebar-icon-only') }>
            <span className="mdi mdi-menu"></span>
          </button>
          <div className="search-field d-none d-md-block">
            <form className="d-flex align-items-center h-100" action="#">
              <div className="input-group">
                <div className="input-group-prepend bg-transparent">
                  <i className="input-group-text border-0 mdi mdi-magnify"></i>
                </div>
                <input type="text" className="form-control bg-transparent border-0" placeholder="Search projects"/>
              </div>
            </form>
          </div>
          <ul className="navbar-nav navbar-nav-right">
            <li className="nav-item nav-profile">
              <Dropdown alignRight>
                <Dropdown.Toggle className="nav-link">
                  <div className="nav-profile-img">
                    <img src={require("../../assets/images/faces/face1.jpg")} alt="user"/>
                    <span className="availability-status online"></span>
                  </div>
                  <div className="nav-profile-text">
                    <p className="mb-1 text-black"><Trans>David Greymaax</Trans></p>
                  </div>
                </Dropdown.Toggle>

                <Dropdown.Menu className="navbar-dropdown">
                  <Dropdown.Item href="!#" onClick={evt =>evt.preventDefault()}>
                    <i className="mdi mdi-cached mr-2 text-success"></i>
                    <Trans>Activity Log</Trans>
                  </Dropdown.Item>
                  <Dropdown.Item href="!#" onClick={evt =>evt.preventDefault()}>
                    <i className="mdi mdi-logout mr-2 text-primary"></i>
                    <Trans>Signout</Trans>
                  </Dropdown.Item>
                </Dropdown.Menu>
              </Dropdown>
            </li>
            <li className="nav-item">
              <Dropdown alignRight>
                <Dropdown.Toggle className="nav-link count-indicator">
                  <i className="mdi mdi-email-outline"></i>
                  <span className="count-symbol bg-warning"></span>
                </Dropdown.Toggle>

                <Dropdown.Menu className="preview-list navbar-dropdown">
                  <h6 className="p-3 mb-0"><Trans>Messages</Trans></h6>
                  <div className="dropdown-divider"></div>
                  <Dropdown.Item className="dropdown-item preview-item" onClick={evt =>evt.preventDefault()}>
                    <div className="preview-thumbnail">
                      <img src={require("../../assets/images/faces/face4.jpg")} alt="user" className="profile-pic"/>
                    </div>
                    <div className="preview-item-content d-flex align-items-start flex-column justify-content-center">
                      <h6 className="preview-subject ellipsis mb-1 font-weight-normal"><Trans>Mark send you a message</Trans></h6>
                      <p className="text-gray mb-0">
                        1 <Trans>Minutes ago</Trans>
                      </p>
                    </div>
                  </Dropdown.Item>
                  <div className="dropdown-divider"></div>
                  <Dropdown.Item className="dropdown-item preview-item" onClick={evt =>evt.preventDefault()}>
                    <div className="preview-thumbnail">
                      <img src={require("../../assets/images/faces/face2.jpg")} alt="user" className="profile-pic"/>
                    </div>
                    <div className="preview-item-content d-flex align-items-start flex-column justify-content-center">
                      <h6 className="preview-subject ellipsis mb-1 font-weight-normal"><Trans>Cregh send you a message</Trans></h6>
                      <p className="text-gray mb-0">
                        15 <Trans>Minutes ago</Trans>
                      </p>
                    </div>
                  </Dropdown.Item>
                  <div className="dropdown-divider"></div>
                  <Dropdown.Item className="dropdown-item preview-item" onClick={evt =>evt.preventDefault()}>
                    <div className="preview-thumbnail">
                      <img src={require("../../assets/images/faces/face3.jpg")} alt="user" className="profile-pic"/>
                    </div>
                    <div className="preview-item-content d-flex align-items-start flex-column justify-content-center">
                      <h6 className="preview-subject ellipsis mb-1 font-weight-normal"><Trans>Profile picture updated</Trans></h6>
                      <p className="text-gray mb-0">
                        18 <Trans>Minutes ago</Trans>
                      </p>
                    </div>
                  </Dropdown.Item>
                  <div className="dropdown-divider"></div>
                  <h6 className="p-3 mb-0 text-center cursor-pointer">4 <Trans>new messages</Trans></h6>
                </Dropdown.Menu>
              </Dropdown>
            </li>
            <li className="nav-item">
              <Dropdown alignRight>
                <Dropdown.Toggle className="nav-link count-indicator">
                  <i className="mdi mdi-bell-outline"></i>
                  <span className="count-symbol bg-danger"></span>
                </Dropdown.Toggle>
                <Dropdown.Menu className="dropdown-menu navbar-dropdown preview-list">
                  <h6 className="p-3 mb-0"><Trans>Notifications</Trans></h6>
                  <div className="dropdown-divider"></div>
                  <Dropdown.Item className="dropdown-item preview-item" onClick={evt =>evt.preventDefault()}>
                    <div className="preview-thumbnail">
                      <div className="preview-icon bg-success">
                        <i className="mdi mdi-calendar"></i>
                      </div>
                    </div>
                    <div className="preview-item-content d-flex align-items-start flex-column justify-content-center">
                      <h6 className="preview-subject font-weight-normal mb-1"><Trans>Event today</Trans></h6>
                      <p className="text-gray ellipsis mb-0">
                      <Trans>Just a reminder that you have an event today</Trans>
                      </p>
                    </div>
                  </Dropdown.Item>
                  <div className="dropdown-divider"></div>
                  <Dropdown.Item className="dropdown-item preview-item" onClick={evt =>evt.preventDefault()}>
                    <div className="preview-thumbnail">
                      <div className="preview-icon bg-warning">
                        <i className="mdi mdi-settings"></i>
                      </div>
                    </div>
                    <div className="preview-item-content d-flex align-items-start flex-column justify-content-center">
                      <h6 className="preview-subject font-weight-normal mb-1"><Trans>Settings</Trans></h6>
                      <p className="text-gray ellipsis mb-0">
                      <Trans>Update dashboard</Trans>
                      </p>
                    </div>
                  </Dropdown.Item>
                  <div className="dropdown-divider"></div>
                  <Dropdown.Item className="dropdown-item preview-item" onClick={evt =>evt.preventDefault()}>
                    <div className="preview-thumbnail">
                      <div className="preview-icon bg-info">
                        <i className="mdi mdi-link-variant"></i>
                      </div>
                    </div>
                    <div className="preview-item-content d-flex align-items-start flex-column justify-content-center">
                      <h6 className="preview-subject font-weight-normal mb-1"><Trans>Launch Admin</Trans></h6>
                      <p className="text-gray ellipsis mb-0">
                      <Trans>New admin wow</Trans>!
                      </p>
                    </div>
                  </Dropdown.Item>
                  <div className="dropdown-divider"></div>
                  <h6 className="p-3 mb-0 text-center cursor-pointer"><Trans>See all notifications</Trans></h6>
                </Dropdown.Menu>
              </Dropdown>
            </li>
            <li className="nav-item nav-logout d-none d-lg-block">
              <a className="nav-link" href="!#" onClick={event => event.preventDefault()}>
                <i className="mdi mdi-power"></i>
              </a>
            </li>
            <li className="nav-item nav-settings d-none d-lg-block">
              <button type="button" className="nav-link border-0" onClick={this.toggleRightSidebar} >
                <i className="mdi mdi-format-line-spacing"></i>
              </button>
            </li>
          </ul>
          <button className="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" onClick={this.toggleOffcanvas}>
            <span className="mdi mdi-menu"></span>
          </button>
        </div>
      </nav>
    );
  }

Disclaimer = props => {
  const { userSession } = useBlockstack();
  const { answer } = props;
  const history = useHistory();

  const disclaimerAnswerJSON = {
    answerChoice: null,
  };

  const storeAnswer = ans => {
    disclaimerAnswerJSON.answerChoice = ans;
    props.setAnswer(ans, disclaimerAnswerJSON, userSession);

    // Navigate to onboarding screen if user agrees to disclaimer
    if (ans) {
      history.push('/onboard');
    }
  };

  const classes = useStyles();
  return (
    <div>
      {!answer ? (
        <Dialog open aria-describedby="disclaimer">
          <DialogTitle align="center" id="alert-dialog-title">
            <object title="logo" className={classes.logo} data={Logo} type="image/svg+xml" />
            <object title="logoText" className={classes.textLogo} data={TextLogo} type="image/svg+xml" />
          </DialogTitle>
          <DialogContent>
            <DialogContent align="left" id="disclaimer-text">
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.byClickingIAgreeYouConfirmThatYouHaveReadThePrivacyPolicyAndTermsOfUseThatYouUnderstandThemAndThatYouAgreeToBeBoundByThemYouShouldCarefullyReadTheLinkedTermsOfUseAndPrivacyPolicyBeforeUsingTheCoronatrackerApp" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.byCreatingAnAccountAndUsingTheAppYouAreConsentingToBeBoundByTheTermsOfUseAndPrivacyPolicyIfYouDoNotAgreeToAllOfTheTermsDoNotLogOnOrUseTheApp" />
              </Typography>
              <Trans i18nKey="disclaimerSection.text.disclaimerValue.byContinuingToUseTheServicesYouAgreeAsFollows" />
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.anyInformationThatWeCollectThroughYourUseOfTheServicesIsSubjectToTheCoronatrackerPrivacyPolicyWhichIsPartOfTheseTermsOfUse" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.youAreAtLeast18YearsOldOrHaveBeenLegallyEmancipated" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.youUnderstandAndAgreeThatTheseTermsAreALegallyBindingAgreementAndTheEquivalentOfASignedWrittenContract" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.youWillUseTheServicesInAMannerConsistentWithApplicableLawsAndRegulationsAndTheseTermsOfUseAsTheyMayBeAmendedByCoronatrackerFromTimeToTime" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.youAreAResidentOfTheUnitedStatesAndAreNotAnEuDataCitizenForPurposesOfTheEuGeneralDataProtectionRegulationAndYouUnderstandAcceptAndHaveReceivedTheseTermsAndThePrivacyPolicyAndAcknowledgeThatYouCanAccessTheTermsAtAnyTimeHereAndThePrivacyPolicyAtAnyTimeHere" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.ifYouDoNotAgreeWithAndAcceptTheTermsAndOrPrivacyPolicyDoNotLogIntoTheAppAndImmediatelyDeleteAllFilesIfAnyAssociatedWithTheAccompanyingServicesAndMaterialsFormYourComputerOrMobileDevice" />
              </Typography>
              <Typography>
                <Trans i18nKey="disclaimerSection.text.disclaimerValue.medicalAdviceDisclaimerTheCoronatrackerAppAndCoronatrackerAreNotProvidingYouWithMedicalAdviceOfAnyKindTheAppCannotAndIsNotDesignedIntendedOrAppropriateToReplaceTheRelationshipBetweenYouAndAHealthCareProfessionalOrToAddressSeriousEmergentOrLifeThreateningMedicalConditionsAndShouldNotBeUsedInThoseCircumstancesYouShouldAlwaysCheckWithYourHealthcareProfessionalIfYouHaveAnyConcernsAboutYourConditionOrTreatmentAndBeforeTakingOrNotTakingAnyActionOnTheBasisOfAnyContentOnTheApp" />
              </Typography>
              <Typography>
                ARBITRATION NOTICE: EXCEPT IF YOU OPT-OUT AND EXCEPT FOR CERTAIN TYPES OF DISPUTES DESCRIBED IN THE
                ARBITRATION SECTION BELOW, YOU AGREE THAT DISPUTES BETWEEN YOU AND MAWI HEALTH WILL BE RESOLVED BY
                BINDING, INDIVIDUAL ARBITRATION. BY CONTINUING TO USE THE SERVICES, AND UNLESS YOU OPT-OUT, YOU WAIVE
                YOUR RIGHT TO PARTICIPATE IN A CLASS ACTION LAWSUIT OR CLASS-WIDE ARBITRATION. YOU CAN OPT-OUT OF THE
                ARBITRATION AGREEMENT BY CONTACTING [email protected] WITHIN 30 DAYS OF ACCEPTING THESE TERMS.
              </Typography>
            </DialogContent>
            <DialogActions>
              <Button variant="outlined" onClick={() => storeAnswer(true)}>
                <Trans i18nKey="disclaimerSection.text.buttonAgree.iAgree" />
              </Button>
              <Button variant="outlined" onClick={() => storeAnswer(false)}>
                <Trans i18nKey="disclaimerSection.text.disagree.iDonTAgree" />
              </Button>
            </DialogActions>
            <Link href="https://coronatracker.me/privacy-policy">Privacy Policy</Link>
            <Link href="https://coronatracker.me/terms-of-use">Terms of Use</Link>
          </DialogContent>
        </Dialog>
      ) : null}
    </div>
  );
}

function AccountMenu() {
  const classes = useStyles()
  const [anchorEl, setMenu] = useState(null)
  const history = useHistory()
  const firebase = useFirebase()

  function closeAccountMenu(e) {
    setMenu(null)
  }
  function handleMenu(e) {
    setMenu(e.target)
  }
  function handleLogout() {
    closeAccountMenu()
    // redirect to '/' handled by UserIsAuthenticated HOC
    return firebase.logout()
  }
  function goToAccount() {
    closeAccountMenu()
    history.push(ACCOUNT_PATH)
  }
  function gotoNeeds() {
    history.push(NEEDS_PATH)
  }
  function gotoAbout() {
    history.push(ABOUT_PATH)
  }

  return (
    <>
      <div>
        <Button
          className={classes.buttonCollapse}
          aria-owns={anchorEl ? 'my-needs' : null}
          aria-haspopup="false"
          onClick={gotoAbout}>
          <EmojiObjectsIcon className={classes.icon} />
        </Button>
        <Button
          className={classes.buttonCollapse}
          aria-owns={anchorEl ? 'my-needs' : null}
          aria-haspopup="false"
          onClick={gotoNeeds}>
          <AssignmentIcon className={classes.icon} />
        </Button>
        <Button
          className={classes.buttonCollapse}
          aria-owns={anchorEl ? 'menu-appbar' : null}
          aria-haspopup="true"
          onClick={handleMenu}>
          <AccountCircle className={classes.icon} />
        </Button>
      </div>

      <div>
        <Button
          className={classes.button}
          aria-owns={anchorEl ? 'my-needs' : null}
          aria-haspopup="false"
          onClick={gotoAbout}>
          <Trans>About</Trans>
          <EmojiObjectsIcon className={classes.icon} />
        </Button>
        <Button
          className={classes.button}
          aria-owns={anchorEl ? 'my-needs' : null}
          aria-haspopup="false"
          onClick={gotoNeeds}>
          <Trans>My Requests</Trans>
          <AssignmentIcon className={classes.icon} />
        </Button>
        <Button
          className={classes.button}
          aria-owns={anchorEl ? 'menu-appbar' : null}
          aria-haspopup="true"
          onClick={handleMenu}>
          <Trans>My Account</Trans>
          <AccountCircle className={classes.icon} />
        </Button>
      </div>

      <Menu
        id="menu-appbar"
        anchorEl={anchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={Boolean(anchorEl)}
        onClose={closeAccountMenu}>
        <MenuItem onClick={goToAccount}>
          <Trans>Account Settings</Trans>
        </MenuItem>
        <MenuItem onClick={handleLogout}>
          <Trans>Sign Out</Trans>
        </MenuItem>
      </Menu>
    </>
  )
}

PhoneNumberInput = forwardRef(({ onSendPin, onPressFlag }, ref) => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const { createAlert } = useAlert();
  const phoneInputRef = useRef();
  const numberInputRef = useRef();

  const [tosAccepted, setTosAccepted] = useState(false);
  const dimensions = useWindowDimensions();
  const fontScale = isNaN(dimensions.fontScale) ? 1 : dimensions.fontScale;
  const inputHeight = scale(fontScale <= 1 ? 50 : 50 * Math.min(fontScale, 2));
  const { t, i18n } = useTranslation();

  useImperativeHandle(ref, () => ({
    onSelectCountry,
    phoneNumberInputFocus,
    cca2,
  }));

  const onChangePhoneNumber = phoneNumber => {
    dispatch({ type: 'updatePhoneNumber', phoneNumber });
  };

  const onChangeCallingCode = callingCode => {
    dispatch({ type: 'updateCallingCode', callingCode });
  };

  function onSelectCountry({ cca2, callingCode }) {
    phoneInputRef.current.selectCountry(cca2.toLowerCase());
    dispatch({ type: 'updateLocation', cca2, callingCode });
  }

  const phoneNumberInputFocus = () => {
    numberInputRef?.current?.focus();
  };

  const cca2 = () => state.cca2;

  const acceptTOS = () => {
    setTosAccepted(!tosAccepted);
  };

  const openPP = () => {
    WebBrowser.openBrowserAsync(privacyUrls[i18n.language] || privacyUrls.en);
  };

  const getPinNumber = async () => {
    const { phoneNumber } = state;
    const countryCode = phoneInputRef.current;

    if (!isValid(countryCode.getCountryCode(), phoneNumber)) {
      createAlert({
        message: t('phoneValidationMessage'),
        type: 'error',
      });
      return;
    }

    try {
      const pinToken = await getPin(countryCode.getCountryCode(), phoneNumber);
      onSendPin(countryCode.getCountryCode(), phoneNumber, pinToken);
    } catch (error) {
      createAlert({
        message: t('genericErrorMessage'),
        type: 'error',
      });
    }
  };

  const linkHitSlop = {
    top: linkTouchPadding,
    right: linkTouchPadding,
    bottom: linkTouchPadding,
    left: linkTouchPadding,
  };

  const Link = ({ children, onPress }) => {
    return (
      <TouchableWithoutFeedback onPress={onPress} hitSlop={linkHitSlop}>
        <TOSLink>{children[0]}</TOSLink>
      </TouchableWithoutFeedback>
    );
  };

  return (
    <>
      <Vertical unit={1} />
      <View
        style={{
          ...styles.phoneInputContainer,
          ...(fontScale <= 1 && {
            flexDirection: 'row',
          }),
        }}
      >
        <PhoneInput
          ref={phoneInputRef}
          onPressFlag={onPressFlag}
          initialCountry="is"
          style={{
            ...styles.phoneViewStyle,
            minHeight: inputHeight,
            width: fontScale <= 1 ? '40%' : '100%',
          }}
          textStyle={{
            ...styles.codeTextStyle,
            minHeight: inputHeight,
            textAlign: isRTL() ? 'right' : 'left',
          }}
          flagStyle={styles.flag}
          offset={6}
          onChangePhoneNumber={onChangeCallingCode}
        />
        <TextInput
          ref={numberInputRef}
          placeholder={t('phoneNr')}
          keyboardType="phone-pad"
          returnKeyType="done"
          autoCapitalize="none"
          placeholderTextColor={Colors.placeholder}
          autoCorrect={false}
          style={{
            ...styles.phoneViewStyle,
            ...styles.phoneTextStyle,
            minHeight: inputHeight,
            textAlign: isRTL() ? 'right' : 'left',
            width: fontScale <= 1 ? '60%' : '100%',
          }}
          onChangeText={onChangePhoneNumber}
        />
      </View>
      <Vertical unit={1} />
      <Checkbox checked={tosAccepted} onPress={acceptTOS}>
        <Trans i18nKey="tosAcceptance">
          I agree to the <Link onPress={openPP}>Privacy Policy</Link>.
        </Trans>
      </Checkbox>
      <Vertical fill />
      <CtaButton
        disabled={!tosAccepted || state.phoneNumber.length <= 0}
        onPress={getPinNumber}
        image={covidIcon}
        imageDimensions={{ height: scale(28), width: scale(24) }}
      >
        {t('next')}
      </CtaButton>
    </>
  );
})

Statistics = ({ windowWidth }) => {
  const {
    address,
    bonded_state,
    params,
    oraclePrice,
    deposit_state,
    symbol1,
    symbol2,
    symbol3,
    symbol4,
    reserve_asset_symbol,
    fund_aa,
    fund_state,
    fund_balance,
    stable_state
  } = useSelector((state) => state.active);
  const actualParams = getParams(params, bonded_state);
  const [timestamp, setTimestamp] = useState(Math.floor(Date.now() / 1000));
  const [showBlock, setShowBlock] = useState(false);
  const { t } = useTranslation();
  const { supply1, supply2, asset1 } = bonded_state;
  const { decimals1, decimals2, reserve_asset, m, n,reserve_asset_decimals } = actualParams;
  const supply = stable_state?.supply || deposit_state?.supply;
  const fund_supply = fund_state?.shares_supply;
  const s1 = supply1 / 10 ** decimals1;
  const s2 = supply2 / 10 ** decimals2;
  const p1 =
    params.m *
    s1 ** (params.m - 1) *
    s2 ** params.n *
    bonded_state.dilution_factor;

  const target_p2 =
    oraclePrice &&
    !isEmpty(bonded_state) &&
    $get_target_p2(
      oraclePrice,
      actualParams.leverage,
      actualParams.interest_rate,
      timestamp,
      bonded_state.rate_update_ts,
      bonded_state.growth_factor
    );

  useEffect(() => {
    const interval = setInterval(() => {
      setTimestamp(Math.floor(Date.now() / 1000));
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, [address]);

  if (!address) return null;
  let currentPrice = 0;
  let targetPrice = 0;

  if ("p2" in bonded_state) {
    if ("oracles" in actualParams) {
      if (actualParams.oracles[0].op === "*" && !actualParams.leverage) {
        currentPrice = 1 / bonded_state.p2;
      } else {
        currentPrice = bonded_state.p2;
      }
    } else {
      if (actualParams.op1 === "*" && !actualParams.leverage) {
        currentPrice = 1 / bonded_state.p2;
      } else {
        currentPrice = bonded_state.p2;
      }
    }
  }

  let bPriceInversed = false;
  if ("oracles" in actualParams) {
    if (actualParams.oracles[0].op === "*" && !actualParams.leverage) {
      bPriceInversed = true;
      targetPrice = 1 / target_p2;
    } else {
      targetPrice = target_p2;
    }
  } else {
    if (actualParams.op1 === "*" && !actualParams.leverage) {
      bPriceInversed = true;
      targetPrice = 1 / target_p2;
    } else {
      targetPrice = target_p2;
    }
  }

  const displayOraclePrice = (bPriceInversed || actualParams.leverage) ? oraclePrice : 1 / oraclePrice;
  const reserve_symbol = reserve_asset in config.reserves ? config.reserves[reserve_asset].name : reserve_asset_symbol || "";
  const p2UnitsText = bPriceInversed
    ? t("trade.statistic.p2UnitsText.inversed", "The shown price is the price of the reserve asset {{reserveSymbolOrAsset}} in terms of Token2 ({{symbol2orAsset}}).", { reserveSymbolOrAsset: reserve_symbol || '', symbol2orAsset: symbol2 || bonded_state.asset2 })
    : t("trade.statistic.p2UnitsText.not_inversed", "The shown price is the price of Token2 ({{symbol2OrAsset}}) in terms of the reserve asset {{reserveSymbol}}.", { symbol2OrAsset: symbol2 || bonded_state.asset2, reserveSymbol: reserve_symbol || '' });
  const p2Unit = bPriceInversed ? symbol2 : reserve_symbol;

  const currentPriceDifference = bonded_state.p2
    ? (currentPrice - targetPrice) / targetPrice
    : 0;

  const shares_supply = fund_state?.shares_supply || 0
  const p1_in_full_units = m * s1 ** (m - 1) * s2 ** n;
  const p1_for_fund = p1_in_full_units * 10 ** (reserve_asset_decimals - decimals1);

  const balance = fund_balance?.[reserve_asset] + p1_for_fund * fund_balance?.[asset1];

  const share_price = shares_supply ? balance / shares_supply : 1;

  const statisticsData = [
    {
      title: fund_aa ? t("trade.statistic.fund_supply.name", "Fund tokens supply") : t("trade.statistic.token1_supply.name", "Tokens1 supply"),
      currency: fund_aa ? symbol4 : symbol1,
      descr: fund_aa ? t("trade.statistic.fund_supply.desc", "Total supply of fund tokens") : t("trade.statistic.token1_supply.desc", "Total supply of Token1 (growth tokens)"),
      value: fund_aa ? fund_supply : supply1,
      decimals: fund_aa ? reserve_asset_decimals : decimals1,
    },
    {
      title: t("trade.statistic.token2_supply.name", "Tokens2 supply"),
      currency: symbol2,
      descr: t("trade.statistic.token2_supply.desc", "Total supply of Token2 (interest tokens)"),
      value: supply2,
      decimals: decimals2,
    },
    {
      title: t("trade.statistic.token_stable_supply.name", "Stable tokens supply"),
      currency: symbol3,
      descr: t("trade.statistic.token_stable_supply.desc", "Total supply of the stable tokens"),
      value: supply,
      decimals: decimals2,
    },
    {
      title: t("trade.statistic.reserve.name", "Reserve"),
      descr: t("trade.statistic.reserve.desc", "Total amount of reserve locked to back the issuance of T1 and T2 tokens"),
      value: "reserve" in bonded_state ? bonded_state.reserve : 0,
      decimals: actualParams.reserve_asset_decimals,
      currency:
        reserve_asset in config.reserves ? config.reserves[reserve_asset].name : reserve_asset_symbol || '',
    },
    {
      title: fund_aa
      ? t("trade.statistic.fund_price.name", "{{symbol4}} price", { symbol4: symbol4 || "T_SF" })
      : t("trade.statistic.token1_price.name", "{{symbol1}} price", { symbol1: symbol1 || "T1" }),
      descr: fund_aa
      ? t("trade.statistic.fund_price.desc", "The current price of fund tokens.")
      : t("trade.statistic.token1_price.desc", "The current price of Token1 according to the bonding curve. It depends on the supplies of Token1 and Token2. The price is shown in terms of the reserve currency."),
      value: fund_aa ? share_price : p1,
      precision: 6,
      currency: reserve_asset in config.reserves ? config.reserves[reserve_asset].name : reserve_asset_symbol || "",
    },
    {
      title: t("trade.statistic.current_price.name", "Current price"),
      descr: t("trade.statistic.current_price.desc", "The current price according to the bonding curve. It depends on the supplies of Token1 and Token2. ") + " " + p2UnitsText,
      value: currentPrice,
      precision: 9,
      percent: currentPriceDifference,
    },
    {
      title: t("trade.statistic.target_price.name", "Target price"),
      descr: t("trade.statistic.target_price.desc", "The price Token2 is pegged to. It is the oracle price plus interest. ") + " " + p2UnitsText,
      value: targetPrice,
      precision: 9,
      currency: p2Unit,
      showZeros: true
    },
    {
      title: t("trade.statistic.oracle_price.name", "Oracle price"),
      descr: t("trade.statistic.oracle_price.desc", "Latest price reported by the oracle"),
      value: displayOraclePrice,
      precision: 9,
    },
  ];

  const rowStyle = !showBlock && windowWidth <= 640 ? {
    height: 40,
    opacity: 0.3,
    overflow: "hidden",
    paddingBottom: 0
  } : { marginBottom: -15 }

  return (
    <div
      style={{
        marginBottom: 20,
        background: "#fff",
        padding: 20,
        display: "block",
        boxSizing: "border-box",
        paddingBottom: !showBlock && windowWidth <= 640 ? 0 : 20
      }}
    >
      <Row justify="start" style={rowStyle}>
        {statisticsData.map((s, i) => (
          <Col
            xs={{ span: 20 }}
            sm={{ span: 12 }}
            lg={{ span: 6, offset: 0 }}
            style={{ marginBottom: 15 }}
            key={"stat-" + i}
          >
            <div className={styles.statisticsItem}>
              <Text type="secondary">
                <Label label={s.title} descr={s.descr} />
              </Text>
              <div style={{ marginTop: 3 }}>
                <span style={{ fontSize: 18 }}>
                  {s.decimals ? (
                    <ShowDecimalsValue
                      value={Number(s.value || 0)}
                      decimals={s.decimals}
                    />
                  ) : (
                    s.precision ? (s.showZeros ?  Number(s.value || 0).toPrecision(s.precision) : +Number(s.value || 0).toPrecision(s.precision)) : +Number(s.value || 0).toFixed(9)
                  )}{" "}
                  <span style={{ fontSize: 12, fontWeight: "normal" }}>
                    {s.currency}
                  </span>
                  <span
                    style={{
                      fontSize: 12,
                      fontWeight: "normal",
                    }}
                  >
                    {"percent" in s &&
                      "(" +
                      (s.percent > 0 ? "+" : "") +
                      ((s.percent || 0) * 100).toFixed(4) +
                      "%)"}
                  </span>
                </span>
              </div>
            </div>
          </Col>
        ))}
      </Row>
      {windowWidth <= 640 && !showBlock && <div
        onClick={() => setShowBlock(true)}
        style={{ paddingTop: 10, paddingBottom: 10, textAlign: "center", cursor: "pointer" }}
      >
        <Trans defaults="Show info" i18nKey="trade.statistic.show" /> <DownOutlined />
      </div>}
      {windowWidth <= 640 && showBlock && <div
        onClick={() => setShowBlock(false)}
        style={{ paddingTop: 10, textAlign: "center", cursor: "pointer" }}
      >
        <Trans defaults="Hide info" i18nKey="trade.statistic.hide" /> <UpOutlined />
      </div>}
    </div>
  );
}