Fix: prevent key prop warning in EthHashInfo #2351
Conversation
Fix: prevent key prop warning in EthHashInfo Fix: prevent key prop warning in EthHashInfo
Branch preview✅ Deploy successful! |
ESLint Summary View Full Report
Report generated by eslint-plus-action |
| {showAvatar && ( | ||
| <AvatarContainer size={avatarSize}> | ||
| {!fallbackToIdenticon && customAvatar ? ( | ||
| <img src={customAvatar} alt={address} onError={onError} width={avatarSize} height={avatarSize} /> |
There was a problem hiding this comment.
I think we can use ImageFallback here.
There was a problem hiding this comment.
We might need to adjust ImageFallback to support a custom component as src. Maybe easier to leave it as it is
There was a problem hiding this comment.
ImageFallback has a fallbackComponent prop.
| ) | ||
| } | ||
|
|
||
| const Container = styled('div')({ |
There was a problem hiding this comment.
This is only being used here. Can we use a div with a class or Box instead?
| }, | ||
| })) | ||
|
|
||
| const AddressContainer = styled('div')({ |
There was a problem hiding this comment.
Similar here, its only used once so we could change it to a div with a class or Mui Box
| <IconButton | ||
| className={className} | ||
| target="_blank" | ||
| rel="noreferrer" | ||
| href={href} | ||
| size="small" | ||
| sx={{ color: 'inherit' }} | ||
| > |
There was a problem hiding this comment.
There was a stopPropagation call onClick here. Is it not needed anymore?
There was a problem hiding this comment.
Where was it exactly? I can't find it in the change set.
There was a problem hiding this comment.
It was part of safe-react-components
| size="small" | ||
| sx={{ color: 'inherit' }} | ||
| > | ||
| <SvgIcon component={icon} inheritViewBox fontSize="small" /> |
There was a problem hiding this comment.
The custom Icon component had some css set on the SvgIcon. Is it still covered after porting?
There was a problem hiding this comment.
It looks the same to me in the end result, but again, I'm not sure which original code you're referring to. In safe-react-components?
There was a problem hiding this comment.
Yes, I was comparing it to what we have in safe-react-components.
There was a problem hiding this comment.
True, stopPropagation was actually necessary to prevent NFT previews from opening on the NFT page (5afe/safe-react-components#220).
I'll restore it in another PR.
| @@ -100,7 +100,7 @@ describe('ApprovalEditorForm', () => { | |||
|
|
|||
| // Change value and save | |||
| const amountInput = result.container.querySelector('input[name="approvals.0"]') as HTMLInputElement | |||
| const saveButton = result.getByRole('button') | |||
| const saveButton = result.getByTitle('Save') | |||
katspaugh
force-pushed
the
eth-hash-info
branch
from
dd9a47c
to
deef9fc
Compare
|
I'm going to merge this as there are no visual changes here. |
This PR removes the pesky React warning about a "key" prop in the console.
I fixed it by copying
EthHashInfofrom safe-react-components to this repo because the problem stems from the safe-react-components's build not working well with this app's build system.Also updated dependencies along the way.