diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml index 0fa9455..d0534eb 100644 --- a/.github/workflows/static.yml +++ b/.github/workflows/static.yml @@ -2,7 +2,7 @@ name: Deploy static site on: push: - branches: ["master","feat/*","fix/*"] + branches: ["master","feat/*","refactor/*","fix/*"] workflow_dispatch: # Allow one concurrent deployment diff --git a/public/icons/CrowdNode.svg b/public/icons/CrowdNode.svg new file mode 100644 index 0000000..bcd0b25 --- /dev/null +++ b/public/icons/CrowdNode.svg @@ -0,0 +1 @@ + diff --git a/src/components/contacts-list.js b/src/components/contacts-list.js index 87a1bfc..5205392 100644 --- a/src/components/contacts-list.js +++ b/src/components/contacts-list.js @@ -10,6 +10,10 @@ import { filterUnpairedContacts, } from '../utils/dash/local.js' +import { + appState, +} from '../state/index.js' + let _handlers = [] const initialState = { @@ -21,7 +25,9 @@ const initialState = { showUnpaired: false, delay: 500, wallet: {}, - contacts: [], + contacts: [ + ...appState.contacts, + ], restate, render( renderState = {}, diff --git a/src/components/crowdnode-card.js b/src/components/crowdnode-card.js index b8df62a..6665abd 100644 --- a/src/components/crowdnode-card.js +++ b/src/components/crowdnode-card.js @@ -11,7 +11,9 @@ import { CrowdNode, } from '../imports.js' -export const CrowdNodeCard = (() => { +export function CrowdNodeCard( + config = {} +) { console.log('CrowdNodeCard', CrowdNode) const initCfg = { state: {}, @@ -29,198 +31,229 @@ export const CrowdNodeCard = (() => { depositAlt: `Deposit to Crowdnode`, signupTxt: 'Signup', signupAlt: `Signup for Crowdnode`, + fundTxt: 'Fund Wallet', + fundAlt: `Fund Wallet for Crowdnode`, placement: 'center', rendered: null, responsive: true, } - const cn = function Crowdnode( - config = {} - ) { - config = { - ...initCfg, - ...config, - } + config = { + ...initCfg, + ...config, + } - this.appElement = document.body + // this.appElement = document.body - this.api = createSignal({}) + this.api = createSignal({}) - this.state = { - ...initialState, - ...config.state, - } + this.state = { + ...initialState, + ...config.state, + } - this.slugs = { - form: this.state.name?.toLowerCase().replaceAll(' ', '_'), - ...config.slugs, - } + this.slugs = { + form: this.state.name?.toLowerCase().replaceAll(' ', '_'), + ...config.slugs, + } - this.elements = { - ...config.elements, - } + this.elements = { + ...config.elements, + } - this.markup = {} - this.markup.content = () => html` -
- - - CrowdNode - -
- -
- ${!this.api.value?.acceptedToS && html` - Start earning interest by staking your Dash at CrowdNode - `} - ${this.api.value?.acceptedToS && html` -

- Balance: Ð ${this.api.value?.balance} -

- `} - ${this.api.value?.acceptedToS && html` -

- Earned: Ð ${this.api.value?.earned} -

- `} -
- - - ` - this.markup = { - ...this.markup, - ...config.markup, - } + this.stage = [] + + Object.defineProperties(this, { + stage: { + get: () => [ + !this.api.value?.acceptedToS, // Stage 0 + this.api.value?.acceptedToS, // Stage 1 + this.api.value?.balance <= 0, // Stage 2 + this.api.value?.balance > 0, // Stage 3 + ], + }, + }); + + this.markup = {} + // Signup & Accept + this.markup.stageOne = () => this.stage[0] && !this.stage[1] && html` +
+ Start earning interest by staking your Dash at CrowdNode +
+ + + ` + this.markup.stageTwo = () => this.stage[1] && this.stage[2] && html` +
+ Finish funding your account to start earning interest +
+ + + ` + this.markup.stageThree = () => this.stage[1] && this.stage[3] && html` +
+

+ Balance: Ð ${this.api.value?.balance} +

+

+ Earned: Ð ${this.api.value?.earned} +

