open popup for external links on tauri

ng-app/src/routes/User.svelte

@@ -78,6 +78,20 @@
   $: personal_site = $active_wallet?.wallet?.V0.personal_site_id;
 
   $: personal_site_status = $connections[personal_site];
+
+  const displayPopup = async (url, title) => {
+    if (!tauri_platform || tauri_platform == "android") {
+      window.open(url, "_blank").focus();
+    } else {
+      await ng.open_window(url, "viewer", title);
+    }
+  };
+  const donate = async () => {
+    await displayPopup("https://nextgraph.org/donate", "Support NextGraph");
+  };
+  const about = async () => {
+    await displayPopup("https://nextgraph.org", "About NextGraph");
+  };
 </script>
 
 <CenteredLayout>
@@ -219,32 +233,32 @@
             {/if}
           </SidebarGroup>
           <SidebarGroup border>
-            <SidebarItem
-              label="Donate to NextGraph"
-              href="https://nextgraph.org/donate"
-              target="_blank"
-              class="p-2"
+            <li
+              tabindex="0"
+              class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              on:keypress={donate}
+              on:click={donate}
             >
-              <svelte:fragment slot="icon">
               <Gift
                 tabindex="-1"
                 class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
-              </svelte:fragment>
-            </SidebarItem>
-            <SidebarItem
-              label="About NextGraph"
-              href="https://nextgraph.org"
-              target="_blank"
-              class="p-2"
+              <span class="ml-3">Donate to NextGraph</span>
+            </li>
+
+            <li
+              tabindex="0"
+              class="flex items-center p-2 text-base font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+              on:keypress={about}
+              on:click={about}
             >
-              <svelte:fragment slot="icon">
               <InformationCircle
                 tabindex="-1"
                 class="w-7 h-7 text-black transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
               />
-              </svelte:fragment>
-            </SidebarItem>
+              <span class="ml-3">About NextGraph</span>
+            </li>
+
             <li
               class="flex items-center p-2 text-base font-normal text-gray-900"
             >

ng-app/src/routes/WalletCreate.svelte

@@ -256,30 +256,21 @@
     }
   }
 
-  async function getWallet() {
-    const opts = {
-      method: "get",
-    };
-    const response = await fetch(
-      api_url + "bootstrap/I8tuoVE-LRH1wuWQpDBPivlSX8Wle39uHSL576BTxsk",
-      opts
-    );
-    const result = await response.json();
-    console.log("Result:", result);
-  }
+  // async function getWallet() {
+  //   const opts = {
+  //     method: "get",
+  //   };
+  //   const response = await fetch(
+  //     api_url + "bootstrap/I8tuoVE-LRH1wuWQpDBPivlSX8Wle39uHSL576BTxsk",
+  //     opts
+  //   );
+  //   const result = await response.json();
+  //   console.log("Result:", result);
+  // }
 
   onMount(async () => await bootstrap());
 
   ready = false;
-  // {
-  //   user: {
-  //     Ed25519PubKey: [
-  //       141, 114, 111, 29, 59, 133, 182, 172, 177, 211, 238, 224, 62, 208, 206,
-  //       18, 226, 219, 118, 229, 184, 76, 204, 29, 194, 228, 248, 186, 15, 113,
-  //       125, 119,
-  //     ],
-  //   },
-  // };
 
   const unsub_register = () => {
     if (unsub_register_accepted) unsub_register_accepted();
@@ -375,19 +366,25 @@
   };
   const enterINVITE = (event) => {};
   const enterQRcode = (event) => {};
-  const displayNGbox = async (event) => {
+
+  const displayPopup = async (url, title) => {
     if (!tauri_platform || tauri_platform == "android") {
-      window.open(LINK_NG_BOX, "_blank").focus();
+      window.open(url, "_blank").focus();
     } else {
-      await ng.open_window(LINK_NG_BOX, "viewer", "Own your NG-Box");
+      await ng.open_window(url, "viewer", title);
     }
   };
+  const displayNGbox = async (event) => {
+    await displayPopup(LINK_NG_BOX, "Own your NG-Box");
+  };
   const displaySelfHost = async (event) => {
-    if (!tauri_platform || tauri_platform == "android") {
-      window.open(LINK_SELF_HOST, "_blank").focus();
-    } else {
-      await ng.open_window(LINK_SELF_HOST, "viewer", "Self-host a broker");
-    }
+    await displayPopup(LINK_SELF_HOST, "Self-host a broker");
+  };
+  const tos = async () => {
+    await displayPopup(
+      "https://nextgraph.one/#/tos",
+      "Terms of Service NextGraph.one"
+    );
   };
 </script>
 
@@ -1364,8 +1361,11 @@
             Only you will be able to download it with a special link. You would have
             to keep this link safely though. By selecting this option, you agree
             to the
-            <a target="_blank" href="https://nextgraph.one/#/tos"
-              >Terms of Service of our cloud</a
+            <span
+              style="font-weight: 500;cursor: pointer; color: #646cff;"
+              tabindex="0"
+              on:keypress={tos}
+              on:click={tos}>Terms of Service of our cloud</span
             >.
             <br />
             <Toggle disabled class="mt-3" bind:checked={options.cloud}
@@ -1396,8 +1396,11 @@
               do so, we will keep your wallet ID and some information about your
               broker on our cloud servers. If you prefer to opt out, just uncheck
               this option. By selecting this option, you agree to the
-              <a target="_blank" href="https://nextgraph.one/#/tos"
-                >Terms of Service of our cloud</a
+              <span
+                style="font-weight: 500;cursor: pointer; color: #646cff;"
+                tabindex="0"
+                on:keypress={tos}
+                on:click={tos}>Terms of Service of our cloud</span
               >.
               <br />
               <Toggle disabled class="mt-3" bind:checked={options.bootstrap}

ngaccount/web/src/routes/Create.svelte

@@ -306,8 +306,9 @@
               </svg>
               <span>
                 You can delete your account with us at any time by going to the
-                link <a target="_blank" href="https://account.{domain}/#/delete"
-                  >account.{domain}/#/delete</a
+                link <span
+                  style="font-weight: 500;
+                color: #646cff;">account.{domain}/#/delete</span
                 > or by entering in your NextGraph application and selecting the
                 menu, then Accounts, then under broker "delete registration"</span
               >
@@ -331,12 +332,15 @@
               <span
                 >Registration is free of charge. And it would be very nice of
                 you if you wanted to donate a small amount to help us cover the
-                fees we have to pay for operating the servers. Here is the
-                donation link: <a
+                fees we have to pay for operating the servers. {#if !window.__TAURI__}
+                  Here is the donation link: <a
                     target="_blank"
                     href="https://nextgraph.org/donate"
                     >https://nextgraph.org/donate</a
-                >
+                  >{:else}
+                  You will find the link to donate in your app, by clicking on
+                  the logo of NextGraph on the top-left corner.
+                {/if}
               </span>
             </li>
             {#if !window.__TAURI__}

p2p-net/src/broker.rs

@@ -850,6 +850,8 @@ impl<'a> Broker<'a> {
                     // log_debug!("SOCKET RECONNECTION {:?} {:?}", result, &remote_peer_id);
                     // TODO: deal with error and incremental backoff
 
+                    // TODO: incremental reconnections: after 5sec, +10sec, +20sec, +30sec
+
                     // if all attempts fail :
                     if let Some(user) = config.get_user() {
                         disconnections_sender.send(user.to_string()).await;