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

Compare commits

base: LumeWeb:dd6869e6a581005557e6dd5bd32cbee98a93dc51
Branches Tags
LumeWeb:master
LumeWeb:develop
LumeWeb:ditorodev
..
compare: LumeWeb:8a88163f6f36860c9f813867ff00a2cec94908ed
Branches Tags
LumeWeb:master
LumeWeb:develop
LumeWeb:ditorodev

No commits in common. "dd6869e6a581005557e6dd5bd32cbee98a93dc51" and "8a88163f6f36860c9f813867ff00a2cec94908ed" have entirely different histories.
dd6869e6a5 ... 8a88163f6f

2 changed files with 16 additions and 12 deletions
Show Stats Expand all files Collapse all files

12
src/components/App.tsx
View File

@ -22,6 +22,8 @@ const App: React.FC = () => {
.filter((n) => n.name.toLowerCase() === "handshake") .filter((n) => n.name.toLowerCase() === "handshake")
.at(0); .at(0);
console.log({ ethStatus, handshakeStatus, networks });
return ( return (
<header className="relative border rounded-md m-4 border-neutral-800 px-3 py-4 w-[calc(100%-32px)] bg-neutral-900 flex flex-col"> <header className="relative border rounded-md m-4 border-neutral-800 px-3 py-4 w-[calc(100%-32px)] bg-neutral-900 flex flex-col">
<div className="relative px-2 my-2 mb-4 pl-2 pb-2 w-full flex justify-between"> <div className="relative px-2 my-2 mb-4 pl-2 pb-2 w-full flex justify-between">
@ -36,15 +38,15 @@ const App: React.FC = () => {
<Navigator /> <Navigator />
{ethStatus?.syncState === "syncing" || {ethStatus?.syncState === "syncing" ||
handshakeStatus?.syncState === "syncing" ? ( handshakeStatus?.syncState === "syncing" ? (
<div className="py-4 -mb-4 flex flex-row gap-x-3"> <div className="py-2 flex flex-row">
{ethStatus?.syncState === "syncing" ? ( {ethStatus?.syncState === "syncing" ? (
<span className="rounded-full bg-neutral-800 text-white p-1 px-4"> <span className="rounded-full bg-white text-black p-1">
<span className="font-mono mr-2 font-bold">{ethStatus.sync.toFixed(0)}%</span> Syncing Ethereum Network {ethStatus.sync.toPrecision(1)}% Syncing Ethereum Network
</span> </span>
) : null} ) : null}
{handshakeStatus?.syncState === "syncing" ? ( {handshakeStatus?.syncState === "syncing" ? (
<span className="rounded-full bg-neutral-800 text-white p-1 px-4"> <span className="rounded-full bg-white text-black p-1">
<span className="font-bold font-mono mr-2">{handshakeStatus.sync.toFixed(1)}%</span> Syncing Handshake Network {handshakeStatus.sync.toPrecision(1)}% Syncing Handshake Network
</span> </span>
) : null} ) : null}
</div> </div>

14
src/components/Browser.tsx
View File

@ -180,6 +180,8 @@ export function Navigator() {
} }
}, [contextUrl]); }, [contextUrl]);
console.log("Navigator mounted");
return ( return (
<form <form
onSubmit={(e) => { onSubmit={(e) => {
@ -242,8 +244,8 @@ export function Browser() {
.replace(/\/$/, ""); .replace(/\/$/, "");
if (url !== realUrl) { if (url !== realUrl) {
setUrl(realUrl); setUrl(realUrl);
setIsLoadingPage(false);
} }
setIsLoadingPage(false);
} catch (e) { } catch (e) {
// This will catch errors related to cross-origin requests, in which case we can't access the iframe's contentWindow.location // This will catch errors related to cross-origin requests, in which case we can't access the iframe's contentWindow.location
console.warn( console.warn(
@ -261,11 +263,11 @@ export function Browser() {
if ( if (
mutation.type === "attributes" && mutation.type === "attributes" &&
mutation.attributeName === "src" mutation.attributeName === "src"
) { ) {
setIsLoadingPage(true); setIsLoadingPage(true);
}
} }
}); }
});
observer.observe(iframe, { attributes: true }); observer.observe(iframe, { attributes: true });
return () => observer.disconnect(); // Clean up on unmount return () => observer.disconnect(); // Clean up on unmount
@ -276,7 +278,7 @@ export function Browser() {
<> <>
{isLoadingPage ? ( {isLoadingPage ? (
<div className="fixed bottom-2 left-3"> <div className="fixed bottom-2 left-3">
<span className="max-w-4xl w-full block my-2 py-1 px-4 rounded-lg bg-gray-900/70 border border-gray-600 text-gray-400"> <span className="max-w-4xl w-full block my-2 py-1 px-4 rounded-lg opacity-80 bg-gray-900/70 border border-gray-600 text-gray-400">
Loading {url}... Loading {url}...
</span> </span>
</div> </div>