Skip to content

Commit

Permalink
feat: first draft of jars on main wallet screen (#324)
Browse files Browse the repository at this point in the history 
* feat: add simple jar breakdown of wallet

* feat: add collapsible container for jars
  • Loading branch information
Daniel committed Jun 14, 2022
1 parent 6f9953f commit 216100a
Show file tree
Hide file tree
Showing 10 changed files with 239 additions and 161 deletions.
44 changes: 44 additions & 0 deletions public/sprite.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ export default function App() {
)}
</Route>
{currentWallet && !settings.useAdvancedWalletMode && (
<Route element={<Layout variant="narrow" />}>
<Route element={<Layout />}>
<Route path={routes.wallet} element={<CurrentWalletMagic />} />
</Route>
)}
Expand Down
175 changes: 63 additions & 112 deletions src/components/CurrentWalletMagic.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState, useMemo, useCallback } from 'react'
import React, { useEffect, useState, useMemo } from 'react'
import * as rb from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import { useSettings, useSettingsDispatch } from '../context/SettingsContext'
Expand All @@ -11,6 +11,7 @@ import { ExtendedLink } from './ExtendedLink'
import { routes } from '../constants/routes'
import { useBalanceSummary } from '../hooks/BalanceSummary'
import { DisplayAccountsOverlay } from './DisplayAccountsOverlay'
import { Jars } from './Jars'

