Compare commits
24 Commits
Author | SHA1 | Date |
---|---|---|
Derrick Hammer | d567eb58ce | |
Derrick Hammer | 345d441984 | |
Derrick Hammer | c7f3ffa2c1 | |
Derrick Hammer | eb6c2d94cc | |
Derrick Hammer | 867f36c346 | |
Derrick Hammer | f7720f775c | |
Derrick Hammer | a50a78ea47 | |
Derrick Hammer | 47f61909f5 | |
Derrick Hammer | 165ead6a80 | |
Derrick Hammer | ad68d92c57 | |
Derrick Hammer | 9767e82751 | |
Derrick Hammer | c0892c10c3 | |
Derrick Hammer | 34e6e99287 | |
Derrick Hammer | bb4909948e | |
Derrick Hammer | a76076b730 | |
Derrick Hammer | 2c972144f9 | |
Derrick Hammer | 0039e5b1b5 | |
Derrick Hammer | b75bf77f1e | |
Derrick Hammer | fd54384b4e | |
Derrick Hammer | 0cf849a9d5 | |
Juan Di Toro | 0ab9f438b6 | |
Juan Di Toro | 673b7553e0 | |
Derrick Hammer | 4acdbd4e4c | |
Derrick Hammer | 0e30ba6392 |
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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}`;
|
||||
});
|
||||
|
|
|
@ -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(/^/, "/");
|
||||
}
|
|
@ -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) => {
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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)} />
|
||||
<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">
|
||||
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue