From d0d38ff5784c6a897daaa6fe954d5ec97875024e Mon Sep 17 00:00:00 2001 From: Sergey Zhuravlev Date: Tue, 10 Dec 2024 16:18:44 +0100 Subject: [PATCH] fix: restored basket tab in sidebar (#2824) --- src/renderer/app/modelInit.ts | 2 + .../features/basket-navigation/index.tsx | 36 +++++++++ src/renderer/features/navigation/index.ts | 1 - .../features/navigation/ui/NavItem.tsx | 40 ---------- .../features/navigation/ui/Navigation.tsx | 77 ------------------- .../notifications-navigation/index.ts | 2 +- .../features/settings-navigation/index.ts | 2 +- src/renderer/shared/config/features/index.ts | 1 + 8 files changed, 41 insertions(+), 120 deletions(-) create mode 100644 src/renderer/features/basket-navigation/index.tsx delete mode 100644 src/renderer/features/navigation/ui/NavItem.tsx delete mode 100644 src/renderer/features/navigation/ui/Navigation.tsx diff --git a/src/renderer/app/modelInit.ts b/src/renderer/app/modelInit.ts index a4c3783809..854cdad6ff 100644 --- a/src/renderer/app/modelInit.ts +++ b/src/renderer/app/modelInit.ts @@ -8,6 +8,7 @@ import { walletModel } from '@/entities/wallet'; import { multisigsModel } from '@/processes/multisigs'; import { assetsSettingsModel } from '@/features/assets'; import { assetsNavigationFeature } from '@/features/assets-navigation'; +import { basketNavigationFeature } from '@/features/basket-navigation'; import { contactsNavigationFeature } from '@/features/contacts-navigation'; import { fellowshipNavigationFeature } from '@/features/fellowship-navigation'; import { governanceNavigationFeature } from '@/features/governance-navigation'; @@ -27,6 +28,7 @@ export const initModel = () => { contactsNavigationFeature.start(); notificationsNavigationFeature.start(); settingsNavigationFeature.start(); + basketNavigationFeature.start(); walletsSelectFeature.start(); diff --git a/src/renderer/features/basket-navigation/index.tsx b/src/renderer/features/basket-navigation/index.tsx new file mode 100644 index 0000000000..bfe5ae23a9 --- /dev/null +++ b/src/renderer/features/basket-navigation/index.tsx @@ -0,0 +1,36 @@ +import { useUnit } from 'effector-react'; + +import { $features } from '@/shared/config/features'; +import { createFeature } from '@/shared/effector'; +import { Paths } from '@/shared/routes'; +import { BodyText } from '@/shared/ui'; +import { basketModel } from '@/entities/basket'; +import { walletModel } from '@/entities/wallet'; +import { navigationBottomLinksPipeline } from '@/features/app-shell'; +import { basketUtils } from '@/features/operations/OperationsConfirm'; + +export const basketNavigationFeature = createFeature({ + name: 'basket/navigation', + enable: $features.map(({ basket }) => basket), +}); + +basketNavigationFeature.inject(navigationBottomLinksPipeline, (items) => { + const wallet = useUnit(walletModel.$activeWallet); + const basket = useUnit(basketModel.$basket); + + if (!wallet || !basketUtils.isBasketAvailable(wallet)) { + return items; + } + + return items.concat({ + order: 0, + icon: 'operations', + title: 'navigation.basketLabel', + link: Paths.BASKET, + badge: ( + + {basket.filter((tx) => tx.initiatorWallet === wallet?.id).length || ''} + + ), + }); +}); diff --git a/src/renderer/features/navigation/index.ts b/src/renderer/features/navigation/index.ts index ea07128af2..7b1dbf64e5 100644 --- a/src/renderer/features/navigation/index.ts +++ b/src/renderer/features/navigation/index.ts @@ -1,2 +1 @@ -export { Navigation } from './ui/Navigation'; export { navigationModel } from './model/navigation-model'; diff --git a/src/renderer/features/navigation/ui/NavItem.tsx b/src/renderer/features/navigation/ui/NavItem.tsx deleted file mode 100644 index 7170cc407b..0000000000 --- a/src/renderer/features/navigation/ui/NavItem.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { type ReactNode } from 'react'; -import { NavLink } from 'react-router-dom'; - -import { useI18n } from '@/shared/i18n'; -import { cnTw } from '@/shared/lib/utils'; -import { BodyText, Icon } from '@/shared/ui'; -import { type IconNames } from '@/shared/ui/Icon/data'; - -export type Props = { - title: string; - link: string; - icon: IconNames; - badge?: ReactNode; -}; - -export const NavItem = ({ title, link, icon, badge }: Props) => { - const { t } = useI18n(); - - return ( - - cnTw( - 'flex cursor-pointer select-none items-center rounded-md px-3.5 py-2.5 outline-offset-reduced hover:bg-tab-background', - isActive && 'bg-tab-background', - ) - } - > - {({ isActive }) => ( - <> - - - {t(title)} - - {badge} - - )} - - ); -}; diff --git a/src/renderer/features/navigation/ui/Navigation.tsx b/src/renderer/features/navigation/ui/Navigation.tsx deleted file mode 100644 index 6a58d45007..0000000000 --- a/src/renderer/features/navigation/ui/Navigation.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useUnit } from 'effector-react'; -import { memo } from 'react'; - -import { MultisigTxInitStatus } from '@/shared/core'; -import { useI18n } from '@/shared/i18n'; -import { Paths } from '@/shared/routes'; -import { BodyText } from '@/shared/ui'; -import { basketModel } from '@/entities/basket'; -import { useMultisigTx } from '@/entities/multisig'; -import { networkModel } from '@/entities/network'; -import { walletModel, walletUtils } from '@/entities/wallet'; -import { basketUtils } from '@/features/operations/OperationsConfirm'; - -import { NavItem, type Props as NavItemProps } from './NavItem'; - -export const Navigation = memo(() => { - const { t } = useI18n(); - - const chains = useUnit(networkModel.$chains); - const wallet = useUnit(walletModel.$activeWallet); - const basket = useUnit(basketModel.$basket); - - const { getLiveAccountMultisigTxs } = useMultisigTx({}); - - const txs = getLiveAccountMultisigTxs(walletUtils.isMultisig(wallet) ? [wallet.accounts[0].accountId] : []).filter( - (tx) => tx.status === MultisigTxInitStatus.SIGNING && chains[tx.chainId], - ); - - const NavItems: NavItemProps[] = [ - { icon: 'asset', title: 'navigation.balancesLabel', link: Paths.ASSETS }, - { icon: 'staking', title: 'navigation.stakingLabel', link: Paths.STAKING }, - { icon: 'governance', title: 'navigation.governance', link: Paths.GOVERNANCE }, - { icon: 'fellowshipNav', title: 'navigation.fellowship', link: Paths.FELLOWSHIP }, - { - icon: 'operations', - title: 'navigation.mstOperationLabel', - link: Paths.OPERATIONS, - badge: Boolean(txs.length) && {txs.length}, - }, - { icon: 'addressBook', title: 'navigation.addressBookLabel', link: Paths.ADDRESS_BOOK }, - ]; - - return ( - - ); -}); diff --git a/src/renderer/features/notifications-navigation/index.ts b/src/renderer/features/notifications-navigation/index.ts index 82243e1e96..05ceccfd2a 100644 --- a/src/renderer/features/notifications-navigation/index.ts +++ b/src/renderer/features/notifications-navigation/index.ts @@ -10,7 +10,7 @@ export const notificationsNavigationFeature = createFeature({ notificationsNavigationFeature.inject(navigationBottomLinksPipeline, (items) => { return items.concat({ - order: 0, + order: 1, icon: 'notification', title: 'navigation.notificationsLabel', link: Paths.NOTIFICATIONS, diff --git a/src/renderer/features/settings-navigation/index.ts b/src/renderer/features/settings-navigation/index.ts index ba540b5562..0a5fec129a 100644 --- a/src/renderer/features/settings-navigation/index.ts +++ b/src/renderer/features/settings-navigation/index.ts @@ -10,7 +10,7 @@ export const settingsNavigationFeature = createFeature({ settingsNavigationFeature.inject(navigationBottomLinksPipeline, (items) => { return items.concat({ - order: 1, + order: 2, icon: 'settings', title: 'navigation.settingsLabel', link: Paths.SETTINGS, diff --git a/src/renderer/shared/config/features/index.ts b/src/renderer/shared/config/features/index.ts index a85642a5af..bd817bcb5f 100644 --- a/src/renderer/shared/config/features/index.ts +++ b/src/renderer/shared/config/features/index.ts @@ -13,6 +13,7 @@ export const $features = createStore({ // TODO: Dev only fellowship: isDev(), operations: true, + basket: true, contacts: true, notifications: true, settings: true,