Decentralizovaný a permanentný internet: Stellar & IPFS Tutoriál

create-react-app stellar-app

npm start

//Definované spojenie s IPFS API
const ipfs = ipfsAPI({ host: 'ipfs.infura.io', port: 5001, protocol: 'https' });
//Spojenie s testovacím blockchainom Stellaru
const serverUrl = 'https://horizon-testnet.stellar.org';// TESTNET
const server = new StellarSdk.Server(serverUrl);
//Vytvoríme si objekt account kde zadáme adresu svojho Stellar account a jeho private key (secret)
var account = {
    public:'GDJ2QE5DGI2P4LPVUHELCAHTM4LHC2RR7BAPMLMB4ZBO3ZXRXNA4VABG',
    secret:'--secret--'
};

handleSubmit(event) {
	//Nechceme, aby sa nám submitom po každý raz stránka refreshla, to by nám bol react na prd
	event.preventDefault();

	//Buffer je NODEJS modul, ktorý umožňuje manipulovať priamo s binárkou dát
	const buffer = Buffer.from(this.state.value);

	//Pridáme spracované dáta do metódy .add ktorá nám vo fallback funkcii vráti práve požadovaný hash
	ipfs.files.add(buffer, (err, ipfsHash) => {

		//Hash odkaz na dáta uložené na IPFS si uložíme do objektu, ktorý je určený
		//ako vstup pre metódu dát priamo na Stellar účte
		var transactData = {name:'ipfs', value:ipfsHash[0].path};

		//Pripojíme sa k testnetu
		StellarSdk.Network.useTestNetwork();

		//Načítame si náš účet pomocou našej adresy
		server.loadAccount(account.public)
			.then(function(account) {

			//V tomto momente máme prístup k účtu a môžeme zavolať vytvorenie novej transakcie
			var transaction = new StellarSdk.TransactionBuilder(account)
			//Pridáme operáciu k transakcii
			//Túto operáciu bude predstavovať operácia manageData, ktorá nám spracuje objekt transactData
			//ktorý nesie so sebou práve náš hash z IPFS
			.addOperation(
				//Zakomentovaná časť je moja testovacia transakcia s lumenmi 
				/*
                                StellarSdk.Operation.payment({
                                destination: receiverPublicKey,
                                // The term native asset refers to lumens
                                asset: StellarSdk.Asset.native(),
                                // Specify 350.1234567 lumens. Lumens are divisible to seven digits past
                                // the decimal. They are represented in JS Stellar SDK in string format
                                // to avoid errors from the use of the JavaScript Number data structure.
                                amount: '0.00001',
                            }),
                            */
				StellarSdk.Operation.manageData(transactData)
			)
			//Pôvodný zámer bol ukladať IPFS hash do jednotlivých transakcií ako MEMO 
			//Nápad ale padol na tom že memo_text uloží string max o 28 znakoch
			//.addMemo(
			//StellarSdk.Memo.text(ipfsHash[0].path)
			//)
			.build();

			//Už nám stačí len podpísať našu transakciu a hotovo
			transaction.sign(sourceKeypair);

			//Klinet submitne našu operáciu 
			server.submitTransaction(transaction)
				.then(function(transactionResult) {
				console.log(JSON.stringify(transactionResult, null, 2));
				console.log('Success! View the transaction at: ');
				console.log(transactionResult._links.transaction.href);
			})
				.catch(function(err) {
				console.log('An error has occured:');
				console.log(err);
			});
		})
			.catch(function(e) {
			console.error(e);
		});

		//Overíme si či nám transakcia prešla
		this._confirmPayment(this.state.txMemo); 
	});

}

//To že sme uploadli dáta IPFS a získali hash ešte nieje záruka toho že dáta budú 
//pernamentne zapísané. Práve metódou .add() hovoríme našej nóde aby po čase tieto dáta 
//nevymazala ako odpad, ako prevenciu pred ukladaním zbytočných dát. Dáta uploadnute 
//z nášho servera na IPFS sú uložené zatiaľ na našej nóde, dokiaľ si ich nestiahne
//iná nóda a tým ich rozšíri. Inak po vypnutí servera alebo tejto našej nódy ostatné 
//nódy stratia prístup k dátam a nestihnú si ich stiahnúť k sebe.
_pinIpfsListing(ipfsHash) {
	ipfs.pin.add(ipfsHash)
}

_confirmPayment(ipfsHash) {
	server.transactions().forAccount(account.public).cursor('now').stream({
		onmessage: (transaction) => {
			if(transaction.memo == ipfsHash) {
				// Yes, it made it on the blockchain!
				transaction.operations().then((ops) => {
					var payment = ops._embedded.records[0];
					if(parseInt(parseFloat(payment.amount)) < 1) {
						console.error('Payment insufficient. Post not saved!');
					} else {
						this._pinIpfsListing(ipfsHash);
					}
				}).catch((error) => {
					error.target.close(); // Close stream
					console.error('Payment Error: ', error);
					alert('Error confirming payment. Try again later');
				});
			}
		},
		onerror: (error) => {
			error.target.close(); // Close stream
			console.error('Streaming Error: ', error);
		}
	});
}

//Keďže Stellar blockchain dátu sú transparentné spolu aj so všetkými účtami, 
//vieme si tieto dáta zobraziť pomocou jednoduchého zavolania API, kde nám stačí 
//len server url, naša adresa a key ktorým sme pomenovali dáta pri vyskladávaní
//transakcie pri submite dát.
_getData(act, key) {
	let xxx = this;
	var url = serverUrl + '/accounts/' + act.public + '/data/' + key;
	this._webget(url, function(json){
		if(json.status==404){ console.log('Error getting data for key '+key); }
		else {
			console.log(key+' : '+atob(json.value)); /* atob() base64 */
			xxx._getIPFS(atob(json.value));
		}
	});
}

// Simple XmlHttpRequest
_webget(url, callback) {
	var http = new XMLHttpRequest();
	http.open("GET", url, true);
	http.onreadystatechange = function() {
		if(http.readyState==4) {
			console.log('Response: '+http.responseText);
			var json = null;
			try {
				json = JSON.parse(http.responseText);
			} catch(ex) {
				console.log("JSON ERROR", ex.message);
				json = { error: true, message: ex.message };
			}
			callback(json);
		}
	};
	http.send();
}

//Ako vstupný parameter potrebujeme náš IPFS hash
_getIPFS(getIpfsListing) {
	let xxx = this;
	ipfs.files.get(getIpfsListing, function (err, files) {
		files.forEach((file) => {
			//Vrátené dáta si potrebujeme convertovať na string
			const post = file.content.toString('utf8');
			//Setneme si ich ako state, ktorý si už môžeme v kľude 
			//vypísať na front-end alebo spracovávať podľa potreby. 
			xxx.setState({post:post})
		})
	})
}