Merge remote-tracking branch 'origin/master'

src/components/App.tsx

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

src/components/Browser.tsx

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

src/components/StartPage.tsx

@@ -9,7 +9,7 @@ const AVAILABLE_PAGES = [
   "lumeweb",
   "blockranger.eth",
   "esteroids.eth",
-  "ens.eth",
+  // "ens.eth",
   "sogola.eth",
   "vitalik.eth",
 ];
@@ -18,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>
@@ -29,7 +29,7 @@ const StartPage = ({ setUrl }: Props) => {
       </p>
       <p className="text-gray-400 my-4">
         For further documentation, see:{" "}
-        <a href="https://docs.lumeweb.com/browser-webapp">
+        <a href="https://docs.lumeweb.com/browser-webapp" className="underline text-white">
           https://docs.lumeweb.com/browser-webapp
         </a>
       </p>
@@ -38,6 +38,21 @@ const StartPage = ({ setUrl }: Props) => {
       {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,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>