Skip to content

Commit

Permalink
feat(balance): display frozen balance on jars
Browse files Browse the repository at this point in the history
  • Loading branch information
theborakompanioni committed Aug 14, 2023
1 parent da39aa3 commit 592bde7
Show file tree
Hide file tree
Showing 9 changed files with 42 additions and 12 deletions.
3 changes: 2 additions & 1 deletion src/components/JarSelectorModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Jars.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion src/components/Jars.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion src/components/Receive.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
2 changes: 1 addition & 1 deletion src/components/Send/Send.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/components/Send/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
3 changes: 2 additions & 1 deletion src/components/fb/FidelityBondSteps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
8 changes: 7 additions & 1 deletion src/components/jars/Jar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -68,7 +74,7 @@

.selectableJarContainer:not(.selectable) {
color: var(--bs-gray-600);
cursor: unset;
cursor: none;
}

.selectableJarContainer > .selectionCircle {
Expand Down
27 changes: 23 additions & 4 deletions src/components/jars/Jar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ type JarFillLevel = 0 | 1 | 2 | 3
interface JarProps {
index: JarIndex
balance: AmountSats
frozenBalance: AmountSats
fillLevel: JarFillLevel
isOpen?: boolean
}
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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>
)
Expand All @@ -137,6 +148,7 @@ const Jar = ({ index, balance, fillLevel, isOpen = false }: JarProps) => {
const SelectableJar = ({
index,
balance,
frozenBalance,
fillLevel,
isSelectable,
isSelected,
Expand All @@ -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>
)
Expand All @@ -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)
Expand Down Expand Up @@ -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>
)
}
Expand Down

0 comments on commit 592bde7

Please sign in to comment.