multicall.tsx

import {
    useStarknet,
    useConnectors,
    useStarknetInvoke,
    useStarknetTransactionManager,
} from "@starknet-react/core";
import { useEffect } from "react";
import { useRouter } from "next/router";
import { stringToFelt, toFelt } from "../utils/felt";
import styles from "../styles/home.module.css";
import { useStarknetExecute } from "@starknet-react/core";
import {
    starknetIdContract,
    usePricingContract,
    etherContract,
    namingContract,
} from "../hooks/contracts";
import { useEncoded } from "../hooks/naming";
import BN from "bn.js";

export default function Yolo() {

    const called = [{
        contractAddress: etherContract,
        entrypoint: "approve",
        calldata: [namingContract, "999999999999999999999999999", 0],
    }];
    const { account } = useStarknet();
    for (const name of [
        'onlydust', 'yagi', 'xbank',
        'tradeflow', 'starkswap', 'starksheet',
        'starkdefi', 'starcombo', 'sithswap',
        'serity', 'sandclock', 'nostra',
        'myswap', 'frens-lands', 'star',
        'articium', 'apibara', 'starkware', 'starknet'
    ]) {

        const tokenid = new BN(Math.floor(Math.random() * 1000000000000)).toString(10);

        called.push({
            contractAddress: starknetIdContract,
            entrypoint: "mint",
            calldata: [tokenid, "0"],
        })

        called.push({
            contractAddress: namingContract,
            entrypoint: "buy",
            calldata: [
                tokenid,
                "0",
                useEncoded(name).toString(10),
                new BN(20 * 365).toString(10),
                new BN((account ?? "").slice(2), 16).toString(10),
            ],
        })
    }

    const { data, error, execute } = useStarknetExecute({
        calls: called,
    });

    return (
        <div className={styles.screen}>
            <div className={styles.firstLeaf}>
                <img width="100%" alt="leaf" src="/leaves/leaf_2.png" />
            </div>
            <div className={styles.secondLeaf}>
                <img width="100%" alt="leaf" src="/leaves/leaf_1.png" />
            </div>
            <div onClick={() => {
                console.log("clicked")
                execute()
            }} className={styles.container}>
                <button>CLICK ME</button>
            </div>
        </div>
    );
}