feat: add cheatsheet

this is still work in progress

src/components/App.jsx

@@ -12,12 +12,14 @@ import CurrentWalletAdvanced from './CurrentWalletAdvanced'
 import Settings from './Settings'
 import Navbar from './Navbar'
 import Layout from './Layout'
+import Sprite from './Sprite'
 import { useSettings } from '../context/SettingsContext'
 import { useWebsocketState } from '../context/WebsocketContext'
 import { useCurrentWallet, useSetCurrentWallet, useSetCurrentWalletInfo } from '../context/WalletContext'
 import { useSessionConnectionError } from '../context/ServiceInfoContext'
 import { setSession, clearSession } from '../session'
 import Onboarding from './Onboarding'
+import Cheatsheet from './Cheatsheet'
 
 export default function App() {
   const { t } = useTranslation()
@@ -28,6 +30,7 @@ export default function App() {
 
   const [websocketConnected, setWebsocketConnected] = useState()
   const [showAlphaWarning, setShowAlphaWarning] = useState(false)
+  const [showCheatsheet, setShowCheatsheet] = useState(false)
   const settings = useSettings()
   const websocketState = useWebsocketState()
 
@@ -115,6 +118,9 @@ export default function App() {
           </Routes>
         )}
       </rb.Container>
+
+      <Cheatsheet show={showCheatsheet} onHide={() => setShowCheatsheet(false)} />
+
       <rb.Nav as="footer" className="border-top py-2">
         <rb.Container fluid="xl" className="d-flex flex-column flex-md-row justify-content-center py-2 px-4">
           <div className="d-flex flex-1 order-2 order-md-0 flex-column justify-content-center align-items-center align-items-md-start">
@@ -132,6 +138,18 @@ export default function App() {
             </div>
           </div>
           <div className="d-flex order-1 flex-1 flex-grow-0 justify-content-center align-items-center px-4">
+            <rb.Nav.Item>
+              <rb.Button
+                variant="link"
+                className="cheatsheet-link nav-link text-start border-0 px-2"
+                onClick={() => setShowCheatsheet(true)}
+              >
+                <div className="d-flex justify-content-center align-items-center">
+                  <Sprite symbol="file" width="24" height="24" />
+                  <div className="ps-0">{t('footer.cheatsheet')}</div>
+                </div>
+              </rb.Button>
+            </rb.Nav.Item>
             <rb.Nav.Item>
               <a
                 href="https://github.com/joinmarket-webui/joinmarket-webui/wiki"

src/components/Cheatsheet.tsx

@@ -0,0 +1,76 @@
+import React, { PropsWithChildren } from 'react'
+import * as rb from 'react-bootstrap'
+
+interface CheatsheetProps {
+  show: boolean
+  onHide(): () => void
+}
+
+type NumberedProps = {
+  number: number
+}
+
+function Numbered({ number }: { number: number }) {
+  return <div className="numbered">{number}</div>
+}
+
+function ListItem({ number, children }: PropsWithChildren<NumberedProps>) {
+  return (
+    <rb.Stack className="cheatsheet-list-item" direction="horizontal" gap={3}>
+      <Numbered number={number} />
+      <rb.Stack gap={0}>{children}</rb.Stack>
+    </rb.Stack>
+  )
+}
+
+export default function Cheatsheet({ show = false, onHide }: CheatsheetProps) {
+  return (
+    <rb.Offcanvas className="cheatsheet" show={show} onHide={onHide} placement="bottom">
+      <rb.Offcanvas.Header>
+        <rb.Stack>
+          <rb.Offcanvas.Title>The Cheatsheet</rb.Offcanvas.Title>
+          <div className="text-secondary">
+            This is one valid way to add random noise to your coins by switching from earning as a maker to sending as a
+            taker back and forth. Learn more.
+          </div>
+        </rb.Stack>
+      </rb.Offcanvas.Header>
+      <rb.Offcanvas.Body>
+        <rb.Stack className="mb-4" gap={4}>
+          <ListItem number={1}>
+            <h6>Fund your wallet first.</h6>
+            <div className="small text-secondary">Deposit your coins - nothing new here.</div>
+          </ListItem>
+          <ListItem number={2}>
+            <h6>Send first collaborative transaction to yourself.</h6>
+            <div className="small text-secondary">Sweep everything to your own wallet again, but privately.</div>
+          </ListItem>
+          <ListItem number={3}>
+            <h6>Provide liquidity and earn yield.</h6>
+            <div className="small text-secondary">The longer, the better. Time is money.</div>
+          </ListItem>
+          <ListItem number={4}>
+            <h6>Lock funds in a fidelity bond. (advanced)</h6>
+            <div className="small text-secondary">Optional - but gives higher chances to be chosen.</div>
+          </ListItem>
+          <ListItem number={5}>
+            <h6>Consolidate your levels.</h6>
+            <div className="small text-secondary">Do a collabroative transaction from one level to another.</div>
+          </ListItem>
+          <ListItem number={6}>
+            <h6>Time to earn again - YIELD!</h6>
+            <div className="small text-secondary">Optional - by switching back and forth you add more noise.</div>
+          </ListItem>
+          <ListItem number={7}>
+            <h6>Sweep out your wallet completely.</h6>
+            <div className="small text-secondary">Your coins should be very private by now - move them out.</div>
+          </ListItem>
+          <ListItem number={8}>
+            <h6>Do to step one and repeat.</h6>
+            <div className="small text-secondary">Now you know.</div>
+          </ListItem>
+        </rb.Stack>
+      </rb.Offcanvas.Body>
+    </rb.Offcanvas>
+  )
+}

src/components/Navbar.jsx

@@ -161,7 +161,7 @@ export default function Navbar() {
                     <span>{t('navbar.menu')}</span>
                   </rb.Navbar.Toggle>
                 </div>
-                <rb.Navbar.Offcanvas className={`navbar-${settings.theme}`} placement="end">
+                <rb.Navbar.Offcanvas className={`navbar-offcanvas navbar-${settings.theme}`} placement="end">
                   <rb.Offcanvas.Header>
                     <rb.Offcanvas.Title>{t('navbar.title')}</rb.Offcanvas.Title>
                   </rb.Offcanvas.Header>
@@ -207,7 +207,7 @@ export default function Navbar() {
                     <span>{t('navbar.menu_mobile')}</span>
                   </rb.Navbar.Toggle>
                 </div>
-                <rb.Navbar.Offcanvas className={`navbar-${settings.theme}`} placement="end">
+                <rb.Navbar.Offcanvas className={`navbar-offcanvas navbar-${settings.theme}`} placement="end">
                   <rb.Offcanvas.Header>
                     <rb.Offcanvas.Title>{t('navbar.title')}</rb.Offcanvas.Title>
                   </rb.Offcanvas.Header>

src/i18n/locales/en/translation.json

@@ -18,6 +18,7 @@
     "warning_alert_title": "Warning",
     "warning_alert_text": "While JoinMarket is tried and tested, Jam is not. It is in an alpha stage, so use with caution.",
     "warning_alert_button_ok": "Fine with me.",
+    "cheatsheet": "Cheatsheet",
     "docs": "Docs",
     "features": "Features",
     "github": "GitHub",

src/index.css

@@ -207,7 +207,7 @@ body,
 }
 
 #mainNav,
-.offcanvas-header {
+.navbar-offcanvas.offcanvas-header {
   height: 76px;
 }
 
@@ -319,8 +319,8 @@ main {
     border-bottom: 2px solid black;
   }
 
-  .offcanvas,
-  .offcanvas-backdrop {
+  .navbar-offcanvas.offcanvas,
+  .navbar-offcanvas.offcanvas-backdrop {
     display: none;
   }
 }
@@ -357,6 +357,42 @@ main {
   }
 }
 
+/* Cheatsheet Styles */
+.cheatsheet {
+  height: auto;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  margin: 0px auto;
+  width: 576px;
+}
+
+.cheatsheet .numbered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background-color: rgb(0, 0, 0);
+  color: white;
+}
+
+:root[data-theme='dark'] .cheatsheet .numbered {
+  color: rgb(0, 0, 0);
+  background-color: white;
+}
+
+.cheatsheet .cheatsheet-list-item h6 {
+  margin-bottom: 0.1rem;
+}
+
+.cheatsheet-link.nav-link {
+  color: var(--bs-gray-900);
+}
+
+:root[data-theme='dark'] .cheatsheet-link.nav-link {
+  color: var(--bs-gray-400);
+}
 /* Blurred Text Styles */
 
 .blurred-text {