Implementation of full staking flow

[kkosiorowska]

Closes #134
Closes #136
Closes #107

Overall Description

This PR integrates SDK with dApp and implements a full path for staking flow. Staking flow requires two steps. In the first step, a user needs to sign the message with an ETH account. In the next step, the user needs to do a bitcoin transaction by sending a deposit to a specially generated address. After the deposit, we call stake actions. Currently, we call directly the stake function from the SDK but this will be updated. Finally, we should call a bot to do stake.

Details

Integration SDK with dApp

The module responsible for handling the SDK is located in the acre-react directory. This will allow us to easily separate this logic when we want to create a separate package out of it. To use the SDK we need to wap components in a context provider AcreSdkProvider. The next step is to use the useAcreContext hook and initialize the acre object. Initialization involves calling the init method and passing it to the right Ethereum address to create a signer. Example of a solution in the dApp:

export function useInitializeAcreSdk() {
  const { ethAccount } = useWalletContext()
  const { init } = useAcreContext()

  useEffect(() => {
    if (ethAccount?.address) {
      const initSDK = async (ethAddress: string) => {
        await init(ethAddress, ETHEREUM_NETWORK)
      }

      asyncWrapper(initSDK(ethAccount.address))
    }
  }, [ethAccount?.address, init])
}

StakeFlowContext and useStakeFlow hook

Due to the fact that on staking flow is based on several steps and actions are called separately in other modal windows, a special context was created - StakeFlowContext. The context contain 4 properties:

type StakeFlowContextValue = {
  initStake: (
    bitcoinRecoveryAddress: string,
    ethereumAddress: string,
  ) => Promise<void>
  btcAddress?: string
  signMessage: () => Promise<void>
  stake: () => Promise<void>
}

The initStake function, based on the bitcoin and ethereum address, generates the deposit address (to which the user should deposit BTC). The address of the deposit was stored in the btcAddress property. By usingStakeFlow, we can easily refer to the above-mentioned properties.

Handle of staking flow

Staking flow is based on modal windows. Depending on the state of our flow, we should display an auxiliary modal such as loading, pause or success view. For this reason, the ProcessStatus type was created. The right state of the process will allow us to display the correct content.

export const PROCESS_STATUSES = {
  IDLE: "IDLE",
  PAUSED: "PAUSED",
  PENDING: "PENDING",
  LOADING: "LOADING",
  FAILED: "FAILED",
  SUCCEEDED: "SUCCEEDED",
} as const

export type ProcessStatus =
  (typeof PROCESS_STATUSES)[keyof typeof PROCESS_STATUSES]

useSendTransaction hook

I have created this hook to easily trigger transactions and set the status of it. It enables us to easily call out a callback at the time of success or error. It is useful when the stake function is called to set the corresponding process status.

useDepositBTCTransaction and useDepositBTC

This useDepositBTCTransaction is responsible for calling the signAndBroadcastTransaction function from the ledger wallet API. And useDepositBTC calls the previously mentioned function and, at the right moment when the transactionHash is already known, calls the success callback. I've separated this into two hooks but we might as well wrap it up in one.

Calling the stake function

The onDepositBTCSuccess is a callback in case of success for the deposit function. The stake function is called with a delay to avoid an error - funds not found At the moment, let's leave it as it is, and update this logic later.

  const onDepositBTCSuccess = useCallback(() => {
    setStatus(PROCESS_STATUSES.LOADING)
    // Let's call the stake function with a delay,
    // to make sure for the moment that it doesn't return an error about funds not found
    // TODO: Remove the delay when SDK is updated
    setTimeout(() => {
      asyncWrapper(stakeBTC())
    }, 10000)
  }, [setStatus, stakeBTC])

Testing

Tests happen on a test network - bitcoin_testnet and ethereum_sepolia. To make a stake you need to have funds in your BTC and ETH account. The minimum amount to stake is 0.001 BTC. Testing steps:

• Connect to your ETH and BTC (legacy address) accounts.
• Press the stake button to move to the correct flow.
• Complete the stake amount in form and proceed to the next steps.
• Sign the message for ETH account.
• Do a BTC deposit.
• Automatically after 10 seconds the stake function should be called. Sign the transaction.

Additional steps:

• Make sure that when you close the internal transaction window everything works.
• Make sure that the pause modal window works as before.

Currently, errors during sending transactions are displayed in the console. In the following steps, we will take care of this and display the right messages on the screen.