fix: revert bee env. variable names and add default rpc var (#545)

.env.development

@@ -1,7 +1 @@
-PORT=3001
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee
+PORT=3002

.env.production

@@ -1,6 +0,0 @@
-REACT_APP_BEE_HOST=http://localhost:1633
-REACT_APP_BEE_DEBUG_HOST=http://localhost:1635
-REACT_APP_BEE_DOCS_HOST=https://docs.ethswarm.org/docs/
-REACT_APP_BEE_DISCORD_HOST=https://discord.gg/eKr9XPv7
-REACT_APP_BLOCKCHAIN_EXPLORER_URL=https://blockscout.com/xdai/mainnet
-REACT_APP_BEE_GITHUB_REPO_URL=https://api.github.com/repos/ethersphere/bee

README.md

@@ -101,8 +101,9 @@ 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.
+ - `REACT_APP_BEE_HOST` (`string`) defines custom Bee API URL to be used as default one. By default, the `http://localhost:1633` is used.
+ - `REACT_APP_BEE_DEBUG_HOST` (`string`) defines custom Bee Debug API URL to be used as default one. By default, the `http://localhost:1635` is used.
+ - `REACT_APP_DEFAULT_RPC_URL` (`string`) defines the default RPC provider URL. Be aware, that his only configures the default value. The user can override this in Settings, which is then persisted in local store and has priority over the value set in this env. variable. By default `https://xdai.fairdatasociety.org` is used.
 
 #### Swarm Desktop development
 

src/App.tsx

@@ -19,6 +19,7 @@ import { theme } from './theme'
 interface Props {
   beeApiUrl?: string
   beeDebugApiUrl?: string
+  defaultRpcUrl?: string
   lockedApiSettings?: boolean
   isDesktop?: boolean
   desktopUrl?: string
@@ -28,6 +29,7 @@ interface Props {
 const App = ({
   beeApiUrl,
   beeDebugApiUrl,
+  defaultRpcUrl,
   lockedApiSettings,
   isDesktop,
   desktopUrl,
@@ -39,6 +41,7 @@ const App = ({
         <SettingsProvider
           beeApiUrl={beeApiUrl}
           beeDebugApiUrl={beeDebugApiUrl}
+          defaultRpcUrl={defaultRpcUrl}
           lockedApiSettings={lockedApiSettings}
           isDesktop={isDesktop}
           desktopUrl={desktopUrl}

src/index.tsx

@@ -6,12 +6,19 @@ 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
+const beeApiUrl = process.env.REACT_APP_BEE_HOST
+const beeDebugApiUrl = process.env.REACT_APP_BEE_DEBUG_HOST
+const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
 
 ReactDOM.render(
   <React.StrictMode>
-    <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} />
+    <App
+      isDesktop={desktopEnabled}
+      desktopUrl={desktopUrl}
+      beeApiUrl={beeApiUrl}
+      beeDebugApiUrl={beeDebugApiUrl}
+      defaultRpcUrl={defaultRpcUrl}
+    />
   </React.StrictMode>,
   document.getElementById('root'),
 )

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, desktopUrl } = useContext(SettingsContext)
+  const { rpcProvider, desktopUrl } = useContext(SettingsContext)
   const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
@@ -33,13 +33,13 @@ export default function Index(): ReactElement {
     async function mapGiftWallets() {
       const results = []
       for (const giftWallet of giftWallets) {
-        results.push(await ResolvedWallet.make(giftWallet, provider))
+        results.push(await ResolvedWallet.make(giftWallet, rpcProvider))
       }
       setBalances(results)
     }
 
     mapGiftWallets()
-  }, [giftWallets, provider])
+  }, [giftWallets, rpcProvider])
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()

src/pages/settings/index.tsx

@@ -16,7 +16,7 @@ export default function SettingsPage(): ReactElement {
     cors,
     dataDir,
     ensResolver,
-    providerUrl,
+    rpcProviderUrl,
     isLoading,
     isDesktop,
     setAndPersistJsonRpcProvider,
@@ -49,7 +49,7 @@ export default function SettingsPage(): ReactElement {
         />
         <ExpandableListItemInput
           label="Blockchain RPC URL"
-          value={providerUrl}
+          value={rpcProviderUrl}
           helperText="Changing the value will restart your bee node."
           confirmLabel="Save and restart"
           onConfirm={value => {

src/pages/top-up/GiftCardFund.tsx

@@ -22,7 +22,7 @@ import { BeeModes } from '@ethersphere/bee-js'
 
 export function GiftCardFund(): ReactElement {
   const { nodeAddresses, nodeInfo } = useContext(BeeContext)
-  const { isDesktop, desktopUrl, provider, providerUrl } = useContext(SettingsContext)
+  const { isDesktop, desktopUrl, rpcProvider, rpcProviderUrl } = useContext(SettingsContext)
   const { balance } = useContext(BalanceProvider)
 
   const [loading, setLoading] = useState(false)
@@ -34,12 +34,12 @@ export function GiftCardFund(): ReactElement {
   const navigate = useNavigate()
 
   useEffect(() => {
-    if (!privateKeyString || !provider) {
+    if (!privateKeyString || !rpcProvider) {
       return
     }
 
-    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
-  }, [privateKeyString, provider])
+    ResolvedWallet.make(privateKeyString, rpcProvider).then(setWallet)
+  }, [privateKeyString, rpcProvider])
 
   if (!wallet || !balance) {
     return <Loading />
@@ -50,7 +50,7 @@ export function GiftCardFund(): ReactElement {
   async function restart() {
     try {
       await sleepMs(5_000)
-      await upgradeToLightNode(desktopUrl, providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
       await restartBeeNode(desktopUrl)
       enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)
@@ -61,14 +61,14 @@ export function GiftCardFund(): ReactElement {
   }
 
   async function onFund() {
-    if (!wallet || !nodeAddresses || !providerUrl) {
+    if (!wallet || !nodeAddresses || !rpcProviderUrl) {
       return
     }
 
     setLoading(true)
 
     try {
-      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
+      await wallet.transfer(nodeAddresses.ethereum, rpcProviderUrl)
       enqueueSnackbar('Successfully funded node', { variant: 'success' })
 
       if (canUpgradeToLightNode) await restart()

src/pages/top-up/GiftCardTopUpIndex.tsx

@@ -16,7 +16,7 @@ import { ROUTES } from '../../routes'
 import { Rpc } from '../../utils/rpc'
 
 export function GiftCardTopUpIndex(): ReactElement {
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const [giftCode, setGiftCode] = useState('')
 
@@ -24,13 +24,13 @@ export function GiftCardTopUpIndex(): ReactElement {
   const navigate = useNavigate()
 
   async function onProceed() {
-    if (!provider) return
+    if (!rpcProvider) return
 
     setLoading(true)
     try {
-      const wallet = new Wallet(giftCode, provider)
-      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, provider))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, provider))
+      const wallet = new Wallet(giftCode, rpcProvider)
+      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.address, rpcProvider))
+      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.address, rpcProvider))
 
       if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
         throw Error('Gift wallet does not have enough funds')

src/pages/top-up/Swap.tsx

@@ -45,7 +45,7 @@ export function Swap({ header }: Props): ReactElement {
   const [userInputSwap, setUserInputSwap] = useState<string | null>(null)
   const [price, setPrice] = useState(DaiToken.fromDecimal('0.6', 18))
 
-  const { providerUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
+  const { rpcProviderUrl, isDesktop, desktopUrl } = useContext(SettingsContext)
   const { nodeAddresses, nodeInfo } = useContext(BeeContext)
   const { balance } = useContext(BalanceProvider)
 
@@ -80,7 +80,7 @@ export function Swap({ header }: Props): ReactElement {
   async function restart() {
     try {
       await sleepMs(5_000)
-      await upgradeToLightNode(desktopUrl, providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
       await restartBeeNode(desktopUrl)
 
       enqueueSnackbar('Upgraded to light node', { variant: 'success' })

src/pages/top-up/index.tsx

@@ -42,7 +42,7 @@ export default function TopUp(): ReactElement {
   const { isDesktop, desktopUrl } = useContext(SettingsContext)
   const { nodeInfo, status } = useContext(BeeContext)
   const { balance } = useContext(BalanceProvider)
-  const { providerUrl } = useContext(SettingsContext)
+  const { rpcProviderUrl } = useContext(SettingsContext)
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
 
@@ -55,7 +55,7 @@ export default function TopUp(): ReactElement {
   async function restart() {
     setLoading(true)
     try {
-      await upgradeToLightNode(desktopUrl, providerUrl)
+      await upgradeToLightNode(desktopUrl, rpcProviderUrl)
       await restartBeeNode(desktopUrl)
       enqueueSnackbar('Upgraded to light node', { variant: 'success' })
       navigate(ROUTES.RESTART_LIGHT)

src/providers/Settings.tsx

@@ -9,8 +9,6 @@ const LocalStorageKeys = {
   providerUrl: 'json-rpc-provider',
 }
 
-const providerUrl = localStorage.getItem('json-rpc-provider') || DEFAULT_RPC_URL
-
 interface ContextInterface {
   apiUrl: string
   apiDebugUrl: string
@@ -20,8 +18,8 @@ interface ContextInterface {
   desktopApiKey: string
   isDesktop: boolean
   desktopUrl: string
-  providerUrl: string
-  provider: providers.JsonRpcProvider
+  rpcProviderUrl: string
+  rpcProvider: providers.JsonRpcProvider
   cors: string | null
   dataDir: string | null
   ensResolver: string | null
@@ -44,8 +42,8 @@ const initialValues: ContextInterface = {
   desktopApiKey: '',
   desktopUrl: window.location.origin,
   setAndPersistJsonRpcProvider: async () => {}, // eslint-disable-line
-  providerUrl,
-  provider: new providers.JsonRpcProvider(providerUrl),
+  rpcProviderUrl: '',
+  rpcProvider: new providers.JsonRpcProvider(''),
   cors: null,
   dataDir: null,
   ensResolver: null,
@@ -62,6 +60,7 @@ interface InitialSettings {
   lockedApiSettings?: boolean
   isDesktop?: boolean
   desktopUrl?: string
+  defaultRpcUrl?: string
 }
 
 interface Props extends InitialSettings {
@@ -71,14 +70,16 @@ interface Props extends InitialSettings {
 export function Provider({ children, ...propsSettings }: Props): ReactElement {
   const desktopUrl = propsSettings.desktopUrl ?? initialValues.desktopUrl
   const isDesktop = Boolean(propsSettings.isDesktop)
+  const propsProviderUrl =
+    localStorage.getItem(LocalStorageKeys.providerUrl) || propsSettings.defaultRpcUrl || DEFAULT_RPC_URL
 
   const [apiUrl, setApiUrl] = useState<string>(initialValues.apiUrl)
   const [apiDebugUrl, setDebugApiUrl] = useState<string>(initialValues.apiDebugUrl)
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [beeDebugApi, setBeeDebugApi] = useState<BeeDebug | null>(null)
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
-  const [providerUrl, setProviderUrl] = useState(initialValues.providerUrl)
-  const [provider, setProvider] = useState(initialValues.provider)
+  const [rpcProviderUrl, setRpcProviderUrl] = useState(propsProviderUrl)
+  const [rpcProvider, setRpcProvider] = useState(new providers.JsonRpcProvider(propsProviderUrl))
   const { config, isLoading, error } = useGetBeeConfig(desktopUrl)
 
   const url = makeHttpUrl(
@@ -133,16 +134,16 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
         desktopApiKey,
         isDesktop,
         desktopUrl,
-        provider,
-        providerUrl,
+        rpcProvider,
+        rpcProviderUrl,
         cors: config?.['cors-allowed-origins'] ?? null,
         dataDir: config?.['data-dir'] ?? null,
         ensResolver: config?.['resolver-options'] ?? null,
         setAndPersistJsonRpcProvider: setAndPersistJsonRpcProviderClosure(
           isDesktop,
           desktopUrl,
-          setProviderUrl,
-          setProvider,
+          setRpcProviderUrl,
+          setRpcProvider,
         ),
         isLoading,
         error,

src/providers/TopUp.tsx

@@ -27,17 +27,17 @@ interface Props {
 
 export function Provider({ children }: Props): ReactElement {
   const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider } = useContext(SettingsContext)
 
   useEffect(() => {
-    if (provider === null) return
+    if (rpcProvider === null) return
 
     const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
 
     if (existingGiftWallets) {
-      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
+      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, rpcProvider)))
     }
-  }, [provider])
+  }, [rpcProvider])
 
   function addGiftWallet(wallet: Wallet) {
     const newArray = [...giftWallets, wallet]

src/providers/WalletBalance.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const { provider } = useContext(SettingsContext)
+  const { rpcProvider } = useContext(SettingsContext)
   const { nodeAddresses } = useContext(BeeContext)
   const [balance, setBalance] = useState<WalletAddress | null>(initialValues.balance)
   const [error, setError] = useState<Error | null>(initialValues.error)
@@ -40,12 +40,12 @@ export function Provider({ children }: Props): ReactElement {
   const [frequency, setFrequency] = useState<number | null>(null)
 
   useEffect(() => {
-    if (nodeAddresses?.ethereum && provider) {
-      WalletAddress.make(nodeAddresses.ethereum, provider).then(setBalance)
+    if (nodeAddresses?.ethereum && rpcProvider) {
+      WalletAddress.make(nodeAddresses.ethereum, rpcProvider).then(setBalance)
     } else {
       setBalance(null)
     }
-  }, [nodeAddresses, provider])
+  }, [nodeAddresses, rpcProvider])
 
   const refresh = async () => {
     // Don't want to refresh when already refreshing