From ebfac49875c864ef3a02a3485d2f99d3b8deceb0 Mon Sep 17 00:00:00 2001
From: koalasat <koalasat@satstralia.com>
Date: Sun, 11 May 2025 14:11:15 +0200
Subject: [PATCH] Order view

---
 .../src/components/OrderDetails/index.tsx     | 517 +++++++++---------
 .../EncryptedSocketChat/index.tsx             |   2 +-
 .../EncryptedTurtleChat/index.tsx             |   2 +-
 .../components/TradeBox/Prompts/Expired.tsx   |   9 +-
 frontend/src/components/TradeBox/index.tsx    |   2 +-
 frontend/static/locales/ca.json               |   2 +-
 frontend/static/locales/cs.json               |   2 +-
 frontend/static/locales/de.json               |   2 +-
 frontend/static/locales/en.json               |   2 +-
 frontend/static/locales/es.json               |   2 +-
 frontend/static/locales/eu.json               |   2 +-
 frontend/static/locales/fr.json               |   2 +-
 frontend/static/locales/it.json               |   2 +-
 frontend/static/locales/ja.json               |   2 +-
 frontend/static/locales/pl.json               |   2 +-
 frontend/static/locales/pt.json               |   2 +-
 frontend/static/locales/ru.json               |   2 +-
 frontend/static/locales/sv.json               |   2 +-
 frontend/static/locales/sw.json               |   2 +-
 frontend/static/locales/th.json               |   2 +-
 frontend/static/locales/zh-SI.json            |   2 +-
 frontend/static/locales/zh-TR.json            |   2 +-
 22 files changed, 282 insertions(+), 284 deletions(-)

diff --git a/frontend/src/components/OrderDetails/index.tsx b/frontend/src/components/OrderDetails/index.tsx
index 07e0f424..ae3a9757 100644
--- a/frontend/src/components/OrderDetails/index.tsx
+++ b/frontend/src/components/OrderDetails/index.tsx
@@ -259,301 +259,296 @@ const OrderDetails = ({
           setOpenWorldmap(false);
         }}
       />
-      <Grid item xs={12}>
-        <List dense={true}>
-          <ListItemButton
-            onClick={() => {
-              onClickCoordinator();
-            }}
-          >
-            <Grid container direction='row' justifyContent='center' alignItems='center'>
-              <Grid item xs={2}>
-                <RobotAvatar
-                  shortAlias={coordinator.federated ? coordinator.shortAlias : undefined}
-                  hashId={coordinator.federated ? undefined : coordinator.mainnet.onion}
-                  small={true}
-                  smooth={true}
-                />
-              </Grid>
-              <Grid item xs={4}>
-                <ListItemText primary={coordinator.longAlias} secondary={t('Order host')} />
-              </Grid>
-            </Grid>
-          </ListItemButton>
-          {coordinator?.info && !coordinator?.info?.swap_enabled && (
-            <ListItem>
-              <Grid sx={{ marginBottom: 1 }}>
-                <Alert severity='warning' sx={{ marginTop: 2 }}>
-                  {t('This coordinator does not support on-chain swaps.')}
-                </Alert>
-              </Grid>
-            </ListItem>
-          )}
-
-          <Divider />
-
-          <ListItem>
-            <ListItemAvatar sx={{ width: '4em', height: '4em' }}>
+      <List dense={true} style={{ width: '100%' }}>
+        <ListItemButton
+          onClick={() => {
+            onClickCoordinator();
+          }}
+        >
+          <Grid container direction='row' justifyContent='center' alignItems='center'>
+            <Grid item sx={{ width: '64px' }}>
               <RobotAvatar
