Bug fix and UX improvements
This commit is contained in:
sairaj mote
parent
695ec0ddb4
commit
e80acce0e8
24
css/main.css
24
css/main.css
@ -383,10 +383,14 @@ ol li::before {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
.align-content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
@ -1115,6 +1119,24 @@ ol li::before {
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
}
|
||||
|
||||
.input-action-wrapper {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-items: start;
|
||||
}
|
||||
.input-action-wrapper sm-input {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
min-width: 20rem;
|
||||
}
|
||||
.input-action-wrapper button {
|
||||
min-width: 7rem;
|
||||
flex: 1;
|
||||
min-height: 3.15rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
#main_navbar.hide-away {
|
||||
bottom: 0;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -349,10 +349,13 @@ ol {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
.align-content-start {
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.align-items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
@ -1025,6 +1028,24 @@ ol {
|
||||
border-radius: 0.5rem;
|
||||
border: solid thin rgba(var(--text-color), 0.3);
|
||||
}
|
||||
|
||||
.input-action-wrapper {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-items: start;
|
||||
sm-input {
|
||||
width: auto;
|
||||
flex: 1;
|
||||
min-width: 20rem;
|
||||
}
|
||||
button {
|
||||
min-width: 7rem;
|
||||
flex: 1;
|
||||
min-height: 3.15rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 40rem) {
|
||||
#main_navbar {
|
||||
&.hide-away {
|
||||
|
||||
155
index.html
155
index.html
@ -190,31 +190,33 @@
|
||||
<p>Convert private key of FLO blockchain to corresponding BTC address & private key
|
||||
</p>
|
||||
</div>
|
||||
<sm-form id="convert_flo_private_key_form" class="flex align-center flex-wrap">
|
||||
<sm-input type="password" id="convert_flo_private_key" class="password-field"
|
||||
placeholder="FLO private key" required animate>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Hide password</title>
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
|
||||
fill="none" />
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
|
||||
</svg>
|
||||
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Show password</title>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
|
||||
</svg>
|
||||
</label>
|
||||
</sm-input>
|
||||
<button type="submit" onclick="convertFloPrivateKey()"
|
||||
class="button button--primary cta">Convert</button>
|
||||
<sm-form id="convert_flo_private_key_form">
|
||||
<div class="input-action-wrapper">
|
||||
<sm-input type="password" id="convert_flo_private_key" class="password-field"
|
||||
placeholder="FLO private key" data-private-key required animate>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Hide password</title>
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
|
||||
fill="none" />
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
|
||||
</svg>
|
||||
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Show password</title>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
|
||||
</svg>
|
||||
</label>
|
||||
</sm-input>
|
||||
<button type="submit" onclick="convertFloPrivateKey()"
|
||||
class="button button--primary cta">Convert</button>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div class="grid gap-0-5">
|
||||
<sm-input type="password" id="btc_private" class="password-field"
|
||||
@ -248,13 +250,16 @@
|
||||
<h3>Address converter</h3>
|
||||
<p class="panel-footer">Convert FLO address to BTC address</p>
|
||||
</div>
|
||||
<sm-form id="convert_flo_address_form" class="flex">
|
||||
<sm-input id="convert_flo_input" placeholder="FLO Address" data-flo-address
|
||||
error-text="Invalid FLO address" animate required></sm-input>
|
||||
<button id="convert_to_btc" class="button--primary justify-self-center cta"
|
||||
type="submit">
|
||||
Convert
|
||||
</button>
|
||||
<sm-form id="convert_flo_address_form" class="flex align-items-start">
|
||||
<div class="input-action-wrapper">
|
||||
<sm-input id="convert_flo_input" placeholder="FLO Address" data-flo-address
|
||||
error-text="Invalid FLO address. It usually starts with 'F'" animate
|
||||
required></sm-input>
|
||||
<button id="convert_to_btc" class="button--primary justify-self-center cta"
|
||||
type="submit">
|
||||
Convert
|
||||
</button>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div id="flo_address_converter_result"></div>
|
||||
</div>
|
||||
@ -267,31 +272,33 @@
|
||||
key
|
||||
</p>
|
||||
</div>
|
||||
<sm-form id="convert_btc_private_key_form" class="flex flex-wrap align-center">
|
||||
<sm-input type="password" id="convert_btc_private_key" class="password-field"
|
||||
placeholder="BTC private key" required animate>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Hide password</title>
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
|
||||
fill="none" />
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
|
||||
</svg>
|
||||
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Show password</title>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
|
||||
</svg>
|
||||
</label>
|
||||
</sm-input>
|
||||
<button type="submit" onclick="convertBtcPrivateKey()"
|
||||
class="button button--primary cta">Convert</button>
|
||||
<sm-form id="convert_btc_private_key_form">
|
||||
<div class="input-action-wrapper">
|
||||
<sm-input type="password" id="convert_btc_private_key" class="password-field"
|
||||
placeholder="BTC private key" data-private-key required animate>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Hide password</title>
|
||||
<path d="M0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0zm0 0h24v24H0z"
|
||||
fill="none" />
|
||||
<path
|
||||
d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" />
|
||||
</svg>
|
||||
<svg class="icon visible" xmlns="http://www.w3.org/2000/svg" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<title>Show password</title>
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" />
|
||||
</svg>
|
||||
</label>
|
||||
</sm-input>
|
||||
<button type="submit" onclick="convertBtcPrivateKey()"
|
||||
class="button button--primary cta">Convert</button>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div class="grid gap-0-5">
|
||||
<sm-input type="password" id="flo_private" class="password-field"
|
||||
@ -325,12 +332,15 @@
|
||||
<p class="panel-footer">Convert BTC address to FLO address</p>
|
||||
</div>
|
||||
<sm-form id="convert_btc_address_form" class="flex">
|
||||
<sm-input id="convert_btc_input" placeholder="BTC Address" data-btc-address
|
||||
error-text="Invalid BTC address" animate required></sm-input>
|
||||
<button id="convert_to_flo" class="button--primary justify-self-center cta"
|
||||
type="submit">
|
||||
Convert
|
||||
</button>
|
||||
<div class="input-action-wrapper">
|
||||
<sm-input id="convert_btc_input" placeholder="BTC Address" data-btc-address
|
||||
error-text="Invalid BTC address. It usually starts with 'b'" animate
|
||||
required></sm-input>
|
||||
<button id="convert_to_flo" class="button--primary justify-self-center cta"
|
||||
type="submit">
|
||||
Convert
|
||||
</button>
|
||||
</div>
|
||||
</sm-form>
|
||||
<div id="btc_address_converter_result"></div>
|
||||
</div>
|
||||
@ -427,8 +437,8 @@
|
||||
<h5>Recovered BTC address</h5>
|
||||
<sm-copy id="recovered_btc_addr"></sm-copy>
|
||||
</div>
|
||||
<sm-input id="retrieve_btc_addr_field" type="password" error-text="Invalid private key"
|
||||
placeholder="Private key" class="password-field" required autofocus>
|
||||
<sm-input id="retrieve_btc_addr_field" type="password" placeholder="Private key" class="password-field"
|
||||
data-private-key required autofocus>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly
|
||||
onchange="togglePrivateKeyVisibility(this)">
|
||||
@ -501,8 +511,7 @@
|
||||
<fieldset class="sender-card card">
|
||||
<sm-input class="sender-input" placeholder="Sender address" data-btc-address
|
||||
error-text="Invalid BTC address" animate required></sm-input>
|
||||
<sm-input class="priv-key-input password-field" type="password" placeholder="Private Key"
|
||||
error-text="Invalid private key" animate required>
|
||||
<sm-input class="priv-key-input password-field" type="password" placeholder="Private Key" animate required>
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
@ -559,7 +568,7 @@
|
||||
<fieldset class="card receiver-card">
|
||||
<sm-input class="receiver-input" placeholder="Receiver address" data-btc-address
|
||||
error-text="Invalid BTC address" animate required></sm-input>
|
||||
<div class="flex align-start gap-0-5 remove-card-wrapper">
|
||||
<div class="flex align-content-start gap-0-5 remove-card-wrapper">
|
||||
<sm-input type="number" class="amount-input amount-shown" placeholder="Amount" min="0.00000001"
|
||||
step="0.00000001" error-text="Invalid amount" animate required>
|
||||
<div class="currency-symbol flex" slot="icon"></div>
|
||||
@ -775,7 +784,13 @@
|
||||
}
|
||||
document.body.classList.remove('hidden')
|
||||
document.querySelectorAll('sm-input[data-btc-address]').forEach(input => input.customValidation = (value) => { return { isValid: btcOperator.validateAddress(value) } })
|
||||
document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = (value) => { isValid: floCrypto.validateFloID })
|
||||
document.querySelectorAll('sm-input[data-flo-address]').forEach(input => input.customValidation = (value) => { return { isValid: floCrypto.validateFloID(value) } })
|
||||
document.querySelectorAll('sm-input[data-private-key]').forEach(input => input.customValidation = (value) => {
|
||||
return {
|
||||
isValid: floCrypto.getPubKeyHex(value),
|
||||
errorText: `Invalid private key. It's a long string of random characters usually starting with 'L' or 'R'.`
|
||||
}
|
||||
})
|
||||
document.addEventListener('keyup', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
closePopup()
|
||||
@ -1972,7 +1987,7 @@
|
||||
<div class="label">Address</div>
|
||||
<b class="sender__address wrap-around">${input.address}</b>
|
||||
</div>
|
||||
<sm-input class="sender__private-key password-field" type="password" placeholder="Private Key" error-text="Invalid private key" animate="" required="" aria-label="Private Key" aria-required="true" role="textbox">
|
||||
<sm-input class="sender__private-key password-field" type="password" placeholder="Private Key" animate required>
|
||||
<svg class="icon" slot="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <g> <rect fill="none" height="24" width="24"></rect> </g> <g> <path d="M21,10h-8.35C11.83,7.67,9.61,6,7,6c-3.31,0-6,2.69-6,6s2.69,6,6,6c2.61,0,4.83-1.67,5.65-4H13l2,2l2-2l2,2l4-4.04L21,10z M7,15c-1.65,0-3-1.35-3-3c0-1.65,1.35-3,3-3s3,1.35,3,3C10,13.65,8.65,15,7,15z"></path> </g> </svg>
|
||||
<label slot="right" class="interact">
|
||||
<input type="checkbox" class="hidden" autocomplete="off" readonly="" onchange="togglePrivateKeyVisibility(this)">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user