Skip to content

chore(walletui): update dependencies #1564

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sdbondi merged 4 commits into from
Sep 2, 2025
Merged

chore(walletui): update dependencies #1564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c6b69ee
chore: upgrade react query
NovaT82 Sep 1, 2025
c0cc3bf
chore: add alias imports
NovaT82 Sep 1, 2025
0a39eb4
chore: update dependencies
NovaT82 Sep 2, 2025
764c95f
Merge branch 'development' into wallet-ui
NovaT82 Sep 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions applications/tari_walletd/web_ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,43 +10,43 @@
"clean-dist": "rm -rf dist && rm -f tsconfig.tsbuildinfo"
},
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.14",
"@mui/x-data-grid": "^6.0.2",
"@reown/walletkit": "^1.2.8",
"@tanstack/react-query": "^4.33.0",
"@tanstack/react-query-devtools": "^4.33.0",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^5.18.0",
"@mui/material": "^5.18.0",
"@mui/x-data-grid": "^6.20.4",
"@reown/walletkit": "^1.2.10",
"@tanstack/react-query": "^5.85.7",
"@tanstack/react-query-devtools": "^5.85.7",
"@tari-project/tari-extension-common": "^0.0.14",
"@tari-project/tari-extension-query-builder": "^0.0.15",
"@tari-project/tari-permissions": "0.10.1",
"@tari-project/typescript-bindings": "link:../../../bindings",
"@tari-project/wallet_jrpc_client": "workspace:*",
"@walletconnect/core": "^2.21.4",
"@walletconnect/utils": "^2.21.4",
"@walletconnect/core": "^2.21.8",
"@walletconnect/utils": "^2.21.8",
"buffer": "^6.0.3",
"cbor2": "^2.0.1",
"file-saver": "^2.0.5",
"framer-motion": "^12.23.12",
"jwt-decode": "^4.0.0",
"prism-react-renderer": "^2.4.1",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^4.9.0",
"react-router-dom": "^6.9.0",
"use-file-picker": "^2.1.2",
"react": "^19.1.1",
"react-dom": "^19.1.1",
Comment on lines +34 to +35

@coderabbitai coderabbitai Bot Sep 2, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Align React types with React 19 (likely TS errors if left at 18.x).

You’re on react/react-dom 19.1.1 but still using @types/react* 18.x, which often causes duplicate/conflicting types and broken refs/JSX typings in TS. Update both to 19.x to match React 19. (npmjs.com, react.dev)

Apply this diff:

-    "@types/react": "^18.3.24",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.1.1",
+    "@types/react-dom": "^19.1.1",

Also applies to: 46-47

🤖 Prompt for AI Agents 
In applications/tari_walletd/web_ui/package.json around lines 34-35 and also
lines 46-47, the project uses react and react-dom 19.1.1 but still has @types
packages pinned to 18.x causing TypeScript type conflicts; update the @types
packages to match React 19 (bump @types/react and @types/react-dom to the
corresponding 19.x versions, and any other React-related @types (e.g.,
@types/react-test-renderer) to 19.x if present) in package.json and run your
package manager (npm/yarn/pnpm) to install the matching types so JSX/refs
typings align with React 19.

"react-icons": "^4.12.0",
"react-router-dom": "^6.30.1",
"use-file-picker": "^2.1.4",
"use-react-router-breadcrumbs": "^4.0.1",
"zustand": "^5.0.3",
"zustand": "^5.0.8",
"zustand-persist": "^0.4.0"
Comment on lines +40 to 41

@coderabbitai coderabbitai Bot Sep 2, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

❓ Verification inconclusive

Reassess ‘zustand-persist’ with Zustand v5.

Zustand v5 includes behavioral changes in persist and drops older patterns. The third‑party “zustand-persist” package is effectively unmaintained (last release years ago), so compatibility is uncertain. Prefer the official persist from zustand/middleware (or purpose‑built alternatives) to avoid subtle hydration bugs. (github.com, socket.dev, security.snyk.io)

If you’re ready to switch, I can propose a minimal diff replacing “zustand-persist” with persist from zustand/middleware and createJSONStorage. Want me to draft it?

Replace zustand-persist with official persist middleware
In applications/tari_walletd/web_ui/package.json remove "zustand-persist" (v0.4.0, last published 4 years ago) to avoid compatibility issues (npmjs.com) and refactor persistence to use:

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

This leverages the built-in v5 persist middleware and storage helpers (zustand.docs.pmnd.rs). Let me know if you’d like a minimal diff.

