Commit 7abdb08c authored by Bitcoin Please's avatar Bitcoin Please

Added new Flipstarter pledge manager.

parent 766e3213
......@@ -43,7 +43,7 @@
</li>
<li :class="{active: tab === 'backing'}">
<router-link :to="backing">Backed Causes</router-link>
<router-link :to="backing">Backed Campaigns</router-link>
</li>
</ul>
</nav>
......
<template>
<main>
<!-- content goes here -->
<i class="fa fa-question-circle-o" aria-hidden="true" @click="getHelp('campaigns/payment')"></i>
</main>
</template>
......
......@@ -133,7 +133,7 @@
<li>
<router-link :to="'/@' + getNickname + '/backing'">
Backed Causes
Backed Campaigns
</router-link>
</li>
......
......@@ -241,8 +241,10 @@ export default {
await Swal.fire({
title: 'Sign In to Causes Cash',
html:
`<input type="email" id="swal-email" class="swal2-input" placeholder="Enter your email">` +
`<input type="password" id="swal-password" class="swal2-input" placeholder="Enter your password">`,
`<span class="text-danger">NO REGISTRATION REQUIRED</span>` +
`<input type="email" id="swal-email" class="swal2-input" placeholder="Enter ANY email address">` +
`<input type="password" id="swal-password" class="swal2-input" placeholder="Enter ANY strong password">` +
`<small class="text-secondary">( account data is managed locally by your browser )</small>`,
focusConfirm: false,
preConfirm: async () => {
const email = document.getElementById('swal-email').value
......@@ -270,7 +272,7 @@ export default {
this.destroyProfile()
/* Show notification. */
this.toast(['Success!', `You've been signed out successfully.`, 'success'])
this.toast(['Success!', `You've been signed out successfully`, 'success'])
},
},
created: function () {
......
......@@ -58,6 +58,10 @@ const updateMeta = async ({ commit, getters, rootGetters }, _meta) => {
/* Set api target. */
const target = `${API_PROVIDER}/profiles`
// FIXME: Consider complications when updating a profile that is OLDER
// than the most recent cloud version (as in running the application
// for multiple devices).
/* Call api. */
return await superagent
.put(target)
......
......@@ -10,9 +10,9 @@
<div class="col-lg-9">
<div class="account-content account-table">
<h3 class="account-title">Backed Causes</h3>
<h3 class="account-title">Backed Campaigns</h3>
<div v-if="backing" class="backing">
<div v-if="backingList" class="backing">
<table>
<thead>
<tr>
......@@ -57,68 +57,32 @@
</div>
<div v-else class="backing">
<div v-if="accepting">
<div class="row">
<div class="col">
<h3>Pledge details</h3>
<small>
Paste the details from your campaign below.
</small>
<textarea
class="pledge-details mt-3"
v-model="pledgeDetails"
placeholder="Paste your pledge details here">
</textarea>
</div>
<div class="col">
<h3>Pledge authorization</h3>
<small>
Paste your authorization message into your campaign.
</small>
<textarea
class="pledge-auth mt-3"
v-model="pledgeAuth"
placeholder="Waiting for confirmation...">
</textarea>
</div>
</div>
<button
v-if="userPledge"
class="btn-primary mt-3"
@click="confirmFlipstarter"
:disabled="pledgeAuth"
>
Confirm Flipstarter Pledge
</button>
<div v-if="userPledge" class="row mt-3 parsedJson">
<pre>{{userPledge}}</pre>
</div>
</div>
<div v-else>
<div>
You haven't backed any campaigns
</div>
<a
href="javascript://"
class="btn-primary mt-3"
@click="addFlipstarter"
>
Add Flipstarter Campaign
</a>
<div>
You haven't backed any campaigns
</div>
</div>
<div class="backing">
<a
v-if="!showFlipstarter"
href="javascript://"
class="btn-primary mt-3"
@click="showFlipstarter = !showFlipstarter"
>
Add Flipstarter Pledge
</a>
<a
v-if="showFlipstarter"
href="javascript://"
class="btn-danger mt-3"
@click="showFlipstarter = !showFlipstarter"
>
Cancel Flipstarter Pledge
</a>
</div>
<Flipstarter v-if="showFlipstarter" />
</div>
</div>
</div>
......@@ -138,12 +102,15 @@ import moment from 'moment'
import Nito from 'nitojs'
/* Import components. */
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer'
import Header from '@/components/Header'
/* Import (account) components. */
import Banner from '@/components/Account/Banner.vue'
import Sidenav from '@/components/Account/Sidenav.vue'
import Banner from '@/components/Account/Banner'
import Sidenav from '@/components/Account/Sidenav'
/* Import (local) components. */
import Flipstarter from './Backing/Flipstarter'
const DUST = 546
const FEE = 270
......@@ -155,18 +122,15 @@ export default {
Banner,
Sidenav,
Flipstarter,
},
data: () => {
return {
ownerSlug: null,
backing: null,
accepting: null,
backingList: null,
showFlipstarter: null,
pledgeDetails: null,
pledgeAuth: null,
campaignAddress: null,
campaignValue: null,
}
},
computed: {
......@@ -184,36 +148,6 @@ export default {
'getIndices',
]),
/**
* Parsed Details
*/
userPledge() {
if (!this.pledgeDetails) {
return null
}
/* Decode details to base64. */
const b64 = Buffer.from(this.pledgeDetails, 'base64')
/* Initialize counter. */
let count = 0
/* Initialize buffer. */
const buf = Buffer.alloc(b64.length / 2)
/* Convert 16-bit to 8-bit. */
for (let i = 0; i < b64.length; i += 2) {
buf[count++] = b64[i]
}
/* Parse json. */
const json = JSON.parse(buf.toString())
// console.log('\nFLIPSTARTER PLUGIN DETAILS (json):', json)
/* Return json. */
return json
},
},
methods: {
...mapActions('profile', [
......@@ -228,16 +162,6 @@ export default {
'updateCoins',
]),
/**
* Accept Flipstarter (Pledge)
*
* Allows a user to accept a non-platform pledge,
* eg. from a self-hosted Flipstarter (Assurance) campaign.
*/
addFlipstarter() {
this.accepting = !this.accepting
},
/**
* Parse Key Hash Unlock Script
*/
......@@ -720,38 +644,13 @@ export default {
this.toast(['Done!', message, 'success'])
},
/**
* Cancel Pledge
*/
cancelPledge(_coin) {
console.log('TODO', _coin)
}
},
created: async function () {
/* Set owner slug. */
this.ownerSlug = this.$route.params.pathMatch.toLowerCase()
/* Initialize accepting flag. */
this.accepting = false
const meta = await this.getMeta
if (meta.message === 'unable to decrypt data') {
/* Set message. */
// const message = `Your coin has been locked!`
const message = `Your metadata could NOT be decrypted from the cloud`
/* Display notification. */
this.toast(['Oops!', message, 'error'])
}
console.log('BACKING (meta):', meta);
// this.getIndices
// const results = await this.updateMeta({
// hi: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
// })
// console.log('UPDATE META RESULTS:', results);
/* Initialize show Flipstarter flag. */
this.showFlipstarter = false
},
}
</script>
......@@ -760,15 +659,4 @@ export default {
.backing {
margin: 20px 40px;
}
.pledge-details, .pledge-auth {
width: 300px;
height: 100px;
padding: 15px;
}
.parsedJson {
padding: 5px;
border-top: 3pt solid rgba(90, 90, 90, 0.5);
}
</style>
<template>
<main class="backing">
<div class="row">
<div class="col">
<h3>STEP 1: Copy your pledge details</h3>
<div class="col-9">
<span>
On the Flipstarter campaign's page, find the box that says, <strong class="text-primary">"1. Copy details"</strong> and click the green <strong class="text-primary">"COPY DETAILS"</strong> button, which will:
</span>
<ol class="ml-5">
<li>
lock-in your pledge details
</li>
<li>
package your pledge details
</li>
<li>
copy pledge package to your clipboard
</li>
</ol>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col">
<h3>STEP 2: Paste your pledge details</h3>
<div class="col-9">
<span>
Paste the pledge details you copied from the campaign page into the box below.
</span>
</div>
<textarea
class="pledge-details mt-3"
v-model="pledgeDetails"
placeholder="Paste your pledge details here">
</textarea>
<!-- <div v-if="userPledge" class="row mt-3 parsedJson"> -->
<div v-if="userPledge" class="row mt-3">
<h3>Campaign details</h3>
<div class="row">
<div class="col-5 text-right">
Fulfillment address
</div>
<div class="col-7">
<a :href="campaignAddressLink" target="_blank">
<strong>{{campaignAddress}}</strong>
</a>
</div>
<div class="col-5 text-right">
Requested amount
</div>
<div class="col-7" v-html="campaignValue" />
<div class="col-5 text-right">
Expiration date
</div>
<div class="col-7" v-html="expirationDate" />
</div>
<h3>Pledge details</h3>
<div class="row">
<div class="col-5 text-right">
Pledge alias
</div>
<div class="col-7">
{{userPledge.data.alias}}
</div>
<div class="col-5 text-right">
Pledge comment
</div>
<div class="col-7">
{{userPledge.data.comment}}
</div>
<div class="col-5 text-right">
Donation amount
</div>
<div class="col-7" v-html="donationAmount" />
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-12">
<h3>STEP 3: Confirm your pledged coins</h3>
<div class="col-9">
Please choose from one or more options to fund your pledge:
<ol class="ml-5">
<li>
Pledge directly from your Causes wallet.
<i class="fa fa-question-circle-o" aria-hidden="true" @click="getHelp('community/intro')"></i>
</li>
<li>
Pledge using a QR Code Payment Request.
<i class="fa fa-question-circle-o" aria-hidden="true" @click="getHelp('community/payment')"></i>
</li>
</ol>
</div>
</div>
<div class="col-8">
<h3>QR COde Payment Request</h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="col-4">
<h3>Wallet balance: $0.00</h3>
<input
class="mt-3 mb-2"
type="text"
id="title"
placeholder="How much from your wallet."
v-model="walletContribution"
@keyup="walletValidation($event)"
/>
<a
href="javascript://"
class="btn-primary btn-block mt-3"
@click="applyBalance"
>
Apply to pledge
</a>
</div>
</div>
<hr />
<div class="row">
<div class="col">
<h3>STEP 4: Submit pledge authorization</h3>
<div class="col-9">
<span>
On the Flipstarter campaign's page, find the box that says, <strong class="text-primary">"3. Paste pledge"</strong>, then paste in the clipboard you copied above, finally click the green <strong class="text-primary">"SUBMIT PLEDGE"</strong> button, which will:
</span>
<ol class="ml-5">
<li>
submit your pledge to the campaign's server
</li>
<li>
add your pledge to the campaign's page
</li>
</ol>
</div>
</div>
</div>
<!-- <button
v-if="userPledge"
class="btn-primary mt-3"
@click="confirmFlipstarter"
:disabled="pledgeAuth"
>
Confirm Flipstarter Pledge
</button> -->
</main>
</template>
<script>
/* Initialize vuex. */
import { mapActions, mapGetters } from 'vuex'
/* Import modules. */
import moment from 'moment'
import Nito from 'nitojs'
import numeral from 'numeral'
export default {
components: {
//
},
data: () => {
return {
usd: null,
walletContribution: null,
pledgeDetails: null,
pledgeAuth: null,
}
},
computed: {
...mapGetters([
'getHelp',
]),
...mapGetters('wallet', [
'getAccounts',
'getAddress',
'getBalance',
'getCoins',
'getDerivationPath',
'getHDNode',
'getIndices',
]),
/**
* User Pledge
*/
userPledge() {
if (!this.pledgeDetails) {
return null
}
/* Decode details to base64. */
const b64 = Buffer.from(this.pledgeDetails, 'base64')
/* Initialize counter. */
let count = 0
/* Initialize buffer. */
const buf = Buffer.alloc(b64.length / 2)
/* Convert from 16-bit to 8-bit. */
// NOTE: The Flipstarter plugin encodes with 16-bit JavaScript.
for (let i = 0; i < b64.length; i += 2) {
buf[count++] = b64[i]
}
/* Parse json. */
const json = JSON.parse(buf.toString())
/* Return json. */
return json
},
/**
* Campaign Address
*/
campaignAddress() {
/* Validate fulfillment address. */
if (this.userPledge && this.userPledge.outputs[0].address) {
/* Initialize address. */
let address = this.userPledge.outputs[0].address
/* Strip prefix. */
if (address.indexOf('bitcoincash:') !== -1) {
address = address.slice(12)
}
/* Shorten. */
address = `${address.slice(0, 8)} ... ${address.slice(-8)}`
/* Return fulfillment address. */
return address
} else {
return null
}
},
/**
* Campaign AddressLink
*/
campaignAddressLink() {
/* Validate fulfillment address. */
if (this.userPledge && this.userPledge.outputs[0].address) {
return 'https://explorer.bitcoin.com/bch/address/' + this.userPledge.outputs[0].address
} else {
return null
}
},
/**
* Campaign Value
*/
campaignValue() {
if (this.userPledge && this.userPledge.outputs[0].value && this.usd) {
const satoshis = numeral(this.userPledge.outputs[0].value / 100000000).format('0,0.00[000000]')
const fiat = numeral((
this.userPledge.outputs[0].value / 100000000.0) * this.usd)
.format('$0.00')
return `${satoshis} <small>BCH</small> <span class="text-danger">|</span> ${fiat} <small>USD</small>`
} else {