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