From 93bf95639bb24b2cb1c54f757e2648ac3d39037a Mon Sep 17 00:00:00 2001
From: Fernando Porazzi <fernandoporazzi@gmail.com>
Date: Thu, 14 Apr 2022 17:52:35 +0200
Subject: [PATCH] Extract getCookie function into its own file

The getCookie function was being implemented a couple of times across the pages. These changes create a single implementation and imports the helper function whenever needed.
---
 frontend/src/components/BottomBar.js   | 210 ++++++++++++-------------
 frontend/src/components/MakerPage.js   | 143 ++++++++---------
 frontend/src/components/OrderPage.js   | 109 ++++++-------
 frontend/src/components/TradeBox.js    |  87 +++++-----
 frontend/src/components/UserGenPage.js |  23 +--
 frontend/src/utils/cookies.js          |  15 ++
 6 files changed, 264 insertions(+), 323 deletions(-)
 create mode 100644 frontend/src/utils/cookies.js

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
index 818579d1..406648d4 100644
--- a/frontend/src/components/BottomBar.js
+++ b/frontend/src/components/BottomBar.js
@@ -29,6 +29,8 @@ import EmojiEventsIcon from '@mui/icons-material/EmojiEvents';
 import AmbossIcon from "./icons/AmbossIcon";
 import FavoriteIcon from '@mui/icons-material/Favorite';
 
