redesign

[stubbrn]

Here is what I think a better baseline for the UI.

I originally wanted to do just a redesign, but I found the smui library to be difficult to work with, so I replaced it with flowbite-svelte instead.

I've also added vite, so now each time you change something it doesn't take multiple seconds to see the results.

I think it makes more sense for Pairs to be separated (1 Table/Order-Book = 1 Pair), that's why there's a "ETH / XMR" indicating the current pair (Of course for now that's just a mock-up).

[codecov[bot]]

Codecov Report

Patch coverage: 45.30% and project coverage change: +0.06 :tada:

Comparison is base (c5bd052) 58.78% compared to head (5fdc914) 58.84%.

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #475 +/- ## ========================================== + Coverage 58.78% 58.84% +0.06% ========================================== Files 128 128 Lines 12185 12437 +252 ========================================== + Hits 7163 7319 +156 - Misses 4278 4351 +73 - Partials 744 767 +23 ``` | [Impacted Files](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | Coverage Δ | | |---|---|---| | [cmd/swapcli/main.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-Y21kL3N3YXBjbGkvbWFpbi5nbw==) | `43.82% <0.00%> (-0.60%)` | :arrow_down: | | [ethereum/extethclient/eth\_wallet\_client.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-ZXRoZXJldW0vZXh0ZXRoY2xpZW50L2V0aF93YWxsZXRfY2xpZW50Lmdv) | `55.10% <0.00%> (-3.24%)` | :arrow_down: | | [ethereum/utils.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-ZXRoZXJldW0vdXRpbHMuZ28=) | `74.51% <ø> (ø)` | | | [protocol/backend/backend.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-cHJvdG9jb2wvYmFja2VuZC9iYWNrZW5kLmdv) | `56.88% <ø> (ø)` | | | [protocol/txsender/external\_sender.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-cHJvdG9jb2wvdHhzZW5kZXIvZXh0ZXJuYWxfc2VuZGVyLmdv) | `0.00% <0.00%> (ø)` | | | [protocol/xmrmaker/swap\_state.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-cHJvdG9jb2wveG1ybWFrZXIvc3dhcF9zdGF0ZS5nbw==) | `68.38% <ø> (ø)` | | | [protocol/txsender/sender.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-cHJvdG9jb2wvdHhzZW5kZXIvc2VuZGVyLmdv) | `60.57% <37.50%> (+1.48%)` | :arrow_up: | | [protocol/xmrtaker/instance.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-cHJvdG9jb2wveG1ydGFrZXIvaW5zdGFuY2UuZ28=) | `43.16% <42.77%> (+1.60%)` | :arrow_up: | | [protocol/backend/mock\_recovery\_db.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-cHJvdG9jb2wvYmFja2VuZC9tb2NrX3JlY292ZXJ5X2RiLmdv) | `88.03% <47.05%> (-6.97%)` | :arrow_down: | | [db/recovery\_db.go](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None#diff-ZGIvcmVjb3ZlcnlfZGIuZ28=) | `66.87% <66.66%> (-0.03%)` | :arrow_down: | | ... and [6 more](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None) | | ... and [7 files with indirect coverage changes](https://app.codecov.io/gh/AthanorLabs/atomic-swap/pull/475/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=None)

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[stubbrn]

would be good to show the coin in the min/max columns, and also show the min/max amounts for both XMR and ETH (or put that in the swap pop-up) since right now it requires some estimation to figure out the ETH amount

Ok the dialog is now showing min / max, and how much XMR the taker will receive.

I'll rework that dialog later to look better and clearly show all the information of the swap to reduce human error.

---

what are your plans for the pairs/wallet/docs sections at the top? specifically thinking about wallets, I suppose for pairs we can eventually show ERC20/XMR pairs if offers for those exist

Pairs

I think that it would makes sense to separate the different pairs, where 1 pair = 1 order book / table. Therefore we would need a new UI preceding the order book, with the purpose of listing all the pairs available with some metadata like how many offers they have or the total liquidity.

Wallets

Well, wallets are handled by swapd, so it might make sense to implement a UI to list wallets and manage them easily. Could also be useful to show the user's swap history.

Docs

Not sure if that will be necessary.

---

if I try to take a swap offer, I get a websocket closed error, is that expected?

Not sure how to reproduce your error, it's supposed to show up only when the socket closed during the swap. This is what is supposed to happen:

swap.webm

[noot]

Well, wallets are handled by swapd, so it might make sense to implement a UI to list wallets and manage them easily. Could also be useful to show the user's swap history.

makes sense, it could be useful to use the swapcli transfer-(eth/xmr) functions in the wallets tab so users can easily transfer the funds out

Not sure how to reproduce your error, it's supposed to show up only when the socket closed during the swap. This is what is supposed to happen:

yeah the error was my bad! it's working for me now :)