package-lock.json

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

src/backend/providers/s5.ts

@@ -1,86 +0,0 @@
-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,13 +2,11 @@ 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,7 +5,6 @@ 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();
@@ -14,7 +13,6 @@ const peerDiscoveryClient = createPeerDiscoveryClient();
 const networkRegistryClient = createNetworkRegistryClient();
 const handshakeClient = createHandshakeClient();
 const ethClient = createEthClient();
-const s5Client = createS5Client();
 
 export {
   dnsClient,
@@ -24,5 +22,4 @@ export {
   networkRegistryClient,
   handshakeClient,
   ethClient,
-  s5Client,
 };

src/components/App.tsx

@@ -41,15 +41,8 @@ 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
+              <CircleProgressBar radius={5} strokeWidth={3} percentage={Math.floor(ethStatus.sync)} />
-                radius={5}
+              <span className="font-bold font-mono text-orange-400 mr-2">{ethStatus.sync.toFixed(1)}%</span> Syncing Ethereum Network
-                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">
@@ -139,10 +132,8 @@ 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 />
-              <App />
+            <Browser />
-              <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" : ""} flex-1 w-full h-full -mb-5`}
+        className={`${shouldRenderStartPage ? "hidden" : ""} w-full h-full`}
       ></iframe>
     </>
   );

src/components/StartPage.tsx

@@ -6,10 +6,9 @@ type Props = {
 };
 
 const AVAILABLE_PAGES = [
-  "lumeweb",
   "blockranger.eth",
   "esteroids.eth",
-  // "ens.eth",
+  "ens.eth",
   "sogola.eth",
   "vitalik.eth",
 ];
@@ -18,7 +17,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 pb-5 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 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
       <h2 className="font-bold text-2xl text-white">
         Welcome to the Lume Browser
       </h2>
@@ -27,32 +26,9 @@ 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,6 +13,8 @@ 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>