LumeWeb
/
web3browser.io
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: LumeWeb:master
Branches Tags
LumeWeb:master
LumeWeb:develop
LumeWeb:ditorodev
..
compare: LumeWeb:ditorodev
Branches Tags
LumeWeb:master
LumeWeb:develop
LumeWeb:ditorodev

No commits in common. "master" and "ditorodev" have entirely different histories.
master ... ditorodev

10 changed files with 13 additions and 152 deletions
Show Stats Expand all files Collapse all files

9
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

13
src/backend/filters/urlRewrite.ts
View File

@ -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 =
url.startsWith("http") ||
(url.startsWith("//") && isICANN(url));
if (!isExternal || !isICANN(url)) {
if (!isExternal && !url.startsWith("/")) {
//@ts-ignore
if (!url.startsWith("http") && !url.startsWith("//")) {
url = path.join(rUrl.pathname, url);
}
url = `${swUrl.protocol}//${swUrl.hostname}/browse/${rUrl.hostname}${url}`;
console.log(url);
url = `${rUrl.protocol}//${rUrl.hostname}/browse/${rUrl.hostname}${url}`;
}
return `${url} ${descriptor}`;
});

86
src/backend/providers/s5.ts
View File

@ -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(/^/, "/");
}

2
src/backend/worker.ts
View File

@ -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) => {

3
src/clients.ts
View File

@ -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,
};

13
src/components/App.tsx
View File

@ -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
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
<CircleProgressBar 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">
@ -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 />
<Browser />
</main>
</AuthProvider>
</NetworksProvider>
</LumeStatusProvider>

2
src/components/Browser.tsx
View File

@ -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>
</>
);

28
src/components/StartPage.tsx
View File

@ -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>

2
src/pages/index.astro
View File

@ -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>