From a0d25ff848c4aee370539a0aa5bc0c14db710c8a Mon Sep 17 00:00:00 2001 From: Bran <52735957+brancoder@users.noreply.github.com> Date: Wed, 18 Dec 2024 11:12:01 +0100 Subject: [PATCH] feat(wallet-dashboard): add settings menu and network switcher (#4509) * feat: add settings menu and network switcher * fix: reset react queries * fix: change notifications for toast * fix: view enums and icon ordering in top nav --- .../(protected)/components/top-nav/TopNav.tsx | 31 +++++++++- .../components/Dialogs/index.ts | 1 + .../Dialogs/settings/SettingsDialog.tsx | 38 ++++++++++++ .../Dialogs/settings/enums/index.ts | 4 ++ .../Dialogs/settings/enums/view.enums.ts | 7 +++ .../Dialogs/settings/hooks/index.ts | 4 ++ .../settings/hooks/useSettingsDialog.ts | 27 +++++++++ .../components/Dialogs/settings/index.ts | 7 +++ .../settings/views/NetworkSelectorView.tsx | 53 ++++++++++++++++ .../settings/views/SettingsListView.tsx | 60 +++++++++++++++++++ .../Dialogs/settings/views/index.ts | 5 ++ .../providers/AppProviders.tsx | 10 +++- 12 files changed, 242 insertions(+), 5 deletions(-) create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/SettingsDialog.tsx create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/enums/index.ts create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/enums/view.enums.ts create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/hooks/index.ts create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/hooks/useSettingsDialog.ts create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/index.ts create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/views/NetworkSelectorView.tsx create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx create mode 100644 apps/wallet-dashboard/components/Dialogs/settings/views/index.ts diff --git a/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx b/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx index 2fe8eba32f3..3b802387ca8 100644 --- a/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx +++ b/apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx @@ -1,18 +1,43 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import { SettingsDialog, useSettingsDialog } from '@/components'; import { Badge, BadgeType, Button, ButtonType } from '@iota/apps-ui-kit'; +import { ConnectButton, useIotaClientContext } from '@iota/dapp-kit'; +import { getNetwork, Network } from '@iota/iota-sdk/client'; import { ThemeSwitcher } from '@iota/core'; -import { ConnectButton } from '@iota/dapp-kit'; import { Settings } from '@iota/ui-icons'; export function TopNav() { + const { network } = useIotaClientContext(); + const { name: networkName } = getNetwork(network); + const { + isSettingsDialogOpen, + settingsDialogView, + setSettingsDialogView, + onCloseSettingsDialogClick, + onOpenSettingsDialogClick, + } = useSettingsDialog(); + return (
- + + -
); } diff --git a/apps/wallet-dashboard/components/Dialogs/index.ts b/apps/wallet-dashboard/components/Dialogs/index.ts index 50ba05f1571..db380d17927 100644 --- a/apps/wallet-dashboard/components/Dialogs/index.ts +++ b/apps/wallet-dashboard/components/Dialogs/index.ts @@ -6,4 +6,5 @@ export * from './ReceiveFundsDialog'; export * from './Staking'; export * from './unstake'; export * from './vesting'; +export * from './settings'; export * from './MigrationDialog'; diff --git a/apps/wallet-dashboard/components/Dialogs/settings/SettingsDialog.tsx b/apps/wallet-dashboard/components/Dialogs/settings/SettingsDialog.tsx new file mode 100644 index 00000000000..2c87b522af2 --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/SettingsDialog.tsx @@ -0,0 +1,38 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import { Dialog } from '@iota/apps-ui-kit'; +import { SettingsDialogView } from './enums'; +import { SettingsListView, NetworkSelectorView } from './views'; + +interface SettingsDialogProps { + isOpen: boolean; + handleClose: () => void; + view: SettingsDialogView | undefined; + setView: (view: SettingsDialogView) => void; +} + +export function SettingsDialog({ + isOpen, + handleClose, + view, + setView, +}: SettingsDialogProps): JSX.Element { + function onBack(): void { + setView(SettingsDialogView.SelectSetting); + } + + return ( + handleClose()}> + <> + {view === SettingsDialogView.SelectSetting && ( + + )} + {view === SettingsDialogView.NetworkSettings && ( + + )} + + + ); +} diff --git a/apps/wallet-dashboard/components/Dialogs/settings/enums/index.ts b/apps/wallet-dashboard/components/Dialogs/settings/enums/index.ts new file mode 100644 index 00000000000..6f408e39b8c --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/enums/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './view.enums'; diff --git a/apps/wallet-dashboard/components/Dialogs/settings/enums/view.enums.ts b/apps/wallet-dashboard/components/Dialogs/settings/enums/view.enums.ts new file mode 100644 index 00000000000..b3f17bb2130 --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/enums/view.enums.ts @@ -0,0 +1,7 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export enum SettingsDialogView { + SelectSetting = 'SelectSetting', + NetworkSettings = 'NetworkSettings', +} diff --git a/apps/wallet-dashboard/components/Dialogs/settings/hooks/index.ts b/apps/wallet-dashboard/components/Dialogs/settings/hooks/index.ts new file mode 100644 index 00000000000..dfc58ee2f8b --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/hooks/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './useSettingsDialog'; diff --git a/apps/wallet-dashboard/components/Dialogs/settings/hooks/useSettingsDialog.ts b/apps/wallet-dashboard/components/Dialogs/settings/hooks/useSettingsDialog.ts new file mode 100644 index 00000000000..6691f971e6c --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/hooks/useSettingsDialog.ts @@ -0,0 +1,27 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import { useState } from 'react'; +import { SettingsDialogView } from '../enums'; + +export function useSettingsDialog() { + const [settingsDialogView, setSettingsDialogView] = useState(); + + const isSettingsDialogOpen = settingsDialogView !== undefined; + + function onCloseSettingsDialogClick() { + setSettingsDialogView(undefined); + } + + function onOpenSettingsDialogClick() { + setSettingsDialogView(SettingsDialogView.SelectSetting); + } + + return { + isSettingsDialogOpen, + settingsDialogView, + setSettingsDialogView, + onCloseSettingsDialogClick, + onOpenSettingsDialogClick, + }; +} diff --git a/apps/wallet-dashboard/components/Dialogs/settings/index.ts b/apps/wallet-dashboard/components/Dialogs/settings/index.ts new file mode 100644 index 00000000000..00a59c7b679 --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/index.ts @@ -0,0 +1,7 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './enums'; +export * from './SettingsDialog'; +export * from './hooks'; +export * from './views'; diff --git a/apps/wallet-dashboard/components/Dialogs/settings/views/NetworkSelectorView.tsx b/apps/wallet-dashboard/components/Dialogs/settings/views/NetworkSelectorView.tsx new file mode 100644 index 00000000000..cc9b573a9a9 --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/views/NetworkSelectorView.tsx @@ -0,0 +1,53 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import { Header, RadioButton } from '@iota/apps-ui-kit'; +import { DialogLayout, DialogLayoutBody } from '../../layout'; +import { NetworkConfiguration } from '@iota/iota-sdk/client'; +import { useIotaClientContext } from '@iota/dapp-kit'; +import toast from 'react-hot-toast'; + +interface NetworkSelectorViewProps { + handleClose: () => void; + onBack: () => void; +} + +export function NetworkSelectorView({ + handleClose, + onBack, +}: NetworkSelectorViewProps): JSX.Element { + const clientContext = useIotaClientContext(); + const activeNetwork = clientContext.network; + + async function handleNetworkChange(network: NetworkConfiguration) { + if (activeNetwork === network.id) { + return; + } + clientContext.selectNetwork(network.id); + toast.success(`Switched to ${network.name}`); + } + return ( + +
+ +
+ {Object.keys(clientContext.networks).map((network) => { + const networkConfig = clientContext.networks[ + network + ] as NetworkConfiguration; + return ( +
+ handleNetworkChange(networkConfig)} + /> +
+ ); + })} +
+ + + ); +} diff --git a/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx b/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx new file mode 100644 index 00000000000..d5d619b3186 --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/views/SettingsListView.tsx @@ -0,0 +1,60 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; +import { + Card, + CardAction, + CardActionType, + CardBody, + CardImage, + CardType, + Header, + ImageType, +} from '@iota/apps-ui-kit'; +import { DialogLayout, DialogLayoutBody } from '../../layout'; +import { SettingsDialogView } from '../enums'; +import { getNetwork } from '@iota/iota-sdk/client'; +import { useIotaClientContext } from '@iota/dapp-kit'; +import { Globe } from '@iota/ui-icons'; + +interface SettingsListViewProps { + handleClose: () => void; + setView: (view: SettingsDialogView) => void; +} + +export function SettingsListView({ handleClose, setView }: SettingsListViewProps): JSX.Element { + const { network } = useIotaClientContext(); + const { name: networkName } = getNetwork(network); + function onSelectSettingClick(view: SettingsDialogView): void { + setView(view); + } + const MENU_ITEMS = [ + { + title: 'Network', + subtitle: networkName, + icon: , + onClick: () => onSelectSettingClick(SettingsDialogView.NetworkSettings), + }, + ]; + return ( + +
+ +
+ {MENU_ITEMS.map((item, index) => ( + + +
+ {item.icon} +
+ + + + + ))} +
+ + + ); +} diff --git a/apps/wallet-dashboard/components/Dialogs/settings/views/index.ts b/apps/wallet-dashboard/components/Dialogs/settings/views/index.ts new file mode 100644 index 00000000000..738311af3ac --- /dev/null +++ b/apps/wallet-dashboard/components/Dialogs/settings/views/index.ts @@ -0,0 +1,5 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './SettingsListView'; +export * from './NetworkSelectorView'; diff --git a/apps/wallet-dashboard/providers/AppProviders.tsx b/apps/wallet-dashboard/providers/AppProviders.tsx index 68283c410ab..46d69758c94 100644 --- a/apps/wallet-dashboard/providers/AppProviders.tsx +++ b/apps/wallet-dashboard/providers/AppProviders.tsx @@ -19,11 +19,17 @@ export function AppProviders({ children }: React.PropsWithChildren) { const [queryClient] = useState(() => new QueryClient()); const allNetworks = getAllNetworks(); const defaultNetwork = getDefaultNetwork(); - + function handleNetworkChange() { + queryClient.resetQueries(); + } return ( - +