From 4c48657fca0c22d5d4aaf220ffb278ac67001e1f Mon Sep 17 00:00:00 2001 From: Vojtech Simetka Date: Tue, 2 Aug 2022 09:53:50 +0200 Subject: [PATCH] feat: pass isBeeDesktop as Bee Dashboard component property (#510) * feat: pass isBeeDesktop as Bee Dashboard component property * chore: remove console log --- src/App.tsx | 10 +++- src/components/SideBar.tsx | 3 +- src/hooks/apiHooks.test.ts | 4 +- src/hooks/apiHooks.tsx | 4 +- src/layout/Dashboard.tsx | 3 +- src/pages/account/wallet/AccountWallet.tsx | 9 +-- src/pages/info/index.tsx | 4 +- src/pages/settings/index.tsx | 8 +-- src/pages/top-up/GiftCardFund.tsx | 3 +- src/pages/top-up/Swap.tsx | 3 +- src/pages/top-up/index.tsx | 3 +- src/providers/Settings.tsx | 13 ++++- src/routes.tsx | 64 ++++++++++++---------- 13 files changed, 72 insertions(+), 59 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index fac85dc8..5bca4df9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,6 +23,7 @@ interface Props { beeApiUrl?: string beeDebugApiUrl?: string lockedApiSettings?: boolean + isBeeDesktop?: boolean } if (config.SENTRY_KEY) { @@ -30,11 +31,16 @@ if (config.SENTRY_KEY) { initSentry().catch(e => console.error(e)) } -const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElement => { +const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Props): ReactElement => { const mainApp = (
- + diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 411c3986..be7d82fb 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -9,6 +9,7 @@ import HomeIcon from 'remixicon-react/Home3LineIcon' import SettingsIcon from 'remixicon-react/Settings2LineIcon' import AccountIcon from 'remixicon-react/Wallet3LineIcon' import { Context as BeeContext } from '../providers/Bee' +import { Context as SettingsContext } from '../providers/Settings' import DashboardLogo from '../assets/dashboard-logo.svg' import DesktopLogo from '../assets/desktop-logo.svg' import { config } from '../config' @@ -66,7 +67,7 @@ const useStyles = makeStyles((theme: Theme) => export default function SideBar(): ReactElement { const classes = useStyles() - const isBeeDesktop = config.BEE_DESKTOP_ENABLED + const { isBeeDesktop } = useContext(SettingsContext) const { nodeInfo } = useContext(BeeContext) const navBarItems = [ diff --git a/src/hooks/apiHooks.test.ts b/src/hooks/apiHooks.test.ts index a5ec0a9a..8b7ad73b 100644 --- a/src/hooks/apiHooks.test.ts +++ b/src/hooks/apiHooks.test.ts @@ -41,9 +41,7 @@ afterAll(async () => { describe('useIsBeeDesktop', () => { it('should not have error when connected to bee-desktop', async () => { - const { result, waitFor } = renderHook(() => - useIsBeeDesktop({ BEE_DESKTOP_URL: serverCorrectURL, BEE_DESKTOP_ENABLED: true }), - ) + const { result, waitFor } = renderHook(() => useIsBeeDesktop(true, { BEE_DESKTOP_URL: serverCorrectURL })) await waitFor(() => { expect(result.current.isLoading).toBe(false) diff --git a/src/hooks/apiHooks.tsx b/src/hooks/apiHooks.tsx index ac36ccac..1b46bb5c 100644 --- a/src/hooks/apiHooks.tsx +++ b/src/hooks/apiHooks.tsx @@ -23,7 +23,6 @@ export interface NewDesktopVersionHook { interface Config { BEE_DESKTOP_URL: string - BEE_DESKTOP_ENABLED: boolean } /** @@ -31,12 +30,11 @@ interface Config { * * @returns isBeeDesktop true if this is run within bee-desktop */ -export const useIsBeeDesktop = (conf: Config = config): IsBeeDesktopHook => { +export const useIsBeeDesktop = (isBeeDesktop = false, conf: Config = config): IsBeeDesktopHook => { const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState(true) const [beeDesktopVersion, setBeeDesktopVersion] = useState('') const [isLoading, setLoading] = useState(true) const [error, setError] = useState(null) - const isBeeDesktop = conf.BEE_DESKTOP_ENABLED useEffect(() => { if (!isBeeDesktop) { diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index efa37a18..239594be 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -6,6 +6,7 @@ import CloseIcon from 'remixicon-react/CloseCircleLineIcon' import ErrorBoundary from '../components/ErrorBoundary' import SideBar from '../components/SideBar' import { Context as BeeContext } from '../providers/Bee' +import { Context as SettingsContext } from '../providers/Settings' import config from '../config' import * as Sentry from '@sentry/react' import ItsBroken from './ItsBroken' @@ -29,7 +30,7 @@ const Dashboard = (props: Props): ReactElement => { const classes = useStyles() const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl } = useContext(BeeContext) - const isBeeDesktop = config.BEE_DESKTOP_ENABLED + const { isBeeDesktop } = useContext(SettingsContext) const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop) const { enqueueSnackbar, closeSnackbar } = useSnackbar() diff --git a/src/pages/account/wallet/AccountWallet.tsx b/src/pages/account/wallet/AccountWallet.tsx index b6c2a0d8..6173b2b7 100644 --- a/src/pages/account/wallet/AccountWallet.tsx +++ b/src/pages/account/wallet/AccountWallet.tsx @@ -11,14 +11,15 @@ import ExpandableListItemKey from '../../../components/ExpandableListItemKey' import { Loading } from '../../../components/Loading' import { SwarmButton } from '../../../components/SwarmButton' import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard' -import config from '../../../config' -import { CheckState, Context } from '../../../providers/Bee' +import { CheckState, Context as BeeContext } from '../../../providers/Bee' +import { Context as SettingsContext } from '../../../providers/Settings' import { ROUTES } from '../../../routes' import { AccountNavigation } from '../AccountNavigation' import { Header } from '../Header' export function AccountWallet(): ReactElement { - const { balance, nodeAddresses, nodeInfo, status } = useContext(Context) + const { balance, nodeAddresses, nodeInfo, status } = useContext(BeeContext) + const { isBeeDesktop } = useContext(SettingsContext) const navigate = useNavigate() @@ -69,7 +70,7 @@ export function AccountWallet(): ReactElement { Check transactions on Blockscout - {config.BEE_DESKTOP_ENABLED && ( + {isBeeDesktop && ( Invite to Swarm... diff --git a/src/pages/info/index.tsx b/src/pages/info/index.tsx index 0a1ec61b..7805b9df 100644 --- a/src/pages/info/index.tsx +++ b/src/pages/info/index.tsx @@ -5,6 +5,7 @@ import ExchangeFunds from 'remixicon-react/ExchangeFundsLineIcon' import Upload from 'remixicon-react/UploadLineIcon' import { Context as BeeContext } from '../../providers/Bee' +import { Context as SettingsContext } from '../../providers/Settings' import Card from '../../components/Card' import Map from '../../components/Map' import ExpandableListItem from '../../components/ExpandableListItem' @@ -12,7 +13,6 @@ import { useNavigate } from 'react-router' import { ROUTES } from '../../routes' import { useIsBeeDesktop, useNewBeeDesktopVersion } from '../../hooks/apiHooks' import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop' -import config from '../../config' import NodeInfoCard from './NodeInfoCard' import { chainIdToName } from '../../utils/chain' @@ -28,7 +28,7 @@ export default function Status(): ReactElement { chequebookBalance, wallet, } = useContext(BeeContext) - const isBeeDesktop = config.BEE_DESKTOP_ENABLED + const { isBeeDesktop } = useContext(SettingsContext) const { beeDesktopVersion } = useIsBeeDesktop() const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop) const navigate = useNavigate() diff --git a/src/pages/settings/index.tsx b/src/pages/settings/index.tsx index 4170dc36..bac32188 100644 --- a/src/pages/settings/index.tsx +++ b/src/pages/settings/index.tsx @@ -4,7 +4,6 @@ import ExpandableList from '../../components/ExpandableList' import ExpandableListItemInput from '../../components/ExpandableListItemInput' import { Context as BeeContext } from '../../providers/Bee' import { Context as SettingsContext } from '../../providers/Settings' -import config from '../../config' import { useSnackbar } from 'notistack' export default function SettingsPage(): ReactElement { @@ -19,6 +18,7 @@ export default function SettingsPage(): ReactElement { ensResolver, providerUrl, isLoading, + isBeeDesktop, setAndPersistJsonRpcProvider, } = useContext(SettingsContext) const { refresh } = useContext(BeeContext) @@ -39,13 +39,13 @@ export default function SettingsPage(): ReactElement { label="Bee API" value={apiUrl} onConfirm={setApiUrl} - locked={lockedApiSettings || config.BEE_DESKTOP_ENABLED} + locked={lockedApiSettings || isBeeDesktop} /> - {config.BEE_DESKTOP_ENABLED && ( + {isBeeDesktop && ( diff --git a/src/pages/top-up/GiftCardFund.tsx b/src/pages/top-up/GiftCardFund.tsx index 51d9ee13..6f2f23f3 100644 --- a/src/pages/top-up/GiftCardFund.tsx +++ b/src/pages/top-up/GiftCardFund.tsx @@ -17,11 +17,10 @@ import { ROUTES } from '../../routes' import { sleepMs } from '../../utils' import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop' import { ResolvedWallet } from '../../utils/wallet' -import config from '../../config' import { BeeModes } from '@ethersphere/bee-js' export function GiftCardFund(): ReactElement { - const isBeeDesktop = config.BEE_DESKTOP_ENABLED + const { isBeeDesktop } = useContext(SettingsContext) const { nodeAddresses, balance, nodeInfo } = useContext(BeeContext) const { provider, providerUrl } = useContext(SettingsContext) diff --git a/src/pages/top-up/Swap.tsx b/src/pages/top-up/Swap.tsx index 471b779f..7134cf47 100644 --- a/src/pages/top-up/Swap.tsx +++ b/src/pages/top-up/Swap.tsx @@ -22,7 +22,6 @@ import { ROUTES } from '../../routes' import { sleepMs } from '../../utils' import { getBzzPriceAsDai, performSwap, restartBeeNode, upgradeToLightNode } from '../../utils/desktop' import { TopUpProgressIndicator } from './TopUpProgressIndicator' -import config from '../../config' const MINIMUM_XDAI = '0.1' const MINIMUM_XBZZ = '0.1' @@ -39,7 +38,7 @@ export function Swap({ header }: Props): ReactElement { const { providerUrl } = useContext(SettingsContext) const { balance, nodeAddresses, nodeInfo } = useContext(BeeContext) - const isBeeDesktop = config.BEE_DESKTOP_ENABLED + const { isBeeDesktop } = useContext(SettingsContext) const navigate = useNavigate() const { enqueueSnackbar } = useSnackbar() diff --git a/src/pages/top-up/index.tsx b/src/pages/top-up/index.tsx index 01de99e1..35332968 100644 --- a/src/pages/top-up/index.tsx +++ b/src/pages/top-up/index.tsx @@ -12,7 +12,6 @@ import { SwarmButton } from '../../components/SwarmButton' import { ROUTES } from '../../routes' import { CheckState, Context as BeeContext } from '../../providers/Bee' import { Context as SettingsContext } from '../../providers/Settings' -import config from '../../config' import { BeeModes } from '@ethersphere/bee-js' import { restartBeeNode, upgradeToLightNode } from '../../utils/desktop' import { Loading } from '../../components/Loading' @@ -39,7 +38,7 @@ const MINIMUM_XBZZ = '0.1' export default function TopUp(): ReactElement { const navigate = useNavigate() const styles = useStyles() - const isBeeDesktop = config.BEE_DESKTOP_ENABLED + const { isBeeDesktop } = useContext(SettingsContext) const { balance, nodeInfo, status } = useContext(BeeContext) const { providerUrl } = useContext(SettingsContext) const [loading, setLoading] = useState(false) diff --git a/src/providers/Settings.tsx b/src/providers/Settings.tsx index 46d5412a..33eadb84 100644 --- a/src/providers/Settings.tsx +++ b/src/providers/Settings.tsx @@ -1,6 +1,6 @@ import { Bee, BeeDebug } from '@ethersphere/bee-js' import { providers } from 'ethers' -import { createContext, ReactChild, ReactElement, useEffect, useState } from 'react' +import { createContext, ReactNode, ReactElement, useEffect, useState } from 'react' import { config as appConfig } from '../config' import { useGetBeeConfig } from '../hooks/apiHooks' import { restartBeeNode, setJsonRpcInDesktop } from '../utils/desktop' @@ -26,6 +26,7 @@ interface ContextInterface { setApiUrl: (url: string) => void setDebugApiUrl: (url: string) => void setAndPersistJsonRpcProvider: (url: string) => Promise + isBeeDesktop: boolean isLoading: boolean error: Error | null } @@ -45,6 +46,7 @@ const initialValues: ContextInterface = { cors: null, dataDir: null, ensResolver: null, + isBeeDesktop: false, isLoading: true, error: null, } @@ -53,10 +55,11 @@ export const Context = createContext(initialValues) export const Consumer = Context.Consumer interface Props { - children: ReactChild + children: ReactNode beeApiUrl?: string beeDebugApiUrl?: string lockedApiSettings?: boolean + isBeeDesktop?: boolean } export function Provider({ @@ -64,6 +67,7 @@ export function Provider({ beeApiUrl, beeDebugApiUrl, lockedApiSettings: extLockedApiSettings, + isBeeDesktop: extIsBeeDesktop, }: Props): ReactElement { const [apiUrl, setApiUrl] = useState(initialValues.apiUrl) const [apiDebugUrl, setDebugApiUrl] = useState(initialValues.apiDebugUrl) @@ -74,13 +78,15 @@ export function Provider({ const [provider, setProvider] = useState(initialValues.provider) const { config, isLoading, error } = useGetBeeConfig() + const isBeeDesktop = Boolean(extIsBeeDesktop ?? appConfig.BEE_DESKTOP_ENABLED) + async function setAndPersistJsonRpcProvider(providerUrl: string) { try { localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl) setProviderUrl(providerUrl) setProvider(new providers.JsonRpcProvider(providerUrl)) - if (appConfig.BEE_DESKTOP_ENABLED) { + if (isBeeDesktop) { await setJsonRpcInDesktop(providerUrl) await restartBeeNode() } @@ -146,6 +152,7 @@ export function Provider({ dataDir: config?.['data-dir'] ?? null, ensResolver: config?.['resolver-options'] ?? null, setAndPersistJsonRpcProvider, + isBeeDesktop, isLoading, error, }} diff --git a/src/routes.tsx b/src/routes.tsx index b474ce03..2f80ee1b 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,4 +1,4 @@ -import type { ReactElement } from 'react' +import { ReactElement, useContext } from 'react' import { Route, Routes } from 'react-router-dom' import { AccountChequebook } from './pages/account/chequebook/AccountChequebook' import { AccountFeeds } from './pages/account/feeds/AccountFeeds' @@ -23,7 +23,7 @@ import { CryptoTopUpIndex } from './pages/top-up/CryptoTopUpIndex' import { GiftCardFund } from './pages/top-up/GiftCardFund' import { GiftCardTopUpIndex } from './pages/top-up/GiftCardTopUpIndex' import { Swap } from './pages/top-up/Swap' -import config from './config' +import { Context as SettingsContext } from './providers/Settings' export enum ROUTES { INFO = '/', @@ -60,33 +60,37 @@ export const ACCOUNT_TABS = [ ROUTES.ACCOUNT_FEEDS, ] -const BaseRouter = (): ReactElement => ( - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - {config.BEE_DESKTOP_ENABLED && } />} - -) +const BaseRouter = (): ReactElement => { + const { isBeeDesktop } = useContext(SettingsContext) + + return ( + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + {isBeeDesktop && } />} + + ) +} export default BaseRouter