Skip to content

Commit

Permalink
Merge pull request #20 from hyperweb-io/feat/hyperweb-ui
Browse files Browse the repository at this point in the history
Add hyperweb UI
  • Loading branch information
marslavish authored Jan 27, 2025
2 parents a2cfe4c + fb0a3a5 commit 51ee01a
Show file tree
Hide file tree
Showing 27 changed files with 12,758 additions and 3,857 deletions.
77 changes: 61 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

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

### Get Started Immediately

You dont 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
Expand Down Expand Up @@ -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

Expand All @@ -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.
3 changes: 3 additions & 0 deletions templates/hyperweb/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,6 @@
lerna-debug.log

**/.idea

**/.next
next-env.d.ts
31 changes: 30 additions & 1 deletion templates/hyperweb/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -49,5 +77,6 @@
"typescript": "^5.1.6"
},
"keywords": [],
"packageManager": "[email protected]",
"gitHead": "d7557df95ccbe65022679a20d52e2f3bfc8af6f5"
}
3 changes: 3 additions & 0 deletions templates/hyperweb/ui/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
160 changes: 160 additions & 0 deletions templates/hyperweb/ui/components/common/Footer.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
);
}
Loading

0 comments on commit 51ee01a

Please sign in to comment.