mirror of
https://github.com/RoboSats/robosats.git
synced 2025-01-07 14:51:37 +00:00
Migrate ExchangeSummaryDialog to Dialogs folder
This commit migrates the ExchangeSummaryDialog component to the dialogs folder whilst converting it to Typescript
This commit is contained in:
Fernando Porazzi
parent
cc06874f4d
commit
5ff6e1e78d
@ -28,7 +28,7 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
|
|||||||
import FavoriteIcon from '@mui/icons-material/Favorite';
|
import FavoriteIcon from '@mui/icons-material/Favorite';
|
||||||
import { AmbossIcon , BitcoinSignIcon} from "./Icons";
|
import { AmbossIcon , BitcoinSignIcon} from "./Icons";
|
||||||
|
|
||||||
import { CommunityDialog } from './Dialogs';
|
import { CommunityDialog, ExchangeSummaryDialog } from './Dialogs';
|
||||||
|
|
||||||
import { getCookie } from "../utils/cookies";
|
import { getCookie } from "../utils/cookies";
|
||||||
import { pn } from "../utils/prettyNumbers";
|
import { pn } from "../utils/prettyNumbers";
|
||||||
@ -419,7 +419,6 @@ bottomBarDesktop =()=>{
|
|||||||
<Paper elevation={6} style={{height:40}}>
|
<Paper elevation={6} style={{height:40}}>
|
||||||
{this.StatsDialog()}
|
{this.StatsDialog()}
|
||||||
{this.dialogProfile()}
|
{this.dialogProfile()}
|
||||||
{this.exchangeSummaryDialog()}
|
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|
||||||
<Grid item xs={1.9}>
|
<Grid item xs={1.9}>
|
||||||
@ -576,108 +575,6 @@ bottomBarDesktop =()=>{
|
|||||||
this.setState({openExchangeSummary: false});
|
this.setState({openExchangeSummary: false});
|
||||||
};
|
};
|
||||||
|
|
||||||
exchangeSummaryDialog =() =>{
|
|
||||||
const { t } = this.props;
|
|
||||||
return(
|
|
||||||
<Dialog
|
|
||||||
open={this.state.openExchangeSummary}
|
|
||||||
onClose={this.handleClickCloseExchangeSummary}
|
|
||||||
aria-labelledby="exchange-summary-title"
|
|
||||||
aria-describedby="exchange-summary-description"
|
|
||||||
>
|
|
||||||
<DialogContent>
|
|
||||||
<Typography component="h5" variant="h5">{t("Exchange Summary")}</Typography>
|
|
||||||
<List dense>
|
|
||||||
<ListItem >
|
|
||||||
<ListItemIcon size="small">
|
|
||||||
<InventoryIcon/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
primary={this.state.num_public_buy_orders}
|
|
||||||
secondary={t("Public buy orders")} />
|
|
||||||
</ListItem>
|
|
||||||
<Divider/>
|
|
||||||
|
|
||||||
<ListItem >
|
|
||||||
<ListItemIcon size="small">
|
|
||||||
<SellIcon/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
primary={this.state.num_public_sell_orders}
|
|
||||||
secondary={t("Public sell orders")} />
|
|
||||||
</ListItem>
|
|
||||||
<Divider/>
|
|
||||||
|
|
||||||
<ListItem >
|
|
||||||
<ListItemIcon size="small">
|
|
||||||
<BookIcon/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
primary={pn(this.state.book_liquidity)+" Sats"}
|
|
||||||
secondary={t("Book liquidity")}/>
|
|
||||||
</ListItem>
|
|
||||||
<Divider/>
|
|
||||||
|
|
||||||
<ListItem >
|
|
||||||
<ListItemIcon size="small">
|
|
||||||
<SmartToyIcon/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
primary={this.state.active_robots_today}
|
|
||||||
secondary={t("Today active robots")} />
|
|
||||||
</ListItem>
|
|
||||||
<Divider/>
|
|
||||||
|
|
||||||
<ListItem >
|
|
||||||
<ListItemIcon size="small">
|
|
||||||
<PriceChangeIcon/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
primary={this.state.last_day_nonkyc_btc_premium+"%"}
|
|
||||||
secondary={t("24h non-KYC bitcoin premium")} />
|
|
||||||
</ListItem>
|
|
||||||
<Divider/>
|
|
||||||
|
|
||||||
<ListItem >
|
|
||||||
<ListItemIcon size="small">
|
|
||||||
<PercentIcon/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<Grid container >
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
secondary={t("Maker fee")}>
|
|
||||||
{(this.state.maker_fee*100).toFixed(3)}%
|
|
||||||
</ListItemText>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<ListItemText
|
|
||||||
primaryTypographyProps={{fontSize: '14px'}}
|
|
||||||
secondaryTypographyProps={{fontSize: '12px'}}
|
|
||||||
secondary={t("Taker fee")}>
|
|
||||||
{(this.state.taker_fee*100).toFixed(3)}%
|
|
||||||
</ListItemText>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</ListItem>
|
|
||||||
</List>
|
|
||||||
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
bottomBarPhone =()=>{
|
bottomBarPhone =()=>{
|
||||||
const { t } = this.props;
|
const { t } = this.props;
|
||||||
var hasRewards = this.state.earned_rewards > 0 ? true: false;
|
var hasRewards = this.state.earned_rewards > 0 ? true: false;
|
||||||
@ -685,7 +582,6 @@ bottomBarPhone =()=>{
|
|||||||
return(
|
return(
|
||||||
<Paper elevation={6} style={{height:40}}>
|
<Paper elevation={6} style={{height:40}}>
|
||||||
{this.StatsDialog()}
|
{this.StatsDialog()}
|
||||||
{this.exchangeSummaryDialog()}
|
|
||||||
{this.dialogProfile()}
|
{this.dialogProfile()}
|
||||||
<Grid container>
|
<Grid container>
|
||||||
|
|
||||||
@ -787,6 +683,19 @@ bottomBarPhone =()=>{
|
|||||||
isOpen={this.state.openCommuniy}
|
isOpen={this.state.openCommuniy}
|
||||||
handleClickCloseCommunity={this.handleClickCloseCommunity}
|
handleClickCloseCommunity={this.handleClickCloseCommunity}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<ExchangeSummaryDialog
|
||||||
|
isOpen={this.state.openExchangeSummary}
|
||||||
|
handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
|
||||||
|
numPublicBuyOrders={this.state.num_public_buy_orders}
|
||||||
|
numPublicSellOrders={this.state.num_public_sell_orders}
|
||||||
|
bookLiquidity={this.state.book_liquidity}
|
||||||
|
activeRobotsToday={this.state.active_robots_today}
|
||||||
|
lastDayNonkycBtcPremium={this.state.last_day_nonkyc_btc_premium}
|
||||||
|
makerFee={this.state.maker_fee}
|
||||||
|
takerFee={this.state.taker_fee}
|
||||||
|
/>
|
||||||
|
|
||||||
<MediaQuery minWidth={1200}>
|
<MediaQuery minWidth={1200}>
|
||||||
{this.bottomBarDesktop()}
|
{this.bottomBarDesktop()}
|
||||||
</MediaQuery>
|
</MediaQuery>
|
||||||
|
|||||||
169
frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx
Normal file
169
frontend/src/components/Dialogs/ExchangeSummaryDialog.tsx
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
Divider,
|
||||||
|
Grid,
|
||||||
|
List,
|
||||||
|
ListItemText,
|
||||||
|
ListItem,
|
||||||
|
ListItemIcon,
|
||||||
|
Typography,
|
||||||
|
} from "@mui/material";
|
||||||
|
|
||||||
|
import InventoryIcon from '@mui/icons-material/Inventory';
|
||||||
|
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 BookIcon from '@mui/icons-material/Book';
|
||||||
|
|
||||||
|
import { pn } from "../../utils/prettyNumbers";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isOpen: boolean;
|
||||||
|
handleClickCloseExchangeSummary: () => void;
|
||||||
|
numPublicBuyOrders: number;
|
||||||
|
numPublicSellOrders: number;
|
||||||
|
bookLiquidity: number;
|
||||||
|
activeRobotsToday: number;
|
||||||
|
lastDayNonkycBtcPremium: number;
|
||||||
|
makerFee: number;
|
||||||
|
takerFee: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ExchangeSummaryDialog = ({
|
||||||
|
isOpen,
|
||||||
|
handleClickCloseExchangeSummary,
|
||||||
|
numPublicBuyOrders,
|
||||||
|
numPublicSellOrders,
|
||||||
|
bookLiquidity,
|
||||||
|
activeRobotsToday,
|
||||||
|
lastDayNonkycBtcPremium,
|
||||||
|
makerFee,
|
||||||
|
takerFee,
|
||||||
|
}: Props): JSX.Element => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
open={isOpen}
|
||||||
|
onClose={handleClickCloseExchangeSummary}
|
||||||
|
aria-labelledby="exchange-summary-title"
|
||||||
|
aria-describedby="exchange-summary-description"
|
||||||
|
>
|
||||||
|
<DialogContent>
|
||||||
|
<Typography component="h5" variant="h5">{t("Exchange Summary")}</Typography>
|
||||||
|
|
||||||
|
<List dense>
|
||||||
|
<ListItem >
|
||||||
|
<ListItemIcon>
|
||||||
|
<InventoryIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
primary={numPublicBuyOrders}
|
||||||
|
secondary={t("Public buy orders")}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<ListItem >
|
||||||
|
<ListItemIcon>
|
||||||
|
<SellIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
primary={numPublicSellOrders}
|
||||||
|
secondary={t("Public sell orders")}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<ListItem >
|
||||||
|
<ListItemIcon>
|
||||||
|
<BookIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
primary={`${pn(bookLiquidity)} Sats`}
|
||||||
|
secondary={t("Book liquidity")}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<ListItem >
|
||||||
|
<ListItemIcon>
|
||||||
|
<SmartToyIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
primary={activeRobotsToday}
|
||||||
|
secondary={t("Today active robots")}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<ListItem >
|
||||||
|
<ListItemIcon>
|
||||||
|
<PriceChangeIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
primary={`${lastDayNonkycBtcPremium}%`}
|
||||||
|
secondary={t("24h non-KYC bitcoin premium")}
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
<Divider/>
|
||||||
|
|
||||||
|
<ListItem >
|
||||||
|
<ListItemIcon>
|
||||||
|
<PercentIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
|
||||||
|
<Grid container >
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
secondary={t("Maker fee")}
|
||||||
|
>
|
||||||
|
{(makerFee * 100).toFixed(3)}%
|
||||||
|
</ListItemText>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<ListItemText
|
||||||
|
primaryTypographyProps={{fontSize: '14px'}}
|
||||||
|
secondaryTypographyProps={{fontSize: '12px'}}
|
||||||
|
secondary={t("Taker fee")}
|
||||||
|
>
|
||||||
|
{(takerFee * 100).toFixed(3)}%
|
||||||
|
</ListItemText>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</ListItem>
|
||||||
|
</List>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExchangeSummaryDialog;
|
||||||
@ -3,4 +3,5 @@ export { default as InfoDialog } from "./Info";
|
|||||||
export { default as LearnDialog } from "./Learn";
|
export { default as LearnDialog } from "./Learn";
|
||||||
export { default as NoRobotDialog } from "./NoRobot";
|
export { default as NoRobotDialog } from "./NoRobot";
|
||||||
export { default as StoreTokenDialog } from "./StoreToken";
|
export { default as StoreTokenDialog } from "./StoreToken";
|
||||||
|
export { default as ExchangeSummaryDialog } from "./ExchangeSummaryDialog";
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user