More

    Chi Tiết Thiết Kế Rainbow Bridge 2.0

    Các Rainbow Bridge là cây cầu chính thức để chuyển tokens giữa EthereumNEAR và Aurora blockchains.

    Phiên bản gốc 1.0 chỉ hỗ trợ chuyển giữa Ethereum và NEAR và sau đó khi được mở rộng để hỗ trợ Aurora, một số hạn chế đã xuất hiện khiến chúng tôi phải tiến hành thiết kế lại.

    Hợp nhất sản phẩm

    Phiên bản 1.0 của bridge tồn tại trên tên miền, ethereum.bridgetonear.org. Khi hỗ trợ Aurora đã được bổ sung, bridge mà sau đó lived separately trên aurora.bridgetonear.org. Nhiều sản phẩm, trên các miền riêng biệt, rõ ràng không phải là lý tưởng từ quan điểm UX hoặc khả năng mở rộng.

    Đối với phiên bản 2.0, chúng tôi hợp nhất mọi thứ thành một sản phẩm duy nhất chạy trên memorable domain, rainbowbridge.app. Trong giao diện duy nhất của nó, bridge hiện hỗ trợ chuyển giao giữa bất kỳ mạng nào được hỗ trợ.

    Cách tiếp cận này mở ra cánh cửa để dễ dàng bổ sung hỗ trợ cho nhiều mạng hơn nữa. Ví dụ: một nhóm bên ngoài gần đây đã xây dựng các trình kết nối với Binance Smart Chain, mà chúng tôi dự định sẽ sớm tích hợp vào Rainbow Bridge 2.0.

    Kiến trúc kỹ thuật

    Chúng tôi đã tạo Rainbow Bridge 2.0 bằng cách tích hợp light-client của mình vào một ứng dụng Next.js, được hỗ trợ với headless CMS (hệ thống quản lý nội dung) .

    Sử dụng CMS bên ngoài cho phép những người không chuyên về kỹ thuật quản lý một số bản sao giao diện người dùng sản phẩm và cho phép một số thứ có lập trình gọn gàng như context-sensitive FAQs chỉ xuất hiện trong giao diện người dùng, ở những nơi cụ thể.

    Ví dụ: tất cả các giao dịch chuyển sang Ethereum đều yêu cầu hai giao dịch, không thể hủy được. Vì đây là một nguồn gây nhầm lẫn phổ biến với 1.0, giờ đây chúng tôi có thể thông báo cho người dùng về điều này, bằng cách hiển thị FAQ trên màn hình approve và confirmation

    Cấu trúc này sẽ cho phép chúng tôi trong tương lai mở rộng thông tin được hiển thị trong giao diện người dùng khi chúng tôi xác định các câu hỏi thường gặp bổ sung từ người dùng và chỉ ở những nơi có liên quan.

    Tất nhiên, mục tiêu cuối cùng là một sản phẩm tự ghi lại tài liệu và không cần hướng dẫn sử dụng.

    Quản lý MetaMask tự động

    Người dùng Multi-chain DeFi với trải nghiệm người dùng khủng khiếp của các ứng dụng yêu cầu họ “Vui lòng chuyển sang mạng Ethereum”, hoặc tệ hơn là phải thêm mạng mới (RPC endpoint) vào MetaMask theo cách thủ công. 

    Tầm nhìn của chúng tôi về tương lai là tầm nhìn trong đó người dùng chuyển từ ứng dụng này sang ứng dụng khác mà không cần biết đến mạng bên dưới. Trong thế giới đó, ví sẽ được cấu hình sẵn với các mạng phổ biến và tự động chuyển đổi giữa chúng khi cần thiết.

    Trong khi đó, vì MetaMask là tiêu chuẩn defacto, chúng tôi có thể đạt được một số tiến bộ theo hướng đó bằng cách để cầu nối tương tác và quản lý MetaMask trực tiếp thay mặt cho người dùng .

    Trong video sau, tôi chưa định cấu hình mạng Aurora trong MetaMask. Như bạn sẽ thấy, cầu nối sẽ bắt đầu lời nhắc trong MetaMask để định cấu hình trước và xác nhận việc thêm Aurora, sau đó chuyển sang nó làm mạng mặc định.

    Chi tiết transfer mới

    Trong video tiếp theo, chúng ta sẽ xem xét một quá trình chuyển mới, từ mạng Aurora sang mạng Ethereum, trong đó bạn sẽ nhận thấy các chi tiết sau:

    • Trên màn hình đầu tiên, chúng tôi hiển thị context-specific FAQ thông báo cho người dùng rằng chúng tôi hiện chỉ hỗ trợ ví MetaMask và NEAR.
    • Trên màn hình thứ hai, trong khi MetaMask đang đọc trạng thái mạng và ví của người dùng (có thể mất vài phút), chúng tôi hiển thị một số ghosted token placeholder icons, cho đến khi chúng tôi có dữ liệu cần thiết để hiển thị các biểu tượng token thực chỉ cho những token mà người dùng có số dư.
    • Tất nhiên, chúng tôi cũng cung cấp một liên kết để hiển thị cho người dùng tất cả các token mà bridge hỗ trợ và trên màn hình đó, chúng tôi tô xám tất cả các token mà người dùng không có số dư (vì không thể chọn chúng).
    • Chúng tôi hiển thị cho người dùng số dư token của họ destination network, vì điều này thường hữu ích trong việc tính toán số tiền cần được chuyển.
    • Chúng tôi cung cấp trình trợ giúp bằng một cú nhấp chuột để cho phép người dùng gửi số dư token đầy đủ của họ trong quá trình chuyển.
    • … và trong trường hợp họ đã chọn ETH, chúng tôi cho họ thấy một cảnh báo rằng họ có thể muốn giữ lại một chút để trả phí gas.

    Các lịch sử giao dịch và đang chờ xử lý

    Có rất nhiều thứ để đóng gói vào màn hình chính, nơi các giao dịch được hiển thị, cũng như nhiều chi tiết thiết kế và cân nhắc:

    • Chúng tôi tách biệt trực quan các giao dịch đang chờ xử lý khỏi các giao dịch đã hoàn thành, để thu hút sự tập trung của người dùng vào những giao dịch cần chú ý.
    • Đối với các giao dịch đang chờ xử lý, chúng tôi chỉ ra hướng chuyển tiền một cách trực quan (bao gồm một hoạt ảnh nhẹ không rõ ràng trong ảnh chụp màn hình).
    • Chúng tôi cho phép phần màn hình đang chờ xử lý mở rộng và cuộn theo chiều ngang. Ở đây bạn có thể thấy rằng tôi có một giao dịch yêu cầu hoàn thành và ba giao dịch lẽ ra đã được hoàn thành, nhưng vẫn đang chờ xử lý.
    • Đối với các lần chuyển tiền đã hoàn tất, chúng tôi nhấn mạnh vào các biểu tượng và số tiền token, đồng thời cho biết hướng chuyển tiền một cách trực quan.
    • Chúng tôi luôn đảm bảo rằng việc thực hiện một giao dịch mới luôn sẵn sàng ở phía trên bên trái.
    • Chúng tôi cung cấp hỗ trợ khách hàng thông qua tích hợp trực tiếp với HelpScout. Người dùng có thể tạo vé hỗ trợ trực tiếp trong Rainbow Bridge bằng cách nhấp vào biểu tượng ở góc dưới bên phải.
    • Và tất nhiên, tất cả điều này hoạt động một cách trơn tru trên các thiết bị di động.

    Tiện ích sau transfer 

    Trải nghiệm người dùng tuyệt vời không dừng lại sau khi quá trình chuyển hoàn tất. Trong video sau, bạn sẽ thấy rằng chúng tôi đã thêm các chức năng tiện lợi cho:

    • Xem giao dịch nguồn trong explorer.
    • Sao chép ID giao dịch của giao dịch nguồn.
    • Sao chép địa chỉ hợp đồng của token trên mạng đích.
    • Thêm destination token vào MetaMask để nó xuất hiện trong danh sách nội dung.
    • Cuối cùng, ẩn một transfer. Đôi khi, như trong trường hợp của riêng tôi ở đây, có những giao dịch sẽ mãi mãi xuất hiện khi đang chờ xử lý trên blockchain và tôi chỉ muốn xóa chúng khỏi giao diện người dùng bridge. Tính năng này cho phép tôi làm điều đó.

    Bộ lọc giao dịch

    Đối với một sản phẩm multi-chain như Rainbow Bridge 2.0, cho phép chuyển giao với tối đa sáu kết hợp hướng khác nhau, bạn sẽ cần một số bộ lọc để nhanh chóng tìm thấy giao dịch lịch sử mà bạn đang theo dõi. Về điều đó, chúng tôi đã giúp bạn bảo hiểm.

    Thông tin liên lạc trạng thái

    Đôi khi các vấn đề xuất hiện làm gián đoạn hoạt động trơn tru của bridge, chẳng hạn như cuộc tấn công DDoS gần đây. Để giúp người dùng luôn cập nhật, chúng tôi đã triển khai status page do CMS điều khiển, trên đó chúng tôi hiển thị toàn văn bản cập nhật mới nhất và tóm tắt nén (nhưng có thể mở rộng) về tất cả các bản cập nhật trước đây.

    Bất cứ khi nào có cảnh báo trạng thái — có thể là màu đỏ (cảnh báo), màu vàng (cảnh báo) hoặc màu xanh lá cây (tất cả đều tốt) —chúng tôi hiển thị biểu ngữ màu trong tiêu đề trong toàn bộ giao diện người dùng cầu nối.

    Một thách thức thiết kế là phải làm gì với các cập nhật trạng thái xanh, thường được sử dụng để thông báo rằng một số vấn đề trong quá khứ đã được giải quyết. Chúng ta có nên hiển thị chúng giống như các biểu ngữ khác không? Bạn sẽ không thực sự muốn một biểu ngữ màu xanh lá cây hiển thị vĩnh viễn.

    Giải pháp của chúng tôi là thiết kế giao diện người dùng sao cho các biểu ngữ màu xanh lá cây chỉ được hiển thị trong 24 giờ, sau đó biến mất khỏi giao diện người dùng chính (nhưng vẫn còn trên trang trạng thái lịch sử).

    Kết luận

    UX là thứ sẽ mang tiền điện tử đến với đại chúng và chúng tôi thực sự tự hào về Cầu vồng 2.0 mới và hy vọng chúng tôi đã thúc đẩy trải nghiệm người dùng của cầu tiền điện tử tiến lên một vài bước trong ngành.

    Nhưng chúng tôi không gần kết thúc. Chúng tôi đã lên kế hoạch cho rất nhiều tính năng mới, bao gồm một số tính năng đầu tiên trong ngành! Và tất nhiên, chúng tôi sẽ quan sát và lắng nghe người dùng của mình để nỗ lực liên tục đánh giá trải nghiệm.

    Stay in the Loop

    Get the daily email from CryptoNews that makes reading the news actually enjoyable. Join our mailing list to stay in the loop to stay informed, for free.

    Latest stories

    - Advertisement - spot_img

    You might also like...

    0
    Would love your thoughts, please comment.x
    ()
    x