ui: show active offers on Earn page

joinmarket-webui · Aug 9, 2022 · 9725b61 · 9725b61
1 parent 3b3154e
commit 9725b61
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 0 deletions.
diff --git a/src/components/Earn.jsx b/src/components/Earn.jsx
@@ -14,6 +14,7 @@ import { EarnReportOverlay } from './EarnReport'
 import * as Api from '../libs/JmWalletApi'
 import styles from './Earn.module.css'
 import { OrderbookOverlay } from './Orderbook'
+import Balance from './Balance'
 
 // In order to prevent state mismatch, the 'maker stop' response is delayed shortly.
 // Even though the API response suggests that the maker has started or stopped immediately, it seems that this is not always the case.
@@ -83,6 +84,99 @@ const factorToPercentage = (val, precision = 6) => {
   return Number((val * 100).toFixed(precision))
 }
 
+const renderOrderType = (val, t) => {
+  if (val.includes('absoffer')) {
+    return <rb.Badge bg="info">{t('earn.current.text_offer_type_absolute')}</rb.Badge>
+  }
+  if (val.includes('reloffer')) {
+    return <rb.Badge bg="primary">{t('earn.current.text_offer_type_relative')}</rb.Badge>
+  }
+  return <rb.Badge bg="secondary">{val}</rb.Badge>
+}
+
+function CurrentOffer({ offer, nickname }) {
+  const { t } = useTranslation()
+  const settings = useSettings()
+
+  return (
+    <div className={styles.offerContainer}>
+      <div className="d-flex justify-content-between align-items-center">
+        <div className={styles.offerTitle}>{t('earn.current.title', { id: offer.oid })}</div>
+        <div className="d-flex align-items-center gap-1">{renderOrderType(offer.ordertype, t)}</div>
+      </div>
+      <rb.Container className="mt-2">
+        <rb.Row className="mb-2">
+          <rb.Col xs={12}>
+            <div className={styles.offerLabel}>{t('earn.current.text_nickname')}</div>
+            <div>{nickname}</div>
+          </rb.Col>
+        </rb.Row>
+        <rb.Row>
+          <rb.Col xs={6}>
+            <div className="d-flex flex-column">
+              <div className={styles.offerLabel}>{t('earn.current.text_cjfee')}</div>
+              <div>
+                {offer.ordertype.includes('reloffer') ? (
+                  <>{offer.cjfee}%</>
+                ) : (
+                  <>
+                    <Balance
+                      valueString={String(offer.cjfee)}
+                      convertToUnit={settings.unit}
+                      showBalance={settings.showBalance}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+          </rb.Col>
+
+          <rb.Col xs={6}>
+            <div className="d-flex flex-column">
+              <div className={styles.offerLabel}>{t('earn.current.text_minsize')}</div>
+              <div>
+                <Balance
+                  valueString={String(offer.minsize)}
+                  convertToUnit={settings.unit}
+                  showBalance={settings.showBalance}
+                />
+              </div>
+            </div>
+          </rb.Col>
+        </rb.Row>
+
+        <rb.Row>
+          <rb.Col xs={6}>
+            <div className="d-flex flex-column">
+              <div className={styles.offerLabel}>{t('earn.current.text_txfee')}</div>
+              <div>
+                <Balance
+                  valueString={String(offer.txfee)}
+                  convertToUnit={settings.unit}
+                  showBalance={settings.showBalance}
+                />
+              </div>
+            </div>
+          </rb.Col>
+
+          <rb.Col xs={6}>
+            <div className="d-flex flex-column">
+              <div className={styles.offerLabel}>{t('earn.current.text_maxsize')}</div>
+              <div>
+                <Balance
+                  valueString={String(offer.maxsize)}
+                  convertToUnit={settings.unit}
+                  showBalance={settings.showBalance}
+                />
+              </div>
+            </div>
+          </rb.Col>
+        </rb.Row>
+      </rb.Container>
+    </div>
+  )
+}
+
 export default function Earn() {
   const { t } = useTranslation()
   const settings = useSettings()
@@ -294,6 +388,13 @@ export default function Earn() {
             !serviceInfo?.makerRunning &&
             !isWaitingMakerStart &&
             !isWaitingMakerStop && <p className="text-secondary mb-4">{t('earn.market_explainer')}</p>}
+          {serviceInfo?.makerRunning && serviceInfo?.offers && serviceInfo?.nickname && (
+            <>
+              {serviceInfo.offers.map((offer, index) => (
+                <CurrentOffer key={index} offer={offer} nickname={serviceInfo.nickname} />
+              ))}
+            </>
+          )}
           {!serviceInfo?.coinjoinInProgress && (
             <>
               <PageTitle

diff --git a/src/components/Earn.module.css b/src/components/Earn.module.css
@@ -46,3 +46,30 @@
   border-color: var(--bs-gray-800);
   opacity: 100%;
 }
+
+.offerContainer {
+  border: 1px solid var(--bs-gray-200);
+  border-radius: 0.3rem;
+  padding: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+:root[data-theme='dark'] .offerContainer {
+  border-color: var(--bs-gray-700);
+}
+
+.offerContainer .offerTitle {
+  width: 100%;
+  font-size: 1.2rem;
+  color: var(--bs-body-color);
+}
+
+.offerContainer .offerLabel {
+  color: var(--bs-gray-600);
+  font-size: 0.8rem;
+}
+
+.offerContainer .offerContent {
+  font-size: 0.8rem;
+  word-break: break-all;
+}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -247,6 +247,16 @@
     "text_stopping": "Stopping",
     "button_show_report": "Show earnings report",
     "button_show_orderbook": "Show orderbook",
+    "current": {
+      "title": "Active Offer #{{ id }}",
+      "text_nickname": "Nym",
+      "text_cjfee": "Fee",
+      "text_minsize": "Minimum Size",
+      "text_maxsize": "Maximum Size",
+      "text_txfee": "Transaction Fee",
+      "text_offer_type_absolute": "absolute",
+      "text_offer_type_relative": "relative"
+    },
     "report": {
       "title": "Earnings Report",
       "text_report_summary_one": "{{ count }} entry",