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

* fix: all wallet flows to use only ethers libraries

* feat: remove ethereumjs-wallet

* fix: remove the buggy `/wallet` bee call and use provider

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`} />

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

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

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

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

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

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