From 6b0de002f2e947268465ca148be36d74b6579dda Mon Sep 17 00:00:00 2001 From: luca Date: Sun, 26 Jan 2025 15:05:53 +0800 Subject: [PATCH 1/2] feat: add hyperweb UI --- templates/hyperweb/.gitignore | 3 + templates/hyperweb/package.json | 31 +- templates/hyperweb/ui/.eslintrc.json | 3 + .../hyperweb/ui/components/common/Footer.tsx | 160 + .../hyperweb/ui/components/common/Header.tsx | 64 + .../hyperweb/ui/components/common/Layout.tsx | 19 + .../hyperweb/ui/components/common/index.ts | 3 + templates/hyperweb/ui/components/index.ts | 2 + .../ui/components/wallet/Astronaut.tsx | 156 + .../hyperweb/ui/components/wallet/Chain.tsx | 50 + .../hyperweb/ui/components/wallet/Connect.tsx | 68 + .../hyperweb/ui/components/wallet/User.tsx | 27 + .../hyperweb/ui/components/wallet/Wallet.tsx | 95 + .../hyperweb/ui/components/wallet/Warning.tsx | 39 + .../hyperweb/ui/components/wallet/index.ts | 1 + templates/hyperweb/ui/config/defaults.ts | 1 + templates/hyperweb/ui/config/index.ts | 2 + templates/hyperweb/ui/config/projects.ts | 56 + templates/hyperweb/ui/next.config.js | 7 + templates/hyperweb/ui/pages/_app.tsx | 46 + templates/hyperweb/ui/pages/index.tsx | 11 + templates/hyperweb/ui/public/favicon.ico | Bin 0 -> 14037 bytes templates/hyperweb/ui/styles/globals.css | 26 + templates/hyperweb/ui/tsconfig.json | 24 + templates/hyperweb/ui/utils/index.ts | 11 + templates/hyperweb/yarn.lock | 15635 ++++++++++++---- 26 files changed, 12699 insertions(+), 3841 deletions(-) create mode 100644 templates/hyperweb/ui/.eslintrc.json create mode 100644 templates/hyperweb/ui/components/common/Footer.tsx create mode 100644 templates/hyperweb/ui/components/common/Header.tsx create mode 100644 templates/hyperweb/ui/components/common/Layout.tsx create mode 100644 templates/hyperweb/ui/components/common/index.ts create mode 100644 templates/hyperweb/ui/components/index.ts create mode 100644 templates/hyperweb/ui/components/wallet/Astronaut.tsx create mode 100644 templates/hyperweb/ui/components/wallet/Chain.tsx create mode 100644 templates/hyperweb/ui/components/wallet/Connect.tsx create mode 100644 templates/hyperweb/ui/components/wallet/User.tsx create mode 100644 templates/hyperweb/ui/components/wallet/Wallet.tsx create mode 100644 templates/hyperweb/ui/components/wallet/Warning.tsx create mode 100644 templates/hyperweb/ui/components/wallet/index.ts create mode 100644 templates/hyperweb/ui/config/defaults.ts create mode 100644 templates/hyperweb/ui/config/index.ts create mode 100644 templates/hyperweb/ui/config/projects.ts create mode 100644 templates/hyperweb/ui/next.config.js create mode 100644 templates/hyperweb/ui/pages/_app.tsx create mode 100644 templates/hyperweb/ui/pages/index.tsx create mode 100644 templates/hyperweb/ui/public/favicon.ico create mode 100644 templates/hyperweb/ui/styles/globals.css create mode 100644 templates/hyperweb/ui/tsconfig.json create mode 100644 templates/hyperweb/ui/utils/index.ts diff --git a/templates/hyperweb/.gitignore b/templates/hyperweb/.gitignore index cd4e6de6..132a4521 100644 --- a/templates/hyperweb/.gitignore +++ b/templates/hyperweb/.gitignore @@ -4,3 +4,6 @@ lerna-debug.log **/.idea + +**/.next +next-env.d.ts \ No newline at end of file diff --git a/templates/hyperweb/package.json b/templates/hyperweb/package.json index 6d1608db..a86b3da4 100644 --- a/templates/hyperweb/package.json +++ b/templates/hyperweb/package.json @@ -17,6 +17,10 @@ "directory": "dist" }, "scripts": { + "dev": "next dev ./ui", + "start": "next start ./ui", + "lint": "next lint ./ui", + "build:ui": "next build ./ui", "clean": "rimraf dist/contracts/**", "build": "ts-node scripts/build.ts", "test": "jest --verbose --bail", @@ -28,19 +32,43 @@ "starship": "starship --config configs/local.yaml", "starship:ci": "starship --config configs/ci.yaml" }, + "resolutions": { + "react": "18.2.0", + "react-dom": "18.2.0", + "@types/react": "18.0.25", + "@types/react-dom": "18.0.9" + }, + "dependencies": { + "@chain-registry/types": "^0.50.18", + "@interchain-kit/core": "0.0.1-beta.62", + "@interchain-kit/keplr-extension": "0.0.1-beta.62", + "@interchain-kit/leap-extension": "0.0.1-beta.62", + "@interchain-kit/react": "0.0.1-beta.62", + "@interchain-ui/react": "1.26.1", + "@interchain-ui/react-no-ssr": "^0.1.6", + "interchain-kit": "0.0.1-beta.62", + "next": "^13", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-icons": "4.6.0" + }, "devDependencies": { "@hyperweb/build": "^0.0.2", "@starship-ci/cli": "^2.10.1", "@types/jest": "^29.5.11", "@types/node": "^22.7.4", + "@types/react": "18.2.0", + "@types/react-dom": "18.2.0", "@typescript-eslint/eslint-plugin": "^6.18.1", "@typescript-eslint/parser": "^6.18.1", "eslint": "^8.56.0", + "eslint-config-next": "13.0.5", "eslint-config-prettier": "^9.1.0", "eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-unused-imports": "^3.0.0", - "jest": "^29.6.2", + "generate-lockfile": "0.0.12", "hyperwebjs": "0.0.4", + "jest": "^29.6.2", "prettier": "^3.0.2", "rimraf": "4.4.1", "starshipjs": "^2.4.1", @@ -49,5 +77,6 @@ "typescript": "^5.1.6" }, "keywords": [], + "packageManager": "yarn@4.3.0", "gitHead": "d7557df95ccbe65022679a20d52e2f3bfc8af6f5" } diff --git a/templates/hyperweb/ui/.eslintrc.json b/templates/hyperweb/ui/.eslintrc.json new file mode 100644 index 00000000..bffb357a --- /dev/null +++ b/templates/hyperweb/ui/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/templates/hyperweb/ui/components/common/Footer.tsx b/templates/hyperweb/ui/components/common/Footer.tsx new file mode 100644 index 00000000..8ddc7a59 --- /dev/null +++ b/templates/hyperweb/ui/components/common/Footer.tsx @@ -0,0 +1,160 @@ +import { + Box, + Divider, + Icon, + Link, + Stack, + Text, + useColorModeValue, +} from "@interchain-ui/react"; +import { dependencies, products, Project } from "@/config"; + +function Product({ name, desc, link }: Project) { + return ( + + + + {name} → + + + {desc} + + + + ); +} + +function Dependency({ name, desc, link }: Project) { + return ( + + + + + + + + + {name} + + + {desc} + + + + + ); +} + +export function Footer() { + return ( + <> + + {products.map((product) => ( + + ))} + + + {dependencies.map((dependency) => ( + + ))} + + + + + + Built with + + Cosmology + + + + ); +} diff --git a/templates/hyperweb/ui/components/common/Header.tsx b/templates/hyperweb/ui/components/common/Header.tsx new file mode 100644 index 00000000..ed86271a --- /dev/null +++ b/templates/hyperweb/ui/components/common/Header.tsx @@ -0,0 +1,64 @@ +import { + Box, + Button, + Icon, + Link, + Text, + useColorModeValue, + useTheme, +} from "@interchain-ui/react"; + +const stacks = ["Interchain Kit", "Next.js", "InterchainJS"]; + +export function Header() { + const { theme, setTheme } = useTheme(); + + const toggleColorMode = () => { + setTheme(theme === "light" ? "dark" : "light"); + }; + + return ( + <> + + + + + + + Create Hyperweb App + + + + Welcome to  + + + {stacks.join(" + ")} + + + + + ); +} diff --git a/templates/hyperweb/ui/components/common/Layout.tsx b/templates/hyperweb/ui/components/common/Layout.tsx new file mode 100644 index 00000000..f8000d60 --- /dev/null +++ b/templates/hyperweb/ui/components/common/Layout.tsx @@ -0,0 +1,19 @@ +import Head from "next/head"; +import { Container } from "@interchain-ui/react"; +import { Header } from "./Header"; +import { Footer } from "./Footer"; + +export function Layout({ children }: { children: React.ReactNode }) { + return ( + + + Create Hyperweb App + + + +
+ {children} +