fix: all wallet flows to use ethers (#395)

vojtechsimetka · web-flow · commit 80d684c1e5c7 · 2022-06-18T21:50:51.000+02:00
* fix: all wallet flows to use only ethers libraries

* feat: remove ethereumjs-wallet

* fix: remove the buggy `/wallet` bee call and use provider
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "buffer": "^6.0.3",
     "crypto": "npm:crypto-browserify",
     "crypto-browserify": "^3.12.0",
-    "ethereumjs-wallet": "^1.0.2",
     "ethers": "^5.6.4",
     "file-saver": "^2.0.5",
     "formik": "2.2.9",
diff --git a/src/App.tsx b/src/App.tsx
@@ -58,12 +58,12 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
     <div className="App">
       <ThemeProvider theme={theme}>
         <SettingsProvider beeApiUrl={beeApiUrl} beeDebugApiUrl={beeDebugApiUrl} lockedApiSettings={lockedApiSettings}>
-          <BeeProvider>
-            <StampsProvider>
-              <FileProvider>
-                <FeedsProvider>
-                  <PlatformProvider>
-                    <TopUpProvider>
+          <TopUpProvider>
+            <BeeProvider>
+              <StampsProvider>
+                <FileProvider>
+                  <FeedsProvider>
+                    <PlatformProvider>
                       <SnackbarProvider>
                         <Router>
                           <>
@@ -74,12 +74,12 @@ const App = ({ beeApiUrl, beeDebugApiUrl, lockedApiSettings }: Props): ReactElem
                           </>
                         </Router>
                       </SnackbarProvider>
-                    </TopUpProvider>
-                  </PlatformProvider>
-                </FeedsProvider>
-              </FileProvider>
-            </StampsProvider>
-          </BeeProvider>
+                    </PlatformProvider>
+                  </FeedsProvider>
+                </FileProvider>
+              </StampsProvider>
+            </BeeProvider>
+          </TopUpProvider>
         </SettingsProvider>
       </ThemeProvider>
     </div>
diff --git a/src/pages/account/wallet/AccountWallet.tsx b/src/pages/account/wallet/AccountWallet.tsx
@@ -13,16 +13,16 @@ import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
 export function AccountWallet(): ReactElement {
-  const { balance } = useContext(Context)
+  const { balance, nodeAddresses } = useContext(Context)
 
   const navigate = useNavigate()
 
-  if (!balance) {
+  if (!balance || !nodeAddresses) {
     return <Loading />
   }
 
   function onCheckTransactions() {
-    window.open(`https://blockscout.com/xdai/mainnet/address/${balance?.address}/transactions`, '_blank')
+    window.open(`https://blockscout.com/xdai/mainnet/address/${nodeAddresses?.ethereum}/transactions`, '_blank')
   }
 
   function onInvite() {
@@ -46,7 +46,7 @@ export function AccountWallet(): ReactElement {
         </Grid>
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Node wallet address" value={balance.address} expanded />
+        <ExpandableListItemKey label="Node wallet address" value={nodeAddresses.ethereum} expanded />
       </Box>
       <Box mb={0.25}>
         <ExpandableListItem label="XDAI balance" value={`${balance.dai.toSignificantDigits(4)} XDAI`} />
diff --git a/src/pages/gift-code/index.tsx b/src/pages/gift-code/index.tsx
@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { Check, X } from 'react-feather'
 import { useNavigate } from 'react-router'
+import { Wallet } from 'ethers'
 import ExpandableListItem from '../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -12,11 +13,10 @@ import { SwarmButton } from '../../components/SwarmButton'
 import { Context as BeeContext } from '../../providers/Bee'
 import { Context as TopUpContext } from '../../providers/TopUp'
 import { createGiftWallet } from '../../utils/desktop'
-import { generateWallet } from '../../utils/identity'
 import { ResolvedWallet } from '../../utils/wallet'
 
 export default function Index(): ReactElement {
-  const { giftWallets, addGiftWallet } = useContext(TopUpContext)
+  const { giftWallets, addGiftWallet, provider } = useContext(TopUpContext)
   const { balance } = useContext(BeeContext)
 
   const [loading, setLoading] = useState(false)
@@ -26,13 +26,13 @@ export default function Index(): ReactElement {
     async function mapGiftWallets() {
       const results = []
       for (const giftWallet of giftWallets) {
-        results.push(await ResolvedWallet.make(giftWallet))
+        results.push(await ResolvedWallet.make(giftWallet, provider))
       }
       setBalances(results)
     }
 
     mapGiftWallets()
-  }, [giftWallets])
+  }, [giftWallets, provider])
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
@@ -41,9 +41,9 @@ export default function Index(): ReactElement {
     enqueueSnackbar('Sending funds to gift wallet...')
     setLoading(true)
     try {
-      const wallet = generateWallet()
+      const wallet = Wallet.createRandom()
       addGiftWallet(wallet)
-      await createGiftWallet(wallet.getAddressString())
+      await createGiftWallet(wallet.address)
       enqueueSnackbar('Succesfully funded gift wallet', { variant: 'success' })
     } catch (error) {
       enqueueSnackbar(`Failed to fund gift wallet: ${error}`, { variant: 'error' })
diff --git a/src/pages/rpc/index.tsx b/src/pages/rpc/index.tsx
@@ -3,6 +3,7 @@ import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { Check } from 'react-feather'
 import { useNavigate } from 'react-router'
+import { providers } from 'ethers'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { SwarmButton } from '../../components/SwarmButton'
 import { SwarmTextInput } from '../../components/SwarmTextInput'
@@ -11,18 +12,17 @@ import { ROUTES } from '../../routes'
 import { Rpc } from '../../utils/rpc'
 
 export default function Index(): ReactElement {
-  const { jsonRpcProvider, setJsonRpcProvider } = useContext(Context)
-
-  const [provider, setProvider] = useState(jsonRpcProvider)
+  const { providerUrl, setProviderUrl } = useContext(Context)
+  const [localProviderUrl, setLocalProviderUrl] = useState(providerUrl)
 
   const { enqueueSnackbar } = useSnackbar()
   const navigate = useNavigate()
 
   async function onSubmit() {
     try {
-      await Rpc.eth_getBlockByNumber(provider)
+      await Rpc.eth_getBlockByNumber(new providers.JsonRpcProvider(localProviderUrl))
       enqueueSnackbar('Connected to RPC provider successfully.', { variant: 'success' })
-      setJsonRpcProvider(provider)
+      setProviderUrl(localProviderUrl)
       navigate(ROUTES.CONFIRMATION)
     } catch (error) {
       enqueueSnackbar('Could not connect to RPC provider.', { variant: 'error' })
@@ -49,8 +49,8 @@ export default function Index(): ReactElement {
         <SwarmTextInput
           name="rpc-endpoint"
           label="RPC Endpoint"
-          onChange={event => setProvider(event.target.value)}
-          defaultValue={jsonRpcProvider}
+          onChange={event => setLocalProviderUrl(event.target.value)}
+          defaultValue={providerUrl}
         />
       </Box>
       <SwarmButton iconType={Check} onClick={onSubmit}>
diff --git a/src/pages/top-up/GiftCardFund.tsx b/src/pages/top-up/GiftCardFund.tsx
@@ -19,7 +19,7 @@ import { ResolvedWallet } from '../../utils/wallet'
 
 export function GiftCardFund(): ReactElement {
   const { nodeAddresses, balance } = useContext(BeeContext)
-  const { jsonRpcProvider } = useContext(TopUpContext)
+  const { provider, providerUrl } = useContext(TopUpContext)
 
   const [loading, setLoading] = useState(false)
   const [wallet, setWallet] = useState<ResolvedWallet | null>(null)
@@ -34,8 +34,8 @@ export function GiftCardFund(): ReactElement {
       return
     }
 
-    ResolvedWallet.make(privateKeyString).then(setWallet)
-  }, [privateKeyString])
+    ResolvedWallet.make(privateKeyString, provider).then(setWallet)
+  }, [privateKeyString, provider])
 
   if (!wallet || !balance) {
     return <Loading />
@@ -49,10 +49,10 @@ export function GiftCardFund(): ReactElement {
     setLoading(true)
 
     try {
-      await wallet.transfer(nodeAddresses.ethereum)
+      await wallet.transfer(nodeAddresses.ethereum, providerUrl)
       enqueueSnackbar('Successfully funded node, restarting...', { variant: 'success' })
       await sleepMs(5_000)
-      await upgradeToLightNode(jsonRpcProvider)
+      await upgradeToLightNode(providerUrl)
       await restartBeeNode()
       navigate(ROUTES.RESTART_LIGHT)
     } catch (error) {
diff --git a/src/pages/top-up/GiftCardTopUpIndex.tsx b/src/pages/top-up/GiftCardTopUpIndex.tsx
@@ -1,8 +1,10 @@
 import { Box, Typography } from '@material-ui/core'
+import { Wallet } from 'ethers'
 import { useSnackbar } from 'notistack'
-import { ReactElement, useState } from 'react'
+import { ReactElement, useContext, useState } from 'react'
 import { ArrowRight } from 'react-feather'
 import { useNavigate } from 'react-router'
+import { Context as TopUpContext } from '../../providers/TopUp'
 import { HistoryHeader } from '../../components/HistoryHeader'
 import { ProgressIndicator } from '../../components/ProgressIndicator'
 import { SwarmButton } from '../../components/SwarmButton'
@@ -11,10 +13,10 @@ import { SwarmTextInput } from '../../components/SwarmTextInput'
 import { BzzToken } from '../../models/BzzToken'
 import { DaiToken } from '../../models/DaiToken'
 import { ROUTES } from '../../routes'
-import { getWalletFromPrivateKeyString } from '../../utils/identity'
 import { Rpc } from '../../utils/rpc'
 
 export function GiftCardTopUpIndex(): ReactElement {
+  const { provider } = useContext(TopUpContext)
   const [loading, setLoading] = useState(false)
   const [giftCode, setGiftCode] = useState('')
 
@@ -24,9 +26,9 @@ export function GiftCardTopUpIndex(): ReactElement {
   async function onProceed() {
     setLoading(true)
     try {
-      const wallet = getWalletFromPrivateKeyString(giftCode)
-      const dai = new DaiToken(await Rpc._eth_getBalance(wallet.getAddressString()))
-      const bzz = new BzzToken(await Rpc._eth_getBalanceERC20(wallet.getAddressString()))
+      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))
 
       if (dai.toDecimal.lt(0.001) || bzz.toDecimal.lt(0.001)) {
         throw Error('Gift wallet does not have enough funds')
diff --git a/src/pages/top-up/Swap.tsx b/src/pages/top-up/Swap.tsx
@@ -28,13 +28,13 @@ export function Swap({ header }: Props): ReactElement {
   const [loading, setLoading] = useState(false)
   const [hasSwapped, setSwapped] = useState(false)
 
-  const { jsonRpcProvider } = useContext(TopUpContext)
-  const { balance } = useContext(BeeContext)
+  const { providerUrl } = useContext(TopUpContext)
+  const { balance, nodeAddresses } = useContext(BeeContext)
 
   const navigate = useNavigate()
   const { enqueueSnackbar } = useSnackbar()
 
-  if (!balance) {
+  if (!balance || !nodeAddresses) {
     return <Loading />
   }
 
@@ -53,7 +53,7 @@ export function Swap({ header }: Props): ReactElement {
       await performSwap(daiToSwap.toString)
       enqueueSnackbar('Successfully swapped, restarting...', { variant: 'success' })
       await sleepMs(5_000)
-      await upgradeToLightNode(jsonRpcProvider)
+      await upgradeToLightNode(providerUrl)
       await restartBeeNode()
       navigate(ROUTES.RESTART_LIGHT)
       enqueueSnackbar('Upgraded to light node', { variant: 'success' })
@@ -98,7 +98,7 @@ export function Swap({ header }: Props): ReactElement {
         <ArrowDown size={24} color="#aaaaaa" />
       </Box>
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
       </Box>
       <Box mb={0.25}>
         <ExpandableListItem
diff --git a/src/pages/top-up/index.tsx b/src/pages/top-up/index.tsx
@@ -40,7 +40,7 @@ export default function Index({ header, title, p, next }: Props): ReactElement {
       <Box mb={4}>{p}</Box>
       <SwarmDivider mb={4} />
       <Box mb={0.25}>
-        <ExpandableListItemKey label="Funding wallet address" value={balance.address} expanded />
+        <ExpandableListItemKey label="Funding wallet address" value={nodeAddresses.ethereum} expanded />
       </Box>
       <Box mb={4}>
         <ExpandableListItem label="xDAI balance" value={balance.dai.toSignificantDigits(4)} />
diff --git a/src/providers/Bee.tsx b/src/providers/Bee.tsx
@@ -17,6 +17,7 @@ import { Token } from '../models/Token'
 import type { Balance, ChequebookBalance, Settlements } from '../types'
 import { WalletAddress } from '../utils/wallet'
 import { Context as SettingsContext } from './Settings'
+import { Context as TopUpContext } from './TopUp'
 
 export enum CheckState {
   OK = 'OK',
@@ -184,6 +185,7 @@ function getStatus(
 
 export function Provider({ children }: Props): ReactElement {
   const { beeApi, beeDebugApi } = useContext(SettingsContext)
+  const { provider } = useContext(TopUpContext)
   const [apiHealth, setApiHealth] = useState<boolean>(false)
   const [debugApiHealth, setDebugApiHealth] = useState<Health | null>(null)
   const [nodeAddresses, setNodeAddresses] = useState<NodeAddresses | null>(null)
@@ -238,9 +240,9 @@ export function Provider({ children }: Props): ReactElement {
 
   useEffect(() => {
     if (nodeAddresses?.ethereum) {
-      WalletAddress.make(nodeAddresses.ethereum).then(setWalletAddress)
+      WalletAddress.make(nodeAddresses.ethereum, provider).then(setWalletAddress)
     }
-  }, [nodeAddresses])
+  }, [nodeAddresses, provider])
 
   useEffect(() => {
     const interval = setInterval(() => walletAddress?.refresh().then(setWalletAddress), 30_000)
diff --git a/src/providers/TopUp.tsx b/src/providers/TopUp.tsx
@@ -1,26 +1,27 @@
-import Wallet from 'ethereumjs-wallet'
+import { providers, Wallet } from 'ethers'
 import { createContext, ReactElement, useEffect, useState } from 'react'
 import { setJsonRpcInDesktop } from '../utils/desktop'
-import { getWalletFromPrivateKeyString } from '../utils/identity'
 
 const LocalStorageKeys = {
-  jsonRpcProvider: 'json-rpc-provider',
+  providerUrl: 'json-rpc-provider',
   depositWallet: 'deposit-wallet',
   giftWallets: 'gift-wallets',
   invitation: 'invitation',
 }
 
 interface ContextInterface {
-  jsonRpcProvider: string
+  providerUrl: string
+  provider: providers.JsonRpcProvider
   giftWallets: Wallet[]
-  setJsonRpcProvider: (jsonRpcProvider: string) => void
+  setProviderUrl: (providerUrl: string) => void
   addGiftWallet: (wallet: Wallet) => void
 }
 
 const initialValues: ContextInterface = {
-  jsonRpcProvider: '',
+  providerUrl: '',
+  provider: new providers.JsonRpcProvider(),
   giftWallets: [],
-  setJsonRpcProvider: () => {}, // eslint-disable-line
+  setProviderUrl: () => {}, // eslint-disable-line
   addGiftWallet: () => {}, // eslint-disable-line
 }
 
@@ -32,38 +33,39 @@ interface Props {
 }
 
 export function Provider({ children }: Props): ReactElement {
-  const [jsonRpcProvider, setJsonRpcProvider] = useState(
-    localStorage.getItem('json-rpc-provider') || initialValues.jsonRpcProvider,
-  )
+  const [providerUrl, setProviderUrl] = useState(localStorage.getItem('json-rpc-provider') || initialValues.providerUrl)
+  const [provider, setProvider] = useState(new providers.JsonRpcProvider(providerUrl))
   const [giftWallets, setGiftWallets] = useState(initialValues.giftWallets)
 
   useEffect(() => {
     const existingGiftWallets = localStorage.getItem(LocalStorageKeys.giftWallets)
 
     if (existingGiftWallets) {
-      setGiftWallets(JSON.parse(existingGiftWallets).map(getWalletFromPrivateKeyString))
+      setGiftWallets(JSON.parse(existingGiftWallets).map((privateKey: string) => new Wallet(privateKey, provider)))
     }
-  }, [])
+  }, [provider])
 
-  function setAndPersistJsonRpcProvider(jsonRpcProvider: string) {
-    localStorage.setItem(LocalStorageKeys.jsonRpcProvider, jsonRpcProvider)
-    setJsonRpcProvider(jsonRpcProvider)
+  function setAndPersistJsonRpcProvider(providerUrl: string) {
+    localStorage.setItem(LocalStorageKeys.providerUrl, providerUrl)
+    setProviderUrl(providerUrl)
+    setProvider(new providers.JsonRpcProvider(providerUrl))
     // eslint-disable-next-line no-console
-    setJsonRpcInDesktop(jsonRpcProvider).catch(console.error)
+    setJsonRpcInDesktop(providerUrl).catch(console.error)
   }
 
   function addGiftWallet(wallet: Wallet) {
     const newArray = [...giftWallets, wallet]
-    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.getPrivateKeyString())))
+    localStorage.setItem(LocalStorageKeys.giftWallets, JSON.stringify(newArray.map(x => x.privateKey)))
     setGiftWallets(newArray)
   }
 
   return (
     <Context.Provider
       value={{
-        jsonRpcProvider,
+        providerUrl,
+        provider,
         giftWallets,
-        setJsonRpcProvider: setAndPersistJsonRpcProvider,
+        setProviderUrl: setAndPersistJsonRpcProvider,
         addGiftWallet,
       }}
     >
diff --git a/src/utils/identity.ts b/src/utils/identity.ts
diff --git a/src/utils/rpc.ts b/src/utils/rpc.ts
diff --git a/src/utils/wallet.ts b/src/utils/wallet.ts