-                statusColor={statusBadgeColor(currentOrder?.maker_status ?? '')}
-                hashId={currentOrder?.maker_hash_id}
-                tooltip={t(currentOrder?.maker_status ?? '')}
-                orderType={currentOrder?.type}
+                shortAlias={coordinator.federated ? coordinator.shortAlias : undefined}
+                hashId={coordinator.federated ? undefined : coordinator.mainnet.onion}
+                small={true}
+                smooth={true}
+                style={{
+                  height: '45px',
+                  width: '45px',
+                }}
+              />
+            </Grid>
+            <Grid item>
+              <ListItemText primary={coordinator.longAlias} secondary={t('Order host')} />
+            </Grid>
+          </Grid>
+        </ListItemButton>
+        {coordinator?.info && !coordinator?.info?.swap_enabled && (
+          <ListItem>
+            <Grid sx={{ marginBottom: 1 }}>
+              <Alert severity='warning'>
+                {t('This coordinator does not support on-chain swaps.')}
+              </Alert>
+            </Grid>
+          </ListItem>
+        )}
+
+        <Divider />
+
+        <ListItem>
+          <ListItemAvatar sx={{ width: '4em', height: '4em' }}>
+            <RobotAvatar
+              statusColor={statusBadgeColor(currentOrder?.maker_status ?? '')}
+              hashId={currentOrder?.maker_hash_id}
+              tooltip={t(currentOrder?.maker_status ?? '')}
+              orderType={currentOrder?.type}
+              small={true}
+            />
+          </ListItemAvatar>
+          <ListItemText
+            primary={`${String(currentOrder?.maker_nick)} (${
+              currentOrder?.type === 1
+                ? t(currentOrder?.currency === 1000 ? 'Swapping Out' : 'Seller')
+                : t(currentOrder?.currency === 1000 ? 'Swapping In' : 'Buyer')
+            })`}
+            secondary={t('Order maker')}
+          />
+        </ListItem>
+
+        <Collapse in={currentOrder?.is_participant && currentOrder?.taker_nick !== 'None'}>
+          <Divider />
+          <ListItem>
+            <ListItemText
+              primary={`${String(currentOrder?.taker_nick)} (${
+                currentOrder?.type === 1
+                  ? t(currentOrder?.currency === 1000 ? 'Swapping In' : 'Buyer')
+                  : t(currentOrder?.currency === 1000 ? 'Swapping Out' : 'Seller')
+              })`}
+              secondary={t('Order taker')}
+            />
+            <ListItemAvatar>
+              <RobotAvatar
+                avatarClass='smallAvatar'
+                statusColor={statusBadgeColor(currentOrder?.taker_status ?? '')}
+                hashId={
+                  currentOrder?.taker_hash_id === 'None' ? undefined : currentOrder?.taker_hash_id
+                }
+                tooltip={t(currentOrder?.taker_status ?? '')}
+                orderType={currentOrder?.type === 0 ? 1 : 0}
                 small={true}
               />
             </ListItemAvatar>
+          </ListItem>
+        </Collapse>
+        <Divider>
+          <Chip label={t('Order Details')} />
+        </Divider>
+
+        <Collapse in={currentOrder?.is_participant}>
+          <ListItem>
+            <ListItemIcon>
+              <Article />
+            </ListItemIcon>
             <ListItemText
-              primary={`${String(currentOrder?.maker_nick)} (${
-                currentOrder?.type === 1
-                  ? t(currentOrder?.currency === 1000 ? 'Swapping Out' : 'Seller')
-                  : t(currentOrder?.currency === 1000 ? 'Swapping In' : 'Buyer')
-              })`}
-              secondary={t('Order maker')}
+              primary={t(currentOrder?.status_message ?? '')}
+              secondary={t('Order status')}
             />
           </ListItem>
+          <Divider />
+        </Collapse>
 
-          <Collapse in={currentOrder?.is_participant && currentOrder?.taker_nick !== 'None'}>
-            <Divider />
+        <ListItem>
+          <ListItemIcon>
+            <div
+              style={{
+                zoom: 1.25,
+                opacity: 0.7,
+                msZoom: 1.25,
+                WebkitZoom: 1.25,
+                MozTransform: 'scale(1.25,1.25)',
+                MozTransformOrigin: 'left center',
+              }}
+            >
+              <FlagWithProps code={currencyCode} width='1.2em' height='1.2em' />
+            </div>
+          </ListItemIcon>
+          <ListItemText
+            primary={amountString}
+            secondary={(currentOrder?.amount ?? 0) > 0 ? 'Amount' : 'Amount Range'}
+          />
+          <ListItemIcon>
+            <IconButton
+              onClick={() => {
+                setShowSatsDetails(!showSatsDetails);
+              }}
+            >
+              {showSatsDetails ? <ExpandLess /> : <ExpandMore color='primary' />}
+            </IconButton>
+          </ListItemIcon>
+        </ListItem>
+
+        <Collapse in={showSatsDetails}>
+          <List dense={true} sx={{ position: 'relative', bottom: '0.5em' }}>
             <ListItem>
