From e8eea54b8602218f9277ea3b62181bb362beabb4 Mon Sep 17 00:00:00 2001 From: Gheorghe Pinzaru Date: Sat, 18 May 2024 14:23:01 +0200 Subject: [PATCH] Make playground usable on mobile --- apps/web/package.json | 1 + apps/web/src/app/layout.tsx | 113 ++++++++--- apps/web/src/app/tx/[chainID]/[hash]/form.tsx | 39 ++-- .../src/app/tx/[chainID]/[hash]/loading.tsx | 41 ++-- apps/web/src/components/ui/code-block.tsx | 2 +- apps/web/src/components/ui/dropdown-menu.tsx | 181 ++++++++++++++++++ apps/web/src/components/ui/main-nav.tsx | 6 +- apps/web/src/components/ui/network-select.tsx | 2 +- apps/web/tailwind.config.js | 11 +- pnpm-lock.yaml | 97 ++++++++++ 10 files changed, 414 insertions(+), 79 deletions(-) create mode 100644 apps/web/src/components/ui/dropdown-menu.tsx diff --git a/apps/web/package.json b/apps/web/package.json index 84a6a8e..c3c293e 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -14,6 +14,7 @@ "@jitl/quickjs-singlefile-browser-release-sync": "^0.29.1", "@monaco-editor/react": "^4.6.0", "@prisma/client": "^5.2.0", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-hover-card": "^1.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index ba85b92..f58f1dd 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -5,6 +5,18 @@ import { Inter } from 'next/font/google' import { MainNav } from '@/components/ui/main-nav' import { Analytics } from '@vercel/analytics/react' import { aaveV2 } from '../app/data' +import { title } from 'process' +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu' +import { Button } from '@/components/ui/button' +import Link from 'next/link' const navLinks = [ { @@ -19,6 +31,21 @@ const navLinks = [ }, ] +const SOCIAL_LINKS = [ + { + href: 'https://twitter.com/3loop_io', + title: 'Twitter', + }, + { + href: 'https://github.com/3loop/loop-decoder', + title: 'Github', + }, + { + href: 'https://loop-decoder.3loop.io/', + title: 'Docs', + }, +] + const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { @@ -26,43 +53,67 @@ export const metadata: Metadata = { description: 'Demo of Loop Decoder', } +const NavigationBar = () => { + return ( + <> +
+

Loop Decoder

+ + + +
+ {SOCIAL_LINKS.map((link) => ( + + {link.title} + + ))} +
+ +
+ + + + + + + {navLinks.map((link) => ( + + {link.title} + + ))} + + + + {SOCIAL_LINKS.map((link) => ( + + + {link.title} + + + ))} + + + +
+
+ + + ) +} + export default function RootLayout({ children }: { children: React.ReactNode }) { return (
-
-

Loop Decoder

- - - - -
- + -
{children}
+
{children}
diff --git a/apps/web/src/app/tx/[chainID]/[hash]/form.tsx b/apps/web/src/app/tx/[chainID]/[hash]/form.tsx index 2862e92..5567126 100644 --- a/apps/web/src/app/tx/[chainID]/[hash]/form.tsx +++ b/apps/web/src/app/tx/[chainID]/[hash]/form.tsx @@ -53,29 +53,34 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash, }, [schema, decoded, defaultInterpreter, result, onRun]) return ( -
+
-
- - +
+
+ +
- - +
+ + +
-
-
+
+
-
+
-
+
@@ -107,13 +112,13 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash,
-
-
+
+

Example Transactions

{Object.entries(sidebarNavItems).map(([heading, items]) => (
-

{heading}

+

{heading}

))} diff --git a/apps/web/src/app/tx/[chainID]/[hash]/loading.tsx b/apps/web/src/app/tx/[chainID]/[hash]/loading.tsx index adb7097..9320f1e 100644 --- a/apps/web/src/app/tx/[chainID]/[hash]/loading.tsx +++ b/apps/web/src/app/tx/[chainID]/[hash]/loading.tsx @@ -8,51 +8,54 @@ import { sidebarNavItems } from '@/app/data' export default function Loading() { return ( -
+
-
- - - - - +
+
+ +
+ +
+ + +
-
-
+
+
-
+
-
+
-
+
-
+

Example Transactions

{Object.entries(sidebarNavItems).map(([heading, items]) => (
-

{heading}

+

{heading}

))} diff --git a/apps/web/src/components/ui/code-block.tsx b/apps/web/src/components/ui/code-block.tsx index 011bb8c..cb7d4a7 100644 --- a/apps/web/src/components/ui/code-block.tsx +++ b/apps/web/src/components/ui/code-block.tsx @@ -12,7 +12,7 @@ interface CodeBlockProps { export default function CodeBlock(props: CodeBlockProps) { return ( -
+
, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { + return +} +DropdownMenuShortcut.displayName = 'DropdownMenuShortcut' + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} diff --git a/apps/web/src/components/ui/main-nav.tsx b/apps/web/src/components/ui/main-nav.tsx index fd171f1..afae139 100644 --- a/apps/web/src/components/ui/main-nav.tsx +++ b/apps/web/src/components/ui/main-nav.tsx @@ -18,7 +18,11 @@ export function MainNav({ className, navLinks, ...props }: MainNavProps) { return (