From bdd2e17607c03212fcd3305c180ef15388eeee7f Mon Sep 17 00:00:00 2001 From: OmniWired Date: Wed, 12 Jul 2023 20:42:22 +0900 Subject: [PATCH] fix: sidebar minimized on load (#635) * fix: SideNavigationBar not expanded by default * fix: buy tokens icon and texts * feat(sidebar): Remember Sidebar expanded state * refactor(sidebar): Remove SidebarContextProvider handle state using redux * Update packages/components/navigation/BuyTokens.tsx Co-authored-by: WaDadidou <50441633+WaDadidou@users.noreply.github.com> * fix(sidebar): on Mobile: set sidebar as not expanded --------- Co-authored-by: WaDadidou <50441633+WaDadidou@users.noreply.github.com> --- App.tsx | 7 +- packages/components/navigation/BuyTokens.tsx | 14 ++-- packages/components/navigation/Sidebar.tsx | 6 +- packages/context/SidebarProvider.tsx | 75 +++++++------------- packages/store/slices/settings.ts | 9 +++ 5 files changed, 48 insertions(+), 63 deletions(-) diff --git a/App.tsx b/App.tsx index 8ad2f17ef1..f6627b706c 100644 --- a/App.tsx +++ b/App.tsx @@ -19,7 +19,6 @@ import { Navigator } from "./packages/components/navigation/Navigator"; import { DropdownsContextProvider } from "./packages/context/DropdownsProvider"; import { FeedbacksContextProvider } from "./packages/context/FeedbacksProvider"; import { SearchBarContextProvider } from "./packages/context/SearchBarProvider"; -import { SidebarContextProvider } from "./packages/context/SidebarProvider"; import { TNSMetaDataListContextProvider } from "./packages/context/TNSMetaDataListProvider"; import { TNSContextProvider } from "./packages/context/TNSProvider"; import { TransactionModalsProvider } from "./packages/context/TransactionModalsProvider"; @@ -62,10 +61,8 @@ export default function App() { - - - - + + diff --git a/packages/components/navigation/BuyTokens.tsx b/packages/components/navigation/BuyTokens.tsx index 148198d39f..1757316e6c 100644 --- a/packages/components/navigation/BuyTokens.tsx +++ b/packages/components/navigation/BuyTokens.tsx @@ -1,20 +1,22 @@ import React from "react"; -import { Linking, TouchableOpacity } from "react-native"; +import { Linking, TextStyle, TouchableOpacity } from "react-native"; import { CreditCardIcon } from "react-native-heroicons/outline"; import { primaryColor } from "../../utils/style/colors"; -import { fontBold16 } from "../../utils/style/fonts"; import { layout } from "../../utils/style/layout"; import { BrandText } from "../BrandText"; -export const BuyTokens: React.FC = () => { +export const BuyTokens: React.FC<{ + flexDirection: "row" | "column"; + textStyle: TextStyle; +}> = ({ flexDirection, textStyle }) => { return ( { Linking.openURL("https://frontier.osmosis.zone/?from=OSMO&to=TORI"); @@ -22,9 +24,9 @@ export const BuyTokens: React.FC = () => { > - Buy Tokens + Buy Tokens ); }; diff --git a/packages/components/navigation/Sidebar.tsx b/packages/components/navigation/Sidebar.tsx index f42757ecfd..7d9b90bad4 100644 --- a/packages/components/navigation/Sidebar.tsx +++ b/packages/components/navigation/Sidebar.tsx @@ -22,6 +22,7 @@ import useSelectedWallet from "../../hooks/useSelectedWallet"; import { NetworkKind } from "../../networks"; import { useAppNavigation } from "../../utils/navigation"; import { neutral17, neutral33 } from "../../utils/style/colors"; +import { fontBold16, fontBold9 } from "../../utils/style/fonts"; import { smallSidebarWidth, fullSidebarWidth, @@ -146,7 +147,10 @@ export const Sidebar: React.FC = () => { /> - + {selectedNetworkKind === NetworkKind.Cosmos && diff --git a/packages/context/SidebarProvider.tsx b/packages/context/SidebarProvider.tsx index 0f65d75cd7..fe56dffa4d 100644 --- a/packages/context/SidebarProvider.tsx +++ b/packages/context/SidebarProvider.tsx @@ -1,47 +1,33 @@ -import React, { - createContext, - useContext, - useState, - useEffect, - useMemo, -} from "react"; -import { useWindowDimensions } from "react-native"; +import { useEffect, useMemo } from "react"; import { useSelector } from "react-redux"; +import { useIsMobile } from "../hooks/useIsMobile"; import { getValuesFromId, SEPARATOR } from "../screens/DAppStore/query/util"; import { selectAvailableApps, selectCheckedApps, setSelectedApps, } from "../store/slices/dapps-store"; +import { + selectSidebarExpanded, + setSidebarExpanded, +} from "../store/slices/settings"; import { useAppDispatch } from "../store/store"; import { SIDEBAR_LIST } from "../utils/sidebar"; -interface DefaultValue { - isSidebarExpanded: boolean; - toggleSidebar: () => void; - dynamicSidebar: { [p: string]: any }; -} - -const defaultValue: DefaultValue = { - isSidebarExpanded: false, - toggleSidebar: () => {}, - dynamicSidebar: {}, -}; - -const SidebarContext = createContext(defaultValue); - -const MOBILE_WIDTH = 768; - -export const SidebarContextProvider: React.FC = ({ children }) => { - // The entered isSidebarExpanded - const [isSidebarExpanded, setIsSidebarExpanded] = useState( - defaultValue.isSidebarExpanded - ); - +export const useSidebar = () => { + const isSidebarExpanded = useSelector(selectSidebarExpanded); const selectedApps = useSelector(selectCheckedApps); const availableApps = useSelector(selectAvailableApps); const dispatch = useAppDispatch(); + // on mobile sidebar is not expanded on load + const isMobile = useIsMobile(); + useEffect(() => { + if (isMobile) { + dispatch(setSidebarExpanded(false)); + } + }, [dispatch, isMobile]); + useEffect(() => { if (selectedApps.length === 0 && Object.values(availableApps).length > 0) { dispatch( @@ -87,27 +73,14 @@ export const SidebarContextProvider: React.FC = ({ children }) => { return dynamicAppsSelection; }, [availableApps, selectedApps]); - const { width: windowWidth } = useWindowDimensions(); - useEffect(() => { - setIsSidebarExpanded( - windowWidth >= MOBILE_WIDTH ? defaultValue.isSidebarExpanded : false - ); - }, [windowWidth]); - - const toggleSidebar = () => setIsSidebarExpanded(!isSidebarExpanded); + const toggleSidebar = () => { + dispatch(setSidebarExpanded(!isSidebarExpanded)); + }; - return ( - - {children} - - ); + return { + isSidebarExpanded, + toggleSidebar, + dynamicSidebar, + }; }; - -export const useSidebar = () => useContext(SidebarContext); diff --git a/packages/store/slices/settings.ts b/packages/store/slices/settings.ts index 2b72c1c1a1..745bf48d4a 100644 --- a/packages/store/slices/settings.ts +++ b/packages/store/slices/settings.ts @@ -10,6 +10,7 @@ interface Settings { isAdenaConnected: boolean; alreadyVisited: boolean; areTestnetsEnabled: boolean; + sideBarExpanded: boolean; } const initialState: Settings = { @@ -20,6 +21,7 @@ const initialState: Settings = { isAdenaConnected: false, alreadyVisited: false, areTestnetsEnabled: false, + sideBarExpanded: true, }; export const selectSelectedNetworkId = (state: RootState) => @@ -37,6 +39,9 @@ export const selectIsAdenaConnected = (state: RootState) => export const selectAreTestnetsEnabled = (state: RootState) => state.settings.areTestnetsEnabled; +export const selectSidebarExpanded = (state: RootState) => + state.settings.sideBarExpanded; + export const selectNFTStorageAPI = (state: RootState) => state.settings.NFTStorageAPI; @@ -59,6 +64,9 @@ const settingsSlice = createSlice({ setAreTestnetsEnabled: (state, action: PayloadAction) => { state.areTestnetsEnabled = action.payload; }, + setSidebarExpanded: (state, action: PayloadAction) => { + state.sideBarExpanded = action.payload; + }, setNFTStorageAPI: (state, action: PayloadAction) => { state.NFTStorageAPI = action.payload; }, @@ -71,6 +79,7 @@ export const { setIsKeplrConnected, setIsAdenaConnected, setAreTestnetsEnabled, + setSidebarExpanded, setNFTStorageAPI, } = settingsSlice.actions;