Bitcoin native experience

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

@@ -1,16 +1,11 @@
 import { useCallback, useState } from "react"
-import {
-  StakeInitialization,
-  EthereumAddress,
-  DepositReceipt,
-} from "@acre-btc/sdk"
+import { StakeInitialization, DepositReceipt } from "@acre-btc/sdk"
 import { useAcreContext } from "./useAcreContext"
 
 export type UseStakeFlowReturn = {
   initStake: (
-    bitcoinRecoveryAddress: string,
-    ethereumAddress: string,
     referral: number,
+    bitcoinRecoveryAddress?: string,
   ) => Promise<void>
   btcAddress?: string
   depositReceipt?: DepositReceipt
@@ -30,17 +25,12 @@ export function useStakeFlow(): UseStakeFlowReturn {
   >(undefined)
 
   const initStake = useCallback(
-    async (
-      bitcoinRecoveryAddress: string,
-      ethereumAddress: string,
-      referral: number,
-    ) => {
+    async (referral: number, bitcoinRecoveryAddress?: string) => {
       if (!acre || !isInitialized) throw new Error("Acre SDK not defined")
 
       const initializedStakeFlow = await acre.staking.initializeStake(
-        bitcoinRecoveryAddress,
-        EthereumAddress.from(ethereumAddress),
         referral,
+        bitcoinRecoveryAddress,
       )
 
       const btcDepositAddress = await initializedStakeFlow.getBitcoinAddress()
@@ -58,7 +48,7 @@ export function useStakeFlow(): UseStakeFlowReturn {
   const signMessage = useCallback(async () => {
     if (!stakeFlow) throw new Error("Initialize stake first")
 
-    await stakeFlow.signMessage()
+    await Promise.resolve(stakeFlow.signMessage())
   }, [stakeFlow])
 
   const stake = useCallback(async () => {

dapp/src/components/TransactionModal/ActionFormModal.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode, useCallback, useState } from "react"
 import { Box, ModalBody, ModalCloseButton, ModalHeader } from "@chakra-ui/react"
-import { useAppDispatch, useStakeFlowContext, useWalletContext } from "#/hooks"
+import { useAppDispatch, useStakeFlowContext } from "#/hooks"
 import { ACTION_FLOW_TYPES, ActionFlowType, BaseFormProps } from "#/types"
 import { TokenAmountFormValues } from "#/components/shared/TokenAmountForm/TokenAmountFormBase"
 import { logPromiseFailure } from "#/utils"
@@ -26,7 +26,6 @@ const FORM_DATA: Record<
 }
 
 function ActionFormModal({ type }: { type: ActionFlowType }) {
-  const { btcAccount, ethAccount } = useWalletContext()
   const { initStake } = useStakeFlowContext()
   const dispatch = useAppDispatch()
 
@@ -35,13 +34,8 @@ function ActionFormModal({ type }: { type: ActionFlowType }) {
   const { heading, renderComponent } = FORM_DATA[type]
 
   const handleInitStake = useCallback(async () => {
-    const btcAddress = btcAccount?.address
-    const ethAddress = ethAccount?.address
-
-    if (btcAddress && ethAddress) {
-      await initStake(btcAddress, ethAddress)
-    }
-  }, [btcAccount?.address, ethAccount?.address, initStake])
+    await initStake()
+  }, [initStake])
 
   const handleSubmitForm = useCallback(
     async (values: TokenAmountFormValues) => {

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

@@ -76,7 +76,7 @@ export default function DepositBTCModal() {
     const response = await depositTelemetry(
       depositReceipt,
       btcAddress,
-      ethAccount.address,
+      ethAccount,
     )
 
     if (response.verificationStatus === "valid") {

dapp/src/components/TransactionModal/ModalContentWrapper.tsx

@@ -4,10 +4,9 @@ import {
   useActionFlowTokenAmount,
   useActionFlowType,
   useRequestBitcoinAccount,
-  useRequestEthereumAccount,
   useWalletContext,
 } from "#/hooks"
-import { BitcoinIcon, EthereumIcon } from "#/assets/icons"
+import { BitcoinIcon } from "#/assets/icons"
 import { PROCESS_STATUSES } from "#/types"
 import { isSupportedBTCAddressType } from "#/utils"
 import ActionFormModal from "./ActionFormModal"
@@ -21,9 +20,8 @@ export default function ModalContentWrapper({
 }: {
   children: React.ReactNode
 }) {
-  const { btcAccount, ethAccount } = useWalletContext()
+  const { btcAccount } = useWalletContext()
   const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
-  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
   const status = useActionFlowStatus()
   const type = useActionFlowType()
   const tokenAmount = useActionFlowTokenAmount()
@@ -37,15 +35,6 @@ export default function ModalContentWrapper({
       />
     )
 
-  if (!ethAccount)
-    return (
-      <MissingAccountModal
-        currency="ethereum"
-        icon={EthereumIcon}
-        requestAccount={requestEthereumAccount}
-      />
-    )
-
   if (!tokenAmount) return <ActionFormModal type={type} />
 
   if (status === PROCESS_STATUSES.LOADING) return <LoadingModal />

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
+>
 
 const BLOCK_EXPLORER_TESTNET = {
   ethereum: { title: "Etherscan", url: "https://sepolia.etherscan.io" },
@@ -21,5 +29,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

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

@@ -1,19 +1,24 @@
 import { useEffect } from "react"
-import { ETHEREUM_NETWORK } from "#/constants"
+import { BITCOIN_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)
     }
-    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 {