mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-20 21:21:36 +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 React, { Component } from 'react'
|
||||||
import { withTranslation } from "react-i18next";
|
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 MediaQuery from 'react-responsive'
|
||||||
import { Link as LinkRouter } from 'react-router-dom'
|
|
||||||
|
|
||||||
// Icons
|
// Icons
|
||||||
import SettingsIcon from '@mui/icons-material/Settings';
|
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 SmartToyIcon from '@mui/icons-material/SmartToy';
|
||||||
import PercentIcon from '@mui/icons-material/Percent';
|
import PercentIcon from '@mui/icons-material/Percent';
|
||||||
import PriceChangeIcon from '@mui/icons-material/PriceChange';
|
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 {
|
import {
|
||||||
CommunityDialog,
|
CommunityDialog,
|
||||||
ExchangeSummaryDialog,
|
ExchangeSummaryDialog,
|
||||||
ProfileDialog,
|
ProfileDialog,
|
||||||
|
StatsDialog,
|
||||||
} from './Dialogs';
|
} from './Dialogs';
|
||||||
|
|
||||||
import { getCookie } from "../utils/cookies";
|
import { getCookie } from "../utils/cookies";
|
||||||
import { pn } from "../utils/prettyNumbers";
|
|
||||||
|
|
||||||
class BottomBar extends Component {
|
class BottomBar extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -90,105 +75,6 @@ class BottomBar extends Component {
|
|||||||
this.setState({openStatsForNerds: false});
|
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 = () => {
|
handleClickOpenCommunity = () => {
|
||||||
this.setState({openCommuniy: true});
|
this.setState({openCommuniy: true});
|
||||||
};
|
};
|
||||||
@ -240,7 +126,6 @@ bottomBarDesktop =()=>{
|
|||||||
|
|
||||||
return(
|
return(
|
||||||
<Paper elevation={6} style={{height:40}}>
|
<Paper elevation={6} style={{height:40}}>
|
||||||
{this.StatsDialog()}
|
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|
||||||
<Grid item xs={1.9}>
|
<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;
|
var hasOrder = this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded ? true : false;
|
||||||
return(
|
return(
|
||||||
<Paper elevation={6} style={{height:40}}>
|
<Paper elevation={6} style={{height:40}}>
|
||||||
{this.StatsDialog()}
|
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|
||||||
<Grid item xs={1.6}>
|
<Grid item xs={1.6}>
|
||||||
@ -533,6 +417,20 @@ bottomBarPhone =()=>{
|
|||||||
setAppState={this.props.setAppState}
|
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}>
|
<MediaQuery minWidth={1200}>
|
||||||
{this.bottomBarDesktop()}
|
{this.bottomBarDesktop()}
|
||||||
</MediaQuery>
|
</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 StoreTokenDialog } from "./StoreToken";
|
||||||
export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
|
export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
|
||||||
export { default as ProfileDialog } from "./ProfileDialog";
|
export { default as ProfileDialog } from "./ProfileDialog";
|
||||||
|
export { default as StatsDialog } from "./StatsDialog";
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user