-
Notifications
You must be signed in to change notification settings - Fork 96
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4793 from LiskHQ/4769-add-hw-status-to-top-bar
Add hardware wallet status to top bar
- Loading branch information
Showing
12 changed files
with
296 additions
and
51 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
src/modules/common/components/bars/topBar/hardwareWallet.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| @import '../../../../../../setup/react/app/mixins.css'; | ||
|
|
||
| .wrapper { | ||
| margin-right: 16px; | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
|
|
||
| & .hwIcon { | ||
| width: 20px; | ||
| height: 100% !important; | ||
| background-color: transparent; | ||
| padding: 0px 6px !important; | ||
| max-width: fit-content; | ||
| min-width: fit-content; | ||
| position: relative; | ||
|
|
||
| &.connected::after { | ||
| background-color: var(--color-jade-green); | ||
| } | ||
|
|
||
| &.standby::after { | ||
| background-color: var(--color-warning-border); | ||
| } | ||
|
|
||
| &::after { | ||
| width: 6px; | ||
| height: 6px; | ||
| border-radius: 50%; | ||
| content: ""; | ||
| display: block; | ||
| position: absolute; | ||
| margin-top: -25px; | ||
| margin-left: 14px; | ||
| } | ||
|
|
||
| & > img { | ||
| margin-top: 5px; | ||
| } | ||
| } | ||
|
|
||
| & > button ~ div { | ||
| margin-right: -23px; | ||
| margin-top: -18px; | ||
| width: 229px; | ||
| } | ||
| } | ||
|
|
||
| .dropdown { | ||
| width: 200px; | ||
| padding: 24px 16px 17px 16px; | ||
| border-radius: var(--border-radius-box); | ||
|
|
||
| & h6 { | ||
| font-family: var(--heading-font) !important; | ||
| font-size: var(--font-size-h6) !important; | ||
| color: var(--color-content-light) !important; | ||
| padding: 0px !important; | ||
| margin: 0px; | ||
|
|
||
| &:hover { | ||
| background-color: transparent !important; | ||
| } | ||
| } | ||
|
|
||
| & h6 ~ ul { | ||
| padding: 0px !important; | ||
| font-size: var(--paragraph-font-size-s) !important; | ||
| margin: 6px 0px 0px 0px; | ||
|
|
||
| &:hover { | ||
| background-color: transparent !important; | ||
| color: var(--color-slate-gray); | ||
| } | ||
|
|
||
| & > li { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| & > li > div { | ||
| width: 35%; | ||
| color: var(--color-slate-gray); | ||
| } | ||
|
|
||
| & > li > div:nth-child(2) { | ||
| width: 65%; | ||
| color: var(--color-content-light); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .statusWrapper { | ||
| border-radius: 5px; | ||
| border: 1px solid transparent; | ||
| display: flex; | ||
| align-items: center; | ||
| font-size: var(--button-font-size-s); | ||
| width: fit-content; | ||
| padding: 0px 8px; | ||
| text-transform: capitalize; | ||
|
|
||
| &::before { | ||
| width: 6px; | ||
| height: 6px; | ||
| border-radius: 50%; | ||
| content: ""; | ||
| display: block; | ||
| margin-right: 8px; | ||
| } | ||
|
|
||
| &.standby { | ||
| border-color: var(--color-warning-border-transparent); | ||
| background-color: var(--color-warning-border-background-transparent); | ||
| color: var(--color-warning-border) !important; | ||
|
|
||
| &::before { | ||
| background-color: var(--color-warning-border); | ||
| } | ||
| } | ||
|
|
||
| &.connected { | ||
| border-color: var(--color-jade-green-border); | ||
| background-color: var(--color-jade-green-background); | ||
| color: var(--color-jade-green) !important; | ||
|
|
||
| &::before { | ||
| background-color: var(--color-jade-green); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .hwStatusTooltip { | ||
| width: fit-content; | ||
| padding: 0px; | ||
| transform: translate(30px, -6px) !important; | ||
| background-color: var(--color-white); | ||
| } |
58 changes: 58 additions & 0 deletions
58
src/modules/common/components/bars/topBar/hardwareWallet.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import React from 'react'; | ||
| import Tooltip from 'src/theme/Tooltip'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import Icon from 'src/theme/Icon'; | ||
| import { HW_CONNECTION_STATUS } from '@libs/hwServer/constants'; | ||
| import styles from './hardwareWallet.css'; | ||
|
|
||
| const Status = ({ status }) => ( | ||
| <div className={`${styles.statusWrapper} ${styles[status]}`}> | ||
| <b>{status}</b> | ||
| </div> | ||
| ); | ||
|
|
||
| const HardwareWallet = () => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| /** @TODO: | ||
| * actual values should be replaced when the useHWStatus hook is integrated by issue #4768 | ||
| * Also this component should return null when there is no current device connected. | ||
| */ | ||
| const status = HW_CONNECTION_STATUS.STAND_BY; | ||
| const hwStatusInfo = [ | ||
| { label: 'Brand :', value: 'Ledger' }, | ||
| { label: 'Model :', value: 'Nano S' }, | ||
| { label: 'ID :', value: '23233' }, | ||
| { label: 'Status :', value: <Status status={status} /> }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <section className={styles.wrapper}> | ||
| <Tooltip | ||
| tooltipClassName={`${styles.hwStatusTooltip}`} | ||
| position="bottom left" | ||
| content={ | ||
| <div className={`${styles.hwIcon} ${styles[status]}`}> | ||
| <Icon name="hardwareWalletIcon" /> | ||
| </div> | ||
| } | ||
| > | ||
| <div className={styles.dropdown}> | ||
| <h6> | ||
| <b>{t('Hardware wallet details')}</b> | ||
| </h6> | ||
| <ul> | ||
| {hwStatusInfo.map(({ label, value }) => ( | ||
| <li key={label}> | ||
| <div>{label}</div> | ||
| <div>{value}</div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| </Tooltip> | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default HardwareWallet; |
18 changes: 18 additions & 0 deletions
18
src/modules/common/components/bars/topBar/hardwareWallet.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React from 'react'; | ||
| import { screen, render } from '@testing-library/react'; | ||
| import HardwareWallet from './hardwareWallet'; | ||
|
|
||
| describe('hardwareWallet', () => { | ||
| beforeEach(() => { | ||
| render(<HardwareWallet />); | ||
| }); | ||
|
|
||
| // @TODO: we should update test when the useHWStatus hook has been integrated | ||
| it('should render hardware wallet icon', () => { | ||
| expect(screen.getByAltText('hardwareWalletIcon')).toBeTruthy(); | ||
| expect(screen.getByText('Brand :')).toBeTruthy(); | ||
| expect(screen.getByText('Model :')).toBeTruthy(); | ||
| expect(screen.getByText('ID :')).toBeTruthy(); | ||
| expect(screen.getByText('Status :')).toBeTruthy(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.