Compare commits
No commits in common. "master" and "ditorodev" have entirely different histories.
|
@ -17,7 +17,6 @@
|
||||||
"@lumeweb/kernel-ipfs-client": "^0.1.0-develop.25",
|
"@lumeweb/kernel-ipfs-client": "^0.1.0-develop.25",
|
||||||
"@lumeweb/kernel-network-registry-client": "^0.1.0-develop.10",
|
"@lumeweb/kernel-network-registry-client": "^0.1.0-develop.10",
|
||||||
"@lumeweb/kernel-peer-discovery-client": "^0.0.2-develop.18",
|
"@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/kernel-swarm-client": "^0.1.0-develop.12",
|
||||||
"@lumeweb/libresolver": "^0.1.0-develop.1",
|
"@lumeweb/libresolver": "^0.1.0-develop.1",
|
||||||
"@lumeweb/sdk": "^0.1.0-develop.44",
|
"@lumeweb/sdk": "^0.1.0-develop.44",
|
||||||
|
@ -2505,14 +2504,6 @@
|
||||||
"hyperswarm": "^4.3.7"
|
"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": {
|
"node_modules/@lumeweb/kernel-swarm-client": {
|
||||||
"version": "0.1.0-develop.12",
|
"version": "0.1.0-develop.12",
|
||||||
"resolved": "https://registry.npmjs.org/@lumeweb/kernel-swarm-client/-/kernel-swarm-client-0.1.0-develop.12.tgz",
|
"resolved": "https://registry.npmjs.org/@lumeweb/kernel-swarm-client/-/kernel-swarm-client-0.1.0-develop.12.tgz",
|
||||||
|
|
|
@ -21,7 +21,6 @@
|
||||||
"@lumeweb/kernel-ipfs-client": "^0.1.0-develop.25",
|
"@lumeweb/kernel-ipfs-client": "^0.1.0-develop.25",
|
||||||
"@lumeweb/kernel-network-registry-client": "^0.1.0-develop.10",
|
"@lumeweb/kernel-network-registry-client": "^0.1.0-develop.10",
|
||||||
"@lumeweb/kernel-peer-discovery-client": "^0.0.2-develop.18",
|
"@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/kernel-swarm-client": "^0.1.0-develop.12",
|
||||||
"@lumeweb/libresolver": "^0.1.0-develop.1",
|
"@lumeweb/libresolver": "^0.1.0-develop.1",
|
||||||
"@lumeweb/sdk": "^0.1.0-develop.44",
|
"@lumeweb/sdk": "^0.1.0-develop.44",
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default class URLRewriteFilter implements ContentFilter {
|
||||||
urlValue.startsWith("http") ||
|
urlValue.startsWith("http") ||
|
||||||
(urlValue.startsWith("//") && isICANN(urlValue));
|
(urlValue.startsWith("//") && isICANN(urlValue));
|
||||||
if (!isExternal || !isICANN(urlValue)) {
|
if (!isExternal || !isICANN(urlValue)) {
|
||||||
if (!isExternal && !urlValue.startsWith("/")) {
|
if (!isExternal) {
|
||||||
//@ts-ignore
|
//@ts-ignore
|
||||||
urlValue = path.join(rUrl.pathname, urlValue);
|
urlValue = path.join(rUrl.pathname, urlValue);
|
||||||
}
|
}
|
||||||
|
@ -49,16 +49,9 @@ export default class URLRewriteFilter implements ContentFilter {
|
||||||
let srcsetValues = srcsetValue?.split(",");
|
let srcsetValues = srcsetValue?.split(",");
|
||||||
let rewrittenSrcsetValues = srcsetValues?.map((srcsetEntry) => {
|
let rewrittenSrcsetValues = srcsetValues?.map((srcsetEntry) => {
|
||||||
let [url, descriptor] = srcsetEntry.trim().split(" ");
|
let [url, descriptor] = srcsetEntry.trim().split(" ");
|
||||||
const isExternal =
|
if (!url.startsWith("http") && !url.startsWith("//")) {
|
||||||
url.startsWith("http") ||
|
|
||||||
(url.startsWith("//") && isICANN(url));
|
|
||||||
if (!isExternal || !isICANN(url)) {
|
|
||||||
if (!isExternal && !url.startsWith("/")) {
|
|
||||||
//@ts-ignore
|
|
||||||
url = path.join(rUrl.pathname, url);
|
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}`;
|
return `${url} ${descriptor}`;
|
||||||
});
|
});
|
||||||
|
|
|
@ -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,13 +2,11 @@ import { createClient as createDnsClient } from "@lumeweb/kernel-dns-client";
|
||||||
import { ProviderManager } from "./providerManager.js";
|
import { ProviderManager } from "./providerManager.js";
|
||||||
import IPFSProvider from "./providers/ipfs.js";
|
import IPFSProvider from "./providers/ipfs.js";
|
||||||
import URLRewriteFilter from "./filters/urlRewrite.js";
|
import URLRewriteFilter from "./filters/urlRewrite.js";
|
||||||
import S5Provider from "./providers/s5.js";
|
|
||||||
|
|
||||||
const dnsClient = createDnsClient();
|
const dnsClient = createDnsClient();
|
||||||
|
|
||||||
const providerManager = new ProviderManager();
|
const providerManager = new ProviderManager();
|
||||||
providerManager.register(new IPFSProvider());
|
providerManager.register(new IPFSProvider());
|
||||||
providerManager.register(new S5Provider());
|
|
||||||
providerManager.processor.registerFilter(new URLRewriteFilter());
|
providerManager.processor.registerFilter(new URLRewriteFilter());
|
||||||
|
|
||||||
globalThis.postMessage = async (...args) => {
|
globalThis.postMessage = async (...args) => {
|
||||||
|
|
|
@ -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 createNetworkRegistryClient } from "@lumeweb/kernel-network-registry-client";
|
||||||
import { createClient as createHandshakeClient } from "@lumeweb/kernel-handshake-client";
|
import { createClient as createHandshakeClient } from "@lumeweb/kernel-handshake-client";
|
||||||
import { createClient as createEthClient } from "@lumeweb/kernel-eth-client";
|
import { createClient as createEthClient } from "@lumeweb/kernel-eth-client";
|
||||||
import { createClient as createS5Client } from "@lumeweb/kernel-s5-client";
|
|
||||||
|
|
||||||
const dnsClient = createDnsClient();
|
const dnsClient = createDnsClient();
|
||||||
const ipfsClient = createIpfsClient();
|
const ipfsClient = createIpfsClient();
|
||||||
|
@ -14,7 +13,6 @@ const peerDiscoveryClient = createPeerDiscoveryClient();
|
||||||
const networkRegistryClient = createNetworkRegistryClient();
|
const networkRegistryClient = createNetworkRegistryClient();
|
||||||
const handshakeClient = createHandshakeClient();
|
const handshakeClient = createHandshakeClient();
|
||||||
const ethClient = createEthClient();
|
const ethClient = createEthClient();
|
||||||
const s5Client = createS5Client();
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
dnsClient,
|
dnsClient,
|
||||||
|
@ -24,5 +22,4 @@ export {
|
||||||
networkRegistryClient,
|
networkRegistryClient,
|
||||||
handshakeClient,
|
handshakeClient,
|
||||||
ethClient,
|
ethClient,
|
||||||
s5Client,
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -41,15 +41,8 @@ const App: React.FC = () => {
|
||||||
<div className="py-4 -mb-4 flex flex-row gap-x-3">
|
<div className="py-4 -mb-4 flex flex-row gap-x-3">
|
||||||
{ethStatus?.syncState === "syncing" ? (
|
{ethStatus?.syncState === "syncing" ? (
|
||||||
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
|
<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>
|
</span>
|
||||||
) : ethStatus?.syncState === "done" ? (
|
) : ethStatus?.syncState === "done" ? (
|
||||||
<span className="flex items-center gap-x-2 rounded-full bg-neutral-800 text-white p-1 px-4 bg">
|
<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>
|
<LumeStatusProvider>
|
||||||
<NetworksProvider>
|
<NetworksProvider>
|
||||||
<AuthProvider>
|
<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>
|
</AuthProvider>
|
||||||
</NetworksProvider>
|
</NetworksProvider>
|
||||||
</LumeStatusProvider>
|
</LumeStatusProvider>
|
||||||
|
|
|
@ -346,7 +346,7 @@ export function Browser() {
|
||||||
ref={iframeRef}
|
ref={iframeRef}
|
||||||
onLoad={handleIframeLoad}
|
onLoad={handleIframeLoad}
|
||||||
src={url ? `/browse/${url}` : "about:blank"}
|
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>
|
></iframe>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,10 +6,9 @@ type Props = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const AVAILABLE_PAGES = [
|
const AVAILABLE_PAGES = [
|
||||||
"lumeweb",
|
|
||||||
"blockranger.eth",
|
"blockranger.eth",
|
||||||
"esteroids.eth",
|
"esteroids.eth",
|
||||||
// "ens.eth",
|
"ens.eth",
|
||||||
"sogola.eth",
|
"sogola.eth",
|
||||||
"vitalik.eth",
|
"vitalik.eth",
|
||||||
];
|
];
|
||||||
|
@ -18,7 +17,7 @@ const StartPage = ({ setUrl }: Props) => {
|
||||||
const { ready, inited } = useLumeStatus();
|
const { ready, inited } = useLumeStatus();
|
||||||
const { isLoggedIn } = useAuth();
|
const { isLoggedIn } = useAuth();
|
||||||
return (
|
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">
|
<h2 className="font-bold text-2xl text-white">
|
||||||
Welcome to the Lume Browser
|
Welcome to the Lume Browser
|
||||||
</h2>
|
</h2>
|
||||||
|
@ -27,32 +26,9 @@ const StartPage = ({ setUrl }: Props) => {
|
||||||
from the Ethereum Name Service (ENS) and Handshake protocol, providing a
|
from the Ethereum Name Service (ENS) and Handshake protocol, providing a
|
||||||
secure and decentralized browsing experience.
|
secure and decentralized browsing experience.
|
||||||
</p>
|
</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 ? (
|
{inited && ready ? (
|
||||||
<div>
|
<div>
|
||||||
<hr className="my-3 border-neutral-700" />
|
<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">
|
<h3 className="text-white text-lg font-bold mt-4">
|
||||||
Currently Accessible Websites:
|
Currently Accessible Websites:
|
||||||
</h3>
|
</h3>
|
||||||
|
|
|
@ -13,6 +13,8 @@ import "@/styles/globals.scss";
|
||||||
<title>Web3 Browser - Powered By Lume Web</title>
|
<title>Web3 Browser - Powered By Lume Web</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<main class="bg-neutral-950 w-full">
|
||||||
<App client:only="react" />
|
<App client:only="react" />
|
||||||
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue