[408] Save overview switch in store

src/components/Portfolio/Portfolio.tsx

@@ -54,6 +54,8 @@ interface IProps {
   isBalanceLoading: boolean
   tokensList: SwapToken[]
   shouldDisable: boolean
+  overviewSelectedTab: OverviewSwitcher
+  handleOverviewSwitch: (panel: OverviewSwitcher) => void
 }
 
 const Portfolio: React.FC<IProps> = ({
@@ -70,7 +72,9 @@ const Portfolio: React.FC<IProps> = ({
   currentNetwork,
   handleClosePosition,
   handleClaimFee,
-  tokensList
+  tokensList,
+  overviewSelectedTab,
+  handleOverviewSwitch
 }) => {
   const { classes, cx } = useStyles()
 
@@ -81,15 +85,15 @@ const Portfolio: React.FC<IProps> = ({
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
   const { processedTokens, isProcesing } = useProcessedTokens(tokensList, isBalanceLoading)
 
-  const [activePanel, setActivePanel] = useState<OverviewSwitcher>(OverviewSwitcher.Overview)
+  const handleToggleChange = (
+    _event: React.MouseEvent<HTMLElement>,
+    newValue: OverviewSwitcher
+  ) => {
+    if (newValue === null) return
+    console.log(newValue)
+    handleOverviewSwitch(newValue)
+  }
 
-  const handleToggleChange =
-    <T,>(setter: React.Dispatch<React.SetStateAction<T>>) =>
-    (_: React.MouseEvent<HTMLElement>, newValue: T | null) => {
-      if (newValue !== null) {
-        setter(newValue)
-      }
-    }
   const initialHideUnknownTokensValue =
     localStorage.getItem('HIDE_UNKNOWN_TOKENS') === 'true' ||
     localStorage.getItem('HIDE_UNKNOWN_TOKENS') === null
@@ -323,43 +327,47 @@ const Portfolio: React.FC<IProps> = ({
                 <Box
                   className={classes.switchPoolsMarker}
                   sx={{
-                    left: activePanel === OverviewSwitcher.Overview ? 0 : '50%'
+                    left: overviewSelectedTab === OverviewSwitcher.Overview ? 0 : '50%'
                   }}
                 />
                 <ToggleButtonGroup
-                  value={activePanel}
+                  value={overviewSelectedTab}
                   exclusive
-                  onChange={handleToggleChange(setActivePanel)}
+                  onChange={handleToggleChange}
                   className={classes.switchPoolsButtonsGroupOverview}>
                   <ToggleButton
                     value={OverviewSwitcher.Overview}
                     disableRipple
                     className={classes.switchPoolsButtonOverview}
-                    style={{ fontWeight: activePanel === OverviewSwitcher.Overview ? 700 : 400 }}>
+                    style={{
+                      fontWeight: overviewSelectedTab === OverviewSwitcher.Overview ? 700 : 400
+                    }}>
                     Liquidity
                   </ToggleButton>
                   <ToggleButton
                     value={OverviewSwitcher.Wallet}
                     disableRipple
                     className={classes.switchPoolsButtonOverview}
                     classes={{ disabled: classes.disabledSwitchButton }}
-                    style={{ fontWeight: activePanel === OverviewSwitcher.Wallet ? 700 : 400 }}>
+                    style={{
+                      fontWeight: overviewSelectedTab === OverviewSwitcher.Wallet ? 700 : 400
+                    }}>
                     Your Wallet
                   </ToggleButton>
                 </ToggleButtonGroup>
               </Box>
             </Grid>
 
             <Box>
-              {activePanel === OverviewSwitcher.Overview && (
+              {overviewSelectedTab === OverviewSwitcher.Overview && (
                 <>
                   <Overview poolAssets={data} />
                   <Box className={classes.footer}>
                     <Box className={classes.footerItem}>{renderPositionDetails()}</Box>
                   </Box>
                 </>
               )}
-              {activePanel === OverviewSwitcher.Wallet && (
+              {overviewSelectedTab === OverviewSwitcher.Wallet && (
                 <>
                   <YourWallet
                     handleSnackbar={handleSnackbar}

src/containers/PortfolioWrapper/PortfolioWrapper.tsx

@@ -17,7 +17,14 @@ import {
   shouldDisable
 } from '@store/selectors/positions'
 import { actions as snackbarsActions } from '@store/reducers/snackbars'
-import { address, balanceLoading, balance, status, swapTokens } from '@store/selectors/solanaWallet'
+import {
+  address,
+  balanceLoading,
+  status,
+  swapTokens,
+  balance,
+  overviewSwitch
+} from '@store/selectors/solanaWallet'
 import { useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
@@ -58,6 +65,7 @@ const PortfolioWrapper = () => {
   const dispatch = useDispatch()
   const isConnected = useMemo(() => walletStatus === Status.Initialized, [walletStatus])
   const solBalance = useSelector(balance)
+  const overviewSelectedTab = useSelector(overviewSwitch)
 
   const canClosePosition = useMemo(() => {
     if (currentNetwork === NetworkType.Mainnet) {
@@ -261,6 +269,8 @@ const PortfolioWrapper = () => {
       handleClosePosition={handleClosePosition}
       handleClaimFee={handleClaimFee}
       noInitialPositions={list.length === 0}
+      overviewSelectedTab={overviewSelectedTab}
+      handleOverviewSwitch={option => dispatch(walletActions.setOverviewSwitch(option))}
     />
   ) : (
     <Grid className={classes.emptyContainer}>

src/store/reducers/solanaWallet.ts

@@ -2,7 +2,7 @@ import { DEFAULT_SOL_PUBLICKEY } from '@store/consts/static'
 import { BN } from '@project-serum/anchor'
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { PublicKey } from '@solana/web3.js'
-import { PayloadType } from '@store/consts/types'
+import { OverviewSwitcher, PayloadType } from '@store/consts/types'
 
 export enum Status {
   Uninitialized = 'uninitialized',
@@ -38,14 +38,16 @@ export interface ISolanaWallet {
   balance: BN
   accounts: { [key in string]: ITokenAccount }
   balanceLoading: boolean
+  overviewSwitch: OverviewSwitcher
 }
 
 export const defaultState: ISolanaWallet = {
   status: Status.Uninitialized,
   address: DEFAULT_SOL_PUBLICKEY,
   balance: new BN(0),
   accounts: {},
-  balanceLoading: false
+  balanceLoading: false,
+  overviewSwitch: OverviewSwitcher.Overview
 }
 
 export const solanaWalletSliceName = 'solanaWallet'
@@ -102,6 +104,10 @@ const solanaWalletSlice = createSlice({
     changeWalletInExtension(state) {
       return state
     },
+    setOverviewSwitch(state, action: PayloadAction<OverviewSwitcher>) {
+      state.overviewSwitch = action.payload
+      return state
+    },
     // Triggers rescan for tokens that we control
     rescanTokens() {},
     airdrop() {},

src/store/selectors/solanaWallet.ts

@@ -13,13 +13,10 @@ import {
 
 const store = (s: AnyProps) => s[solanaWalletSliceName] as ISolanaWallet
 
-export const { address, balance, accounts, status, balanceLoading } = keySelectors(store, [
-  'address',
-  'balance',
-  'accounts',
-  'status',
-  'balanceLoading'
-])
+export const { address, balance, accounts, status, balanceLoading, overviewSwitch } = keySelectors(
+  store,
+  ['address', 'balance', 'accounts', 'status', 'balanceLoading', 'overviewSwitch']
+)
 
 export const tokenBalance = (tokenAddress: PublicKey) =>
   createSelector(accounts, balance, (tokensAccounts, solBalance) => {
@@ -117,6 +114,7 @@ export const solanaWalletSelectors = {
   accounts,
   status,
   tokenAccount,
-  balanceLoading
+  balanceLoading,
+  overviewSwitch
 }
 export default solanaWalletSelectors