@luxfi/vm-parser
v1.9.0
Published
<br/>
Downloads
4
Keywords
Readme
Supported VMs
- MoveVM
Getting Started
npm install @luxfi/vm-parser
# or
yarn add @luxfi/vm-parser
# or
pnpm add @luxfi/vm-parser
Overview
// 1. Import modules.
import { createMoveVmConfig, DataDisplayFormat } from '@luxfi/vm-parser';
import {
Card,
CardTitle,
CardContent,
Chip,
TableContainer,
Table,
TableBody,
TableRow,
TableCell,
} from 'some-ui-library';
import useSWR from 'swr'; // Or your preferred data fetching library
const MOVE_RPC_URL =
'https://seed-node1-rpc.movementlabs.xyz/ext/bc/2gLyawqthdiyrJktJmdnDAb1XVc6xwJXU6iJKu3Uwj21F2mXAK/rpc';
// 2. Set up your config
const moveVmConfig = createMoveVmConfig(MOVE_RPC_URL);
const TransactionDetails = ({ txId }: { txId: string }) => {
// 2. Get the data from the config's `getPageData` function
const { data } = useSWR(txId, moveVmConfig.transactionDetails.getPageData);
// 3. Display the data dynamically based on the config's displayFormat.
return (
<>
{moveVmConfig.displayFormat.map(({ sectionTitle, fields }) => (
<Card>
<CardTitle>{sectionTitle}</CardTitle>
<CardContent>
<TableContainer>
<Table>
<TableBody>
{fields.map(({ name, displayValue, displayFormat }) => (
<TableRow>
<TableCell>{field.name}</TableCell>
<TableCell>
/* Display the field differently depending on its display formatter */
{field.displayFormat === DataDisplayFormat.CHIP ? (
<Chip>{field.displayValue}</Chip>
) : field.displayFormat === DataDisplayFormat.DATETIME ? (
new Date(field.displayValue).toLocaleString()
) : (
fields.displayValue
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</CardContent>
</Card>
))}
</>
);
};