Skip to content

Commit

Permalink
TX details: support switching between hex and base64 data display
Browse files Browse the repository at this point in the history
  • Loading branch information
csillag committed Sep 28, 2023
1 parent ce52dd2 commit 61ba33b
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 10 deletions.
88 changes: 88 additions & 0 deletions src/app/components/DataFormatSwitch/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import Switch, { switchClasses } from '@mui/material/Switch'
import { styled } from '@mui/material/styles'
import { COLORS } from '../../../styles/theme/colors'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import { ChangeEvent, FC } from 'react'
import { useTranslation } from 'react-i18next'
import HelpIcon from '@mui/icons-material/Help'
import Tooltip from '@mui/material/Tooltip'

const StyledAddressSwitch = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(3),
}))

const StyledSwitch = styled(Switch)(() => ({
zoom: 2,
margin: '-8px', // Reduce padding
[`.${switchClasses.switchBase} .${switchClasses.thumb}`]: {
// backgroundColor: 'black',
backgroundColor: COLORS.brandMedium,
// backgroundImage: `url("${oasisLogo}")`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: '15px',
},
[`.${switchClasses.switchBase}.${switchClasses.checked} .${switchClasses.thumb}`]: {
// backgroundColor: COLORS.lightSilver,
// backgroundImage: `url("${ethLogo}")`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
backgroundSize: '10px',
},
[`&&&& .${switchClasses.track}`]: {
opacity: 1,
// backgroundColor: COLORS.grayMedium2,
},
}))

export enum DataFormatSwitchOption {
Hex = 'hex',
Base64 = 'base64',
}

interface DataFormatSwitchProps {
selected?: DataFormatSwitchOption.Hex | DataFormatSwitchOption.Base64
onSelectionChange: (selection: DataFormatSwitchOption.Hex | DataFormatSwitchOption.Base64) => void
}

export const DataFormatSwitch: FC<DataFormatSwitchProps> = ({
selected = DataFormatSwitchOption.Hex,
onSelectionChange,
}) => {
const { t } = useTranslation()

const checked = selected === DataFormatSwitchOption.Base64

const onChange = (_event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
onSelectionChange(checked ? DataFormatSwitchOption.Base64 : DataFormatSwitchOption.Hex)
}

return (
<StyledAddressSwitch>
<span>{t('dataFormatSwitch.label')}</span>
<Tooltip title={t('dataFormatSwitch.explanation')}>
<HelpIcon />
</Tooltip>
<Typography
sx={{
color: COLORS.brandExtraDark,
fontSize: '10px',
}}
>
{t('common.hex')}
</Typography>
<StyledSwitch checked={checked} onChange={onChange} title={'whatever'} />
<Typography
sx={{
color: COLORS.brandExtraDark,
fontSize: '10px',
}}
>
{t('common.base64')}
</Typography>
</StyledAddressSwitch>
)
}
41 changes: 31 additions & 10 deletions src/app/pages/TransactionDetailPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ import Typography from '@mui/material/Typography'
import { LongDataDisplay } from '../../components/LongDataDisplay'
import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
import { base64ToHex } from '../../utils/helpers'
import { DataFormatSwitch, DataFormatSwitchOption } from '../../components/DataFormatSwitch'

