Skip to content

Commit

Permalink
fix(ui): 🚸 clear selected file (keystore/backup) closes #36
Browse files Browse the repository at this point in the history
  • Loading branch information
@jojobyte
jojobyte committed Feb 14, 2024
1 parent 4cc1303 commit 46ce8cc
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 71 deletions.
5 changes: 4 additions & 1 deletion src/components/dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,10 @@ const initialState = {
},
handleReset: state => event => {
event.preventDefault()
state.elements.form?.removeEventListener('close', state.events.handleReset)
state.elements.form?.removeEventListener(
'close',
state.events.handleReset
)
// console.log(
// 'handleReset',
// [event.target],
Expand Down
6 changes: 3 additions & 3 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -618,14 +618,14 @@ async function main() {
wallet = await deriveWalletData(appState.phrase)
}

batchGenAcctsAddrs(wallet)
// .then(data => console.warn('batchGenAcctsAddrs', { data }))

// temp fix, should be handled already
if (appState.phrase && !wallet) {
wallet = await deriveWalletData(appState.phrase)
}

batchGenAcctsAddrs(wallet)
// .then(data => console.warn('batchGenAcctsAddrs', { data }))

bodyNav.render({
data: {
alias: appState.selectedAlias
Expand Down
125 changes: 62 additions & 63 deletions src/rigs/phrase-import.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,21 @@ export let phraseImportRig = (async function (globals) {
}
}

function clearFile(state) {
let updrField = state.elements.form?.querySelector(
'.updrop input[type="file"]'
)
updrField.value = null
state.keystoreData = null
state.walletImportData = null
state.keystoreFile = ''
state.render(state)
}

function updropContainer(state) {
return state.keystoreFile ? `div` : `label`
}

let phraseImport = await setupDialog(
mainApp,
{
Expand All @@ -47,6 +62,7 @@ export let phraseImportRig = (async function (globals) {
submitAlt: 'Import Existing Wallet',
cancelTxt: 'Cancel',
cancelAlt: `Cancel Wallet Import`,
clearAlt: `Clear selected file`,
closeTxt: html`<svg class="x" width="26" height="26" viewBox="0 0 26 26">
<use xlink:href="#icon-x"></use>
</svg>`,
Expand All @@ -68,7 +84,7 @@ export let phraseImportRig = (async function (globals) {
if (state.keystoreFile) {
return ''
}
// <span>Drag and drop a Keystore file <br/> or Incubator Wallet backup file <br/> or click to <strong><u>upload</u></strong></span>

return html`
<svg class="upload" width="40" height="40" viewBox="0 0 40 40">
<use xlink:href="#icon-upload"></use>
Expand All @@ -86,25 +102,43 @@ export let phraseImportRig = (async function (globals) {
if (!state.keystoreFile) {
return ''
}

return html`
${state.keystoreFile}
<button
class="link clear"
type="submit"
name="intent"
value="clear"
title="${state.clearAlt}"
>
<svg class="x" width="40" height="40" viewBox="0 0 26 26">
<use xlink:href="#icon-x"></use>
</svg>
</button>
<label for="keystore">
${state.keystoreFile}
</label>
`
},
updrop: state => {
let el = updropContainer(state)

return html`
<label for="keystore">
Keystore or Backup
</label>
<${el} for="keystore" class="updrop">
${state.upload(state)}
${state.showFileName(state)}
<input
type="file"
id="keystore"
name="ksfile"
enctype="multipart/form-data"
/>
</${el}>
`
},
updrop: state => html`
<label for="keystore">
Keystore or Backup
</label>
<label for="keystore" class="updrop">
<input
type="file"
id="keystore"
name="ksfile"
enctype="multipart/form-data"
/>
${state.showFileName(state)}
${state.upload(state)}
</label>
`,
content: state => html`
${state.header(state)}
Expand Down Expand Up @@ -198,9 +232,7 @@ export let phraseImportRig = (async function (globals) {
if (state.elements.dialog.returnValue !== 'cancel') {
resolve(state.elements.dialog.returnValue)
} else {
state.keystoreFile = ''
state.keystoreData = null
state.render(state)
clearFile(state)
resolve('cancel')
}
// console.log(
Expand All @@ -211,12 +243,6 @@ export let phraseImportRig = (async function (globals) {
setTimeout(t => {
state.modal.rendered[state.slugs.dialog] = null
event?.target?.remove()
// console.log(
// 'DIALOG handleClose setTimeout',
// state.delay,
// // modal.rendered[state.slugs.dialog],
// state.modal.rendered,
// )
}, state.delay)
},
handleDragOver: state => async event => {
Expand All @@ -227,14 +253,6 @@ export let phraseImportRig = (async function (globals) {
event.target.classList.contains('updrop') &&
!event.target.classList.contains('disabled')
) {
console.log(
'PHRASE IMPORT DRAG OVER',
// state,
event.target,
// event?.dataTransfer?.items,
// event.target.files,
)

event.target.classList.add('drag-over')
}
},
Expand All @@ -246,14 +264,6 @@ export let phraseImportRig = (async function (globals) {
event.target.classList.contains('updrop') &&
!event.target.classList.contains('disabled')
) {
console.log(
'PHRASE IMPORT DRAG LEAVE',
// state,
event.target,
// event?.dataTransfer?.items,
// event.target.files,
)

event.target.classList.remove('drag-over')
}
},
Expand All @@ -265,14 +275,6 @@ export let phraseImportRig = (async function (globals) {
event.target.classList.contains('updrop') &&
!event.target.classList.contains('disabled')
) {
console.log(
'PHRASE IMPORT DRAG END',
// state,
event.target,
// event?.dataTransfer?.items,
// event.target.files,
)

event.target.classList.add('dropped')
}
},
Expand All @@ -284,18 +286,10 @@ export let phraseImportRig = (async function (globals) {
event.target.classList.contains('updrop') &&
!event.target.classList.contains('disabled')
) {
console.log(
'PHRASE IMPORT DROP',
state, event.target,
event?.dataTransfer?.items,
event.target.files
)

if (event.dataTransfer.items) {
[...event.dataTransfer.items].forEach((item, i) => {
if (item.kind === "file") {
const file = item.getAsFile();
// console.log(`ITEMS file[${i}].name = ${file.name}`, file);
readFile(
file,
processFile(state, event),
Expand Down Expand Up @@ -343,13 +337,13 @@ export let phraseImportRig = (async function (globals) {
// console.log('phrase import handleInput', testPhrase)

if (testPhrase) {
let tmpWallet = await verifyPhrase(event.target.value)

state.validPhrase = testPhrase && tmpWallet
let tmpPhrase = await verifyPhrase(
event.target.value
)

// console.log('phrase import handleInput wallet', tmpWallet)
state.validPhrase = testPhrase && tmpPhrase

if (tmpWallet) {
if (tmpPhrase) {
updr?.classList.add('disabled')
updrField.disabled = true
} else {
Expand All @@ -371,6 +365,11 @@ export let phraseImportRig = (async function (globals) {

let fde = formDataEntries(event)

if (fde.intent === 'clear') {
clearFile(state)
return;
}

if (state.walletImportData) {
await appDialogs.walletDecrypt.render({
walletImportData: state.walletImportData
Expand Down
24 changes: 20 additions & 4 deletions src/styles/form.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -408,9 +408,12 @@ button:not(:disabled):focus-visible {
/* outline: 4px auto -webkit-focus-ring-color; */
/* outline: 0 auto -webkit-focus-ring-color; */
}
button.clear:not(:disabled):focus,
button.clear:not(:disabled):hover,
button[type=reset]:not(:disabled):focus,
button[type=reset]:not(:disabled):hover {
/* background-color: var(--c); */
background-color: transparent;
color: var(--dang);
border-color: var(--dang);
}
Expand Down Expand Up @@ -637,6 +640,10 @@ form[name="network"] {
margin-bottom: 2.5rem;
cursor: pointer;
text-transform: none;

margin-bottom: 0;
min-height: 60px;
height: 6rem;
}
.updrop.drag-over {
border-style: solid;
Expand All @@ -660,20 +667,29 @@ form[name="network"] {
.updrop * {
pointer-events: none;
}
.updrop svg {
.updrop svg.upload {
color: var(--dark-500);
}
.updrop button.link {
flex: initial !important;
align-self: stretch;
}
.updrop svg.x {
pointer-events: auto;
}
.updrop span {
max-width: 12rem;
text-align: left;
}
.updrop span button {
padding: 0;
}
.updrop[for="keystore"] {
margin-bottom: 0;
.updrop label[for="keystore"] {
/* margin-bottom: 0;
min-height: 60px;
height: 6rem;
height: 6rem; */
align-self: stretch;
text-transform: none;
}
.updrop[for="keystore"] span {
max-width: inherit;
Expand Down

0 comments on commit 46ce8cc

Please sign in to comment.