Files
bee-dashboard/src/components/EthereumAddress.tsx
T
nugaon 2a13da1a6c feat: modularisation (#244)
* chore: gitignore for lib directory

* build: packageing for webpack lib build

* build: webpack config

* feat: expose App component with beeApiUrl parameter

* build: tsconfig for library build

* build: main property of package json for tsc build

* refactor: rename beeUrl option to beeApiUrl

* refactor: manange config class instead of process.env calls

* build: babelrc config

* build: babel plugins and presets for webpack build

* chore: serve.js chmod

* build(refactor): webpack build

* refactor: number notation

* chore: webpack and package config change

* build: add babel preset-env

* chore: prepare script also builds component lib

* feat: typegen

* revert: set back prepare command

* build: assets loader config

* feat: beeDebugApiUrl

* refactor: move test files to the test folder because of typegen

* feat: locked api settings

* chore: depcheck ignores

* chore: types check script

* ci: check types

* ci: publish with library

* chore: add webpack as devDep

* chore: locked semver

* chore: remove debug logging

* style: webpack config

* chore: react and react-dom as dependency

* chore: package-lock

* fix: clean package-lock init

* refactor: fix versions in package.json
2021-12-09 11:12:45 +01:00

55 lines
1.6 KiB
TypeScript

import { Typography } from '@material-ui/core/'
import { ReactElement } from 'react'
import Identicon from 'react-identicons'
import { config } from '../config'
import ClipboardCopy from './ClipboardCopy'
import QRCodeModal from './QRCodeModal'
interface Props {
address: string | undefined
hideBlockie?: boolean
transaction?: boolean
truncate?: boolean
}
export default function EthereumAddress(props: Props): ReactElement {
return (
<Typography component="div" variant="subtitle1">
{props.address ? (
<div style={{ display: 'flex' }}>
{props.hideBlockie ? null : (
<div style={{ paddingTop: '5px', marginRight: '10px' }}>
<Identicon size={20} string={props.address} />
</div>
)}
<div>
<a
style={
props.truncate
? {
marginRight: '7px',
maxWidth: '200px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
display: 'block',
}
: { marginRight: '7px' }
}
href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
target="_blank"
rel="noreferrer"
>
{props.address}
</a>
</div>
<QRCodeModal value={props.address} label={'Ethereum Address'} />
<ClipboardCopy value={props.address} />
</div>
) : (
'-'
)}
</Typography>
)
}