d-bis/js
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(wallet-ui): initialize project (#3477)

Browse Source 
<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on adding Thirdweb Wallet UI to the project, configuring Next.js, Tailwind CSS, and PostCSS, setting up Biome, and defining TypeScript settings.

### Detailed summary
- Added Thirdweb Wallet UI
- Configured Next.js, Tailwind CSS, and PostCSS
- Set up Biome configuration
- Defined TypeScript settings for Wallet UI
- Added global CSS styles for the app
- Updated dependencies and scripts in package.json

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
This commit is contained in:
gregfromstl
2024-06-28 23:42:02 +00:00
parent be9118a04f
commit 31d8b830f2
16 changed files with 363 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/config.json
+1
View File
@@ -19,6 +19,7 @@
"runtimes-node-module",
"playground-web",
"thirdweb-dashboard",
"wallet-ui",
"@thirdweb-dev/auth",
"@thirdweb-dev/chains",
"@thirdweb-dev/cli",
apps/playground-web/package.json
+1 -1
View File
@@ -39,7 +39,7 @@
"eslint-config-next": "14.2.4",
"eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"tailwindcss": "^3.4.4",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.5.2"
}
apps/wallet-ui/.gitignore
+36
View File
@@ -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*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
apps/wallet-ui/README.md
+1
View File
@@ -0,0 +1 @@
# thirdweb Wallet UI
apps/wallet-ui/biome.json
+7
View File
@@ -0,0 +1,7 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.1/schema.json",
"extends": ["../../biome.json"],
"files": {
"ignore": []
}
}
apps/wallet-ui/next.config.mjs
+4
View File
@@ -0,0 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
export default nextConfig;
apps/wallet-ui/package.json
+28
View File
@@ -0,0 +1,28 @@
{
"name": "wallet-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "biome check ./src",
"fix": "biome check ./src --fix"
},
"dependencies": {
"next": "14.2.4",
"react": "^18",
"react-dom": "^18",
"thirdweb": "workspace:*"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.4",
"postcss": "^8",
"tailwindcss": "^3.4.4",
"typescript": "^5"
}
}
apps/wallet-ui/postcss.config.mjs
+8
View File
@@ -0,0 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
tailwindcss: {},
},
};
export default config;
apps/wallet-ui/src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

