-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[MMI] Add-compliance-details component (#18575)
Co-authored-by: Antonio Regadas <antonio.regadas@consensys.net> Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com>
- Loading branch information
1 parent
d2779c9
commit 4f64e3d
Showing
9 changed files
with
459 additions
and
0 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
144 changes: 144 additions & 0 deletions
144
ui/components/institutional/compliance-details/__snapshots__/compliance-details.test.js.snap
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,144 @@ | ||
// Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
||
exports[`ComplianceDetails should render correctly 1`] = ` | ||
<div> | ||
<div | ||
class="box compliance-details box--padding-right-4 box--padding-left-4 box--display-flex box--flex-direction-column" | ||
> | ||
<div | ||
class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3" | ||
> | ||
<p | ||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default" | ||
> | ||
Address | ||
</p> | ||
<p | ||
class="box mm-text mm-text--body-xs box--flex-direction-row box--color-text-default" | ||
> | ||
0xAddress | ||
</p> | ||
</div> | ||
<div | ||
class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3" | ||
> | ||
<div | ||
class="box box--margin-bottom-1 box--display-flex box--flex-direction-row box--align-items-center box--color-text-alternative" | ||
> | ||
<p | ||
class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default" | ||
> | ||
Risk rating | ||
</p> | ||
<div | ||
class="info-tooltip" | ||
> | ||
<div> | ||
<div | ||
aria-describedby="tippy-tooltip-1" | ||
class="info-tooltip__tooltip-container" | ||
data-original-title="null" | ||
data-tooltipped="" | ||
style="display: inline;" | ||
tabindex="0" | ||
> | ||
<svg | ||
viewBox="0 0 10 10" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z" | ||
fill="var(--color-icon-alternative)" | ||
/> | ||
</svg> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div | ||
class="box compliance-row__column-risk compliance-row__column-risk--green box--flex-direction-row" | ||
> | ||
<p | ||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default" | ||
> | ||
low | ||
</p> | ||
</div> | ||
</div> | ||
<div | ||
class="box compliance-details__row box--padding-top-4 box--padding-bottom-4 box--display-flex box--flex-direction-column box--justify-content-center box--height-2/3" | ||
> | ||
<div | ||
class="box box--display-flex box--flex-direction-row box--align-items-center box--color-text-alternative" | ||
> | ||
<p | ||
class="box mm-text mm-text--body-md box--margin-right-2 box--flex-direction-row box--color-text-default" | ||
> | ||
Report last run | ||
</p> | ||
<div | ||
class="info-tooltip" | ||
> | ||
<div> | ||
<div | ||
aria-describedby="tippy-tooltip-2" | ||
class="info-tooltip__tooltip-container" | ||
data-original-title="null" | ||
data-tooltipped="" | ||
style="display: inline;" | ||
tabindex="0" | ||
> | ||
<svg | ||
viewBox="0 0 10 10" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
d="M5 0C2.2 0 0 2.2 0 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 2c.4 0 .7.3.7.7s-.3.7-.7.7-.7-.2-.7-.6.3-.8.7-.8zm.7 6H4.3V4.3h1.5V8z" | ||
fill="var(--color-icon-alternative)" | ||
/> | ||
</svg> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<p | ||
class="box mm-text mm-text--body-md box--flex-direction-row box--color-text-default" | ||
/> | ||
</div> | ||
<div | ||
class="box box--flex-direction-row" | ||
> | ||
<div | ||
class="swaps-footer" | ||
> | ||
<div | ||
class="swaps-footer__buttons swaps-footer__buttons--border" | ||
> | ||
<div | ||
class="page-container__footer swaps-footer__custom-page-container-footer-class" | ||
> | ||
<footer> | ||
<button | ||
class="button btn--rounded btn-secondary page-container__footer-button page-container__footer-button__cancel swaps-footer__custom-page-container-footer-button-class" | ||
data-testid="page-container-footer-cancel" | ||
role="button" | ||
tabindex="0" | ||
> | ||
Show report | ||
</button> | ||
<button | ||
class="button btn--rounded btn-primary page-container__footer-button swaps-footer__custom-page-container-footer-button-class" | ||
data-testid="page-container-footer-next" | ||
role="button" | ||
tabindex="0" | ||
> | ||
Run report | ||
</button> | ||
</footer> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
`; |
159 changes: 159 additions & 0 deletions
159
ui/components/institutional/compliance-details/compliance-details.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,159 @@ | ||
import React, { useContext, useEffect, useState } from 'react'; | ||
import { useSelector, useDispatch } from 'react-redux'; | ||
import PropTypes from 'prop-types'; | ||
import classnames from 'classnames'; | ||
import { I18nContext } from '../../../contexts/i18n'; | ||
import InfoTooltip from '../../ui/info-tooltip'; | ||
import SwapsFooter from '../../../pages/swaps/swaps-footer'; | ||
import { | ||
fetchHistoricalReports, | ||
getComplianceHistoricalReportsByAddress, | ||
getComplianceTenantSubdomain, | ||
} from '../../../ducks/institutional/institutional'; | ||
import { formatDate } from '../../../helpers/utils/util'; | ||
import Box from '../../ui/box'; | ||
import { Text } from '../../component-library'; | ||
import { | ||
TextColor, | ||
TextVariant, | ||
JustifyContent, | ||
AlignItems, | ||
BLOCK_SIZES, | ||
DISPLAY, | ||
FLEX_DIRECTION, | ||
} from '../../../helpers/constants/design-system'; | ||
|
||
const ComplianceDetails = ({ address, onClose, onGenerate }) => { | ||
const t = useContext(I18nContext); | ||
const dispatch = useDispatch(); | ||
|
||
useEffect(() => { | ||
dispatch(fetchHistoricalReports(address)); | ||
}, [address, dispatch]); | ||
|
||
const [lastReport, setLastReport] = useState(null); | ||
const historicalReports = useSelector( | ||
getComplianceHistoricalReportsByAddress(address), | ||
); | ||
|
||
useEffect(() => { | ||
if (historicalReports && historicalReports.length) { | ||
setLastReport( | ||
historicalReports.reduce((prev, cur) => | ||
prev.createTime > cur.createTime ? prev : cur, | ||
), | ||
); | ||
} | ||
}, [historicalReports]); | ||
|
||
const complianceTenantSubdomain = useSelector(getComplianceTenantSubdomain); | ||
|
||
return ( | ||
<Box | ||
display={DISPLAY.FLEX} | ||
flexDirection={FLEX_DIRECTION.COLUMN} | ||
paddingLeft={4} | ||
paddingRight={4} | ||
className="compliance-details" | ||
> | ||
<Box | ||
display={DISPLAY.FLEX} | ||
flexDirection={FLEX_DIRECTION.COLUMN} | ||
justifyContent={JustifyContent.center} | ||
height={BLOCK_SIZES.TWO_THIRDS} | ||
paddingTop={4} | ||
paddingBottom={4} | ||
className="compliance-details__row" | ||
> | ||
<Text>{t('address')}</Text> | ||
<Text variant={TextVariant.bodyXs}>{address}</Text> | ||
</Box> | ||
<Box | ||
display={DISPLAY.FLEX} | ||
flexDirection={FLEX_DIRECTION.COLUMN} | ||
justifyContent={JustifyContent.center} | ||
height={BLOCK_SIZES.TWO_THIRDS} | ||
paddingTop={4} | ||
paddingBottom={4} | ||
className="compliance-details__row" | ||
> | ||
<Box | ||
display={DISPLAY.FLEX} | ||
alignItems={AlignItems.center} | ||
marginBottom={1} | ||
color={TextColor.textAlternative} | ||
> | ||
<Text marginRight={2}>{t('riskRating')}</Text> | ||
<InfoTooltip | ||
position="bottom" | ||
contentText={<span>{t('riskRatingTooltip')}</span>} | ||
/> | ||
</Box> | ||
<Box | ||
className={classnames('compliance-row__column-risk', { | ||
'compliance-row__column-risk--green': lastReport?.risk === 'low', | ||
'compliance-row__column-risk--yellow': | ||
lastReport?.risk === 'medium', | ||
'compliance-row__column-risk--orange': lastReport?.risk === 'high', | ||
'compliance-row__column-risk--red': | ||
lastReport?.risk === 'unacceptable', | ||
})} | ||
> | ||
<Text>{lastReport ? lastReport.risk : t('noReport')}</Text> | ||
</Box> | ||
</Box> | ||
<Box | ||
display={DISPLAY.FLEX} | ||
flexDirection={FLEX_DIRECTION.COLUMN} | ||
justifyContent={JustifyContent.center} | ||
height={BLOCK_SIZES.TWO_THIRDS} | ||
paddingTop={4} | ||
paddingBottom={4} | ||
className="compliance-details__row" | ||
> | ||
<Box | ||
display={DISPLAY.FLEX} | ||
alignItems={AlignItems.center} | ||
color={TextColor.textAlternative} | ||
> | ||
<Text marginRight={2}>{t('reportLastRun')}</Text> | ||
<InfoTooltip | ||
position="bottom" | ||
contentText={<span>{t('reportLastRunTooltip')}</span>} | ||
/> | ||
</Box> | ||
<Text color={TextColor.textDefault}> | ||
{lastReport | ||
? formatDate(new Date(lastReport.createTime).getTime()) | ||
: 'N/A'} | ||
</Text> | ||
</Box> | ||
<Box> | ||
<SwapsFooter | ||
onSubmit={() => { | ||
onGenerate(address); | ||
onClose(); | ||
}} | ||
submitText={t('runReport')} | ||
onCancel={() => | ||
global.platform.openTab({ | ||
url: `https://${complianceTenantSubdomain}.compliance.codefi.network/app/kyt/addresses/${lastReport.address}/${lastReport.reportId}`, | ||
}) | ||
} | ||
cancelText={t('showReport')} | ||
hideCancel={!lastReport} | ||
approveActive={lastReport} | ||
showTopBorder | ||
/> | ||
</Box> | ||
</Box> | ||
); | ||
}; | ||
|
||
ComplianceDetails.propTypes = { | ||
address: PropTypes.string, | ||
onClose: PropTypes.func, | ||
onGenerate: PropTypes.func, | ||
}; | ||
|
||
export default ComplianceDetails; |
Oops, something went wrong.