type TransactionSelectionResult = {
wantedTransaction?: RuntimeTransaction
Expand Down Expand Up @@ -91,6 +92,10 @@ export const TransactionDetailPage: FC = () => {
AddressSwitchOption.Oasis | AddressSwitchOption.ETH
>(AddressSwitchOption.ETH)

const [dataFormatSwitchOption, setDataFormatSwitchOption] = useState<
DataFormatSwitchOption.Hex | DataFormatSwitchOption.Base64
>(DataFormatSwitchOption.Hex)

const { isLoading, data } = useGetRuntimeTransactionsTxHash(
scope.network,
scope.layer, // This is OK since consensus has been handled separately
Expand All @@ -115,17 +120,25 @@ export const TransactionDetailPage: FC = () => {
featured
title={t('transaction.header')}
action={
<AddressSwitch
selected={addressSwitchOption}
onSelectionChange={addressSwitch => setAddressSwitchOption(addressSwitch)}
/>
<span style={{ display: 'inline-flex' }}>
<DataFormatSwitch
selected={dataFormatSwitchOption}
onSelectionChange={dataFormat => setDataFormatSwitchOption(dataFormat)}
/>
&nbsp; &nbsp; &nbsp; &nbsp;
<AddressSwitch
selected={addressSwitchOption}
onSelectionChange={addressSwitch => setAddressSwitchOption(addressSwitch)}
/>
</span>
}
>
<TransactionDetailView
isLoading={isLoading}
transaction={transaction}
tokenPriceInfo={tokenPriceInfo}
addressSwitchOption={addressSwitchOption}
dataFormatSwitchOption={dataFormatSwitchOption}
/>
</SubPageCard>
{transaction && (
Expand Down Expand Up @@ -165,13 +178,15 @@ export const TransactionDetailView: FC<{
standalone?: boolean
tokenPriceInfo: TokenPriceInfo
addressSwitchOption?: AddressSwitchOption
dataFormatSwitchOption?: DataFormatSwitchOption
}> = ({
isLoading,
transaction,
showLayer,
standalone = false,
tokenPriceInfo,
addressSwitchOption = AddressSwitchOption.ETH,
dataFormatSwitchOption = DataFormatSwitchOption.Hex,
}) => {
const { t } = useTranslation()
const { isMobile } = useScreenSize()
Expand All @@ -186,6 +201,9 @@ export const TransactionDetailView: FC<{
const ticker = transaction?.ticker || Ticker.ROSE
const tickerName = getNameForTicker(t, ticker)

const formatBase64Data = (base64Data: string): string =>
dataFormatSwitchOption === DataFormatSwitchOption.Hex ? base64ToHex(base64Data) : base64Data

return (
<>
{isLoading && <TextSkeleton numberOfRows={10} />}
Expand Down Expand Up @@ -340,7 +358,7 @@ export const TransactionDetailView: FC<{
<>
<dt>{t('transaction.rawData')}</dt>
<dd>
<LongDataDisplay data={base64ToHex(transaction.body.data)} threshold={300} />
<LongDataDisplay data={formatBase64Data(transaction.body.data)} threshold={300} />
</dd>
</>
)}
Expand All @@ -357,7 +375,7 @@ export const TransactionDetailView: FC<{
<dt>{t('transactions.encryption.publicKey')}</dt>
<dd>
<Typography variant="mono" sx={{ overflowWrap: 'anywhere' }}>
{transaction.encryption_envelope.public_key}
{formatBase64Data(transaction.encryption_envelope.public_key)}
</Typography>
</dd>
</>
Expand All @@ -368,7 +386,7 @@ export const TransactionDetailView: FC<{
<dt>{t('transactions.encryption.dataNonce')}</dt>
<dd>
<Typography variant="mono" sx={{ overflowWrap: 'anywhere' }}>
{transaction.encryption_envelope.data_nonce}
{formatBase64Data(transaction.encryption_envelope.data_nonce)}
</Typography>
</dd>
</>
Expand All @@ -378,7 +396,10 @@ export const TransactionDetailView: FC<{
<>
<dt>{t('transactions.encryption.encryptedData')}</dt>
<dd>
<LongDataDisplay data={transaction.encryption_envelope.data} threshold={300} />
<LongDataDisplay
data={formatBase64Data(transaction.encryption_envelope.data)}
threshold={300}
/>
</dd>
</>
)}
Expand All @@ -388,7 +409,7 @@ export const TransactionDetailView: FC<{
<dt>{t('transactions.encryption.resultNonce')}</dt>
<dd>
<Typography variant="mono" sx={{ fontWeight: 400 }}>
{transaction.encryption_envelope.result_nonce}
{formatBase64Data(transaction.encryption_envelope.result_nonce)}
</Typography>
</dd>
</>
Expand All @@ -399,7 +420,7 @@ export const TransactionDetailView: FC<{
<dt>{t('transactions.encryption.encryptedResult')}</dt>
<dd>
<LongDataDisplay
data={transaction.encryption_envelope.result}
data={formatBase64Data(transaction.encryption_envelope.result)}
fontWeight={400}
threshold={300}
/>
Expand Down
6 changes: 6 additions & 0 deletions src/locales/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"address": "Address",
"age": "Age",
"balance": "Balance",
"base64": "Base64",
"block": "Block",
"bytes": "{{value, number}}",
"cancel": "Cancel",
Expand All @@ -58,6 +59,7 @@
"gasLimit": "Gas Limit",
"hash": "Hash",
"height": "Height",
"hex": "Hex",
"hide": "Hide",
"loadMore": "Load more",
"lessThanAmount": "&lt; {{value, number}} <TickerLink />",
Expand Down Expand Up @@ -423,5 +425,9 @@
"searchBtnText": "Search",
"searchSuggestions": "Not sure what to look for? Try out a search: <OptionalBreak><BlockLink><BlockIcon/> Block</BlockLink>, <TransactionLink><TransactionIcon/> Transaction</TransactionLink>, <AccountLink><AccountIcon/> Address</AccountLink>, <TokenLink><TokenIcon/> Token</TokenLink> </OptionalBreak>.",
"wordsOfPower": "I COMMAND THEE TO SEARCH FOR"
},
"dataFormatSwitch": {
"label": "Data format:",
"explanation": "Which data format to use when displaying raw data?"
}
}

0 comments on commit 61ba33b

Please sign in to comment.