fix: provider is by default null and account page redirect to provider setup (#437)

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 (
     <Drawer className={classes.drawer} variant="permanent" anchor="left" classes={{ paper: classes.drawerPaper }}>

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))

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 || ''}
         />
       </Box>
       <SwarmButton iconType={Check} onClick={onSubmit}>

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
     }
 

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)

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)

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])

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) {

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<DesktopStatus> {
   return response as DesktopStatus
 }
 
-export async function getGasFromFaucet(address: string): Promise<void> {
-  await axios.post(`http://getxdai.co/${address}/0.1`)
-}
-
 export async function upgradeToLightNode(rpcProvider: string): Promise<void> {
   await updateDesktopConfiguration({
     'chain-enable': true,