Nel mondo odierno, le ricevute sono essenziali per convalidare le transazioni e conservare la prova degli acquisti. Che si tratti di una grande banca o di un piccolo negozio di alimentari, le ricevute aiutano le aziende e gli individui a rimanere organizzati e a tenere traccia delle proprie spese.  Ma ecco il punto: la maggior parte   non fornisce ricevute e si affida agli explorer per verificare i dettagli delle transazioni. E se non dovessi affidarti a questo? Immagina quanto sarebbe più comodo per i tuoi utenti generare ricevute direttamente, senza dover controllare i loro wallet. delle dApp  Se stai creando una dApp basata sui pagamenti su Rootstock, questo articolo ti mostrerà come creare un generatore di ricevute semplice ma efficace utilizzando la Rootstock API e un solo metodo RPC (Remote Procedure Call). Questo approccio semplifica il processo e garantisce che i tuoi record di transazione siano accurati e facili da accedere.  Scopriamo i passaggi e gli strumenti necessari per creare un'esperienza di generazione di ricevute fluida.  Prerequisiti  Devi avere il nodo installato sul tuo dispositivo  conoscenza di Javascript  Framework Js installato di tua scelta  Editor di codice, ad esempio VScode  Per lo styling userò React Typescript e TailwindCSS  Strumenti e tecnologie   Chiave API del portainnesto    : per interagire con RPC Web3js    : per generare un codice QR che gli utenti possono scansionare e ottenere la ricevuta QRCode React    : per generare la ricevuta in PDF Jspdf  Installa, importa i pacchetti e crea il componente funzionale  Installa tutte le dipendenze usando questo comando:   npm i web3js jspdf qrcode.react  Crea un nuovo file o usa  App.jsx  Importare i pacchetti nel file con quanto segue:   import { useState } from "react"; import Web3 from "web3"; import { jsPDF } from "jspdf"; import { QRCodeSVG } from "qrcode.react";  Inizializzare il componente funzionale   const TransactionReceipt = () => { /......./ } export default TransactionReceipt;  Gestione dello Stato e integrazione Web3  Il frammento di codice qui presente gestirà lo stato e la funzionalità per il recupero e la visualizzazione dei dettagli delle transazioni utilizzando l'hook useState, Web3js, Rootstock RPC e API.  const [transactionId, setTransactionId] = useState(""); interface TransactionDetails { transactionHash: string; from: string; to: string; cumulativeGasUsed: number; blockNumber: number; contractAddress?: string; } const [transactionDetails, setTransactionDetails] = useState<TransactionDetails | null>(null); const [error, setError] = useState(""); const web3 = new Web3( `https://rpc.testnet.rootstock.io/${import.meta.env.VITE_API_KEY}` );    : Gestione dello Stato    : Questa riga inizializza una variabile di stato   . Questa variabile di stato sarà responsabile dell'hash della transazione immesso che altre variabili e funzioni sfrutteranno per generare la ricevuta. const [transactionId, setTransactionId] = useState(""); transactionId    : Questa riga inizializza una variabile di stato   con un valore   e fornisce una funzione   per aggiornarne il valore. Lo stato può contenere un oggetto   o   . const [transactionDetails, setTransactionDetails] = useState<TransactionDetails | null>(null); transactionDetails null setTransactionDetails TransactionDetails null    : Questa riga inizializza una variabile di stato   con una stringa vuota e fornisce una funzione   per aggiornarne il valore. const [error, setError] = useState(""); error setError    : Interfaccia TypeScript    : definisce un'interfaccia TypeScript per la struttura dell'oggetto transaction details. Include proprietà come   ,   ,   ,   ,   e un   facoltativo. interface TransactionDetails transactionHash from to cumulativeGasUsed blockNumber contractAddress    : Inizializzazione Web3    : Questa riga inizializza Web3js, connettendosi all'endpoint RPC alla testnet Rootstock. L'URL dell'endpoint include una chiave API che viene recuperata dalle variabili di ambiente tramite   . const web3 = new Web3(https://rpc.testnet.rootstock.io/${import.meta.env.VITE_API_KEY}); import.meta.env.VITE_API_KEY  Funzione per recuperare i dettagli della transazione  Il codice qui recupererà i dettagli della transazione utilizzando una funzione asincrona da Rootstock con il metodo web3.js.   const fetchTransactionDetails = async () => { try { setError(""); setTransactionDetails(null); const receipt = await web3.eth.getTransactionReceipt(transactionId); if (!receipt) { throw new Error("Transaction not found!"); } setTransactionDetails(receipt); } catch (err) { if (err instanceof Error) { setError(err.message); } else { setError("An unknown error occurred"); } } };    : Impostazione della gestione degli errori    : Questa struttura viene utilizzata per gestire eventuali errori che potrebbero verificarsi durante l'esecuzione della funzione. try { ... } catch (err) { ... }    : Ripristina stato  setError("");: cancella tutti i messaggi di errore precedenti impostando lo stato   su una stringa vuota. error  setTransactionDetails(null);: cancella tutti i dettagli delle transazioni precedenti impostando lo stato   su   . transactionDetails null    : Ottieni la ricevuta della transazione    ;: Questa riga utilizza il metodo web3js per recuperare la ricevuta della transazione per il transactionId immesso. const receipt = await web3.eth.getTransactionReceipt(transactionId)    : Controllare la ricevuta    : Se la ricevuta non viene trovata (ad esempio, la ricevuta è   o   ), viene generato un errore con il messaggio "Transazione non trovata!". if (!receipt) { throw new Error("Transaction not found!"); } null undefined    : Imposta i dettagli della transazione    : se la ricevuta viene trovata, aggiorna lo stato   con la ricevuta recuperata. setTransactionDetails(receipt) transactionDetails    : Gestione degli errori    : Questo blocco cattura tutti gli errori che si verificano durante l'esecuzione del blocco   . catch (err) { ... } try    : Se l'errore rilevato è un'istanza della classe Error, imposta lo stato   sul messaggio di errore. Altrimenti, imposta lo stato   su un messaggio di errore generico "Si è verificato un errore sconosciuto". if (err instanceof Error) { setError(err.message); } else { setError("An unknown error occurred"); } error error  Funzioni per generare la ricevuta PDF  Qui verrà utilizzato il pacchetto Jspdf per generare il PDF contenente i dettagli della transazione.   const generatePDF = () => { if (!transactionDetails) return; const { transactionHash, from, to, cumulativeGasUsed, blockNumber, contractAddress, } = transactionDetails; const pdf = new jsPDF(); pdf.setFontSize(16); pdf.text("Transaction Receipt", 10, 10); pdf.setFontSize(12); pdf.text(`Transaction Hash: ${transactionHash}`, 10, 20); pdf.text(`From: ${from}`, 10, 30); pdf.text(`Contract Address: ${contractAddress}`, 10, 40); pdf.text(`To: ${to}`, 10, 40); pdf.text(`Cumulative Gas Used: ${cumulativeGasUsed}`, 10, 50); pdf.text(`Block Number: ${blockNumber}`, 10, 60); pdf.save("Transaction_Receipt.pdf"); };    : Controlla i dettagli della transazione    : Questo controlla se   è   o   . In caso affermativo, la funzione restituisce in anticipo e non fa nulla. if (!transactionDetails) return; transactionDetails null undefined    : Dettagli della transazione di destrutturazione    : Questo destruttura l'oggetto   per estrarre singole proprietà per un accesso più semplice. const { transactionHash, from, to, cumulativeGasUsed, blockNumber, contractAddress } = transactionDetails; transactionDetails    : Crea documento PDF    : Crea una nuova istanza della classe jsPDF, che rappresenta un documento PDF. const pdf = new jsPDF()    : Imposta la dimensione del carattere e aggiungi il titolo    : imposta la dimensione del carattere dell'intestazione a 16. pdf.setFontSize(16)    : Aggiunge il titolo "Ricevuta di transazione" alle coordinate (10, 10) nel documento PDF. pdf.text("Transaction Receipt", 10, 10);    : Aggiungi i dettagli della transazione al PDF    : Imposta la dimensione del carattere a 12 per il resto del testo. pdf.setFontSize(12);    : ${transactionHash}   : Aggiunge l'hash della transazione alle coordinate (10, 20). pdf.text(Transaction Hash , 10, 20);    : Aggiunge l'indirizzo del mittente alle coordinate (10, 30). pdf.text(From: ${from}, 10, 30);    : Aggiunge l'indirizzo del contratto alle coordinate (10, 40). Nota: questa riga dovrebbe essere corretta per evitare sovrapposizioni di testo. pdf.text(Contract Address: ${contractAddress}, 10, 40);    : Aggiunge l'indirizzo del destinatario alle coordinate (10, 50). pdf.text(To: ${to}, 10, 50);  pdf.text(Gas cumulativo utilizzato: ${cumulativeGasUsed}   : Aggiunge il gas cumulativo utilizzato alle coordinate (10, 60). , 10, 60);    : Aggiunge il numero del blocco alle coordinate (10, 70). pdf.text(Block Number: ${blockNumber}, 10, 70);    : Salva documento PDF  pdf.save("Transaction_Receipt.pdf");: Questo salverà il documento PDF con il nome file "Transaction_Receipt.pdf".  L'interfaccia utente  Qui renderizzerai quei componenti funzionali come interfaccia utente per gli utenti.  Questo codice ha già incluso lo stile utilizzando Tailwindcss  return ( <div className="p-8 font-sans bg-gray-100 min-h-screen"> <div className="max-w-3xl m-auto bg-white p-6 rounded-lg shadow-lg"> <h1 className="text-3xl font-bold mb-6 text-center text-blue-600"> Transaction Receipt Generator </h1> <div className="mb-6"> <div className="flex"> <input type="text" id="transactionId" value={transactionId} onChange={(e) => setTransactionId(e.target.value)} placeholder="Enter transaction hash" className="border p-2 w-full rounded-l-lg" /> <button onClick={fetchTransactionDetails} className="p-2 bg-blue-500 text-white rounded-r-lg" > Fetch Details </button> </div> </div> {error && ( <p className="text-red-500 mt-4 text-center">Error: {error}</p> )} {transactionDetails && ( <div className="mt-6 flex flex-row gap-8"> <div className="w-2/3"> <h2 className="text-2xl font-semibold mb-4 text-center"> Transaction Details </h2> <div className="bg-gray-50 p-4 rounded-lg shadow-inner w-[460px]"> <p> <strong>Transaction Hash:</strong>{" "} {`${transactionDetails.transactionHash.slice( 0, 6 )}...${transactionDetails.transactionHash.slice(-6)}`} </p> <p> <strong>From:</strong> {transactionDetails.from} </p> <p> <strong>Contract Address:</strong>{" "} {transactionDetails.contractAddress} </p> <p> <strong>To:</strong> {transactionDetails.to} </p> <p> <strong>Cumulative Gas Used:</strong>{" "} {transactionDetails.cumulativeGasUsed.toString()} </p> <p> <strong>Block Number:</strong>{" "} {transactionDetails.blockNumber.toString()} </p> </div> <button onClick={generatePDF} className="mt-6 w-full p-3 bg-green-500 text-white rounded-lg" > Download PDF Receipt </button> </div> <div className="w-1/2 text-center"> <h3 className="text-xl font-semibold mb-4">QR Code</h3> <QRCodeSVG value={`Transaction Hash: ${ transactionDetails.transactionHash }, From: ${transactionDetails.from}, To: ${transactionDetails.to}, Contract Address: ${transactionDetails.contractAddress}, Cumulative Gas Used: ${transactionDetails.cumulativeGasUsed.toString()}, Block Number: ${transactionDetails.blockNumber.toString()}`} size={200} className="mx-auto" /> </div> </div> )} </div> </div>  Per il generatore di codici QR è stata utilizzata la libreria qrcode.react e i dettagli della transazione sono stati crittografati al suo interno nel codice QR SVG.  Codice di base finale e output  Se segui i passaggi, la tua base di codice dovrebbe apparire così:   import { useState } from "react"; import Web3 from "web3"; import { jsPDF } from "jspdf"; import { QRCodeSVG } from "qrcode.react"; const TransactionReceipt = () => { const [transactionId, setTransactionId] = useState(""); interface TransactionDetails { transactionHash: string; from: string; to: string; cumulativeGasUsed: number; blockNumber: number; contractAddress?: string; } const [transactionDetails, setTransactionDetails] = useState<TransactionDetails | null>(null); const [error, setError] = useState(""); const web3 = new Web3( `https://rpc.testnet.rootstock.io/${import.meta.env.VITE_API_KEY}` ); const fetchTransactionDetails = async () => { try { setError(""); setTransactionDetails(null); const receipt = await web3.eth.getTransactionReceipt(transactionId); if (!receipt) { throw new Error("Transaction not found!"); } setTransactionDetails(receipt); } catch (err) { if (err instanceof Error) { setError(err.message); } else { setError("An unknown error occurred"); } } }; const generatePDF = () => { if (!transactionDetails) return; const { transactionHash, from, to, cumulativeGasUsed, blockNumber, contractAddress, } = transactionDetails; const pdf = new jsPDF(); pdf.setFontSize(16); pdf.text("Transaction Receipt", 10, 10); pdf.setFontSize(12); pdf.text(`Transaction Hash: ${transactionHash}`, 10, 20); pdf.text(`From: ${from}`, 10, 30); pdf.text(`Contract Address: ${contractAddress}`, 10, 40); pdf.text(`To: ${to}`, 10, 40); pdf.text(`Cumulative Gas Used: ${cumulativeGasUsed}`, 10, 50); pdf.text(`Block Number: ${blockNumber}`, 10, 60); pdf.save("Transaction_Receipt.pdf"); }; return ( <div className="p-8 font-sans bg-gray-100 min-h-screen"> <div className="max-w-3xl m-auto bg-white p-6 rounded-lg shadow-lg"> <h1 className="text-3xl font-bold mb-6 text-center text-blue-600"> Transaction Receipt Generator </h1> <div className="mb-6"> <div className="flex"> <input type="text" id="transactionId" value={transactionId} onChange={(e) => setTransactionId(e.target.value)} placeholder="Enter transaction hash" className="border p-2 w-full rounded-l-lg" /> <button onClick={fetchTransactionDetails} className="p-2 bg-blue-500 text-white rounded-r-lg" > Fetch Details </button> </div> </div> {error && ( <p className="text-red-500 mt-4 text-center">Error: {error}</p> )} {transactionDetails && ( <div className="mt-6 flex flex-row gap-8"> <div className="w-2/3"> <h2 className="text-2xl font-semibold mb-4 text-center"> Transaction Details </h2> <div className="bg-gray-50 p-4 rounded-lg shadow-inner w-[460px]"> <p> <strong>Transaction Hash:</strong>{" "} {`${transactionDetails.transactionHash.slice( 0, 6 )}...${transactionDetails.transactionHash.slice(-6)}`} </p> <p> <strong>From:</strong> {transactionDetails.from} </p> <p> <strong>Contract Address:</strong>{" "} {transactionDetails.contractAddress} </p> <p> <strong>To:</strong> {transactionDetails.to} </p> <p> <strong>Cumulative Gas Used:</strong>{" "} {transactionDetails.cumulativeGasUsed.toString()} </p> <p> <strong>Block Number:</strong>{" "} {transactionDetails.blockNumber.toString()} </p> </div> <button onClick={generatePDF} className="mt-6 w-full p-3 bg-green-500 text-white rounded-lg" > Download PDF Receipt </button> </div> <div className="w-1/2 text-center"> <h3 className="text-xl font-semibold mb-4">QR Code</h3> <QRCodeSVG value={`Transaction Hash: ${ transactionDetails.transactionHash }, From: ${transactionDetails.from}, To: ${transactionDetails.to}, Contract Address: ${transactionDetails.contractAddress}, Cumulative Gas Used: ${transactionDetails.cumulativeGasUsed.toString()}, Block Number: ${transactionDetails.blockNumber.toString()}`} size={200} className="mx-auto" /> </div> </div> )} </div> </div> ); }; export default TransactionReceipt;  Quindi, importa   e visualizzalo nel tuo file  TransactionReceipt App.tsx  Dimostrazione   https://youtu.be/Xwkl9pu8UiM?embedable=true  Conclusione  In questo articolo, sei riuscito a creare un generatore di ricevute in un PDF o codice QR usando la chiave API Rootstock e il metodo RPC. Quindi, nel tuo prossimo progetto dApp, spero di vedere questa funzionalità.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Costruisci un generatore di ricevute solo con l'API Rootstock e il metodo RPC

About Author

COMMENTI

CARTELLINI

QUESTO ARTICOLO È STATO PRESENTATO IN

Related Stories

The Fall of OM by Mantra DAO: Accident or Pattern?

OpenAI Has Everything Under Control 😎

HackerNoon - A User Experience Analysis: Part 2

Meet Dealscard, Winner of Startups of The Year 2024 in Ghaziabad/Deal Aggregator

The Fall of OM by Mantra DAO: Accident or Pattern?

OpenAI Has Everything Under Control 😎

HackerNoon - A User Experience Analysis: Part 2

Meet Dealscard, Winner of Startups of The Year 2024 in Ghaziabad/Deal Aggregator

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps