diff --git a/src/app/components/TxnComponents/AddressLabel.tsx b/src/app/components/TxnComponents/AddressLabel.tsx new file mode 100644 index 000000000..ef556cbcd --- /dev/null +++ b/src/app/components/TxnComponents/AddressLabel.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { useGlobalData } from 'utils/hooks/useGlobal'; +import { LOCALSTORAGE_KEYS_MAP } from 'utils/constants'; +import { Bookmark } from '@zeit-ui/react-icons'; +import { useTranslation } from 'react-i18next'; +import { translations } from 'locales/i18n'; +import { Text } from '../Text/Loadable'; + +export const AddressLabel = ({ address }) => { + const [globalData = {}] = useGlobalData(); + const { t } = useTranslation(); + + const addressLabel = globalData[LOCALSTORAGE_KEYS_MAP.addressLabel][address]; + const addressLabelIcon = ( + + + + ); + + if (addressLabel) { + return ( + + {' '} + ({addressLabelIcon} + {addressLabel}) + + ); + } + + return null; +}; diff --git a/src/app/components/TxnComponents/InputData/OptimizationDecode.tsx b/src/app/components/TxnComponents/InputData/OptimizationDecode.tsx index 4b773c196..7b551e736 100644 --- a/src/app/components/TxnComponents/InputData/OptimizationDecode.tsx +++ b/src/app/components/TxnComponents/InputData/OptimizationDecode.tsx @@ -10,6 +10,7 @@ import { Text } from 'app/components/Text/Loadable'; import { Event } from '../Event'; // import Info from '@zeit-ui/react-icons/info'; import { media } from 'styles/media'; +import { AddressLabel } from '../AddressLabel'; export const OptimizationDecode = ({ data = '', @@ -75,6 +76,7 @@ export const OptimizationDecode = ({ {a.formattedValue}{' '} + ); } diff --git a/src/app/containers/Transaction/EventLogs/Address.tsx b/src/app/containers/Transaction/EventLogs/Address.tsx index 11e52c286..04f9d8ca0 100644 --- a/src/app/containers/Transaction/EventLogs/Address.tsx +++ b/src/app/containers/Transaction/EventLogs/Address.tsx @@ -2,12 +2,14 @@ import React from 'react'; import { Link } from 'app/components/Link/Loadable'; import { formatAddress } from 'utils'; import { ContractDetail } from 'app/components/TxnComponents/ContractDetail'; +import { AddressLabel } from 'app/components/TxnComponents/AddressLabel'; export const Address = ({ address, contract }) => { return ( <> {formatAddress(address)} + ); }; diff --git a/src/app/containers/Transaction/EventLogs/Data.tsx b/src/app/containers/Transaction/EventLogs/Data.tsx index be308a32c..d2afa0ad5 100644 --- a/src/app/containers/Transaction/EventLogs/Data.tsx +++ b/src/app/containers/Transaction/EventLogs/Data.tsx @@ -10,6 +10,7 @@ import { media } from '../../../../styles/media'; import { ContractDetail } from 'app/components/TxnComponents/ContractDetail'; import { formatAddress } from 'utils'; import { DecodedParams } from 'app/components/TxnComponents/util'; +import { AddressLabel } from 'app/components/TxnComponents/AddressLabel'; const isPossibleAddress = data => { try { @@ -78,7 +79,12 @@ const decodeData = (value, type) => { switch (type) { case 'address': const address = SDK.format.address(`0x${value.substr(24)}`, NETWORK_ID); - result = {address}; + result = ( + <> + {address} + + + ); break; case 'number': result = SDK.format.bigInt(v).toString(); @@ -168,6 +174,7 @@ export const Data = ({ <> {d.value} + ); } diff --git a/src/app/containers/Transaction/EventLogs/Topics.tsx b/src/app/containers/Transaction/EventLogs/Topics.tsx index 43f0d61be..41375c534 100644 --- a/src/app/containers/Transaction/EventLogs/Topics.tsx +++ b/src/app/containers/Transaction/EventLogs/Topics.tsx @@ -7,6 +7,7 @@ import { Link } from 'app/components/Link'; import { ContractDetail } from 'app/components/TxnComponents/ContractDetail'; import { media } from 'styles/media'; import { formatAddress } from 'utils'; +import { AddressLabel } from 'app/components/TxnComponents/AddressLabel'; export const Topics = ({ data, signature, contractAndTokenInfo }) => { const { t } = useTranslation(); @@ -81,6 +82,7 @@ export const Topics = ({ data, signature, contractAndTokenInfo }) => { <> {value} + ); } diff --git a/src/app/containers/Transaction/EventLogs/index.tsx b/src/app/containers/Transaction/EventLogs/index.tsx index 2f98f0dd5..9427f13e6 100644 --- a/src/app/containers/Transaction/EventLogs/index.tsx +++ b/src/app/containers/Transaction/EventLogs/index.tsx @@ -22,6 +22,7 @@ import { Data } from './Data'; import { Event } from 'app/components/TxnComponents/Event'; import { disassembleEvent } from 'app/components/TxnComponents/util'; import { media } from 'styles/media'; +import { AddressLabel } from 'app/components/TxnComponents/AddressLabel'; interface Props { hash: string; @@ -193,6 +194,7 @@ const EventLog = ({ log }) => { address={address} contract={contractAndTokenInfo[formatAddress(address)]} > + {fnName ? (