feat(balance): display frozen balance on jars (#635)

joinmarket-webui · Aug 17, 2023 · b029c92 · b029c92
1 parent da39aa3
commit b029c92
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 12 deletions.
diff --git a/src/components/JarSelectorModal.tsx b/src/components/JarSelectorModal.tsx
@@ -77,7 +77,8 @@ export default function JarSelectorModal({
               <SelectableJar
                 key={account.accountIndex}
                 index={account.accountIndex}
-                balance={account.calculatedTotalBalanceInSats}
+                balance={account.calculatedAvailableBalanceInSats}
+                frozenBalance={account.calculatedFrozenOrLockedBalanceInSats}
                 isSelectable={account.accountIndex !== disabledJar}
                 isSelected={account.accountIndex === selectedJar}
                 fillLevel={jarFillLevel(account.calculatedTotalBalanceInSats, totalBalance)}

diff --git a/src/components/Jars.module.css b/src/components/Jars.module.css
@@ -17,7 +17,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   gap: 2rem;
   color: var(--bs-body-color);
 }
@@ -29,7 +29,7 @@
 }
 
 .jarsContainer :global .jar-info-container-hook {
-  align-items: start;
+  align-items: flex-start;
 }
 .jarsContainer :global .jar-balance-container-hook {
   justify-content: start !important;

diff --git a/src/components/Jars.tsx b/src/components/Jars.tsx
@@ -44,7 +44,8 @@ const Jars = ({ accountBalances, totalBalance, onClick }: JarsProps) => {
             <OpenableJar
               key={account.accountIndex}
               index={account.accountIndex}
-              balance={account.calculatedTotalBalanceInSats}
+              balance={account.calculatedAvailableBalanceInSats}
+              frozenBalance={account.calculatedFrozenOrLockedBalanceInSats}
               fillLevel={jarFillLevel(account.calculatedTotalBalanceInSats, totalBalance)}
               tooltipText={
                 account.accountIndex === 0 && jarIsEmpty

diff --git a/src/components/Receive.jsx b/src/components/Receive.jsx
@@ -117,7 +117,8 @@ export default function Receive({ wallet }) {
                   <SelectableJar
                     key={it.accountIndex}
                     index={it.accountIndex}
-                    balance={it.calculatedTotalBalanceInSats}
+                    balance={it.calculatedAvailableBalanceInSats}
+                    frozenBalance={it.calculatedFrozenOrLockedBalanceInSats}
                     isSelectable={true}
                     isSelected={it.accountIndex === selectedJarIndex}
                     fillLevel={jarFillLevel(

diff --git a/src/components/Send/Send.module.css b/src/components/Send/Send.module.css
@@ -157,7 +157,7 @@ input[type='number'] {
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
   gap: 2rem;
   color: var(--bs-body-color);
   margin-bottom: 1.5rem;

diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx
@@ -689,6 +689,7 @@ export default function Send({ wallet }: SendProps) {
                     key={it.accountIndex}
                     index={it.accountIndex}
                     balance={it.calculatedAvailableBalanceInSats}
+                    frozenBalance={it.calculatedFrozenOrLockedBalanceInSats}
                     isSelectable={!isOperationDisabled && !isLoading && it.calculatedAvailableBalanceInSats > 0}
                     isSelected={it.accountIndex === sourceJarIndex}
                     fillLevel={jarFillLevel(

diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx
@@ -100,7 +100,8 @@ const SelectJar = ({
           <SelectableJar
             key={index}
             index={account.accountIndex}
-            balance={account.calculatedTotalBalanceInSats}
+            balance={account.calculatedAvailableBalanceInSats}
+            frozenBalance={account.calculatedFrozenOrLockedBalanceInSats}
             isSelectable={isJarSelectable(account.accountIndex)}
             isSelected={selectedJar === account.accountIndex}
             fillLevel={jarFillLevel(account.calculatedTotalBalanceInSats, totalBalance)}

diff --git a/src/components/jars/Jar.module.css b/src/components/jars/Jar.module.css
@@ -58,6 +58,12 @@
   font-size: 0.8rem;
 }
 
+.frozen.jarBalance {
+  --bs-code-color: var(--bs-blue);
+  color: var(--bs-blue);
+  font-size: 0.75rem;
+}
+
 .selectableJarContainer {
   display: flex;
   flex-direction: column;
@@ -68,7 +74,7 @@
 
 .selectableJarContainer:not(.selectable) {
   color: var(--bs-gray-600);
-  cursor: unset;
+  cursor: none;
 }
 
 .selectableJarContainer > .selectionCircle {

diff --git a/src/components/jars/Jar.tsx b/src/components/jars/Jar.tsx
@@ -14,6 +14,7 @@ type JarFillLevel = 0 | 1 | 2 | 3
 interface JarProps {
   index: JarIndex
   balance: AmountSats
+  frozenBalance: AmountSats
   fillLevel: JarFillLevel
   isOpen?: boolean
 }
@@ -83,7 +84,7 @@ const jarInitial = (index: JarIndex) => {
 /**
  * A jar with index and balance.
  */
-const Jar = ({ index, balance, fillLevel, isOpen = false }: JarProps) => {
+const Jar = ({ index, balance, frozenBalance, fillLevel, isOpen = false }: JarProps) => {
   const settings = useSettings()
 
   const jarSymbol = useMemo(() => {
@@ -126,6 +127,16 @@ const Jar = ({ index, balance, fillLevel, isOpen = false }: JarProps) => {
         <div className={`${styles.jarBalance} jar-balance-container-hook`}>
           <Balance valueString={balance.toString()} convertToUnit={settings.unit} showBalance={settings.showBalance} />
         </div>
+        {frozenBalance && frozenBalance > 0 ? (
+          <div className={`${styles.jarBalance} ${styles.frozen} small jar-balance-container-hook`}>
+            <Sprite symbol="snowflake" width="14" height="14" />
+            <Balance
+              valueString={frozenBalance.toString()}
+              convertToUnit={settings.unit}
+              showBalance={settings.showBalance}
+            />
+          </div>
+        ) : null}
       </div>
     </div>
   )
@@ -137,6 +148,7 @@ const Jar = ({ index, balance, fillLevel, isOpen = false }: JarProps) => {
 const SelectableJar = ({
   index,
   balance,
+  frozenBalance,
   fillLevel,
   isSelectable,
   isSelected,
@@ -150,7 +162,7 @@ const SelectableJar = ({
       })}
       onClick={() => isSelectable && onClick(index)}
     >
-      <Jar index={index} balance={balance} fillLevel={fillLevel} />
+      <Jar index={index} balance={balance} frozenBalance={frozenBalance} fillLevel={fillLevel} />
       <div className={styles.selectionCircle}></div>
     </div>
   )
@@ -160,7 +172,14 @@ const SelectableJar = ({
  * A jar with index, balance, and a tooltip.
  * The jar symbol opens on hover.
  */
-const OpenableJar = ({ index, balance, fillLevel, tooltipText, onClick }: JarProps & TooltipJarProps) => {
+const OpenableJar = ({
+  index,
+  balance,
+  frozenBalance,
+  fillLevel,
+  tooltipText,
+  onClick,
+}: JarProps & TooltipJarProps) => {
   const [jarIsOpen, setJarIsOpen] = useState(false)
 
   const tooltipTarget = useRef(null)
@@ -192,7 +211,7 @@ const OpenableJar = ({ index, balance, fillLevel, tooltipText, onClick }: JarPro
       >
         {(props) => <rb.Tooltip {...props}>{tooltipText}</rb.Tooltip>}
       </rb.Overlay>
-      <Jar index={index} balance={balance} fillLevel={fillLevel} isOpen={jarIsOpen} />
+      <Jar index={index} balance={balance} frozenBalance={frozenBalance} fillLevel={fillLevel} isOpen={jarIsOpen} />
     </div>
   )
 }