-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Replaced addresses by the address component on SignTypedData v4 signa…
…tures (#16018) * Replaced addresses by the address component on SignTypedData v4 signatures * Fixing signature-request e2e tests * Modified scss file for signature-request message * Using address component for rendering the addresses and bold label where hex address is not valid * Modify the address component * Added proper BEM syntax for class names and used Box and Typography * FIxing e2e tests * Commited requested changes from George and added storybook * Review requested changes * Created new component for rendering data in signature-request-message.js * Fixing proper usage for getAccountName and getMetadataContractName selectors * Fixing e2e tests
- Loading branch information
Showing
17 changed files
with
357 additions
and
174 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
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
1 change: 1 addition & 0 deletions
1
ui/components/app/signature-request/signature-request-data/index.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 @@ | ||
| export { default } from './signature-request-data'; |
26 changes: 26 additions & 0 deletions
26
ui/components/app/signature-request/signature-request-data/index.scss
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,26 @@ | ||
| .signature-request-data { | ||
| &__node { | ||
| &__value { | ||
| white-space: pre-line; | ||
| overflow: hidden; | ||
| word-wrap: break-word; | ||
|
|
||
| &__address { | ||
| [dir='rtl'] & { | ||
| /*rtl:ignore*/ | ||
| direction: ltr; | ||
|
|
||
| /*rtl:ignore*/ | ||
| text-align: right; | ||
|
|
||
| span { | ||
| display: block; | ||
|
|
||
| /*rtl:ignore*/ | ||
| direction: rtl; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
79 changes: 79 additions & 0 deletions
79
ui/components/app/signature-request/signature-request-data/signature-request-data.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,79 @@ | ||
| import React from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import PropTypes from 'prop-types'; | ||
| import { getMetaMaskIdentities, getAccountName } from '../../../../selectors'; | ||
| import Address from '../../transaction-decoding/components/decoding/address'; | ||
| import { | ||
| isValidHexAddress, | ||
| toChecksumHexAddress, | ||
| } from '../../../../../shared/modules/hexstring-utils'; | ||
| import Box from '../../../ui/box'; | ||
| import Typography from '../../../ui/typography'; | ||
| import { | ||
| DISPLAY, | ||
| COLORS, | ||
| FONT_WEIGHT, | ||
| TYPOGRAPHY, | ||
| } from '../../../../helpers/constants/design-system'; | ||
|
|
||
| export default function SignatureRequestData({ data }) { | ||
| const identities = useSelector(getMetaMaskIdentities); | ||
|
|
||
| return ( | ||
| <Box className="signature-request-data__node"> | ||
| {Object.entries(data).map(([label, value], i) => ( | ||
| <Box | ||
| className="signature-request-data__node" | ||
| key={i} | ||
| paddingLeft={2} | ||
| display={ | ||
| typeof value !== 'object' || value === null ? DISPLAY.FLEX : null | ||
| } | ||
| > | ||
| <Typography | ||
| as="span" | ||
| color={COLORS.TEXT_DEFAULT} | ||
| marginLeft={4} | ||
| fontWeight={ | ||
| typeof value === 'object' ? FONT_WEIGHT.BOLD : FONT_WEIGHT.NORMAL | ||
| } | ||
| > | ||
| {label.charAt(0).toUpperCase() + label.slice(1)}:{' '} | ||
| </Typography> | ||
| {typeof value === 'object' && value !== null ? ( | ||
| <SignatureRequestData data={value} /> | ||
| ) : ( | ||
| <Typography | ||
| as="span" | ||
| color={COLORS.TEXT_DEFAULT} | ||
| marginLeft={4} | ||
| className="signature-request-data__node__value" | ||
| > | ||
| {isValidHexAddress(value, { | ||
| mixedCaseUseChecksum: true, | ||
| }) ? ( | ||
| <Typography | ||
| variant={TYPOGRAPHY.H7} | ||
| color={COLORS.INFO_DEFAULT} | ||
| className="signature-request-data__node__value__address" | ||
| > | ||
| <Address | ||
| addressOnly | ||
| checksummedRecipientAddress={toChecksumHexAddress(value)} | ||
| recipientName={getAccountName(identities, value)} | ||
| /> | ||
| </Typography> | ||
| ) : ( | ||
| `${value}` | ||
| )} | ||
| </Typography> | ||
| )} | ||
| </Box> | ||
| ))} | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| SignatureRequestData.propTypes = { | ||
| data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired, | ||
| }; |
2 changes: 1 addition & 1 deletion
2
ui/components/app/signature-request/signature-request-message/index.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 |
|---|---|---|
| @@ -1 +1 @@ | ||
| export { default } from './signature-request-message.component'; | ||
| export { default } from './signature-request-message'; |
59 changes: 4 additions & 55 deletions
59
ui/components/app/signature-request/signature-request-message/index.scss
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 |
|---|---|---|
| @@ -1,75 +1,24 @@ | ||
| .signature-request-message { | ||
| flex: 1 60%; | ||
| display: flex; | ||
| max-height: 231px; | ||
| flex-direction: column; | ||
| position: relative; | ||
|
|
||
| &__title { | ||
| @include H6; | ||
|
|
||
| font-weight: 500; | ||
| color: var(--color-text-alternative); | ||
| margin-left: 12px; | ||
| } | ||
|
|
||
| h2 { | ||
| @include H6; | ||
|
|
||
| flex: 1 1 0; | ||
| text-align: left; | ||
| border-bottom: 1px solid var(--color-border-default); | ||
| padding: 0.5rem; | ||
| margin: 0; | ||
| color: var(--color-text-alternative); | ||
| } | ||
|
|
||
| &--root { | ||
| &__root { | ||
| flex: 1 100%; | ||
| background-color: var(--color-background-alternative); | ||
| padding-bottom: 0.5rem; | ||
| overflow: auto; | ||
| padding-left: 12px; | ||
| padding-right: 12px; | ||
|
|
||
| @include screen-sm-min { | ||
| width: auto; | ||
| } | ||
| } | ||
|
|
||
| &--node, | ||
| &--node-leaf { | ||
| padding-left: 0.3rem; | ||
|
|
||
| &-label { | ||
| color: var(--color-text-alternative); | ||
| margin-left: 0.5rem; | ||
| } | ||
|
|
||
| &-value { | ||
| color: var(--color-text-default); | ||
| margin-left: 0.5rem; | ||
| white-space: pre-line; | ||
| overflow: hidden; | ||
| word-wrap: break-word; | ||
| } | ||
| } | ||
|
|
||
| &--node-leaf { | ||
| display: flex; | ||
| } | ||
|
|
||
| &__scroll-button { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| border: 1px solid var(--color-border-default); | ||
| background: var(--color-background-alternative); | ||
| color: var(--color-icon-default); | ||
| position: absolute; | ||
| right: 24px; | ||
| right: 28px; | ||
| bottom: 12px; | ||
| border-radius: 50%; | ||
| height: 24px; | ||
| width: 24px; | ||
| cursor: pointer; | ||
| } | ||
| } |
103 changes: 0 additions & 103 deletions
103
...ts/app/signature-request/signature-request-message/signature-request-message.component.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.