apps/wallet-ui/src/app/globals.css
+70
View File
@@ -0,0 +1,70 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--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: 240 10% 3.9%;
--primary: 215.88 100% 60%;
--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: 215.88 100% 60%;
--radius: 0.5rem;
}
.dark {
--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: 215.88 100% 60%;
--primary-foreground: 0 0% 98%;
--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: 215.88 100% 60%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/* Optional, if you also want font styles */
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
apps/wallet-ui/src/app/layout.tsx
+22
View File
@@ -0,0 +1,22 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Thirdweb Wallet UI",
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
apps/wallet-ui/src/app/page.tsx
+7
View File
@@ -0,0 +1,7 @@
export default function Home() {
return (
<main className="flex flex-col items-center justify-between min-h-screen p-24">
Home
</main>
);
}
apps/wallet-ui/tailwind.config.ts
+78
View File
@@ -0,0 +1,78 @@
import { fontFamily } from "tailwindcss/defaultTheme";
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["./src/**/*.{ts,tsx}"],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
fontFamily: {
sans: ["var(--font-sans)", ...fontFamily.sans],
mono: ["var(--font-mono)", ...fontFamily.mono],
},
},
},
plugins: [require("tailwindcss-animate")],
};
apps/wallet-ui/tsconfig.json
+26
View File
@@ -0,0 +1,26 @@
{
"compilerOptions": {
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}
package.json
+2
View File
@@ -14,6 +14,8 @@
"lint": "turbo run lint",
"lint:legacy": "pnpm lint",
"fix": "turbo run fix",
"wallet-ui": "turbo run dev --filter=./apps/wallet-ui --filter=./packages/thirdweb",
"wallet-ui:build": "turbo run build --filter=./apps/wallet-ui --filter=./packages/thirdweb",
"playground": "turbo run dev --filter=./apps/playground-web --filter=./packages/thirdweb",
"playground:build": "turbo run build --filter=./apps/playground-web",
"dashboard": "turbo run dev --filter=./apps/dashboard --filter=./packages/thirdweb",
pnpm-lock.yaml
Generated
+72 -37
View File
@@ -589,15 +589,55 @@ importers:
specifier: ^8
version: 8.4.38
tailwindcss:
specifier: ^3.4.1
version: 3.4.3([email protected](@types/[email protected])([email protected]))
specifier: ^3.4.4
version: 3.4.4([email protected](@types/[email protected])([email protected]))
tailwindcss-animate:
specifier: ^1.0.7
version: 1.0.7([email protected].3([email protected](@types/[email protected])([email protected])))
version: 1.0.7([email protected].4([email protected](@types/[email protected])([email protected])))
typescript:
specifier: 5.5.2
version: 5.5.2
apps/wallet-ui:
dependencies:
next:
specifier: 14.2.4
version: 14.2.4(@babel/[email protected])(@opentelemetry/[email protected])(@playwright/[email protected])([email protected]([email protected]))([email protected])
react:
specifier: ^18
version: 18.3.1
react-dom:
specifier: ^18
version: 18.3.1([email protected])
thirdweb:
specifier: workspace:*
version: link:../../packages/thirdweb
devDependencies:
'@types/node':
specifier: ^20
version: 20.14.6
'@types/react':
specifier: ^18
version: 18.3.3
'@types/react-dom':
specifier: ^18
version: 18.3.0
eslint:
specifier: ^8
version: 8.57.0
eslint-config-next:
specifier: 14.2.4
version: 14.2.4([email protected])([email protected])
postcss:
specifier: ^8
version: 8.4.38
tailwindcss:
specifier: ^3.4.4
version: 3.4.4([email protected](@types/[email protected])([email protected]))
typescript:
specifier: ^5
version: 5.5.2
legacy_e2e/bundlers/esbuild:
dependencies:
'@thirdweb-dev/auth':
@@ -16394,11 +16434,6 @@ packages:
peerDependencies:
tailwindcss: '>=3.0.0 || insiders'
[email protected]:
resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
engines: {node: '>=14.0.0'}
hasBin: true
[email protected]:
resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==}
engines: {node: '>=14.0.0'}
@@ -38671,40 +38706,13 @@ snapshots:
dependencies:
'@babel/runtime': 7.24.5
[email protected]([email protected]([email protected](@types/[email protected])([email protected]))):
dependencies:
tailwindcss: 3.4.3([email protected](@types/[email protected])([email protected]))
[email protected]([email protected]([email protected](@swc/[email protected])(@types/[email protected])([email protected]))):
dependencies:
tailwindcss: 3.4.4([email protected](@swc/[email protected])(@types/[email protected])([email protected]))
[email protected].3([email protected](@types/[email protected])([email protected])):
tailwindcss[email protected](tailwindcss@3.4.4([email protected](@types/[email protected])([email protected]))):
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2
chokidar: 3.6.0
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.3.2
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.21.0
lilconfig: 2.1.0
micromatch: 4.0.5
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.1
postcss: 8.4.38
postcss-import: 15.1.0([email protected])
postcss-js: 4.0.1([email protected])
postcss-load-config: 4.0.2([email protected])([email protected](@types/[email protected])([email protected]))
postcss-nested: 6.0.1([email protected])
postcss-selector-parser: 6.0.16
resolve: 1.22.8
sucrase: 3.35.0
transitivePeerDependencies:
- ts-node
tailwindcss: 3.4.4([email protected](@types/[email protected])([email protected]))
[email protected]([email protected](@swc/[email protected])(@types/[email protected])([email protected])):
dependencies:
@@ -38733,6 +38741,33 @@ snapshots:
transitivePeerDependencies:
- ts-node
[email protected]([email protected](@types/[email protected])([email protected])):
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2
chokidar: 3.6.0
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.3.2
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.21.0
lilconfig: 2.1.0
micromatch: 4.0.5
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.1
postcss: 8.4.38
postcss-import: 15.1.0([email protected])
postcss-js: 4.0.1([email protected])
postcss-load-config: 4.0.2([email protected])([email protected](@types/[email protected])([email protected]))
postcss-nested: 6.0.1([email protected])
postcss-selector-parser: 6.0.16
resolve: 1.22.8
sucrase: 3.35.0
transitivePeerDependencies:
- ts-node
[email protected]: {}
[email protected]: {}