Skip to content

Commit

Permalink
feat: appkit demo (#3413)
Browse files Browse the repository at this point in the history
  • Loading branch information
enesozturk authored Dec 10, 2024
1 parent 4f9a11b commit 68d1614
Show file tree
Hide file tree
Showing 98 changed files with 6,041 additions and 140 deletions.
3 changes: 3 additions & 0 deletions apps/builder/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": ["next/core-web-vitals", "next/typescript"]
}
36 changes: 36 additions & 0 deletions apps/builder/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
36 changes: 36 additions & 0 deletions apps/builder/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
Binary file added apps/builder/app/fonts/KHTeka-Light.woff
Binary file not shown.
Binary file added apps/builder/app/fonts/KHTeka-Medium.woff
Binary file not shown.
Binary file added apps/builder/app/fonts/KHTeka-Regular.woff
Binary file not shown.
Binary file added apps/builder/app/fonts/KHTekaMono-Regular.woff
Binary file not shown.
Binary file not shown.
127 changes: 127 additions & 0 deletions apps/builder/app/globals.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: transparent;

::selection {
background-color: hsl(var(--apkt-background-accent-primary) / 0.1);
}
}

@layer base {
:root {
--apkt-background-primary: 0 0% 100%;
--apkt-background-invert: 0 0% 13%;
--apkt-background-accent-primary: 207 93% 49%;

--apkt-foreground-primary: 0 0% 95%;
--apkt-foreground-secondary: 0 0% 91%;
--apkt-foreground-tertiary: 0 0% 82%;
--apkt-foreground-accent: 231 100% 70%;

--apkt-border: 0 0% 91%;
--apkt-border-secondary: 0 0% 82%;
--apkt-border-accent: 207 93% 49%;
--apkt-border-accent-certified: 44 31% 68%;
--apkt-border-success: 0.42 55% 42%;
--apkt-border-error: 0.02 73% 54%;
--apkt-border-warning: 0.09 88% 60%;

--apkt-text-primary: 0 0% 13%;
--apkt-text-secondary: 0 0% 60%;
--apkt-text-tertiary: 0 0% 42%;
--apkt-text-invert: 0 0% 100%;

--background: 0 0% 100%;
--foreground: 0 0% 3.9%;
--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;
--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 89.8%;
--input: 0 0% 89.8%;
--ring: 0 0% 3.9%;
--radius: 0.5rem;

--apkt-border-sm: 8px;
--apkt-border-md: 12px;
--apkt-border-lg: 16px;

--box-shadow-picked-up: 0px 2px 8px 2px hsl(var(--apkt-background-primary) / 0.5);
}
.dark {
--apkt-background-primary: 0 0% 13%;
--apkt-background-invert: 0 0% 100%;
--apkt-background-accent-primary: 207 93% 49%;

--apkt-foreground-primary: 0 0% 15%;
--apkt-foreground-secondary: 0 0% 16%;
--apkt-foreground-tertiary: 0 0% 21%;
--apkt-foreground-accent: 207 92.8% 48.8%;

--apkt-border: 0 0% 16%;
--apkt-border-secondary: 0 0% 31%;
--apkt-border-accent: 207 93% 49%;
--apkt-border-accent-certified: 0.12 31% 68%;
--apkt-border-success: 0.42 55% 42%;
--apkt-border-error: 0.02 73% 54%;
--apkt-border-warning: 0.09 88% 60%;

--apkt-text-primary: 0 0% 100%;
--apkt-text-secondary: 0 0% 60%;
--apkt-text-tertiary: 0 0% 73%;
--apkt-text-invert: 0 0% 13%;

--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;
--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;
--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;
--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 14.9%;
--input: 0 0% 14.9%;
--ring: 0 0% 83.1%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground h-[100svh];
}
.inset-shadow {
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}
wui-card {
box-shadow: 0 0 24px 0px rgba(0, 0, 0, 0.15);
}
.ease {
transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}
}
53 changes: 53 additions & 0 deletions apps/builder/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import type { Metadata } from 'next'
import { Toaster } from 'sonner'
import { ThemeProvider } from 'next-themes'

