hyperweb-io · marslavish · Jan 27, 2025 · Jan 26, 2025 · Jan 26, 2025
diff --git a/README.md b/README.md
@@ -15,7 +15,7 @@ Set up a Hyperweb app by running one command ⚛️
 - [Overview](#overview)
 - [Education & Resources](#education--resources)
 - [Creating an App](#creating-an-app)
-- [Examples](#examples)
+- [Templates](#templates)
 - [Options](#options)
 - [Development](#development)
 
@@ -53,15 +53,15 @@ Now your app should be running on `http://localhost:3000`!
 
 ### Get Started Immediately
 
-You don’t need to install or configure cosmjs, keplr, nextjs, webpack or Babel.
+You don't need to install or configure cosmjs, keplr, nextjs, webpack or Babel.
 
 Everything is preconfigured, ready-to-go, so you can focus on your code!
 
-- ⚡️ Connect easily to 20+ wallets via [Cosmos Kit](https://github.com/cosmology-tech/cosmos-kit) — including Ledger, Keplr, Cosmostation, Leap, Trust Wallet, OKX, XDEFI, Exodus, Wallet Connect and more!
+- ⚡️ Connect easily to 20+ wallets via [Cosmos Kit](https://github.com/cosmology-tech/cosmos-kit) — including Ledger, Keplr, Cosmostation, Leap, Trust Wallet, OKX, XDEFI, Exodus, Wallet Connect and more!
 - ⚛️ Sign and broadcast with [cosmjs](https://github.com/cosmos/cosmjs) stargate + cosmwasm signers
 <!-- - 🎨 Build awesome UI with [Interchain UI](https://cosmology.zone/products/interchain-ui) and [Explore Components](https://cosmology.zone/components) -->
 - 🛠 Render pages with [next.js](https://nextjs.org/) hybrid static & server rendering
-<!-- - 📝 Leverage [chain-registry](https://github.com/cosmology-tech/chain-registry) for Chain and Asset info for all Cosmos chains -->
+<!-- - 📝 Leverage [chain-registry](https://github.com/cosmology-tech/chain-registry) for Chain and Asset info for all Cosmos chains -->
 - 🚀 Ensure reliability with [Starship](https://github.com/cosmology-tech/starship), our end-to-end testing CI/CD project for GitHub Actions, streamlining continuous integration and delivery across the interchain ecosystem.
 
 <!-- ## Education & Resources
@@ -110,18 +110,63 @@ npm init hyperweb-app
 yarn create hyperweb-app
 ```
 
-## Options
+## Templates
+
+The `create-hyperweb-app` tool provides carefully crafted templates to help you understand and test various features and integrations. By executing the templates, you can quickly see how to implement specific functionalities in your Cosmos app.
+
+```
+cha --template
+```
+
+If you know the template name, you can do
+
+```
+cha --template <template-name>
+```
+
+Alternatively, you can use the shorthand `-t` flag to achieve the same:
+
+```
+cha -t <template-name>
+```
+
+This command will generate a new project configured with the selected template, allowing you to dive into the code and functionality right away.
 
-| Argument             | Description                                    | Default    |
-|----------------------|------------------------------------------------|------------|
-| `--repo`             | Set custom repository for cha templates        | None       |
-| `--install`          | Automatically install dependencies             | `true`     |
-| `--printCmd`         | Print the command to run after setup           | `true`     |
-| `-n`, `--name`       | Provide a project name                         | None       |
-| `-e`, `--example`    | Provide an example name                        | None       |
-| `-t`, `--template`   | Define the template to use                     | None       |
-| `-b`, `--fromBranch` | Specify the branch to use for cloning          | None       |
+### Hyperweb
+
+<p align="center" width="100%">
+    <img height="48" src="https://user-images.githubusercontent.com/545047/186589196-e75c9540-86a7-4a71-8096-207be9a4216f.svg" />
+</p>
+
+Facilitate the development of decentralized applications by enabling developers to write and compile TypeScript smart contracts locally.
+
+```
+cha --name hyperweb-template --template hyperweb
+```
+
+### Chain Admin
+
+<p align="center" width="100%">
+    <img height="48" src="https://user-images.githubusercontent.com/545047/186589196-e75c9540-86a7-4a71-8096-207be9a4216f.svg" />
+</p>
+
+Manage and integrate multiple modules such as staking, voting and asset-list within your application. This template provides a comprehensive setup for building robust and feature-rich Cosmos apps.
+
+```
+cha --name chain-admin-template --template chain-admin
+```
+
+## Options
 
+| Argument             | Description                             | Default |
+| -------------------- | --------------------------------------- | ------- |
+| `--repo`             | Set custom repository for cha templates | None    |
+| `--install`          | Automatically install dependencies      | `true`  |
+| `--printCmd`         | Print the command to run after setup    | `true`  |
+| `-n`, `--name`       | Provide a project name                  | None    |
+| `-e`, `--example`    | Provide an example name                 | None    |
+| `-t`, `--template`   | Define the template to use              | None    |
+| `-b`, `--fromBranch` | Specify the branch to use for cloning   | None    |
 
 ## Related
 
@@ -137,10 +182,10 @@ Checkout these related projects:
 
 ## Credits
 
-🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
+🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
 
 ## Disclaimer
 
-AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
+AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED "AS IS", AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
 
 No developer or entity involved in creating this software will be liable for any claims or damages whatsoever associated with your use, inability to use, or your interaction with other users of the code, including any direct, indirect, incidental, special, exemplary, punitive or consequential damages, or loss of profits, cryptocurrencies, tokens, or anything else of value.
diff --git a/templates/hyperweb/.gitignore b/templates/hyperweb/.gitignore
@@ -4,3 +4,6 @@
 lerna-debug.log
 
 **/.idea
+
+**/.next
+next-env.d.ts
diff --git 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": "[email protected]",
   "gitHead": "d7557df95ccbe65022679a20d52e2f3bfc8af6f5"
 }
diff --git a/templates/hyperweb/ui/.eslintrc.json 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
@@ -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 (
+    <Link href={link} target="_blank" underline={false}>
+      <Stack
+        space="$5"
+        direction="vertical"
+        attributes={{
+          height: "$full",
+          minHeight: "$24",
+          padding: "$9",
+          justifyContent: "center",
+          borderRadius: "$xl",
+          color: {
+            base: "$text",
+            hover: useColorModeValue("$purple600", "$purple300"),
+          },
+          boxShadow: {
+            base: useColorModeValue(
+              "0 2px 5px #ccc",
+              "0 1px 3px #727272, 0 2px 12px -2px #2f2f2f",
+            ),
+            hover: useColorModeValue(
+              "0 2px 5px #bca5e9",
+              "0 0 3px rgba(150, 75, 213, 0.8), 0 3px 8px -2px rgba(175, 89, 246, 0.9)",
+            ),
+          },
+        }}
+      >
+        <Text as="h2" fontSize="$xl" color="inherit" attributes={{ margin: 0 }}>
+          {name}&ensp;&rarr;
+        </Text>
+        <Text
+          color="inherit"
+          as="p"
+          fontSize="$md"
+          fontWeight="$normal"
+          attributes={{ marginY: "$1" }}
+        >
+          {desc}
+        </Text>
+      </Stack>
+    </Link>
+  );
+}
+
+function Dependency({ name, desc, link }: Project) {
+  return (
+    <Link href={link} target="_blank" underline={false}>
+      <Stack
+        key={name}
+        space="$6"
+        direction="horizontal"
+        attributes={{
+          height: "$full",
+          padding: "$8",
+          justifyContent: "center",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: useColorModeValue("$blackAlpha200", "$whiteAlpha100"),
+          borderRadius: "$xl",
+          boxShadow: {
+            base: "none",
+            hover: useColorModeValue(
+              "0 2px 5px #ccc",
+              "0 1px 3px #727272, 0 2px 12px -2px #2f2f2f",
+            ),
+          },
+        }}
+      >
+        <Box
+          color={useColorModeValue("$primary500", "$primary200")}
+          flex="0 0 auto"
+        >
+          <Icon name="link" size="$md" attributes={{ mt: "$2" }} />
+        </Box>
+
+        <Stack space="$2" direction="vertical">
+          <Text
+            as="p"
+            fontSize="$lg"
+            fontWeight="$semibold"
+            attributes={{ marginY: "$1" }}
+          >
+            {name}
+          </Text>
+          <Text
+            as="p"
+            fontSize="$md"
+            fontWeight="$light"
+            attributes={{
+              color: useColorModeValue("$blackAlpha700", "$whiteAlpha700"),
+              lineHeight: "$short",
+              marginY: "$1",
+            }}
+          >
+            {desc}
+          </Text>
+        </Stack>
+      </Stack>
+    </Link>
+  );
+}
+
+export function Footer() {
+  return (
+    <>
+      <Box
+        display="grid"
+        gridTemplateColumns={{
+          tablet: "repeat(2, 1fr)",
+          desktop: "repeat(3, 1fr)",
+        }}
+        mb="$16"
+        gap="$12"
+      >
+        {products.map((product) => (
+          <Product key={product.name} {...product}></Product>
+        ))}
+      </Box>
+      <Box
+        display="grid"
+        gridTemplateColumns={{ tablet: "repeat(3, 1fr)" }}
+        gap="$12"
+        mb="$19"
+      >
+        {dependencies.map((dependency) => (
+          <Dependency key={dependency.name} {...dependency}></Dependency>
+        ))}
+      </Box>
+      <Box mb="$6">
+        <Divider />
+      </Box>
+      <Stack
+        direction="horizontal"
+        space="$2"
+        attributes={{
+          justifyContent: "center",
+          opacity: 0.5,
+          fontSize: "$sm",
+        }}
+      >
+        <Text>Built with</Text>
+        <Link href="https://cosmology.zone/" target="_blank">
+          Cosmology
+        </Link>
+      </Stack>
+    </>
+  );
+}