Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
230 lines (204 sloc) 6.39 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SteemConnect demo with Vue.js</title>
<link rel="stylesheet" href="https://unpkg.com/primer-css@9.6.0/build/build.css" />
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/steemconnect@3.0.4"></script>
<!-- <script src="../dist/steemconnect.min.js"></script> -->
</head>
<body>
<div id="main" class="Box p-4 my-4" v-cloak>
<div class="bg-gray text-center mb-4 p-4 rounded">
<h3>SteemConnect demo with Vue.js</h3>
<p>
<a target="_blank" href="https://github.com/bonustrack/steemconnect.js/blob/master/docs/index.html">
See the code on GitHub
</a>
</p>
</div>
<p v-if="!isInit">Loading...</p>
<div v-else>
<div v-if="!username" class="text-center">
<input
type="text"
v-if="useSteemKeychain"
v-model="form.username"
class="form-control input-lg"
placeholder="Your username, ei: ned"
:disabled="isLoading"
/>
<button @click="login" class="btn btn-primary" :disabled="isLoading">
Log in
</button>
</div>
<div v-if="username">
<p class="mb-4">
You are logged as <b>{{username}}</b>
<a href="#" @click="logout">logout</a>
</p>
<div class="mb-4">
<h4 class="mb-2">Comment and vote</h4>
<p class="mb-2">
You are commenting on the post:
<b>
<a :href="`https://steemit.com/@${parentAuthor}/${parentPermlink}`" target="_blank">
@{{ parentAuthor }}/{{ parentPermlink }}
</a>
</b>
</p>
<textarea
v-model="form.comment"
placeholder="Write a comment"
class="form-control mb-2 btn-block text-left"
:disabled="isLoading"
></textarea>
<button @click="comment" class="btn btn-primary mb-2 mr-1" :disabled="isLoading">
Comment
</button>
<button @click="vote" class="btn mb-2" :disabled="isLoading">
Upvote
</button>
</div>
<div class="mb-4">
<h4 class="mb-2">Request transfer</h4>
<button @click="transfer" class="btn mb-2" :disabled="isLoading">
Transfer
</button>
</div>
<div v-if="txId" class="flash flash-success mb-2">
<p>
The transaction has been broadcasted, here is the tx id:
<a :href="'https://steemd.com/tx/' + txId" target="_blank">
<b>{{ txId }}</b>
</a>
</p>
</div>
<div v-if="error" class="flash flash-error mb-2">
<p>{{ error.error_description || error.error || error }}</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
const client = new steemconnect.Client({
app: 'staging.app',
callbackURL: 'https://demo.steemconnect.com'
});
window.onload = function() {
new Vue({
el: '#main',
data: {
username: null,
form: {
username: null,
comment: null,
},
isInit: false,
isLoading: false,
txId: null,
error: null,
useSteemKeychain: steemconnect.useSteemKeychain(),
parentAuthor: 'steemguest',
parentPermlink: '4lx1se-test-post',
},
mounted: function () {
let params = (new URL(location)).searchParams;
const token = params.get('access_token') || localStorage.getItem('sc_token');
if (token) {
const self = this;
this.isInit = false;
client.setAccessToken(token);
client.me(function(err, result) {
if (result) self.username = result.name;
if (err) self.error = err;
localStorage.setItem('sc_token', token);
self.isInit = true;
console.log(err, result);
});
} else {
this.isInit = true;
}
},
methods: {
login: function () {
const self = this;
this.isLoading = true;
const loginObj = {};
if (this.form.username) loginObj.username = this.form.username;
client.login(loginObj, function(err, token) {
console.log('Log in result', err, token);
if (err) return self.isLoading = false;
client.setAccessToken(token);
client.me(function(err, result) {
console.log('Verification result', err, result);
if (result) self.username = result.name;
if (err) self.error = err;
localStorage.setItem('sc_token', token);
self.isLoading = false;
});
});
},
comment: function () {
const self = this;
this.isLoading = true;
this.txId = null;
this.error = null;
const permlink = 'steemconnect-' + new Date().getTime();
const jsonMetadata = JSON.stringify({ tags: ['steemconnect'], app: 'steemconnect' });
client.comment(this.parentAuthor, this.parentPermlink, this.username, permlink, '', this.form.comment, jsonMetadata, function(err, result) {
console.log('Comment result', err, result);
self.isLoading = false;
if (result) self.txId = result.id || result.result.id;
if (err) self.error = err;
});
},
vote: function () {
const self = this;
this.isLoading = true;
this.txId = null;
this.error = null;
client.vote(this.username, this.parentAuthor, this.parentPermlink, 10000, function(err, result) {
console.log('Vote result', err, result);
self.isLoading = false;
if (result) self.txId = result.id || result.result.id;
if (err) self.error = err;
});
},
transfer: function () {
const self = this;
this.txId = null;
this.error = null;
const op = ['transfer', {
from: '__signer',
to: 'fabien',
amount: '0.001 STEEM',
memo: 'Transfer with SteemConnect demo'
}];
steemconnect.sendOperation(op, {}, function(err, result) {
console.log('Transfer result', err, result);
if (result) self.txId = result.id || result.result.id;
if (err) self.error = err;
});
},
logout: function () {
this.username = null;
localStorage.removeItem('sc_token');
}
}
});
};
</script>
<style type="text/css">
#main {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
[v-cloak] {
display: none;
}
</style>
</body>
</html>
You can’t perform that action at this time.