Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make playground usable on mobile #54

Merged
merged 1 commit into from
May 18, 2024
Merged

Make playground usable on mobile #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
113 changes: 82 additions & 31 deletions apps/web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand All @@ -19,50 +31,89 @@ 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 = {
title: 'Loop Decoder',
description: 'Demo of Loop Decoder',
}

const NavigationBar = () => {
return (
<>
<div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl flex justify-between py-4 flex-row items-center space-y-0 md:h-16">
<h2 className="text-lg font-semibold">Loop Decoder</h2>

<MainNav className="mx-6 hidden lg:block" navLinks={navLinks} />

<div className="hidden lg:flex flex-row space-x-4">
{SOCIAL_LINKS.map((link) => (
<a
target="_blank"
key={link.title}
href={link.href}
className="text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
>
{link.title}
</a>
))}
</div>

<div className="block lg:hidden">
<DropdownMenu >
<DropdownMenuTrigger asChild>
<Button variant="outline">Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
{navLinks.map((link) => (
<DropdownMenuItem asChild key={link.href}>
<Link href={link.href}>{link.title}</Link>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
{SOCIAL_LINKS.map((link) => (
<DropdownMenuItem asChild key={link.title}>
<a target="_blank" href={link.href}>
{link.title}
</a>
</DropdownMenuItem>
))}
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<Separator />
</>
)
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={inter.className}>
<div className="flex h-screen flex-col">
<div className="container flex justify-between py-4 flex-row items-center space-y-0 md:h-16">
<h2 className="text-lg font-semibold">Loop Decoder</h2>

<MainNav className="mx-6" navLinks={navLinks} />

<div className="flex flex-row space-x-4">
<a
target="_blank"
href="https://github.com/3loop/loop-decoder"
className="text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
>
Github
</a>
<a
target="_blank"
href="https://twitter.com/3loop_io"
className="text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
>
Twitter
</a>
<a
target="_blank"
href="https://loop-decoder.3loop.io/"
className="text-sm font-medium text-gray-700 transition-colors hover:text-gray-900 dark:text-gray-200 dark:hover:text-gray-100"
>
Docs
</a>
</div>
</div>
<Separator />
<NavigationBar />

<div className="container h-full py-4">{children}</div>
<div className="w-full mx-auto px-3 lg:px-4 max-w-screen-xl h-full py-4">{children}</div>
</div>
<Analytics />
</body>
Expand Down
39 changes: 22 additions & 17 deletions apps/web/src/app/tx/[chainID]/[hash]/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,29 +53,34 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash,
}, [schema, decoded, defaultInterpreter, result, onRun])

return (
<div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
<div className="grid h-full items-stretch gap-6 grid-cols-1 lg:grid-cols-[1fr_200px]">
<div className="md:order-1 flex flex-col space-y-4">
<form onSubmit={onSubmit}>
<div className="flex w-full items-center space-x-2">
<NetworkSelect defaultValue={DEFAULT_CHAIN_ID.toString()} />

<div className="flex w-full lg:items-center gap-2 flex-col lg:flex-row">
<div>
<NetworkSelect defaultValue={DEFAULT_CHAIN_ID.toString()} />
</div>
<Input
className="flex-1 flex"
className="flex-1"
id="hash"
name="hash"
placeholder={`Paste Ethereum transaction hash or click on examples`}
defaultValue={currentHash}
/>
<Button type="submit">Decode</Button>
<Button variant={'outline'} onClick={onRun} type="button">
<PlayIcon className="mr-2 h-4 w-4" />
Interpret
</Button>
<div className="flex gap-2">
<Button type="submit" className="flex-1">
Decode
</Button>
<Button variant={'outline'} onClick={onRun} type="button" className="flex-1">
<PlayIcon className="mr-2 h-4 w-4" />
Interpret
</Button>
</div>
</div>
</form>

<div className="grid gap-6 lg:grid-cols-2 lg:grid-rows-2 h-full">
<div className="flex flex-col gap-2 col-span-2">
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 h-full">
<div className="flex flex-col gap-2 lg:col-span-2 min-h-[40vh] lg:min-h-[initial]">
<Label>Interpretation:</Label>

<CodeBlock
Expand All @@ -87,12 +92,12 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash,
/>
</div>

<div className="flex flex-col gap-2 ">
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
<Label>Decoded transaction:</Label>
<CodeBlock language="json" value={JSON.stringify(decoded, null, 2)} readonly={true} lineNumbers={false} />
</div>

<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 min-h-[40vh] lg:min-h-[initial]">
<div className="flex flex-row justify-between items-center">
<Label>Result:</Label>
</div>
Expand All @@ -107,13 +112,13 @@ export default function DecodingForm({ decoded, defaultInterpreter, currentHash,
</div>
</div>

<div className=" md:order-2">
<div className="space-y-4 pl-4">
<div className="md:order-2">
<div className="space-y-4">
<p className="text-lg font-semibold tracking-tight">Example Transactions</p>

{Object.entries(sidebarNavItems).map(([heading, items]) => (
<div key={heading}>
<p className="text-sm text-muted-foreground pl-4">{heading}</p>
<p className="text-sm text-muted-foreground">{heading}</p>
<SidebarNav items={items} />
</div>
))}
Expand Down
41 changes: 22 additions & 19 deletions apps/web/src/app/tx/[chainID]/[hash]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,54 @@ import { sidebarNavItems } from '@/app/data'

export default function Loading() {
return (
<div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px] animate-pulse ">
<div className="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px] animate-pulse">
<div className="md:order-1 flex flex-col space-y-4">
<form>
<div className="flex w-full items-center space-x-2">
<NetworkSelect disabled={true} />

<Input className="flex-1 flex" id="hash" name="hash" disabled={true} />
<Button type="submit" disabled={true}>
Decode
</Button>
<Button variant={'outline'} disabled={true} type="button">
<PlayIcon className="mr-2 h-4 w-4" />
Interpret
</Button>
<div className="flex w-full lg:items-center gap-2 flex-col lg:flex-row">
<div>
<NetworkSelect disabled={true} />
</div>
<Input className="flex-1" id="hash" name="hash" disabled={true} />
<div className="flex gap-2">
<Button type="submit" disabled={true} className="flex-1">
Decode
</Button>
<Button variant={'outline'} disabled={true} type="button" className="flex-1">
<PlayIcon className="mr-2 h-4 w-4" />
Interpret
</Button>
</div>
</div>
</form>

<div className="grid gap-6 lg:grid-cols-2 lg:grid-rows-2 h-full">
<div className="flex flex-col gap-2 col-span-2">
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 h-full">
<div className="flex flex-col gap-2 lg:col-span-2">
<Label>Interpretation:</Label>

<div className="flex flex-1 bg-muted rounded-md"></div>
<div className="flex flex-1 bg-muted rounded-md min-h-[40vh] lg:min-h-[initial]"></div>
</div>

<div className="flex flex-col gap-2 ">
<Label>Decoded transaction:</Label>
<div className="flex flex-1 bg-muted rounded-md"></div>
<div className="flex flex-1 bg-muted rounded-md min-h-[40vh] lg:min-h-[initial]"></div>
</div>

<div className="flex flex-col gap-2">
<div className="flex flex-row justify-between items-center">
<Label>Result:</Label>
</div>
<div className="flex flex-1 bg-muted rounded-md"></div>
<div className="flex flex-1 bg-muted rounded-md min-h-[40vh] lg:min-h-[initial]"></div>
</div>
</div>
</div>

<div className=" md:order-2">
<div className="space-y-4 pl-4">
<div className="space-y-4">
<p className="text-lg font-semibold tracking-tight">Example Transactions</p>

{Object.entries(sidebarNavItems).map(([heading, items]) => (
<div key={heading}>
<p className="text-sm text-muted-foreground pl-4">{heading}</p>
<p className="text-sm text-muted-foreground">{heading}</p>
<SidebarNav items={items} />
</div>
))}
Expand Down
2 changes: 1 addition & 1 deletion apps/web/src/components/ui/code-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface CodeBlockProps {

export default function CodeBlock(props: CodeBlockProps) {
return (
<div className="flex-1 border rounded-md">
<div className="flex-1 border rounded-md overflow-hidden">
<Editor
language={props.language}
value={props.value}
Expand Down
Loading
Loading