diff --git a/packages/renderer/assets/cog.svg b/packages/renderer/assets/cog.svg new file mode 100644 index 0000000..9f16162 --- /dev/null +++ b/packages/renderer/assets/cog.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/renderer/assets/logo-white.svg b/packages/renderer/assets/logo-white.svg new file mode 100644 index 0000000..a761992 --- /dev/null +++ b/packages/renderer/assets/logo-white.svg @@ -0,0 +1,6 @@ + + + + diff --git a/packages/renderer/assets/notification.svg b/packages/renderer/assets/notification.svg new file mode 100644 index 0000000..e347407 --- /dev/null +++ b/packages/renderer/assets/notification.svg @@ -0,0 +1,9 @@ + + + diff --git a/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.stories.tsx b/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.stories.tsx index 326beb7..bc58b3e 100644 --- a/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.stories.tsx +++ b/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.stories.tsx @@ -20,7 +20,7 @@ import { SyncStatus } from "."; import { SyncStatus as SyncStatusOptions } from "@constants/sync-status"; export default { - title: "molecules/Sync Status", + title: "atoms/Sync Status", component: SyncStatus, argTypes: { status: { diff --git a/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.tsx b/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.tsx index 9c0b5be..6986482 100644 --- a/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.tsx +++ b/packages/renderer/src/components/atoms/SyncStatus/SyncStatus.tsx @@ -14,7 +14,7 @@ // limitations under the License. // ============================================================================= -import { Box, createStyles, Group } from "@mantine/core"; +import { Box, createStyles, Group, Stack, Text } from "@mantine/core"; import { BodyText } from "@atoms/Typography"; import { SyncStatus as SyncStatusOptions } from "@constants/sync-status"; @@ -28,24 +28,37 @@ export function SyncStatus({ const { classes } = useStyles({ syncStatus: status }); return ( - - - - {status} - - + + + + + {status} + + + node.sethforprivacy.com + ); } const useStyles = createStyles( (theme, { syncStatus }) => ({ container: { - backgroundColor: theme.colors.gray[1], - borderRadius: "0.5rem", - padding: "0.75rem 1rem", + background: "rgba(17, 17, 17, 0.15)", + borderRadius: theme.radius.md, + padding: `${theme.spacing.xs * 0.8}px ${theme.spacing.xs}px`, + }, + message: { + color: theme.colors.white, + fontSize: "0.5rem", + fontWeight: 700, + opacity: 0.8, + textTransform: "uppercase", + }, + nodeName: { + color: theme.colors.white, + fontSize: "0.75rem", + fontWeight: 600, }, - message: {}, - notSynced: {}, syncDot: { backgroundColor: syncStatus === SyncStatusOptions.Full diff --git a/packages/renderer/src/components/atoms/SyncStatus/__snapshots__/SyncStatus.test.tsx.snap b/packages/renderer/src/components/atoms/SyncStatus/__snapshots__/SyncStatus.test.tsx.snap index 65059ea..abb22f1 100644 --- a/packages/renderer/src/components/atoms/SyncStatus/__snapshots__/SyncStatus.test.tsx.snap +++ b/packages/renderer/src/components/atoms/SyncStatus/__snapshots__/SyncStatus.test.tsx.snap @@ -3,15 +3,24 @@ exports[`atoms::Sync Status > renders the fully synced status 1`] = `
-
- Fully Synced + +
+ Fully Synced +
+
+
+ node.sethforprivacy.com
@@ -20,15 +29,24 @@ exports[`atoms::Sync Status > renders the fully synced status 1`] = ` exports[`atoms::Sync Status > renders the not synced status by default 1`] = `
-
- Not Synced + +
+ Not Synced +
+
+
+ node.sethforprivacy.com
@@ -37,15 +55,24 @@ exports[`atoms::Sync Status > renders the not synced status by default 1`] = ` exports[`atoms::Sync Status > renders the sync in progress status 1`] = `
-
- Syncing + +
+ Syncing +
+
+
+ node.sethforprivacy.com
diff --git a/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx b/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx index 7334b93..8edbfbf 100644 --- a/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx +++ b/packages/renderer/src/components/molecules/WalletBalance/WalletBalance.tsx @@ -14,150 +14,74 @@ // limitations under the License. // ============================================================================= -import { useState, useMemo } from "react"; -import { - Collapse, - createStyles, - Group, - Stack, - Text, - UnstyledButton, -} from "@mantine/core"; -import { ReactComponent as XMRLogo } from "@assets/xmr-logo-1.svg"; -import { ReactComponent as ArrowDown } from "@assets/arrow-down.svg"; +import { createStyles, Group, Skeleton, Stack, Text } from "@mantine/core"; import { useBalances } from "@hooks/haveno/useBalances"; -import { useAccountInfo } from "@hooks/storage/useAccountInfo"; -import { usePrice } from "@hooks/haveno/usePrice"; import { Currency } from "@atoms/Currency"; -import { BodyText } from "@atoms/Typography"; export function WalletBalance() { - const [isOpen, setOpen] = useState(false); - const { classes } = useStyles({ isOpen }); - + const { classes } = useStyles(); const { data: balances, isLoading: isLoadingBalance } = useBalances(); - const { data: accountInfo, isLoading: isLoadingAccountInfo } = - useAccountInfo(); - const { data: price } = usePrice(accountInfo?.primaryFiat); - - const totalBalance = useMemo(() => { - return balances?.balance || 0 + (balances?.reservedTradeBalance || 0); - }, [balances]); - - const fiatBalance = useMemo(() => { - if (!totalBalance || !price || !accountInfo?.primaryFiat) { - return 0; - } - return totalBalance * price; - }, [totalBalance, price, accountInfo]); return ( - setOpen(!isOpen)} - > - - - - - Available Balance - - - {isLoadingAccountInfo || isLoadingBalance ? ( - - Loading... - - ) : ( - <> - - - - - - - - - ( - - ) - - - - - - Total - - - - - - Reserved - - - - - - Locked - - - - - - - - )} + + + Available Balance + - + + Locked Funds + + + + Reserved Funds + + + ); } -const useStyles = createStyles( - (theme, params) => ({ - btnToggle: { - border: `solid 1px ${theme.colors.gray[4]}`, - borderRadius: theme.radius.md, - padding: theme.spacing.md, +interface BalanceValueProps { + isLoading: boolean; + value: number; +} - "&:hover": { - borderColor: theme.colors.gray[5], - }, - }, - xmrLogo: { - width: 20, - }, - toggleIcon: { - transform: `rotate(${params.isOpen ? 180 : 0}deg)`, - transition: "transform 0.2s", - width: 8, - }, - heading: { - fontSize: "0.5rem", - fontWeight: 700, - textTransform: "uppercase", - }, - xmr: { - fontSize: "0.75rem", - fontWeight: 600, - }, - fiat: { - color: theme.colors.gray[6], - fontSize: "0.625rem", - fontWeight: 500, - }, - balanceLabel: { - color: theme.colors.gray[6], - fontSize: "0.625rem", - fontWeight: 700, - textTransform: "uppercase", - }, - balanceValue: { - color: theme.colors.gray[8], - fontSize: "0.625rem", - fontWeight: 600, - }, - }) -); +function BalanceValue({ isLoading, value }: BalanceValueProps) { + const { classes } = useStyles(); + if (isLoading) { + return ; + } + return ( + + + + ); +} + +const useStyles = createStyles((theme) => ({ + container: { + background: "rgba(17, 17, 17, 0.15)", + borderRadius: theme.radius.md, + padding: `${theme.spacing.xs * 0.8}px ${theme.spacing.xs}px`, + }, + heading: { + color: theme.colors.white, + fontSize: "0.5rem", + fontWeight: 700, + opacity: 0.8, + textTransform: "uppercase", + }, + balanceValue: { + color: theme.colors.white, + fontSize: "0.75rem", + fontWeight: 600, + }, +})); diff --git a/packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap b/packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap index 291ae52..4f352fe 100644 --- a/packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap +++ b/packages/renderer/src/components/molecules/WalletBalance/__snapshots__/WalletBalance.test.tsx.snap @@ -2,290 +2,102 @@ exports[`molecules::WalletBalance > renders after loading data 1`] = ` - +
+
+ Locked Funds +
+
+ 12.00 +
+
+
+
+ Reserved Funds +
+
+ 0.00 +
+
+
`; exports[`molecules::WalletBalance > renders loading state 1`] = ` - +
+
+ Locked Funds +
+
+ 12.00 +
+
+
+
+ Reserved Funds +
+
+ 0.00 +
+
+
`; diff --git a/packages/renderer/src/components/organisms/Sidebar/Sidebar.stories.tsx b/packages/renderer/src/components/organisms/Navbar/Navbar.stories.tsx similarity index 83% rename from packages/renderer/src/components/organisms/Sidebar/Sidebar.stories.tsx rename to packages/renderer/src/components/organisms/Navbar/Navbar.stories.tsx index 92f6a22..8b4608c 100644 --- a/packages/renderer/src/components/organisms/Sidebar/Sidebar.stories.tsx +++ b/packages/renderer/src/components/organisms/Navbar/Navbar.stories.tsx @@ -16,17 +16,17 @@ import { Stack } from "@mantine/core"; import type { ComponentStory, ComponentMeta } from "@storybook/react"; -import { Sidebar } from "."; +import { Navbar } from "."; export default { - title: "organisms/Sidebar", - component: Sidebar, -} as ComponentMeta; + title: "organisms/Navbar", + component: Navbar, +} as ComponentMeta; -const Template: ComponentStory = () => { +const Template: ComponentStory = () => { return ( - + ); }; diff --git a/packages/renderer/src/components/organisms/Sidebar/Sidebar.test.tsx b/packages/renderer/src/components/organisms/Navbar/Navbar.test.tsx similarity index 93% rename from packages/renderer/src/components/organisms/Sidebar/Sidebar.test.tsx rename to packages/renderer/src/components/organisms/Navbar/Navbar.test.tsx index 4e62920..60666ca 100644 --- a/packages/renderer/src/components/organisms/Sidebar/Sidebar.test.tsx +++ b/packages/renderer/src/components/organisms/Navbar/Navbar.test.tsx @@ -16,11 +16,11 @@ import { beforeAll, describe, expect, it, vi } from "vitest"; import { render } from "@testing-library/react"; -import { Sidebar } from "."; +import { Navbar } from "."; import { AppProviders } from "@atoms/AppProviders"; import { SyncStatus } from "@constants/sync-status"; -describe("molecules::Sidebar", () => { +describe("molecules::Navbar", () => { beforeAll(() => { vi.mock("@hooks/haveno/useSyncStatus", () => ({ useSyncStatus: () => ({ @@ -34,7 +34,7 @@ describe("molecules::Sidebar", () => { it("renders without exploding", () => { const { asFragment } = render( - + ); expect(asFragment()).toMatchSnapshot(); diff --git a/packages/renderer/src/components/organisms/Navbar/Navbar.tsx b/packages/renderer/src/components/organisms/Navbar/Navbar.tsx new file mode 100644 index 0000000..386ebb8 --- /dev/null +++ b/packages/renderer/src/components/organisms/Navbar/Navbar.tsx @@ -0,0 +1,118 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { createStyles, Group } from "@mantine/core"; +import { NavLink } from "./_NavLink"; +import { WalletBalance } from "@molecules/WalletBalance"; +import { ReactComponent as Logo } from "@assets/logo-white.svg"; +import { ReactComponent as CogIcon } from "@assets/cog.svg"; +import { ReactComponent as NotificationIcon } from "@assets/notification.svg"; +import { useSyncStatus } from "@hooks/haveno/useSyncStatus"; +import { SyncStatus } from "@atoms/SyncStatus"; +import { ROUTES } from "@constants/routes"; + +export function Navbar() { + const { classes } = useStyles(); + const { data: syncStatus } = useSyncStatus(); + + return ( + + + + + + + + + + + + + + + + } + to={ROUTES.NodeSettings} + activeRoutes={[ + ROUTES.PaymentAccounts, + ROUTES.AddPaymentAccount, + ROUTES.NodeSettings, + ROUTES.Backup, + ROUTES.Wallet, + ROUTES.Security, + ]} + /> + } + to={ROUTES.Notifications} + activeRoutes={[ROUTES.Notifications]} + /> + + + + ); +} + +const useStyles = createStyles((theme) => ({ + container: { + background: theme.colors.blue[6], + height: "4rem", + position: "relative", + padding: "0 2rem", + }, + logo: { + height: "2rem !important", + marginRight: "1rem", + width: "2rem !important", + }, + iconButton: { + height: "1.5rem !important", + width: "1.5rem !important", + }, + nav: { + border: 0, + padding: 0, + paddingLeft: theme.spacing.md, + }, + syncStatusContainer: { + margin: theme.spacing.lg, + }, + walletBalance: { + marginRight: theme.spacing.lg, + marginTop: theme.spacing.lg, + }, +})); diff --git a/packages/renderer/src/components/organisms/Navbar/_NavLink.tsx b/packages/renderer/src/components/organisms/Navbar/_NavLink.tsx new file mode 100644 index 0000000..d12c0d4 --- /dev/null +++ b/packages/renderer/src/components/organisms/Navbar/_NavLink.tsx @@ -0,0 +1,87 @@ +// ============================================================================= +// Copyright 2022 Haveno +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ============================================================================= + +import { Text, createStyles } from "@mantine/core"; +import { useMemo } from "react"; +import { Link, matchPath, useLocation } from "react-router-dom"; + +interface NavLinkProps { + activeRoutes: Array; + label?: string; + to: string; + Component?: JSX.Element; +} + +export function NavLink(props: NavLinkProps) { + const { Component, activeRoutes, to, label } = props; + const location = useLocation(); + + const isActive = useMemo(() => { + let matched = false; + activeRoutes.forEach((route) => { + if (matchPath(route, location.pathname)) { + matched = true; + } + }); + return matched; + }, [activeRoutes, location]); + + const { classes } = useStyles({ isActive }); + + return ( + + {Component} + {label && ( + + {label} + + )} + + ); +} + +const useStyles = createStyles( + (theme, { isActive }) => ({ + navLink: { + alignItems: "center", + display: "flex", + height: 64, + opacity: isActive ? 1 : 0.7, + position: "relative", + textDecoration: "none", + transition: "opacity 0.2s", + + "&:after": { + background: isActive ? "white" : "none", + bottom: 0, + content: '" "', + height: 3, + left: 0, + position: "absolute", + right: 0, + }, + + "&:hover": { + opacity: 1, + }, + }, + text: { + color: theme.colors.gray[0], + fontSize: "0.75rem", + fontWeight: 600, + }, + }) +); diff --git a/packages/renderer/src/components/organisms/Navbar/__snapshots__/Navbar.test.tsx.snap b/packages/renderer/src/components/organisms/Navbar/__snapshots__/Navbar.test.tsx.snap new file mode 100644 index 0000000..29ccbdf --- /dev/null +++ b/packages/renderer/src/components/organisms/Navbar/__snapshots__/Navbar.test.tsx.snap @@ -0,0 +1,193 @@ +// Vitest Snapshot v1 + +exports[`molecules::Navbar > renders without exploding 1`] = ` + +
+ +
+
+
+
+ +
+ Not Synced +
+
+
+ node.sethforprivacy.com +
+
+
+
+
+ Available Balance +
+
+
+
+
+ Locked Funds +
+
+
+
+
+ Reserved Funds +
+
+
+
+
+ +
+
+ +`; diff --git a/packages/renderer/src/components/organisms/Sidebar/_constants.tsx b/packages/renderer/src/components/organisms/Navbar/_constants.tsx similarity index 100% rename from packages/renderer/src/components/organisms/Sidebar/_constants.tsx rename to packages/renderer/src/components/organisms/Navbar/_constants.tsx diff --git a/packages/renderer/src/components/organisms/Sidebar/index.ts b/packages/renderer/src/components/organisms/Navbar/index.ts similarity index 96% rename from packages/renderer/src/components/organisms/Sidebar/index.ts rename to packages/renderer/src/components/organisms/Navbar/index.ts index 66201df..3e4a599 100644 --- a/packages/renderer/src/components/organisms/Sidebar/index.ts +++ b/packages/renderer/src/components/organisms/Navbar/index.ts @@ -14,4 +14,4 @@ // limitations under the License. // ============================================================================= -export * from "./Sidebar"; +export * from "./Navbar"; diff --git a/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx b/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx deleted file mode 100644 index 7231eab..0000000 --- a/packages/renderer/src/components/organisms/Sidebar/Sidebar.tsx +++ /dev/null @@ -1,75 +0,0 @@ -// ============================================================================= -// Copyright 2022 Haveno -// -// Licensed under the Apache License, Version 2.0 (the "License"); -// you may not use this file except in compliance with the License. -// You may obtain a copy of the License at -// -// http://www.apache.org/licenses/LICENSE-2.0 -// -// Unless required by applicable law or agreed to in writing, software -// distributed under the License is distributed on an "AS IS" BASIS, -// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -// See the License for the specific language governing permissions and -// limitations under the License. -// ============================================================================= - -import { Box, createStyles, Navbar, Stack } from "@mantine/core"; -import { NAV_LINKS, WIDTH } from "./_constants"; -import { NavLink } from "./_NavLink"; -import { WalletBalance } from "@molecules/WalletBalance"; -import { ReactComponent as Logo } from "@assets/logo-icon.svg"; -import { SyncStatus } from "@atoms/SyncStatus"; -import { useSyncStatus } from "@hooks/haveno/useSyncStatus"; - -export function Sidebar() { - const { classes } = useStyles(); - const { data: syncStatus } = useSyncStatus(); - - return ( - - - - - - {NAV_LINKS.map((link) => ( - - - - ))} - - - - - - - - - - - ); -} - -const useStyles = createStyles((theme) => ({ - container: { - borderRight: `solid 1px ${theme.colors.gray[1]}`, - position: "relative", - width: WIDTH, - }, - logo: { - height: "2rem", - padding: `${theme.spacing.lg}px ${theme.spacing.lg}px`, - }, - nav: { - border: 0, - padding: 0, - paddingLeft: theme.spacing.md, - }, - syncStatusContainer: { - margin: theme.spacing.lg, - }, - walletBalance: { - marginRight: theme.spacing.lg, - marginTop: theme.spacing.lg, - }, -})); diff --git a/packages/renderer/src/components/templates/AccountLayout/index.tsx b/packages/renderer/src/components/templates/AccountLayout/index.tsx index 0a2c916..dd070bb 100644 --- a/packages/renderer/src/components/templates/AccountLayout/index.tsx +++ b/packages/renderer/src/components/templates/AccountLayout/index.tsx @@ -14,36 +14,22 @@ // limitations under the License. // ============================================================================= +import type { FC } from "react"; import { Group, createStyles, Box } from "@mantine/core"; import { NavbarLayout } from "@templates/NavbarLayout"; import { AccountSidebar } from "@organisms/AccountSidebar"; -interface AccountContentProps { - children: JSX.Element | Array; -} - -function AccountContent({ children }: AccountContentProps) { +export const AccountLayout: FC = ({ children }) => { const { classes } = useStyles(); - - return ( - - - {children} - - ); -} - -interface AccountLayoutProps { - children: JSX.Element | Array; -} - -export function AccountLayout({ children }: AccountLayoutProps) { return ( - {children} + + + {children} + ); -} +}; const useStyles = createStyles((theme) => ({ container: { diff --git a/packages/renderer/src/components/templates/NavbarLayout/index.tsx b/packages/renderer/src/components/templates/NavbarLayout/index.tsx index ee5eb8b..58e1a8a 100644 --- a/packages/renderer/src/components/templates/NavbarLayout/index.tsx +++ b/packages/renderer/src/components/templates/NavbarLayout/index.tsx @@ -16,8 +16,8 @@ import type { FC } from "react"; import type { DefaultProps } from "@mantine/core"; -import { Box, createStyles, Group } from "@mantine/core"; -import { Sidebar } from "@organisms/Sidebar"; +import { Box, createStyles, Stack } from "@mantine/core"; +import { Navbar } from "@organisms/Navbar"; export const NavbarLayout: FC = ({ children, @@ -31,17 +31,17 @@ export const NavbarLayout: FC = ({ }); return ( - - + + {children} - + ); }; const useStyles = createStyles((theme) => ({ container: { - flex: 1, alignItems: "stretch", + flex: 1, }, contentArea: { background: theme.colors.gray[0], diff --git a/packages/renderer/src/constants/routes.ts b/packages/renderer/src/constants/routes.ts index 90f00f9..f734a8d 100644 --- a/packages/renderer/src/constants/routes.ts +++ b/packages/renderer/src/constants/routes.ts @@ -18,11 +18,14 @@ export const ROUTES = { Home: "", HomeAlias: "/", Login: "/login", + Markets: "/markets", + MyOffers: "/my-offers", + MyTrades: "/my-trades", Welcome: "/onboarding/welcome", CreateAccount: "/onboarding/create-account", RestoreBackup: "/onboarding/restore-backup", MyWallet: "/my-wallet", - Markets: "/markets", + Notifications: "/notifications", // Account routes PaymentAccounts: "/account/payment-accounts", diff --git a/packages/renderer/src/pages/Login/Login.test.tsx b/packages/renderer/src/pages/Login/Login.test.tsx index 61366f6..1340d65 100644 --- a/packages/renderer/src/pages/Login/Login.test.tsx +++ b/packages/renderer/src/pages/Login/Login.test.tsx @@ -85,8 +85,7 @@ describe("pages::Login", () => { unmount(); }); - // TODO: update behavior to redirect to the Market page - it("navigates to Payment Accounts page after successful login", async () => { + it("navigates to Market page after successful login", async () => { const PASSWORD = "Haveno!2022"; loginSpy.mockImplementation(({ password }, { onSuccess, onError }) => { if (password === PASSWORD) { @@ -105,7 +104,7 @@ describe("pages::Login", () => { await user.type(screen.getByLabelText("Password"), PASSWORD); fireEvent.submit(screen.getByRole("button", { name: "Login" })); expect(navSpy).to.toHaveBeenCalledTimes(1); - expect(navSpy).toHaveBeenCalledWith(ROUTES.PaymentAccounts, { + expect(navSpy).toHaveBeenCalledWith(ROUTES.Markets, { replace: true, }); unmount(); diff --git a/packages/renderer/src/pages/Login/Login.tsx b/packages/renderer/src/pages/Login/Login.tsx index fd02141..4fc975a 100644 --- a/packages/renderer/src/pages/Login/Login.tsx +++ b/packages/renderer/src/pages/Login/Login.tsx @@ -41,7 +41,7 @@ export function Login() { const handleSubmit = (values: FormValues) => { login(values, { onSuccess: () => { - navigate(ROUTES.PaymentAccounts, { replace: true }); + navigate(ROUTES.Markets, { replace: true }); }, onError: (err) => { showNotification({