UI For Li.fi Integration

[maikReal]

Context

We want to integrate the li.fi aggregator of bridges to zkBob. They have their own prebuild UX/UI components that we need to use in zkBob during integration

Here is the flow + design of their widget

You can also change some basic settings like color, border radius etc. Here you can take a look this information in details

What to do?

We need to chose one appropriate design of the widget for us.

You can also launch local version of the widget using this instruction

The user flow

https://www.figma.com/file/UZnI4dJ4hGxHlh4SDby2XX/%5BzkBob%5D-Li.fi-Integration?node-id=0%3A1

UPDS from 28.11:

1. Making swap from any tokens to any. We will not statically show bob token and Polygon net inside widget. It will be pre-filled, but a user can change it.
2. We will show the widget by clicking on "Get BOB" button. The widget will be shown as popup. We will pre-fill the "From" field by token USDT and net == Ethereium. The "To" field we pre-fill by token == BOB and net == Polygon

Out main goal is to make the work with BOB token as more convenient as possible. So, such approach for the first iteration is perfect

Analytics

ToDo

[maikReal]

@tgladilina added user flow and notices from the call

[tgladilina]

Mockup
https://www.figma.com/file/VgEAclPmc6tghBwaSfTWAn/zkBob-App?node-id=2348%3A23342&t=q88gdZnJ9p1skSjl-1

Please apply zkBob styles to widget.
Let's remove:

• settings: dark/light
• language
• Advanced preferences
• connect wallet
• Powered by

[tgladilina]

@maxaleks cc

[ulyanas]

@maxaleks Need ETA

[ulyanas]

need Analytics dashboard

[maxaleks]

@maikReal The issue with loading most pictures has been fixed. Ready for review

[maikReal]

Looks okay to me

@vadimnikonov1 @tgladilina your turn to check :)

[vadimnikonov1]

QA review - OK