diff --git a/.github/workflows/check.yaml b/.github/workflows/check.yaml index 1008c51..18d9532 100644 --- a/.github/workflows/check.yaml +++ b/.github/workflows/check.yaml @@ -19,7 +19,6 @@ jobs: env: REACT_APP_BEE_HOST: https://api.test-node.staging.ethswarm.org/ REACT_APP_BEE_DEBUG_HOST: https://debug.test-node.staging.ethswarm.org/ - REACT_APP_DEV_MODE: 1 steps: - uses: actions/checkout@v2 diff --git a/README.md b/README.md index b37cf57..be738e5 100644 --- a/README.md +++ b/README.md @@ -94,7 +94,15 @@ npm start The Bee Dashboard runs in development mode on [http://localhost:3031/](http://localhost:3031/) -> Setting the `REACT_APP_DEV_MODE=1` environment variable, or opening Bee Dashboard with the query string `?devMode=1` loosens some checks. This makes it possible to develop Bee Dashboard without having connected peers and chequebook properly set up, effectively supporting the dev mode of Bee itself. +#### Environmental variables + +The CRA supports to specify "environmental variables" during build time which are then hardcoded into the served static files. +We support following variables: + + - `REACT_APP_BEE_DESKTOP_ENABLED` (`boolean`) that toggles if the Dashboard is in Desktop mode or not. + - `REACT_APP_BEE_DESKTOP_URL` (`string`) defines custom URL where the Desktop API is expected. By default, it is same origin under which the Dashboard is served. + - `REACT_APP_BEE_API_URL` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used. + - `REACT_APP_BEE_DEBUG_API_URL` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used. #### Swarm Desktop development diff --git a/src/App.tsx b/src/App.tsx index 6272670..902ebf3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -20,10 +20,11 @@ interface Props { beeApiUrl?: string beeDebugApiUrl?: string lockedApiSettings?: boolean - isBeeDesktop?: boolean + isDesktop?: boolean + desktopUrl?: string } -const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Props): ReactElement => { +const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isDesktop, desktopUrl }: Props): ReactElement => { const mainApp = (
@@ -31,7 +32,8 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings, isBeeDesktop }: Pro beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings} - isBeeDesktop={isBeeDesktop} + isDesktop={isDesktop} + desktopUrl={desktopUrl} > diff --git a/src/components/EthereumAddress.tsx b/src/components/EthereumAddress.tsx index 8e51016..ec65d23 100644 --- a/src/components/EthereumAddress.tsx +++ b/src/components/EthereumAddress.tsx @@ -1,9 +1,9 @@ import { Typography } from '@material-ui/core/' import { ReactElement } from 'react' import Identicon from 'react-identicons' -import { config } from '../config' import ClipboardCopy from './ClipboardCopy' import QRCodeModal from './QRCodeModal' +import { BLOCKCHAIN_EXPLORER_URL } from '../constants' interface Props { address: string | undefined @@ -36,7 +36,7 @@ export default function EthereumAddress(props: Props): ReactElement { } : { marginRight: '7px' } } - href={`${config.BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`} + href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`} target="_blank" rel="noreferrer" > diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 9f14d54..dac6332 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -12,11 +12,11 @@ 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' import { ROUTES } from '../routes' import SideBarItem from './SideBarItem' import SideBarStatus from './SideBarStatus' import { BeeModes } from '@ethersphere/bee-js' +import { BEE_DOCS_HOST } from '../constants' const drawerWidth = 300 @@ -66,7 +66,7 @@ const useStyles = makeStyles((theme: Theme) => export default function SideBar(): ReactElement { const classes = useStyles() - const { isBeeDesktop } = useContext(SettingsContext) + const { isDesktop } = useContext(SettingsContext) const { nodeInfo } = useContext(BeeContext) const navBarItems = [ @@ -99,7 +99,7 @@ export default function SideBar(): ReactElement { - swarm + swarm @@ -118,7 +118,7 @@ export default function SideBar(): ReactElement { - + } iconEnd={} diff --git a/src/components/TroubleshootConnectionCard.tsx b/src/components/TroubleshootConnectionCard.tsx index 3904846..ec5ca36 100644 --- a/src/components/TroubleshootConnectionCard.tsx +++ b/src/components/TroubleshootConnectionCard.tsx @@ -3,8 +3,8 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import type { ReactElement } from 'react' import Activity from 'remixicon-react/PulseLineIcon' import { Link } from 'react-router-dom' -import { config } from '../config' import { ROUTES } from '../routes' +import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants' const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -37,11 +37,11 @@ export default function TroubleshootConnectionCard(): ReactElement { Please check your node status to fix the problem. You can also check out the{' '} - + Swarm Bee Docs {' '} or ask for support on the{' '} - + Ethereum Swarm Discord . diff --git a/src/config.ts b/src/config.ts deleted file mode 100644 index 1d7c52a..0000000 --- a/src/config.ts +++ /dev/null @@ -1,29 +0,0 @@ -class Config { - public readonly BEE_API_HOST: string - public readonly BEE_DEBUG_API_HOST: string - public readonly BLOCKCHAIN_EXPLORER_URL: string - public readonly BEE_DOCS_HOST: string - public readonly BEE_DISCORD_HOST: string - public readonly GITHUB_REPO_URL: string - public readonly BEE_DESKTOP_ENABLED: boolean - public readonly BEE_DESKTOP_URL: string - public readonly DEFAULT_RPC_URL: string - - constructor() { - this.BEE_API_HOST = sessionStorage.getItem('api_host') ?? process.env.REACT_APP_BEE_HOST ?? 'http://localhost:1633' - this.BEE_DEBUG_API_HOST = - sessionStorage.getItem('debug_api_host') ?? process.env.REACT_APP_BEE_DEBUG_HOST ?? 'http://localhost:1635' - this.BLOCKCHAIN_EXPLORER_URL = - process.env.REACT_APP_BLOCKCHAIN_EXPLORER_URL ?? 'https://blockscout.com/xdai/mainnet' - this.BEE_DOCS_HOST = process.env.REACT_APP_BEE_DOCS_HOST ?? 'https://docs.ethswarm.org/docs/' - this.BEE_DISCORD_HOST = process.env.REACT_APP_BEE_DISCORD_HOST ?? 'https://discord.gg/eKr9XPv7' - this.GITHUB_REPO_URL = process.env.REACT_APP_BEE_GITHUB_REPO_URL ?? 'https://api.github.com/repos/ethersphere/bee' - this.BEE_DESKTOP_ENABLED = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true' - this.BEE_DESKTOP_URL = process.env.REACT_APP_BEE_DESKTOP_URL ?? window.location.origin - this.DEFAULT_RPC_URL = process.env.REACT_APP_DEFAULT_RPC_URL ?? 'https://xdai.fairdatasociety.org' - } -} - -export const config = new Config() - -export default config diff --git a/src/constants.ts b/src/constants.ts index e04ec12..9a69931 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,4 +1,14 @@ export const META_FILE_NAME = '.swarmgatewaymeta.json' export const PREVIEW_FILE_NAME = '.swarmgatewaypreview.jpeg' export const PREVIEW_DIMENSIONS = { maxWidth: 250, maxHeight: 175 } -export const BZZ_LINK_DOMAIN = process.env.REACT_APP_BZZ_LINK_DOMAIN || 'bzz.link' +export const BZZ_LINK_DOMAIN = 'bzz.link' +export const BLOCKCHAIN_EXPLORER_URL = 'https://blockscout.com/xdai/mainnet' +export const BEE_DOCS_HOST = 'https://docs.ethswarm.org/docs/' +export const BEE_DISCORD_HOST = 'https://discord.gg/eKr9XPv7' +export const GITHUB_REPO_URL = 'https://api.github.com/repos/ethersphere/bee' +export const BEE_DESKTOP_LATEST_RELEASE_PAGE = 'https://github.com/ethersphere/bee-desktop/releases/latest' +export const BEE_DESKTOP_LATEST_RELEASE_PAGE_API = + 'https://api.github.com/repos/ethersphere/bee-desktop/releases/latest' +export const DEFAULT_BEE_API_HOST = 'http://localhost:1633' +export const DEFAULT_BEE_DEBUG_API_HOST = 'http://localhost:1635' +export const DEFAULT_RPC_URL = 'https://xdai.fairdatasociety.org' diff --git a/src/hooks/apiHooks.test.ts b/src/hooks/apiHooks.test.ts index 1226a70..65dfc0f 100644 --- a/src/hooks/apiHooks.test.ts +++ b/src/hooks/apiHooks.test.ts @@ -41,7 +41,7 @@ afterAll(async () => { describe('useBeeDesktop', () => { it('should not have error when connected to bee-desktop', async () => { - const { result, waitFor } = renderHook(() => useBeeDesktop(true, { BEE_DESKTOP_URL: serverCorrectURL })) + const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL)) await waitFor(() => { expect(result.current.isLoading).toBe(false) diff --git a/src/hooks/apiHooks.tsx b/src/hooks/apiHooks.tsx index 634993e..395e543 100644 --- a/src/hooks/apiHooks.tsx +++ b/src/hooks/apiHooks.tsx @@ -1,8 +1,8 @@ import axios from 'axios' import { useEffect, useState } from 'react' -import { config } from '../config' import { getLatestBeeDesktopVersion } from '../utils/desktop' import { getJson } from '../utils/net' +import { GITHUB_REPO_URL } from '../constants' export interface LatestBeeReleaseHook { latestBeeRelease: LatestBeeRelease | null @@ -21,11 +21,7 @@ export interface NewDesktopVersionHook { newBeeDesktopVersion: string } -interface Config { - BEE_DESKTOP_URL: string -} - -export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeDesktopHook => { +export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => { const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState(true) const [beeDesktopVersion, setBeeDesktopVersion] = useState('') const [isLoading, setLoading] = useState(true) @@ -37,7 +33,7 @@ export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeD setError(null) } else { axios - .get(`${conf.BEE_DESKTOP_URL}/info`) + .get(`${desktopUrl}/info`) .then(res => { setBeeDesktopVersion(res.data?.version) setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled) @@ -50,13 +46,13 @@ export const useBeeDesktop = (isBeeDesktop = false, conf: Config = config): BeeD setLoading(false) }) } - }, [conf, isBeeDesktop]) + }, [desktopUrl, isBeeDesktop]) return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled } } -async function checkNewVersion(conf: Config): Promise { - const resJson = await (await fetch(`${conf.BEE_DESKTOP_URL}/info`)).json() +async function checkNewVersion(desktopUrl: string): Promise { + const resJson = await (await fetch(`${desktopUrl}/info`)).json() const currentVersion = resJson.version const latestVersion = await getLatestBeeDesktopVersion() @@ -67,7 +63,7 @@ async function checkNewVersion(conf: Config): Promise { return '' } -export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = config): NewDesktopVersionHook { +export function useNewBeeDesktopVersion(isBeeDesktop: boolean, desktopUrl: string): NewDesktopVersionHook { const [newBeeDesktopVersion, setNewBeeDesktopVersion] = useState('') useEffect(() => { @@ -75,12 +71,12 @@ export function useNewBeeDesktopVersion(isBeeDesktop: boolean, conf: Config = co return } - checkNewVersion(conf).then(version => { + checkNewVersion(desktopUrl).then(version => { if (version !== '') { setNewBeeDesktopVersion(version) } }) - }, [isBeeDesktop, conf]) + }, [isBeeDesktop, desktopUrl]) return { newBeeDesktopVersion } } @@ -110,13 +106,13 @@ export interface GetBeeConfig { error: Error | null } -export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => { +export const useGetBeeConfig = (desktopUrl: string): GetBeeConfig => { const [beeConfig, setBeeConfig] = useState(null) const [isLoading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { - getJson(`${conf.BEE_DESKTOP_URL}/config`) + getJson(`${desktopUrl}/config`) .then(beeConf => { setBeeConfig(beeConf) setError(null) @@ -128,7 +124,7 @@ export const useGetBeeConfig = (conf: Config = config): GetBeeConfig => { .finally(() => { setLoading(false) }) - }, [conf]) + }, [desktopUrl]) return { config: beeConfig, isLoading, error } } @@ -140,7 +136,7 @@ export const useLatestBeeRelease = (): LatestBeeReleaseHook => { useEffect(() => { axios - .get(`${config.GITHUB_REPO_URL}/releases/latest`) + .get(`${GITHUB_REPO_URL}/releases/latest`) .then(res => { setLatestBeeRelease(res.data) }) diff --git a/src/index.tsx b/src/index.tsx index 68bf723..6abef02 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,9 +4,14 @@ import './index.css' import App from './App' import reportWebVitals from './reportWebVitals' +const desktopEnabled = Boolean(process.env.REACT_APP_BEE_DESKTOP_ENABLED) +const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL +const beeApiUrl = process.env.REACT_APP_BEE_API_URL +const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_API_URL + ReactDOM.render( - + , document.getElementById('root'), ) diff --git a/src/layout/Dashboard.tsx b/src/layout/Dashboard.tsx index e6b6762..d8f53f6 100644 --- a/src/layout/Dashboard.tsx +++ b/src/layout/Dashboard.tsx @@ -8,7 +8,7 @@ import SideBar from '../components/SideBar' import { Context as BeeContext } from '../providers/Bee' import { Context as SettingsContext } from '../providers/Settings' import { useNewBeeDesktopVersion } from '../hooks/apiHooks' -import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../utils/desktop' +import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants' const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -28,13 +28,13 @@ const Dashboard = (props: Props): ReactElement => { const { isLoading, isLatestBeeVersion, latestBeeRelease, latestBeeVersionUrl, latestUserVersion } = useContext(BeeContext) - const { isBeeDesktop } = useContext(SettingsContext) - const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop) + const { isDesktop, desktopUrl } = useContext(SettingsContext) + const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl) const { enqueueSnackbar, closeSnackbar } = useSnackbar() // New version of Bee client notification useEffect(() => { - if (!isLoading && !isBeeDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) { + if (!isLoading && !isDesktop && !isLatestBeeVersion && latestBeeRelease && latestUserVersion) { enqueueSnackbar(`There is new Bee version ${latestBeeRelease?.name}!`, { variant: 'warning', preventDuplicate: true, @@ -65,7 +65,7 @@ const Dashboard = (props: Props): ReactElement => { closeSnackbar, enqueueSnackbar, isLatestBeeVersion, - isBeeDesktop, + isDesktop, latestBeeRelease, latestBeeVersionUrl, isLoading, diff --git a/src/pages/account/wallet/AccountWallet.tsx b/src/pages/account/wallet/AccountWallet.tsx index a4a859a..fb944f9 100644 --- a/src/pages/account/wallet/AccountWallet.tsx +++ b/src/pages/account/wallet/AccountWallet.tsx @@ -20,7 +20,7 @@ import { Header } from '../Header' export function AccountWallet(): ReactElement { const { nodeAddresses, nodeInfo, status } = useContext(BeeContext) - const { isBeeDesktop } = useContext(SettingsContext) + const { isDesktop } = useContext(SettingsContext) const { balance } = useContext(BalanceProvider) const navigate = useNavigate() @@ -72,7 +72,7 @@ export function AccountWallet(): ReactElement { Check transactions on Blockscout - {isBeeDesktop && ( + {isDesktop && ( Invite to Swarm... diff --git a/src/pages/files/Share.tsx b/src/pages/files/Share.tsx index ccf2407..0f758f5 100644 --- a/src/pages/files/Share.tsx +++ b/src/pages/files/Share.tsx @@ -8,7 +8,6 @@ import { useNavigate, useParams } from 'react-router-dom' import { HistoryHeader } from '../../components/HistoryHeader' import { Loading } from '../../components/Loading' import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard' -import config from '../../config' import { META_FILE_NAME, PREVIEW_FILE_NAME } from '../../constants' import { Context as BeeContext } from '../../providers/Bee' import { Context as SettingsContext } from '../../providers/Settings' @@ -78,7 +77,7 @@ export function Share(): ReactElement { } catch (e) {} // eslint-disable-line no-empty if (previewFile) { - setPreview(`${config.BEE_API_HOST}/bzz/${reference}/${PREVIEW_FILE_NAME}`) + setPreview(`${apiUrl}/bzz/${reference}/${PREVIEW_FILE_NAME}`) } setMetadata(metadata) diff --git a/src/pages/gift-code/index.tsx b/src/pages/gift-code/index.tsx index 12f5a4b..3992d77 100644 --- a/src/pages/gift-code/index.tsx +++ b/src/pages/gift-code/index.tsx @@ -23,7 +23,7 @@ const GIFT_WALLET_FUND_BZZ_AMOUNT = Token.fromDecimal('0.5', 16) export default function Index(): ReactElement { const { giftWallets, addGiftWallet } = useContext(TopUpContext) - const { provider } = useContext(SettingsContext) + const { provider, desktopUrl } = useContext(SettingsContext) const { balance } = useContext(BalanceProvider) const [loading, setLoading] = useState(false) @@ -50,7 +50,7 @@ export default function Index(): ReactElement { try { const wallet = Wallet.createRandom() addGiftWallet(wallet) - await createGiftWallet(wallet.address) + await createGiftWallet(desktopUrl, wallet.address) enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' }) } catch (error) { console.error(error) // eslint-disable-line diff --git a/src/pages/info/index.tsx b/src/pages/info/index.tsx index ccc834d..d3c4ec7 100644 --- a/src/pages/info/index.tsx +++ b/src/pages/info/index.tsx @@ -13,8 +13,8 @@ import { Context as SettingsContext } from '../../providers/Settings' import { Context as BalanceProvider } from '../../providers/WalletBalance' import { ROUTES } from '../../routes' import { chainIdToName } from '../../utils/chain' -import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../utils/desktop' import NodeInfoCard from './NodeInfoCard' +import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../../constants' export default function Status(): ReactElement { const { @@ -27,10 +27,10 @@ export default function Status(): ReactElement { chequebookBalance, chainId, } = useContext(BeeContext) - const { isBeeDesktop } = useContext(SettingsContext) + const { isDesktop, desktopUrl } = useContext(SettingsContext) const { balance, error } = useContext(BalanceProvider) - const { beeDesktopVersion } = useBeeDesktop(isBeeDesktop) - const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isBeeDesktop) + const { beeDesktopVersion } = useBeeDesktop(isDesktop, desktopUrl) + const { newBeeDesktopVersion } = useNewBeeDesktopVersion(isDesktop, desktopUrl) const navigate = useNavigate() let balanceText = 'Loading...' @@ -114,7 +114,7 @@ export default function Status(): ReactElement {
- {isBeeDesktop && ( + {isDesktop && ( {` ${latestUserVersion ?? '-'} `} - {latestUserVersion && !isBeeDesktop && ( + {latestUserVersion && !isDesktop && (