Skip to content

Commit

Permalink
refactor: ledger page menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistakia
mistakia committed Apr 30, 2024
1 parent df0428b commit 30be83f
Show file tree
Hide file tree
Showing 11 changed files with 487 additions and 186 deletions.
51 changes: 25 additions & 26 deletions src/views/components/ledger-chart-addresses/ledger-chart-addresses.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,33 +130,32 @@ export default function LedgerChartAddresses({ data, isLoading }) {
}}
style={{ width: '100%', height: '600px' }}
/>
<div className='ledger__chart-sections'>
<div className='ledger__chart-section'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>
The total number of active, new, and reused addresses used per
day.
</p>
<p>
Active shows the number of unique addresses used. New shows the
number of addresses created. Reused shows the number of addresses
used that were created on a previous day.
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
<div className='ledger__chart-description'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>
The total number of active, new, and reused addresses used per day.
</p>
<p>
Active shows the number of unique addresses used. New shows the
number of addresses created. Reused shows the number of addresses
used that were created on a previous day.
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</div>
<div className='ledger__chart-sections'>
<LedgerChartMetrics
data={data.active_addresses}
label='Active Address Stats'
Expand Down
36 changes: 18 additions & 18 deletions src/views/components/ledger-chart-amounts/ledger-chart-amounts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,26 +172,26 @@ export default function LedgerChartAmounts({ data, isLoading }) {
}}
style={{ width: '100%', height: '600px' }}
/>
<div className='ledger__chart-sections'>
<div className='ledger__chart-section'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<div className='ledger__chart-description'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>
The number of confirmed send-type blocks per day where the amount in
the block is in a given range (in Nano)
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
the block is in a given range (in Nano).
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</div>
</>
)
Expand Down
36 changes: 18 additions & 18 deletions src/views/components/ledger-chart-blocks/ledger-chart-blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,25 +152,25 @@ export default function LedgerChartBlocks({ data, isLoading }) {
}}
style={{ width: '100%', height: '600px' }}
/>
<div className='ledger__chart-sections'>
<div className='ledger__chart-section'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
The number of confirmed blocks (by type) per day.
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
<div className='ledger__chart-description'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>The number of confirmed blocks (by type) per day.</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</div>
<div className='ledger__chart-sections'>
<LedgerChartMetrics
data={data.blocks}
label='Total Block Stats'
Expand Down
5 changes: 4 additions & 1 deletion src/views/components/ledger-chart-distribution/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,7 @@ const map_dispatch_to_props = {
get_price_history: nanodb_actions.get_price_history
}

export default connect(map_state_to_props, map_dispatch_to_props)(LedgerChartDistribution)
export default connect(
map_state_to_props,
map_dispatch_to_props
)(LedgerChartDistribution)
44 changes: 25 additions & 19 deletions src/views/components/ledger-chart-distribution/ledger-chart-distribution.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,12 @@ const color_map = {
_000001_below_relative_supply: '#dcbeff' // Lavender Blush
}

export default function LedgerChartDistribution({ data, isLoading, price_history, get_price_history }) {
export default function LedgerChartDistribution({
data,
isLoading,
price_history,
get_price_history
}) {
useEffect(() => {
if (price_history.length === 0) {
get_price_history()
Expand Down Expand Up @@ -191,25 +196,26 @@ export default function LedgerChartDistribution({ data, isLoading, price_history
}}
style={{ width: '100%', height: '600px' }}
/>
<div className='ledger__chart-sections'>
<div className='ledger__chart-section'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
The relative distribution of the supply held by addresses within specific balance ranges.
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
<div className='ledger__chart-description'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>
The relative distribution of the supply held by addresses within
specific balance ranges.
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</div>
</>
)
Expand Down
44 changes: 22 additions & 22 deletions src/views/components/ledger-chart-usd-transferred/ledger-chart-usd-transferred.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,29 +122,29 @@ export default function LedgerUSDTransferred({ data, isLoading }) {
}}
style={{ width: '100%', height: '600px' }}
/>
<div className='ledger__chart-sections'>
<div className='ledger__chart-section'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>The total amount of value transferred (in USD) per day.</p>
<p>
Based on the daily closing price of Nano/USD and the total amount
of Nano transferred that day.
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
<div className='ledger__chart-description'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>The total amount of value transferred (in USD) per day.</p>
<p>
Based on the daily closing price of Nano/USD and the total amount of
Nano transferred that day.
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</div>
<div className='ledger__chart-sections'>
<LedgerChartMetrics
data={data.total_usd_send_value.map((d) => [d[0], d[1]])}
label='USD Transferred Stats'
Expand Down
36 changes: 19 additions & 17 deletions src/views/components/ledger-chart-volume/ledger-chart-volume.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,26 +154,28 @@ export default function LedgerChartVolume({ data, isLoading }) {
}}
style={{ width: '100%', height: '600px' }}
/>
<div className='ledger__chart-sections'>
<div className='ledger__chart-section'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<div className='ledger__chart-description'>
<div className='section__heading'>
<span>Description</span>
</div>
<div className='ledger__chart-section-body description'>
<p>
The total amount sent (in Nano) and total amount of voting weight
changed per day.
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</p>
</div>
{!isLoading && (
<div className='ledger__chart-section-body download'>
<Button size='small' onClick={handle_download_csv}>
Download CSV
</Button>
<Button size='small' onClick={handle_download_json}>
Download JSON
</Button>
</div>
)}
</div>
<div className='ledger__chart-sections'>
<LedgerChartMetrics
data={send_volume_big_number}
label='Send Stats'
Expand Down
1 change: 1 addition & 0 deletions src/views/components/menu/menu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export default function Menu({ hide, hideSearch, hide_speed_dial }) {
<div className='menu__container'>
<SwipeableDrawer
open={open}
className='menu__drawer'
onOpen={handleOpen}
onClose={handleClose}
disableBackdropTransition={!iOS}
Expand Down
2 changes: 1 addition & 1 deletion src/views/components/menu/menu.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ $hoverBorder = rgba(0, 0, 0, 0.23)
align-content flex-start
font-family 'Inter', sans-serif

.MuiDrawer-paper.MuiPaper-root
.menu__drawer .MuiDrawer-paper.MuiPaper-root
background $backgroundColor
border-radius 0 0 32px 32px
.menu__sections
Expand Down
Loading

0 comments on commit 30be83f

Please sign in to comment.