Remove Ethereum account from the wallet context

We do not need to connect Ethereum account with the dapp since we want
to operate only on the Bitcoin wallet. The Acre SDK will generate the
Ethereum address based on the Bitcoin address under the hood and the
user's identifier should always be bitcoin address and the SDK will take
a care of converting it to Ethereum address under the hood.

Still, some features in the Acre SDK expect the Ethereum address eg. to
get the estimated bitcoin balance. Hence as a temporary solution we set
the ethereum account to zero address to not break the dapp. In the
future we want to completely get rid of the ethereum account from the
dapp wallet context and we will only pass the bitcoin address to the
Acre SDK.

dapp/src/acre-react/contexts/AcreSdkContext.tsx

@@ -20,6 +20,7 @@ export function AcreSdkProvider({ children }: { children: React.ReactNode }) {
   const [acre, setAcre] = useState<Acre | undefined>(undefined)
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
 
+  // TODO: initialize Acre SDK w/o Ethereum address.
   const init = useCallback<AcreSdkContextValue["init"]>(
     async (ethereumAddress: string, network: EthereumNetwork) => {
       if (!ethereumAddress) throw new Error("Ethereum address not defined")

dapp/src/components/Header/ConnectWallet.tsx

@@ -3,7 +3,7 @@ import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react"
 import { useWallet } from "#/hooks"
 import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
 import { TextMd } from "#/components/shared/Typography"
-import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
+import { BitcoinIcon } from "#/assets/icons"
 import { Account } from "@ledgerhq/wallet-api-client"
 import { CURRENCY_ID_BITCOIN } from "#/constants"
 import {
@@ -28,20 +28,14 @@ const getCustomDataByAccount = (
 export default function ConnectWallet() {
   const {
     bitcoin: { account: btcAccount, requestAccount: requestBitcoinAccount },
-    ethereum: { account: ethAccount, requestAccount: requestEthereumAccount },
   } = useWallet()
 
   const customDataBtcAccount = getCustomDataByAccount(btcAccount)
-  const customDataEthAccount = getCustomDataByAccount(ethAccount)
 
   const handleConnectBitcoinAccount = () => {
     logPromiseFailure(requestBitcoinAccount())
   }
 
-  const handleConnectEthereumAccount = () => {
-    logPromiseFailure(requestEthereumAccount())
-  }
-
   return (
     <HStack spacing={4}>
       <HStack display={{ base: "none", md: "flex" }}>
@@ -67,14 +61,6 @@ export default function ConnectWallet() {
           {customDataBtcAccount.text}
         </Button>
       </Tooltip>
-      <Button
-        variant="card"
-        colorScheme={customDataEthAccount.colorScheme}
-        leftIcon={<Icon as={EthereumIcon} boxSize={6} />}
-        onClick={handleConnectEthereumAccount}
-      >
-        {customDataEthAccount.text}
-      </Button>
     </HStack>
   )
 }

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -23,7 +23,7 @@ import UnstakeFormModal from "./ActiveUnstakingStep/UnstakeFormModal"
 const TABS = Object.values(ACTION_FLOW_TYPES)
 
 function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
-  const { btcAccount, ethAccount } = useWalletContext()
+  const { btcAccount } = useWalletContext()
   const { type, setType } = useModalFlowContext()
   const { setTokenAmount } = useTransactionContext()
   const { initStake } = useStakeFlowContext()
@@ -32,12 +32,11 @@ function ActionFormModal({ defaultType }: { defaultType: ActionFlowType }) {
 
   const handleInitStake = useCallback(async () => {
     const btcAddress = btcAccount?.address
-    const ethAddress = ethAccount?.address
 
-    if (btcAddress && ethAddress) {
-      await initStake(btcAddress, ethAddress)
+    if (btcAddress) {
+      await initStake(btcAddress)
     }
-  }, [btcAccount?.address, ethAccount?.address, initStake])
+  }, [btcAccount?.address, initStake])
 
   const handleSubmitForm = useCallback(
     async (values: TokenAmountFormValues) => {

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -75,7 +75,7 @@ export default function DepositBTCModal() {
     const response = await depositTelemetry(
       depositReceipt,
       btcAddress,
-      ethAccount.address,
+      ethAccount,
     )
     setIsLoading(false)
 

dapp/src/components/TransactionModal/ModalContentWrapper.tsx

@@ -2,11 +2,10 @@ import React from "react"
 import {
   useModalFlowContext,
   useRequestBitcoinAccount,
-  useRequestEthereumAccount,
   useTransactionContext,
   useWalletContext,
 } from "#/hooks"
-import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
+import { BitcoinIcon } from "#/assets/icons"
 import { ActionFlowType, PROCESS_STATUSES } from "#/types"
 import { isSupportedBTCAddressType } from "#/utils"
 import ActionFormModal from "./ActionFormModal"
@@ -23,9 +22,8 @@ export default function ModalContentWrapper({
   defaultType: ActionFlowType
   children: React.ReactNode
 }) {
-  const { btcAccount, ethAccount } = useWalletContext()
+  const { btcAccount } = useWalletContext()
   const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
-  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
   const { type, status, onClose, onResume } = useModalFlowContext()
   const { tokenAmount } = useTransactionContext()
 
@@ -38,15 +36,6 @@ export default function ModalContentWrapper({
       />
     )
 
-  if (!ethAccount)
-    return (
-      <MissingAccountModal
-        currency="ethereum"
-        icon={EthereumIcon}
-        requestAccount={requestEthereumAccount}
-      />
-    )
-
   if (!tokenAmount) return <ActionFormModal defaultType={defaultType} />
 
   if (status === PROCESS_STATUSES.PAUSED)

dapp/src/contexts/StakeFlowContext.tsx

@@ -7,10 +7,7 @@ import {
 import { REFERRAL } from "#/constants"
 
 type StakeFlowContextValue = Omit<UseStakeFlowReturn, "initStake"> & {
-  initStake: (
-    bitcoinRecoveryAddress: string,
-    ethereumAddress: string,
-  ) => Promise<void>
+  initStake: (bitcoinAddress: string) => Promise<void>
 }
 
 export const StakeFlowContext = React.createContext<StakeFlowContextValue>({
@@ -30,10 +27,10 @@ export function StakeFlowProvider({ children }: { children: React.ReactNode }) {
   } = useStakeFlow()
 
   const initStake = useCallback(
-    async (bitcoinRecoveryAddress: string, ethereumAddress: string) => {
+    async (bitcoinAddress: string) => {
       if (!acre) throw new Error("Acre SDK not defined")
 
-      await acreInitStake(bitcoinRecoveryAddress, ethereumAddress, REFERRAL)
+      await acreInitStake(bitcoinAddress, REFERRAL)
     },
     [acreInitStake, acre],
   )

dapp/src/contexts/WalletContext.tsx

@@ -4,8 +4,8 @@ import React, { createContext, useEffect, useMemo, useState } from "react"
 type WalletContextValue = {
   btcAccount: Account | undefined
   setBtcAccount: React.Dispatch<React.SetStateAction<Account | undefined>>
-  ethAccount: Account | undefined
-  setEthAccount: React.Dispatch<React.SetStateAction<Account | undefined>>
+  ethAccount: string | undefined
+  setEthAccount: React.Dispatch<React.SetStateAction<string | undefined>>
   isConnected: boolean
 }
 
@@ -23,7 +23,7 @@ export function WalletContextProvider({
   children: React.ReactNode
 }): React.ReactElement {
   const [btcAccount, setBtcAccount] = useState<Account | undefined>(undefined)
-  const [ethAccount, setEthAccount] = useState<Account | undefined>(undefined)
+  const [ethAccount, setEthAccount] = useState<string | undefined>(undefined)
   const [isConnected, setIsConnected] = useState<boolean>(false)
 
   useEffect(() => {

dapp/src/hooks/index.ts

@@ -3,7 +3,6 @@ export * from "./toasts"
 export * from "./sdk"
 export * from "./useDetectThemeMode"
 export * from "./useRequestBitcoinAccount"
-export * from "./useRequestEthereumAccount"
 export * from "./useWalletContext"
 export * from "./useSidebar"
 export * from "./useDocsDrawer"

dapp/src/hooks/sdk/useFetchBTCBalance.ts

@@ -15,7 +15,7 @@ export function useFetchBTCBalance() {
     const getBtcBalance = async () => {
       if (!isInitialized || !ethAccount || !acre) return
 
-      const chainIdentifier = EthereumAddress.from(ethAccount.address)
+      const chainIdentifier = EthereumAddress.from(ethAccount)
       const sharesBalance = await acre.staking.sharesBalance(chainIdentifier)
       const estimatedBitcoinBalance =
         await acre.staking.estimatedBitcoinBalance(chainIdentifier)

dapp/src/hooks/sdk/useInitializeAcreSdk.ts

@@ -9,11 +9,12 @@ export function useInitializeAcreSdk() {
   const { init } = useAcreContext()
 
   useEffect(() => {
-    if (!ethAccount?.address) return
+    // TODO: Init Acre SDK w/o Ethereum account.
+    if (!ethAccount) return
 
     const initSDK = async (ethAddress: string) => {
       await init(ethAddress, ETHEREUM_NETWORK)
     }
-    logPromiseFailure(initSDK(ethAccount.address))
-  }, [ethAccount?.address, init])
+    logPromiseFailure(initSDK(ethAccount))
+  }, [ethAccount, init])
 }

dapp/src/hooks/toasts/useInitGlobalToasts.ts

@@ -1,6 +1,5 @@
 import { useShowWalletErrorToast } from "./useShowWalletErrorToast"
 
 export function useInitGlobalToasts() {
-  useShowWalletErrorToast("ethereum")
   useShowWalletErrorToast("bitcoin")
 }

dapp/src/hooks/toasts/useShowWalletErrorToast.ts

@@ -6,21 +6,17 @@ import { useToast } from "./useToast"
 import { useWallet } from "../useWallet"
 import { useTimeout } from "../useTimeout"
 
-const { BITCOIN_WALLET_ERROR, ETHEREUM_WALLET_ERROR } = TOAST_IDS
+const { BITCOIN_WALLET_ERROR } = TOAST_IDS
 
 const WALLET_ERROR_TOAST_ID = {
   bitcoin: {
     id: BITCOIN_WALLET_ERROR,
     Component: TOASTS[BITCOIN_WALLET_ERROR],
   },
-  ethereum: {
-    id: ETHEREUM_WALLET_ERROR,
-    Component: TOASTS[ETHEREUM_WALLET_ERROR],
-  },
 }
 
 export function useShowWalletErrorToast(
-  type: "bitcoin" | "ethereum",
+  type: "bitcoin",
   delay = ONE_SEC_IN_MILLISECONDS,
 ) {
   const {

dapp/src/hooks/useWallet.ts

@@ -1,18 +1,25 @@
 import { useMemo } from "react"
+import { ZeroAddress } from "ethers"
 import { useWalletContext } from "./useWalletContext"
 import { useRequestBitcoinAccount } from "./useRequestBitcoinAccount"
-import { useRequestEthereumAccount } from "./useRequestEthereumAccount"
 
 export function useWallet() {
-  const { btcAccount, ethAccount } = useWalletContext()
+  const { btcAccount, ethAccount, setEthAccount } = useWalletContext()
   const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
-  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
 
   return useMemo(
     () => ({
-      bitcoin: { account: btcAccount, requestAccount: requestBitcoinAccount },
-      ethereum: { account: ethAccount, requestAccount: requestEthereumAccount },
+      bitcoin: {
+        account: btcAccount,
+        requestAccount: async () => {
+          await requestBitcoinAccount()
+          // TODO: Temporary solution - we do not need the eth account and we
+          // want to create the Acre SDK w/o passing the Ethereum Account.
+          setEthAccount(ZeroAddress)
+        },
+      },
+      ethereum: { account: ethAccount },
     }),
-    [btcAccount, requestBitcoinAccount, ethAccount, requestEthereumAccount],
+    [btcAccount, requestBitcoinAccount, ethAccount, setEthAccount],
   )
 }

dapp/src/types/toast.ts

@@ -7,7 +7,6 @@ import {
 
 export const TOAST_IDS = {
   BITCOIN_WALLET_ERROR: "bitcoin-wallet-error",
-  ETHEREUM_WALLET_ERROR: "ethereum-wallet-error",
   SIGNING_ERROR: "signing-error",
   DEPOSIT_TRANSACTION_ERROR: "deposit-transaction-error",
 } as const
@@ -17,7 +16,6 @@ export type ToastID = (typeof TOAST_IDS)[keyof typeof TOAST_IDS]
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const TOASTS: Record<ToastID, (props: any) => ReactNode> = {
   [TOAST_IDS.BITCOIN_WALLET_ERROR]: WalletErrorToast,
-  [TOAST_IDS.ETHEREUM_WALLET_ERROR]: WalletErrorToast,
   [TOAST_IDS.SIGNING_ERROR]: SigningMessageErrorToast,
   [TOAST_IDS.DEPOSIT_TRANSACTION_ERROR]: DepositTransactionErrorToast,
 }