Skip to content

Commit 51ee01a

Browse files
marslavishmarslavish
authored
Merge pull request #20 from hyperweb-io/feat/hyperweb-ui
Add hyperweb UI
2 parents a2cfe4c + fb0a3a5 commit 51ee01a

27 files changed

+12758
-3857
lines changed

‎README.md

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Set up a Hyperweb app by running one command ⚛️
1515
- [Overview](#overview)
1616
- [Education & Resources](#education--resources)
1717
- [Creating an App](#creating-an-app)
18-
- [Examples](#examples)
18+
- [Templates](#templates)
1919
- [Options](#options)
2020
- [Development](#development)
2121

@@ -53,15 +53,15 @@ Now your app should be running on `http://localhost:3000`!
5353

5454
### Get Started Immediately
5555

56-
You don’t need to install or configure cosmjs, keplr, nextjs, webpack or Babel.
56+
You don't need to install or configure cosmjs, keplr, nextjs, webpack or Babel.
5757

5858
Everything is preconfigured, ready-to-go, so you can focus on your code!
5959

60-
- ⚡️ 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!
60+
- ⚡️ 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!
6161
- ⚛️ Sign and broadcast with [cosmjs](https://github.com/cosmos/cosmjs) stargate + cosmwasm signers
6262
<!-- - 🎨 Build awesome UI with [Interchain UI](https://cosmology.zone/products/interchain-ui) and [Explore Components](https://cosmology.zone/components) -->
6363
- 🛠 Render pages with [next.js](https://nextjs.org/) hybrid static & server rendering
64-
<!-- - 📝 Leverage [chain-registry](https://github.com/cosmology-tech/chain-registry) for Chain and Asset info for all Cosmos chains -->
64+
<!-- - 📝 Leverage [chain-registry](https://github.com/cosmology-tech/chain-registry) for Chain and Asset info for all Cosmos chains -->
6565
- 🚀 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.
6666

6767
<!-- ## Education & Resources
@@ -110,18 +110,63 @@ npm init hyperweb-app
110110
yarn create hyperweb-app
111111
```
112112

113-
## Options
113+
## Templates
114+
115+
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.
116+
117+
```
118+
cha --template
119+
```
120+
121+
If you know the template name, you can do
122+
123+
```
124+
cha --template <template-name>
125+
```
126+
127+
Alternatively, you can use the shorthand `-t` flag to achieve the same:
128+
129+
```
130+
cha -t <template-name>
131+
```
132+
133+
This command will generate a new project configured with the selected template, allowing you to dive into the code and functionality right away.
114134

115-
| Argument | Description | Default |
116-
|----------------------|------------------------------------------------|------------|
117-
| `--repo` | Set custom repository for cha templates | None |
118-
| `--install` | Automatically install dependencies | `true` |
119-
| `--printCmd` | Print the command to run after setup | `true` |
120-
| `-n`, `--name` | Provide a project name | None |
121-
| `-e`, `--example` | Provide an example name | None |
122-
| `-t`, `--template` | Define the template to use | None |
123-
| `-b`, `--fromBranch` | Specify the branch to use for cloning | None |
135+
### Hyperweb
136+
137+
<p align="center" width="100%">
138+
<img height="48" src="https://user-images.githubusercontent.com/545047/186589196-e75c9540-86a7-4a71-8096-207be9a4216f.svg" />
139+
</p>
140+
141+
Facilitate the development of decentralized applications by enabling developers to write and compile TypeScript smart contracts locally.
142+
143+
```
144+
cha --name hyperweb-template --template hyperweb
145+
```
146+
147+
### Chain Admin
148+
149+
<p align="center" width="100%">
150+
<img height="48" src="https://user-images.githubusercontent.com/545047/186589196-e75c9540-86a7-4a71-8096-207be9a4216f.svg" />
151+
</p>
152+
153+
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.
154+
155+
```
156+
cha --name chain-admin-template --template chain-admin
157+
```
158+
159+
## Options
124160

161+
| Argument | Description | Default |
162+
| -------------------- | --------------------------------------- | ------- |
163+
| `--repo` | Set custom repository for cha templates | None |
164+
| `--install` | Automatically install dependencies | `true` |
165+
| `--printCmd` | Print the command to run after setup | `true` |
166+
| `-n`, `--name` | Provide a project name | None |
167+
| `-e`, `--example` | Provide an example name | None |
168+
| `-t`, `--template` | Define the template to use | None |
169+
| `-b`, `--fromBranch` | Specify the branch to use for cloning | None |
125170

126171
## Related
127172

@@ -137,10 +182,10 @@ Checkout these related projects:
137182

138183
## Credits
139184

140-
🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
185+
🛠 Built by Hyperweb (formerly Cosmology) — if you like our tools, please checkout and contribute to [our github ⚛️](https://github.com/hyperweb-io)
141186

142187
## Disclaimer
143188

144-
AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED “AS IS”, AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
189+
AS DESCRIBED IN THE LICENSES, THE SOFTWARE IS PROVIDED "AS IS", AT YOUR OWN RISK, AND WITHOUT WARRANTIES OF ANY KIND.
145190

146191
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.

‎templates/hyperweb/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,6 @@
44
lerna-debug.log
55

66
**/.idea
7+
8+
**/.next
9+
next-env.d.ts

‎templates/hyperweb/package.json

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
"directory": "dist"
1818
},
1919
"scripts": {
20+
"dev": "next dev ./ui",
21+
"start": "next start ./ui",
22+
"lint": "next lint ./ui",
23+
"build:ui": "next build ./ui",
2024
"clean": "rimraf dist/contracts/**",
2125
"build": "ts-node scripts/build.ts",
2226
"test": "jest --verbose --bail",
@@ -28,19 +32,43 @@
2832
"starship": "starship --config configs/local.yaml",
2933
"starship:ci": "starship --config configs/ci.yaml"
3034
},
35+
"resolutions": {
36+
"react": "18.2.0",
37+
"react-dom": "18.2.0",
38+
"@types/react": "18.0.25",
39+
"@types/react-dom": "18.0.9"
40+
},
41+
"dependencies": {
42+
"@chain-registry/types": "^0.50.18",
43+
"@interchain-kit/core": "0.0.1-beta.62",
44+
"@interchain-kit/keplr-extension": "0.0.1-beta.62",
45+
"@interchain-kit/leap-extension": "0.0.1-beta.62",
46+
"@interchain-kit/react": "0.0.1-beta.62",
47+
"@interchain-ui/react": "1.26.1",
48+
"@interchain-ui/react-no-ssr": "^0.1.6",
49+
"interchain-kit": "0.0.1-beta.62",
50+
"next": "^13",
51+
"react": "18.2.0",
52+
"react-dom": "18.2.0",
53+
"react-icons": "4.6.0"
54+
},
3155
"devDependencies": {
3256
"@hyperweb/build": "^0.0.2",
3357
"@starship-ci/cli": "^2.10.1",
3458
"@types/jest": "^29.5.11",
3559
"@types/node": "^22.7.4",
60+
"@types/react": "18.2.0",
61+
"@types/react-dom": "18.2.0",
3662
"@typescript-eslint/eslint-plugin": "^6.18.1",
3763
"@typescript-eslint/parser": "^6.18.1",
3864
"eslint": "^8.56.0",
65+
"eslint-config-next": "13.0.5",
3966
"eslint-config-prettier": "^9.1.0",
4067
"eslint-plugin-simple-import-sort": "^10.0.0",
4168
"eslint-plugin-unused-imports": "^3.0.0",
42-
"jest": "^29.6.2",
69+
"generate-lockfile": "0.0.12",
4370
"hyperwebjs": "0.0.4",
71+
"jest": "^29.6.2",
4472
"prettier": "^3.0.2",
4573
"rimraf": "4.4.1",
4674
"starshipjs": "^2.4.1",
@@ -49,5 +77,6 @@
4977
"typescript": "^5.1.6"
5078
},
5179
"keywords": [],
80+
"packageManager": "[email protected]",
5281
"gitHead": "d7557df95ccbe65022679a20d52e2f3bfc8af6f5"
5382
}

‎templates/hyperweb/ui/.eslintrc.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎templates/hyperweb/ui/components/common/Footer.tsx

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
import {
2+
Box,
3+
Divider,
4+
Icon,
5+
Link,
6+
Stack,
7+
Text,
8+
useColorModeValue,
9+
} from "@interchain-ui/react";
10+
import { dependencies, products, Project } from "@/config";
11+
12+
function Product({ name, desc, link }: Project) {
13+
return (
14+
<Link href={link} target="_blank" underline={false}>
15+
<Stack
16+
space="$5"
17+
direction="vertical"
18+
attributes={{
19+
height: "$full",
20+
minHeight: "$24",
21+
padding: "$9",
22+
justifyContent: "center",
23+
borderRadius: "$xl",
24+
color: {
25+
base: "$text",
26+
hover: useColorModeValue("$purple600", "$purple300"),
27+
},
28+
boxShadow: {
29+
base: useColorModeValue(
30+
"0 2px 5px #ccc",
31+
"0 1px 3px #727272, 0 2px 12px -2px #2f2f2f",
32+
),
33+
hover: useColorModeValue(
34+
"0 2px 5px #bca5e9",
35+
"0 0 3px rgba(150, 75, 213, 0.8), 0 3px 8px -2px rgba(175, 89, 246, 0.9)",
36+
),
37+
},
38+
}}
39+
>
40+
<Text as="h2" fontSize="$xl" color="inherit" attributes={{ margin: 0 }}>
41+
{name}&ensp;&rarr;
42+
</Text>
43+
<Text
44+
color="inherit"
45+
as="p"
46+
fontSize="$md"
47+
fontWeight="$normal"
48+
attributes={{ marginY: "$1" }}
49+
>
50+
{desc}
51+
</Text>
52+
</Stack>
53+
</Link>
54+
);
55+
}
56+
57+
function Dependency({ name, desc, link }: Project) {
58+
return (
59+
<Link href={link} target="_blank" underline={false}>
60+
<Stack
61+
key={name}
62+
space="$6"
63+
direction="horizontal"
64+
attributes={{
65+
height: "$full",
66+
padding: "$8",
67+
justifyContent: "center",
68+
borderWidth: "1px",
69+
borderStyle: "solid",
70+
borderColor: useColorModeValue("$blackAlpha200", "$whiteAlpha100"),
71+
borderRadius: "$xl",
72+
boxShadow: {
73+
base: "none",
74+
hover: useColorModeValue(
75+
"0 2px 5px #ccc",
76+
"0 1px 3px #727272, 0 2px 12px -2px #2f2f2f",
77+
),
78+
},
79+
}}
80+
>
81+
<Box
82+
color={useColorModeValue("$primary500", "$primary200")}
83+
flex="0 0 auto"
84+
>
85+
<Icon name="link" size="$md" attributes={{ mt: "$2" }} />
86+
</Box>
87+
88+
<Stack space="$2" direction="vertical">
89+
<Text
90+
as="p"
91+
fontSize="$lg"
92+
fontWeight="$semibold"
93+
attributes={{ marginY: "$1" }}
94+
>
95+
{name}
96+
</Text>
97+
<Text
98+
as="p"
99+
fontSize="$md"
100+
fontWeight="$light"
101+
attributes={{
102+
color: useColorModeValue("$blackAlpha700", "$whiteAlpha700"),
103+
lineHeight: "$short",
104+
marginY: "$1",
105+
}}
106+
>
107+
{desc}
108+
</Text>
109+
</Stack>
110+
</Stack>
111+
</Link>
112+
);
113+
}
114+
115+
export function Footer() {
116+
return (
117+
<>
118+
<Box
119+
display="grid"
120+
gridTemplateColumns={{
121+
tablet: "repeat(2, 1fr)",
122+
desktop: "repeat(3, 1fr)",
123+
}}
124+
mb="$16"
125+
gap="$12"
126+
>
127+
{products.map((product) => (
128+
<Product key={product.name} {...product}></Product>
129+
))}
130+
</Box>
131+
<Box
132+
display="grid"
133+
gridTemplateColumns={{ tablet: "repeat(3, 1fr)" }}
134+
gap="$12"
135+
mb="$19"
136+
>
137+
{dependencies.map((dependency) => (
138+
<Dependency key={dependency.name} {...dependency}></Dependency>
139+
))}
140+
</Box>
141+
<Box mb="$6">
142+
<Divider />
143+
</Box>
144+
<Stack
145+
direction="horizontal"
146+
space="$2"
147+
attributes={{
148+
justifyContent: "center",
149+
opacity: 0.5,
150+
fontSize: "$sm",
151+
}}
152+
>
153+
<Text>Built with</Text>
154+
<Link href="https://cosmology.zone/" target="_blank">
155+
Cosmology
156+
</Link>
157+
</Stack>
158+
</>
159+
);
160+
}

0 commit comments

Comments
 (0)