From 4c1dfb366db0227d2d042dec44426b2044a19a9f Mon Sep 17 00:00:00 2001 From: Fred Date: Tue, 16 Apr 2024 04:14:39 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=9A=A7=20working=20on=20blobstream?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[network]/blobstream/page.tsx | 82 +++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 apps/web/app/(blobstream)/[network]/blobstream/page.tsx diff --git a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx new file mode 100644 index 00000000..6cb0b49c --- /dev/null +++ b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx @@ -0,0 +1,82 @@ +import type { Metadata } from "next"; +import { capitalize } from "~/lib/shared-utils"; +import { Button } from "~/ui/button"; + +export type BlobStreamPageProps = { + params: { + network: string; + }; +}; + +export function generateMetadata(props: BlobStreamPageProps) { + const names = props.params.network.split("-"); + const formattedName = names.map(capitalize).join(" "); + return { + title: `${formattedName} Blobstream`, + }; +} + +export default function BlobStreamPage({ params }: BlobStreamPageProps) { + return ( +
+
+
+

Blobstream

+

Select to see blob streams:

+
+ +
+
+
+
+
+
Latest Block on Celestia
  + +   +
1300
+
+
+
Latest Synched Block
  + +   +
1000
+
+
+
+
+ + + + + + + + +
TransferFileTime
+ + + +
+
Contract Address
+
+
+
+
+ ); +} + +export const runtime = "edge"; From 79b468b7cbf71cb4747c776ee9fe08affd794dc6 Mon Sep 17 00:00:00 2001 From: Fred Date: Wed, 17 Apr 2024 03:00:15 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=9A=A7=20wip?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[network]/blobstream/page.tsx | 27 +- apps/web/public/images/dots-mask.svg | 354 ++++++++++++++++++ apps/web/ui/icon-svgs/ARCube.svg | 3 + apps/web/ui/icons/ArCube.tsx | 19 + apps/web/ui/icons/index.ts | 1 + 5 files changed, 399 insertions(+), 5 deletions(-) create mode 100644 apps/web/public/images/dots-mask.svg create mode 100644 apps/web/ui/icon-svgs/ARCube.svg create mode 100644 apps/web/ui/icons/ArCube.tsx diff --git a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx index 6cb0b49c..3a5b1b43 100644 --- a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx +++ b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { capitalize } from "~/lib/shared-utils"; import { Button } from "~/ui/button"; +import { cn } from "~/ui/shadcn/utils"; export type BlobStreamPageProps = { params: { @@ -32,7 +33,13 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) {
-
+
Latest Block on Celestia
  @@ -51,14 +58,24 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) {
1000
-
+
- - - + + + + +
TransferFileTime
TransferFileTime
diff --git a/apps/web/public/images/dots-mask.svg b/apps/web/public/images/dots-mask.svg new file mode 100644 index 00000000..dc4e1f6e --- /dev/null +++ b/apps/web/public/images/dots-mask.svg @@ -0,0 +1,354 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/ui/icon-svgs/ARCube.svg b/apps/web/ui/icon-svgs/ARCube.svg new file mode 100644 index 00000000..457f6362 --- /dev/null +++ b/apps/web/ui/icon-svgs/ARCube.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/web/ui/icons/ArCube.tsx b/apps/web/ui/icons/ArCube.tsx new file mode 100644 index 00000000..13a73b53 --- /dev/null +++ b/apps/web/ui/icons/ArCube.tsx @@ -0,0 +1,19 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgArCube = (props: SVGProps) => ( + + + +); +export default SvgArCube; diff --git a/apps/web/ui/icons/index.ts b/apps/web/ui/icons/index.ts index bf37d6df..ab6c9e9b 100644 --- a/apps/web/ui/icons/index.ts +++ b/apps/web/ui/icons/index.ts @@ -1,3 +1,4 @@ +export { default as ArCube } from "./ArCube"; export { default as ArrowDown } from "./ArrowDown"; export { default as ArrowLeftRight } from "./ArrowLeftRight"; export { default as ArrowOff } from "./ArrowOff"; From 942c5284630c589e21f370c1d4c03c39d84122dc Mon Sep 17 00:00:00 2001 From: Fred Date: Wed, 17 Apr 2024 05:01:36 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=92=84=20added=20cards=20on=20top?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../[network]/blobstream/page.tsx | 131 ++++++++++++++++-- apps/web/public/images/arbitrum_one.svg | 36 +++++ apps/web/public/images/base.svg | 5 + apps/web/ui/icon-svgs/ARCube.svg | 2 +- apps/web/ui/icons/ArCube.tsx | 3 +- 5 files changed, 160 insertions(+), 17 deletions(-) create mode 100644 apps/web/public/images/arbitrum_one.svg create mode 100644 apps/web/public/images/base.svg diff --git a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx index 3a5b1b43..174e7868 100644 --- a/apps/web/app/(blobstream)/[network]/blobstream/page.tsx +++ b/apps/web/app/(blobstream)/[network]/blobstream/page.tsx @@ -1,12 +1,18 @@ import type { Metadata } from "next"; +import Image from "next/image"; +import Link from "next/link"; import { capitalize } from "~/lib/shared-utils"; import { Button } from "~/ui/button"; +import { ArCube } from "~/ui/icons"; import { cn } from "~/ui/shadcn/utils"; export type BlobStreamPageProps = { params: { network: string; }; + searchParams?: { + stream?: string; + }; }; export function generateMetadata(props: BlobStreamPageProps) { @@ -17,10 +23,15 @@ export function generateMetadata(props: BlobStreamPageProps) { }; } -export default function BlobStreamPage({ params }: BlobStreamPageProps) { +export default function BlobStreamPage({ searchParams }: BlobStreamPageProps) { + const streamSources = ["arbitrum_one", "base"]; + + const selectedStream = streamSources.includes(searchParams?.stream ?? "") + ? searchParams?.stream + : streamSources[0]; return (
Select to see blob streams:
-
+
+ + + +
-
-
Latest Block on Celestia
  +
+
-
-
Latest Synched Block
  +
+
@@ -69,12 +101,18 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) { />
- +
- - - - + + + + @@ -96,4 +134,69 @@ export default function BlobStreamPage({ params }: BlobStreamPageProps) { ); } +type BlobStreamImageCardProps = { + className?: string; + image: string; + title: string; + subtitle: string; + selected?: boolean; + link: string; + isUnavailable?: boolean; +}; + +function BlobStreamImageCard({ + className, + image, + title, + subtitle, + link, + selected = false, + isUnavailable = false, +}: BlobStreamImageCardProps) { + return ( +
+
+ + +
+ + {title} + +

{subtitle}

+
+
+ + +
+ ); +} + export const runtime = "edge"; diff --git a/apps/web/public/images/arbitrum_one.svg b/apps/web/public/images/arbitrum_one.svg new file mode 100644 index 00000000..a44288ba --- /dev/null +++ b/apps/web/public/images/arbitrum_one.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/public/images/base.svg b/apps/web/public/images/base.svg new file mode 100644 index 00000000..a814b760 --- /dev/null +++ b/apps/web/public/images/base.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/web/ui/icon-svgs/ARCube.svg b/apps/web/ui/icon-svgs/ARCube.svg index 457f6362..0d6661a2 100644 --- a/apps/web/ui/icon-svgs/ARCube.svg +++ b/apps/web/ui/icon-svgs/ARCube.svg @@ -1,3 +1,3 @@ - + \ No newline at end of file diff --git a/apps/web/ui/icons/ArCube.tsx b/apps/web/ui/icons/ArCube.tsx index 13a73b53..be7015f3 100644 --- a/apps/web/ui/icons/ArCube.tsx +++ b/apps/web/ui/icons/ArCube.tsx @@ -3,8 +3,7 @@ import type { SVGProps } from "react"; const SvgArCube = (props: SVGProps) => (
TransferFileTime
+ Transfer + + File + + Time +