Skip to content

Commit

Permalink
Place toggle on the transaction header
Browse files Browse the repository at this point in the history
  • Loading branch information
@lubej
lubej committed May 22, 2023
1 parent aac4eb6 commit 2764480
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 77 deletions.
27 changes: 7 additions & 20 deletions src/app/components/AddressSwitch/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,44 +61,31 @@ const StyledSwitch = styled(Switch)(() => ({
}))

export enum AddressSwitchOption {
Default = 'default',
Oasis = 'oasis',
Eth = 'eth',
ETH = 'eth',
}

interface AddressSwitchProps {
selected?: AddressSwitchOption.Oasis | AddressSwitchOption.Eth
onSelectionChange: (selection: AddressSwitchOption.Oasis | AddressSwitchOption.Eth) => void
selected?: AddressSwitchOption.Oasis | AddressSwitchOption.ETH
onSelectionChange: (selection: AddressSwitchOption.Oasis | AddressSwitchOption.ETH) => void
}

export const AddressSwitch: FC<AddressSwitchProps> = ({
selected = AddressSwitchOption.Oasis,
selected = AddressSwitchOption.ETH,
onSelectionChange,
}) => {
const { t } = useTranslation()
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))

const checked = selected === AddressSwitchOption.Eth
const checked = selected === AddressSwitchOption.ETH

const onChange = (event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
onSelectionChange(checked ? AddressSwitchOption.Eth : AddressSwitchOption.Oasis)
onSelectionChange(checked ? AddressSwitchOption.ETH : AddressSwitchOption.Oasis)
}

return (
<StyledAddressSwitch>
{!isMobile && (
<Typography
sx={{
color: COLORS.grayMedium,
fontSize: '10px',
fontStyle: 'italic',
mr: 3,
}}
>
{t('addressSwitch.helpLabel')}
</Typography>
)}
<Typography
sx={{
color:
Expand All @@ -116,7 +103,7 @@ export const AddressSwitch: FC<AddressSwitchProps> = ({
<Typography
sx={{
color:
selected === AddressSwitchOption.Eth
selected === AddressSwitchOption.ETH
? isMobile
? COLORS.white
: COLORS.brandExtraDark
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/Transactions/LogEvent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,7 @@ export const TransactionLogEvent: FC<TransactionLogEventProps> = ({
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
const { layer } = transaction
const transactionLinkValue =
addressSwitchOption === AddressSwitchOption.Eth ? transaction.eth_hash : transaction.hash
addressSwitchOption === AddressSwitchOption.ETH ? transaction.eth_hash : transaction.hash

const decoded = true // TODO: how do I know if this has been successfully decoded?

Expand Down
133 changes: 83 additions & 50 deletions src/app/pages/TransactionDetailPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import { TransactionLogs } from '../../components/Transactions/Logs'
import { AddressSwitch, AddressSwitchOption } from '../../components/AddressSwitch'
import InfoIcon from '@mui/icons-material/Info'
import Tooltip from '@mui/material/Tooltip'
import { isValidTxOasisHash } from '../../utils/helpers'

type TransactionSelectionResult = {
wantedTransaction?: RuntimeTransaction
Expand Down Expand Up @@ -81,9 +82,6 @@ const ErrorBox = styled(Box)(() => ({

export const TransactionDetailPage: FC = () => {
const { t } = useTranslation()
const [addressSwitchOption, setAddressSwitchOption] = useState<
AddressSwitchOption.Oasis | AddressSwitchOption.Eth
>(AddressSwitchOption.Eth)

const layer = useLayerParam()
// Consensus is not yet enabled in ENABLED_LAYERS, just some preparation
Expand All @@ -95,6 +93,16 @@ export const TransactionDetailPage: FC = () => {

const hash = useParams().hash!

const [addressSwitchOption, setAddressSwitchOption] = useState<
AddressSwitchOption.Oasis | AddressSwitchOption.ETH
>(() => {
if (isValidTxOasisHash(hash)) {
return AddressSwitchOption.Oasis
}

return AddressSwitchOption.ETH
})

const { isLoading, data } = useGetRuntimeTransactionsTxHash(
layer, // This is OK since consensus has been handled separately
hash,
Expand All @@ -112,19 +120,24 @@ export const TransactionDetailPage: FC = () => {
{warningMultipleTransactionsSameHash && (
<StyledAlert severity={'error'}>{t('transaction.warningMultipleTransactionsSameHash')}</StyledAlert>
)}
<SubPageCard featured title={t('transaction.header')}>
<TransactionDetailView isLoading={isLoading} transaction={transaction} />
<SubPageCard
featured
title={t('transaction.header')}
action={
<AddressSwitch
selected={addressSwitchOption}
onSelectionChange={option => setAddressSwitchOption(option)}
/>
}
>
<TransactionDetailView
isLoading={isLoading}
transaction={transaction}
addressSwitchOption={addressSwitchOption}
/>
</SubPageCard>
{transaction && (
<SubPageCard
title={t('common.logs')}
action={
<AddressSwitch
selected={addressSwitchOption}
onSelectionChange={option => setAddressSwitchOption(option)}
/>
}
>
<SubPageCard title={t('common.logs')}>
<TransactionLogs transaction={transaction} addressSwitchOption={addressSwitchOption} />
</SubPageCard>
)}
Expand Down Expand Up @@ -158,12 +171,24 @@ export const TransactionDetailView: FC<{
transaction: TransactionDetailRuntimeBlock | undefined
showLayer?: boolean
standalone?: boolean
}> = ({ isLoading, transaction, showLayer, standalone = false }) => {
addressSwitchOption?: AddressSwitchOption
}> = ({
isLoading,
transaction,
showLayer,
standalone = false,
addressSwitchOption = AddressSwitchOption.ETH,
}) => {
const { t } = useTranslation()
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
const formattedTimestamp = useFormattedTimestampString(transaction?.timestamp)

const isOasisAddressFormat = addressSwitchOption === AddressSwitchOption.Oasis
const hash = isOasisAddressFormat ? transaction?.hash : transaction?.eth_hash
const from = isOasisAddressFormat ? transaction?.sender_0 : transaction?.sender_0_eth
const to = isOasisAddressFormat ? transaction?.to : transaction?.to_eth

return (
<>
{isLoading && <TextSkeleton numberOfRows={10} />}
Expand All @@ -179,15 +204,24 @@ export const TransactionDetailView: FC<{
<dd>{t(`common.${transaction.layer}`)}</dd>
</>
)}
<dt>{t('common.hash')}</dt>
<dd>
<TransactionLink
network={transaction.network}
hash={transaction.eth_hash || transaction.hash}
layer={transaction.layer}
/>
<CopyToClipboard value={transaction.eth_hash || transaction.hash} />
</dd>

{hash && (
<>
<dt>{t('common.hash')}</dt>
<dd>
<TransactionInfoTooltip
label={
isOasisAddressFormat
? t('transaction.tooltips.txTooltip')
: t('transaction.tooltips.txTooltipEth')
}
>
<TransactionLink network={transaction.network} hash={hash} layer={transaction.layer} />
</TransactionInfoTooltip>
<CopyToClipboard value={hash} />
</dd>
</>
)}

<dt>{t('common.status')}</dt>
<dd style={{ flexWrap: 'wrap', gap: '10px' }}>
Expand All @@ -212,39 +246,38 @@ export const TransactionDetailView: FC<{
<dt>{t('common.timestamp')}</dt>
<dd>{formattedTimestamp}</dd>

<dt>{t('common.from')}</dt>
<dd>
<AccountLink
network={transaction.network}
address={transaction.sender_0_eth || transaction.sender_0}
layer={transaction.layer}
/>
<CopyToClipboard value={transaction.sender_0_eth || transaction.sender_0} />
</dd>

{transaction.to_eth && (
{from && (
<>
<dt>{t('common.to')}</dt>
<dt>{t('common.from')}</dt>
<dd>
<AccountLink
network={transaction.network}
address={transaction.to_eth}
layer={transaction.layer}
/>
<CopyToClipboard value={transaction.to_eth} />
<TransactionInfoTooltip
label={
isOasisAddressFormat
? t('transaction.tooltips.senderTooltip')
: t('transaction.tooltips.senderTooltipEth')
}
>
<AccountLink network={transaction.network} address={from} layer={transaction.layer} />
</TransactionInfoTooltip>
<CopyToClipboard value={from} />
</dd>
</>
)}
{transaction.to && (

{to && (
<>
{!transaction.to_eth ? <dt>{t('common.to')}</dt> : <dt />}
<dt>{t('common.to')}</dt>
<dd>
<AccountLink
network={transaction.network}
address={transaction.to_eth || transaction.to}
layer={transaction.layer}
/>
<CopyToClipboard value={transaction.to_eth || transaction.to} />
<TransactionInfoTooltip
label={
isOasisAddressFormat
? t('transaction.tooltips.recipientTooltip')
: t('transaction.tooltips.recipientTooltipEth')
}
>
<AccountLink network={transaction.network} address={to} layer={transaction.layer} />
</TransactionInfoTooltip>
<CopyToClipboard value={to} />
</dd>
</>
)}
Expand Down
12 changes: 6 additions & 6 deletions src/locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@
"title": "Active Accounts",
"tooltip": "{{value, number}} accounts"
},
"addressSwitch": {
"helpLabel": "Show ETH address if applicable"
},
"blocks": {
"latest": "Latest Blocks"
},
Expand Down Expand Up @@ -172,9 +169,12 @@
"header": "Transaction",
"warningMultipleTransactionsSameHash": "Please make sure you're looking at the right transaction. There is more than one transaction with this hash, which is extremely rare. We are showing the most recent successful one.",
"tooltips": {
"txTooltip": "Ethereum hash for the transaction",
"senderTooltip": "Ethereum address for the sender",
"recipientTooltip": "Ethereum address for the recipient"
"txTooltipEth": "Ethereum hash for the transaction",
"senderTooltipEth": "Ethereum address for the sender",
"recipientTooltipEth": "Ethereum address for the recipient",
"txTooltip": "Oasis hash for the transaction",
"senderTooltip": "Oasis address for the sender",
"recipientTooltip": "Oasis address for the recipient"
}
},
"transactionEvent": {
Expand Down

0 comments on commit 2764480

Please sign in to comment.