Skip to content

Commit

Permalink
refactor: align utxo list and modal components (#815)
Browse files Browse the repository at this point in the history 
* refactor: externalize UtxoIcon component and utxoTags function

* refactor: externalize UtxoConfirmations component

* refactor: reuse utxo icons in Jar details and UTXO list

* refactor(ui): simpler checkbox in utxo list

* refactor(send): vertically align balance

* refactor(send): tooltip for shortened addresses

* refactor(ui): externalize UtxoTags component
  • Loading branch information
@theborakompanioni
theborakompanioni authored Aug 20, 2024
1 parent 962dc87 commit 4cfe385
Show file tree
Hide file tree
Showing 12 changed files with 299 additions and 309 deletions.
90 changes: 21 additions & 69 deletions src/components/Send/ShowUtxos.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,36 @@
.joinedUtxoAndCjout {
background-color: #27ae600d !important;
color: #27ae60 !important;
}

.frozenUtxo {
background-color: #2d9cdb0d !important;
color: #2d9cdb !important;
}

.depositUtxo {
background-color: var(--bs-body-bg) !important;
color: var(--bs-modal-color) !important;
}

.changeAndReuseUtxo {
background-color: #eb57570d !important;
color: #eb5757 !important;
}

.utxoTagDeposit {
color: #999999;
border: 1px solid #bbbbbb;
background-color: #dedede !important;
border-radius: 0.35rem;
padding: 0rem 0.25rem;
}

.utxoTagJoinedAndCjout {
border: 1px solid #27ae60;
background-color: #c6eed7 !important;
border-radius: 0.35rem;
padding: 0rem 0.25rem;
}

.utxoTagFreeze {
border: 1px solid #2d9cdb;
background-color: #bce7ff !important;
border-radius: 0.35rem;
padding: 0rem 0.25rem;
.utxoListDisplayHeight {
max-height: 17.6rem;
}

.utxoTagChangeAndReuse {
border: 1px solid #eb5757;
background-color: #fac7c7 !important;
border-radius: 0.35rem;
padding: 0rem 0.25rem;
.row.row-normal {
background-color: transparent !important;
}

.squareToggleButton {
appearance: none;
width: 22px;
height: 22px;
border-radius: 3px;
border: 1px solid var(--bs-body-color);
margin-top: 0.45rem;
.row.row-success {
background-color: #27ae600d !important;
color: #27ae60 !important;
}

.selected {
visibility: visible !important;
background-color: var(--bs-body-color);
.row.row-warning {
background-color: #bb97200d !important;
color: #ebc957 !important;
}

.squareFrozenToggleButton {
appearance: none;
width: 22px;
height: 22px;
border-radius: 3px;
border: 1px solid #2d9cdb;
margin-top: 0.45rem;
.row.row-danger {
background-color: #eb57570d !important;
color: #eb5757 !important;
}

.utxoListDisplayHeight {
max-height: 17.6rem;
.row.row-frozen {
background-color: #2d9cdb0d !important;
color: #2d9cdb !important;
}

.customHeaderClass {
background-color: var(--bs-gray-800) !important;
padding: var(--bs-modal-header-padding) !important;
.checkbox {
width: 24px;
height: 24px;
}

.customTitleClass {
color: var(--bs-heading-color) !important;
.checkbox:checked {
accent-color: var(--bs-black);
}
136 changes: 41 additions & 95 deletions src/components/Send/ShowUtxos.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ import Balance from '../Balance'
import Divider from '../Divider'
import { BaseModal } from '../Modal'
import Sprite from '../Sprite'
import { utxoTags } from '../jar_details/UtxoList'
import { utxoTags } from '../utxo/utils'
import { UtxoConfirmations } from '../utxo/Confirmations'
import UtxoIcon from '../utxo/UtxoIcon'
import UtxoTags from '../utxo/UtxoTags'
import { shortenStringMiddle } from '../../utils'
import styles from './ShowUtxos.module.css'

Expand Down Expand Up @@ -42,81 +45,15 @@ interface UtxoListDisplayProps {
showBackgroundColor: boolean
}

// Utility function to Identifies Icons
const utxoIcon = (tag: string, isFrozen: boolean) => {
if (isFrozen && tag === 'bond') return 'timelock'
if (isFrozen) return 'snowflake'
if (tag === 'bond') return 'timelock'
if (tag === 'cj-out') return 'mixed'
if (tag === 'deposit' || tag === 'non-cj-change' || tag === 'reused') return 'unmixed'
return 'unmixed' // fallback
}

// Utility function to allot classes
const allotClasses = (tag: string, isFrozen: boolean) => {
if (isFrozen) return { row: styles.frozenUtxo, tag: styles.utxoTagFreeze }
if (tag === 'deposit') return { row: styles.depositUtxo, tag: styles.utxoTagDeposit }
if (tag === 'joined' || tag === 'cj-out') return { row: styles.joinedUtxoAndCjout, tag: styles.utxoTagJoinedAndCjout }
if (tag === 'non-cj-change' || tag === 'reused')
return { row: styles.changeAndReuseUtxo, tag: styles.utxoTagChangeAndReuse }
return { row: styles.depositUtxo, tag: styles.utxoTagDeposit }
}

interface ConfirmationFormat {
symbol: string
display: string
confirmations: number
}

const formatConfirmations = (confirmations: number): ConfirmationFormat => ({
symbol: `confs-${confirmations >= 6 ? 'full' : confirmations}`,
display: confirmations > 9999 ? `${Number(9999).toLocaleString()}+` : confirmations.toLocaleString(),
confirmations,
})

const Confirmations = ({ value }: { value: ConfirmationFormat }) =>
value.confirmations > 9999 ? (
<rb.OverlayTrigger
popperConfig={{
modifiers: [
{
name: 'offset',
options: {
offset: [0, 1],
},
},
],
}}
overlay={(props) => <rb.Tooltip {...props}>{value.confirmations.toLocaleString()}</rb.Tooltip>}
>
<div>
<Sprite symbol={value.symbol} width="28px" height="28px" className="mb-1" />
{value.display}
</div>
</rb.OverlayTrigger>
) : (
<div>
<Sprite symbol={value.symbol} width="28px" height="28px" className="mb-1" />
{value.display}
</div>
)

const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t }: UtxoRowProps) => {
const address = useMemo(() => shortenStringMiddle(utxo.address, 16), [utxo.address])
const confFormat = useMemo(() => formatConfirmations(utxo.confirmations), [utxo.confirmations])
const tag = useMemo(() => utxoTags(utxo, walletInfo, t), [utxo, walletInfo, t])

const { icon, rowAndTagClass } = useMemo(() => {
if (tag.length === 0) {
return { icon: 'unmixed', rowAndTagClass: { row: styles.depositUtxo, tag: styles.utxoTagDeposit } }
}
return { icon: utxoIcon(tag[0].tag, utxo.frozen), rowAndTagClass: allotClasses(tag[0].tag, utxo.frozen) }
}, [tag, utxo.frozen])
const displayAddress = useMemo(() => shortenStringMiddle(utxo.address, 24), [utxo.address])
const tags = useMemo(() => utxoTags(utxo, walletInfo, t), [utxo, walletInfo, t])

return (
<Row
item={utxo}
className={classNames(rowAndTagClass.row, {
className={classNames(styles.row, styles[`row-${tags[0].color || 'normal'}`], {
[styles['row-frozen']]: utxo.frozen,
'bg-transparent': !showBackgroundColor,
'cursor-pointer': utxo.selectable,
'cursor-not-allowed': !utxo.selectable,
Expand All @@ -125,24 +62,34 @@ const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t
>
<Cell>
{utxo.selectable && (
<input
id={`utxo-checkbox-${utxo.utxo}`}
type="checkbox"
checked={utxo.checked}
disabled={!utxo.selectable}
onChange={() => utxo.selectable && onToggle(utxo)}
className={classNames(utxo.frozen ? styles.squareFrozenToggleButton : styles.squareToggleButton, {
[styles.selected]: utxo.checked,
})}
/>
<div className="d-flex justify-content-center align-items-center">
<input
id={`utxo-checkbox-${utxo.utxo}`}
type="checkbox"
checked={utxo.checked}
disabled={!utxo.selectable}
onChange={() => utxo.selectable && onToggle(utxo)}
className={styles.checkbox}
/>
</div>
)}
</Cell>
<Cell>
<Sprite symbol={icon} width="23px" height="23px" />
<UtxoIcon value={utxo} tags={tags} />
</Cell>
<Cell className="slashed-zeroes">
<rb.OverlayTrigger
overlay={(props) => (
<rb.Tooltip className="slashed-zeroes" {...props}>
{utxo.address}
</rb.Tooltip>
)}
>
<span>{displayAddress}</span>
</rb.OverlayTrigger>
</Cell>
<Cell className="slashed-zeroes">{address}</Cell>
<Cell>
<Confirmations value={confFormat} />
<UtxoConfirmations value={utxo} />
</Cell>
<Cell>
<Balance
Expand All @@ -155,31 +102,30 @@ const UtxoRow = ({ utxo, onToggle, showBackgroundColor, settings, walletInfo, t
/>
</Cell>
<Cell>
<div className={classNames(rowAndTagClass.tag, 'd-inline-block')}>{tag.length ? tag[0].tag : ''}</div>
<UtxoTags value={tags} />
</Cell>
</Row>
)
}

type SelectableUtxoTableRowData = SelectableUtxo & {
// TODO: add "tags" here and remove from "Utxo" type
// tags?: { tag: string; color: string }[]
} & Pick<TableTypes.TableNode, 'id'>
type SelectableUtxoTableRowData = SelectableUtxo & Pick<TableTypes.TableNode, 'id'>

const UtxoListDisplay = ({ utxos, onToggle, settings, showBackgroundColor = true }: UtxoListDisplayProps) => {
const { t } = useTranslation()
const walletInfo = useCurrentWalletInfo()

const TABLE_THEME = {
Table: `
--data-table-library_grid-template-columns: 3.5rem 2.5rem 12rem 2fr 3fr 10rem;
@media only screen and (min-width: 768px) {
--data-table-library_grid-template-columns: 3.5rem 2.5rem 14rem 5fr 3fr 10rem};
}
--data-table-library_grid-template-columns: 2.5rem 2.5rem 17rem 3rem 12rem 1fr};
`,
BaseCell: `
padding: 0.35rem 0.25rem !important;
margin: 0.15rem 0px !important;
`,
Cell: `
&:nth-of-type(5) {
text-align: right;
}
`,
}
const tableTheme = useTheme(TABLE_THEME)
Expand Down Expand Up @@ -265,8 +211,8 @@ const ShowUtxos = ({ isOpen, onCancel, onConfirm, isLoading, utxos, alert }: Sho
backdrop={true}
title={t('show_utxos.show_utxo_title')}
closeButton
headerClassName={styles.customHeaderClass}
titleClassName={styles.customTitleClass}
headerClassName=""
titleClassName=""
>
<rb.Modal.Body>
{isLoading ? (
Expand Down
63 changes: 0 additions & 63 deletions src/components/jar_details/UtxoList.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@
margin-bottom: 1px;
}

.utxoList .utxoIcon > .iconFrozen {
margin-bottom: 1px;
}

.utxoList tr.frozen td {
--bs-code-color: var(--bs-blue);
color: var(--bs-blue);
Expand All @@ -36,65 +32,6 @@
display: none !important;
}

.utxoList .utxoIcon > .iconLocked {
margin-bottom: 3px;
}

.utxoList .utxoTagList {
display: flex;
gap: 0.5rem;
color: var(--bs-body-color);
}

.utxoList .utxoConfirmations {
width: 2rem;
display: flex;
gap: 0.1rem;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0.1rem 0.2rem;
border-radius: 0.2rem;
color: var(--bs-success);
font-size: 0.6rem;
}

.utxoList .utxoConfirmations-0 {
color: var(--bs-info);
}

.utxoList .utxoTagList > .utxoTag {
display: flex;
justify-content: center;
align-items: center;
gap: 0.3rem;
font-size: 0.7rem;
border: 1px solid var(--bs-body-color);
border-radius: 0.2rem;
padding: 0.1rem 0.3rem;
}

.utxoList .utxoTagList > .utxoTag.utxoTag-success {
color: var(--bs-success);
background-color: rgba(var(--bs-success-rgb), 0.1);
border-color: var(--bs-success);
}
.utxoList .utxoTagList > .utxoTag.utxoTag-warning {
color: var(--bs-warning);
background-color: rgba(var(--bs-warning-rgb), 0.1);
border-color: var(--bs-warning);
}
.utxoList .utxoTagList > .utxoTag.utxoTag-danger {
color: var(--bs-danger);
background-color: rgba(var(--bs-danger-rgb), 0.1);
border-color: var(--bs-danger);
}
.utxoList .utxoTagList > .utxoTag.utxoTag-dark {
color: var(--bs-white);
background-color: var(--bs-dark);
border-color: var(--bs-dark);
}

.utxoList .utxoListButtonDetails {
font-size: 0.9rem;
}
Expand Down
Loading

0 comments on commit 4cfe385

Please sign in to comment.