elsirion/webimint-rs

Experimental integration of `fedimint-client` with the Leptos web frontend framework

CAUTION: highly experimental, the Database implementation is likely horribly broken

Fedimint Client built with Leptos

This repo contains a proof-of-concept of how to integrate fedimint-client with the Leptos web framework to build a PWA. There are still some bugs being worked out, but there is a demo available at https://webimint.sirion.io/.

Prerequisites

Check out Fedimint branch releases/v0.2:

git clone https://github.com/fedimint/fedimint
cd fedimint
git checkout releases/v0.2

Make sure you have set up local dev environment needed to run fedimint locally

Open terminal and run to open development shell:

nix develop

just build
just mprocs

To get an invite code (you'll need it for next steps) select user process and enter fedimint-cli dev invite-code.

Example

bash-5.1$ fedimint-cli dev invite-code
{
  "invite_code": "fed1132h0j84q5t6qzg8vkxk2lj3dmmzw54flqh3m6z4yrf6ryyerrn6sg36nuratsuf0mjvm84svt40cuqq4waen5te0xyerwt3s9cczuvf6xyurzde59ld2c273s3xm3z3ms552g7x2yu0"
}

The invite code is needed in next step Development.

Development

1. Open terminal and enter:

nix develop

# only once
npm i

trunk serve

Your output will look like this:

$ nix develop
💡 Run 'just' for a list of available 'just ...' helper recipes
$ trunk serve
2023-08-06T12:00:41.373844Z  INFO 📦 starting build
2023-08-06T12:00:41.374062Z  INFO spawning asset pipelines
2023-08-06T12:00:41.522959Z  INFO building webimint
    Finished dev [unoptimized + debuginfo] target(s) in 0.14s
2023-08-06T12:00:41.673972Z  INFO fetching cargo artifacts
2023-08-06T12:00:41.834730Z  INFO processing WASM for webimint
2023-08-06T12:00:41.933395Z  INFO calling wasm-bindgen for webimint
2023-08-06T12:00:42.907392Z  INFO copying generated wasm-bindgen artifacts
2023-08-06T12:00:42.919447Z  INFO applying new distribution
2023-08-06T12:00:42.919736Z  INFO ✅ success
2023-08-06T12:00:42.919871Z  INFO 📡 serving static assets at -> /
2023-08-06T12:00:42.919899Z  INFO 📡 server listening at http://127.0.0.1:8080

2. Open http://127.0.0.1:8080 in your browser

3. Enter invite code into to input and submit. Check Prerequisites above to see how to get it.

To see what's going on underneath open the browser console:

webimint-rs's Issues

Menu component to avoid repetitive code in `Joined`

There should be a menu component that just takes a Vec of menu items and their corresponding views.

Change logo "tbd" to "webimint"

Add original Inkscape (svg) file

Register protocol handler for LN invoices

What protocol do we need to handle? Can it be done by a PWA?

Related:

• registerProtocolHandler function
• experimental manifest field protocol_handlers
• Related Mutinynet PR MutinyWallet/mutiny-web#547

Installable from web for mobile

https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable

Example https://microsoftedge.github.io/Demos/pwamp/

QR code component

Related to #18

Selectable federations

Place a select box at the top or so

Copyable text component

Both raw e-cash and lightning invoices need to be copied by the user, we should have a component that displays the data in monospace, has proper line breaking and a copy button, but also allows easy selection of the text.

Show status in transaction list

Followup to #23

E-cash send feature

Update to Leptos v0.5.0

Changelog (Goodby Scope) https://github.com/leptos-rs/leptos/releases/tag/v0.5.0

Automating screenshots in README

This is probably a total nerd-snipe and not a good idea, but I remembered we are installing Firefox as part of our CI build env anyway since Fedimint uses it for WASM testing, so maybe the screenshot in the README could be automatically generated 😆

Investigate using flakebox directly

Currently we piggy-back on Fedimint. See e.g. #46.

Routing

Routes:

• / Show simple ui while checking joined / not joined state
• /join Join Federation
• /{id} - joined federation
• /{id}/ln/send - send lightning invoice
• /{id}/ln/receive - receive lightning invoice
• /{id}/ecash/receive - send ecash invoice
• /{id}/ecash/send - send ecash invoice

Docs: https://leptos-rs.github.io/leptos/router/index.html

Note: Make sure an user needs to joined a federation before navigating to other routes. Special case: Deep-links!

Extend `flake.nix` to support Node + Tailwind

Restore icons

After removing leptos_icons in #40, restore missing icons in src/components/tx_list.rs by creating simple svg components. Take logo.rs as an example.

Rename all remaining `fedimint-leptos-test` refenreces to `webimint`

TODO: rename to webimint

Originally posted by @elsirion in #48 (comment)

Migrate service worker to leptos-use

After upgrading to 0.6 we can use the functionality here: https://leptos-use.rs/browser/use_service_worker.html

Tailwind

Make UI sexy 😱

Component for info, warning, error blocks

webimint-rs/src/components/app.rs

Lines 38 to 41 in 66837ff

	<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 mb-8" role="alert">
	<p class="font-bold">Warning</p>
	<p>This demo lacks persistent storage, reloading the bowser tab will reset all state and burn all deposited funds.</p>
	</div>

Use qrloop for ecash sends and receives

https://github.com/gre/qrloop

`SubmitForm` calls the submit function twice

If triggered by a submit button click the form is submitted twice, possibly because the button triggers on:submit and also has its own on:click impl.

IndexedDB-based database implementation

Unfortunately IndexedDB's transaction abstraction is absolutely unusable for our purposes, so we'll have to build our own.

One possible design I wrote about elsewhere:

I think a possible way of implementing our level of isolation (I think it was snapshot isolation that we expect?) by:

• Saving each value together with its "generation". The global DB generation is defined as the max of all value generations.
• Having an index of all ongoing transactions and their start DB generation
• On commit of transactions with writes written KV pairs are updated and their generation set to DB generation + 1. If there are other transactions active the old KV pairs are written to a generation cache (together with their original generation).
• Whenever a transaction finishes (commit/abort) the generation cache is cleaned of all entries older than the minimum generation of all ongoing transactions
• When reading from a key in a transaction:
  1. Check the local transaction log for writes to the key
  2. Check the generation cache
  3. Read directly from the IndexedDB
• Commits are conflict-free if:
  • All reads before the last write read values with a generation at commit time <= the transaction generation
  • All writes write to values with a generation at commit time <= the transaction generation (deleted item generations have to be kept I guess to notice conflicts)
• Commits can use IndexedDB transactions for atomicity since the reads/writes all happen without other tasks in between.

Update CI to install `Tailwind` and its dependencies