Preview

Preview is an endpoint that behaves quite similarly to our flagship Translate Tx endpoint, except that it can "classify" a transaction before it has taken place.

The input to this endpoint is exactly the same as Describe. It takes a chain name in the URL and an unsigned transaction object.

Here's how we'd call Preview:

const axios = require('axios');

const API_BASE_URL = 'https://foresight.noves.fi';

// Set your API Key as an env var or directly as a string
const NOVES_API_KEY = process.env.NOVES_API_KEY;

async function previewTransaction(chain, unsignedTx) {
    try {
        const response = await axios.post(
            `${API_BASE_URL}/evm/${chain}/preview`,
            { transaction: unsignedTx },
            {
                headers: {
                    apiKey: NOVES_API_KEY,
                },
            }
        );
        return response.data;
    } catch (error) {
        console.error('Error previewing transaction:', error);
        return null;
    }
}

const chain = 'polygon';

// Sample Aave v3 transaction
const unsignedTx = {
    from: '0x840cb722e7acf3f970aa79f0e3a37460a6dcd46a',
    to: '0x1e4b7a6b903680eab0c5dabcb8fd429cd2a9598c',
    value: '0x4563918244f400',
    data: '0x474cf53d000000000000000000000000794a61358d6845594f94dc1db02a252b5b4814ad000000000000000000000000840cb722e7acf3f970aa79f0e3a37460a6dcd46a0000000000000000000000000000000000000000000000000000000000000000',
    gas: '0x493e0',
    gasPrice: '0x208034bdf4',
};

previewTransaction(chain, unsignedTx).then((output) => {
    console.log(JSON.stringify(output, null, 2));
});

Here's what the full output would be like:

{
    "txTypeVersion": 2,
    "chain": "polygon",
    "accountAddress": "0x840cb722e7ACF3f970AA79f0e3a37460A6dcD46a",
    "classificationData": {
        "type": "depositCollateral",
        "source": {
            "type": "inference"
        },
        "description": "Will deposit 0.02 MATIC as collateral and receive 0.02 aPolWMATIC.",
        "sent": [
            {
                "action": "deposited",
                "from": {
                    "name": "Depositor (this wallet)",
                    "address": "0x840cb722e7ACF3f970AA79f0e3a37460A6dcD46a"
                },
                "to": {
                    "name": "Aave: Wrapped Token Gateway V3",
                    "address": "0x1e4b7A6b903680eab0c5dAbcb8fD429cD2a9598c"
                },
                "amount": "0.01953125",
                "token": {
                    "symbol": "MATIC",
                    "name": "Matic Token",
                    "decimals": 18,
                    "address": "MATIC"
                }
            },
            {
                "action": "paidGas",
                "from": {
                    "name": "This wallet",
                    "address": "0x840cb722e7ACF3f970AA79f0e3a37460A6dcD46a"
                },
                "to": {
                    "name": null,
                    "address": null
                },
                "amount": "0.041876968086",
                "token": {
                    "symbol": "MATIC",
                    "name": "Matic Token",
                    "decimals": 18,
                    "address": "MATIC"
                }
            }
        ],
        "received": [
            {
                "action": "collateralSharesMinted",
                "from": {
                    "name": "Null address",
                    "address": "0x0000000000000000000000000000000000000000"
                },
                "to": {
                    "name": "Recipient (this wallet)",
                    "address": "0x840cb722e7ACF3f970AA79f0e3a37460A6dcD46a"
                },
                "amount": "0.01953125",
                "token": {
                    "symbol": "aPolWMATIC",
                    "name": "Aave Polygon WMATIC",
                    "decimals": 18,
                    "address": "0x6d80113e533a2c0fe82eabd35f1875dcea89ea97"
                }
            }
        ]
    }
}

See how a full "classified object" is returned, including the description Will deposit 0.02 MATIC... and the token transfers tagged with their meaning (collateralSharesMinted, deposited, etc).

Granted, it might look like a lot.

But note that this data is ready for visual delivery to the end user. It doesn't need further deciphering / decoding.

In a wallet app, the fields you're most likely interested in are:

type
description
sent and received (if you want to present a more comprehensive visualization of assets that will leave / enter the wallet)

Note that description is already filled with the values of key asset transfers that would take place in the transaction:

"Will deposit 0.02 MATIC as collateral and receive 0.02 aPolWMATIC."

Therefore, if you want to save yourself a bunch of work and just display the type and description, you can do so with a simple React component as follows:

import React from 'react';

const PresignPreview = ({ chain, unsignedTx }) => {
    const [transactionData, setTransactionData] = useState(null);

    useEffect(() => {
        async function fetchData() {
            const output = await previewTransaction(chain, unsignedTx);
            setTransactionData(output);
        }

        fetchData();
    }, [chain, unsignedTx]);

    if (!transactionData) {
        return <div>Loading...</div>;
    }

    const { type, description } = transactionData.classificationData;

    return (
        <div>
            <h3>Predicted Transaction Type: {type}</h3>
            <small>This transaction will:</small>
            <p>{description}</p>
        </div>
    );
}

export default PresignPreview;