Remove Ethereum account from wallet context (#379)

Depends on: #371

This PR removes the Ethereum account from the dapp context to implement
Bitcoin native experience. Since the signing Bitcoin messages doesn't
work in the Ledger Live Wallet API we temporarily removed this step from
the deposit flow.

dapp/.env

@@ -14,3 +14,6 @@ VITE_REFERRAL=123
 VITE_DEFENDER_RELAYER_WEBHOOK_URL="https://api.defender.openzeppelin.com/actions/a0d6d2e2-ce9c-4619-aa2b-6c874fe97af7/runs/webhook/b1f17c89-8230-46e3-866f-a3213887974c/Sbddsy54cJ6sPg2bLPyuHJ"
 
 VITE_ACRE_SUBGRAPH_URL="https://api.studio.thegraph.com/query/73600/acre/version/latest"
+
+# TODO: Set this env variable in CI.
+VITE_TBTC_API_ENDPOINT=""

dapp/ledger-manifest-development.json

@@ -23,7 +23,8 @@
     "account.list",
     "message.sign",
     "transaction.sign",
-    "transaction.signAndBroadcast"
+    "transaction.signAndBroadcast",
+    "bitcoin.getXPub"
   ],
   "domains": ["http://*"],
   "type": "walletApp"

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

@@ -1,12 +1,14 @@
 import React, { useCallback, useMemo, useState } from "react"
-import { LedgerLiveEthereumSigner } from "#/web3"
-import { Acre, EthereumNetwork } from "@acre-btc/sdk"
+import { Acre, BitcoinNetwork } from "@acre-btc/sdk"
+import { BitcoinProvider } from "@acre-btc/sdk/dist/src/lib/bitcoin/providers"
+import { BITCOIN_NETWORK } from "#/constants"
 
 const TBTC_API_ENDPOINT = import.meta.env.VITE_TBTC_API_ENDPOINT
+const ETH_RPC_URL = import.meta.env.VITE_ETH_HOSTNAME_HTTP
 
 type AcreSdkContextValue = {
   acre?: Acre
-  init: (ethereumAddress: string, network: EthereumNetwork) => Promise<void>
+  init: (bitcoinProvider: BitcoinProvider) => Promise<void>
   isInitialized: boolean
 }
 
