From f8b65f5db21ca238b38163dc8dcff51e2722d851 Mon Sep 17 00:00:00 2001 From: jojobyte <184880+jojobyte@users.noreply.github.com> Date: Sun, 22 Oct 2023 07:52:52 -0600 Subject: [PATCH] feat(ui): :sparkles: Hook up functionality to `Add a New Contact` form --- src/components/contacts-list.js | 7 +- src/main.js | 98 ++++++++++- src/rigs/add-contact.js | 294 +++++++++++++++++++++++--------- src/rigs/profile.js | 24 +-- src/styles/dialog.css | 23 ++- src/styles/form.css | 44 +++-- 6 files changed, 362 insertions(+), 128 deletions(-) diff --git a/src/components/contacts-list.js b/src/components/contacts-list.js index d73be3b..993a2e8 100644 --- a/src/components/contacts-list.js +++ b/src/components/contacts-list.js @@ -40,7 +40,7 @@ const initialState = {
Contacts (${state.contacts.length})
+ Share this QR code with your new contact + + +
+
+ +
+ + +
+

Paste a Dash Address, Xprv/Xpub, or Link

+ +
+
+ +
+ +
+ +
+

Optional

+ +
+
+ +
+ +
- - - - - - -
-

Paste a Dash Address, Xpriv/Xpub, or Link

- -
-
- -
- -
- -
-

Optional

- -
-
- -
- -
- -
-

Alias for the contact (similar to a @username)

- -
-
+ + +

Alias for the contact (similar to a @username)

+ +
+ +
${state.footer(state)} - `, + `}, fields: html``, events: { + handleChange: state => async event => { + event.preventDefault() + if ( + event?.target?.validity?.patternMismatch && + event?.target?.type !== 'checkbox' + ) { + let label = event.target?.previousElementSibling?.textContent?.trim() + if (label) { + event.target.setCustomValidity(`Invalid ${label}`) + } + } else { + event.target.setCustomValidity('') + } + event.target.reportValidity() + + // console.log( + // '+contact handleChange', + // event, + // event.target?.name, + // event.target?.value + // ) + if (event.target?.name === 'contactAlias') { + let newContact = await store.contacts.setItem( + // state.wallet.id, + state.wallet.xkeyId, + { + ...state.contact, + profile: { + ...(state.contact.profile || {}), + preferred_username: event.target?.value, + }, + } + ) + // console.log( + // '+contact handleChange newContact', + // newContact + // ) + } + }, + handleClick: state => async event => { + if ( + event.target?.classList?.contains('copy') || + event.target?.classList?.contains('icon-copy') + ) { + event.preventDefault() + event.stopPropagation() + setClipboard(event) + } + }, + handleRender: state => { + console.log( + '+contact app state & wallets', + appState, + state, + ) + }, handleSubmit: state => async event => { event.preventDefault() event.stopPropagation() - // event.target.alias.setCustomValidity('') - // event.target.alias.reportValidity() + // event.target.contactAlias.setCustomValidity('') + // event.target.contactAlias.reportValidity() console.log('ADD CONTACT!', state, event) @@ -141,28 +235,76 @@ export let addContactRig = (function (globals) { ) let showScan = await scanContact.showModal() + let scannedUrl = new URL(showScan) + console.log( 'showScan', showScan, + scannedUrl, // scanContact, // scanContact?.element?.returnValue ) - let [, addr] = showScan?.split('dash://') - if (addr) { + let { searchParams, pathname } = scannedUrl + let addr = pathname.replaceAll('//', '') + let { + xpub, name, preferred_username + } = Object.fromEntries( + searchParams?.entries() + ) + let aOrX = addr || xpub + + if (aOrX) { + // event.target.addr.value = addr + event.target.contactAddr.value = aOrX + } + if (name) { + // event.target.addr.value = addr + event.target.contactName.value = name + } + if (preferred_username) { // event.target.addr.value = addr - event.target.addr.value = showScan + event.target.contactAlias.value = preferred_username } + return; } - if (!String(fde.alias)?.trim()) { - event.target.alias.setCustomValidity( + if (!String(fde.contactAddr)?.trim()) { + event.target.contactAddr.setCustomValidity( + 'An address, Xprv/Xpub or URI is required' + ) + event.target.reportValidity() + return; + } + + if (!String(fde.contactAlias)?.trim()) { + event.target.contactAlias.setCustomValidity( 'An alias is required' ) event.target.reportValidity() return; } + let storedContact = await store.contacts.getItem( + state.wallet.xkeyId, + ) + + let pairedContact = await store.contacts.setItem( + // state.wallet.id, + state.wallet.xkeyId, + { + ...storedContact, + profile: { + ...(storedContact.profile || {}), + name: event.target.contactName.value, + preferred_username: event.target.contactAlias.value, + }, + uri: event.target.contactAddr.value, + } + ) + + console.log('pairedContact', pairedContact) + // let initialized // wallet = state.wallet diff --git a/src/rigs/profile.js b/src/rigs/profile.js index 7df4a5c..63fd30e 100644 --- a/src/rigs/profile.js +++ b/src/rigs/profile.js @@ -12,27 +12,6 @@ export let shareProfileRig = (function (globals) { setupDialog, mainApp, wallet, wallets, appState, bodyNav, dashBalance, onboard, } = globals; - // store.addresses.key(1).then(function(keyName) { - // // Name of the key. - // console.log('first key', keyName); - // let dashSvg = qrSvg( - // `dash://${keyName}`, - // { - // background: '#fff0', - // color: 'currentColor', - // indent: 1, - // padding: 1, - // size: 'mini', - // container: 'svg-viewbox', - // join: true, - // } - // ) - // // console.log('first key qr code', dashSvg); - // mainApp.insertAdjacentHTML('beforeend', dashSvg) - // }).catch(function(err) { - // // This code runs if there were any errors - // console.error('failed to load first key', err); - // }); let shareProfile = setupDialog( mainApp, @@ -46,6 +25,7 @@ export let shareProfileRig = (function (globals) { submitAlt: 'QR Code', cancelTxt: 'Cancel', cancelAlt: `Cancel`, + placement: 'wide', closeTxt: html` `, @@ -66,7 +46,7 @@ export let shareProfileRig = (function (globals) { content: state => html` ${state.header(state)} -
+