const WalletHeader = ({ name, balance, unit, showBalance, loading }) => {
return (
Expand Down Expand Up @@ -40,77 +41,6 @@ const WalletHeader = ({ name, balance, unit, showBalance, loading }) => {
)
}

const PrivacyLevels = ({ accountBalances, loading, onAccountClicked }) => {
const numPrivacyLevelsPalceholders = 5
const sortedAccountBalances = (accountBalances || []).sort((lhs, rhs) => lhs.accountIndex - rhs.accountIndex)
const numAccounts = sortedAccountBalances.length

return (
<div className="d-flex justify-content-center">
<div className="d-flex flex-column align-items-start" style={{ gap: '1rem' }}>
{loading
? Array(numPrivacyLevelsPalceholders)
.fill('')
.map((_, index) => <LoadingPrivacyLevel key={index} level={numPrivacyLevelsPalceholders} />)
: sortedAccountBalances.map(({ accountIndex, totalBalance }) => (
<PrivacyLevel
key={accountIndex}
numAccounts={numAccounts}
level={accountIndex}
balance={totalBalance}
loading={loading}
onClick={onAccountClicked}
/>
))}
</div>
</div>
)
}

const LoadingPrivacyLevel = ({ level }) => {
const loadingShields = Array(level)
.fill('')
.map((_, index) => {
return <Sprite key={index} symbol="shield-filled-loading" width="24" height="30" />
})

return (
<div className="d-flex align-items-center" style={{ cursor: 'wait' }}>
<div className="d-flex">{loadingShields}</div>
<div className="ps-2">
<Balance loading={true} />
</div>
</div>
)
}

const PrivacyLevel = ({ numAccounts, level, balance, onClick }) => {
const settings = useSettings()

const filledShields = Array(level + 1)
.fill('')
.map((_, index) => {
return <Sprite key={index} symbol="shield-filled" width="24" height="30" />
})
const outlinedShields = Array(numAccounts - filledShields.length)
.fill('')
.map((_, index) => {
return <Sprite key={index} symbol="shield-outline" width="24" height="30" />
})

return (
<div className="d-flex align-items-center" onClick={() => onClick && onClick(level)} style={{ cursor: 'pointer' }}>
<div className={`d-flex privacy-level-${level}`}>
{filledShields}
{outlinedShields}
</div>
<div className="ps-2">
<Balance valueString={balance} convertToUnit={settings.unit} showBalance={settings.showBalance} />
</div>
</div>
)
}

export default function CurrentWalletMagic() {
const { t } = useTranslation()
const settings = useSettings()
Expand All @@ -122,6 +52,7 @@ export default function CurrentWalletMagic() {

const [alert, setAlert] = useState(null)
const [isLoading, setIsLoading] = useState(true)
const [showJars, setShowJars] = useState(false)

const accounts = useMemo(
() => currentWalletInfo && currentWalletInfo.data.display.walletinfo.accounts,
Expand All @@ -130,10 +61,10 @@ export default function CurrentWalletMagic() {
const [selectedAccountIndex, setSelectedAccountIndex] = useState(0)
const [isAccountOverlayShown, setIsAccountOverlayShown] = useState(false)

const onAccountClicked = useCallback((accountIndex) => {
const onJarClicked = (accountIndex) => {
setSelectedAccountIndex(accountIndex)
setIsAccountOverlayShown(true)
}, [])
}

useEffect(() => {
const abortCtrl = new AbortController()
Expand All @@ -152,7 +83,15 @@ export default function CurrentWalletMagic() {
}, [currentWallet, reloadCurrentWalletInfo, t])

return (
<>
<div>
{alert && (
<rb.Row>
<rb.Col>
<rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>
</rb.Col>
</rb.Row>
)}

{accounts && (
<DisplayAccountsOverlay
accounts={accounts}
Expand All @@ -161,28 +100,18 @@ export default function CurrentWalletMagic() {
onHide={() => setIsAccountOverlayShown(false)}
/>
)}
<div className="privacy-levels">
{alert && (
<rb.Row onClick={() => settingsDispatch({ showBalance: !settings.showBalance })} style={{ cursor: 'pointer' }}>
<WalletHeader
name={currentWallet?.name}
balance={balanceSummary?.totalBalance}
unit={settings.unit}
showBalance={settings.showBalance}
loading={isLoading}
/>
</rb.Row>
<rb.Row className="mt-4 mb-5 d-flex justify-content-center">
<rb.Col xs={10} md={8}>
<rb.Row>
<rb.Col>
<rb.Alert variant={alert.variant}>{alert.message}</rb.Alert>
</rb.Col>
</rb.Row>
)}
<>
<rb.Row
onClick={() => settingsDispatch({ showBalance: !settings.showBalance })}
style={{ cursor: 'pointer' }}
>
<WalletHeader
name={currentWallet?.name}
balance={balanceSummary?.totalBalance}
unit={settings.unit}
showBalance={settings.showBalance}
loading={isLoading}
/>
</rb.Row>
<rb.Row className="mt-4">
<rb.Col>
{/* Always receive on first mixdepth. */}
<ExtendedLink
Expand All @@ -208,21 +137,43 @@ export default function CurrentWalletMagic() {
</ExtendedLink>
</rb.Col>
</rb.Row>
<rb.Row>
<hr className="my-4" />
</rb.Row>
<rb.Row>
<PrivacyLevels
accountBalances={balanceSummary?.accountBalances}
loading={isLoading}
onAccountClicked={onAccountClicked}
/>
</rb.Row>
<rb.Row>
<hr className="my-4" />
</rb.Row>
</>
</div>
</>
</rb.Col>
</rb.Row>
<rb.Collapse in={showJars}>
<rb.Row>
<div className="mb-5">
<div>
{isLoading ? (
<rb.Placeholder as="div" animation="wave">
<rb.Placeholder className={styles['jars-placeholder']} />
</rb.Placeholder>
) : (
<Jars
accountBalances={balanceSummary?.accountBalances}
totalBalance={balanceSummary?.totalBalance}
onClick={onJarClicked}
/>
)}
</div>
</div>
</rb.Row>
</rb.Collapse>
<rb.Row className="d-flex justify-content-center">
<rb.Col xs={showJars ? 12 : 10} md={showJars ? 12 : 8}>
<div className={styles['jars-divider-container']}>
<hr className={styles['jars-divider-line']} />
<div
className={styles['jars-divider-button']}
onClick={() => {
setShowJars(!showJars)
}}
>
<Sprite symbol={showJars ? 'caret-up' : 'caret-down'} width="20" height="20" />
</div>
<hr className={styles['jars-divider-line']} />
</div>
</rb.Col>
</rb.Row>
</div>
)
}
34 changes: 34 additions & 0 deletions src/components/CurrentWalletMagic.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,37 @@
height: 1.8rem;
margin-bottom: 0.45rem;
}

.jars-placeholder {
width: 100%;
height: 3.5rem;
}

.jars-divider-container {
display: flex;
justify-content: space-between;
align-items: center;
}

.jars-divider-line {
margin: 0;
width: 50%;
flex-grow: 0;
flex-shrink: 1;
}

.jars-divider-button {
display: flex;
justify-content: center;
align-items: center;
margin: 0 1rem;
flex-shrink: 0;
flex-grow: 1;
color: var(--bs-body-color);
cursor: pointer;
background-color: transparent;
border: 1px solid var(--bs-body-color);
border-radius: 50%;
width: 2rem;
height: 2rem;
}
4 changes: 1 addition & 3 deletions src/components/DisplayAccountsOverlay.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,9 +95,7 @@ export function DisplayAccountsOverlay({ accounts, selectedAccountIndex = 0, sho
{account.branches.map((branch, index) => (
<rb.Accordion.Item className={styles['accordion-item']} key={branch.branch} eventKey={`${index}`}>
<rb.Accordion.Header>
<div className="w-100">
<DisplayBranchHeader branch={branch} />
</div>
<DisplayBranchHeader branch={branch} />
</rb.Accordion.Header>
<rb.Accordion.Body className={styles['accordion-body']}>
<DisplayBranchBody branch={branch} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/DisplayBranch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function DisplayBranchHeader({ branch }: DisplayBranchProps) {
const [type, derivation] = detailsString.split('\t')
return (
<rb.Container fluid>
<rb.Row className="w-100">
<rb.Row className="w-100 align-items-center">
<rb.Col>
<div className={styles['branch-title']}>
{type === 'external addresses' && <>{t('current_wallet_advanced.account_heading_external_addresses')}</>}
Expand Down

0 comments on commit 216100a

Please sign in to comment.