🤖 Prompt for AI Agents 
In applications/tari_walletd/web_ui/package.json around lines 40-41, remove the
"zustand-persist": "^0.4.0" dependency and replace persistence usage with the
official zustand v5 middleware: refactor any store files to import persist and
createJSONStorage from 'zustand/middleware' and wrap create with persist (using
createJSONStorage for custom storage when needed), update imports/usages
accordingly, and run npm/yarn install to update lockfile; ensure no lingering
references to "zustand-persist" remain in code or package.json.

},
"devDependencies": {
"@types/file-saver": "^2.0.7",
"@types/node": "catalog:",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react-swc": "^3.8.0",
"prettier": "^3.3.2",
"@types/react": "^18.3.24",
"@types/react-dom": "^18.3.7",
"@vitejs/plugin-react-swc": "^3.11.0",
"prettier": "^3.6.2",
"typescript": "catalog:",
"vite": "catalog:"
}
Expand Down
38 changes: 19 additions & 19 deletions applications/tari_walletd/web_ui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,27 @@
// USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import { Navigate, Route, Routes } from "react-router-dom";
import Accounts from "./routes/Accounts/Accounts";
import AccountDetails from "./routes/AccountDetails/AccountDetails";
import Keys from "./routes/Keys/Keys";
import ErrorPage from "./routes/ErrorPage";
import Wallet from "./routes/Wallet/Wallet";
import Layout from "./theme/LayoutMain";
import AccessTokensLayout from "./routes/AccessTokens/AccessTokens";
import Transactions from "./routes/Transactions/TransactionsLayout";
import TransactionDetails from "./routes/Transactions/TransactionDetails";
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 Accounts from "@routes/Accounts/Accounts";
import AccountDetails from "@routes/AccountDetails/AccountDetails";
import Keys from "@routes/Keys/Keys";
import ErrorPage from "@routes/ErrorPage";
import Wallet from "@routes/Wallet/Wallet";
import Layout from "@theme/LayoutMain";
import AccessTokensLayout from "@routes/AccessTokens/AccessTokens";
import Transactions from "@routes/Transactions/TransactionsLayout";
import TransactionDetails from "@routes/Transactions/TransactionDetails";
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 { useEffect } from "react";
import { useAuthMethod } from "./api/hooks/useAuth";
import AccessToken from "./routes/AccessToken/AccessToken";
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 Templates from "@routes/Templates/Templates";
import Manifest from "@routes/Manifest/Manifest";
import FlowEditor from "@routes/FlowEditor/FlowEditor";

