Skip to content

Commit 4727cdd

Browse files
pyramationpyramation
authored
Merge pull request #1 from cosmology-tech/template
Template
2 parents f07b851 + 2ea0fd2 commit 4727cdd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+17021
-13
lines changed

‎templates/connect-chain/.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/connect-chain/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎templates/connect-chain/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
```
12+
13+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14+
15+
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
16+
17+
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
18+
19+
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20+
21+
## Learn More
22+
23+
To learn more about Next.js, take a look at the following resources:
24+
25+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27+
28+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29+
30+
## Deploy on Vercel
31+
32+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33+
34+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎templates/connect-chain/components/astronaut.tsx‎

Lines changed: 304 additions & 0 deletions
Large diffs are not rendered by default.

‎templates/connect-chain/components/features.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { LinkIcon } from "@chakra-ui/icons";
2+
import { Box, Heading, HStack, Icon, Link, Text, VStack } from "@chakra-ui/react";
3+
import { FeatureProps } from "./types";
4+
5+
export const Product = ({ title, text, href }: FeatureProps) => {
6+
return (
7+
<a href={href} target="_blank">
8+
<Box p={5} shadow='md' borderWidth='1px'
9+
_hover={{ color: 'purple.500', borderColor: 'purple.300' }}>
10+
<Heading fontSize='xl'>{title} &rarr;</Heading>
11+
<Text mt={4}>{text}</Text>
12+
</Box>
13+
</a>
14+
);
15+
};
16+
17+
export const Dependency = ({ title, text, href }: FeatureProps) => {
18+
return (
19+
<HStack key={title} align={'top'}>
20+
<Box color={'purple.500'} px={2}>
21+
<Icon as={LinkIcon} />
22+
</Box>
23+
<VStack align={'start'}>
24+
<Text fontWeight={600}><Link href={href} target={'_blank'}>{title}</Link></Text>
25+
<Text color={'gray.600'}>{text}</Text>
26+
</VStack>
27+
</HStack>
28+
)
29+
}

‎templates/connect-chain/components/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export * from './types';
2+
export * from './wallet-connect';
3+
export * from './user-info';
4+
export * from './astronaut';
5+
export * from './features';

‎templates/connect-chain/components/types.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { MouseEventHandler, ReactNode } from "react";
2+
import { IconType } from "react-icons";
3+
4+
export interface ChooseChainInfo {
5+
chainId: string;
6+
chainRoute?: string;
7+
label: string;
8+
value: string;
9+
icon?: string;
10+
disabled?: boolean;
11+
}
12+
13+
export enum WalletStatus {
14+
NotInit = "NotInit",
15+
Loading = "Loading",
16+
Loaded = "Loaded",
17+
NotExist = "NotExist",
18+
Rejected = "Rejected"
19+
}
20+
21+
export interface ConnectWalletType {
22+
buttonText?: string;
23+
isLoading?: boolean;
24+
isDisabled?: boolean;
25+
icon?: IconType;
26+
onClickConnectBtn?: MouseEventHandler<HTMLButtonElement>;
27+
}
28+
29+
export interface ConnectedUserCardType {
30+
userName: string;
31+
icon?: ReactNode;
32+
}
33+
34+
export interface FeatureProps {
35+
title: string;
36+
text: string;
37+
href: string;
38+
}

‎templates/connect-chain/components/user-info.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { ReactNode } from "react";
2+
import { Text, useColorModeValue, Stack, Box } from "@chakra-ui/react";
3+
import { ConnectedUserCardType } from "./types";
4+
5+
export const ConnectedUserCard = ({
6+
userName,
7+
icon,
8+
}: ConnectedUserCardType) => {
9+
return (
10+
<Stack
11+
isInline={true}
12+
spacing={2}
13+
justifyContent="center"
14+
alignItems="center"
15+
borderRadius="lg"
16+
bg={useColorModeValue("whiteAlpha.100", "blackAlpha.100")}
17+
boxShadow={useColorModeValue(
18+
"inset 0 0 12px -5px #d3d3d3",
19+
"inset 0 0 14px -7px #828282"
20+
)}
21+
w="full"
22+
minW="fit-content"
23+
p={2}
24+
paddingX={20}
25+
>
26+
<Box
27+
display={icon ? "block" : "none"}
28+
minW={14}
29+
maxW={14}
30+
w={14}
31+
minH={14}
32+
maxH={14}
33+
h={14}
34+
borderRadius="full"
35+
overflow="hidden"
36+
>
37+
{icon}
38+
</Box>
39+
<Text fontSize={{ lg: "lg" }} fontWeight="semibold">
40+
{userName}
41+
</Text>
42+
</Stack>
43+
);
44+
};
45+
46+
47+
export const ConnectedUserInfo = ({
48+
name,
49+
icon,
50+
}: {
51+
name: string;
52+
icon?: ReactNode;
53+
}) => {
54+
return <ConnectedUserCard userName={name} icon={icon} />;
55+
};

‎templates/connect-chain/components/wallet-connect.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, { MouseEventHandler, ReactNode } from "react";
2+
import { Button, Icon, Stack, Text, useColorModeValue } from "@chakra-ui/react";
3+
import { FiAlertTriangle } from "react-icons/fi";
4+
import { WalletStatus } from "./types";
5+
import { IoWallet } from "react-icons/io5";
6+
import { ConnectWalletType } from "./types";
7+
8+
export const ConnectWalletButton = ({
9+
buttonText,
10+
isLoading,
11+
isDisabled,
12+
icon,
13+
onClickConnectBtn,
14+
}: ConnectWalletType) => {
15+
return (
16+
<Button
17+
minW="fit-content"
18+
colorScheme="primary"
19+
size="lg"
20+
isLoading={isLoading}
21+
isDisabled={isDisabled}
22+
onClick={onClickConnectBtn}
23+
>
24+
<Icon as={icon ? icon : IoWallet} mr={2} />
25+
{buttonText ? buttonText : "Connect Wallet"}
26+
</Button>
27+
);
28+
};
29+
30+
export const Disconnect = ({
31+
buttonText,
32+
onClick,
33+
}: {
34+
buttonText: string;
35+
onClick: MouseEventHandler<HTMLButtonElement>;
36+
}) => {
37+
return (
38+
<ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
39+
);
40+
};
41+
42+
export const Connected = ({
43+
buttonText,
44+
onClick,
45+
}: {
46+
buttonText: string;
47+
onClick: MouseEventHandler<HTMLButtonElement>;
48+
}) => {
49+
return (
50+
<ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
51+
);
52+
};
53+
54+
export const Connecting = () => {
55+
return <ConnectWalletButton isLoading={true} />;
56+
};
57+
58+
export const Rejected = ({
59+
buttonText,
60+
wordOfWarning,
61+
}: {
62+
buttonText: string;
63+
wordOfWarning?: string;
64+
}) => {
65+
return (
66+
<Stack>
67+
<ConnectWalletButton buttonText={buttonText} isDisabled={true} />
68+
<Stack
69+
isInline={true}
70+
borderRadius="md"
71+
bg={useColorModeValue("orange.200", "orange.300")}
72+
color="blackAlpha.900"
73+
p={4}
74+
spacing={1}
75+
>
76+
<Icon as={FiAlertTriangle} mt={1} />
77+
<Text>
78+
<Text fontWeight="semibold" as="span">
79+
Warning:&ensp;
80+
</Text>
81+
{wordOfWarning}
82+
</Text>
83+
</Stack>
84+
</Stack>
85+
);
86+
};
87+
88+
export const NotExist = ({ buttonText }: { buttonText: string }) => {
89+
return <ConnectWalletButton buttonText={buttonText} isDisabled={true} />;
90+
};
91+
92+
export const WalletConnectComponent = ({
93+
walletStatus,
94+
disconnect,
95+
connecting,
96+
connected,
97+
rejected,
98+
notExist,
99+
}: {
100+
walletStatus: WalletStatus;
101+
disconnect: ReactNode;
102+
connecting: ReactNode;
103+
connected: ReactNode;
104+
rejected: ReactNode;
105+
notExist: ReactNode;
106+
}) => {
107+
switch (walletStatus) {
108+
case WalletStatus.NotInit:
109+
return <>{disconnect}</>;
110+
case WalletStatus.Loading:
111+
return <>{connecting}</>;
112+
case WalletStatus.Loaded:
113+
return <>{connected}</>;
114+
case WalletStatus.Rejected:
115+
return <>{rejected}</>;
116+
case WalletStatus.NotExist:
117+
return <>{notExist}</>;
118+
default:
119+
return <>{disconnect}</>;
120+
}
121+
};

‎templates/connect-chain/config/features.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { FeatureProps } from "../components";
2+
3+
export const products: FeatureProps[] = [
4+
{
5+
title: 'Cosmos Kit',
6+
text: 'A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.',
7+
href: 'https://github.com/cosmology-tech/cosmos-kit',
8+
},
9+
{
10+
title: 'Telescope',
11+
text: 'A TypeScript Transpiler for Cosmos Protobufs to generate libraries for Cosmos blockchains.',
12+
href: 'https://github.com/osmosis-labs/telescope',
13+
},
14+
{
15+
title: 'Ts Codegen',
16+
text: 'The quickest and easiest way to convert CosmWasm Contracts into dev-friendly TypeScript classes.',
17+
href: 'https://github.com/CosmWasm/ts-codegen',
18+
},
19+
{
20+
title: 'Cosmology',
21+
text: 'Build web3 applications on top of Osmosis and the Cosmos.',
22+
href: 'https://github.com/cosmology-tech/cosmology',
23+
},
24+
{
25+
title: 'Chain Registry',
26+
text: 'The npm package for the Official Cosmos chain registry.',
27+
href: 'https://github.com/cosmology-tech/chain-registry',
28+
},
29+
{
30+
title: 'Videos',
31+
text: 'Learn more from the official website of @cosmology-tech.',
32+
href: 'https://cosmology.tech/',
33+
}
34+
]
35+
36+
export const dependencies: FeatureProps[] = [
37+
{
38+
title: 'Chakra UI',
39+
text: 'A simple, modular and accessible React Component Library.',
40+
href: 'https://chakra-ui.com/'
41+
},
42+
{
43+
title: 'Next.js',
44+
text: 'A React Framework supports hybrid static & server rendering.',
45+
href: 'https://nextjs.org/'
46+
}
47+
];

0 commit comments

Comments
 (0)