Mobile tweaks

apps/web/src/app/(index)/page.tsx

@@ -16,6 +16,7 @@ import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { PreviewTable } from "@/components/PreviewTable";
 import { getBlocks } from "@/components/BlocksTable/getBlocks";
 import { getTransactions } from "@/components/TransactionsTable/getTransactions";
+import { TwitterEmbed } from "@/components/Embedded";
 
 
 interface CardProps {
@@ -35,7 +36,7 @@ const LandingCard: FC<CardProps> = ({ heading, children, className, buttonText,
       </CardHeader>
       <CardContent className="flex flex-col gap-1 items-center">
         {children}
-        <Button className="w-full" variant={ disabled ? "outline" : "default"} disabled={disabled} asChild={!disabled}>
+        <Button className="w-full" variant={ disabled ? "ghost" : "outline"} disabled={disabled} asChild={!disabled}>
           <Link href={buttonLink}>{buttonText}</Link>
         </Button>
       </CardContent>
@@ -79,31 +80,33 @@ export default function Home() {
         heading="Transactions"
         buttonLink="/transactions"
         buttonText="Explore Transactions"
-        className="basis-[45%] w-full max-w-screen-sm"
+        className="sm:basis-[45%] w-full max-w-screen-sm"
         children={
           <HydrationBoundary state={dehydrate(queryClient)}>
             <PreviewTable
               className="w-full"
               queryName={transactionsQuery}
               pageIndex={0}
               endpoint={transactionEndpoint}
-              errorMessage={errorMessage}/>
+              errorMessage={errorMessage}
+            />
           </HydrationBoundary>
         }
       />
       <LandingCard
         heading="Blocks"
         buttonLink="/blocks"
         buttonText="Explore Blocks"
-        className="basis-[50%] w-full max-w-screen-sm"
+        className="sm:basis-[50%] w-full max-w-screen-sm"
         children={
           <HydrationBoundary state={dehydrate(queryClient)}>
             <PreviewTable
               className="w-full"
               queryName={blocksQuery}
               pageIndex={0}
               endpoint={blocksEndpoint}
-              errorMessage={errorMessage}/>
+              errorMessage={errorMessage}
+            />
           </HydrationBoundary>
         }
       />
@@ -146,6 +149,9 @@ export default function Home() {
         className="w-[380px]"
         disabled={true}
       />
+      <div className="flex w-full items-center justify-center">
+        <TwitterEmbed className="w-full sm:w-1/2"/>
+      </div>
     </div>
   );
 }

apps/web/src/app/(main)/block/[ht]/page.tsx

@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <div className="flex flex-col gap-8 px-6 items-center">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">Block Summary</h1>
       </div>

apps/web/src/app/(main)/blocks/page.tsx

@@ -27,7 +27,7 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <div className="flex flex-col gap-8 px-6 items-center">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">Recent Blocks</h1>
       </div>

apps/web/src/app/(main)/ibc/channel/[id]/page.tsx

@@ -26,13 +26,13 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center ">
+    <div className="flex flex-col gap-8 px-6 pb-8 items-center ">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">IBC Channel</h1>
       </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         {/* TODO: don't forget to remove this extra pb-8 once Channel is cleaned up. */}
-        <div className="sm:w-11/12 w-full pb-8">
+        <div className="sm:w-11/12 w-full">
           <Channel {...{endpoint, queryName, channelId}}/>
         </div>
       </HydrationBoundary>

apps/web/src/app/(main)/ibc/channels/page.tsx

@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <div className="flex flex-col gap-8 px-6 items-center">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">IBC Channels</h1>
       </div>

apps/web/src/app/(main)/ibc/client/[id]/page.tsx

@@ -26,7 +26,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center ">
+    <div className="flex flex-col gap-8 px-6 items-center ">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">IBC Client</h1>
       </div>

apps/web/src/app/(main)/ibc/clients/page.tsx

@@ -25,7 +25,7 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <div className="flex flex-col gap-8 px-6 items-center">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">IBC Clients</h1>
       </div>

apps/web/src/app/(main)/ibc/connection/[id]/page.tsx

@@ -27,7 +27,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
+    <div className="flex flex-col gap-8 px-6 items-center">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">IBC Connection</h1>
       </div>

apps/web/src/app/(main)/ibc/connections/page.tsx

@@ -25,8 +25,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 items-center pt-5">
-      <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
+    <div className="flex flex-col gap-8 px-6 items-center">
+      <div className="flex w-full justify-start items-center">
+        <h1 className="text-lg font-medium">IBC Connections</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ConnectionsTable
           className="sm:w-11/12 w-full"

apps/web/src/app/(main)/search/[query]/page.tsx

@@ -28,8 +28,8 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 sm:p-8" key={query}>
-      <h1 className="sm:text-2xl font-bold">Search results</h1>
+    <div className="flex flex-col px-6 pb-8 gap-5 sm:p-8" key={query}>
+      <h1 className="text-lg font-medium">Search results</h1>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <SearchResultsTable className="w-full" query={query}/>
       </HydrationBoundary>

apps/web/src/app/(main)/transaction/[hash]/page.tsx

@@ -28,7 +28,7 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center ">
+    <div className="flex flex-col gap-8 px-6 items-center ">
       <div className="sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">Transaction Summary</h1>
       </div>

apps/web/src/app/(main)/transactions/page.tsx

@@ -28,8 +28,8 @@ const Page = () => {
   });
 
   return (
-    <div className="flex flex-col gap-8 items-center">
-      <div className="sm:w-11/12 w-full">
+    <div className="flex flex-col gap-8 px-6 items-center">
+      <div className="flex flex-col sm:w-11/12 w-full">
         <h1 className="text-lg font-medium">Recent Transactions</h1>
       </div>
       <HydrationBoundary state={dehydrate(queryClient)}>

apps/web/src/components/ABCIEventsTable/columns.tsx

@@ -10,7 +10,7 @@ export const makeColumns = ( header: string ) => {
   const columns : Array<ColumnDef<ABCIEventsColumns>> = [
     {
       id: "type",
-      header: () => <div className="break-all text-sm text-foreground">{header}</div>,
+      header: () => <div className="text-sm text-foreground overflow-scroll">{header}</div>,
       columns: [
         {
           accessorKey: "key",

apps/web/src/components/Block/index.tsx

@@ -24,15 +24,15 @@ export const Block : FC<BlockProps> = ({ endpoint, queryName, ht }) => {
   return (
     <div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
+        <p className="sm:w-1/6 w-full font-medium">Block Height</p>
         <pre className="sm:w-0 w-full">{ht}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="w-1/6 font-semibold">Timestamp</p>
+        <p className="w-1/6 font-medium">Timestamp</p>
         <pre className="sm:w-0 w-full">{created_at}</pre>
       </div>
       <div className="flex justify-start flex-wrap w-full">
-        <p className="sm:w-1/6 w-full font-bold">Transactions</p>
+        <p className="sm:w-1/6 w-full font-medium">Transactions</p>
         {/* eslint-disable-next-line @typescript-eslint/naming-convention */}
         {tx_hashes.length !== 0 ? (
           tx_hashes.map((hash, i) => (

apps/web/src/components/Embedded/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import Script from "next/script";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { FC, useEffect, useState } from "react";
+import { Skeleton } from "../ui/skeleton";
+
+export const TwitterEmbed: FC<{ className?: string }> = ({ className }) => {
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    // This useEffect is basically a hack to allow somekind of UI indication that an element is being loaded.
+    // Complete and totally inadequate hack to cope with the fact that twitter is a zombie social media company.
+    // The timeline embed is completely broken and does not respect requests to limit the total number of posts loaded.
+    // As a result, this embed adds an additional ***~20mb*** to the page load. This is why we delay it.
+    function checkIframeLoaded() {
+      // Get a handle to the iframe element
+      const iframeDiv = document.getElementsByClassName("twitter-timeline-rendered");
+      if (iframeDiv === undefined || iframeDiv.length === 0 ) {
+        // Nothing loaded yet, wait.
+        window.setTimeout(checkIframeLoaded, 1000);
+      } else {
+        // console.log(iframeDiv);
+        // Check if the iframe element itself is loaded yet
+        const iframeDoc = document.getElementById("twitter-widget-0");
+        if (iframeDoc === undefined) {
+          window.setTimeout(checkIframeLoaded, 1000);
+        } else {
+          // Completely arbitrary. Seems to work OK on simulated low band 4g connections.
+          window.setTimeout(() => setLoaded(true), 5000);
+          return;
+        }
+      }
+    }
+    checkIframeLoaded();
+  }, []);
+
+  return (
+    <Card className={cn("bg-card/60", className)}>
+      <CardHeader className="flex justify-center">
+        <CardTitle className="text-lg font-medium">
+          Recent Updates
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="h-[320px]">
+        <div className="grid grid-cols-1 grid-rows-1">
+          <div className="col-span-1 row-span-1 col-start-1 row-start-1">
+            <Link
+              id="twitter-tl"
+              className={cn("twitter-timeline")}
+              data-tweet-limit={5}
+              // data-limit="5"
+              data-height="300"
+              // data-chrome="noheader"
+              // data-chrome="noborders"
+              href="https://twitter.com/penumbrazone?ref_src=twsrc%5Etfw"
+            />
+          </div>
+          { !loaded ? (
+            <div className="col-span-1 row-span-1 col-start-1 row-start-1">
+              <Skeleton className={cn("w-full h-[300px] opacity-85")}/>
+            </div>
+          ) : null}
+        <Script
+          async
+          src="https://platform.twitter.com/widgets.js"
+          strategy="lazyOnload"
+          data-tweet-limit="5"
+          data-limit="5"
+          data-height="300"
+          data-chrome="noheader"
+        />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

apps/web/src/components/Navbar/index.tsx

@@ -71,13 +71,15 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
   const isIbc = segments.length >= 2 ? isIbcPath(segments) : false;
   const isBlockOrTx = segments.length === 2 && segments[0] === "block" || segments[0] === "transaction";
   const isTable = isTablePath(segments);
+  const isSearch = segments.length === 2 && segments[0] === "search";
 
-  // Handle case of /{transactions|blocks} and /ibc/{clients|channels|connections}
-  if (isTable) {
+  console.log("building breadcrumb...", isSearch);
+  // Handle case of /{transactions|blocks}, /ibc/{clients|channels|connections}, /search
+  if (isTable || isSearch) {
     // /{transactions|blocks|clients|channels|connections}
     const parent = isIbc ? segments[1] : segments[0];
     const _href = isIbc ? `/ibc/${parent}` : `/${parent}`;
-    const linkText = isIbc ? `IBC ${capitalize(parent)}` : `Recent ${capitalize(parent)}`;
+    const linkText = isIbc ? `IBC ${capitalize(parent)}` : isSearch ? `${capitalize(parent)}` : `Recent ${capitalize(parent)}`;
 
     return (
       <Breadcrumb>
@@ -105,7 +107,7 @@ const Breadcrumbs : FC<{ pathName: string }>= ({ pathName }) => {
     const tableRef = isIbc ? `/ibc/${parentTable}` : `/${parentTable}`;
     const _href = isIbc ? `/ibc/${parent}/${slug}` : `/${parent}/${slug}`;
     // Same prefixing but for the "current" breadcrumb
-    const linkText = isIbc ? `IBC ${capitalize(parent)} Summary` : `${capitalize(parent)} Summary`;
+    const linkText = `${capitalize(parent)} Summary`;
 
     return (
       <Breadcrumb>

apps/web/src/components/Transaction/index.tsx

@@ -23,27 +23,27 @@ export const Transaction : FC<TransactionProps> = ({ endpoint, queryName, hash }
   return (
     <div className="flex flex-wrap justify-between sm:gap-y-10 gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Hash</p>
+        <p className="sm:w-1/6 w-full sm:text-lg font-medium">Hash</p>
         {/* TODO: this width on smaller screens is pretty arbitrary and there's a few instances of this now through the codebase. revisit and implement as consistent tailwind variables. */}
         {/* TODO: also at the point where JS should be used for copying to clipboard which mitigates most text overflow issues and opens up stylings for improvement. */}
         <pre className="sm:w-5/6 w-[300px] sm:text-lg break-all whitespace-pre-wrap">
           {txResult.tx_hash}
         </pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Block Height</p>
+        <p className="sm:w-1/6 w-full sm:text-lg font-medium">Block Height</p>
         <Link href={`/block/${txResult.height}`}>
           <pre className="underline sm:w-0 sm:text-lg w-full">
             {txResult.height.toString()}
           </pre>
         </Link>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 w-full sm:text-lg font-semibold">Timestamp</p>
+        <p className="sm:w-1/6 w-full sm:text-lg font-medium">Timestamp</p>
         <pre className="sm:w-0 w-full sm:text-lg">{txResult.created_at}</pre>
       </div>
       <div className="flex flex-wrap justify-start w-full">
-        <p className="sm:w-1/6 sm:shrink-0 w-full sm:text-lg font-semibold">
+        <p className="sm:w-1/6 sm:shrink-0 w-full sm:text-lg font-medium">
           Transaction Data
         </p>
         <pre className="sm:w-5/6 w-full break-all whitespace-pre-wrap text-xs p-1 bg-slate-100">

apps/web/src/components/TransactionView/index.tsx

@@ -42,7 +42,7 @@ export const TransactionView : FC<TransactionViewProps> = ({ tx }) => {
   const txView = makeTransactionView(Transaction.fromJson(tx, { typeRegistry: ibcRegistry }));
   return (
     <FlexRow className="flex-wrap justify-start w-full">
-      <p className="font-semibold sm:text-lg">Transaction View</p>
+      <p className="font-medium sm:text-lg">Transaction View</p>
       {txView.bodyView ? <TransactionBodyView bodyView={txView.bodyView}/> : "None"}
       {txView.bindingSig ? <BindingSig label="Binding Signature" value={txView.bindingSig.inner}/> : null}
       {txView.anchor ? <MerkleRoot label="Anchor" value={txView.anchor.inner}/> : null}