Land UX improvements on main (follow-up to #52)

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 <span style={{ ...style }}>{value}</span>;

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 });
     }
   }, []);
 

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 (
-    <Alert variant="light" color="blue" title="Sending transaction" icon={<IconInfoCircle />}>
-      <Flex direction="column" gap={10} mt={4} mb={6}>
+    <Card withBorder radius="md" padding="md">
+      <Text fw={600} fz={16}>
+        Sending transaction
+      </Text>
+      <Flex direction="column" gap={10} mt={10} mb={6}>
         {PHASES.map((phase, index) => {
           const done = index < current;
           const active = index === current;
@@ -64,6 +67,6 @@ export default function SendProgress({ status }: { status: string }) {
           );
         })}
       </Flex>
-    </Alert>
+    </Card>
   );
 }

src/pages/create/component/completed-content.tsx

@@ -13,8 +13,8 @@ export default function CompletedContent() {
         Congratulations!
       </Text>
       <Text fw={600} style={{ textAlign: "center" }}>
-        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.
       </Text>
 
       <Flex

src/pages/create/component/confirm-secret.tsx

@@ -96,7 +96,7 @@ export default function ConfirmSecret(props: Props) {
 
   async function checkSecret() {
     if (verifyWords.join(" ") != mnemonic) {
-      notify.error(undefined, "The recovery phrase is incorrect, please check again.");
+      notify.error(undefined, "Some words are in the wrong place. Check them and try again.");
       return;
     }
     setLoading(true);
@@ -108,7 +108,7 @@ export default function ConfirmSecret(props: Props) {
       dispatch(setOneTimePassword(""));
       nextStep();
     } catch (error: any) {
-      notify.error(error, "Please try again later.", "Couldn't create account");
+      notify.error(error, "Please try again.", "Couldn't create account");
     }
     setLoading(false);
   }
@@ -125,7 +125,7 @@ export default function ConfirmSecret(props: Props) {
           caretColor: "transparent",
         }}
       >
-        <Grid>
+        <Grid gutter={8}>
           {verifyWords &&
             verifyWords.length > 0 &&
             verifyWords.map((word, index) => {
@@ -175,7 +175,7 @@ export default function ConfirmSecret(props: Props) {
           minHeight: "120px",
         }}
       >
-        <Grid>
+        <Grid gutter={8}>
           {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
         </Button>
       </Flex>
     </Flex>

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 (
     <Flex direction="column" justify={"center"} align="center" gap={8} w={"100%"}>
       <Text fz={14} fw={600} style={{ textAlign: "center" }}>
-        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.
       </Text>
       <Box pos="relative">
         <LoadingOverlay
@@ -41,7 +36,7 @@ export default function SecureWallet(props: Props) {
               <Center
                 style={{ cursor: "pointer" }}
                 onClick={() => {
-                  // 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)",
           }}
         >
-          <Grid>
+          <Grid gutter={8}>
             {mnemonic &&
               mnemonic.split(" ").map((word, index) => {
                 return (
@@ -95,7 +90,6 @@ export default function SecureWallet(props: Props) {
           </Grid>
         </Box>
       </Box>
-
       {showCopyIcon ? (
         <Flex
           direction={"row"}
@@ -113,12 +107,12 @@ export default function SecureWallet(props: Props) {
             onClick={() => {
               dispatch(setMnemonic(bip39.generateMnemonic(wordlist, 192)));
               showMnemonic();
-              notify.success("New recovery phrase generated");
+              notify.success("New seed phrase generated");
             }}
           >
             <IconReload size={16} />
             <Text fz={14} fw={500}>
-              {"Change recovery phrase"}
+              {"Change seed phrase"}
             </Text>
           </Flex>
           <Flex
@@ -173,7 +167,7 @@ export default function SecureWallet(props: Props) {
               showMnemonic();
             }}
           >
-            Reveal recovery phrase
+            Reveal seed phrase
           </Button>
         )}
       </Flex>

src/pages/create/index.tsx

@@ -65,7 +65,7 @@ export default function CreatePage(props: Props) {
         <Stepper.Step label="Second step" description="Secure account">
           <SecureWallet nextStep={nextStep} />
         </Stepper.Step>
-        <Stepper.Step label="Final step" description="Confirm recovery phrase">
+        <Stepper.Step label="Final step" description="Confirm seed phrase">
           <ConfirmSecret nextStep={nextStep} />
         </Stepper.Step>
         <Stepper.Completed>

src/pages/history/component/activity-table-card.tsx

@@ -62,9 +62,7 @@ export default function ActivityTableCard({ historyType }: { historyType: string
             <Table.Thead>
               <Table.Tr>
                 <Table.Th>Block height</Table.Th>
-                <Table.Th>
-                  <Center>Balance change (NPT)</Center>
-                </Table.Th>
+                <Table.Th style={{ textAlign: "right" }}>Balance change (NPT)</Table.Th>
                 <Table.Th>
                   <Center>Time</Center>
                 </Table.Th>

src/pages/history/component/activity-table-item.tsx

@@ -19,17 +19,16 @@ export default function ActivityTableItem(props: Props) {
         </Text>
       </Table.Td>
       <Table.Td>
-        <Center>
-          {element.changeAmount.startsWith("-") ? (
-            <Text fw={600} c={"var(--color-negative)"}>
-              {element.changeAmount}
-            </Text>
-          ) : (
-            <Text fw={600} c={"var(--color-positive)"}>
-              {element.changeAmount}
-            </Text>
-          )}
-        </Center>
+        <Text
+          fw={600}
+          ta="right"
+          c={
+            element.changeAmount.startsWith("-") ? "var(--color-negative)" : "var(--color-positive)"
+          }
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {element.changeAmount}
+        </Text>
       </Table.Td>
       <Table.Td>
         <Center>

src/pages/history/component/new-utxo-table.tsx

@@ -86,11 +86,14 @@ export default function NewUtxoTable() {
           </Text>
         </Table.Td>
         <Table.Td>
-          <Center>
-            <Text fw={600} c={"var(--color-positive)"}>
-              <NumberFormatter value={amount_to_fixed(element.amount)} thousandSeparator />
-            </Text>
-          </Center>
+          <Text
+            fw={600}
+            ta="right"
+            c={"var(--color-positive)"}
+            style={{ fontVariantNumeric: "tabular-nums" }}
+          >
+            <NumberFormatter value={amount_to_fixed(element.amount)} thousandSeparator />
+          </Text>
         </Table.Td>
         <Table.Td>
           <MonoText value={element.hash} chars={12} copyLabel="Copy hash" />
@@ -243,9 +246,7 @@ export default function NewUtxoTable() {
                   <Center>ID</Center>
                 </Table.Th>
                 <Table.Th>Block height</Table.Th>
-                <Table.Th>
-                  <Center>Amount (NPT)</Center>
-                </Table.Th>
+                <Table.Th style={{ textAlign: "right" }}>Amount (NPT)</Table.Th>
                 <Table.Th>Hash</Table.Th>
                 {/* Rendered only when locked coins are shown (see the row cell).
                     The flag is computed from release_date only, so the copy speaks

src/pages/import/component/import-cecret.tsx

@@ -34,19 +34,19 @@ 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);
   }
 
   return (
     <Flex direction="column" justify={"center"} align="center" gap={8} w={"100%"}>
       <Text fz={14} fw={600} style={{ textAlign: "center" }}>
-        Access your account with your recovery phrase.
+        Access your account with your seed phrase.
       </Text>
       <Stack w={"100%"}>
         <Textarea
-          label="Recovery phrase"
+          label="Seed phrase"
           value={importData.mnemonic}
           onChange={(event) => {
             if (event && event.target.value) {
@@ -62,7 +62,7 @@ export default function ImportCecret({ nextStep }: { nextStep: () => void }) {
               });
             }
           }}
-          placeholder="Enter your recovery phrase"
+          placeholder="Enter your seed phrase"
           rows={4}
         />
 

src/pages/lock/index.tsx

@@ -16,7 +16,7 @@ function LockPage() {
       await input_password(password);
       dispatch(checkAuthPassword());
     } catch (error) {
-      notify.error(undefined, "Invalid password");
+      notify.error(undefined, "Incorrect password", "Couldn't unlock", { id: "unlock-error" });
     }
   }
   async function handleSetPassword() {

src/pages/settings/component/edit-remote-modal.tsx

@@ -29,7 +29,7 @@ export default function EditRemoteModal({
         }
         await set_rest_url(newValue);
         dispatch(querySettingActionData());
-        notify.success("Update remote rest url successfully.");
+        notify.success("Remote node URL updated.");
         close();
       } catch (error: any) {
         notify.error(error, "Please try again.", "Couldn't update node URL");

src/pages/settings/component/resync-modal.tsx

@@ -21,7 +21,7 @@ export default function ResyncModal({ opened, close }: { opened: boolean; close:
       notify.success(`Re-scanning the chain from block ${height}.`, "Resync started");
       close();
     } catch (error: any) {
-      notify.error(error, "Please try again.", "Couldn't resync account");
+      notify.error(error, "Please try again.", "Couldn't resync account", { sticky: true });
     }
     setLoading(false);
   }

src/pages/settings/component/trash-disk-icon.tsx

@@ -74,7 +74,7 @@ export function ChacheFileItem({ item }: { item: BlockCacheFile }) {
     try {
       await delete_cache(item.path);
       dispatch(queryDiskCacheFiles());
-      notify.success("Delete cache file success!");
+      notify.success("Cache file deleted");
     } catch (error: any) {
       notify.error(error, "Please try again.", "Couldn't delete cache file");
     }

src/pages/wallet/component/action-menu.tsx

@@ -1,9 +1,9 @@
 import { ActionIcon, Center, Menu, Text } from "@mantine/core";
 import {
   IconArrowBarToDown,
-  IconArrowBarToUp,
   IconDots,
   IconExchange,
+  IconKey,
   IconPencil,
   IconTrash,
 } from "@tabler/icons-react";
@@ -68,8 +68,8 @@ export default function ActionMenu({
           </Text>
         </Menu.Item>
         <Menu.Divider />
-        <Menu.Item leftSection={<IconArrowBarToUp size={14} />} onClick={exportWallet}>
-          <Text>Export account</Text>
+        <Menu.Item leftSection={<IconKey size={14} />} onClick={exportWallet}>
+          <Text>View seed phrase</Text>
         </Menu.Item>
       </Menu.Dropdown>
     </Menu>