-              <ListItemText
-                primary={`${String(currentOrder?.taker_nick)} (${
-                  currentOrder?.type === 1
-                    ? t(currentOrder?.currency === 1000 ? 'Swapping In' : 'Buyer')
-                    : t(currentOrder?.currency === 1000 ? 'Swapping Out' : 'Seller')
-                })`}
-                secondary={t('Order taker')}
-              />
-              <ListItemAvatar>
-                <RobotAvatar
-                  avatarClass='smallAvatar'
-                  statusColor={statusBadgeColor(currentOrder?.taker_status ?? '')}
-                  hashId={
-                    currentOrder?.taker_hash_id === 'None' ? undefined : currentOrder?.taker_hash_id
-                  }
-                  tooltip={t(currentOrder?.taker_status ?? '')}
-                  orderType={currentOrder?.type === 0 ? 1 : 0}
-                  small={true}
+              <ListItemIcon sx={{ position: 'relative', left: '0.3em' }}>
+                <SendReceiveIcon
+                  sx={{ transform: 'scaleX(-1)', width: '0.9em', opacity: 0.9 }}
+                  color='secondary'
                 />
-              </ListItemAvatar>
+              </ListItemIcon>
+              <Typography variant='body2'>{satsSummary.send}</Typography>
             </ListItem>
-          </Collapse>
-          <Divider>
-            <Chip label={t('Order Details')} />
-          </Divider>
 
-          <Collapse in={currentOrder?.is_participant}>
             <ListItem>
-              <ListItemIcon>
-                <Article />
-              </ListItemIcon>
-              <ListItemText
-                primary={t(currentOrder?.status_message ?? '')}
-                secondary={t('Order status')}
-              />
-            </ListItem>
-            <Divider />
-          </Collapse>
-
-          <ListItem>
-            <ListItemIcon>
-              <div
-                style={{
-                  zoom: 1.25,
-                  opacity: 0.7,
-                  msZoom: 1.25,
-                  WebkitZoom: 1.25,
-                  MozTransform: 'scale(1.25,1.25)',
-                  MozTransformOrigin: 'left center',
-                }}
-              >
-                <FlagWithProps code={currencyCode} width='1.2em' height='1.2em' />
-              </div>
-            </ListItemIcon>
-            <ListItemText
-              primary={amountString}
-              secondary={(currentOrder?.amount ?? 0) > 0 ? 'Amount' : 'Amount Range'}
-            />
-            <ListItemIcon>
-              <IconButton
-                onClick={() => {
-                  setShowSatsDetails(!showSatsDetails);
-                }}
-              >
-                {showSatsDetails ? <ExpandLess /> : <ExpandMore color='primary' />}
-              </IconButton>
-            </ListItemIcon>
-          </ListItem>
-
-          <Collapse in={showSatsDetails}>
-            <List dense={true} sx={{ position: 'relative', bottom: '0.5em' }}>
-              <ListItem>
-                <ListItemIcon sx={{ position: 'relative', left: '0.3em' }}>
-                  <SendReceiveIcon
-                    sx={{ transform: 'scaleX(-1)', width: '0.9em', opacity: 0.9 }}
-                    color='secondary'
-                  />
-                </ListItemIcon>
-                <Typography variant='body2'>{satsSummary.send}</Typography>
-              </ListItem>
-
-              <ListItem>
-                <ListItemIcon sx={{ position: 'relative', left: '0.3em' }}>
-                  <SendReceiveIcon
-                    sx={{ left: '0.1em', width: '0.9em', opacity: 0.9 }}
-                    color='primary'
-                  />
-                </ListItemIcon>
-                <Typography variant='body2'>{satsSummary.receive}</Typography>
-              </ListItem>
-            </List>
-          </Collapse>
-
-          <Divider />
-
-          <ListItem>
-            <ListItemIcon>
-              <Payments />
-            </ListItemIcon>
-            <ListItemText
-              primary={
-                <PaymentStringAsIcons
-                  size={1.42 * theme.typography.fontSize}
-                  othersText={t('Others')}
-                  verbose={true}
-                  text={currentOrder?.payment_method}
+              <ListItemIcon sx={{ position: 'relative', left: '0.3em' }}>
+                <SendReceiveIcon
+                  sx={{ left: '0.1em', width: '0.9em', opacity: 0.9 }}
+                  color='primary'
                 />
-              }
-              secondary={
-                currentOrder?.currency === 1000
-                  ? t('Swap destination')
-                  : t('Accepted payment methods')
-              }
-            />
-            {currentOrder?.payment_method.includes('Cash F2F') && (
-              <ListItemIcon>
-                <Tooltip enterTouchDelay={0} title={t('F2F location')}>
-                  <div>
-                    <IconButton
-                      onClick={() => {
-                        setOpenWorldmap(true);
-                      }}
-                    >
-                      <Map />
-                    </IconButton>
-                  </div>
-                </Tooltip>
               </ListItemIcon>
-            )}
-          </ListItem>
-          <Divider />
+              <Typography variant='body2'>{satsSummary.receive}</Typography>
+            </ListItem>
+          </List>
+        </Collapse>
 
