feat(walletui): wallet ux improvements

applications/tari_walletd/web_ui/src/App.tsx

@@ -34,14 +34,16 @@ import AssetVault from "@routes/AssetVault/AssetVault";
 import SettingsPage from "@routes/Settings/Settings";
 import Auth, { AUTH_TOKEN_FOR_NONE_AUTH } from "@routes/Auth/Auth";
 import Webauthn from "@routes/WebauthnRegistration/Webauthn";
-import useAuthStore from "@store/authStore";
+import useAuthStore from "./services/store/authStore";
 import { useEffect } from "react";
 import { useAuthMethod } from "@api/hooks/useAuth";
 import AccessToken from "@routes/AccessToken/AccessToken";
 import { jwtDecode } from "jwt-decode";
 import Templates from "@routes/Templates/Templates";
 import Manifest from "@routes/Manifest/Manifest";
 import FlowEditor from "@routes/FlowEditor/FlowEditor";
+import { useCurrencySync } from "@store/hooks/useCurrencySync";
+import { ErrorNotificationProvider } from "./contexts/ErrorNotificationContext";
 
 export const breadcrumbRoutes = [
   {
@@ -160,6 +162,8 @@ function App() {
   const { authToken } = authStore;
   let isAuthenticated = !!authToken;
 
+  useCurrencySync();
+
   useEffect(() => {
     if (isTokenExpired(authToken) && authToken !== AUTH_TOKEN_FOR_NONE_AUTH) {
       authStore.clearToken();
@@ -193,10 +197,11 @@ function App() {
   }, [authMethod, authMethodsIsError]);
 
   return (
-    <div>
-      <Routes>
-        <Route path="/" element={<Layout />}>
-          <Route index element={<GuardedRoute component={AssetVault} isAuthenticated={isAuthenticated} />} />
+    <ErrorNotificationProvider>
+      <div>
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<GuardedRoute component={AssetVault} isAuthenticated={isAuthenticated} />} />
           <Route path="auth" element={<Auth />} />
           <Route path="auth/webauthn" element={<Webauthn />} />
           <Route
@@ -263,6 +268,7 @@ function App() {
         </Route>
       </Routes>
     </div>
+    </ErrorNotificationProvider>
   );
 }
 

applications/tari_walletd/web_ui/src/Components/PopupTitle.tsx

@@ -0,0 +1,57 @@
+//  Copyright 2025. The Tari Project
+//
+//  Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+//  following conditions are met:
+//
+//  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following
+//  disclaimer.
+//
+//  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+//  following disclaimer in the documentation and/or other materials provided with the distribution.
+//
+//  3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote
+//  products derived from this software without specific prior written permission.
+//
+//  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+//  INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+//  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+//  SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+//  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+//  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
+//  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+import { DialogTitle, IconButton, Stack, Typography, Divider } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface PopupTitleProps {
+  title: string;
+  onClose?: () => void;
+}
+
+function PopupTitle({ title, onClose }: PopupTitleProps) {
+  return (
+    <DialogTitle sx={{}}>
+      <Stack direction="row" alignItems="baseline" justifyContent="space-between" width="100%">
+        <Stack direction="row" alignItems="baseline" justifyContent="center" width="100%" spacing={2}>
+          <Typography
+            variant="h4"
+            sx={{
+              textTransform: "uppercase",
+              fontSize: "1.1rem",
+            }}
+          >
+            {title}
+          </Typography>
+        </Stack>
+        {onClose && (
+          <IconButton aria-label="close" onClick={onClose}>
+            <CloseIcon />
+          </IconButton>
+        )}
+      </Stack>
+      <Divider sx={{ marginTop: 2 }} />
+    </DialogTitle>
+  );
+}
+
+export default PopupTitle;

applications/tari_walletd/web_ui/src/contexts/ErrorNotificationContext.tsx

@@ -0,0 +1,110 @@
+//  Copyright 2025. The Tari Project
+//
+//  Redistribution and use in source and binary forms, with or without modification, are permitted provided that the
+//  following conditions are met:
+//
+//  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following
+//  disclaimer.
+//
+//  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the
+//  following disclaimer in the documentation and/or other materials provided with the distribution.
+//
+//  3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote
+//  products derived from this software without specific prior written permission.
+//
+//  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES,
+//  INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+//  DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+//  SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+//  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+//  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
+//  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+import React, { createContext, useContext, useState, useRef } from "react";
+import { Snackbar, Alert, AlertColor } from "@mui/material";
+
+interface ErrorNotification {
+  message: string;
+  severity?: AlertColor;
+  duration?: number;
+}
+
+interface ErrorNotificationContextType {
+  showError: (message: string, severity?: AlertColor, duration?: number) => void;
+  showSuccess: (message: string, duration?: number) => void;
+  showWarning: (message: string, duration?: number) => void;
+  showInfo: (message: string, duration?: number) => void;
+  clearNotification: () => void;
+}
+
+const ErrorNotificationContext = createContext<ErrorNotificationContextType | undefined>(undefined);
+
+export const ErrorNotificationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [notification, setNotification] = useState<ErrorNotification | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const showNotification = (message: string, severity: AlertColor = "error", duration: number = 8000) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    setNotification({ message, severity, duration });
+
+    timeoutRef.current = setTimeout(() => {
+      setNotification(null);
+    }, duration);
+  };
+
+  const clearNotification = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setNotification(null);
+  };
+
+  const contextValue: ErrorNotificationContextType = {
+    showError: (message, severity = "error", duration = 8000) => showNotification(message, severity, duration),
+    showSuccess: (message, duration = 4000) => showNotification(message, "success", duration),
+    showWarning: (message, duration = 6000) => showNotification(message, "warning", duration),
+    showInfo: (message, duration = 4000) => showNotification(message, "info", duration),
+    clearNotification,
+  };
+
+  return (
+    <ErrorNotificationContext.Provider value={contextValue}>
+      {children}
+      {notification && (
+        <Snackbar
+          open={!!notification}
+          autoHideDuration={null}
+          onClose={(_, reason) => {
+            if (reason === "clickaway") {
+              return;
+            }
+            clearNotification();
+          }}
+          anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+        >
+          <Alert
+            onClose={clearNotification}
+            severity={notification.severity}
+            sx={{
+              width: "100%",
+              borderRadius: 6,
+            }}
+          >
+            {notification.message}
+          </Alert>
+        </Snackbar>
+      )}
+    </ErrorNotificationContext.Provider>
+  );
+};
+
+export const useErrorNotification = () => {
+  const context = useContext(ErrorNotificationContext);
+  if (context === undefined) {
+    throw new Error("useErrorNotification must be used within an ErrorNotificationProvider");
+  }
+  return context;
+};

