TX details: support switching between hex and base64 data display

.changelog/904.feature.md

@@ -0,0 +1 @@
+TX details: support switching between hex and base64 data display

src/app/components/DataFormatSwitch/index.tsx

@@ -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>
+  )
+}

src/app/pages/TransactionDetailPage/index.tsx

@@ -38,6 +38,7 @@ import { LongDataDisplay } from '../../components/LongDataDisplay'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 import { base64ToHex } from '../../utils/helpers'
 import { DappBanner } from '../../components/DappBanner'
+import { DataFormatSwitch, DataFormatSwitchOption } from '../../components/DataFormatSwitch'
 
 type TransactionSelectionResult = {
   wantedTransaction?: RuntimeTransaction
@@ -92,6 +93,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
@@ -116,17 +121,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>
       <DappBanner scope={scope} ethAddress={transaction?.sender_0_eth} />
@@ -168,13 +181,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()
@@ -189,6 +204,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} />}
@@ -356,7 +374,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>
             </>
           )}
@@ -368,7 +386,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>
                 </>
@@ -379,7 +397,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>
                 </>
@@ -389,7 +407,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>
                 </>
               )}
@@ -399,7 +420,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>
                 </>
@@ -410,7 +431,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}
                     />

src/locales/en/translation.json

@@ -37,6 +37,7 @@
     "address": "Address",
     "age": "Age",
     "balance": "Balance",
+    "base64": "Base64",
     "block": "Block",
     "bytes": "{{value, number}}",
     "cancel": "Cancel",
@@ -61,6 +62,7 @@
     "gasLimit": "Gas Limit",
     "hash": "Hash",
     "height": "Height",
+    "hex": "Hex",
     "hide": "Hide",
     "loadMore": "Load more",
     "lessThanAmount": "&lt; {{value, number}} <TickerLink />",
@@ -509,5 +511,9 @@
     "title": "Validator",
     "uptime": "Uptime",
     "voting": "Voting %"
+  },
+  "dataFormatSwitch": {
+    "label": "Data format:",
+    "explanation": "Which data format to use when displaying raw data?"
   }
 }