import { khTeka } from '@/lib/fonts'
import { cn } from '@/lib/utils'
import { ContextProvider } from '@/providers/appkit-context-provider'
import { AppKitProvider } from '@/providers/appkit-provider'
import { headers } from 'next/headers'
import './globals.css'

const title = 'AppKit | Builder'
const description = 'The full stack toolkit to build onchain app UX'

export const metadata: Metadata = {
title,
description,
openGraph: {
title,
description,
locale: 'en_US',
type: 'website'
},
icons: {
icon: [
{
url: '/favicon-dark.png',
media: '(prefers-color-scheme: light)'
},
{
url: '/favicon.png',
media: '(prefers-color-scheme: dark)'
}
]
}
}

export default async function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
const cookies = headers().get('cookie')

return (
<html lang="en">
<ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
<Toaster />
<AppKitProvider cookies={cookies}>
<ContextProvider>
<body className={cn(khTeka.className)}>{children}</body>
</ContextProvider>
</AppKitProvider>
</ThemeProvider>
</html>
)
}
26 changes: 26 additions & 0 deletions apps/builder/app/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
'use client'

import { SidebarContent } from '@/components/sidebar-content'
import { PreviewContent } from '@/components/preview-content'
import { cn } from '@/lib/utils'
import { BrandingHeader } from '@/components/branding-header'

export default function Page() {
return (
<div
className={cn(
'flex flex-col-reverse items-center md:items-start md:flex-row p-4 bg-background gap-4 pt-10 md:pt-4 h-full overflow-auto'
)}
>
<div className="flex max-w-[450px] md:max-w-[340px] w-full bg-transparent md:bg-fg-primary h-none md:h-full text-foreground p-0 md:p-6 flex-col rounded-2xl overflow-none md:overflow-y-auto h-auto pb-20">
<SidebarContent />
</div>

<div className="max-w-[360px] md:max-w-none w-full h-none md:h-full flex flex-col">
<PreviewContent />
</div>

<BrandingHeader className="flex md:hidden" />
</div>
)
}
20 changes: 20 additions & 0 deletions apps/builder/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
18 changes: 18 additions & 0 deletions apps/builder/components/appkit-button-mobile.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client'

import * as React from 'react'
import { Button } from '@/components/ui/button'

import { useAppKit } from '@reown/appkit/react'

export function AppKitButtonMobile() {
const { open } = useAppKit()

return (
<div className="fixed bottom-0 p-4 flex md:hidden w-full backdrop-blur-sm bg-background/20 z-50">
<Button variant="neutral" size="lg" className="w-full flex md:hidden" onClick={() => open()}>
Launch AppKit
</Button>
</div>
)
}
28 changes: 28 additions & 0 deletions apps/builder/components/branding-header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
'use client'

import Image from 'next/image'
import { useAppKitContext } from '@/hooks/use-appkit'
import { cn } from '@/lib/utils'

export function BrandingHeader({ className }: { className?: string }) {
const { config } = useAppKitContext()

return (
<div className={cn('flex flex-col items-center md:items-start justify-center', className)}>
<Image
src={config.themeMode === 'light' ? '/reown-logo-dark.png' : '/reown-logo.png'}
alt="Reown logo"
width={150}
height={40}
className="mb-4 md:mb-12"
/>

<div className="flex-col gap-2 items-center md:items-start mb-0 md:mb-12">
<h4 className="text-3xl text-text-primary text-center md:text-left">AppKit demo</h4>
<p className="text-sm text-text-secondary text-center md:text-left">
Use our AppKit demo to test and design onchain UX
</p>
</div>
</div>
)
}
Loading

0 comments on commit 68d1614

Please sign in to comment.