elsirion · elsirion · May 25, 2024 · Mar 31, 2024 · Apr 1, 2024 · Apr 1, 2024
diff --git a/.typos.toml b/.typos.toml
@@ -0,0 +1,2 @@
+[files]
+extend-exclude = ["bun.lockb"]
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.css b/index.css
@@ -2,27 +2,52 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @font-face {
   font-family: "Space Grotesk";
   font-style: normal;
   font-weight: 300 700;
   font-display: swap;
-  src: url('./assets/fonts/SpaceGrotesk-Variable.ttf') format('truetype');
+  src: url("./assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype");
 }
 
 @font-face {
   font-family: "Inter";
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('./assets/fonts/Inter-Variable.ttf') format('truetype');
+  src: url("./assets/fonts/Inter-Variable.ttf") format("truetype");
 }
 
-@layer components {
+@layer base {
+  h1 {
+    @apply text-2xl md:text-4xl lg:text-5xl;
+  }
+  h2 {
+    @apply text-xl md:text-3xl lg:text-4xl;
+  }
+  h3 {
+    @apply text-lg md:text-2xl lg:text-3xl;
+  }
+  h4 {
+    @apply text-base md:text-xl lg:text-2xl;
+  }
+  h5 {
+    @apply text-sm md:text-lg lg:text-xl;
+  }
+  h6 {
+    @apply text-xs md:text-base lg:text-lg;
+  }
+  p {
+    @apply text-base md:text-lg;
+  }
 
+  button {
+    @apply text-lg md:text-xl lg:text-2xl;
+  }
+}
+
+@layer components {
   .ease {
     @apply transition duration-300 ease-in-out;
   }
-
 }
diff --git a/index.html b/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta name="version" content="{{buildVersion}}">
-    <link data-trunk rel="tailwind-css" href="./index.css"/>
-    <link data-trunk rel="rust" data-wasm-opt="z"/>
-    <link data-trunk rel="copy-dir" href="./assets/"/>
-    <link data-trunk rel="copy-file" href="./service-worker.js"/>
-    <link data-trunk rel="copy-file" href="./manifest.json"/>
-    <link data-trunk rel="copy-file" href="./favicon.ico"/>
-</head>
-<body></body>
+  <head>
+    <meta name="version" content="{{buildVersion}}" />
+    <link data-trunk rel="tailwind-css" href="./index.css" />
+    <link data-trunk rel="rust" data-wasm-opt="z" />
+    <link data-trunk rel="copy-dir" href="./assets/" />
+    <link data-trunk rel="copy-file" href="./service-worker.js" />
+    <link data-trunk rel="copy-file" href="./manifest.json" />
+    <link data-trunk rel="copy-file" href="./favicon.ico" />
+  </head>
+  <body></body>
 </html>
diff --git a/manifest.json b/manifest.json
@@ -1,46 +1,42 @@
 {
- "name": "Webimint Fedimint Client",
- "short_name": "Webimint",
- "start_url": "/",
- "display": "standalone",
- "background_color": "#ffffff",
- "theme_color": "#ffffff",
- "icons": [
-  {
-   "src": "\/assets\/icons\/android-icon-36x36.png",
-   "sizes": "36x36",
-   "type": "image\/png",
-   "density": "0.75"
+  "manifest_version": 3,
+  "__chrome__manifest_version": 3,
+  "name": "Webimint Fedimint Client",
+  "short_name": "Webimint",
+  "version": "0.1.0",
+  "description": "Webimint is an experimental Fedimint wallet using the Leptos web framework.",
+  "action": {
+    "default_popup": "index.html",
+    "default_icon": {
+      "48": "/assets/icons/android-icon-48x48.png",
+      "96": "/assets/icons/android-icon-96x96.png",
+      "192": "/assets/icons/android-icon-192x192.png"
+    }
   },
-  {
-   "src": "\/assets\/icons\/android-icon-48x48.png",
-   "sizes": "48x48",
-   "type": "image\/png",
-   "density": "1.0"
+  "background": {
+    "service_worker": "service-worker.js"
   },
-  {
-   "src": "\/assets\/icons\/android-icon-72x72.png",
-   "sizes": "72x72",
-   "type": "image\/png",
-   "density": "1.5"
+  "permissions": ["storage", "activeTab"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["webimint-{{buildVersion}}.js"]
+    }
+  ],
+  "__chrome__host_permissions": ["*://*/*"],
+  "content_security_policy": {
+    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
   },
-  {
-   "src": "\/assets\/icons\/android-icon-96x96.png",
-   "sizes": "96x96",
-   "type": "image\/png",
-   "density": "2.0"
-  },
-  {
-   "src": "\/assets\/icons\/android-icon-144x144.png",
-   "sizes": "144x144",
-   "type": "image\/png",
-   "density": "3.0"
-  },
-  {
-   "src": "\/assets\/icons\/android-icon-192x192.png",
-   "sizes": "192x192",
-   "type": "image\/png",
-   "density": "4.0"
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "icons": {
+    "36": "/assets/icons/android-icon-36x36.png",
+    "48": "/assets/icons/android-icon-48x48.png",
+    "72": "/assets/icons/android-icon-72x72.png",
+    "96": "/assets/icons/android-icon-96x96.png",
+    "144": "/assets/icons/android-icon-144x144.png",
+    "192": "/assets/icons/android-icon-192x192.png"
   }
- ]
-}
+}
diff --git a/post_build.sh b/post_build.sh
@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-set -e
+set -euo pipefail
 
 appName="webimint"
 stylePrefix="index"
@@ -24,14 +24,17 @@ echo "Build-Version is: ${buildVersion}"
 # Replace placeholder in service-worker.js
 serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
 echo "Replacing {{buildVersion}} placeholder in: ${serviceWorkerJsFile}"
-sed "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
-mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
+sed -i "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}"
 
 # Replace placeholder in index.html
 indexHtmlFile=$(find ./dist/.stage -iname "index.html")
 echo "Replacing {{buildVersion}} placeholder in: ${indexHtmlFile}"
-sed "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}" > "${indexHtmlFile}.modified"
-mv -f "${indexHtmlFile}.modified" "${indexHtmlFile}"
+sed -i "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}"
+
+# Replace placeholder in manifest.json
+manifestJsonFile=$(find ./dist/.stage -iname "manifest.json")
+echo "Replacing {{buildVersion}} placeholder in: ${manifestJsonFile}"
+sed -i "s/{{buildVersion}}/${buildVersion}/g" "${manifestJsonFile}"
 
 # Extract CSS build version
 indexJsFile=$(find ./dist/.stage -iname "${stylePrefix}-*.${styleFormat}")
@@ -52,5 +55,68 @@ echo "CSS Build-Version is: ${cssBuildVersion}"
 # Replace placeholder in service-worker.js
 serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
 echo "Replacing {{cssBuildVersion}} placeholder in: ${serviceWorkerJsFile}"
-sed "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
-mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
+sed -i "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}"
+
+# ### Required for chrome extension, no inline scripting
+echo "Extracting script content from index.html and creating initWebimint.js"
+scriptContent=$(sed -n 's|.*<script type=module>\(.*\)</script>.*|\1|p' "${indexHtmlFile}")
+if [ -n "${scriptContent}" ]; then
+    echo "${scriptContent}" >./dist/.stage/initWebimint.js
+    echo "Replacing original script tag in index.html with reference to initWebimint.js"
+    sed -i 's|<script type=module>[^<]*</script>|<script type="module" src="/initWebimint.js"></script>|' "${indexHtmlFile}"
+else # using trunk serve, multiline script tags, have to extract line by line
+    echo "Using trunk serve, multiline script tags, have to extract line by line"
+    echo "Extracting script content from index.html and creating separate .js files"
+    # Directory where the new JS files will be stored
+    JS_DIR="./dist/.stage/js"
+    mkdir -p "$JS_DIR"
+    # Counter to name the extracted JS files uniquely
+    COUNTER=1
+    # Temporary file to hold the modified HTML content
+    TMP_HTML=$(mktemp)
+    # Initialize SCRIPT_OPEN to 0 before the loop
+    SCRIPT_OPEN=0
+    # Read the index.html file line by line
+    while IFS= read -r line || [[ -n "$line" ]]; do
+        if [[ $line =~ \<script.*\>\</script\> ]]; then
+            # Inline script tag with no content, just copy the line
+            echo "$line" >>"$TMP_HTML"
+        elif [[ $line =~ \<script.*\>(.*) ]]; then
+            # Opening script tag with potential inline content
+            SCRIPT_OPEN=1
+            # Capture any content on the same line as the opening script tag
+            SCRIPT_CONTENT="${BASH_REMATCH[1]}"
+            if [[ $SCRIPT_CONTENT ]]; then
+                # If there's inline content right after the script tag, add a newline to start accumulating correctly
+                SCRIPT_CONTENT+=$'\n'
+            fi
+        elif [[ $line =~ \</script\> ]]; then
+            # Closing script tag, write content to a new JS file
+            SCRIPT_FILE="$JS_DIR/extracted_$COUNTER.js"
+            echo "$SCRIPT_CONTENT" >"$SCRIPT_FILE"
+            # Replace the script tag in HTML with a reference to the new JS file
+            echo "<script type=\"module\" src=\"/js/extracted_$COUNTER.js\"></script>" >>"$TMP_HTML"
+            COUNTER=$((COUNTER + 1))
+            SCRIPT_OPEN=0
+            SCRIPT_CONTENT="" # Reset SCRIPT_CONTENT for the next script
+        elif [[ $SCRIPT_OPEN -eq 1 ]]; then
+            # Inside a script tag, accumulate the content
+            SCRIPT_CONTENT+="$line"$'\n'
+        else
+            # Outside script tags, just copy the line
+            echo "$line" >>"$TMP_HTML"
+        fi
+    done <"${indexHtmlFile}"
+    # Replace the original HTML file with the modified one
+    mv "$TMP_HTML" "${indexHtmlFile}"
+    # Clean up
+    rm -f "$TMP_HTML"
+    # Replace placeholder trunk address in JavaScript files
+    echo "Replacing {{__TRUNK_ADDRESS__}} placeholder in extracted JavaScript files"
+    jsFiles=$(find ./dist/.stage/js -iname "*.js")
+    TRUNK_ADDRESS=127.0.0.1:8080
+    for file in $jsFiles; do
+        sed -i "s/{{__TRUNK_ADDRESS__}}/${TRUNK_ADDRESS}/g" "$file"
+        echo "Replaced in: $file"
+    done
+fi
diff --git a/src/components/app.rs b/src/components/app.rs
@@ -4,6 +4,7 @@ use leptos_meta::{Link, Meta, Title};
 use tracing::info;
 
 use crate::client::ClientRpc;
+use crate::components::create_wallet::CreateWallet;
 use crate::components::service_worker::ServiceWorker;
 use crate::components::{Footer, Joined, Logo, SubmitForm, WalletSelector};
 use crate::context::provide_client_context;
@@ -71,8 +72,8 @@ pub fn App() -> impl IntoView {
       <Meta name="theme-color" content="#ffffff" />
 
       <div class="h-[100dvh]">
-        <div class="mx-auto w-full h-full flex flex-col lg:max-w-[600px] p-6">
-          <header class="flex justify-center mb-20">
+        <div class="mx-auto w-full h-full flex flex-col min-w-[400px] lg:max-w-[600px] p-6">
+          <header class="flex justify-center mb-6 md:mb-20">
             <Logo class="bg-red border-1 border-blue"/>
           </header>
           <main class="w-full pb-24 flex-grow ">
@@ -88,6 +89,9 @@ pub fn App() -> impl IntoView {
                           available=wallets
                           on_select=move |wallet_name| select_wallet_action.dispatch(wallet_name)
                         />
+                        <CreateWallet
+                          on_select=move |wallet_name| select_wallet_action.dispatch(wallet_name)
+                        />
                       }.into_view()
                     } else {
                       empty_view().into_view()
@@ -100,7 +104,7 @@ pub fn App() -> impl IntoView {
               when=show_join
                 fallback=|| empty_view()
               >
-              <h1 class="font-heading text-gray-900 text-4xl font-semibold mb-6">"Join a Federation"</h1>
+              <h1 class="font-heading text-gray-900 font-semibold mb-6">"Join a Federation"</h1>
               <SubmitForm
                 description="Enter invite code (i.e. fed11jpr3lgm8t…) to join a Federation".into()
                 on_submit=move |value| join_action.dispatch(value)
@@ -114,7 +118,7 @@ pub fn App() -> impl IntoView {
               when=show_join_error
               fallback=|| empty_view()
             >
-              {move || view!{<div class="text-body text-md mt-4"><span class="text-red-500">{
+              {move || view!{<div class="text-body mt-4"><span class="text-red-500">{
                 format!("✗ Failed to join federation: {:?}", join_action.value().with(|r| {
                   match r {
                     Some(Err(e)) =>anyhow!("{:?}", e),

diff --git a/src/components/balance.rs b/src/components/balance.rs
@@ -34,8 +34,8 @@ pub fn Balance(#[prop(optional, into)] class: String) -> impl IntoView {
 
     view! {
       <div class=class>
-        <h2 class="text-xl leading-tight w-full font-body font-semibold  pb-4 mb-4 text-gray-400 border-b-2 border-gray-200">"Balance"</h2>
-        <h3 class="text-4xl">{balance}</h3>
+        <h2 class="text-lg md:text-xl leading-tight w-full font-body font-semibold md:pb-4 mb-4 text-gray-400 border-b-2 border-gray-200">"Balance"</h2>
+        <h3 class="text-xl md:text-4xl">{balance}</h3>
       </div>
     }
 }
diff --git a/src/components/copyable_text.rs b/src/components/copyable_text.rs
@@ -36,7 +36,7 @@ pub fn CopyableText(
                         let copy = copy.clone();
                         move |_| copy(text.get().as_str())
                     }
-                    class="w-full py-3 text-xl bg-blue-500 hover:enabled:bg-blue-600
+                    class="w-full py-3 bg-blue-500 hover:enabled:bg-blue-600
                         text-white font-semibold font-body rounded-lg cursor-pointer enabled:ease disabled:opacity-70
                         disabled:cursor-not-allowed hover:enabled:shadow-lg"
                 >

diff --git a/src/components/create_wallet.rs b/src/components/create_wallet.rs
@@ -0,0 +1,44 @@
+use leptos::*;
+
+use crate::components::SubmitForm;
+use crate::utils::empty_view;
+
+#[component]
+pub fn CreateWallet<F>(on_select: F) -> impl IntoView
+where
+    F: Fn(String) + 'static + Copy,
+{
+    let (loading, set_loading) = create_signal(false);
+    let (show_create_wallet_form, set_show_create_wallet_form) = create_signal(false);
+    let select = move |name: String| {
+        set_loading.set(true);
+        on_select(name);
+    };
+
+    view! {
+    <div class="flex justify-center">
+      <Show when=move || !show_create_wallet_form.get() fallback=|| empty_view() >
+        <button
+          class="mt-4 px-4 py-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-700 focus:outline-none focus:shadow-outline min-w-[200px]"
+          on:click=move |_| {
+            set_show_create_wallet_form.set(true);
+          }
+        >
+          "Create a new wallet"
+        </button>
+      </Show>
+      <Show when=move || show_create_wallet_form.get() fallback=|| empty_view() >
+        <SubmitForm
+          description="Enter a name for the new wallet".into()
+          on_submit=move |name| {
+            set_show_create_wallet_form.set(false);
+            select(name);
+          }
+          placeholder="Wallet Name".into()
+          submit_label="Create".into()
+          loading=loading
+        />
+      </Show>
+    </div>
+        }
+}
diff --git a/src/components/footer.rs b/src/components/footer.rs
@@ -6,7 +6,7 @@ use crate::components::LogoFedimint;
 pub fn Footer(version: &'static str, #[prop(optional, into)] class: String) -> impl IntoView {
     let version_prefix: &'static str = &version[..7];
     view! {
-      <div class={format!("flex justify-center items-center text-body text-sm text-gray-500 {class}")}>
+      <div class={format!("flex justify-center items-center text-body text-gray-500 {class}")}>
         "Webimint version "
         <a
           class="text-gray-950 font-mono mx-1"