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 Jun 6, 2023
1 parent 1e7c803 commit 2aaa10e
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 75 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
32 changes: 18 additions & 14 deletions src/app/components/Transactions/LogEvent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
import {
EvmEventParam,
RuntimeEvent,
RuntimeEventType,
RuntimeTransaction
} from '../../../oasis-indexer/api'
import { EvmEventParam, RuntimeEvent, RuntimeEventType, RuntimeTransaction } from '../../../oasis-indexer/api'
import React, { FC, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { StyledDescriptionList } from '../StyledDescriptionList'
Expand Down Expand Up @@ -48,11 +43,11 @@ const EvmEventParamData: FC<{
}
}

const EvmLogRow: FC<{ scope: SearchScope; param: EvmEventParam; addressSwitchOption: AddressSwitchOption }> = ({
scope,
param,
addressSwitchOption,
}) => {
const EvmLogRow: FC<{
scope: SearchScope
param: EvmEventParam
addressSwitchOption: AddressSwitchOption
}> = ({ scope, param, addressSwitchOption }) => {
const [address, setAddress] = useState<string>()

useEffect(() => {
Expand Down Expand Up @@ -85,7 +80,12 @@ const EvmLogRow: FC<{ scope: SearchScope; param: EvmEventParam; addressSwitchOpt
<TableCell>{param.name}</TableCell>
<TableCell>{param.evm_type}</TableCell>
<TableCell>
<EvmEventParamData scope={scope} param={param} address={address} addressSwitchOption={addressSwitchOption} />{' '}
<EvmEventParamData
scope={scope}
param={param}
address={address}
addressSwitchOption={addressSwitchOption}
/>{' '}
</TableCell>
<TableCell>
<CopyToClipboard value={getCopyToClipboardValue()} />
Expand All @@ -94,7 +94,11 @@ const EvmLogRow: FC<{ scope: SearchScope; param: EvmEventParam; addressSwitchOpt
)
}

const DecodedLogEvent: FC<{ scope: SearchScope; event: RuntimeEvent, addressSwitchOption: AddressSwitchOption }> = ({ scope, event, addressSwitchOption }) => {
const DecodedLogEvent: FC<{
scope: SearchScope
event: RuntimeEvent
addressSwitchOption: AddressSwitchOption
}> = ({ scope, event, addressSwitchOption }) => {
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
const { t } = useTranslation()
Expand Down Expand Up @@ -180,7 +184,7 @@ export const TransactionLogEvent: FC<{
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
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
4 changes: 3 additions & 1 deletion src/app/components/Transactions/Logs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,11 @@ export const TransactionLogs: FC<{
}

export const TransactionLogsView: FC<{
scope: SearchScope
scope: SearchScope & RuntimeTransaction
events: RuntimeEvent[] | undefined
isLoading: boolean
addressSwitchOption: AddressSwitchOption
transaction: RuntimeTransaction
}> = ({ scope, events, isLoading, addressSwitchOption }) => {
return (
<>
Expand All @@ -45,6 +46,7 @@ export const TransactionLogsView: FC<{
scope={scope}
isFirst={!index}
event={event}
transaction={scope}
addressSwitchOption={addressSwitchOption}
/>
))}
Expand Down
114 changes: 80 additions & 34 deletions src/app/pages/TransactionDetailPage/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import { CurrentFiatValue } from './CurrentFiatValue'
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 @@ -85,9 +86,6 @@ const ErrorBox = styled(Box)(() => ({

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

const scope = useRequiredScopeParam()
// Consensus is not yet enabled in ENABLED_LAYERS, just some preparation
Expand All @@ -99,6 +97,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(
scope.network,
scope.layer, // This is OK since consensus has been handled separately
Expand All @@ -119,21 +127,26 @@ export const TransactionDetailPage: FC = () => {
{warningMultipleTransactionsSameHash && (
<StyledAlert severity={'error'}>{t('transaction.warningMultipleTransactionsSameHash')}</StyledAlert>
)}
<SubPageCard featured title={t('transaction.header')} action={
<AddressSwitch
selected={addressSwitch}
onSelectionChange={addressSwitch => setAddressSwitch(addressSwitch)}
/>
}>
<SubPageCard
featured
title={t('transaction.header')}
action={
<AddressSwitch
selected={addressSwitchOption}
onSelectionChange={addressSwitch => setAddressSwitchOption(addressSwitch)}
/>
}
>
<TransactionDetailView
isLoading={isLoading}
transaction={transaction}
tokenPriceInfo={tokenPriceInfo}
addressSwitchOption={addressSwitchOption}
/>
</SubPageCard>
{transaction && (
<SubPageCard title={t('common.logs')}>
<TransactionLogs transaction={transaction} />
<TransactionLogs transaction={transaction} addressSwitchOption={addressSwitchOption} />
</SubPageCard>
)}
</PageLayout>
Expand Down Expand Up @@ -167,12 +180,25 @@ export const TransactionDetailView: FC<{
showLayer?: boolean
standalone?: boolean
tokenPriceInfo: TokenPriceInfo
}> = ({ isLoading, transaction, showLayer, standalone = false, tokenPriceInfo }) => {
addressSwitchOption?: AddressSwitchOption
}> = ({
isLoading,
transaction,
showLayer,
standalone = false,
tokenPriceInfo,
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

const ticker = transaction?.ticker || Ticker.ROSE
const tickerName = getNameForTicker(t, ticker)

Expand All @@ -193,11 +219,24 @@ export const TransactionDetailView: FC<{
</dd>
</>
)}
<dt>{t('common.hash')}</dt>
<dd>
<TransactionLink scope={transaction} hash={transaction.eth_hash || transaction.hash} />
<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 scope={transaction} hash={hash} />
</TransactionInfoTooltip>
<CopyToClipboard value={hash} />
</dd>
</>
)}

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

<dt>{t('common.from')}</dt>
<dd>
<AccountLink scope={transaction} address={transaction.sender_0_eth || transaction.sender_0} />
<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 scope={transaction} address={from} />
</TransactionInfoTooltip>
<CopyToClipboard value={from} />
</dd>
</>
)}
{transaction.to && (

{to && (
<>
{!transaction.to_eth ? <dt>{t('common.to')}</dt> : <dt />}
<dt>{t('common.to')}</dt>
<dd>
<AccountLink scope={transaction} address={transaction.to_eth || transaction.to} />
<CopyToClipboard value={transaction.to_eth || transaction.to} />
<TransactionInfoTooltip
label={
isOasisAddressFormat
? t('transaction.tooltips.recipientTooltip')
: t('transaction.tooltips.recipientTooltipEth')
}
>
<AccountLink scope={transaction} address={to} />
</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 @@ -179,9 +176,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 2aaa10e

Please sign in to comment.