-          {/* If there is live Price and Premium data, show it. Otherwise show the order maker settings */}
-          <ListItem>
+        <Divider />
+
+        <ListItem>
+          <ListItemIcon>
+            <Payments />
+          </ListItemIcon>
+          <ListItemText
+            primary={
+              <PaymentStringAsIcons
+                size={1.42 * theme.typography.fontSize}
+                othersText={t('Others')}
+                verbose={true}
+                text={currentOrder?.payment_method}
+              />
+            }
+            secondary={
+              currentOrder?.currency === 1000
+                ? t('Swap destination')
+                : t('Accepted payment methods')
+            }
+          />
+          {currentOrder?.payment_method.includes('Cash F2F') && (
             <ListItemIcon>
-              <PriceChange />
+              <Tooltip enterTouchDelay={0} title={t('F2F location')}>
+                <div>
+                  <IconButton
+                    onClick={() => {
+                      setOpenWorldmap(true);
+                    }}
+                  >
+                    <Map />
+                  </IconButton>
+                </div>
+              </Tooltip>
             </ListItemIcon>
+          )}
+        </ListItem>
+        <Divider />
 
-            {currentOrder?.price_now !== undefined ? (
-              <ListItemText
-                primary={t('{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%', {
-                  price: pn(currentOrder?.price_now),
-                  currencyCode,
-                  premium: currentOrder?.premium_now,
-                })}
-                secondary={t('Price and Premium')}
-              />
-            ) : null}
+        {/* If there is live Price and Premium data, show it. Otherwise show the order maker settings */}
+        <ListItem>
+          <ListItemIcon>
+            <PriceChange />
+          </ListItemIcon>
 
-            {currentOrder?.price_now === undefined && currentOrder?.is_explicit ? (
-              <ListItemText
-                primary={pn(currentOrder?.satoshis)}
-                secondary={t('Amount of Satoshis')}
-              />
-            ) : null}
+          {currentOrder?.price_now !== undefined ? (
+            <ListItemText
+              primary={t('{{price}} {{currencyCode}}/BTC - Premium: {{premium}}%', {
+                price: pn(currentOrder?.price_now),
+                currencyCode,
+                premium: currentOrder?.premium_now,
+              })}
+              secondary={t('Price and Premium')}
+            />
+          ) : null}
 
-            {currentOrder?.price_now === undefined && !currentOrder?.is_explicit ? (
-              <ListItemText
-                primary={`${parseFloat(Number(currentOrder?.premium).toFixed(2))}%`}
-                secondary={t('Premium over market price')}
-              />
-            ) : null}
-          </ListItem>
+          {currentOrder?.price_now === undefined && currentOrder?.is_explicit ? (
+            <ListItemText
+              primary={pn(currentOrder?.satoshis)}
+              secondary={t('Amount of Satoshis')}
+            />
+          ) : null}
 
-          <Divider />
+          {currentOrder?.price_now === undefined && !currentOrder?.is_explicit ? (
+            <ListItemText
+              primary={`${parseFloat(Number(currentOrder?.premium).toFixed(2))}%`}
+              secondary={t('Premium over market price')}
+            />
+          ) : null}
+        </ListItem>
 
