From 2e0eeb7a1b86be091fbd4bc266aa2fcbfc271ca3 Mon Sep 17 00:00:00 2001 From: Vojtech Simetka Date: Fri, 24 Jun 2022 14:03:37 +0200 Subject: [PATCH] fix: provider is by default null and account page redirect to provider setup (#437) --- src/components/SideBar.tsx | 54 +++++++++++++------------ src/pages/gift-code/index.tsx | 1 + src/pages/rpc/index.tsx | 4 +- src/pages/top-up/GiftCardFund.tsx | 4 +- src/pages/top-up/GiftCardTopUpIndex.tsx | 2 + src/pages/top-up/Swap.tsx | 2 +- src/providers/Bee.tsx | 2 +- src/providers/TopUp.tsx | 16 +++++--- src/utils/desktop.ts | 5 --- 9 files changed, 48 insertions(+), 42 deletions(-) diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 4b25328..181a012 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,6 +1,6 @@ import { Divider, Drawer, Grid, Link as MUILink, List } from '@material-ui/core' import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' -import { ReactElement } from 'react' +import { ReactElement, useContext } from 'react' import { Link } from 'react-router-dom' import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon' import DocsIcon from 'remixicon-react/BookOpenLineIcon' @@ -8,6 +8,7 @@ import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon' import HomeIcon from 'remixicon-react/Home3LineIcon' import SettingsIcon from 'remixicon-react/Settings2LineIcon' import AccountIcon from 'remixicon-react/Wallet3LineIcon' +import { Context as TopUpContext } from '../providers/TopUp' import DashboardLogo from '../assets/dashboard-logo.svg' import DesktopLogo from '../assets/desktop-logo.svg' import { config } from '../config' @@ -17,31 +18,6 @@ import Feedback from './Feedback' import SideBarItem from './SideBarItem' import SideBarStatus from './SideBarStatus' -const navBarItems = [ - { - label: 'Info', - path: ROUTES.INFO, - icon: HomeIcon, - }, - { - label: 'Files', - path: ROUTES.UPLOAD, - icon: FilesIcon, - pathMatcherSubstring: '/files/', - }, - { - label: 'Account', - path: ROUTES.ACCOUNT_WALLET, - icon: AccountIcon, - pathMatcherSubstring: '/account/', - }, - { - label: 'Settings', - path: ROUTES.SETTINGS, - icon: SettingsIcon, - }, -] - const drawerWidth = 300 const useStyles = makeStyles((theme: Theme) => @@ -91,6 +67,32 @@ const useStyles = makeStyles((theme: Theme) => export default function SideBar(): ReactElement { const classes = useStyles() const { isBeeDesktop } = useIsBeeDesktop() + const { providerUrl } = useContext(TopUpContext) + + const navBarItems = [ + { + label: 'Info', + path: ROUTES.INFO, + icon: HomeIcon, + }, + { + label: 'Files', + path: ROUTES.UPLOAD, + icon: FilesIcon, + pathMatcherSubstring: '/files/', + }, + { + label: 'Account', + path: providerUrl === null ? ROUTES.WALLET : ROUTES.ACCOUNT_WALLET, + icon: AccountIcon, + pathMatcherSubstring: '/account/', + }, + { + label: 'Settings', + path: ROUTES.SETTINGS, + icon: SettingsIcon, + }, + ] return ( diff --git a/src/pages/gift-code/index.tsx b/src/pages/gift-code/index.tsx index 0d0d142..a27d0cb 100644 --- a/src/pages/gift-code/index.tsx +++ b/src/pages/gift-code/index.tsx @@ -25,6 +25,7 @@ export default function Index(): ReactElement { useEffect(() => { async function mapGiftWallets() { + if (!provider) return const results = [] for (const giftWallet of giftWallets) { results.push(await ResolvedWallet.make(giftWallet, provider)) diff --git a/src/pages/rpc/index.tsx b/src/pages/rpc/index.tsx index 1883caa..3800e2d 100644 --- a/src/pages/rpc/index.tsx +++ b/src/pages/rpc/index.tsx @@ -19,6 +19,8 @@ export default function Index(): ReactElement { const navigate = useNavigate() async function onSubmit() { + if (!localProviderUrl) return + try { await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl)) enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' }) @@ -54,7 +56,7 @@ export default function Index(): ReactElement { name="rpc-endpoint" label="RPC Endpoint" onChange={event => setLocalProviderUrl(event.target.value)} - defaultValue={providerUrl} + defaultValue={providerUrl || ''} /> diff --git a/src/pages/top-up/GiftCardFund.tsx b/src/pages/top-up/GiftCardFund.tsx index 2c96ca9..ae1248e 100644 --- a/src/pages/top-up/GiftCardFund.tsx +++ b/src/pages/top-up/GiftCardFund.tsx @@ -31,7 +31,7 @@ export function GiftCardFund(): ReactElement { const navigate = useNavigate() useEffect(() => { - if (!privateKeyString) { + if (!privateKeyString || !provider) { return } @@ -43,7 +43,7 @@ export function GiftCardFund(): ReactElement { } async function onFund() { - if (!wallet || !nodeAddresses) { + if (!wallet || !nodeAddresses || !providerUrl) { return } diff --git a/src/pages/top-up/GiftCardTopUpIndex.tsx b/src/pages/top-up/GiftCardTopUpIndex.tsx index e698748..5c24e14 100644 --- a/src/pages/top-up/GiftCardTopUpIndex.tsx +++ b/src/pages/top-up/GiftCardTopUpIndex.tsx @@ -24,6 +24,8 @@ export function GiftCardTopUpIndex(): ReactElement { const navigate = useNavigate() async function onProceed() { + if (!provider) return + setLoading(true) try { const wallet = new Wallet(giftCode, provider) diff --git a/src/pages/top-up/Swap.tsx b/src/pages/top-up/Swap.tsx index 14dc81a..e560042 100644 --- a/src/pages/top-up/Swap.tsx +++ b/src/pages/top-up/Swap.tsx @@ -45,7 +45,7 @@ export function Swap({ header }: Props): ReactElement { const bzzAfterSwap = new BzzToken(daiToSwap.toBigNumber.dividedToIntegerBy(200)) async function onSwap() { - if (hasSwapped) { + if (hasSwapped || !providerUrl) { return } setLoading(true) diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx index 91f60c4..710ff75 100644 --- a/src/providers/Bee.tsx +++ b/src/providers/Bee.tsx @@ -242,7 +242,7 @@ export function Provider({ children }: Props): ReactElement { }, [beeDebugApi]) // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { - if (nodeAddresses?.ethereum) { + if (nodeAddresses?.ethereum && provider) { WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress) } }, [nodeAddresses, provider]) diff --git a/src/providers/TopUp.tsx b/src/providers/TopUp.tsx index 17d7757..376b4c2 100644 --- a/src/providers/TopUp.tsx +++ b/src/providers/TopUp.tsx @@ -10,16 +10,18 @@ const LocalStorageKeys = { } interface ContextInterface { - providerUrl: string - provider: providers.JsonRpcProvider + providerUrl: string | null + provider: providers.JsonRpcProvider | null giftWallets: Wallet[] setProviderUrl: (providerUrl: string) => void addGiftWallet: (wallet: Wallet) => void } +const providerUrl = localStorage.getItem('json-rpc-provider') || null + const initialValues: ContextInterface = { - providerUrl: '', - provider: new providers.JsonRpcProvider(), + providerUrl, + provider: providerUrl ? new providers.JsonRpcProvider(providerUrl) : null, giftWallets: [], setProviderUrl: () => {}, // eslint-disable-line addGiftWallet: () => {}, // eslint-disable-line @@ -33,11 +35,13 @@ interface Props { } export function Provider({ children }: Props): ReactElement { - const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl) - const [provider, setProvider] = useState(new providers.JsonRpcProvider(providerUrl)) + const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl) + const [provider, setProvider] = useState(initialValues.provider) const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets) useEffect(() => { + if (provider === null) return + const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets) if (existingGiftWallets) { diff --git a/src/utils/desktop.ts b/src/utils/desktop.ts index 3b188cd..70792e1 100644 --- a/src/utils/desktop.ts +++ b/src/utils/desktop.ts @@ -1,4 +1,3 @@ -import axios from 'axios' import { getJson, postJson, sendRequest } from './net' interface DesktopStatus { @@ -16,10 +15,6 @@ export async function getDesktopStatus(): Promise { return response as DesktopStatus } -export async function getGasFromFaucet(address: string): Promise { - await axios.post(`http://getxdai.co/${address}/0.1`) -} - export async function upgradeToLightNode(rpcProvider: string): Promise { await updateDesktopConfiguration({ 'chain-enable': true,