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

Last update: Aug 27, 2023

Related tags

Overview

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://fedimint-leptos.sirion.io/.

Prerequisites

Check out Fedimint at commit 183bff69f030b89f2cd78dbb91bdecf895048e3e:

git clone https://github.com/fedimint/fedimint
cd fedimint
git checkout 183bff69f030b89f2cd78dbb91bdecf895048e3e

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

Open terminal and enter:

nix develop

# only once
npm i

trunk serve

Your output will look like this:

fedimint-leptos-test$ nix develop
💡 Run 'just' for a list of available 'just ...' helper recipes
fedimint-leptos-test$ 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 fedimint-leptos-test
    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 fedimint-leptos-test
2023-08-06T12:00:41.933395Z  INFO calling wasm-bindgen for fedimint-leptos-test
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

Open http://127.0.0.1:8080 in your browser
Enter invite code into to input and submit. Check Pre-requirements above to see how to get it.

You should see "Starting client" in the browser and the JS console should be logging a lot:

Comments

.envrc

Thanks to direnv no need to enter nix develop "by hand" anymore (see https://zero-to-flakes.com/direnv/)

You can now cd into the project directory in a terminal and the devshell will be automatically activated.

^ https://zero-to-flakes.com/direnv#add-a-envrc

opened by sectore 2
Support Tailwind
[x] Support Tailwind

[x] Add fonts, basic styles tec. - all based on Fedimints ui

[x] Style Join screen

[x] Style Send screen

[x] Style Receive screen

[x] Extend flake.nix to support Node + Tailwind

[x] Update CI to install npm dependencies (needed by Tailwind) c15f82b

Demo

Screencast from 17.08.2023 14:22:30.webm

Closes #5 Closes #6 Closes #7
opened by sectore 2
Leptonize ui code
Leptos provides some sugaring and build-in things we might want to use:

[x] Extract content into components

[x] Use context to provide client, balance etc. in components

[x] Use Resource, Action, Show, Suspense, ErrorBoundary etc.

[x] Add .vscode/settings.json
opened by sectore 1
Add QR scanner to input fields
Now every input field has an optional QR scanner. The button probably needs some refactoring (should be a different class than the submit one I guess), but it works and makes the app more usable in practice.

QR scanning disabled by default

Scanning, text field is hidden

Scan successful, submit is triggered automatically while the text field shows the scanned input.
opened by elsirion 0
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.

opened by elsirion 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 :laughing:

opened by elsirion 0
Routing
Routes:

/ Home (Join Federation)

/receive-ecash (receive e-cash)

/send-ln (send LN invoices)

...

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!
opened by sectore 0

Owner

Cypherpunk, bitcoiner, tinkerer

GitHub

Leptos integration with Golden Layout.

Leptos Golden Layout Leptos integration with Golden Layout. This has many features missing but covers the basics for integrating leptos with golden la

3 Oct 23, 2023

A website for the Leptos Web Framework!

Leptos Website A Repo for the public facing Leptos website. Still a WIP. Client Side Rendering This example cannot be built as a trunk standalone CSR-

7 May 2, 2023

interactcli-rs is a command-line program framework used to solve the problem of the integration of command-line and interactive modes, including functions such as unification of command-line interactive modes and sub-command prompts. The framework integrates clap and shellwords.

interactcli-rs 简体中文 interactcli-rs is a command-line program framework used to solve the problem of the integration of command-line and interactive mo