+import { getCookie } from "../utils/cookies";
+
 // pretty numbers
 function pn(x) {
     if(x == null){
@@ -40,22 +42,6 @@ function pn(x) {
     }
 }
 
-function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        const cookies = document.cookie.split(';');
-        for (let i = 0; i < cookies.length; i++) {
-            const cookie = cookies[i].trim();
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-  }
-
 class BottomBar extends Component {
     constructor(props) {
         super(props);
@@ -124,11 +110,11 @@ class BottomBar extends Component {
                 </ListItem>
 
                 <Divider/>
-                {this.state.network == 'testnet'? 
+                {this.state.network == 'testnet'?
                 <ListItem>
                     <ListItemIcon><DnsIcon/></ListItemIcon>
                     <ListItemText secondary={this.state.node_alias}>
-                         <Link target="_blank" href={"https://1ml.com/testnet/node/" 
+                         <Link target="_blank" href={"https://1ml.com/testnet/node/"
                         + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (1ML)"}
                         </Link>
                     </ListItemText>
@@ -137,7 +123,7 @@ class BottomBar extends Component {
                 <ListItem>
                     <ListItemIcon><AmbossIcon/></ListItemIcon>
                     <ListItemText secondary={this.state.node_alias}>
-                            <Link target="_blank" href={"https://amboss.space/node/" 
+                            <Link target="_blank" href={"https://amboss.space/node/"
                         + this.state.node_id}>{this.state.node_id.slice(0, 12)+"... (AMBOSS)"}
                         </Link>
                     </ListItemText>
@@ -157,7 +143,7 @@ class BottomBar extends Component {
                 <ListItem>
                     <ListItemIcon><GitHubIcon/></ListItemIcon>
                     <ListItemText secondary={t("Currently running commit hash")}>
-                        <Link target="_blank" href={"https://github.com/Reckless-Satoshi/robosats/tree/" 
+                        <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>
@@ -216,7 +202,7 @@ class BottomBar extends Component {
             <Typography component="body2" variant="body2">
                 <p>{t("Support is only offered via public channels. Join our Telegram community if you have questions or want to hang out with other cool robots. Please, use our Github Issues if you find a bug or want to see new features!")}</p>
             </Typography>
-            <List> 
+            <List>
                 <Divider/>
 
                 <ListItemButton component="a" target="_blank" href="https://t.me/robosats">
@@ -247,7 +233,7 @@ class BottomBar extends Component {
 
                 <ListItemButton component="a" target="_blank" href="https://github.com/Reckless-Satoshi/robosats/issues">
                     <ListItemIcon><GitHubIcon/></ListItemIcon>
-                    <ListItemText primary={t("Tell us about a new feature or a bug")} 
+                    <ListItemText primary={t("Tell us about a new feature or a bug")}
                     secondary={t("Github Issues - The Robotic Satoshis Open Source Project")}/>
                 </ListItemButton>
 
@@ -270,7 +256,7 @@ class BottomBar extends Component {
             badInvoice:false,
             showRewardsSpinner: true,
         });
-  
+
         const requestOptions = {
             method: 'POST',
             headers: {'Content-Type':'application/json', 'X-CSRFToken': getCookie('csrftoken'),},
@@ -281,7 +267,7 @@ class BottomBar extends Component {
         fetch('/api/reward/', requestOptions)
         .then((response) => response.json())
         .then((data) => console.log(data) & this.setState({
-            badInvoice:data.bad_invoice, 
+            badInvoice:data.bad_invoice,
             openClaimRewards: data.successful_withdrawal ? false : true,
             earned_rewards: data.successful_withdrawal ? 0 : this.state.earned_rewards,
             withdrawn: data.successful_withdrawal ? true : false,
@@ -289,7 +275,7 @@ class BottomBar extends Component {
         }));
     }
 
-    getHost(){ 
+    getHost(){
         var url = (window.location != window.parent.location) ? this.getHost(document.referrer) : document.location.href;
         return url.split('/')[2]
       }
@@ -310,7 +296,7 @@ class BottomBar extends Component {
                 <ListItem className="profileNickname">
                     <ListItemText secondary={t("Your robot")}>
                     <Typography component="h6" variant="h6">
-                    {this.props.nickname ? 
+                    {this.props.nickname ?
                     <div style={{position:'relative',left:'-7px'}}>
                     <div style={{display:'flex', alignItems:'center', justifyContent:'left', flexWrap:'wrap', width:300}}>
                         <BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/><a>{this.props.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '28px',width: '24px'}}/>
@@ -320,19 +306,19 @@ class BottomBar extends Component {
                     </Typography>
                     </ListItemText>
                     <ListItemAvatar>
-                    <Avatar className='profileAvatar' 
+                    <Avatar className='profileAvatar'
                         sx={{ width: 65, height:65 }}
                         alt={this.props.nickname}
-                        src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
+                        src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                         />
                     </ListItemAvatar>
                 </ListItem>
 
                 <Divider/>
-                {this.state.active_order_id ? 
+                {this.state.active_order_id ?
                 <ListItemButton onClick={this.handleClickCloseProfile} to={'/order/'+this.state.active_order_id} component={LinkRouter}>
                     <ListItemIcon>
-                        <Badge badgeContent="" color="primary"> 
+                        <Badge badgeContent="" color="primary">
                             <NumbersIcon color="primary"/>
                         </Badge>
                     </ListItemIcon>
@@ -344,13 +330,13 @@ class BottomBar extends Component {
                     <ListItemText primary={t("No active orders")} secondary={t("Your current order")}/>
                 </ListItem>
                 }
-                
+
                 <ListItem>
                     <ListItemIcon>
                         <PasswordIcon/>
                     </ListItemIcon>
                     <ListItemText secondary={t("Your token (will not remain here)")}>
-                    {this.props.token ?  
+                    {this.props.token ?
                     <TextField
                         disabled
                         label={t("Back it up!")}
@@ -366,22 +352,22 @@ class BottomBar extends Component {
                             </Tooltip>,
                             }}
                         />
-                    : 
+                    :
                     t("Cannot remember")}
                 </ListItemText>
                 </ListItem>
-                
+
                 <Divider/>
 
                 <Grid spacing={1} align="center">
                     <FormControlLabel labelPlacement="start"control={
                         <Switch
-                        checked={this.state.showRewards} 
-                        onChange={()=> this.setState({showRewards: !this.state.showRewards})}/>} 
+                        checked={this.state.showRewards}
+                        onChange={()=> this.setState({showRewards: !this.state.showRewards})}/>}
                         label={t("Rewards and compensations")}
                         />
                 </Grid>
-                
+
                 <div style={{ display: this.state.showRewards ? '':'none'}}>
                     <ListItem>
                         <ListItemIcon>
@@ -403,7 +389,7 @@ class BottomBar extends Component {
                             />
                     </ListItemText>
                     </ListItem>
-                    
+
                     <ListItem>
                         <ListItemIcon>
                             <EmojiEventsIcon/>
@@ -447,7 +433,7 @@ class BottomBar extends Component {
                         <CircularProgress/>
                     </div>
                     :""}
-                    
+
                     {this.state.withdrawn?
                     <div style={{display: 'flex', justifyContent: 'center'}}>
                         <Typography color="primary" variant="body2"><b>{t("There it goes, thank you!🥇")}</b></Typography>
@@ -457,7 +443,7 @@ class BottomBar extends Component {
                 </div>
             </List>
             </DialogContent>
-            
+
         </Dialog>
     )
     }
@@ -473,7 +459,7 @@ bottomBarDesktop =()=>{
                 <Grid container xs={12}>
 
                     <Grid item xs={1.9}>
-                        <div style={{display: this.props.avatarLoaded ? '':'none'}}>                     
+                        <div style={{display: this.props.avatarLoaded ? '':'none'}}>
                         <ListItemButton onClick={this.handleClickOpenProfile} >
                             <Tooltip open={this.state.earned_rewards > 0 ? true: false} title={t("You can claim satoshis!")}>
                             <Tooltip open={(this.state.active_order_id > 0 & !this.state.profileShown & this.props.avatarLoaded) ? true: false}
@@ -481,10 +467,10 @@ bottomBarDesktop =()=>{
                                 <ListItemAvatar sx={{ width: 30, height: 30 }} >
                                     <Badge badgeContent={(this.state.active_order_id > 0 & !this.state.profileShown) ? "": null} color="primary">
                                     <Avatar className='flippedSmallAvatar' sx={{margin: 0, top: -13}}
-                                    alt={this.props.nickname} 
+                                    alt={this.props.nickname}
                                     imgProps={{
                                         onLoad:() => this.props.setAppState({avatarLoaded: true}),
-                                    }} 
+                                    }}
                                     src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                                     />
                                     </Badge>
@@ -501,10 +487,10 @@ bottomBarDesktop =()=>{
                             <ListItemIcon size="small">
                                 <IconButton onClick={this.handleClickOpenExchangeSummary}><InventoryIcon/></IconButton>
                             </ListItemIcon>
-                            <ListItemText 
-                                primaryTypographyProps={{fontSize: '14px'}} 
-                                secondaryTypographyProps={{fontSize: '12px'}} 
-                                primary={this.state.num_public_buy_orders} 
+                            <ListItemText
+                                primaryTypographyProps={{fontSize: '14px'}}
+                                secondaryTypographyProps={{fontSize: '12px'}}
+                                primary={this.state.num_public_buy_orders}
                                 secondary={t("Public Buy Orders")} />
                         </ListItem>
                     </Grid>
@@ -514,10 +500,10 @@ bottomBarDesktop =()=>{
                             <ListItemIcon size="small">
                             <IconButton onClick={this.handleClickOpenExchangeSummary}><SellIcon/></IconButton>
                             </ListItemIcon>
-                            <ListItemText 
-                                primaryTypographyProps={{fontSize: '14px'}} 
-                                secondaryTypographyProps={{fontSize: '12px'}} 
-                                primary={this.state.num_public_sell_orders} 
+                            <ListItemText
+                                primaryTypographyProps={{fontSize: '14px'}}
+                                secondaryTypographyProps={{fontSize: '12px'}}
+                                primary={this.state.num_public_sell_orders}
                                 secondary={t("Public Sell Orders")} />
                         </ListItem>
                     </Grid>
@@ -527,10 +513,10 @@ bottomBarDesktop =()=>{
                             <ListItemIcon size="small">
                             <IconButton onClick={this.handleClickOpenExchangeSummary}><SmartToyIcon/></IconButton>
                             </ListItemIcon>
-                            <ListItemText 
-                                primaryTypographyProps={{fontSize: '14px'}} 
-                                secondaryTypographyProps={{fontSize: '12px'}} 
-                                primary={this.state.active_robots_today} 
+                            <ListItemText
+                                primaryTypographyProps={{fontSize: '14px'}}
+                                secondaryTypographyProps={{fontSize: '12px'}}
+                                primary={this.state.active_robots_today}
                                 secondary={t("Today Active Robots")}/>
                         </ListItem>
                     </Grid>
@@ -540,10 +526,10 @@ bottomBarDesktop =()=>{
                             <ListItemIcon size="small">
                                 <IconButton onClick={this.handleClickOpenExchangeSummary}><PriceChangeIcon/></IconButton>
                             </ListItemIcon>
-                            <ListItemText 
-                                primaryTypographyProps={{fontSize: '14px'}} 
-                                secondaryTypographyProps={{fontSize: '12px'}} 
-                                primary={this.state.last_day_nonkyc_btc_premium+"%"} 
+                            <ListItemText
+                                primaryTypographyProps={{fontSize: '14px'}}
+                                secondaryTypographyProps={{fontSize: '12px'}}
+                                primary={this.state.last_day_nonkyc_btc_premium+"%"}
                                 secondary={t("24h Avg Premium")} />
                         </ListItem>
                     </Grid>
@@ -553,10 +539,10 @@ bottomBarDesktop =()=>{
                             <ListItemIcon size="small">
                             <   IconButton onClick={this.handleClickOpenExchangeSummary}><PercentIcon/></IconButton>
                             </ListItemIcon>
-                            <ListItemText 
-                                primaryTypographyProps={{fontSize: '14px'}} 
-                                secondaryTypographyProps={{fontSize: '12px'}} 
-                                primary={(this.state.maker_fee + this.state.taker_fee)*100} 
+                            <ListItemText
+                                primaryTypographyProps={{fontSize: '14px'}}
+                                secondaryTypographyProps={{fontSize: '12px'}}
+                                primary={(this.state.maker_fee + this.state.taker_fee)*100}
                                 secondary={t("Trade Fee")} />
                         </ListItem>
                     </Grid>
@@ -567,18 +553,18 @@ bottomBarDesktop =()=>{
                         </Grid>
                         <Grid item xs={3}>
                         <Tooltip enterTouchDelay="250" title={t("Show community and support links")}>
-                            <IconButton 
-                            color="primary" 
-                            aria-label="Community" 
+                            <IconButton
+                            color="primary"
+                            aria-label="Community"
                             onClick={this.handleClickOpenCommunity} >
                                 <PeopleIcon />
                             </IconButton>
                         </Tooltip>
                         </Grid>
-                        <Grid item xs={3}> 
+                        <Grid item xs={3}>
                             <Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}>
-                                <IconButton color="primary" 
-                                    aria-label="Stats for Nerds" 
+                                <IconButton color="primary"
+                                    aria-label="Stats for Nerds"
                                     onClick={this.handleClickOpenStatsForNerds} >
                                     <SettingsIcon />
                                 </IconButton>
@@ -598,13 +584,13 @@ bottomBarDesktop =()=>{
     LangSelect = () => {
         const { i18n} = this.props;
         return(
-            <Select 
+            <Select
                 size = 'small'
                 value = {i18n.resolvedLanguage.substring(0,2)}
                 inputProps={{
                     style: {textAlign:"center"}
                 }}
-                onChange={this.handleChangeLang}> 
+                onChange={this.handleChangeLang}>
                     <MenuItem value={'en'}>EN</MenuItem>
                     <MenuItem disabled={true} value={'es'}>ES</MenuItem>
                     <MenuItem disabled={true} value={'de'}>DE</MenuItem>
@@ -613,7 +599,7 @@ bottomBarDesktop =()=>{
                 </Select>
         )
     }
-    
+
     handleClickOpenExchangeSummary = () => {
         this.getInfo();
         this.setState({openExchangeSummary: true});
@@ -638,10 +624,10 @@ bottomBarDesktop =()=>{
                     <ListItemIcon size="small">
                         <InventoryIcon/>
                     </ListItemIcon>
-                    <ListItemText 
-                        primaryTypographyProps={{fontSize: '14px'}} 
-                        secondaryTypographyProps={{fontSize: '12px'}} 
-                        primary={this.state.num_public_buy_orders} 
+                    <ListItemText
+                        primaryTypographyProps={{fontSize: '14px'}}
+                        secondaryTypographyProps={{fontSize: '12px'}}
+                        primary={this.state.num_public_buy_orders}
                         secondary={t("Public buy orders")} />
                 </ListItem>
                 <Divider/>
@@ -650,10 +636,10 @@ bottomBarDesktop =()=>{
                     <ListItemIcon size="small">
                         <SellIcon/>
                     </ListItemIcon>
-                    <ListItemText 
-                        primaryTypographyProps={{fontSize: '14px'}} 
-                        secondaryTypographyProps={{fontSize: '12px'}} 
-                        primary={this.state.num_public_sell_orders} 
+                    <ListItemText
+                        primaryTypographyProps={{fontSize: '14px'}}
+                        secondaryTypographyProps={{fontSize: '12px'}}
+                        primary={this.state.num_public_sell_orders}
                         secondary={t("Public sell orders")} />
                 </ListItem>
                 <Divider/>
@@ -662,10 +648,10 @@ bottomBarDesktop =()=>{
                     <ListItemIcon size="small">
                         <BookIcon/>
                     </ListItemIcon>
-                    <ListItemText 
-                        primaryTypographyProps={{fontSize: '14px'}} 
-                        secondaryTypographyProps={{fontSize: '12px'}} 
-                        primary={pn(this.state.book_liquidity)+" Sats"} 
+                    <ListItemText
+                        primaryTypographyProps={{fontSize: '14px'}}
+                        secondaryTypographyProps={{fontSize: '12px'}}
+                        primary={pn(this.state.book_liquidity)+" Sats"}
                         secondary={t("Book liquidity")}/>
                 </ListItem>
                 <Divider/>
@@ -674,10 +660,10 @@ bottomBarDesktop =()=>{
                     <ListItemIcon size="small">
                         <SmartToyIcon/>
                     </ListItemIcon>
-                    <ListItemText 
-                        primaryTypographyProps={{fontSize: '14px'}} 
-                        secondaryTypographyProps={{fontSize: '12px'}} 
-                        primary={this.state.active_robots_today} 
+                    <ListItemText
+                        primaryTypographyProps={{fontSize: '14px'}}
+                        secondaryTypographyProps={{fontSize: '12px'}}
+                        primary={this.state.active_robots_today}
                         secondary={t("Today active robots")} />
                 </ListItem>
                 <Divider/>
@@ -686,10 +672,10 @@ bottomBarDesktop =()=>{
                     <ListItemIcon size="small">
                         <PriceChangeIcon/>
                     </ListItemIcon>
-                    <ListItemText 
-                        primaryTypographyProps={{fontSize: '14px'}} 
-                        secondaryTypographyProps={{fontSize: '12px'}} 
-                        primary={this.state.last_day_nonkyc_btc_premium+"%"} 
+                    <ListItemText
+                        primaryTypographyProps={{fontSize: '14px'}}
+                        secondaryTypographyProps={{fontSize: '12px'}}
+                        primary={this.state.last_day_nonkyc_btc_premium+"%"}
                         secondary={t("24h non-KYC bitcoin premium")} />
                 </ListItem>
                 <Divider/>
@@ -700,17 +686,17 @@ bottomBarDesktop =()=>{
                     </ListItemIcon>
                     <Grid container xs={12}>
                         <Grid item xs={6}>
-                            <ListItemText 
-                                primaryTypographyProps={{fontSize: '14px'}} 
-                                secondaryTypographyProps={{fontSize: '12px'}} 
+                            <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'}} 
+                            <ListItemText
+                                primaryTypographyProps={{fontSize: '14px'}}
+                                secondaryTypographyProps={{fontSize: '12px'}}
                                 secondary={t("Taker fee")}>
                                 {(this.state.taker_fee*100).toFixed(3)}%
                             </ListItemText>
@@ -718,7 +704,7 @@ bottomBarDesktop =()=>{
                     </Grid>
                 </ListItem>
                 </List>
-                
+
             </DialogContent>
         </Dialog>
     )
@@ -742,12 +728,12 @@ bottomBarPhone =()=>{
                         <IconButton onClick={this.handleClickOpenProfile} sx={{margin: 0, bottom: 17, right: 8}} >
                             <Badge badgeContent={(this.state.active_order_id >0 & !this.state.profileShown) ? "": null} color="primary">
                                 <Avatar className='phoneFlippedSmallAvatar'
-                                sx={{ width: 55, height:55 }} 
-                                alt={this.props.nickname} 
+                                sx={{ width: 55, height:55 }}
+                                alt={this.props.nickname}
                                 imgProps={{
                                     onLoad:() => this.props.setAppState({avatarLoaded: true}),
-                                }} 
-                                src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null} 
+                                }}
+                                src={this.props.nickname ? window.location.origin +'/static/assets/avatars/' + this.props.nickname + '.png' : null}
                                 />
                             </Badge>
                         </IconButton>
@@ -757,13 +743,13 @@ bottomBarPhone =()=>{
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
-                        <Tooltip enterTouchDelay="300" title={t("Number of public BUY orders")}> 
+                        <Tooltip enterTouchDelay="300" title={t("Number of public BUY orders")}>
                             <IconButton onClick={this.handleClickOpenExchangeSummary} >
                             <Badge badgeContent={this.state.num_public_buy_orders}  color="action">
                                 <InventoryIcon />
                             </Badge>
                             </IconButton>
-                        </Tooltip> 
+                        </Tooltip>
                     </Grid>
 
                     <Grid item xs={1.6} align="center">
@@ -787,7 +773,7 @@ bottomBarPhone =()=>{
                     </Grid>
 
                     <Grid item xs={1.8} align="center">
-                        <Tooltip enterTouchDelay="300" title={t("24h non-KYC bitcoin premium")}> 
+                        <Tooltip enterTouchDelay="300" title={t("24h non-KYC bitcoin premium")}>
                             <IconButton onClick={this.handleClickOpenExchangeSummary} >
                             <Badge badgeContent={this.state.last_day_nonkyc_btc_premium+"%"}  color="action">
                                 <PriceChangeIcon />
@@ -802,9 +788,9 @@ bottomBarPhone =()=>{
                         </Grid>
                         <Grid item xs={3}>
                         <Tooltip enterTouchDelay="250" title={t("Show community and support links")}>
-                            <IconButton 
-                            color="primary" 
-                            aria-label="Community" 
+                            <IconButton
+                            color="primary"
+                            aria-label="Community"
                             onClick={this.handleClickOpenCommunity} >
                                 <PeopleIcon />
                             </IconButton>
@@ -812,8 +798,8 @@ bottomBarPhone =()=>{
                         </Grid>
                         <Grid item xs={3}>
                         <Tooltip enterTouchDelay="250" title={t("Show stats for nerds")}>
-                            <IconButton color="primary" 
-                                aria-label="Stats for Nerds" 
+                            <IconButton color="primary"
+                                aria-label="Stats for Nerds"
                                 onClick={this.handleClickOpenStatsForNerds} >
                                 <SettingsIcon />
                             </IconButton>
@@ -840,4 +826,4 @@ bottomBarPhone =()=>{
         )
     }
 }
-export default withTranslation()(BottomBar);
\ No newline at end of file
+export default withTranslation()(BottomBar);
diff --git a/frontend/src/components/MakerPage.js b/frontend/src/components/MakerPage.js
index 633a9508..3e835d58 100644
--- a/frontend/src/components/MakerPage.js
+++ b/frontend/src/components/MakerPage.js
@@ -14,22 +14,7 @@ import LockIcon from '@mui/icons-material/Lock';
 import HourglassTopIcon from '@mui/icons-material/HourglassTop';
 import currencyDict from '../../static/assets/currencies.json';
 
-function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== '') {
-        const cookies = document.cookie.split(';');
-        for (let i = 0; i < cookies.length; i++) {
-            const cookie = cookies[i].trim();
-            // Does this cookie string begin with the name we want?
-            if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                break;
-            }
-        }
-    }
-    return cookieValue;
-}
-const csrftoken = getCookie('csrftoken');
+import { getCookie } from "../utils/cookies";
 
 // pretty numbers
 function pn(x) {
@@ -38,7 +23,7 @@ function pn(x) {
     }
     var parts = x.toString().split(".");
     parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    return parts.join(".");  
+    return parts.join(".");
   }
 
 class MakerPage extends Component {
@@ -55,7 +40,7 @@ class MakerPage extends Component {
   constructor(props) {
     super(props);
     this.state={
-        is_explicit: false, 
+        is_explicit: false,
         type: 0,
         currency: this.defaultCurrency,
         currencyCode: this.defaultCurrencyCode,
@@ -80,9 +65,9 @@ class MakerPage extends Component {
     fetch('/api/limits/')
       .then((response) => response.json())
       .then((data) => this.setState({
-          limits:data, 
+          limits:data,
           loadingLimits:false,
-          minAmount: this.state.amount ? parseFloat((this.state.amount/2).toPrecision(2)) : parseFloat(Number(data[this.state.currency]['max_amount']*0.25).toPrecision(2)), 
+          minAmount: this.state.amount ? parseFloat((this.state.amount/2).toPrecision(2)) : parseFloat(Number(data[this.state.currency]['max_amount']*0.25).toPrecision(2)),
           maxAmount: this.state.amount ? this.state.amount : parseFloat(Number(data[this.state.currency]['max_amount']*0.75).toPrecision(2)),
         }));
   }
@@ -96,7 +81,7 @@ class MakerPage extends Component {
 
   handleTypeChange=(e)=>{
       this.setState({
-          type: e.target.value,     
+          type: e.target.value,
       });
   }
   handleCurrencyChange=(e)=>{
@@ -106,24 +91,24 @@ class MakerPage extends Component {
     });
     if(this.state.enableAmountRange){
         this.setState({
-            minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)), 
+            minAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.25).toPrecision(2)),
             maxAmount: parseFloat(Number(this.state.limits[e.target.value]['max_amount']*0.75).toPrecision(2)),
         })
     }
 }
     handleAmountChange=(e)=>{
         this.setState({
-            amount: e.target.value,     
+            amount: e.target.value,
         });
     }
     handleMinAmountChange=(e)=>{
         this.setState({
-            minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),     
+            minAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
         });
     }
     handleMaxAmountChange=(e)=>{
         this.setState({
-            maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),  
+            maxAmount: parseFloat(Number(e.target.value).toPrecision(e.target.value < 100 ? 2 : 3)),
         });
     }
 
@@ -155,7 +140,7 @@ class MakerPage extends Component {
                 lowerValue = upperValue/maxRange
             }
         }
-        
+
         this.setState({
             minAmount: parseFloat(Number(lowerValue).toPrecision(lowerValue < 100 ? 2 : 3)),
             maxAmount: parseFloat(Number(upperValue).toPrecision(upperValue < 100 ? 2 : 3)),
@@ -165,12 +150,12 @@ class MakerPage extends Component {
     handlePaymentMethodChange=(value)=>{
         if (value.length > 50){
             this.setState({
-                badPaymentMethod: true,    
+                badPaymentMethod: true,
             });
         }else{
         this.setState({
             payment_method: value.substring(0,53),
-            badPaymentMethod: value.length > 50,    
+            badPaymentMethod: value.length > 50,
         });
     }
     }
@@ -188,7 +173,7 @@ class MakerPage extends Component {
 
         this.setState({
             premium: e.target.value,
-            badPremium: bad_premium,     
+            badPremium: bad_premium,
         });
     }
 
@@ -203,20 +188,20 @@ class MakerPage extends Component {
 
         this.setState({
             satoshis: e.target.value,
-            badSatoshis: bad_sats,      
+            badSatoshis: bad_sats,
         });
     }
     handleClickRelative=(e)=>{
         this.setState({
-            is_explicit: false, 
+            is_explicit: false,
         });
         this.handlePremiumChange();
     }
-    
+
     handleClickExplicit=(e)=>{
         if(!this.state.enableAmountRange){
             this.setState({
-                is_explicit: true,   
+                is_explicit: true,
             });
             this.handleSatoshisChange();
         }
@@ -268,14 +253,14 @@ class MakerPage extends Component {
                         {t("Buy or Sell Bitcoin?")}
                     </FormHelperText>
                     <RadioGroup row defaultValue="0" onChange={this.handleTypeChange}>
-                        <FormControlLabel 
-                            value="0" 
+                        <FormControlLabel
+                            value="0"
                             control={<Radio color="primary"/>}
                             label={t("Buy")}
                             labelPlacement="Top"
                         />
-                        <FormControlLabel 
-                            value="1" 
+                        <FormControlLabel
+                            value="1"
                             control={<Radio color="secondary"/>}
                             label={t("Sell")}
                             labelPlacement="Top"
@@ -284,21 +269,21 @@ class MakerPage extends Component {
                 </FormControl>
                 </div>
             </Grid>
-            
+
             <Grid containter xs={12} alignItems="stretch" style={{ display: "flex" }}>
                     <div style={{maxWidth:150}}>
                     <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Amount of fiat to exchange for bitcoin")}>
                         <TextField
                             disabled = {this.state.enableAmountRange}
                             variant = {this.state.enableAmountRange ? 'filled' : 'outlined'}
-                            error={this.state.amount <= 0 & this.state.amount != "" } 
+                            error={this.state.amount <= 0 & this.state.amount != "" }
                             helperText={this.state.amount <= 0 & this.state.amount != "" ? t("Invalid") : null}
                             label={t("Amount")}
-                            type="number" 
+                            type="number"
                             required="true"
                             value={this.state.amount}
                             inputProps={{
-                                min:0 , 
+                                min:0 ,
                                 style: {textAlign:"center"}
                             }}
                             onChange={this.handleAmountChange}
@@ -308,8 +293,8 @@ class MakerPage extends Component {
                         <div >
                             <Select
                                 sx={{width:'120px'}}
-                                required="true" 
-                                defaultValue={this.defaultCurrency} 
+                                required="true"
+                                defaultValue={this.defaultCurrency}
                                 inputProps={{
                                     style: {textAlign:"center"}
                                 }}
@@ -345,8 +330,8 @@ class MakerPage extends Component {
                     </FormHelperText>
                     <RadioGroup row defaultValue="relative">
                     <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Let the price move with the market")}>
-                        <FormControlLabel 
-                        value="relative" 
+                        <FormControlLabel
+                        value="relative"
                         control={<Radio color="primary"/>}
                         label={t("Relative")}
                         labelPlacement="Top"
@@ -355,8 +340,8 @@ class MakerPage extends Component {
                     </Tooltip>
                     <Tooltip placement="top" enterTouchDelay="0" enterDelay="1000" enterNextDelay="2000" title={t("Set a fix amount of satoshis")}>
                         <FormControlLabel
-                        disabled={this.state.enableAmountRange} 
-                        value="explicit" 
+                        disabled={this.state.enableAmountRange}
+                        value="explicit"
                         control={<Radio color="secondary"/>}
                         label={t("Explicit")}
                         labelPlacement="Top"
@@ -374,27 +359,27 @@ class MakerPage extends Component {
                             label={t("Satoshis")}
                             error={this.state.badSatoshis}
                             helperText={this.state.badSatoshis}
-                            type="number" 
+                            type="number"
                             required="true"
-                            value={this.state.satoshis} 
+                            value={this.state.satoshis}
                             inputProps={{
-                                min:this.minTradeSats , 
-                                max:this.maxTradeSats , 
+                                min:this.minTradeSats ,
+                                max:this.maxTradeSats ,
                                 style: {textAlign:"center"}
                             }}
                             onChange={this.handleSatoshisChange}
                         />
                     </div>
                     <div style={{display: this.state.is_explicit ? 'none':''}}>
-                        <TextField 
+                        <TextField
                                 sx={{width:240}}
                                 error={this.state.badPremium}
                                 helperText={this.state.badPremium}
                                 label={t("Premium over Market (%)")}
-                                type="number" 
+                                type="number"
                                 inputProps={{
-                                    min: -100, 
-                                    max: 999, 
+                                    min: -100,
+                                    max: 999,
                                     style: {textAlign:"center"}
                                 }}
                                 onChange={this.handlePremiumChange}
@@ -409,16 +394,16 @@ class MakerPage extends Component {
         let d = new Date(date),
             hours = d.getHours(),
             minutes = d.getMinutes();
-        
+
         var total_secs = hours*60*60 + minutes * 60;
 
         this.setState({
             changedPublicExpiryTime: true,
-            publicExpiryTime: date, 
+            publicExpiryTime: date,
             publicDuration: total_secs,
             badDuration: false,
         });
-        
+
     }
 
     getMaxAmount = () => {
@@ -470,7 +455,7 @@ class MakerPage extends Component {
           height: 3,
         },
       }));
-    
+
     RangeThumbComponent(props) {
         const { children, ...other } = props;
         return (
@@ -497,7 +482,7 @@ class MakerPage extends Component {
                 <span style={{width: 40}}>{t("From")}</span>
                 <TextField
                     variant="standard"
-                    type="number" 
+                    type="number"
                     size="small"
                     value={this.state.minAmount}
                     onChange={this.handleMinAmountChange}
@@ -508,7 +493,7 @@ class MakerPage extends Component {
                 <TextField
                     variant="standard"
                     size="small"
-                    type="number" 
+                    type="number"
                     value={this.state.maxAmount}
                     error={this.maxAmountError()}
                     onChange={this.handleMaxAmountChange}
@@ -524,7 +509,7 @@ class MakerPage extends Component {
         const { t } = this.props;
         return(
             <Paper elevation={12} style={{ padding: 8, width:'280px', align:'center'}}>
-            
+
             <Grid container xs={12}  spacing={1}>
 
             <Grid item xs={12} align="center" spacing={1}>
@@ -653,7 +638,7 @@ class MakerPage extends Component {
                             <Tab label={t("Customize")} {...this.a11yProps(1)} />
                         </Tabs>
                     </Box>
-                            
+
                     <Grid item xs={12} align="center" spacing={1}>
                         <div style={{ display: this.state.showAdvanced == false ? '':'none'}}>
                             <this.StandardMakerOptions/>
@@ -680,10 +665,10 @@ class MakerPage extends Component {
 
             <Grid item xs={12} align="center">
                 {/* conditions to disable the make button */}
-                {(this.state.amount == null & (this.state.enableAmountRange == false || this.state.loadingLimits) || 
+                {(this.state.amount == null & (this.state.enableAmountRange == false || this.state.loadingLimits) ||
                     this.state.enableAmountRange & (this.minAmountError() || this.maxAmountError()) ||
-                    this.state.amount <= 0 & !this.state.enableAmountRange || 
-                    (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) || 
+                    this.state.amount <= 0 & !this.state.enableAmountRange ||
+                    (this.state.is_explicit & (this.state.badSatoshis != null || this.state.satoshis == null)) ||
                     (!this.state.is_explicit & this.state.badPremium != null))
                     ?
                     <Tooltip enterTouchDelay="0" title={t("You must fill the order correctly")}>
@@ -691,8 +676,8 @@ class MakerPage extends Component {
                     </Tooltip>
                     :
                     <Button color="primary" variant="contained" onClick={this.handleCreateOfferButtonPressed}>{t("Create Order")}</Button>
-                    } 
-                
+                    }
+
             </Grid>
             <Grid item xs={12} align="center">
                 {this.state.badRequest ?
@@ -702,21 +687,21 @@ class MakerPage extends Component {
                 : ""}
                 <Typography component="subtitle2" variant="subtitle2">
                     <div align='center'>
-                        {this.state.type==0 ? 
+                        {this.state.type==0 ?
                             t("Create a BTC buy order for ")
                         :
                             t("Create a BTC sell order for ")
-                        } 
-                        {this.state.enableAmountRange & this.state.minAmount != null? 
-                            this.state.minAmount+"-"+this.state.maxAmount 
-                        : 
-                            pn(this.state.amount)} 
+                        }
+                        {this.state.enableAmountRange & this.state.minAmount != null?
+                            this.state.minAmount+"-"+this.state.maxAmount
+                        :
+                            pn(this.state.amount)}
                         {" " + this.state.currencyCode}
-                        {this.state.is_explicit ? 
+                        {this.state.is_explicit ?
                             t(" of {{satoshis}} Satoshis",{satoshis: pn(this.state.satoshis)})
-                        : 
-                            (this.state.premium == 0 ? t(" at market price") : 
-                                (this.state.premium > 0 ? 
+                        :
+                            (this.state.premium == 0 ? t(" at market price") :
+                                (this.state.premium > 0 ?
                                     t(" at a {{premium}}% premium", {premium: this.state.premium})
                                 :
                                     t(" at a {{discount}}% discount", {discount: -this.state.premium}))
@@ -735,4 +720,4 @@ class MakerPage extends Component {
   }
 }
 
-export default withTranslation()(MakerPage);
\ No newline at end of file
+export default withTranslation()(MakerPage);
diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js
index 98aee4f0..d3290e14 100644
--- a/frontend/src/components/OrderPage.js
+++ b/frontend/src/components/OrderPage.js
@@ -17,22 +17,7 @@ import PaymentsIcon from '@mui/icons-material/Payments';
 import ArticleIcon from '@mui/icons-material/Article';
 import { t } from "i18next";
 
-function getCookie(name) {
-  let cookieValue = null;
-  if (document.cookie && document.cookie !== '') {
-      const cookies = document.cookie.split(';');
-      for (let i = 0; i < cookies.length; i++) {
-          const cookie = cookies[i].trim();
-          // Does this cookie string begin with the name we want?
-          if (cookie.substring(0, name.length + 1) === (name + '=')) {
-              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-              break;
-          }
-      }
-  }
-  return cookieValue;
-}
-const csrftoken = getCookie('csrftoken');
+import { getCookie } from "../utils/cookies";
 
 // pretty numbers
 function pn(x) {
@@ -126,7 +111,7 @@ class OrderPage extends Component {
     this.getOrderDetails();
   }
 
-  // Countdown Renderer callback with condition 
+  // Countdown Renderer callback with condition
   countdownRenderer = ({ total, hours, minutes, seconds, completed }) => {
     const { t } = this.props;
   if (completed) {
@@ -148,20 +133,20 @@ class OrderPage extends Component {
   }
   };
 
-  // Countdown Renderer callback with condition 
+  // Countdown Renderer callback with condition
   countdownPenaltyRenderer = ({ minutes, seconds, completed }) => {
     const { t } = this.props;
     if (completed) {
       // Render a completed state
       return (<span> {t("Penalty lifted, good to go!")}</span>);
-  
+
     } else {
       return (
         <span> {t("You cannot take an order yet! Wait {{timeMin}}m {{timeSec}}s",{timeMin: zeroPad(minutes), timeSec: zeroPad(seconds) })} </span>
       );
     }
     };
-  
+
   handleTakeAmountChange = (e) => {
     if (e.target.value != "" & e.target.value != null){
       this.setState({takeAmount: parseFloat(e.target.value)})
@@ -191,16 +176,16 @@ class OrderPage extends Component {
           <Tooltip placement="top" enterTouchDelay="500" enterDelay="700" enterNextDelay="2000" title={t("Enter amount of fiat to exchange for bitcoin")}>
             <Paper elevation={5} sx={{maxHeight:40}}>
               <TextField
-                  error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" } 
+                  error={(this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount) & this.state.takeAmount != "" }
                   helperText={this.amountHelperText()}
                   label={t("Amount {{currencyCode}}", {currencyCode: this.state.currencyCode})}
                   size="small"
-                  type="number" 
+                  type="number"
                   required="true"
                   value={this.state.takeAmount}
                   inputProps={{
                       min:this.state.min_amount ,
-                      max:this.state.max_amount ,  
+                      max:this.state.max_amount ,
                       style: {textAlign:"center"}
                   }}
                   onChange={this.handleTakeAmountChange}
@@ -211,7 +196,7 @@ class OrderPage extends Component {
           <div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? '':'none'}}>
             <Tooltip placement="top" enterTouchDelay="0" enterDelay="500" enterNextDelay="1200" title={t("You must specify an amount first")}>
               <Paper elevation={4}>
-                <Button sx={{height:38}} variant='contained' color='primary' 
+                <Button sx={{height:38}} variant='contained' color='primary'
                   disabled={true}>
                   {t("Take Order")}
                 </Button>
@@ -220,7 +205,7 @@ class OrderPage extends Component {
           </div>
           <div style={{height:38, top:'1px', position:'relative', display: (this.state.takeAmount < this.state.min_amount || this.state.takeAmount > this.state.max_amount || this.state.takeAmount == "" || this.state.takeAmount == null) ? 'none':''}}>
           <Paper elevation={4}>
-              <Button sx={{height:38}} variant='contained' color='primary' 
+              <Button sx={{height:38}} variant='contained' color='primary'
                 onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}>
                 {t("Take Order")}
               </Button>
@@ -232,7 +217,7 @@ class OrderPage extends Component {
       return(
         <>
         <this.InactiveMakerDialog/>
-        <Button variant='contained' color='primary' 
+        <Button variant='contained' color='primary'
           onClick={this.state.maker_status=='Inactive' ? this.handleClickOpenInactiveMakerDialog : this.takeOrder}>
           {t("Take Order")}
         </Button>
@@ -256,7 +241,7 @@ class OrderPage extends Component {
 
   LinearDeterminate =()=> {
     const [progress, setProgress] = React.useState(0);
-  
+
     React.useEffect(() => {
       const timer = setInterval(() => {
         setProgress((oldProgress) => {
@@ -264,12 +249,12 @@ class OrderPage extends Component {
           return (left / this.state.total_secs_exp) * 100;
         });
       }, 1000);
-  
+
       return () => {
         clearInterval(timer);
       };
     }, []);
-  
+
     return (
       <Box sx={{ width: '100%' }}>
         <LinearProgress variant="determinate" value={progress} />
@@ -291,14 +276,14 @@ class OrderPage extends Component {
       .then((response) => response.json())
       .then((data) => this.completeSetState(data));
   }
-  
+
   // set delay to the one matching the order status. If null order status, delay goes to 9999999.
   setDelay = (status)=>{
     return status >= 0 ? this.statusToDelay[status.toString()] : 99999999;
   }
 
   getCurrencyCode(val){
-    let code = val ? currencyDict[val.toString()] : "" 
+    let code = val ? currencyDict[val.toString()] : ""
     return code
   }
 
@@ -441,7 +426,7 @@ class OrderPage extends Component {
   CancelButton = () => {
     const { t } = this.props;
     // If maker and Waiting for Bond. Or if taker and Waiting for bond.
-    // Simply allow to cancel without showing the cancel dialog. 
+    // Simply allow to cancel without showing the cancel dialog.
     if ((this.state.is_maker & [0,1].includes(this.state.status)) || this.state.is_taker & this.state.status == 3){
       return(
         <Grid item xs={12} align="center">
@@ -459,9 +444,9 @@ class OrderPage extends Component {
           </Grid>
         </div>
       )}
-    
+
     // If the escrow is Locked, show the collaborative cancel button.
-  
+
     if ([8,9].includes(this.state.status)){
       return(
         <Grid item xs={12} align="center">
@@ -498,8 +483,8 @@ class OrderPage extends Component {
               <Tooltip placement="top" enterTouchDelay="0" title={t(this.state.maker_status)} >
                 <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.maker_status)}>
                   <Avatar className="flippedSmallAvatar"
-                    alt={this.state.maker_nick} 
-                    src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'} 
+                    alt={this.state.maker_nick}
+                    src={window.location.origin +'/static/assets/avatars/' + this.state.maker_nick + '.png'}
                     />
                 </Badge>
               </Tooltip>
@@ -514,18 +499,18 @@ class OrderPage extends Component {
                     <Divider />
                     <ListItem align="left">
                       <ListItemText primary={this.state.taker_nick + (this.state.type ? " "+t("(Buyer)") : " "+t("(Seller)"))} secondary={t("Order taker")}/>
-                      <ListItemAvatar > 
+                      <ListItemAvatar >
                       <Tooltip enterTouchDelay="0" title={t(this.state.taker_status)} >
                         <Badge variant="dot" overlap="circular" badgeContent="" color={this.statusBadgeColor(this.state.taker_status)}>
                           <Avatar className="smallAvatar"
-                            alt={this.state.taker_nick} 
+                            alt={this.state.taker_nick}
                             src={window.location.origin +'/static/assets/avatars/' + this.state.taker_nick + '.png'}
                             />
                         </Badge>
                         </Tooltip>
                       </ListItemAvatar>
-                    </ListItem>           
-                  </>: 
+                    </ListItem>
+                  </>:
                   ""
                   }
                   <Divider><Chip label={t("Order Details")}/></Divider>
@@ -539,7 +524,7 @@ class OrderPage extends Component {
               </>
             :<Divider><Chip label={t("Order Details")}/></Divider>
             }
-            
+
             <ListItem>
               <ListItemIcon>
                 <div style={{zoom:1.25,opacity: 0.7, '-ms-zoom': 1.25, '-webkit-zoom': 1.25,'-moz-transform':  'scale(1.25,1.25)', '-moz-transform-origin': 'left center'}}>
@@ -570,15 +555,15 @@ class OrderPage extends Component {
               <ListItemIcon>
                 <PriceChangeIcon/>
               </ListItemIcon>
-            {this.state.price_now? 
+            {this.state.price_now?
                 <ListItemText primary={t("{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%", {price: pn(this.state.price_now), currencyCode:this.state.currencyCode, premium: this.state.premium_now})} secondary={t("Price and Premium")}/>
             :
-              (this.state.is_explicit ? 
+              (this.state.is_explicit ?
                 <ListItemText primary={pn(this.state.satoshis)} secondary={t("Amount of Satoshis")}/>
                 :
                 <ListItemText primary={parseFloat(parseFloat(this.state.premium).toFixed(2))+"%"} secondary={t("Premium over market price")}/>
               )
-            } 
+            }
             </ListItem>
             <Divider />
 
@@ -599,53 +584,53 @@ class OrderPage extends Component {
             </ListItem>
             <this.LinearDeterminate />
             </List>
-            
+
             {/* If the user has a penalty/limit */}
-            {this.state.penalty ? 
+            {this.state.penalty ?
             <>
               <Divider />
               <Grid item xs={12} align="center">
                 <Alert severity="warning" sx={{maxWidth:360}}>
                    <Countdown date={new Date(this.state.penalty)} renderer={this.countdownPenaltyRenderer} />
-                </Alert>  
+                </Alert>
               </Grid>
             </>
-            : null} 
-            
+            : null}
+
             {/* If the counterparty asked for collaborative cancel */}
-            {this.state.pending_cancel ? 
+            {this.state.pending_cancel ?
             <>
               <Divider />
               <Grid item xs={12} align="center">
                 <Alert severity="warning" sx={{maxWidth:360}}>
                   {t("{{nickname}} is asking for a collaborative cancel", {nickname: this.state.is_maker ? this.state.taker_nick : this.state.maker_nick})}
-                </Alert>  
+                </Alert>
               </Grid>
             </>
-            : null} 
+            : null}
 
             {/* If the user has asked for a collaborative cancel */}
-            {this.state.asked_for_cancel ? 
+            {this.state.asked_for_cancel ?
             <>
               <Divider />
               <Grid item xs={12} align="center">
                 <Alert severity="warning" sx={{maxWidth:360}}>
                   {t("You asked for a collaborative cancellation")}
-                </Alert>  
+                </Alert>
               </Grid>
             </>
-            : null} 
+            : null}
 
           </Paper>
         </Grid>
-        
+
         <Grid item xs={12} align="center">
           {/* Participants can see the "Cancel" Button, but cannot see the "Back" or "Take Order" buttons */}
           {this.state.is_participant ?
             <>
               <this.CancelButton/>
               <this.BackButton/>
-            </> 
+            </>
           :
             <Grid container spacing={1}>
               <Grid item xs={12} align="center">
@@ -660,7 +645,7 @@ class OrderPage extends Component {
       </Grid>
     )
   }
-  
+
   doubleOrderPageDesktop=()=>{
     return(
       <Grid container xs={12} align="center" spacing={2} >
@@ -673,7 +658,7 @@ class OrderPage extends Component {
       </Grid>
     )
   }
-  
+
   a11yProps(index) {
     return {
       id: `simple-tab-${index}`,
@@ -724,7 +709,7 @@ class OrderPage extends Component {
           <Button variant='contained' color='secondary' onClick={this.props.history.goBack}>{t("Back")}</Button>
         </div>
         :
-        (this.state.is_participant ? 
+        (this.state.is_participant ?
           <>
             {/* Desktop View */}
             <MediaQuery minWidth={920}>
@@ -744,11 +729,11 @@ class OrderPage extends Component {
   }
 
   render (){
-    return ( 
+    return (
       // Only so nothing shows while requesting the first batch of data
       this.state.loading ? <CircularProgress /> : this.orderDetailsPage()
     );
   }
 }
 
-export default withTranslation()(OrderPage);
\ No newline at end of file
+export default withTranslation()(OrderPage);
diff --git a/frontend/src/components/TradeBox.js b/frontend/src/components/TradeBox.js
index 770188d5..5607799a 100644
--- a/frontend/src/components/TradeBox.js
+++ b/frontend/src/components/TradeBox.js
@@ -17,22 +17,7 @@ import LockOpenIcon from '@mui/icons-material/LockOpen';
 import BalanceIcon from '@mui/icons-material/Balance';
 import ContentCopy from "@mui/icons-material/ContentCopy";
 
-function getCookie(name) {
-  let cookieValue = null;
-  if (document.cookie && document.cookie !== '') {
-      const cookies = document.cookie.split(';');
-      for (let i = 0; i < cookies.length; i++) {
-          const cookie = cookies[i].trim();
-          // Does this cookie string begin with the name we want?
-          if (cookie.substring(0, name.length + 1) === (name + '=')) {
-              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-              break;
-          }
-      }
-  }
-  return cookieValue;
-}
-const csrftoken = getCookie('csrftoken');
+import { getCookie } from "../utils/cookies";
 
 // pretty numbers
 function pn(x) {
@@ -54,7 +39,7 @@ class TradeBox extends Component {
     }
   }
 
-  
+
 
   Sound = ({soundFileName}) => (
     // Four filenames: "locked-invoice", "taker-found", "open-chat", "successful"
@@ -209,7 +194,7 @@ class TradeBox extends Component {
               {t("Lock {{amountSats}} Sats to PUBLISH order", {amountSats: pn(this.props.data.bond_satoshis)})}
             </b> {" " + this.stepXofY()}
           </Typography>
-          : 
+          :
           <Typography color="primary" component="subtitle1" variant="subtitle1">
             <b>
               {t("Lock {{amountSats}} Sats to TAKE order", {amountSats: pn(this.props.data.bond_satoshis)})}
@@ -224,13 +209,13 @@ class TradeBox extends Component {
           <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
             <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.bond_invoice)}} align="center"> <ContentCopy/>{t("Copy to clipboard")}</Button>
           </Tooltip>
-        </Grid> 
+        </Grid>
         <Grid item xs={12} align="center">
-        <TextField 
+        <TextField
             hiddenLabel
-            variant="standard" 
+            variant="standard"
             size="small"
-            defaultValue={this.props.data.bond_invoice} 
+            defaultValue={this.props.data.bond_invoice}
             disabled="true"
             helperText={t("This is a hold invoice, it will freeze in your wallet. It will be charged only if you cancel or lose a dispute.")}
             color = "secondary"
@@ -302,13 +287,13 @@ class TradeBox extends Component {
           <Tooltip disableHoverListener enterTouchDelay="0" title={t("Copied!")}>
             <Button size="small" color="inherit" onClick={() => {navigator.clipboard.writeText(this.props.data.escrow_invoice)}} align="center"> <ContentCopy/>Copy to clipboard</Button>
           </Tooltip>
-        </Grid> 
+        </Grid>
         <Grid item xs={12} align="center">
-          <TextField 
+          <TextField
             hiddenLabel
-            variant="filled" 
+            variant="filled"
             size="small"
-            defaultValue={this.props.data.escrow_invoice} 
+            defaultValue={this.props.data.escrow_invoice}
             disabled="true"
             helperText={t("This is a hold invoice, it will freeze in your wallet. It will be released to the buyer once you confirm to have received the {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})}
             color = "secondary"
@@ -397,7 +382,7 @@ class TradeBox extends Component {
             <ListItem>
               <Typography component="body2" variant="body2" align="left">
                 <p>{t("Be patient while robots check the book. It might take some time. This box will ring 🔊 once a robot takes your order.")} </p>
-                <p>{t("Please note that if your premium is excessive or your currency or payment methods are not popular, your order might expire untaken. Your bond will return to you (no action needed).")}</p> 
+                <p>{t("Please note that if your premium is excessive or your currency or payment methods are not popular, your order might expire untaken. Your bond will return to you (no action needed).")}</p>
               </Typography>
             </ListItem>
             <Grid item xs={12} align="center">
@@ -416,13 +401,13 @@ class TradeBox extends Component {
               </ListItemIcon>
                 <ListItemText primary={this.props.data.num_similar_orders} secondary={t("Public orders for {{currencyCode}}",{currencyCode: this.props.data.currencyCode})}/>
               </ListItem>
-              
+
             <Divider/>
               <ListItem>
               <ListItemIcon>
                 <PercentIcon/>
               </ListItemIcon>
-                <ListItemText primary={t("Premium rank") +" "+this.props.data.premium_percentile*100+"%"} 
+                <ListItemText primary={t("Premium rank") +" "+this.props.data.premium_percentile*100+"%"}
                   secondary={t("Among public {{currencyCode}} orders (higher is cheaper)",{ currencyCode: this.props.data.currencyCode })}/>
               </ListItem>
             <Divider/>
@@ -437,7 +422,7 @@ class TradeBox extends Component {
   handleInputInvoiceChanged=(e)=>{
     this.setState({
         invoice: e.target.value,
-        badInvoice: false,     
+        badInvoice: false,
     });
   }
 
@@ -461,7 +446,7 @@ class TradeBox extends Component {
   handleInputDisputeChanged=(e)=>{
     this.setState({
         statement: e.target.value,
-        badStatement: false,     
+        badStatement: false,
     });
   }
 
@@ -512,17 +497,17 @@ class TradeBox extends Component {
         </Grid>
         <Grid item xs={12} align="left">
           <Typography component="body2" variant="body2">
-            {t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.", 
-            {amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4)), 
-              currencyCode: this.props.data.currencyCode, 
-              amountSats: pn(this.props.data.invoice_amount)} 
+            {t("The taker is committed! Before letting you send {{amountFiat}} {{currencyCode}}, we want to make sure you are able to receive the BTC. Please provide a valid invoice for {{amountSats}} Satoshis.",
+            {amountFiat: parseFloat(parseFloat(this.props.data.amount).toFixed(4)),
+              currencyCode: this.props.data.currencyCode,
+              amountSats: pn(this.props.data.invoice_amount)}
               )
             }
           </Typography>
         </Grid>
 
         <Grid item xs={12} align="center">
-          <TextField 
+          <TextField
               error={this.state.badInvoice}
               helperText={this.state.badInvoice ? this.state.badInvoice : "" }
               label={t("Payout Lightning Invoice")}
@@ -580,9 +565,9 @@ class TradeBox extends Component {
       )
     }else{
       return (
-  
+
         // TODO Option to upload files
-  
+
         <Grid container spacing={1}>
           <Grid item xs={12} align="center">
             <Typography color="primary" component="subtitle1" variant="subtitle1">
@@ -594,9 +579,9 @@ class TradeBox extends Component {
             {t("Please, submit your statement. Be clear and specific about what happened and provide the necessary evidence. You MUST provide a contact method: burner email, XMPP or telegram username to follow up with the staff. Disputes are solved at the discretion of real robots (aka humans), so be as helpful as possible to ensure a fair outcome. Max 5000 chars.")}
             </Typography>
           </Grid>
-  
+
           <Grid item xs={12} align="center">
-            <TextField 
+            <TextField
                 error={this.state.badStatement}
                 helperText={this.state.badStatement ? this.state.badStatement : "" }
                 label={t("Submit dispute statement")}
@@ -818,7 +803,7 @@ handleRatingRobosatsChange=(e)=>{
         var showReveiceButton=false;
         var showDisputeButton=true;
       }
-          
+
     //In Chatroom - Fiat sent - showChat(showSendButton, showReveiceButton, showDisputeButton)
       if(this.props.data.is_buyer & this.props.data.status == 10){
         var showSendButton=false;
@@ -829,8 +814,8 @@ handleRatingRobosatsChange=(e)=>{
         var showSendButton=false;
         var showReveiceButton=true;
         var showDisputeButton=true;
-      }            
-  
+      }
+
     return(
       <Grid container spacing={1}>
         {/* Make confirmation sound for Chat Open. */}
@@ -841,7 +826,7 @@ handleRatingRobosatsChange=(e)=>{
           </Typography>
         </Grid>
         <Grid item xs={12} align="center">
-          {this.props.data.is_seller ? 
+          {this.props.data.is_seller ?
           <Typography component="body2" variant="body2"  align="center">
             {this.props.data.status == 9?
             t("Say hi! Be helpful and concise. Let them know how to send you {{currencyCode}}.",{currencyCode: this.props.data.currencyCode})
@@ -909,13 +894,13 @@ handleRatingRobosatsChange=(e)=>{
         {this.state.rating_platform!=5 & this.state.rating_platform!=null ?
         <Grid item xs={12} align="center">
           <Typography component="body2" variant="body2" align="center">
-            <p><b>{t("Thank you for using Robosats!")}</b></p> 
+            <p><b>{t("Thank you for using Robosats!")}</b></p>
             <p><Trans i18nKey="let_us_know_hot_to_improve">Let us know how the platform could improve (<Link target='_blank' href="https://t.me/robosats">Telegram</Link> / <Link target='_blank' href="https://github.com/Reckless-Satoshi/robosats/issues">Github</Link>)</Trans></p>
           </Typography>
         </Grid>
         : null}
         <Grid item xs={12} align="center">
-          <Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button> 
+          <Button color='primary' onClick={() => {this.props.push('/')}}>{t("Start Again")}</Button>
         </Grid>
       {this.showBondIsReturned()}
     </Grid>
@@ -944,13 +929,13 @@ handleRatingRobosatsChange=(e)=>{
     )
   }
 
-  // Countdown Renderer callback with condition 
+  // Countdown Renderer callback with condition
   countdownRenderer = ({ minutes, seconds, completed }) => {
     const { t } = this.props;
     if (completed) {
       // Render a completed state
       return (<div align="center"><span> {t("Retrying!")} </span><br/><CircularProgress/></div> );
-  
+
     } else {
       return (
         <span>{zeroPad(minutes)}m {zeroPad(seconds)}s </span>
@@ -970,7 +955,7 @@ handleRatingRobosatsChange=(e)=>{
           </Grid>
           <Grid item xs={12} align="center">
             <Typography component="body2" variant="body2" align="center">
-              {t("Your invoice has expired or more than 3 payment attempts have been made. Muun wallet is not recommended. ")} 
+              {t("Your invoice has expired or more than 3 payment attempts have been made. Muun wallet is not recommended. ")}
               <Link href="https://github.com/Reckless-Satoshi/robosats/issues/44"> {t("Check the list of compatible wallets")}</Link>
             </Typography>
           </Grid>
@@ -980,7 +965,7 @@ handleRatingRobosatsChange=(e)=>{
             </Typography>
           </Grid>
           <Grid item xs={12} align="center">
-            <TextField 
+            <TextField
                 error={this.state.badInvoice}
                 helperText={this.state.badInvoice ? this.state.badInvoice : "" }
                 label={t("Payout Lightning Invoice")}
@@ -1084,4 +1069,4 @@ handleRatingRobosatsChange=(e)=>{
   }
 }
 
-export default withTranslation()(TradeBox);
\ No newline at end of file
+export default withTranslation()(TradeBox);
diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
index 9b4acfda..3e5954f3 100644
--- a/frontend/src/components/UserGenPage.js
+++ b/frontend/src/components/UserGenPage.js
@@ -11,22 +11,7 @@ import ContentCopy from "@mui/icons-material/ContentCopy";
 import RoboSatsNoTextIcon from "./icons/RoboSatsNoTextIcon"
 import BoltIcon from '@mui/icons-material/Bolt';
 
-function getCookie(name) {
-  let cookieValue = null;
-  if (document.cookie && document.cookie !== '') {
-      const cookies = document.cookie.split(';');
-      for (let i = 0; i < cookies.length; i++) {
-          const cookie = cookies[i].trim();
-          // Does this cookie string begin with the name we want?
-          if (cookie.substring(0, name.length + 1) === (name + '=')) {
-              cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-              break;
-          }
-      }
-  }
-  return cookieValue;
-}
-const csrftoken = getCookie('csrftoken');
+import { getCookie } from "../utils/cookies";
 
 class UserGenPage extends Component {
   constructor(props) {
@@ -59,7 +44,7 @@ class UserGenPage extends Component {
 
   // sort of cryptographically strong function to generate Base62 token client-side
   genBase62Token(length)
-  {   
+  {
       return window.btoa(Array.from(
         window.crypto.getRandomValues(
           new Uint8Array(length * 2)))
@@ -161,7 +146,7 @@ class UserGenPage extends Component {
             <div>
               <Grid item xs={12} align="center">
                 <Typography component="h5" variant="h5">
-                  <b>{this.state.nickname ? 
+                  <b>{this.state.nickname ?
                     <div style={{display:'flex', alignItems:'center', justifyContent:'center', flexWrap:'wrap', height:'45px'}}>
                       <BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/><a>{this.state.nickname}</a><BoltIcon sx={{ color: "#fcba03", height: '33px',width: '33px'}}/>
                     </div>
@@ -273,4 +258,4 @@ class UserGenPage extends Component {
   }
 }
 
-export default withTranslation()(UserGenPage);
\ No newline at end of file
+export default withTranslation()(UserGenPage);
diff --git a/frontend/src/utils/cookies.js b/frontend/src/utils/cookies.js
new file mode 100644
index 00000000..02021002
--- /dev/null
+++ b/frontend/src/utils/cookies.js
@@ -0,0 +1,15 @@
+export const getCookie = (name) => {
+  let cookieValue = null;
+  if (document.cookie && document.cookie !== '') {
+    const cookies = document.cookie.split(';');
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim();
+      // Does this cookie string begin with the name we want?
+      if (cookie.substring(0, name.length + 1) === (name + '=')) {
+        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+        break;
+      }
+    }
+  }
+  return cookieValue;
+};