Web UI compatible with PiNodeXMR [possible bounty]

[shermand100]

Starting a new thread to avoid crashing the Electrum based issue chat...

So the core of this Atomic Swap utility works really really well with PiNodeXMR. Both swapd and swapcli are easy to build with minimal dependencies.
It wasn't until I started building the Web UI shown on your stagenet docs that I was having to install dependencies I wasn't familiar with (Sveltekit, Vite, Yarn) but perhaps it was it's limited functionality that made it seem trickier to install than I thought. - I've only got basic experience with node, express and the html, JavaScript, css basics, and self teach what I need to build what I have.

PiNodeXMR currently offers the option to 'make' swap offers via a 'whiptail' CLI menu, to take some workload from basic users who really can't get to grips with full CLI, but 'take' offers I haven't added to that menu yet as to copy/paste/present the swap offer ID will take another evening or three to integrate.

I'm opening this thread to ask if a Web UI could be resurrected or created:

• In it's most basic form only 'take' swap offers as shown in the stagenet docs would be necessary as for now 'make' can be created in the 'whiptail' menu. Make offers could be added later.
• If a Web UI is resurrected or created, can it be installed/built with NodeJS, or dropped into place compatible with Apache2 to avoid more dependencies my end... which leads me to...
• A bounty? So the Web UI I believe is on your radar to create anyway. Would a bounty be suitable to incentivise it being created in a way that works in harmony with PiNodeXMR, with the bounty compensating the dev for potentially having to create it slightly outside their preferred method - but makes install our end easier?

Sorry to seem to come barging into this project like this. I'm hoping with a good user experience PiNodeXMR will bring it's couple of hundred users into your swap system, (realistically a few dozen of those for the swaps)

Thoughts @noot @stubbrn ?

[TrieBr]

Whoever set up the ui configured it to use Svelte SSR by default which means it needs to deployed to a NodeJS runtime to serve the website. So you could have NodeJS serving the website, and then have your existing apache webserver proxy requests to the NodeJS Server.

Alternatively, you could build the UI as a SPA and remove the need for any NodeJS server and just deploy the static files to your Apache webserver directly. In my opinion, this type of UI does not need SSR and should just be deployed as a static SPA anyway.

Install the static adapter:

yarn add @sveltejs/adapter-static@1.0.6

Change svelte.config.js:

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		adapter: adapter({
			fallback: 'index.html' // may differ from host to host
		})
	}
};

export default config;

Build the UI:

yarn build

Then deploy the contents of the build directory to your webserver (apache2).

[shermand100]

Thanks, I initially opened this when I was at the peak of my work based studies and didn't have the time to have a decent go at making my own UI for this. By chance literally this week things have calmed down a bit and I've made good progress with something separately - a P2Pool status UI for PiNodeXMR - that has given me a method to have another look at this atomic swap UI.

I'll try as you've suggested and see if that fallback index.html gets me close and adapt it.
If it's full of clutter and unused svelt template stuff I'll start my own build as I realistically only need to display the RPC JSON API from the net_queryAll command giving something like:

{
"jsonrpc": "2.0",
"result": {
"peersWithOffers": [
{
"peerID": "12D3KooWGVzz2d2LSceVFFdqTYqmQXTqc5eWziw7PLRahCWGJhKB",
"offers": [
{
"offerID": "0xa7429fdb7ce0c0b19bd2450cb6f8274aa9d86b3e5f9386279e95671c24fd8381",
"provides": "XMR",
"minAmount": "0.1",
"maxAmount": "1",
"exchangeRate": "0.5",
"ethAsset": "ETH"
}
]
},

[shermand100]

So this week I've made a start at a basic interface, and after being totally bamboozled by Svelte have decided to stick with what I know as it's lightweight and easily auditable.

I'd love to help put this Atomic Swap tool into more peoples hands, and whilst there is core functionality added into PiNodeXMR which works on main net right now, user uptake is minimal and so I'm committed to try and make a "Pretty" interface for users to interact with. At least so my current menu is less daunting.

As suggested by @TrieBr above I've stuck with the framework of the current PiNodeXMR interface. So HTML, JS, CSS.
Next step is to add a functional "Take Offer" button, which will obviously involve some more scripts to trigger things server side.

The more people that have access to this tool the better. More users, more offers, more competition, better prices etc. Therefore would @MoneroNodo @intr-cx be interested too? I gather you'll be bringing dozens of users to the Monero Node environment for which a tool like this would be useful to it's users, and as a fork of PiNodeXMR I hope this could fit in seamlessly?

As always, all feedback welcome along with suggestions for next steps.

To avoid confusing code with the PiNodeXMR project it's in a separate repo:
https://github.com/shermand100/AtomicSwap_UI

And generally will look a little like this, with buttons to come for make/take offers: