Add IPNS demo
This commit is contained in:
Anthony Laibe
Iuri Matias
parent
508b37163e
commit
d6849bf04f
|
|
@ -250,4 +250,4 @@ __embarkENS.isAvailable = function () {
|
|||
|
||||
__embarkENS.register = function () {
|
||||
return new Error("Not available with ENS");
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
/*global __embarkIPFS*/
|
||||
|
||||
|
||||
const NoConnectionError = 'No IPFS connection. Please ensure to call Embark.Names.setProvider()';
|
||||
const NotAvailableError = 'Not available with ipns';
|
||||
|
||||
__embarkIPFS.resolve = function (name, callback) {
|
||||
callback = callback || function () {};
|
||||
if (!this._ipfsConnection) {
|
||||
var connectionError = new Error('No IPFS connection. Please ensure to call Embark.Names.setProvider()');
|
||||
var connectionError = new Error(NoConnectionError);
|
||||
return callback(connectionError);
|
||||
}
|
||||
|
||||
|
|
@ -12,18 +16,28 @@ __embarkIPFS.resolve = function (name, callback) {
|
|||
callback(null, res.Path);
|
||||
})
|
||||
.catch(() => {
|
||||
return callback(name + " is not registered");
|
||||
callback(name + " is not registered");
|
||||
});
|
||||
};
|
||||
|
||||
__embarkIPFS.register = function(addr, options) {
|
||||
__embarkIPFS.register = function(addr, callback) {
|
||||
if (!this._ipfsConnection) {
|
||||
return new Error('No IPFS connection. Please ensure to call Embark.Names.setProvider()');
|
||||
return new Error(NoConnectionError);
|
||||
}
|
||||
|
||||
return this._ipfsConnection.name.publish("/ipfs/" + addr, options);
|
||||
this._ipfsConnection.name.publish("/ipfs/" + addr)
|
||||
.then(res => {
|
||||
callback(null, res.Name);
|
||||
})
|
||||
.catch(() => {
|
||||
callback(addr + " could not be registered");
|
||||
});
|
||||
};
|
||||
|
||||
__embarkIPFS.lookup = function () {
|
||||
return new Error("Not Implemented");
|
||||
return new Error(NotAvailableError);
|
||||
};
|
||||
|
||||
__embarkIPFS.registerSubDomain = function () {
|
||||
return new Error(NotAvailableError);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -162,13 +162,18 @@ class IPFS {
|
|||
}
|
||||
|
||||
isIpnsEnabledInTheConfig() {
|
||||
let {enabled, available_providers, provider} = this.namesystemConfig;
|
||||
return enabled && available_providers.indexOf('ipns') > 0 && provider === 'ipns';
|
||||
let {enabled, available_providers} = this.namesystemConfig;
|
||||
return enabled && available_providers.indexOf('ipns') > 0;
|
||||
}
|
||||
|
||||
setNamesystemProvider() {
|
||||
let code = `\nEmbarkJS.Names.setProvider('ipns', ${JSON.stringify(this.storageConfig.dappConnection[0] || {})});`;
|
||||
this.embark.addProviderInit('names', code, this.isIpnsEnabledInTheConfig.bind(this));
|
||||
|
||||
let shouldInit = (namesystemConfig) => {
|
||||
return (namesystemConfig.provider === 'ipns' && namesystemConfig.enabled === true);
|
||||
};
|
||||
|
||||
this.embark.addProviderInit('names', code, shouldInit);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
|
|
@ -21,10 +21,10 @@
|
|||
"url": "https://github.com/embark-framework/embark.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.0.0-beta.54",
|
||||
"@babel/plugin-transform-runtime": "^7.0.0-beta.54",
|
||||
"@babel/preset-env": "^7.0.0-beta.54",
|
||||
"@babel/preset-react": "^7.0.0-beta.54",
|
||||
"@babel/core": "7.0.0-beta.54",
|
||||
"@babel/plugin-transform-runtime": "7.0.0-beta.54",
|
||||
"@babel/preset-env": "7.0.0-beta.54",
|
||||
"@babel/preset-react": "7.0.0-beta.54",
|
||||
"@babel/runtime": "^7.0.0-beta.54",
|
||||
"ascii-table": "0.0.9",
|
||||
"async": "^2.0.1",
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
"decompress": "^4.2.0",
|
||||
"deep-equal": "^1.0.1",
|
||||
"ejs": "^2.5.8",
|
||||
"embarkjs": "^0.3.0",
|
||||
"embarkjs": "file:../EmbarkJS",
|
||||
"eth-ens-namehash": "^2.0.8",
|
||||
"eth-lib": "^0.2.8",
|
||||
"ethereumjs-wallet": "0.6.0",
|
||||
|
|
|
|||
|
|
@ -1,172 +1,241 @@
|
|||
import EmbarkJS from 'Embark/EmbarkJS';
|
||||
import React from 'react';
|
||||
import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
|
||||
|
||||
import {Alert, Form, FormGroup, FormControl, HelpBlock, Button} from 'react-bootstrap';
|
||||
|
||||
class Storage extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
textToSave: 'hello world!',
|
||||
generatedHash: '',
|
||||
loadText: '',
|
||||
storedText: '',
|
||||
fileToUpload: null,
|
||||
fileHash: '',
|
||||
imageToDownload: '',
|
||||
url: '',
|
||||
logs: [],
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
textToSave: 'hello world!',
|
||||
generatedHash: '',
|
||||
loadText: '',
|
||||
storedText: '',
|
||||
fileToUpload: null,
|
||||
fileHash: '',
|
||||
imageToDownload: '',
|
||||
url: '',
|
||||
logs: [],
|
||||
storageError: '',
|
||||
ipfsHash: '',
|
||||
ipnsResolveName: '',
|
||||
};
|
||||
}
|
||||
|
||||
handleChange(e, name) {
|
||||
this.state[name] = e.target.value;
|
||||
this.setState(this.state);
|
||||
}
|
||||
|
||||
handleFileUpload(e) {
|
||||
this.setState({fileToUpload: [e.target]});
|
||||
}
|
||||
|
||||
addToLog(txt) {
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
|
||||
setText(e) {
|
||||
e.preventDefault();
|
||||
|
||||
EmbarkJS.Storage.saveText(this.state.textToSave)
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
generatedHash: hash,
|
||||
loadText: hash,
|
||||
storageError: ''
|
||||
};
|
||||
}
|
||||
});
|
||||
this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err) {
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage saveText Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handleChange(e, name){
|
||||
this.state[name] = e.target.value;
|
||||
this.setState(this.state);
|
||||
}
|
||||
loadHash(e) {
|
||||
e.preventDefault();
|
||||
|
||||
handleFileUpload(e){
|
||||
this.setState({ fileToUpload: [e.target] });
|
||||
}
|
||||
EmbarkJS.Storage.get(this.state.loadText)
|
||||
.then((content) => {
|
||||
this.setState({storedText: content, storageError: ''});
|
||||
this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err) {
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage get Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addToLog(txt){
|
||||
this.state.logs.push(txt);
|
||||
this.setState({logs: this.state.logs});
|
||||
}
|
||||
uploadFile(e) {
|
||||
e.preventDefault();
|
||||
|
||||
setText(e){
|
||||
e.preventDefault();
|
||||
|
||||
EmbarkJS.Storage.saveText(this.state.textToSave)
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
generatedHash: hash,
|
||||
loadText: hash,
|
||||
storageError: ''
|
||||
});
|
||||
this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage saveText Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
fileHash: hash,
|
||||
imageToDownload: hash,
|
||||
storageError: ''
|
||||
});
|
||||
this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if (err) {
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage uploadFile Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
loadHash(e){
|
||||
e.preventDefault();
|
||||
loadFile(e) {
|
||||
let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
|
||||
this.setState({url: _url});
|
||||
this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
|
||||
}
|
||||
|
||||
EmbarkJS.Storage.get(this.state.loadText)
|
||||
.then((content) => {
|
||||
this.setState({storedText: content, storageError: ''});
|
||||
this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message})
|
||||
console.log("Storage get Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
ipnsRegister(e) {
|
||||
e.preventDefault();
|
||||
this.setState({ ipnsRegistering: true });
|
||||
EmbarkJS.Names.register(this.state.ipfsHash, (err, name) => {
|
||||
if (err) {
|
||||
console.log("Name Register Error => " + err.message);
|
||||
}
|
||||
|
||||
uploadFile(e){
|
||||
e.preventDefault();
|
||||
this.setState({
|
||||
ipnsResolveName: name,
|
||||
ipnsName: name,
|
||||
ipnsRegistering: false
|
||||
});
|
||||
this.addToLog("EmbarkJS.Names.register(this.state.ipfsHash).then(function(hash) { })");
|
||||
});
|
||||
}
|
||||
|
||||
EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
|
||||
.then((hash) => {
|
||||
this.setState({
|
||||
fileHash: hash,
|
||||
imageToDownload: hash,
|
||||
storageError: ''
|
||||
});
|
||||
this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
|
||||
})
|
||||
.catch((err) => {
|
||||
if(err){
|
||||
this.setState({storageError: err.message});
|
||||
console.log("Storage uploadFile Error => " + err.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
ipnsResolve(e) {
|
||||
e.preventDefault();
|
||||
this.setState({ ipnsResolving: true });
|
||||
EmbarkJS.Names.resolve(this.state.ipnsName, (err, path) => {
|
||||
if (err) {
|
||||
console.log("Name Resolve Error => " + err.message);
|
||||
}
|
||||
|
||||
loadFile(e){
|
||||
let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
|
||||
this.setState({url: _url})
|
||||
this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
|
||||
}
|
||||
this.setState({
|
||||
ipfsPath: path,
|
||||
ipnsResolving: false
|
||||
});
|
||||
this.addToLog("EmbarkJS.Names.resolve(this.state.ipnsName, function(err, path) { })");
|
||||
});
|
||||
}
|
||||
|
||||
render(){
|
||||
return <React.Fragment>
|
||||
{
|
||||
!this.props.enabled ?
|
||||
<React.Fragment>
|
||||
<Alert bsStyle="warning">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</Alert>
|
||||
</React.Fragment> : ''
|
||||
}
|
||||
{
|
||||
this.state.storageError !== '' ?
|
||||
<Alert bsStyle="danger">{this.state.storageError}</Alert>
|
||||
: ''
|
||||
}
|
||||
<h3>Save text to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.textToSave}
|
||||
onChange={e => this.handleChange(e, 'textToSave')} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
|
||||
<HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Load text from storage given an hash</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.loadText}
|
||||
onChange={e => this.handleChange(e, 'loadText')} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
|
||||
<HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
render() {
|
||||
return <React.Fragment>
|
||||
{
|
||||
!this.props.enabled ?
|
||||
<React.Fragment>
|
||||
<Alert bsStyle="warning">The node you are using does not support IPFS. Please ensure <a
|
||||
href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS
|
||||
node.</Alert>
|
||||
</React.Fragment> : ''
|
||||
}
|
||||
{
|
||||
this.state.storageError !== '' ?
|
||||
<Alert bsStyle="danger">{this.state.storageError}</Alert>
|
||||
: ''
|
||||
}
|
||||
<h3>Save text to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
defaultValue={this.state.textToSave}
|
||||
onChange={e => this.handleChange(e, 'textToSave')}/>
|
||||
<Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
|
||||
<HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Upload file to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="file"
|
||||
onChange={(e) => this.handleFileUpload(e)} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
|
||||
<HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Get file or image from storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.imageToDownload}
|
||||
onChange={e => this.handleChange(e, 'imageToDownload')} />
|
||||
<Button bsStyle="primary" onClick={(e) => this.loadFile(e)}>Download</Button>
|
||||
<HelpBlock>file available at: <span><a href={this.state.url} target="_blank">{this.state.url}</a></span></HelpBlock>
|
||||
<HelpBlock><img src={this.state.url} /></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
<h3>Load text from storage given an hash</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.loadText}
|
||||
onChange={e => this.handleChange(e, 'loadText')}/>
|
||||
<Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
|
||||
<HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div className="logs">
|
||||
<p>EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})</p>
|
||||
{
|
||||
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
}
|
||||
<h3>Upload file to storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="file"
|
||||
onChange={(e) => this.handleFileUpload(e)}/>
|
||||
<Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
|
||||
<HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Get file or image from storage</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.imageToDownload}
|
||||
onChange={e => this.handleChange(e, 'imageToDownload')}/>
|
||||
<Button bsStyle="primary" onClick={(e) => this.loadFile(e)}>Download</Button>
|
||||
<HelpBlock>file available at: <span><a href={this.state.url}
|
||||
target="_blank">{this.state.url}</a></span></HelpBlock>
|
||||
<HelpBlock><img src={this.state.url}/></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Register to IPNS</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.ipfsHash}
|
||||
onChange={e => this.handleChange(e, 'ipfsHash')}/>
|
||||
<Button bsStyle="primary" onClick={(e) => this.ipnsRegister(e)}>
|
||||
{this.state.ipnsRegistering ? 'Registering...' : 'Register' }
|
||||
</Button>
|
||||
<HelpBlock>It will take around 1 minute</HelpBlock>
|
||||
<HelpBlock>registered at: <span>{this.state.ipnsName}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
<h3>Resolve name</h3>
|
||||
<Form inline>
|
||||
<FormGroup>
|
||||
<FormControl
|
||||
type="text"
|
||||
value={this.state.ipnsResolveName}
|
||||
onChange={e => this.handleChange(e, 'ipnsResolveName')}/>
|
||||
<Button bsStyle="primary" onClick={(e) => this.ipnsResolve(e)}>
|
||||
{this.state.ipnsResolving ? 'Resolving...' : 'Resolve' }
|
||||
</Button>
|
||||
<HelpBlock>It will take around 1 minute</HelpBlock>
|
||||
<HelpBlock>IPFS path: <span>{this.state.ipfsPath}</span></HelpBlock>
|
||||
</FormGroup>
|
||||
</Form>
|
||||
|
||||
|
||||
<p>Javascript calls being made: </p>
|
||||
<div className="logs">
|
||||
<p>EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})</p>
|
||||
{
|
||||
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
|
||||
}
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
export default Storage;
|
||||
|
|
|
|||
|
|
@ -15,10 +15,13 @@ class App extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleSelect = this.handleSelect.bind(this);
|
||||
|
||||
this.state = {
|
||||
activeKey: 1,
|
||||
whisperEnabled: false,
|
||||
storageEnabled: false,
|
||||
ensEnabled: false
|
||||
ensEnabled: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -41,15 +44,15 @@ class App extends React.Component {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
// EmbarkJS.Names.setProvider('ipns',{server: 'localhost', port: '5001'});
|
||||
this.setState({
|
||||
storageEnabled: true,
|
||||
ensEnabled: EmbarkJS.Names.isAvailable()
|
||||
storageEnabled: EmbarkJS.Storage.isAvailable(),
|
||||
ensEnabled: EmbarkJS.Names.isAvailable(),
|
||||
ensNameSystems: EmbarkJS.Names.currentNameSystems
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
_renderStatus(title, available) {
|
||||
let className = available ? 'pull-right status-online' : 'pull-right status-offline';
|
||||
return <React.Fragment>
|
||||
|
|
@ -58,9 +61,18 @@ class App extends React.Component {
|
|||
</React.Fragment>;
|
||||
}
|
||||
|
||||
handleSelect(key) {
|
||||
if (key == 2) {
|
||||
EmbarkJS.Names.setProvider('ipns', {server: 'localhost', port: '5001'});
|
||||
} else if (key == 4) {
|
||||
EmbarkJS.Names.currentNameSystems = this.state.ensNameSystems
|
||||
}
|
||||
this.setState({ activeKey: key });
|
||||
}
|
||||
|
||||
render() {
|
||||
return (<div><h3>Embark - Usage Example</h3>
|
||||
<Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
|
||||
<Tabs onSelect={this.handleSelect} activeKey={this.state.activeKey} id="uncontrolled-tab-example">
|
||||
<Tab eventKey={1} title="Blockchain">
|
||||
<Blockchain/>
|
||||
</Tab>
|
||||
|
|
|
|||
Loading…
Reference in New Issue