+
+ + + ` + this.markup.content = () => html` +
+ + + CrowdNode + +
+ + ${this.markup.stageOne()} + ${this.markup.stageTwo()} + ${this.markup.stageThree()} + ` + this.markup = { + ...this.markup, + ...config.markup, + } - this.events = { - submit: event => { - event.preventDefault() - event.stopPropagation() + this.events = { + submit: event => { + event.preventDefault() + event.stopPropagation() - this.elements.form?.removeEventListener('submit', this.events.submit) + this.elements.form?.removeEventListener('submit', this.events.submit) - let fde = formDataEntries(event) + let fde = formDataEntries(event) - console.log( - `${this.slugs.form} submit`, - {event, fde}, - ) - }, - ...config.events, - } + console.log( + `${this.slugs.form} submit`, + {event, fde}, + ) + }, + ...config.events, + } - const $d = document + const $d = document - const form = $d.createElement('form') + const form = $d.createElement('form') - this.elements.form = form + this.elements.form = form - form.name = `${this.slugs.form}` - form.classList.add('flex', 'col', 'card') - form.innerHTML = this.markup.content() + form.name = `${this.slugs.form}` + form.classList.add('flex', 'col', 'card') + form.innerHTML = this.markup.content() - this.api.on((apiChange) => { - console.log('CN Card API Change', apiChange) - this.render?.({}) - }) + this.api.on((apiChange) => { + console.log('CN Card API Change', apiChange) + this.render?.({}) + }) - /** - * Update the config of the CN Card - * @function - */ - this.updateConfig = (config = {}) => { - console.log('CN Card updateConfig TOP', config) + /** + * Update the config of the CN Card + * @function + */ + this.updateConfig = (config = {}) => { + console.log('CN Card updateConfig TOP', config) - for (let param in config) { - this[param] = { - ...this[param], - ...(config[param] || {}), - } + for (let param in config) { + this[param] = { + ...this[param], + ...(config[param] || {}), } - - console.log('CN Card updateConfig BOT', this) } - /** - * Trigger the rendering of the CN Card - * @function - */ - this.render = ({ - cfg = {}, - position = 'afterend', - el = this.appElement, - }) => { - console.log('crowdnode render', this) - - this.elements.form?.removeEventListener?.( - 'submit', - this.events.submit, - ) + console.log('CN Card updateConfig BOT', this) + } - if (el !== this.appElement) { - this.appElement = el - } + /** + * Trigger the rendering of the CN Card + * @function + */ + this.render = ({ + cfg = {}, + position = 'afterend', + el = this.appElement, + }) => { + console.log('crowdnode render', this) + + this.elements.form?.removeEventListener?.( + 'submit', + this.events.submit, + ) + + if (el !== this.appElement) { + this.appElement = el + } - this.updateConfig(cfg) + this.updateConfig(cfg) - this.elements.form.name = this.slugs.form - this.elements.form.innerHTML = this.markup.content() + this.elements.form.name = this.slugs.form + this.elements.form.innerHTML = this.markup.content() - this.elements.form.addEventListener( - 'submit', - this.events.submit, - ) + console.log('CN Card render', this.stage) - console.log('CARD RENDER', this, cfg) + this.elements.form.addEventListener( + 'submit', + this.events.submit, + ) - if (!this.state.rendered) { - el.insertAdjacentElement(position, this.elements.form) - this.state.rendered = this.elements.form - } + console.log('CARD RENDER', this, cfg) - this.events?.render?.(this) + if (!this.state.rendered && el) { + el.insertAdjacentElement(position, this.elements.form) + this.state.rendered = this.elements.form } - return this + this.events?.render?.(this) } - return cn -})(); + return this +} export default CrowdNodeCard diff --git a/src/components/transactions-list.js b/src/components/transactions-list.js index f45ce9e..4674be6 100644 --- a/src/components/transactions-list.js +++ b/src/components/transactions-list.js @@ -77,10 +77,11 @@ const initialState = { let txDate = new Date(tx.time * 1000) let user = cnt?.alias || cnt?.info?.preferred_username || tx?.alias || '' let name = cnt?.info?.name - let addr = tx?.vout?.[0]?.scriptPubKey?.addresses?.[0] + let addr = tx?.vout?.[0]?.scriptPubKey?.address || tx?.vout?.[0]?.scriptPubKey?.addresses?.[0] + let itemDir = `To ${name}` if (!['sent', 'outgoing'].includes(tx?.dir)) { - addr = tx?.vin?.[0]?.addr + addr = tx?.vin?.[0]?.address } if (tx.time) { time = timeago(Date.now() - txDate.getTime()) @@ -91,23 +92,31 @@ const initialState = { ) { name = `@${user}` } else if ( - !name && !user + !name && !user && addr ) { name = html`${addr.substring(0,3)}...${addr.substring(addr.length - 3)}` + } else if ( + !name && !user && !addr + ) { + itemDir = html`${'Unknown TX Type'}` } - let itemAmount = tx.receivedAmount || tx.valueOut || 0 + if (name) { + itemDir = `To ${name}` + } + let itemAmount = tx.sentAmount || tx.valueOut || 0 - let itemCtrls = html`