applications/tari_walletd/web_ui/src/routes/AssetVault/AssetVault.tsx

@@ -27,13 +27,15 @@ import MyAssets from "./Components/MyAssets";
 import { useEffect } from "react";
 import FetchStatusCheck from "@components/FetchStatusCheck";
 import useAuthStore from "@store/authStore";
+import { useWalletInfo } from "@api/hooks/useWalletInfo";
 
 function AssetVault() {
   const account = useAccountStore((state) => state.account);
   const setAccount = useAccountStore((state) => state.setAccount);
   const setPublicKey = useAccountStore((state) => state.setPublicKey);
   const { data: defaultAccount, isLoading, isError, error } = useAccountsGetDefault();
   const authStore = useAuthStore();
+  const { data: walletInfo } = useWalletInfo();
 
   useEffect(() => {
     if (!isError && defaultAccount) {
@@ -48,6 +50,8 @@ function AssetVault() {
     }
   }, [defaultAccount, isError]);
 
+  console.log("walletInfo", walletInfo);
+
   return (
     <FetchStatusCheck errorMessage={""} isError={false} isLoading={isLoading}>
       {account ? <MyAssets /> : <Onboarding />}

applications/tari_walletd/web_ui/src/routes/AssetVault/Components/ActionMenu.tsx

@@ -20,59 +20,24 @@
 //  WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE
 //  USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles";
-import { useAccountsCreateFreeTestCoins } from "@api/hooks/useAccounts";
+import Stack from "@mui/material/Stack";
 import ClaimBurn from "./ClaimBurn";
 import useAccountStore from "@store/accountStore";
-import SendMoney from "../Tokens/components/SendMoney";
 import ClaimFees from "./ClaimFees";
 import PublishTemplate from "./PublishTemplate";
-import { substateIdToString } from "@tari-project/typescript-bindings";
 
 function ActionMenu() {
-  const { mutate: claimTestnetFaucetFunds } = useAccountsCreateFreeTestCoins();
   const account = useAccountStore((state) => state.account);
-  const setAccount = useAccountStore((state) => state.setAccount);
-  const setPublicKey = useAccountStore((state) => state.setPublicKey);
-  const theme = useTheme();
   if (!account) {
     return null;
   }
 
-  const onClaimFreeCoins = () => {
-    claimTestnetFaucetFunds(
-      {
-        account: { ComponentAddress: substateIdToString(account.address) },
-        amount: 1_000_000_000,
-        fee: 1000,
-      },
-      {
-        onSuccess: (resp) => {
-          setAccount(resp.account);
-          setPublicKey(resp.public_key);
-        },
-      },
-    );
-  };
-
   return (
-    <Box
-      style={{
-        display: "flex",
-        gap: theme.spacing(1),
-        marginBottom: theme.spacing(2),
-      }}
-    >
-      <SendMoney />
+    <Stack direction="row" spacing={1} marginBottom={2}>
       <ClaimFees />
-      <Button variant="outlined" onClick={onClaimFreeCoins}>
-        Claim Testnet Coins
-      </Button>
       <ClaimBurn />
       <PublishTemplate />
-    </Box>
+    </Stack>
   );
 }