mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
28b9b27e8b
* update styles of tx details * common color for text separator * remove bold fontWeight from some details items * address, block, token, pool, user ops details pages * refactor chain-specific views * unify grid column template for detailed views * remove TODO * update margins for text separator * update screenshots * update margin between icon and text for mobile * rename prop * update layout of decoded input data * update screenshots * fix tac operation and zilliqa quorum snippets
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
||
|
||
import type { UserOp } from 'types/api/userOps';
|
||
|
||
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
|
||
import RawInputData from 'ui/shared/RawInputData';
|
||
|
||
import UserOpCallDataSwitch from './UserOpCallDataSwitch';
|
||
|
||
interface Props {
|
||
data: UserOp;
|
||
}
|
||
|
||
const UserOpDecodedCallData = ({ data }: Props) => {
|
||
|
||
const [ callData, setCallData ] = React.useState<string | null>(data.execute_call_data || data.call_data);
|
||
|
||
const handleSwitchChange = React.useCallback((isChecked: boolean) => {
|
||
setCallData(isChecked ? data.call_data : data.execute_call_data);
|
||
}, [ data ]);
|
||
|
||
if (!callData) {
|
||
return null;
|
||
}
|
||
|
||
const toggler = data.call_data && data.execute_call_data ? (
|
||
<UserOpCallDataSwitch
|
||
id="call-data-switch"
|
||
onChange={ handleSwitchChange }
|
||
initialValue={ false }
|
||
ml={{ base: 3, lg: 'auto' }}
|
||
/>
|
||
) : null;
|
||
|
||
const labelText = data.call_data && !data.execute_call_data ? 'External call data' : 'Call data';
|
||
|
||
return (
|
||
<>
|
||
<DetailedInfo.ItemLabel
|
||
hint="Data that’s passed to the sender for execution"
|
||
mb={{ base: 1, lg: 0 }}
|
||
>
|
||
{ labelText }
|
||
</DetailedInfo.ItemLabel>
|
||
<DetailedInfo.ItemValue>
|
||
<RawInputData hex={ callData } rightSlot={ toggler }/>
|
||
</DetailedInfo.ItemValue>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default React.memo(UserOpDecodedCallData);
|