Update screens for deposit and withdrawal flows #821

kkosiorowska · 2024-10-30T11:13:58Z

Ref #811
Closes #814
Closes #813

This PR updates screens for deposit and withdrawal flows. The "Skeleton" loading screen from both Deposit and Withdraw flows is no longer needed. The new flow adds two steps:

"Opening your wallet for signature" Screen
"Awaiting Transaction" Screen

Flow:

User initiates deposit: After pressing the Deposit/Withdraw CTAs, the user first sees the “Opening your wallet for signature” screen
Display wallet modal
Transition to ‘Awaiting Transaction’: Once the wallet modal is prompted, switch to the “Awaiting Transaction” screen while the user completes the signature.
Return to dapp: After signing with the wallet, the user returns to your dapp, where the “Awaiting Transaction” screen remains visible as needed.
Confirm deposit/withdraw: Once transaction is complete, display the “Deposit received” or "Withdrawal inititated" screens to confirm completion.

Screen.Recording.2024-10-31.at.13.12.28.mov

netlify · 2024-10-30T11:14:16Z

✅ Deploy Preview for acre-dapp ready!

Name	Link
🔨 Latest commit	`8ceb6b4`
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp/deploys/67288463a5a1a700082cbeee
😎 Deploy Preview	https://deploy-preview-821--acre-dapp.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-10-30T11:14:16Z

✅ Deploy Preview for acre-dapp-testnet ready!

Name	Link
🔨 Latest commit	`8ceb6b4`
🔍 Latest deploy log	https://app.netlify.com/sites/acre-dapp-testnet/deploys/672884636280720008052216
😎 Deploy Preview	https://deploy-preview-821--acre-dapp-testnet.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

The status will tell us when the wallet window opens and when the transaction is completed.

The "Skeleton" loading screen from both Deposit and Withdraw flows is no longer needed. The new flow adds two steps: - "Opening your wallet for signature" Screen - "Awaiting Transaction" Screen

We want to know when the transaction data are built. We add callback that is triggered after building data.

r-czajkowski · 2024-10-31T15:54:07Z

dapp/src/hooks/useDepositBTCTransaction.ts

@@ -24,6 +25,7 @@ export function useDepositBTCTransaction(
  const [transactionHash, setTransactionHash] = useState<string | undefined>(
    undefined,
  )
+  const [inProgress, setInProgress] = useState<boolean>(false)


Maybe it's a good opportunity to refactor this hook and use useMutation hook from @tanstack/react-query?

r-czajkowski · 2024-10-31T15:57:52Z

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

-    onDepositBTCSuccess,
-    onDepositBTCError,
-  )
+  const { sendBitcoinTransaction, transactionHash, inProgress } =


I would rename inProgress to isInProgress to keep consistency with other boolean values. Or if you agree to refactor the useDepositBTCTransaction hook as I mentioned above, we can use status.

r-czajkowski · 2024-10-31T16:02:40Z

dapp/src/components/TransactionModal/WalletInteractionModal.tsx