export const breadcrumbRoutes = [
{
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/Components/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
IoContractOutline,
IoCheckmarkOutline,
} from "react-icons/io5";
import { renderJson } from "../utils/helpers";
import { renderJson } from "@utils/helpers";

interface ICodeBlockExpand {
title: string;
Expand Down
14 changes: 7 additions & 7 deletions applications/tari_walletd/web_ui/src/Components/ConnectorLink/ConnectorLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ import DialogContentText from "@mui/material/DialogContentText";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
import "./ConnectorLink.css";
import Permissions from "./Permissions";
import CheckMark from "./CheckMark";
import ConnectorLogo from "./ConnectorLogo";
import { parse } from "../../utils/tari_permissions";
import ConfirmTransaction from "./ConfirmTransaction";
import Stepper from "../Stepper";
import Permissions from "@components/ConnectorLink/Permissions";
import CheckMark from "@components/ConnectorLink/CheckMark";
import ConnectorLogo from "@components/ConnectorLink/ConnectorLogo";
import { parse } from "@utils/tari_permissions";
import ConfirmTransaction from "@components/ConnectorLink/ConfirmTransaction";
import Stepper from "@components/Stepper";
import { useTheme } from "@mui/material/styles";
import { webrtcStart } from "../../utils/json_rpc";
import { webrtcStart } from "@utils/json_rpc";

const ConnectorDialog = () => {
const [page, setPage] = useState(1);
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/Components/ConnectorLink/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@
// 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 ConnectorLink from "./ConnectorLink";
import ConnectorLink from "@components/ConnectorLink/ConnectorLink";
export default ConnectorLink;
4 changes: 2 additions & 2 deletions applications/tari_walletd/web_ui/src/Components/CopyAddress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
// USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import { SubstateId, shortenString } from "@tari-project/typescript-bindings";
import { isSubstateIdString, shortenSubstateId, substateIdToString } from "../utils/helpers";
import CopyToClipboard from "./CopyToClipboard";
import { isSubstateIdString, shortenSubstateId, substateIdToString } from "@utils/helpers";
import CopyToClipboard from "@components/CopyToClipboard";

interface Props {
address: string;
Expand Down
4 changes: 2 additions & 2 deletions applications/tari_walletd/web_ui/src/Components/FetchStatusCheck.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
// 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 Loading from "./Loading";
import Error from "./Error";
import Loading from "@components/Loading";
import Error from "@components/Error";
Comment on lines +23 to +24

@coderabbitai coderabbitai Bot Sep 2, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Rename imported Error to avoid shadowing the global Error

Biome flags this as an error. Rename the import and usage to prevent confusion and lint failures.

-import Loading from "@components/Loading";
-import Error from "@components/Error";
+import Loading from "@components/Loading";
+import ErrorView from "@components/Error";
@@
-  if (isError) {
-    return <Error message={errorMessage} />;
-  }
+  if (isError) {
+    return <ErrorView message={errorMessage} />;
+  }

Also applies to: 37-39

🧰 Tools
🪛 Biome (2.1.2)

[error] 24-24: Do not shadow the global "Error" property.

Consider renaming this variable. It's easy to confuse the origin of variables when they're named after a known global.

(lint/suspicious/noShadowRestrictedNames)

🤖 Prompt for AI Agents 
In applications/tari_walletd/web_ui/src/Components/FetchStatusCheck.tsx around
lines 23-24 (and similarly at lines 37-39), the import named Error shadows the
global Error and triggers a lint/biome error; rename the import to a
non-conflicting identifier (e.g., ErrorComponent or FetchError), update all
usages in this file to that new name (including JSX and any references), and
ensure the import path remains the same so functionality is unchanged.


interface FetchStatusCheckProps {
errorMessage: string;
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/Components/JsonTooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
// USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import React from "react";
import { renderJson } from "../utils/helpers";
import { renderJson } from "@utils/helpers";

export default function JsonTooltip({ jsonText, children }: { jsonText: string; children: string }) {
if (jsonText === null) {
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/Components/MenuItems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import {
} from "react-icons/io5";
import Tooltip from "@mui/material/Tooltip";
import Fade from "@mui/material/Fade";
import ThemeSwitcher from "./ThemeSwitcher";
import ThemeSwitcher from "@components/ThemeSwitcher";
import Box from "@mui/material/Box";
import { useTheme } from "@mui/material/styles";
import { LuLayoutTemplate } from "react-icons/lu";
Expand Down
10 changes: 5 additions & 5 deletions applications/tari_walletd/web_ui/src/Components/NFTList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@
// USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

import React from "react";
import FetchStatusCheck from "./FetchStatusCheck";
import FetchStatusCheck from "@components/FetchStatusCheck";
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
import type { ApiError } from "../api/helpers/types";
import { DataTableCell } from "./StyledComponents";
import { renderJson, shortenString, shortenSubstateId, toHexString } from "../utils/helpers";
import type { ApiError } from "@api/helpers/types";
import { DataTableCell } from "@components/StyledComponents";
import { renderJson, shortenString, shortenSubstateId, toHexString } from "@utils/helpers";
import { IoCheckmarkOutline, IoCloseOutline } from "react-icons/io5";
import type { NonFungibleId, NonFungibleToken, ListNftsResponse } from "@tari-project/typescript-bindings";
import { convertCborValue } from "../utils/cbor";
import { convertCborValue } from "@utils/cbor";

function NftListItem({ nft }: { nft: NonFungibleToken }) {
return (
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/Components/ThemeSwitcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

import { Button } from "@mui/material";
import { IoMoonOutline, IoSunny } from "react-icons/io5";
import useThemeStore from "../store/themeStore";
import useThemeStore from "@store/themeStore";
import { useTheme } from "@mui/material/styles";

const ThemeSwitcher = () => {
Expand Down
12 changes: 6 additions & 6 deletions applications/tari_walletd/web_ui/src/Components/WalletConnectLink/WalletConnectLink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ import DialogContentText from "@mui/material/DialogContentText";
import CloseIcon from "@mui/icons-material/Close";
import IconButton from "@mui/material/IconButton";
import "./ConnectorLink.css";
import Permissions from "./Permissions";
import CheckMark from "./CheckMark";
import ConnectorLogo from "./ConnectorLogo";
import ConfirmTransaction from "./ConfirmTransaction";
import Permissions from "@components/WalletConnectLink/Permissions";
import CheckMark from "@components/WalletConnectLink/CheckMark";
import ConnectorLogo from "@components/WalletConnectLink/ConnectorLogo";
import ConfirmTransaction from "@components/WalletConnectLink/ConfirmTransaction";
import { useTheme } from "@mui/material/styles";
import { TariPermission } from "@tari-project/tari-permissions";
import { Core } from "@walletconnect/core";
Expand All @@ -54,8 +54,8 @@ import {
transactionsGetResult,
transactionsSubmit,
walletGetInfo,
} from "../../utils/json_rpc";
import useAccountStore from "../../store/accountStore";
} from "@utils/json_rpc";
import useAccountStore from "@store/accountStore";
import { buildApprovedNamespaces, getSdkError } from "@walletconnect/utils";
import { Error as ErrorIcon } from "@mui/icons-material";
import CircularProgress from "@mui/material/CircularProgress";
Expand Down
2 changes: 1 addition & 1 deletion applications/tari_walletd/web_ui/src/Components/WalletConnectLink/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@
// 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 WalletConnectLink from "./WalletConnectLink";
import WalletConnectLink from "@components/WalletConnectLink/WalletConnectLink";
export default WalletConnectLink;
Loading
Loading