From 798cd619ed4fbff9474570746d25c04b50802fef Mon Sep 17 00:00:00 2001 From: jojobyte <184880+jojobyte@users.noreply.github.com> Date: Thu, 31 Oct 2024 17:24:50 -0600 Subject: [PATCH 01/13] refactor: :recycle: shift contact creation into model The internal state of several components was not correctly updating/resetting when some dialogs would close. this is a massive refactor to fix some of those underlying issues as well as move contact creation/updating out of the dialog so that we can programatically create a contact without user interaction, specifically useful for creating a crowdnode or maya contact. --- src/components/contacts-list.js | 8 +- src/components/crowdnode-card.js | 131 ++++--- src/components/transactions-list.js | 4 +- src/main.js | 526 ++++++++++++---------------- src/models/contacts.js | 283 +++++++++++++++ src/rigs/add-contact.js | 263 +------------- src/rigs/edit-contact.js | 5 +- src/rigs/phrase-generate.js | 3 +- src/rigs/phrase-import.js | 6 +- src/rigs/request-qr.js | 72 ++-- src/rigs/show-qr.js | 39 +++ src/rigs/wallet-backup.js | 2 +- src/rigs/wallet-decrypt.js | 17 +- src/rigs/wallet-encrypt.js | 8 + src/state/index.js | 52 ++- src/store/index.js | 100 ++++++ src/utils/constants.js | 17 +- src/utils/cryptic.js | 46 ++- src/utils/dash/local.js | 97 ++++- src/utils/dash/network.js | 210 ++++++++++- src/utils/db.js | 1 + src/utils/generic.js | 91 ++++- src/utils/retort.js | 15 +- types.js | 2 +- 24 files changed, 1297 insertions(+), 701 deletions(-) create mode 100644 src/models/contacts.js create mode 100644 src/rigs/show-qr.js create mode 100644 src/store/index.js 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..b04a355 100644 --- a/src/components/crowdnode-card.js +++ b/src/components/crowdnode-card.js @@ -29,6 +29,8 @@ 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, @@ -42,7 +44,7 @@ export const CrowdNodeCard = (() => { ...config, } - this.appElement = document.body + // this.appElement = document.body this.api = createSignal({}) @@ -60,57 +62,76 @@ export const CrowdNodeCard = (() => { ...config.elements, } + 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 = {} - this.markup.content = () => html` -
- - - CrowdNode - -
+ // 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`
- ${!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} -

- `} + 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, @@ -202,6 +237,8 @@ export const CrowdNodeCard = (() => { this.elements.form.name = this.slugs.form this.elements.form.innerHTML = this.markup.content() + console.log('CN Card render', this.stage, this.elements.form.innerHTML) + this.elements.form.addEventListener( 'submit', this.events.submit, @@ -209,7 +246,7 @@ export const CrowdNodeCard = (() => { console.log('CARD RENDER', this, cfg) - if (!this.state.rendered) { + if (!this.state.rendered && el) { el.insertAdjacentElement(position, this.elements.form) this.state.rendered = this.elements.form } diff --git a/src/components/transactions-list.js b/src/components/transactions-list.js index f45ce9e..5b4c722 100644 --- a/src/components/transactions-list.js +++ b/src/components/transactions-list.js @@ -98,7 +98,7 @@ const initialState = { let itemAmount = tx.receivedAmount || tx.valueOut || 0 - let itemCtrls = html`