Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update screens for deposit and withdrawal flows #821

Open
wants to merge 9 commits into
base: main
Choose a base branch
from

Conversation

kkosiorowska
Copy link
Contributor

@kkosiorowska kkosiorowska commented Oct 30, 2024

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:

  1. User initiates deposit: After pressing the Deposit/Withdraw CTAs, the user first sees the “Opening your wallet for signature” screen
  2. Display wallet modal
  3. Transition to ‘Awaiting Transaction’: Once the wallet modal is prompted, switch to the “Awaiting Transaction” screen while the user completes the signature.
  4. Return to dapp: After signing with the wallet, the user returns to your dapp, where the “Awaiting Transaction” screen remains visible as needed.
  5. 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

@kkosiorowska kkosiorowska self-assigned this Oct 30, 2024
Copy link

netlify bot commented Oct 30, 2024

Deploy Preview for acre-dapp ready!

Name Link
🔨 Latest commit 48effb3
🔍 Latest deploy log https://app.netlify.com/sites/acre-dapp/deploys/6723782a1efaa200082389de
😎 Deploy Preview https://deploy-preview-821--acre-dapp.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Oct 30, 2024

Deploy Preview for acre-dapp-testnet ready!

Name Link
🔨 Latest commit 48effb3
🔍 Latest deploy log https://app.netlify.com/sites/acre-dapp-testnet/deploys/6723782a77575b000834390f
😎 Deploy Preview https://deploy-preview-821--acre-dapp-testnet.netlify.app
📱 Preview on mobile
Toggle QR Code...

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.
@kkosiorowska kkosiorowska marked this pull request as ready for review October 31, 2024 12:46
@@ -24,6 +25,7 @@ export function useDepositBTCTransaction(
const [transactionHash, setTransactionHash] = useState<string | undefined>(
undefined,
)
const [inProgress, setInProgress] = useState<boolean>(false)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

onDepositBTCSuccess,
onDepositBTCError,
)
const { sendBitcoinTransaction, transactionHash, inProgress } =
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

}: {
step: WalletInteractionStep
}) {
const type = useActionFlowType()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const type = useActionFlowType()
const action = useActionFlowType()

or

Suggested change
const type = useActionFlowType()
const actionType = useActionFlowType()

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

#sharesAmount: bigint

#builtDataStepCallback?: BuiltDataStepCallback
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we use onSignMessageStepCallback?

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

#sharesAmount: bigint

#builtDataStepCallback?: BuiltDataStepCallback
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should rename to 🤔 :

Suggested change
#builtDataStepCallback?: BuiltDataStepCallback
#buildDataStepCallback?: BuiltDataStepCallback

or

Suggested change
#builtDataStepCallback?: BuiltDataStepCallback
#dataBuiltStepCallback?: BuiltDataStepCallback

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

export type BuiltDataStepCallback = (safeTxData: Hex) => Promise<void>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add alt="Connector icon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
2 participants