aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Footer.svelte2
-rw-r--r--src/components/Numpad.svelte149
-rw-r--r--src/components/Password.svelte6
-rw-r--r--src/components/Pin.svelte3
-rw-r--r--src/components/Qr.svelte2
5 files changed, 77 insertions, 85 deletions
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 82282465..a33716d4 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -9,7 +9,7 @@
];
const companyLinks = [
- { url: '/news', titleID: 'news' },
+ { url: '/docs', titleID: 'documentation' },
{ url: '/support', titleID: 'support' },
{ url: '/jobs', titleID: 'jobs' }
];
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 74844b71..d74255e0 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -6,7 +6,8 @@
export let amount,
currency,
- fiat = !amount;
+ fiat = !amount,
+ submit = undefined;
export let amountFiat = amount ? amount * ($selectedRate / sats) : 0;
@@ -88,44 +89,12 @@
}
};
- function getCaretPosition(editableDiv) {
- var caretPos = 0,
- sel,
- range;
- if (window.getSelection) {
- sel = window.getSelection();
- if (sel.rangeCount) {
- range = sel.getRangeAt(0);
- if (range.commonAncestorContainer.parentNode == editableDiv) {
- caretPos = range.endOffset;
- }
- }
- } else if (document.selection && document.selection.createRange) {
- range = document.selection.createRange();
- if (range.parentElement() == editableDiv) {
- var tempEl = document.createElement('span');
- editableDiv.insertBefore(tempEl, editableDiv.firstChild);
- var tempRange = range.duplicate();
- tempRange.moveToElementText(tempEl);
- tempRange.setEndPoint('EndToEnd', range);
- caretPos = tempRange.text.length;
- }
- }
- return caretPos;
- }
-
- $: html = fiat ? f(amountFiat, currency) : s(amountSats);
+ $: html = fiat ? amountFiat : s(amountSats);
let prev = '';
let input = (e) => {
- if (amount > sats) {
- if (fiat) amountFiat = (Math.round(sats * ($selectedRate / sats))).toString();
- else amountSats = sats;
- return warning($t('user.receive.lessThan1BTCWarning'));
- }
-
- if (prev === '0' && html.length === 2) {
+ if (prev === '0') {
prev = '';
html = html.replace('0', '');
}
@@ -133,25 +102,53 @@
let sel = getSelection();
let i = sel.focusOffset;
- if (!fiat) amountSats = parseInt(html.replace(/,/g, ''));
+ let clean = html.substr(0,15)
+ .replace(/[^0-9.,]+/g, '')
+ .replace('.', 'F')
+ .replace(/\./g, '')
+ .replace('F', '.');
+
+ if (fiat) clean = clean.replace(',', '');
+ if (clean !== html) {
+ html = clean;
+ i = html.length;
+ }
+
+ if (amount > sats && html.length > prev.length) {
+ html = prev;
+ warning($t('user.receive.lessThan1BTCWarning'));
+ i--;
+ }
+
+ if (fiat) {
+ amountFiat = html;
+ } else {
+ amountSats = parseInt(html.replace(/,/g, ''));
+ }
+
if (!amountSats) amountSats = null;
setTimeout(() => {
- let p = prev.split(',')[0].length;
- if (html.length > prev.length && p === 3) i++;
- if (html.length < prev.length && p === 1 && i > 1) i--;
+ if (!fiat) {
+ let p = prev.split(',')[0].length;
+ if (html.length > prev.length && p === 3) i++;
+ if (html.length < prev.length && p === 1 && i > 1) i--;
+ }
let node = e.target.childNodes[0];
let range = document.createRange();
- range.setStart(node, i);
- range.setEnd(node, i);
+ console.log('NODE', node, i);
+ if (node) {
+ range.setStart(node, i);
+ range.setEnd(node, i);
- let sel = getSelection();
- sel.removeAllRanges();
- sel.addRange(range);
+ let sel = getSelection();
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
- prev = html;
+ prev = html.toString();
}, 0);
};
@@ -162,47 +159,41 @@
sel.removeAllRanges();
sel.addRange(range);
};
+
+ let keydown = (e) => e.key === 'Enter' && (e.preventDefault() || submit.click());
</script>
<div class="flex justify-center items-center mb-3 px-3">
<div class="space-y-5">
<div class="text-center">
<div class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center">
- {#if fiat}
- <div class="my-auto">{symbol}</div>
- <div
- contenteditable
- bind:innerHTML={amountFiat}
- on:focus={focus}
- on:input={input}
- class="outline-none"
- />
- {:else}
- <div>⚡️</div>
- <div
- contenteditable
- bind:innerHTML={html}
- on:focus={focus}
- on:input={input}
- class="outline-none"
- />
- {/if}
+ <div class="my-auto" class:text-5xl={!fiat}>{fiat ? symbol : '⚡️'}</div>
+ <div
+ contenteditable
+ bind:innerHTML={html}
+ on:focus={focus}
+ on:input={input}
+ on:keydown={keydown}
+ class="outline-none my-auto"
+ />
+ </div>
+ <div class="mt-2">
+ <span class="text-secondary mr-1">{fiat ? amountSatsConverted : amountFiatConverted}</span>
+ <button
+ type="button"
+ on:click={() => {
+ if (fiat) {
+ amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
+ } else {
+ amountFiat =
+ (amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
+ ? (amountSats * ($selectedRate / sats)).toFixed(2)
+ : 0;
+ }
+ fiat = !fiat;
+ }}><Icon icon="swap" style="inline hover:opacity-80" /></button
+ >
</div>
- <span class="text-secondary mr-1">{fiat ? amountSatsConverted : amountFiatConverted}</span>
- <button
- type="button"
- on:click={() => {
- if (fiat) {
- amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
- } else {
- amountFiat =
- (amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
- ? (amountSats * ($selectedRate / sats)).toFixed(2)
- : 0;
- }
- fiat = !fiat;
- }}><Icon icon="swap" style="inline hover:opacity-80" /></button
- >
</div>
<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto">
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index e21bdad1..95a52cac 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -1,6 +1,6 @@
<script>
import { Icon } from '$comp';
- import { failure, post } from '$lib/utils';
+ import { focus, failure, post } from '$lib/utils';
import { password as pw, passwordPrompt } from '$lib/store';
export let user;
@@ -35,7 +35,7 @@
class="bg-primary"
bind:value={password}
autocapitalize="none"
- autofocus
+ use:focus
/>
{:else}
<input
@@ -45,7 +45,7 @@
class="bg-primary"
bind:value={password}
autocapitalize="none"
- autofocus
+ use:focus
/>
{/if}
<button
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index efc1e81b..c7889aa9 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,4 +1,5 @@
<script>
+ import { focus } from "$lib/utils";
import { pin } from '$lib/store';
let pinCode = '';
@@ -12,7 +13,7 @@
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20">
<div class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5">
<h1 class="text-center text-2xl font-semibold">Please enter your PIN</h1>
- <input bind:value={pinCode} autofocus />
+ <input bind:value={pinCode} use:focus />
<div class="w-full flex">
<button
type="submit"
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index 31cbe1b3..5fea7cbd 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -10,5 +10,5 @@
on:click={() => screenfull.toggle(qr)}
on:keydown={() => screenfull.toggle(qr)}
>
- <img {src} class="mx-auto" />
+<img {src} class="mx-auto" alt="QR Code" />
</div>