-          <ListItem>
+        <Divider />
+
+        <Grid container direction='row' justifyContent='center' alignItems='center'>
+          <ListItem style={{ width: '50%' }}>
             <ListItemIcon>
               <Numbers />
             </ListItemIcon>
-            <Grid container>
-              <Grid item xs={4.5}>
-                <ListItemText primary={currentOrder?.id} secondary={t('Order ID')} />
-              </Grid>
-              <Grid item xs={7.5}>
-                <Grid container>
-                  <Grid item xs={2}>
-                    <ListItemIcon sx={{ position: 'relative', top: '12px', left: '-5px' }}>
-                      <HourglassTop />
-                    </ListItemIcon>
-                  </Grid>
-                  <Grid item xs={10}>
-                    <ListItemText
-                      primary={timerRenderer(currentOrder?.escrow_duration)}
-                      secondary={t('Deposit timer')}
-                    ></ListItemText>
-                  </Grid>
-                </Grid>
-              </Grid>
-            </Grid>
+            <ListItemText primary={currentOrder?.id} secondary={t('Order ID')} />
           </ListItem>
 
-          {/* if order is in a status that does not expire, do not show countdown */}
-          <Collapse in={![4, 5, 12, 13, 14, 15, 16, 17, 18].includes(currentOrder?.status ?? 0)}>
-            <Divider />
-            <ListItem>
-              <ListItemIcon>
-                <AccessTime />
-              </ListItemIcon>
-              <ListItemText secondary={t('Expires in')}>
-                <Countdown
-                  date={new Date(currentOrder?.expires_at ?? '')}
-                  renderer={countdownRenderer}
-                />
-              </ListItemText>
-            </ListItem>
-            <LinearDeterminate
-              totalSecsExp={currentOrder?.total_secs_exp ?? 0}
-              expiresAt={currentOrder?.expires_at ?? ''}
+          <ListItem style={{ width: '50%' }}>
+            <ListItemIcon>
+              <HourglassTop />
+            </ListItemIcon>
+            <ListItemText
+              primary={timerRenderer(currentOrder?.escrow_duration)}
+              secondary={t('Deposit')}
             />
-          </Collapse>
-        </List>
+          </ListItem>
+        </Grid>
 
-        {/* If the user has a penalty/limit */}
-        {currentOrder?.penalty !== undefined ? (
-          <Grid item xs={12}>
-            <Alert severity='warning' sx={{ borderRadius: '0' }}>
+        {/* if order is in a status that does not expire, do not show countdown */}
+        <Collapse in={![4, 5, 12, 13, 14, 15, 16, 17, 18].includes(currentOrder?.status ?? 0)}>
+          <Divider />
+          <ListItem>
+            <ListItemIcon>
+              <AccessTime />
+            </ListItemIcon>
+            <ListItemText secondary={t('Expires in')}>
               <Countdown
-                date={new Date(currentOrder?.penalty ?? '')}
-                renderer={countdownPenaltyRenderer}
+                date={new Date(currentOrder?.expires_at ?? '')}
+                renderer={countdownRenderer}
               />
-            </Alert>
-          </Grid>
-        ) : (
-          <></>
-        )}
+            </ListItemText>
+          </ListItem>
+          <LinearDeterminate
+            totalSecsExp={currentOrder?.total_secs_exp ?? 0}
+            expiresAt={currentOrder?.expires_at ?? ''}
+          />
+        </Collapse>
+      </List>
 
-        {!currentOrder?.is_participant ? (
-          <Grid item xs={12}>
-            <TakeButton
-              currentOrder={currentOrder}
-              info={coordinator.info}
-              onClickGenerateRobot={onClickGenerateRobot}
+      {/* If the user has a penalty/limit */}
+      {currentOrder?.penalty !== undefined ? (
+        <Grid item style={{ width: '100%' }}>
+          <Alert severity='warning' sx={{ borderRadius: '0' }}>
+            <Countdown
+              date={new Date(currentOrder?.penalty ?? '')}
+              renderer={countdownPenaltyRenderer}
             />
-          </Grid>
-        ) : (
-          <></>
-        )}
-      </Grid>
+          </Alert>
+        </Grid>
+      ) : (
+        <></>
+      )}
+
+      {!currentOrder?.is_participant ? (
+        <Grid item style={{ width: '100%', padding: '8px' }}>
+          <TakeButton
+            currentOrder={currentOrder}
+            info={coordinator.info}
+            onClickGenerateRobot={onClickGenerateRobot}
+          />
+        </Grid>
+      ) : (
+        <></>
+      )}
     </Grid>
   );
 };
diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
index 17819f6a..b5c4ea1c 100644
--- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
+++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedSocketChat/index.tsx
@@ -351,7 +351,7 @@ const EncryptedSocketChat: React.FC<Props> = ({
           />
         </Paper>
         <form noValidate onSubmit={onButtonClicked}>
-          <Grid alignItems='stretch' style={{ display: 'flex', width: '100%' }}>
+          <Grid alignItems='stretch' style={{ display: 'flex', width: '100%', marginTop: '8px' }}>
             <Grid item alignItems='stretch' style={{ display: 'flex' }} xs={9}>
               <TextField
                 label={t('Type a message')}
diff --git a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx
index d3ebaf3f..3ad147fc 100644
--- a/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx
+++ b/frontend/src/components/TradeBox/EncryptedChat/EncryptedTurtleChat/index.tsx
@@ -332,7 +332,7 @@ const EncryptedTurtleChat: React.FC<Props> = ({
           />
         </Paper>
         <form noValidate onSubmit={onButtonClicked}>
-          <Grid alignItems='stretch' style={{ display: 'flex', width: '100%' }}>
+          <Grid alignItems='stretch' style={{ display: 'flex', width: '100%', marginTop: '8px' }}>
             <Grid item alignItems='stretch' style={{ display: 'flex' }} xs={9}>
               <TextField
                 label={t('Type a message')}
diff --git a/frontend/src/components/TradeBox/Prompts/Expired.tsx b/frontend/src/components/TradeBox/Prompts/Expired.tsx
index 1fbb5e9a..d79043d6 100644
--- a/frontend/src/components/TradeBox/Prompts/Expired.tsx
+++ b/frontend/src/components/TradeBox/Prompts/Expired.tsx
@@ -19,14 +19,17 @@ export const ExpiredPrompt = ({
   const { t } = useTranslation();
 
   return (
-    <Grid container spacing={1}>
-      <Grid item xs={12}>
+    <Grid container direction='row'>
+      <Grid item style={{ width: '100%' }}>
         <Typography variant='body2' align='center'>
           {t(order.expiry_message)}
         </Typography>
       </Grid>
       {order.is_maker ? (
-        <Grid item xs={12} style={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid
+          item
+          style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '8px' }}
+        >
           <LoadingButton
             loading={loadingRenew}
             variant='outlined'
diff --git a/frontend/src/components/TradeBox/index.tsx b/frontend/src/components/TradeBox/index.tsx
index 242366ed..288316f8 100644
--- a/frontend/src/components/TradeBox/index.tsx
+++ b/frontend/src/components/TradeBox/index.tsx
@@ -827,7 +827,7 @@ const TradeBox = ({ currentOrder, onStartAgain }: TradeBoxProps): React.JSX.Elem
           <></>
         )}
 
-        <Grid item>
+        <Grid item style={{ paddingTop: '8px' }}>
           <CancelButton
             order={currentOrder ?? null}
             onClickCancel={cancel}
diff --git a/frontend/static/locales/ca.json b/frontend/static/locales/ca.json
index 3a150b0f..13278346 100644
--- a/frontend/static/locales/ca.json
+++ b/frontend/static/locales/ca.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Mètodes de pagament acceptats",
   "Amount of Satoshis": "Quantitat de Sats",
-  "Deposit timer": "Per a dipositar",
+  "Deposit": "Dipositar",
   "Expires in": "Expira en",
   "F2F location": "Ubicació F2F",
   "Order Details": "Detalls",
diff --git a/frontend/static/locales/cs.json b/frontend/static/locales/cs.json
index 12bfd11a..723fd53f 100644
--- a/frontend/static/locales/cs.json
+++ b/frontend/static/locales/cs.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Akceptované platební metody",
   "Amount of Satoshis": "Částka Satoshi",
-  "Deposit timer": "Časovač vkladu",
+  "Deposit": "Časovač vkladu",
   "Expires in": "Vyprší za",
   "F2F location": "F2F location",
   "Order Details": "Detaily nabídky",
diff --git a/frontend/static/locales/de.json b/frontend/static/locales/de.json
index a04a0660..1d0d5360 100644
--- a/frontend/static/locales/de.json
+++ b/frontend/static/locales/de.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Akzeptierte Zahlungsweisen",
   "Amount of Satoshis": "Anzahl Satoshis",
-  "Deposit timer": "Einzahlungstimer",
+  "Deposit": "Einzahlungstimer",
   "Expires in": "Läuft ab in",
   "F2F location": "F2F location",
   "Order Details": "Order-Details",
diff --git a/frontend/static/locales/en.json b/frontend/static/locales/en.json
index ebb5cce5..c0e6cc98 100644
--- a/frontend/static/locales/en.json
+++ b/frontend/static/locales/en.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Accepted payment methods",
   "Amount of Satoshis": "Amount of Satoshis",
-  "Deposit timer": "Deposit timer",
+  "Deposit": "Deposit",
   "Expires in": "Expires in",
   "F2F location": "F2F location",
   "Order Details": "Order Details",
diff --git a/frontend/static/locales/es.json b/frontend/static/locales/es.json
index e125cb41..d412bcc7 100644
--- a/frontend/static/locales/es.json
+++ b/frontend/static/locales/es.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Métodos de pago aceptados",
   "Amount of Satoshis": "Cantidad de Sats",
-  "Deposit timer": "Tiempo para depositar",
+  "Deposit": "Depósito",
   "Expires in": "Expira en",
   "F2F location": "F2F location",
   "Order Details": "Detalles",
diff --git a/frontend/static/locales/eu.json b/frontend/static/locales/eu.json
index 5768fdec..1034e71e 100644
--- a/frontend/static/locales/eu.json
+++ b/frontend/static/locales/eu.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Onartutako ordainketa moduak",
   "Amount of Satoshis": "Satoshi kopurua",
-  "Deposit timer": "Gordailu tenporizadorea",
+  "Deposit": "Gordailu tenporizadorea",
   "Expires in": "Iraungitze denbora",
   "F2F location": "F2F location",
   "Order Details": "Xehetasunak",
diff --git a/frontend/static/locales/fr.json b/frontend/static/locales/fr.json
index 5dac3e5d..7e779e46 100644
--- a/frontend/static/locales/fr.json
+++ b/frontend/static/locales/fr.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Modes de paiement acceptés",
   "Amount of Satoshis": "Montant de Satoshis",
-  "Deposit timer": "Deposit timer",
+  "Deposit": "Deposit",
   "Expires in": "Expire en",
   "F2F location": "F2F location",
   "Order Details": "Détails de l'ordre",
diff --git a/frontend/static/locales/it.json b/frontend/static/locales/it.json
index 739e7a7c..6f2a878c 100644
--- a/frontend/static/locales/it.json
+++ b/frontend/static/locales/it.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Metodi di pagamento accettati",
   "Amount of Satoshis": "Quantità di sats",
-  "Deposit timer": "Per depositare",
+  "Deposit": "Per depositare",
   "Expires in": "Scade in",
   "F2F location": "Luogo F2F",
   "Order Details": "Dettagli",
diff --git a/frontend/static/locales/ja.json b/frontend/static/locales/ja.json
index 99019ae2..5482402b 100644
--- a/frontend/static/locales/ja.json
+++ b/frontend/static/locales/ja.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "受け付ける支払い方法",
   "Amount of Satoshis": "サトシの金額",
-  "Deposit timer": "デポジットタイマー",
+  "Deposit": "デポジットタイマー",
   "Expires in": "有効期限",
   "F2F location": "F2F location",
   "Order Details": "注文の詳細",
diff --git a/frontend/static/locales/pl.json b/frontend/static/locales/pl.json
index 71d7d5b5..32d54c44 100644
--- a/frontend/static/locales/pl.json
+++ b/frontend/static/locales/pl.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Akceptowane metody płatności",
   "Amount of Satoshis": "Ilość Satoshis",
-  "Deposit timer": "Deposit timer",
+  "Deposit": "Deposit",
   "Expires in": "Wygasa za",
   "F2F location": "F2F location",
   "Order Details": "Szczegóły zamówienia",
diff --git a/frontend/static/locales/pt.json b/frontend/static/locales/pt.json
index bc85f74b..58c542db 100644
--- a/frontend/static/locales/pt.json
+++ b/frontend/static/locales/pt.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Métodos de pagamento aceitos",
   "Amount of Satoshis": "Quantidade de Satoshis",
-  "Deposit timer": "Temporizador de depósito",
+  "Deposit": "Depósito",
   "Expires in": "Expira em",
   "F2F location": "F2F location",
   "Order Details": "Detalhes da ordem",
diff --git a/frontend/static/locales/ru.json b/frontend/static/locales/ru.json
index 37793ecf..663a6189 100644
--- a/frontend/static/locales/ru.json
+++ b/frontend/static/locales/ru.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Способ(ы) оплаты",
   "Amount of Satoshis": "Количество Сатоши",
-  "Deposit timer": "Таймер депозита",
+  "Deposit": "депозита",
   "Expires in": "Истекает через",
   "F2F location": "F2F локация",
   "Order Details": "Детали ордера",
diff --git a/frontend/static/locales/sv.json b/frontend/static/locales/sv.json
index 642acc94..c9fbb75a 100644
--- a/frontend/static/locales/sv.json
+++ b/frontend/static/locales/sv.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Accepterade betalningsmetoder",
   "Amount of Satoshis": "Summa sats",
-  "Deposit timer": "Insättningstimer",
+  "Deposit": "Insättningstimer",
   "Expires in": "Förfaller om",
   "F2F location": "F2F location",
   "Order Details": "Orderdetaljer",
diff --git a/frontend/static/locales/sw.json b/frontend/static/locales/sw.json
index c18758ca..f6ebb696 100644
--- a/frontend/static/locales/sw.json
+++ b/frontend/static/locales/sw.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "Njia za malipo zilizokubaliwa",
   "Amount of Satoshis": "Kiasi cha Satoshis",
-  "Deposit timer": "Muda wa Amana",
+  "Deposit": "Muda wa Amana",
   "Expires in": "Inamalizika ndani ya",
   "F2F location": "F2F location",
   "Order Details": "Maelezo ya Agizo",
diff --git a/frontend/static/locales/th.json b/frontend/static/locales/th.json
index ffd935f5..54a5d60c 100644
--- a/frontend/static/locales/th.json
+++ b/frontend/static/locales/th.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "วิธีชำระเงินเฟียตที่รองรับ",
   "Amount of Satoshis": "ปริมาณ Satoshis",
-  "Deposit timer": "ผู้ขายต้องวางเหรียญที่จะขายภายใน",
+  "Deposit": "ผู้ขายต้องวางเหรียญที่จะขายภายใน",
   "Expires in": "หมดอายุใน",
   "F2F location": "F2F location",
   "Order Details": "รายละเอียดรายการ",
diff --git a/frontend/static/locales/zh-SI.json b/frontend/static/locales/zh-SI.json
index 2f00ca7d..ca302880 100644
--- a/frontend/static/locales/zh-SI.json
+++ b/frontend/static/locales/zh-SI.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "接受的付款方法",
   "Amount of Satoshis": "聪金额",
-  "Deposit timer": "存款倒计时",
+  "Deposit": "存款倒计时",
   "Expires in": "内到期",
   "F2F location": "F2F location",
   "Order Details": "订单详情",
diff --git a/frontend/static/locales/zh-TR.json b/frontend/static/locales/zh-TR.json
index c6d6fe83..16d7f79e 100644
--- a/frontend/static/locales/zh-TR.json
+++ b/frontend/static/locales/zh-TR.json
@@ -450,7 +450,7 @@
   "#44": "Phrases in components/OrderDetails/index.tsx",
   "Accepted payment methods": "接受的付款方法",
   "Amount of Satoshis": "聰金額",
-  "Deposit timer": "存款計時器",
+  "Deposit": "存款計時器",
   "Expires in": "內到期",
   "F2F location": "F2F location",
   "Order Details": "訂單詳情",