Katika ulimwengu wa sasa, risiti ni muhimu ili kuthibitisha miamala na kuhifadhi uthibitisho wa ununuzi. Iwe ni benki kubwa au duka dogo la kando ya barabara, risiti husaidia biashara na watu binafsi kujipanga na kufuatilia matumizi yao. Lakini jambo kuu ni hili: nyingi hazitoi risiti na hutegemea wagunduzi kuthibitisha maelezo ya muamala. Je, ikiwa haukuhitaji kutegemea hilo? Hebu fikiria jinsi ingekuwa rahisi zaidi kwa watumiaji wako kutoa risiti moja kwa moja, bila kuhitaji kuangalia pochi zao. dApps Iwapo unaunda dApp kulingana na malipo kwenye Rootstock, makala haya yatakuonyesha jinsi ya kuunda jenereta rahisi lakini yenye ufanisi ya risiti kwa kutumia API ya Rootstock na mbinu moja tu ya RPC (Simu ya Utaratibu wa Mbali). Mbinu hii hurahisisha mchakato na kuhakikisha rekodi zako za miamala ni sahihi na ni rahisi kufikia. Hebu tujifunze hatua na zana zinazohitajika ili kuunda uzoefu mzuri wa kutengeneza risiti. Masharti Lazima uwe na nodi iliyosakinishwa kwenye kifaa chako maarifa katika Javascript Mfumo wa Js umesakinishwa chaguo lako Kihariri cha Msimbo kwa mfano, VScode Nitakuwa nikitumia React Typescript na TailwindCSS kwa kupiga maridadi Zana na Teknolojia Ufunguo wa API ya Mizizi : kuingiliana na RPC Web3js : kutoa msimbo wa QR kwa watumiaji kuchanganua na kupata risiti zao QRCode React : kutoa risiti kuwa PDF Jspdf Sakinisha, Ingiza Vifurushi na Unda sehemu ya kazi Sakinisha utegemezi wote kwa kutumia amri hii: npm i web3js jspdf qrcode.react Unda faili mpya au utumie App.jsx Ingiza vifurushi kwenye faili na yafuatayo: import { useState } from "react"; import Web3 from "web3"; import { jsPDF } from "jspdf"; import { QRCodeSVG } from "qrcode.react"; Anzisha kipengele cha utendaji const TransactionReceipt = () => { /......./ } export default TransactionReceipt; Usimamizi wa Jimbo na Uingizaji wa Wavuti3 Kijisehemu cha msimbo hapa kitasimamia hali na utendakazi wa kuleta na kuonyesha maelezo ya muamala kwa kutumia useState hook, Web3js, Rootstock RPC na 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}` ); : Usimamizi wa Jimbo : Mstari huu huanzisha ya hali tofauti. Kigezo hiki cha hali kitawajibika kwa heshi ya muamala iliyoingizwa ambayo vigeu vingine na vitendaji vingine vitajiinua ili kutoa risiti. const [transactionId, setTransactionId] = useState(""); transactionId : Laini hii inaanzisha hali tofauti yenye thamani na hutoa chaguo la kukokotoa ili kusasisha thamani yake. Jimbo linaweza kushikilia kitu cha au . const [transactionDetails, setTransactionDetails] = useState<TransactionDetails | null>(null); transactionDetails null setTransactionDetails TransactionDetails null : Mstari huu huanzisha ya hali tofauti kwa mfuatano tupu na hutoa chaguo la kukokotoa kusasisha thamani yake. const [error, setError] = useState(""); error setError : Kiolesura cha TypeScript : Hii inafafanua kiolesura cha TypeScript kwa muundo wa kitu cha maelezo ya muamala. Inajumuisha sifa kama vile , , , , , na . interface TransactionDetails transactionHash from to cumulativeGasUsed blockNumber contractAddress : Uanzishaji wa Web3 : Laini hii inaanzisha Web3js, ikiunganisha kwenye sehemu ya mwisho ya RPC kwenye testnet ya Rootstock. URL ya mwisho inajumuisha ufunguo wa API ambao hutolewa kutoka kwa vigezo vya mazingira kwa kutumia . const web3 = new Web3(https://rpc.testnet.rootstock.io/${import.meta.env.VITE_API_KEY}); import.meta.env.VITE_API_KEY Kazi ya Kuleta Maelezo ya Muamala Nambari hapa itachukua maelezo ya ununuzi kwa kutumia chaguo la kukokotoa kutoka kwa Rootstock kwa kutumia mbinu ya 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"); } } }; : Hitilafu katika Kuweka Mipangilio : Muundo huu unatumika kushughulikia hitilafu zozote zinazoweza kutokea wakati wa utekelezaji wa chaguo la kukokotoa. try { ... } catch (err) { ... } : Weka upya Jimbo setError("");: Hii hufuta ujumbe wowote wa makosa ya hapo awali kwa kuweka hali kuwa mfuatano tupu. error setTransactionDetails(null);: Hii hufuta maelezo yoyote ya awali ya muamala kwa kuweka hali ya . transactionDetails null : Leta Risiti ya Muamala ;: Laini hii hutumia mbinu ya web3js kuleta risiti ya muamala kwa Kitambulisho cha muamala kilichowekwa. const receipt = await web3.eth.getTransactionReceipt(transactionId) : Angalia Risiti : Ikiwa risiti haijapatikana (yaani, risiti ni au ), hitilafu hutupwa na ujumbe "Muamala haujapatikana!". if (!receipt) { throw new Error("Transaction not found!"); } null undefined : Weka Maelezo ya Muamala : Iwapo risiti itapatikana, inasasisha hali ya kwa risiti iliyoletwa. setTransactionDetails(receipt) transactionDetails : Kushughulikia Hitilafu : Kizuizi hiki kinanasa hitilafu zozote zinazotokea wakati wa utekelezaji wa . catch (err) { ... } try : Ikiwa kosa lililopatikana ni mfano wa darasa la Hitilafu, huweka hali kwa ujumbe wa kosa. Vinginevyo, huweka hali ya kwa ujumbe wa hitilafu ya jumla "Hitilafu isiyojulikana imetokea". if (err instanceof Error) { setError(err.message); } else { setError("An unknown error occurred"); } error error Kazi za Kuzalisha PDF ya Stakabadhi Hapa kifurushi cha Jspdf kitatumika kutengeneza PDF iliyo na maelezo ya muamala. 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"); }; : Angalia Maelezo ya Muamala : Hii hukagua kama ni au . Ikiwa ni, kazi inarudi mapema na haifanyi chochote. if (!transactionDetails) return; transactionDetails null undefined : Maelezo ya Muamala wa Uundaji : Hii inaharibu kitu cha ili kutoa mali binafsi kwa ufikiaji rahisi. const { transactionHash, from, to, cumulativeGasUsed, blockNumber, contractAddress } = transactionDetails; transactionDetails : Unda Hati ya PDF : Hii inaunda mfano mpya wa darasa la jsPDF, ambalo linawakilisha hati ya PDF. const pdf = new jsPDF() : Weka Saizi ya herufi na Ongeza Kichwa : Hii huweka saizi ya fonti ya kichwa kuwa 16. pdf.setFontSize(16) : Hii inaongeza kichwa "Risiti ya Muamala" kwenye viwianishi (10, 10) katika hati ya PDF. pdf.text("Transaction Receipt", 10, 10); : Ongeza Maelezo ya Muamala kwa PDF : Hii huweka ukubwa wa fonti hadi 12 kwa maandishi mengine. pdf.setFontSize(12); : ${transactionHash} : Hii inaongeza heshi ya muamala kwenye viwianishi (10, 20). pdf.text(Transaction Hash , 10, 20); : Hii inaongeza anwani ya mtumaji kwenye viwianishi (10, 30). pdf.text(From: ${from}, 10, 30); : Hii inaongeza anwani ya mkataba katika kuratibu (10, 40). Kumbuka: Mstari huu unapaswa kusahihishwa ili kuzuia maandishi yanayopishana. pdf.text(Contract Address: ${contractAddress}, 10, 40); : Hii huongeza anwani ya mpokeaji kwenye viwianishi (10, 50). pdf.text(To: ${to}, 10, 50); pdf.text(Cumulative Gesi Imetumika: ${cumulativeGasUsed} : Hii inaongeza mkusanyiko wa gesi inayotumika katika kuratibu (10, 60). , 10, 60); : Hii inaongeza nambari ya kuzuia kwenye kuratibu (10, 70). pdf.text(Block Number: ${blockNumber}, 10, 70); : Hifadhi Hati ya PDF pdf.save("Transaction_Receipt.pdf");: Hii itahifadhi hati ya PDF kwa jina la faili "Transaction_Receipt.pdf" . Kiolesura cha Mtumiaji Hapa utakuwa ukitoa vipengele hivyo vya utendaji kama UI kwa watumiaji. Msimbo huu tayari umejumuisha mtindo kwa kutumia 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> Kwa jenereta ya msimbo wa QR, maktaba ya qrcode.react ilitumiwa, na maelezo ya muamala yakasimbwa ndani yake msimbo wa QR SVG. Msimbo wa mwisho na Pato Ukifuata hatua, codebase yako inapaswa kuonekana kama hii: 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; Kisha, leta na uiweke katika faili yako ya TransactionReceipt App.tsx Onyesho https://youtu.be/Xwkl9pu8UiM?embedable=true Hitimisho Katika makala haya, umeweza kuunda jenereta ya risiti katika msimbo wa PDF au QR kwa kutumia Ufunguo wa API ya Mizizi na mbinu ya RPC. Kwa hivyo katika mradi wako unaofuata wa dApp, natumai kuona kipengele hiki ndani yake.
