diff --git a/src/components/TimeClock.tsx b/src/components/TimeClock.tsx index f69f6b0..54694bd 100644 --- a/src/components/TimeClock.tsx +++ b/src/components/TimeClock.tsx @@ -34,21 +34,19 @@ export const TimeClock = (props: clockProps) => { }, []); useEffect(() => { - let minute = Math.trunc(ts / 60); - let second = ts % 60; - if (minute <= 0) { - setValue(`${getSec(second)}`); - } else { - setValue(`${getMin(minute)} ${getSec(second)}`); - } + setValue(formatElapsed(ts)); }, [ts]); - function getSec(second: number) { - return `${second} s ago`; - } - - function getMin(minute: number) { - return `${minute} m`; + function formatElapsed(elapsed: number) { + const t = Math.max(0, elapsed); + const days = Math.trunc(t / 86400); + const hours = Math.trunc((t % 86400) / 3600); + const minutes = Math.trunc((t % 3600) / 60); + const seconds = t % 60; + if (t < 60) return `${seconds} s ago`; + if (t < 3600) return `${minutes} m ${seconds} s ago`; + if (t < 86400) return `${hours} h ${minutes} m ago`; + return `${days} d ${hours} h ago`; } return {value}; diff --git a/src/components/update/update-context.tsx b/src/components/update/update-context.tsx index 6c4943e..f01dbb9 100644 --- a/src/components/update/update-context.tsx +++ b/src/components/update/update-context.tsx @@ -69,7 +69,7 @@ export function UpdateProvider({ children }: { children: React.ReactNode }) { // Install is a user action, so failing it does deserve a toast. setError(e?.message ?? String(e)); setStatus("available"); - notify.error(e, "Please try again.", "Couldn't install update"); + notify.error(e, "Please try again.", "Couldn't install update", { sticky: true }); } }, []); diff --git a/src/pages/batch/component/send-progress.tsx b/src/pages/batch/component/send-progress.tsx index 79fcdfb..b4d462e 100644 --- a/src/pages/batch/component/send-progress.tsx +++ b/src/pages/batch/component/send-progress.tsx @@ -1,6 +1,6 @@ import { TimeClock } from "@/components/TimeClock"; -import { Alert, Flex, Loader, Text } from "@mantine/core"; -import { IconCircle, IconCircleCheck, IconInfoCircle } from "@tabler/icons-react"; +import { Card, Flex, Loader, Text } from "@mantine/core"; +import { IconCircle, IconCircleCheck } from "@tabler/icons-react"; import { useState } from "react"; // The backend emits six technical steps ("stmi: step N. ..." in spend.rs), but @@ -13,7 +13,7 @@ const PHASES = [ "Your transaction is being proven privately on this device — this can take up to a minute or two.", }, { label: "Broadcasting to the network" }, - { label: "Done" }, + { label: "Awaiting confirmation" }, ]; function phaseFromStatus(status: string): number { @@ -29,8 +29,11 @@ export default function SendProgress({ status }: { status: string }) { const current = phaseFromStatus(status); return ( - }> - + + + Sending transaction + + {PHASES.map((phase, index) => { const done = index < current; const active = index === current; @@ -64,6 +67,6 @@ export default function SendProgress({ status }: { status: string }) { ); })} - + ); } diff --git a/src/pages/create/component/completed-content.tsx b/src/pages/create/component/completed-content.tsx index d4b0fe7..6be383d 100644 --- a/src/pages/create/component/completed-content.tsx +++ b/src/pages/create/component/completed-content.tsx @@ -13,8 +13,8 @@ export default function CompletedContent() { Congratulations! - Keep a reminder of your recovery phrase somewhere safe. If you lose it, no one can help you - get it back. Even worse, you won’t be able to access your account ever again. + Keep a reminder of your seed phrase somewhere safe. If you lose it, no one can help you get + it back. Even worse, you won’t be able to access your account ever again. - + {verifyWords && verifyWords.length > 0 && verifyWords.map((word, index) => { @@ -175,7 +175,7 @@ export default function ConfirmSecret(props: Props) { minHeight: "120px", }} > - + {inputWords && inputWords.map((word, index) => { return ( @@ -217,7 +217,7 @@ export default function ConfirmSecret(props: Props) { loading={loading} onClick={checkSecret} > - Confirm recovery phrase + Confirm seed phrase diff --git a/src/pages/create/component/secure-wallet.tsx b/src/pages/create/component/secure-wallet.tsx index a2d7516..60d09da 100644 --- a/src/pages/create/component/secure-wallet.tsx +++ b/src/pages/create/component/secure-wallet.tsx @@ -1,4 +1,5 @@ import { useMnemonic } from "@/store/wallet/hooks"; +import { useSeedHideTimer } from "@/utils/use-seed-hide-timer"; import { Box, Button, Center, Flex, Grid, LoadingOverlay, Text } from "@mantine/core"; import { IconCircleCheck, IconCopy, IconEye, IconReload } from "@tabler/icons-react"; import { useState } from "react"; @@ -15,22 +16,16 @@ export default function SecureWallet(props: Props) { const { nextStep } = props; const mnemonic = useMnemonic(); const [showCopyIcon, setShowCopyIcon] = useState(false); - const [visibleMnemonic, setVisibleMnemonic] = useState(false); const [copyed, setCopyed] = useState(false); const dispatch = useAppDispatch(); - function showMnemonic() { - setVisibleMnemonic(true); - setTimeout(() => { - setVisibleMnemonic(false); - }, 50000); - } + const { visible: visibleMnemonic, reveal: showMnemonic } = useSeedHideTimer(); return ( - Write down this 18-word recovery phrase and save it in a place that you trust and only you - can access. + Write down this 18-word seed phrase and store it where only you can access it. It is the + only way to recover your account — and anyone who has it can spend your funds. { - // Match the "Reveal recovery phrase" button: revealing via the + // Match the "Reveal seed phrase" button: revealing via the // cover must also flip to the revealed state (copy row + Next). setShowCopyIcon(true); showMnemonic(); @@ -64,7 +59,7 @@ export default function SecureWallet(props: Props) { backgroundColor: "var(--mantine-color-gray-0)", }} > - + {mnemonic && mnemonic.split(" ").map((word, index) => { return ( @@ -95,7 +90,6 @@ export default function SecureWallet(props: Props) { - {showCopyIcon ? ( { dispatch(setMnemonic(bip39.generateMnemonic(wordlist, 192))); showMnemonic(); - notify.success("New recovery phrase generated"); + notify.success("New seed phrase generated"); }} > - {"Change recovery phrase"} + {"Change seed phrase"} - Reveal recovery phrase + Reveal seed phrase )} diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index 629ce4f..fcf67cc 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -65,7 +65,7 @@ export default function CreatePage(props: Props) { - + diff --git a/src/pages/history/component/activity-table-card.tsx b/src/pages/history/component/activity-table-card.tsx index 14d638c..9141a45 100644 --- a/src/pages/history/component/activity-table-card.tsx +++ b/src/pages/history/component/activity-table-card.tsx @@ -62,9 +62,7 @@ export default function ActivityTableCard({ historyType }: { historyType: string Block height - -
Balance change (NPT)
- + Balance change (NPT)
Time
 diff --git a/src/pages/history/component/activity-table-item.tsx b/src/pages/history/component/activity-table-item.tsx index 8c542ab..d29ca5a 100644 --- a/src/pages/history/component/activity-table-item.tsx +++ b/src/pages/history/component/activity-table-item.tsx @@ -19,17 +19,16 @@ export default function ActivityTableItem(props: Props) { -
- {element.changeAmount.startsWith("-") ? ( - - {element.changeAmount} - - ) : ( - - {element.changeAmount} - - )} -
+ + {element.changeAmount} +
diff --git a/src/pages/history/component/new-utxo-table.tsx b/src/pages/history/component/new-utxo-table.tsx index 5a52256..8e9af92 100644 --- a/src/pages/history/component/new-utxo-table.tsx +++ b/src/pages/history/component/new-utxo-table.tsx @@ -86,11 +86,14 @@ export default function NewUtxoTable() { -
- - - -
+ + + @@ -243,9 +246,7 @@ export default function NewUtxoTable() {
ID
Block height - -
Amount (NPT)
- + Amount (NPT) Hash {/* Rendered only when locked coins are shown (see the row cell). The flag is computed from release_date only, so the copy speaks diff --git a/src/pages/import/component/import-cecret.tsx b/src/pages/import/component/import-cecret.tsx index 4cbae26..1d47d9b 100644 --- a/src/pages/import/component/import-cecret.tsx +++ b/src/pages/import/component/import-cecret.tsx @@ -34,7 +34,7 @@ export default function ImportCecret({ nextStep }: { nextStep: () => void }) { dispatch(setOneTimePassword("")); nextStep(); } catch (error: any) { - notify.error(error, "Please try again.", "Couldn't import wallet"); + notify.error(error, "Please try again.", "Couldn't import account"); } setLoading(false); } @@ -42,11 +42,11 @@ export default function ImportCecret({ nextStep }: { nextStep: () => void }) { return ( - Access your account with your recovery phrase. + Access your account with your seed phrase.