feat: colored jars with names (#476)

* style(svg): add jamColor to all jars

* feat: add jar flavor based on index

* feat(jar): named jars with bold initial

* feat(jar-detail): use initial, not index

* feat: "Jar #{n}" -> "Jar {X}"

* feat(send): use full name in from & recipient

src/components/Send.jsx

@@ -20,6 +20,7 @@ import { SATS, formatBtc, formatSats } from '../utils'
 import { routes } from '../constants/routes'
 import styles from './Send.module.css'
 import { ConfirmModal } from './Modal'
+import { jarInitial, jarName } from './jars/Jar'
 
 const IS_COINJOIN_DEFAULT_VAL = true
 // initial value for `minimum_makers` from the default joinmarket.cfg (last check on 2022-02-20 of v0.9.5)
@@ -769,7 +770,7 @@ export default function Send() {
                     .sort((lhs, rhs) => lhs.accountIndex - rhs.accountIndex)
                     .map(({ accountIndex, totalBalance, calculatedTotalBalanceInSats }) => (
                       <option key={accountIndex} value={accountIndex}>
-                        {t('send.account_selector_option', { number: accountIndex })}{' '}
+                        {jarName(accountIndex)}{' '}
                         {settings.showBalance &&
                           (settings.unit === 'sats'
                             ? `(${formatSats(calculatedTotalBalanceInSats)} sats)`
@@ -794,7 +795,7 @@ export default function Send() {
                     className={classnames('slashed-zeroes', styles['input'], {
                       [styles['jar-input']]: destinationJar !== null,
                     })}
-                    value={destinationJar !== null ? `Jar #${destinationJar} (${destination})` : destination || ''}
+                    value={destinationJar !== null ? `${jarName(destinationJar)} (${destination})` : destination || ''}
                     required
                     onChange={(e) => {
                       const value = e.target.value
@@ -954,9 +955,7 @@ export default function Send() {
                 <strong>{t('send.confirm_modal.label_source_jar')}</strong>
               </rb.Col>
               <rb.Col xs={9} className="text-start">
-                {t('send.confirm_modal.text_source_jar', {
-                  jarId: `#${account}`,
-                })}
+                {t('send.confirm_modal.text_source_jar', { jarId: jarInitial(account) })}
               </rb.Col>
             </rb.Row>
             <rb.Row>

src/components/fb/FidelityBondSteps.tsx

@@ -13,6 +13,7 @@ import { CopyButton } from '../CopyButton'
 import LockdateForm from './LockdateForm'
 import * as fb from './utils'
 import styles from './FidelityBondSteps.module.css'
+import { jarInitial } from '../jars/Jar'
 
 const cx = classnamesBind.bind(styles)
 
@@ -169,7 +170,9 @@ const SelectUtxos = ({ walletInfo, jar, utxos, selectedUtxos, onUtxoSelected, on
 
   return (
     <div className="d-flex flex-column gap-4">
-      <div className={styles.stepDescription}>{t('earn.fidelity_bond.select_utxos.description', { jar })}</div>
+      <div className={styles.stepDescription}>
+        {t('earn.fidelity_bond.select_utxos.description', { jar: jarInitial(jar) })}
+      </div>
       {utxos.map((utxo, index) => {
         return (
           <UtxoCard
@@ -218,7 +221,7 @@ const FreezeUtxos = ({ walletInfo, jar, utxos, selectedUtxos, isLoading = false
           ) : (
             <div className={styles.stepDescription}>
               {t('earn.fidelity_bond.freeze_utxos.description_unselected_utxos')}{' '}
-              {t('earn.fidelity_bond.freeze_utxos.description_selected_utxos_to_freeze', { jar })}
+              {t('earn.fidelity_bond.freeze_utxos.description_selected_utxos_to_freeze', { jar: jarInitial(jar) })}
             </div>
           )}
           {utxosToFreeze.map((utxo, index) => (
@@ -292,7 +295,7 @@ const ReviewInputs = ({ lockDate, jar, utxos, selectedUtxos, timelockedAddress }
     {
       icon: <Sprite symbol="jar-open-fill-50" width="18" height="18" className={styles.confirmationStepIcon} />,
       label: t('earn.fidelity_bond.review_inputs.label_jar'),
-      content: t('earn.fidelity_bond.review_inputs.label_jar_n', { jar }),
+      content: t('earn.fidelity_bond.review_inputs.label_jar_n', { jar: jarInitial(jar) }),
     },
     {
       icon: <Sprite symbol="coins" width="18" height="18" className={styles.confirmationStepIcon} />,

src/components/jar_details/JarDetailsOverlay.tsx

@@ -13,6 +13,7 @@ import SegmentedTabs from '../SegmentedTabs'
 import { UtxoList } from './UtxoList'
 import { DisplayBranchHeader, DisplayBranchBody } from './DisplayBranch'
 import styles from './JarDetailsOverlay.module.css'
+import { jarInitial } from '../jars/Jar'
 
 const TABS = {
   UTXOS: 'UTXOS',
@@ -65,7 +66,9 @@ const Header = ({ account, nextAccount, previousAccount, setTab, onHide, initial
             </rb.Button>
             <div className={styles.accountStepperTitle}>
               <Sprite symbol="jar-open-fill-50" width="20" height="20" />
-              <span className="slashed-zeroes">#{account.account}</span>
+              <span className="slashed-zeroes">
+                <strong>{jarInitial(Number(account.account))}</strong>
+              </span>
             </div>
             <rb.Button variant="link" className={styles.accountStepperButton} onClick={() => nextAccount()}>
               <Sprite symbol="caret-right" width="20" height="20" />
@@ -295,10 +298,10 @@ const JarDetailsOverlay = (props: JarDetailsOverlayProps) => {
   const utxoListTitle = () => {
     const utxos = props.utxosByAccount[accountIndex] || []
 
-    if (utxos.length === 0) return t('jar_details.utxo_list.title_no_utxos', { jar: accountIndex })
-    if (utxos.length === 1) return t('jar_details.utxo_list.title_1_utxo', { jar: accountIndex })
+    if (utxos.length === 0) return t('jar_details.utxo_list.title_no_utxos', { jar: jarInitial(accountIndex) })
+    if (utxos.length === 1) return t('jar_details.utxo_list.title_1_utxo', { jar: jarInitial(accountIndex) })
 
-    return t('jar_details.utxo_list.title_num_utxos', { num: utxos.length, jar: accountIndex })
+    return t('jar_details.utxo_list.title_num_utxos', { num: utxos.length, jar: jarInitial(accountIndex) })
   }
 
   const refreshButton = () => {

src/components/jars/Jar.module.css

@@ -8,11 +8,35 @@
   margin: 0 0 0.25rem 0;
 }
 
+.apricotJam {
+  --jamColor: #ffb765;
+}
+
+.blueberryJam {
+  --jamColor: #6a9bff;
+}
+
+.cherryJam {
+  --jamColor: #ff636b;
+}
+
+.dateJam {
+  --jamColor: #964b00;
+}
+
+.elderberryJam {
+  --jamColor: #7b3183;
+}
+
 .jarIndex {
   font-size: 0.8rem;
   color: var(--bs-gray-600);
 }
 
+.jarIndex::first-letter {
+  font-weight: bold;
+}
+
 .jarBalance {
   display: inline-flex;
   justify-content: center;

src/components/jars/Jar.tsx

@@ -43,6 +43,40 @@ const calculateFillLevel = (accountBalance: number, totalBalance: number): JarFi
   return 0
 }
 
+const jarName = (index: Number) => {
+  switch (index) {
+    case 0:
+      return 'Apricot'
+    case 1:
+      return 'Blueberry'
+    case 2:
+      return 'Cherry'
+    case 3:
+      return 'Date'
+    case 4:
+      return 'Elderberry'
+    default:
+      return 'Jam'
+  }
+}
+
+const jarInitial = (index: Number) => {
+  switch (index) {
+    case 0:
+      return 'A'
+    case 1:
+      return 'B'
+    case 2:
+      return 'C'
+    case 3:
+      return 'D'
+    case 4:
+      return 'E'
+    default:
+      return 'X'
+  }
+}
+
 /**
  * A jar with index and balance.
  */
@@ -62,10 +96,29 @@ const Jar = ({ index, balance, fillLevel, isOpen = false }: JarProps) => {
     }
   }, [fillLevel, isOpen])
 
+  const flavorStyle = useMemo(() => {
+    switch (index) {
+      case 0:
+        return styles.apricotJam
+      case 1:
+        return styles.blueberryJam
+      case 2:
+        return styles.cherryJam
+      case 3:
+        return styles.dateJam
+      case 4:
+        return styles.elderberryJam
+      default:
+        return styles.neutralJam
+    }
+  }, [index])
+
+  const flavorName = jarName(index)
+
   return (
     <div className={styles.jarContainer}>
-      <Sprite className={styles.jarSprite} symbol={jarSymbol} width="32px" height="48px" />
-      <div className={styles.jarIndex}>{'#' + index}</div>
+      <Sprite className={`${styles.jarSprite} ${flavorStyle}`} symbol={jarSymbol} width="32px" height="48px" />
+      <div className={styles.jarIndex}>{flavorName}</div>
       <div className={styles.jarBalance}>
         <Balance valueString={balance} convertToUnit={settings.unit} showBalance={settings.showBalance} />
       </div>
@@ -139,4 +192,4 @@ const OpenableJar = ({ index, balance, fillLevel, tooltipText, onClick }: JarPro
   )
 }
 
-export { calculateFillLevel, SelectableJar, OpenableJar }
+export { calculateFillLevel, SelectableJar, OpenableJar, jarName, jarInitial }

src/i18n/locales/en/translation.json

@@ -172,7 +172,6 @@
     "placeholder_recipient": "Enter address or choose jar from wallet...",
     "feedback_reused_address": "This address is already used. To preserve your privacy please choose another one.",
     "label_account": "Send from",
-    "account_selector_option": "Jar {{ number }}",
     "label_amount": "Amount in sats",
     "placeholder_amount": "Enter amount...",
     "feedback_invalid_amount": "Please provide a valid amount.",
@@ -290,7 +289,7 @@
         "text_primary_button": "Next",
         "text_primary_button_unsafe": "Select potentially less private UTXOs",
         "text_secondary_button": "Cancel",
-        "description": "Select one or more UTXOs from Jar #{{ jar }} to use for the fidelity bond.",
+        "description": "Select one or more UTXOs from Jar {{ jar }} to use for the fidelity bond.",
         "utxo_card": {
           "confirmations": "{{ confs }} Confirmations",
           "label_frozen": "frozen",
@@ -305,7 +304,7 @@
         "text_secondary_button": "Cancel",
         "description_selected_utxos": "Selected UTXOs:",
         "description_unselected_utxos": "The following UTXOs will not be used for the fidelity bond:",
-        "description_selected_utxos_to_freeze": "They will be frozen to remain in Jar #{{ jar }}. You can unfreeze them anytime after creating the bond."
+        "description_selected_utxos_to_freeze": "They will be frozen to remain in Jar {{ jar }}. You can unfreeze them anytime after creating the bond."
       },
       "review_inputs": {
         "text_primary_button": "Create fidelity bond",
@@ -314,7 +313,7 @@
         "description": "You configured the fidelity bond as follows:",
         "label_lock_date": "Locked until",
         "label_jar": "Funded from",
-        "label_jar_n": "Jar #{{ jar }}",
+        "label_jar_n": "Jar {{ jar }}",
         "label_amount": "Amount to be locked",
         "label_address": "Funds will be time-locked and sent to",
         "label_selected_utxos": "UTXOs that will be time-locked:"
@@ -424,9 +423,9 @@
     "progress_current_state": "Waiting for transaction <1>{{ current }}</1> of <3>{{ total }}</3> to process...",
     "progress_done": "All transactions completed successfully. The scheduler will stop soon.",
     "precondition": {
-      "hint_missing_utxos": "To run the scheduler you need at least one UTXO with <2>{{ minConfirmations }}</2> confirmations in Jar #0. Fund your wallet and wait for <6>{{ minConfirmations }}</6> blocks.",
-      "hint_missing_confirmations": "The scheduler requires one of your UTXOs in Jar #0 to have <2>{{ minConfirmations }}</2> or more confirmations. Wait for <6>{{ amountOfMissingConfirmations }}</6> more block(s).",
-      "hint_missing_overall_retries": "You've tried running the scheduler unsuccessfully too many times in a row. For security reasons, you need a fresh UTXO in Jar #0 to try again. See <2>the docs</2> for more information."
+      "hint_missing_utxos": "To run the scheduler you need at least one UTXO with <2>{{ minConfirmations }}</2> confirmations in Jar A. Fund your wallet and wait for <6>{{ minConfirmations }}</6> blocks.",
+      "hint_missing_confirmations": "The scheduler requires one of your UTXOs in Jar A to have <2>{{ minConfirmations }}</2> or more confirmations. Wait for <6>{{ amountOfMissingConfirmations }}</6> more block(s).",
+      "hint_missing_overall_retries": "You've tried running the scheduler unsuccessfully too many times in a row. For security reasons, you need a fresh UTXO in Jar A to try again. See <2>the docs</2> for more information."
     }
   },
   "modal": {

src/i18n/locales/fr/translation.json

@@ -169,8 +169,6 @@
     "feedback_invalid_recipient": "Veuillez indiquer l'adresse du destinataire.",
     "label_account": "Niveau de confidentialité à envoyer à partir de",
     "label_account_dev_mode": "Compte à partir duquel envoyer",
-    "account_selector_option": "Niveau de confidentialité {{ number }}",
-    "account_selector_option_dev_mode": "Compte  {{ number }}",
     "label_amount": "Montant en sats",
     "placeholder_amount": "Entrez le montant...",
     "feedback_invalid_amount": "Veuillez fournir un montant valide.",