lifinance / widget

LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
https://li.fi/widget
Apache License 2.0
129 stars 84 forks source link

feat: add adaptive widget skeleton #239

Closed DNR500 closed 6 months ago

DNR500 commented 7 months ago

Jira: LF-7886

This present an adaptive Widget Skeleton that adapt adapt to different themes and configurations.

As discussed I've tried to do this without using the Mui's ThemeProvider - I have still had to use the createTheme function to generate the correct theme data. It should adapt to the existing themes in the playground.

It should also adapt to 'refuel' subvariant and take in to consideration RequireUI (toAddress), HiddenUI ('poweredBy and walletMenu) and also navigation.edge from theme. I don't think it would take much to support the 'split' subvariant also.

The functions I have written here to adapt to component definitions from the theme feel a little brittle - if we were to do this using Mui's themeProvider I think the complexity of this code would be reduced and also broader use of Mui's theme would be supported relatively easily - comparison an be found on the spike branch https://github.com/lifinance/widget/pull/242

I've set this up so that you can play with this in the Widget Playground, and I've also added this to the Next playground to see it work there.

JumperLight

JumperDark

https://github.com/lifinance/widget/assets/7836726/806d22dc-2955-41ad-8a7a-b70e732acff4

https://github.com/lifinance/widget/assets/7836726/231887c4-b071-42c0-84cb-cbd776fe1ffe

github-actions[bot] commented 6 months ago

Hey! This is your new endopint: https://eeef9bd8.widget-widgetskel.pages.dev

DNR500 commented 6 months ago

Development for this feature has moved to - https://github.com/lifinance/widget/pull/242