使用sendTransaction时的用户体验

Question

在发送事务时，用户体验的最佳实践是什么？我用旋转器阻止UI。

我是这样做的：

//BlockUI

const sentTransaction = await sendTransaction(transaction)
persistTransactionInDB()

//UnblockUI

有时需要超过60秒才能得到事务的响应，因此我可以使用一个transactionId来跟踪它。

我可以做：

const regularTransaction = sendTransaction(transaction).then(res => persistResponse)

alert('well done, we'll let you know')

...but那么，如果用户导航离开页面，那么我的函数就不会执行吗？

做这件事最好的方法是什么？

我可以或者应该以某种方式把这个卸给一个工人或者什么的吗？

Answer 1

它将取决于您当前的基础设施。这里的障碍是当用户关闭页面时，因此您需要以某种方式存储事务待办事项并在用户返回时恢复它。

以下是我在以前的项目中使用的一些替代方案：

• 仅前端:您可以使用本地存储来保存事务。
• 前端&后端:您可以使用数据库将事务保存在后端，并使用websockets管理用户连接，以便知道用户何时连接或断开与页面的连接。
• 以太扫描:不推荐，但你也可以从这个集中的网站检索交易状态。

在前两种情况下，您应该创建一个cron进程来管理带有状态字段的事务队列，以了解哪些事务正在“正在进行”、“已确认”或“已取消”，以便定期检查“正在进行中”事务是否最终得到确认。

解决方案也可能取决于您正在使用的框架。也许您可以找到可以促进此过程的库，但本质上，您需要一个进程来遍历事务队列，并需要一个存储来保持事务待办事项的积压。