diff --git a/.nowignore b/.nowignore index d6a2bff..211e1a0 100644 --- a/.nowignore +++ b/.nowignore @@ -1,4 +1,4 @@ -.tests +.* assets ios node_modules diff --git a/src-ui/components/inputs/Toggle.svelte b/src-ui/components/inputs/Toggle.svelte index ae6c4d0..b6bb7f7 100644 --- a/src-ui/components/inputs/Toggle.svelte +++ b/src-ui/components/inputs/Toggle.svelte @@ -1,5 +1,6 @@ @@ -14,7 +15,13 @@ background: var(--box-bg); cursor: pointer; } - knob { + + toggle.disabled { + pointer-events: none; + } + + knob, + toggle.disabled knob.active { position: absolute; top: 2px; left: 2px; @@ -25,6 +32,7 @@ opacity: 0.2; transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1); } + knob.active { left: 20px; opacity: 1; @@ -34,6 +42,7 @@ { on.update((on) => !on) - }}> + }} + class:disabled> diff --git a/src-ui/lib/account.ts b/src-ui/lib/account.ts index 507c94e..aeebe26 100644 --- a/src-ui/lib/account.ts +++ b/src-ui/lib/account.ts @@ -2,7 +2,7 @@ import { derived, get, writable, Writable } from 'svelte/store' import { Account } from '@iota/account' import { CDAParams, CDA } from '@iota/cda' -import { cda, persistent, getRandomNode, isDevnet } from '~/lib/helpers' +import { cda, formatValue, persistent, getRandomNode, isDevnet } from '~/lib/helpers' import API from '~/lib/api' /** @@ -54,45 +54,94 @@ export const updateHistory = async ( const $history = get(history) as Transaction[] const $address = get(address) as cda - + const bundle = !(payload instanceof Array) ? payload.bundle : payload - const tx = + const incomingTx = incoming && !(payload instanceof Array) ? bundle.find((item) => item.value > 0 && item.address === payload.address) : bundle.find((item) => item.currentIndex === 0) - if (!tx) { + if (!incomingTx) { return } - const historyEntry = $history.find((item) => item.address === tx.address) + // Check if CDA address exists in history + const addressExists = $history.find((item) => item.address === incomingTx.address) - if (!historyEntry) { + if (!addressExists) { return } - const historyIndex = $history.findIndex( - (item) => item.address === tx.address && item.incoming === incoming && (!item.bundle || item.bundle === tx.bundle) + // Check if history item already exists + const existingIndex = $history.findIndex( + (item) => + item.address === incomingTx.address && + item.incoming === incoming && + (!item.bundle || item.bundle === incomingTx.bundle) ) - if ($address && $address.address.substr(0, 81) === historyEntry.address && incoming) { + const existingTx = $history[existingIndex] + + // Unset current request adddress if it is receiving tokens + if ($address && $address.address.substr(0, 81) === incomingTx.address && incoming) { address.set(null) } - if (historyIndex > -1) { - if (!$history[historyIndex].bundle && !incoming) { + // If history item already exists - update it, otherwise add to history + if (existingIndex > -1) { + if (!existingTx.bundle && !incoming) { sendState.set('done') } - $history[historyIndex] = { - ...$history[historyIndex], - ...tx, - persistence: $history[historyIndex].persistence || tx.persistence + // Show notification if incoming payment + if (incoming) { + const value = formatValue(incomingTx.value) + + if (!existingTx.bundle) { + new Notification(`New pending payment`, { + icon: '/icons/512x512.png', + body: `You are receiving ${value.rounded}${value.unit}` + }) + } + + if (!existingTx.persistence && incomingTx.persistence) { + new Notification(`Payment confirmed`, { + icon: '/icons/512x512.png', + body: `Incoming payment of ${value.rounded}${value.unit} has confirmed` + }) + } + } + + // Show notification if outgoing payment + if (!incoming) { + const value = formatValue(incomingTx.value) + + if (!existingTx.bundle) { + sendState.set('done') + + new Notification(`Payment sent`, { + icon: '/icons/512x512.png', + body: `Payment of ${value.rounded}${value.unit} was just sent` + }) + } + + if (!existingTx.persistence && incomingTx.persistence) { + new Notification(`Payment confirmed`, { + icon: '/icons/512x512.png', + body: `Outgoing payment of ${value.rounded}${value.unit} has confirmed` + }) + } + } + + $history[existingIndex] = { + ...existingTx, + ...incomingTx, + persistence: existingTx.persistence || incomingTx.persistence } history.set($history) } else { - history.update((item) => item.concat([{ ...historyEntry, ...tx }])) + history.update((item) => item.concat([{ ...addressExists, ...incomingTx }])) } } diff --git a/src-ui/lib/app.ts b/src-ui/lib/app.ts index 6815948..fb5d6c1 100644 --- a/src-ui/lib/app.ts +++ b/src-ui/lib/app.ts @@ -26,6 +26,11 @@ export const fiatCurrency = persistent('fiatCurrency', 'USD') */ export const backupReminder = persistent('backupReminder', true) +/** + * Application notifications enabled state + */ +export const showNotifications = persistent('showNotifications', true) + /** * Unset notification timeout */ diff --git a/src-ui/lib/helpers.ts b/src-ui/lib/helpers.ts index 73a9cf7..70e8435 100644 --- a/src-ui/lib/helpers.ts +++ b/src-ui/lib/helpers.ts @@ -95,7 +95,7 @@ export const getRandomNode = async (): Promise => { */ export const formatValue = ( iotas: number, - marketPrice: MarketPrice, + marketPrice?: MarketPrice, units?: string ): { value: number; rounded: string; unit: string; fiat: string } => { let value = getIotas(iotas, units, marketPrice) diff --git a/src-ui/views/Dashboard.svelte b/src-ui/views/Dashboard.svelte index 30bffbf..e32fa4d 100644 --- a/src-ui/views/Dashboard.svelte +++ b/src-ui/views/Dashboard.svelte @@ -1,6 +1,7 @@