Skip to content

Commit 6b0de00

Browse files
marslavishmarslavish
committed
feat: add hyperweb UI
1 parent a2cfe4c commit 6b0de00

26 files changed

+12699
-3841
lines changed

‎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+
}

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {
2+
Box,
3+
Button,
4+
Icon,
5+
Link,
6+
Text,
7+
useColorModeValue,
8+
useTheme,
9+
} from "@interchain-ui/react";
10+
11+
const stacks = ["Interchain Kit", "Next.js", "InterchainJS"];
12+
13+
export function Header() {
14+
const { theme, setTheme } = useTheme();
15+
16+
const toggleColorMode = () => {
17+
setTheme(theme === "light" ? "dark" : "light");
18+
};
19+
20+
return (
21+
<>
22+
<Box display="flex" justifyContent="end" mb="$8">
23+
<Button
24+
intent="secondary"
25+
size="sm"
26+
attributes={{
27+
paddingX: 0,
28+
}}
29+
onClick={toggleColorMode}
30+
>
31+
<Icon name={useColorModeValue("moonLine", "sunLine")} />
32+
</Button>
33+
</Box>
34+
35+
<Box textAlign="center">
36+
<Text
37+
as="h1"
38+
fontWeight="$extrabold"
39+
fontSize={{ mobile: "$6xl", tablet: "$10xl" }}
40+
attributes={{
41+
marginBottom: "$8",
42+
}}
43+
>
44+
Create Hyperweb App
45+
</Text>
46+
<Text as="h2" fontWeight="$bold">
47+
<Text
48+
as="span"
49+
fontSize={{ mobile: "$3xl", tablet: "$8xl", desktop: "$8xl" }}
50+
>
51+
Welcome to&nbsp;
52+
</Text>
53+
<Text
54+
as="span"
55+
fontSize={{ mobile: "$3xl", tablet: "$8xl", desktop: "$8xl" }}
56+
color={useColorModeValue("$primary500", "$primary200")}
57+
>
58+
{stacks.join(" + ")}
59+
</Text>
60+
</Text>
61+
</Box>
62+
</>
63+
);
64+
}

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import Head from "next/head";
2+
import { Container } from "@interchain-ui/react";
3+
import { Header } from "./Header";
4+
import { Footer } from "./Footer";
5+
6+
export function Layout({ children }: { children: React.ReactNode }) {
7+
return (
8+
<Container maxWidth="64rem" attributes={{ py: "$14" }}>
9+
<Head>
10+
<title>Create Hyperweb App</title>
11+
<meta name="description" content="Generated by create hyperweb app" />
12+
<link rel="icon" href="/favicon.ico" />
13+
</Head>
14+
<Header />
15+
{children}
16+
<Footer />
17+
</Container>
18+
);
19+
}

‎templates/hyperweb/ui/components/common/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export * from './Header'
2+
export * from './Footer'
3+
export * from './Layout'

‎templates/hyperweb/ui/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './common';
2+
export * from './wallet';

0 commit comments

Comments
 (0)