Merge remote-tracking branch 'origin/master'

# Conflicts:
#	src/components/StartPage.tsx

package-lock.json

@@ -17,6 +17,7 @@
                 "@lumeweb/kernel-ipfs-client": "^0.1.0-develop.25",
                 "@lumeweb/kernel-network-registry-client": "^0.1.0-develop.10",
                 "@lumeweb/kernel-peer-discovery-client": "^0.0.2-develop.18",
+                "@lumeweb/kernel-s5-client": "^0.1.0-develop.5",
                 "@lumeweb/kernel-swarm-client": "^0.1.0-develop.12",
                 "@lumeweb/libresolver": "^0.1.0-develop.1",
                 "@lumeweb/sdk": "^0.1.0-develop.44",
@@ -2504,6 +2505,14 @@
                 "hyperswarm": "^4.3.7"
             }
         },
+        "node_modules/@lumeweb/kernel-s5-client": {
+            "version": "0.1.0-develop.5",
+            "resolved": "https://registry.npmjs.org/@lumeweb/kernel-s5-client/-/kernel-s5-client-0.1.0-develop.5.tgz",
+            "integrity": "sha512-3yjq8F6JiLaY8ymtaVm/9uR0AtO9IHl/fOUmJyT2XCT+kbz0LJYZgMv0UMddnz/RHXiRMKRbIXxHhz2aEOw8kg==",
+            "dependencies": {
+                "@lumeweb/libkernel": "0.1.0-develop.68"
+            }
+        },
         "node_modules/@lumeweb/kernel-swarm-client": {
             "version": "0.1.0-develop.12",
             "resolved": "https://registry.npmjs.org/@lumeweb/kernel-swarm-client/-/kernel-swarm-client-0.1.0-develop.12.tgz",

package.json

@@ -21,6 +21,7 @@
         "@lumeweb/kernel-ipfs-client": "^0.1.0-develop.25",
         "@lumeweb/kernel-network-registry-client": "^0.1.0-develop.10",
         "@lumeweb/kernel-peer-discovery-client": "^0.0.2-develop.18",
+        "@lumeweb/kernel-s5-client": "^0.1.0-develop.5",
         "@lumeweb/kernel-swarm-client": "^0.1.0-develop.12",
         "@lumeweb/libresolver": "^0.1.0-develop.1",
         "@lumeweb/sdk": "^0.1.0-develop.44",

src/backend/filters/urlRewrite.ts

@@ -33,7 +33,7 @@ export default class URLRewriteFilter implements ContentFilter {
               urlValue.startsWith("http") ||
               (urlValue.startsWith("//") && isICANN(urlValue));
             if (!isExternal || !isICANN(urlValue)) {
-              if (!isExternal) {
+              if (!isExternal && !urlValue.startsWith("/")) {
                 //@ts-ignore
                 urlValue = path.join(rUrl.pathname, urlValue);
               }
@@ -49,9 +49,16 @@ export default class URLRewriteFilter implements ContentFilter {
             let srcsetValues = srcsetValue?.split(",");
             let rewrittenSrcsetValues = srcsetValues?.map((srcsetEntry) => {
               let [url, descriptor] = srcsetEntry.trim().split(" ");
-              if (!url.startsWith("http") && !url.startsWith("//")) {
+              const isExternal =
+                url.startsWith("http") ||
+                (url.startsWith("//") && isICANN(url));
+              if (!isExternal || !isICANN(url)) {
+                if (!isExternal && !url.startsWith("/")) {
+                  //@ts-ignore
                   url = path.join(rUrl.pathname, url);
-                url = `${rUrl.protocol}//${rUrl.hostname}/browse/${rUrl.hostname}${url}`;
+                }
+                url = `${swUrl.protocol}//${swUrl.hostname}/browse/${rUrl.hostname}${url}`;
+                console.log(url);
               }
               return `${url} ${descriptor}`;
             });

src/backend/providers/s5.ts

@@ -0,0 +1,86 @@
+import type { ContentProvider } from "../types.js";
+import * as nodePath from "path";
+import { createClient } from "@lumeweb/kernel-s5-client";
+import { CID, CID_TYPES } from "@lumeweb/libs5";
+
+export default class S5Provider implements ContentProvider {
+  private _client = createClient();
+
+  async fetchContent(
+    uri: string,
+    path: string,
+    query?: string,
+  ): Promise<Response> {
+    let cid = translatePath(uri);
+    let err;
+    let urlPath = path;
+    const parsedPath = nodePath.parse(urlPath);
+
+    if (!cid.startsWith("/s5/") && !cid.startsWith("/sia/")) {
+      err = "404";
+    }
+
+    if (err) {
+      throw new Error(err);
+    }
+
+    cid = cid.replace("/s5/", "").replace("/sia/", "");
+
+    let file;
+
+    switch (CID.decode(cid).type) {
+      case CID_TYPES.METADATA_WEBAPP:
+        const meta = await this._client.stat(cid);
+        if (!parsedPath.base.length || !parsedPath.ext.length) {
+          let found = false;
+          for (const indexFile of meta.tryFiles) {
+            urlPath = nodePath.join(urlPath, indexFile);
+            if (urlPath.startsWith("/")) {
+              urlPath = urlPath.substring(1);
+            }
+            if (urlPath in meta.paths) {
+              found = true;
+              break;
+            }
+          }
+
+          if (!found) {
+            throw new Error("404");
+          }
+          file = meta.paths[urlPath];
+        } else {
+          if (urlPath.startsWith("/")) {
+            urlPath = urlPath.substring(1);
+          }
+          if (!(urlPath in meta.paths)) {
+            throw new Error("404");
+          }
+          file = meta.paths[urlPath];
+        }
+
+        break;
+      default:
+        throw new Error("404");
+    }
+
+    const headers: HeadersInit = {};
+
+    headers["Content-Type"] = file.contentType as string;
+
+    return new Response(
+      new Blob([(await this._client.cat(file.cid)) as Uint8Array]),
+      {
+        headers,
+      },
+    );
+  }
+
+  supports(uri: string): boolean {
+    uri = translatePath(uri);
+    return uri.startsWith("/s5/") || uri.startsWith("/sia/");
+  }
+}
+
+function translatePath(uri: string) {
+  return uri.replace(/:\/\//, "/").replace(/^/, "/");
+}

src/backend/worker.ts

@@ -2,11 +2,13 @@ import { createClient as createDnsClient } from "@lumeweb/kernel-dns-client";
 import { ProviderManager } from "./providerManager.js";
 import IPFSProvider from "./providers/ipfs.js";
 import URLRewriteFilter from "./filters/urlRewrite.js";
+import S5Provider from "./providers/s5.js";
 
 const dnsClient = createDnsClient();
 
 const providerManager = new ProviderManager();
 providerManager.register(new IPFSProvider());
+providerManager.register(new S5Provider());
 providerManager.processor.registerFilter(new URLRewriteFilter());
 
 globalThis.postMessage = async (...args) => {

src/clients.ts

@@ -5,6 +5,7 @@ import { createClient as createPeerDiscoveryClient } from "@lumeweb/kernel-peer-
 import { createClient as createNetworkRegistryClient } from "@lumeweb/kernel-network-registry-client";
 import { createClient as createHandshakeClient } from "@lumeweb/kernel-handshake-client";
 import { createClient as createEthClient } from "@lumeweb/kernel-eth-client";
+import { createClient as createS5Client } from "@lumeweb/kernel-s5-client";
 
 const dnsClient = createDnsClient();
 const ipfsClient = createIpfsClient();
@@ -13,6 +14,7 @@ const peerDiscoveryClient = createPeerDiscoveryClient();
 const networkRegistryClient = createNetworkRegistryClient();
 const handshakeClient = createHandshakeClient();
 const ethClient = createEthClient();
+const s5Client = createS5Client();
 
 export {
   dnsClient,
@@ -22,4 +24,5 @@ export {
   networkRegistryClient,
   handshakeClient,
   ethClient,
+  s5Client,
 };

src/components/App.tsx

@@ -41,8 +41,15 @@ const App: React.FC = () => {
         <div className="py-4 -mb-4 flex flex-row gap-x-3">
           {ethStatus?.syncState === "syncing" ? (
             <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
-              <CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(ethStatus.sync)} />
+              <CircleProgressBar
-              <span className="font-bold font-mono text-orange-400 mr-2">{ethStatus.sync.toFixed(1)}%</span> Syncing Ethereum Network
+                radius={5}
+                strokeWidth={3}
+                percentage={Math.floor(ethStatus.sync)}
+              />
+              <span className="font-bold font-mono text-orange-400 mr-2">
+                {ethStatus.sync.toFixed(1)}%
+              </span>{" "}
+              Syncing Ethereum Network
             </span>
           ) : ethStatus?.syncState === "done" ? (
             <span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
@@ -132,8 +139,10 @@ const Root = () => {
       <LumeStatusProvider>
         <NetworksProvider>
           <AuthProvider>
+            <main className="flex flex-col bg-neutral-950 w-full min-h-screen h-full pt-2 pb-5">
               <App />
               <Browser />
+            </main>
           </AuthProvider>
         </NetworksProvider>
       </LumeStatusProvider>

src/components/Browser.tsx

@@ -346,7 +346,7 @@ export function Browser() {
         ref={iframeRef}
         onLoad={handleIframeLoad}
         src={url ? `/browse/${url}` : "about:blank"}
-        className={`${shouldRenderStartPage ? "hidden" : ""} w-full h-full`}
+        className={`${shouldRenderStartPage ? "hidden" : ""} flex-1 w-full h-full -mb-5`}
       ></iframe>
     </>
   );

src/components/StartPage.tsx

@@ -6,9 +6,10 @@ type Props = {
 };
 
 const AVAILABLE_PAGES = [
+  "lumeweb",
   "blockranger.eth",
   "esteroids.eth",
-  "ens.eth",
+  // "ens.eth",
   "sogola.eth",
   "vitalik.eth",
 ];
@@ -17,7 +18,7 @@ const StartPage = ({ setUrl }: Props) => {
   const { ready, inited } = useLumeStatus();
   const { isLoggedIn } = useAuth();
   return (
-    <div className="mx-4 relative border rounded-md mt-2 border-neutral-800 p-10 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
+    <div className="mx-4 relative border rounded-md mt-2 border-neutral-800 p-10 pb-5 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
       <h2 className="font-bold text-2xl text-white">
         Welcome to the Lume Browser
       </h2>
@@ -26,9 +27,32 @@ const StartPage = ({ setUrl }: Props) => {
         from the Ethereum Name Service (ENS) and Handshake protocol, providing a
         secure and decentralized browsing experience.
       </p>
+      <p className="text-gray-400 my-4">
+        For further documentation, see:{" "}
+        <a href="https://docs.lumeweb.com/browser-webapp" className="underline text-white">
+          https://docs.lumeweb.com/browser-webapp
+        </a>
+      </p>
+      {/* TODO: Add the lume loading indicators for the networks. */}
+      {/* <CircleProgressBar radius={20} strokeWidth={4} textSize={12} percentage={75} /> */}
       {inited && ready ? (
         <div>
           <hr className="my-3 border-neutral-700" />
+          <div
+            className="bg-yellow-800/40 rounded-md border border-yellow-500 text-yellow-500 p-4"
+            role="alert"
+          >
+            <p className="font-bold">Disclaimer</p>
+            <p>
+              The sites listed below are the ones we currently support. We're a
+              small team working hard to make this technology possible. We don't
+              endorse any ideological views. Our focus is on building for a free
+              web. The listed sites are examples of what our technology can do
+              today. Please note that we are not hosting or serving any content
+              ourselves and have no control over the content as it's
+              decentralized.
+            </p>
+          </div>
           <h3 className="text-white text-lg font-bold mt-4">
             Currently Accessible Websites:
           </h3>

src/pages/index.astro

@@ -13,8 +13,6 @@ import "@/styles/globals.scss";
     <title>Web3 Browser - Powered By Lume Web</title>
   </head>
   <body>
-    <main class="bg-neutral-950 w-full">
       <App client:only="react" />
-    </main>
   </body>
 </html>