+}: {
+  step: WalletInteractionStep
+}) {
+  const type = useActionFlowType()


Suggested change

const type = useActionFlowType()

const action = useActionFlowType()

or

Suggested change

const type = useActionFlowType()

const actionType = useActionFlowType()

r-czajkowski · 2024-10-31T16:25:13Z

sdk/src/lib/redeemer-proxy.ts

@@ -25,6 +26,8 @@ export default class OrangeKitTbtcRedeemerProxy implements TbtcRedeemerProxy {

  #sharesAmount: bigint

+  #builtDataStepCallback?: BuiltDataStepCallback


Can't we use onSignMessageStepCallback?

Unfortunately, no. Withdrawal flow is the following three steps:

Preparing transaction

Opening wallet for signature

Awaiting signature confirmation

So we need to know when the data for the transaction is ready to display step 2. The status change in onSignMessageStepCallback matches the change from step 2 to step 3.

So we need to know when the data for the transaction is ready to display step 2. The status change in onSignMessageStepCallback matches the change from step 2 to step 3.

Isn't the data ready when we ask for a signature? Can't we display the preparing transaction step just after invoking the withdrawal function, then change the status in onSignMessageStepCallback to Opening wallet for signature and in messageSignedStepCallback display Awaiting signature confirmation?

Isn't the data ready when we ask for a signature?

Yeah the data is ready at that time.

Can't we display the preparing transaction step just after invoking the withdrawal function, then change the status in onSignMessageStepCallback to Opening wallet for signature and in messageSignedStepCallback display Awaiting signature confirmation?

TheOpening wallet for signature step should change to Awaiting signature confirmation when the wallet window opens. Therefore, we need the additional state of dataBuiltStepCallback. The status change in onSignMessageStepCallback indicates that the wallet should be open.

r-czajkowski · 2024-10-31T16:26:26Z

sdk/src/lib/redeemer-proxy.ts

@@ -25,6 +26,8 @@ export default class OrangeKitTbtcRedeemerProxy implements TbtcRedeemerProxy {

  #sharesAmount: bigint

+  #builtDataStepCallback?: BuiltDataStepCallback


Maybe we should rename to 🤔 :

Suggested change

#builtDataStepCallback?: BuiltDataStepCallback

#buildDataStepCallback?: BuiltDataStepCallback

or

Suggested change

#builtDataStepCallback?: BuiltDataStepCallback

#dataBuiltStepCallback?: BuiltDataStepCallback

r-czajkowski · 2024-10-31T16:26:32Z

sdk/src/lib/redeemer-proxy.ts

@@ -7,6 +7,7 @@ import { OrangeKitSdk } from "@orangekit/sdk"
 import { AcreContracts } from "./contracts"
 import { BitcoinProvider } from "./bitcoin"

+export type BuiltDataStepCallback = (safeTxData: Hex) => Promise<void>


Same as above

r-czajkowski · 2024-10-31T16:28:57Z

dapp/src/components/TransactionModal/WalletInteractionModal.tsx

+            isIndeterminate
+            {...progressProps}
+          />
+          <Image src={connector?.icon} p={2} bg="black" {...ICON_STYLES} />


Let's add alt="Connector icon.

kkosiorowska self-assigned this Oct 30, 2024

kkosiorowska force-pushed the awaiting-modals branch from eec8832 to 3952c51 Compare October 30, 2024 12:33

kkosiorowska added 2 commits October 30, 2024 15:31

Add inProgress status for sending BTC transaction

804c4e0

The status will tell us when the wallet window opens and when the transaction is completed.

Update screens for deposit and withdrawal flows

9e6fbe6

The "Skeleton" loading screen from both Deposit and Withdraw flows is no longer needed. The new flow adds two steps: - "Opening your wallet for signature" Screen - "Awaiting Transaction" Screen

kkosiorowska force-pushed the awaiting-modals branch from d7b5be7 to 9e6fbe6 Compare October 30, 2024 14:54

Update initializeWithdrawal fn

51a3965

We want to know when the transaction data are built. We add callback that is triggered after building data.

kkosiorowska force-pushed the awaiting-modals branch from 730ce12 to 51a3965 Compare October 30, 2024 15:30

kkosiorowska added 5 commits October 30, 2024 16:42

Add a new step for the withdrawal flow

d0c0418

Fix failed SDK test

9c8840f

Add padding for the connector icon

8fdbec7

Set the right description in WalletInteractionModal

f47c3e9

Use finally to update state

a880198

kkosiorowska added the 🎨 dapp dApp label Oct 31, 2024

Show correct modal when transactionHash is defined

48effb3

kkosiorowska marked this pull request as ready for review October 31, 2024 12:46

kkosiorowska requested review from kpyszkowski and r-czajkowski October 31, 2024 12:47

r-czajkowski reviewed Oct 31, 2024

View reviewed changes

kkosiorowska added 3 commits November 4, 2024 08:15

Add alt prop to image component

f3f18be

Rename from type to actionType

3fbfbef

Rename from builtDataStepCallback to dataBuiltStepCallback

8ceb6b4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update screens for deposit and withdrawal flows #821

Update screens for deposit and withdrawal flows #821

kkosiorowska commented Oct 30, 2024 •

edited

Loading

netlify bot commented Oct 30, 2024 •

edited

Loading

netlify bot commented Oct 30, 2024 •

edited

Loading

r-czajkowski Oct 31, 2024

r-czajkowski Oct 31, 2024

r-czajkowski Oct 31, 2024

kkosiorowska Nov 4, 2024

r-czajkowski Oct 31, 2024

kkosiorowska Nov 4, 2024

r-czajkowski Nov 4, 2024

kkosiorowska Nov 4, 2024

r-czajkowski Oct 31, 2024

kkosiorowska Nov 4, 2024

r-czajkowski Oct 31, 2024

kkosiorowska Nov 4, 2024

r-czajkowski Oct 31, 2024

kkosiorowska Nov 4, 2024

	const type = useActionFlowType()
	const action = useActionFlowType()

	const type = useActionFlowType()
	const actionType = useActionFlowType()

		@@ -25,6 +26,8 @@ export default class OrangeKitTbtcRedeemerProxy implements TbtcRedeemerProxy {

		#sharesAmount: bigint

		#builtDataStepCallback?: BuiltDataStepCallback

	#builtDataStepCallback?: BuiltDataStepCallback
	#buildDataStepCallback?: BuiltDataStepCallback

	#builtDataStepCallback?: BuiltDataStepCallback
	#dataBuiltStepCallback?: BuiltDataStepCallback

Update screens for deposit and withdrawal flows #821

Are you sure you want to change the base?

Update screens for deposit and withdrawal flows #821

Conversation

kkosiorowska commented Oct 30, 2024 • edited Loading

netlify bot commented Oct 30, 2024 • edited Loading

✅ Deploy Preview for acre-dapp ready!

netlify bot commented Oct 30, 2024 • edited Loading

✅ Deploy Preview for acre-dapp-testnet ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kkosiorowska commented Oct 30, 2024 •

edited

Loading

netlify bot commented Oct 30, 2024 •

edited

Loading

netlify bot commented Oct 30, 2024 •

edited

Loading