MyCrypto/common/components/ui/Identicon.tsx

46 lines
1.1 KiB
TypeScript

import { toDataUrl } from 'ethereum-blockies';
import { isValidETHAddress } from 'libs/validators';
import React from 'react';
interface Props {
address: string;
size?: string;
}
export default function Identicon(props: Props) {
const size = props.size || '4rem';
// FIXME breaks on failed checksums
const identiconDataUrl = isValidETHAddress(props.address.toLowerCase())
? toDataUrl(props.address.toLowerCase())
: '';
return (
<div style={{ position: 'relative', width: size, height: size }} title="Address Identicon">
<div
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
borderRadius: '50%',
boxShadow: `
inset rgba(255, 255, 255, 0.5) 0 2px 2px,
inset rgba(0, 0, 0, 0.6) 0 -1px 8px
`
}}
/>
{identiconDataUrl && (
<img
src={identiconDataUrl}
style={{
borderRadius: '50%',
width: '100%',
height: '100%'
}}
/>
)}
</div>
);
}