@@ -21,14 +23,23 @@ export function AcreSdkProvider({ children }: { children: React.ReactNode }) {
   const [isInitialized, setIsInitialized] = useState<boolean>(false)
 
   const init = useCallback<AcreSdkContextValue["init"]>(
-    async (ethereumAddress: string, network: EthereumNetwork) => {
-      if (!ethereumAddress) throw new Error("Ethereum address not defined")
-
-      const sdk = await Acre.initializeEthereum(
-        await LedgerLiveEthereumSigner.fromAddress(ethereumAddress),
-        network,
-        TBTC_API_ENDPOINT,
-      )
+    async (bitcoinProvider: BitcoinProvider) => {
+      let sdk: Acre
+
+      if (BITCOIN_NETWORK === BitcoinNetwork.Mainnet) {
+        sdk = await Acre.initializeMainnet(
+          bitcoinProvider,
+          TBTC_API_ENDPOINT,
+          ETH_RPC_URL,
+        )
+      } else {
+        sdk = await Acre.initializeTestnet(
+          bitcoinProvider,
+          TBTC_API_ENDPOINT,
+          ETH_RPC_URL,
+        )
+      }
+
       setAcre(sdk)
       setIsInitialized(true)
     },

dapp/src/acre-react/hooks/useStakeFlow.ts

@@ -3,7 +3,10 @@ import { StakeInitialization, DepositReceipt } from "@acre-btc/sdk"
 import { useAcreContext } from "./useAcreContext"
 
 export type UseStakeFlowReturn = {
-  initStake: (bitcoinAddress: string, referral: number) => Promise<void>
+  initStake: (
+    referral: number,
+    bitcoinRecoveryAddress?: string,
+  ) => Promise<void>
   btcAddress?: string
   depositReceipt?: DepositReceipt
   signMessage: () => Promise<void>
@@ -22,12 +25,12 @@ export function useStakeFlow(): UseStakeFlowReturn {
   >(undefined)
 
   const initStake = useCallback(
-    async (bitcoinAddress: string, referral: number) => {
+    async (referral: number, bitcoinRecoveryAddress?: string) => {
       if (!acre || !isInitialized) throw new Error("Acre SDK not defined")
 
       const initializedStakeFlow = await acre.staking.initializeStake(
-        bitcoinAddress,
         referral,
+        bitcoinRecoveryAddress,
       )
 
       const btcDepositAddress = await initializedStakeFlow.getBitcoinAddress()

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/constants/chains.ts

@@ -1,5 +1,13 @@
 import { Chain } from "#/types"
-import { EthereumNetwork, BitcoinNetwork } from "@acre-btc/sdk"
+import {
+  EthereumNetwork,
+  BitcoinNetwork as AcreSDKBitcoinNetwork,
+} from "@acre-btc/sdk"
+
+export type BitcoinNetwork = Exclude<
+  AcreSDKBitcoinNetwork,
+  AcreSDKBitcoinNetwork.Unknown
+>
 
 export const BLOCK_EXPLORER: Record<Chain, { title: string; url: string }> = {
   ethereum: { title: "Etherscan", url: "https://etherscan.io" },
@@ -11,5 +19,5 @@ export const ETHEREUM_NETWORK: EthereumNetwork =
 
 export const BITCOIN_NETWORK: BitcoinNetwork =
   import.meta.env.VITE_USE_TESTNET === "true"
-    ? BitcoinNetwork.Testnet
-    : BitcoinNetwork.Mainnet
+    ? AcreSDKBitcoinNetwork.Testnet
+    : AcreSDKBitcoinNetwork.Mainnet

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: () => Promise<void>
 }
 
 export const StakeFlowContext = React.createContext<StakeFlowContextValue>({
@@ -29,14 +26,11 @@ export function StakeFlowProvider({ children }: { children: React.ReactNode }) {
     stake,
   } = useStakeFlow()
 
-  const initStake = useCallback(
-    async (bitcoinRecoveryAddress: string, ethereumAddress: string) => {
-      if (!acre) throw new Error("Acre SDK not defined")
+  const initStake = useCallback(async () => {
+    if (!acre) throw new Error("Acre SDK not defined")
 
-      await acreInitStake(bitcoinRecoveryAddress, ethereumAddress, REFERRAL)
-    },
-    [acreInitStake, acre],
-  )
+    await acreInitStake(REFERRAL)
+  }, [acreInitStake, acre])
 
   const context = useMemo(
     () => ({

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

@@ -4,7 +4,6 @@ export * from "./sdk"
 export * from "./subgraph"
 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

@@ -1,19 +1,24 @@
 import { useEffect } from "react"
-import { ETHEREUM_NETWORK } from "#/constants"
+import { BITCOIN_NETWORK, ETHEREUM_NETWORK } from "#/constants"
 import { logPromiseFailure } from "#/utils"
 import { useAcreContext } from "#/acre-react/hooks"
+import { LedgerLiveWalletApiBitcoinProvider } from "@acre-btc/sdk/dist/src/lib/bitcoin/providers"
 import { useWalletContext } from "../useWalletContext"
 
 export function useInitializeAcreSdk() {
-  const { ethAccount } = useWalletContext()
+  const { btcAccount } = useWalletContext()
   const { init } = useAcreContext()
 
   useEffect(() => {
-    if (!ethAccount?.address) return
+    if (!btcAccount?.id) return
 
-    const initSDK = async (ethAddress: string) => {
-      await init(ethAddress, ETHEREUM_NETWORK)
+    const initSDK = async (bitcoinAccountId: string) => {
+      const bitcoinProvider = await LedgerLiveWalletApiBitcoinProvider.init(
+        bitcoinAccountId,
+        BITCOIN_NETWORK,
+      )
+      await init(bitcoinProvider, ETHEREUM_NETWORK)
     }
-    logPromiseFailure(initSDK(ethAccount.address))
-  }, [ethAccount?.address, init])
+    logPromiseFailure(initSDK(btcAccount.id))
+  }, [btcAccount?.id, 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,
 }