mirror of
https://github.com/RoboSats/robosats.git
synced 2024-12-13 10:56:24 +00:00
Migrate StatsDialog to Dialogs folder
Migrate StatsDialog component into its own file and convert its contents to Typescript.
This commit is contained in:
Fernando Porazzi
parent
04e13d50fd
commit
bf35961efb
@ -1,8 +1,7 @@
|
||||
import React, { Component } from 'react'
|
||||
import { withTranslation } from "react-i18next";
|
||||
import {FormControlLabel, Link, Switch, CircularProgress, Badge, Tooltip, TextField, ListItemAvatar, Button, Avatar,Paper, Grid, IconButton, Typography, Select, MenuItem, List, ListItemText, ListItem, ListItemIcon, ListItemButton, Divider, Dialog, DialogContent} from "@mui/material";
|
||||
import { Badge, Tooltip, ListItemAvatar, Avatar,Paper, Grid, IconButton, Select, MenuItem, ListItemText, ListItem, ListItemIcon, ListItemButton } from "@mui/material";
|
||||
import MediaQuery from 'react-responsive'
|
||||
import { Link as LinkRouter } from 'react-router-dom'
|
||||
|
||||
// Icons
|
||||
import SettingsIcon from '@mui/icons-material/Settings';
|
||||
@ -12,29 +11,15 @@ import SellIcon from '@mui/icons-material/Sell';
|
||||
import SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||
import PercentIcon from '@mui/icons-material/Percent';
|
||||
import PriceChangeIcon from '@mui/icons-material/PriceChange';
|
||||
import BoltIcon from '@mui/icons-material/Bolt';
|
||||
import GitHubIcon from '@mui/icons-material/GitHub';
|
||||
import EqualizerIcon from '@mui/icons-material/Equalizer';
|
||||
|
||||
import PublicIcon from '@mui/icons-material/Public';
|
||||
import NumbersIcon from '@mui/icons-material/Numbers';
|
||||
import PasswordIcon from '@mui/icons-material/Password';
|
||||
import ContentCopy from "@mui/icons-material/ContentCopy";
|
||||
import DnsIcon from '@mui/icons-material/Dns';
|
||||
import WebIcon from '@mui/icons-material/Web';
|
||||
import PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';
|
||||
import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||
import { AmbossIcon , BitcoinSignIcon} from "./Icons";
|
||||
|
||||
import {
|
||||
CommunityDialog,
|
||||
ExchangeSummaryDialog,
|
||||
ProfileDialog,
|
||||
StatsDialog,
|
||||
} from './Dialogs';
|
||||
|
||||
import { getCookie } from "../utils/cookies";
|
||||
import { pn } from "../utils/prettyNumbers";
|
||||
|
||||
class BottomBar extends Component {
|
||||
constructor(props) {
|
||||
@ -90,105 +75,6 @@ class BottomBar extends Component {
|
||||
this.setState({openStatsForNerds: false});
|
||||
};
|
||||
|
||||
StatsDialog =() =>{
|
||||
const { t } = this.props;
|
||||
return(
|
||||
<Dialog
|
||||
open={this.state.openStatsForNerds}
|
||||
onClose={this.handleClickCloseStatsForNerds}
|
||||
aria-labelledby="stats-for-nerds-dialog-title"
|
||||
aria-describedby="stats-for-nerds-description"
|
||||
>
|
||||
<DialogContent>
|
||||
<Typography component="h5" variant="h5">{t("Stats For Nerds")}</Typography>
|
||||
<List dense>
|
||||
<Divider/>
|
||||
<ListItem>
|
||||
<ListItemIcon><BoltIcon/></ListItemIcon>
|
||||
<ListItemText primary={this.state.lnd_version} secondary={t("LND version")}/>
|
||||
</ListItem>
|
||||
|
||||
<Divider/>
|
||||
{this.state.network == 'testnet'?
|
||||
<ListItem>
|
||||
<ListItemIcon><DnsIcon/></ListItemIcon>
|
||||
<ListItemText secondary={this.state.node_alias}>
|
||||
<Link target="_blank" href={"https://1ml.com/testnet/node/"
|
||||
+ this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
:
|
||||
<ListItem>
|
||||
<ListItemIcon><AmbossIcon/></ListItemIcon>
|
||||
<ListItemText secondary={this.state.node_alias}>
|
||||
<Link target="_blank" href={"https://amboss.space/node/"
|
||||
+ this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
}
|
||||
|
||||
<Divider/>
|
||||
<ListItem>
|
||||
<ListItemIcon><WebIcon/></ListItemIcon>
|
||||
<ListItemText secondary={this.state.alternative_name}>
|
||||
<Link target="_blank" href={"http://"+this.state.alternative_site}>{this.state.alternative_site.slice(0, 12)+"...onion"}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider/>
|
||||
<ListItem>
|
||||
<ListItemIcon><GitHubIcon/></ListItemIcon>
|
||||
<ListItemText secondary={t("Currently running commit hash")}>
|
||||
<Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/"
|
||||
+ this.state.robosats_running_commit_hash}>{this.state.robosats_running_commit_hash.slice(0, 12)+"..."}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider/>
|
||||
<ListItem>
|
||||
<ListItemIcon><EqualizerIcon/></ListItemIcon>
|
||||
<ListItemText secondary={t("24h contracted volume")}>
|
||||
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
{pn(this.state.last_day_volume)}
|
||||
<BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
|
||||
</div>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider/>
|
||||
<ListItem>
|
||||
<ListItemIcon><EqualizerIcon/></ListItemIcon>
|
||||
<ListItemText secondary={t("Lifetime contracted volume")}>
|
||||
<div style={{ cursor: "pointer", display:'flex',alignItems:'center', flexWrap:'wrap'}}>
|
||||
{pn(this.state.lifetime_volume)}
|
||||
<BitcoinSignIcon sx={{width:14,height:14}} color={"text.secondary"}/>
|
||||
</div>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider/>
|
||||
<ListItem>
|
||||
<ListItemIcon><PublicIcon/></ListItemIcon>
|
||||
<ListItemText primary={
|
||||
<div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap'}}>
|
||||
<span>{t("Made with")+" "}</span>
|
||||
<FavoriteIcon sx={{ color: "#FF0000", height: '22px',width: '22px'}}/>
|
||||
<span>{" "+t("and")+" "}</span>
|
||||
<BoltIcon sx={{ color: "#fcba03", height: '23px',width: '23px'}}/>
|
||||
</div>}
|
||||
secondary={t("... somewhere on Earth!")}/>
|
||||
</ListItem>
|
||||
</List>
|
||||
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
handleClickOpenCommunity = () => {
|
||||
this.setState({openCommuniy: true});
|
||||
};
|
||||
@ -240,7 +126,6 @@ bottomBarDesktop =()=>{
|
||||
|
||||
return(
|
||||
<Paper elevation={6} style={{height:40}}>
|
||||
{this.StatsDialog()}
|
||||
<Grid container>
|
||||
|
||||
<Grid item xs={1.9}>
|
||||
@ -403,7 +288,6 @@ bottomBarPhone =()=>{
|
||||
var hasOrder = this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
|
||||
return(
|
||||
<Paper elevation={6} style={{height:40}}>
|
||||
{this.StatsDialog()}
|
||||
<Grid container>
|
||||
|
||||
<Grid item xs={1.6}>
|
||||
@ -533,6 +417,20 @@ bottomBarPhone =()=>{
|
||||
setAppState={this.props.setAppState}
|
||||
/>
|
||||
|
||||
<StatsDialog
|
||||
isOpen={this.state.openStatsForNerds}
|
||||
handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
|
||||
lndVersion={this.state.lnd_version}
|
||||
network={this.state.network}
|
||||
nodeAlias={this.state.node_alias}
|
||||
nodeId={this.state.node_id}
|
||||
alternativeName={this.state.alternativeName}
|
||||
alternativeSite={this.state.alternative_site}
|
||||
robosatsRunningCommitHash={this.state.robosats_running_commit_hash}
|
||||
lastDayVolume={this.state.last_day_volume}
|
||||
lifetimeVolume={this.state.lifetime_volume}
|
||||
/>
|
||||
|
||||
<MediaQuery minWidth={1200}>
|
||||
{this.bottomBarDesktop()}
|
||||
</MediaQuery>
|
||||
|
||||
196
frontend/src/components/Dialogs/StatsDialog.tsx
Normal file
196
frontend/src/components/Dialogs/StatsDialog.tsx
Normal file
@ -0,0 +1,196 @@
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
Divider,
|
||||
Link,
|
||||
List,
|
||||
ListItemText,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
|
||||
import BoltIcon from "@mui/icons-material/Bolt";
|
||||
import PublicIcon from "@mui/icons-material/Public";
|
||||
import DnsIcon from "@mui/icons-material/Dns";
|
||||
import WebIcon from "@mui/icons-material/Web";
|
||||
import FavoriteIcon from "@mui/icons-material/Favorite";
|
||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||
import EqualizerIcon from "@mui/icons-material/Equalizer";
|
||||
|
||||
import { AmbossIcon, BitcoinSignIcon } from "../Icons";
|
||||
|
||||
import { pn } from "../../utils/prettyNumbers";
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean;
|
||||
handleClickCloseStatsForNerds: () => void;
|
||||
lndVersion: string;
|
||||
network: string;
|
||||
nodeAlias: string;
|
||||
nodeId: string;
|
||||
alternativeName: string;
|
||||
alternativeSite: string;
|
||||
robosatsRunningCommitHash: string;
|
||||
lastDayVolume: number;
|
||||
lifetimeVolume: number;
|
||||
}
|
||||
|
||||
const StatsDialog = ({
|
||||
isOpen,
|
||||
handleClickCloseStatsForNerds,
|
||||
lndVersion,
|
||||
network,
|
||||
nodeAlias,
|
||||
nodeId,
|
||||
alternativeName,
|
||||
alternativeSite,
|
||||
robosatsRunningCommitHash,
|
||||
lastDayVolume,
|
||||
lifetimeVolume,
|
||||
}: Props): JSX.Element => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onClose={handleClickCloseStatsForNerds}
|
||||
aria-labelledby="stats-for-nerds-dialog-title"
|
||||
aria-describedby="stats-for-nerds-description"
|
||||
>
|
||||
<DialogContent>
|
||||
<Typography component="h5" variant="h5">{t("Stats For Nerds")}</Typography>
|
||||
|
||||
<List dense>
|
||||
<Divider />
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<BoltIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={lndVersion} secondary={t("LND version")} />
|
||||
</ListItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
{network === "testnet" ? (
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<DnsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={nodeAlias}>
|
||||
<Link
|
||||
target="_blank"
|
||||
href={`https://1ml.com/testnet/node/${nodeId}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{`${nodeId.slice(0, 12)}... (1ML)`}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
) : (
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<AmbossIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={nodeAlias}>
|
||||
<Link
|
||||
target="_blank"
|
||||
href={`https://amboss.space/node/${nodeId}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{`${nodeId.slice(0, 12)}... (AMBOSS)`}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<WebIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={alternativeName}>
|
||||
<Link
|
||||
target="_blank"
|
||||
href={`http://${alternativeSite}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{`${alternativeSite.slice(0, 12)}...onion`}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<GitHubIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={t("Currently running commit hash")}>
|
||||
<Link
|
||||
target="_blank"
|
||||
href={`https://github.com/Reckless-Satoshi/robosats/tree/${robosatsRunningCommitHash}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{`${robosatsRunningCommitHash.slice(0, 12)}...`}
|
||||
</Link>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<EqualizerIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={t("24h contracted volume")}>
|
||||
<div style={{ cursor: "pointer", display: "flex", alignItems: "center", flexWrap: "wrap" }}>
|
||||
{pn(lastDayVolume)}
|
||||
<BitcoinSignIcon sx={{ width: 14,height: 14 }} color={"text.secondary"} />
|
||||
</div>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<EqualizerIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText secondary={t("Lifetime contracted volume")}>
|
||||
<div style={{ cursor: "pointer", display: "flex",alignItems: "center", flexWrap: "wrap" }}>
|
||||
{pn(lifetimeVolume)}
|
||||
<BitcoinSignIcon sx={{ width: 14, height: 14 }} color={"text.secondary"} />
|
||||
</div>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
|
||||
<Divider />
|
||||
<ListItem>
|
||||
<ListItemIcon>
|
||||
<PublicIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<div style={{ display: "flex", alignItems: "center", justifyContent: "left", flexWrap: "wrap" }}>
|
||||
<span>{`${t("Made with")} `}</span>
|
||||
<FavoriteIcon sx={{ color: "#ff0000", height: "22px", width: "22px" }} />
|
||||
<span>{` ${t("and")} `}</span>
|
||||
<BoltIcon sx={{ color: "#fcba03", height: "23px",width: "23px" }} />
|
||||
</div>
|
||||
}
|
||||
secondary={t("... somewhere on Earth!")}
|
||||
/>
|
||||
</ListItem>
|
||||
</List>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatsDialog;
|
||||
@ -5,4 +5,5 @@ export { default as NoRobotDialog } from "./NoRobot";
|
||||
export { default as StoreTokenDialog } from "./StoreToken";
|
||||
export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
|
||||
export { default as ProfileDialog } from "./ProfileDialog";
|
||||
export { default as StatsDialog } from "./StatsDialog";
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user