Template

templates/connect-chain/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

templates/connect-chain/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

templates/connect-chain/README.md

@@ -0,0 +1,34 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[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`.
+
+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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

templates/connect-chain/components/features.tsx

@@ -0,0 +1,29 @@
+import { LinkIcon } from "@chakra-ui/icons";
+import { Box, Heading, HStack, Icon, Link, Text, VStack } from "@chakra-ui/react";
+import { FeatureProps } from "./types";
+
+export const Product = ({ title, text, href }: FeatureProps) => {
+    return (
+        <a href={href} target="_blank">
+            <Box p={5} shadow='md' borderWidth='1px'
+                _hover={{ color: 'purple.500', borderColor: 'purple.300' }}>
+                <Heading fontSize='xl'>{title} &rarr;</Heading>
+                <Text mt={4}>{text}</Text>
+            </Box>
+        </a>
+    );
+};
+
+export const Dependency = ({ title, text, href }: FeatureProps) => {
+    return (
+        <HStack key={title} align={'top'}>
+            <Box color={'purple.500'} px={2}>
+                <Icon as={LinkIcon} />
+            </Box>
+            <VStack align={'start'}>
+                <Text fontWeight={600}><Link href={href} target={'_blank'}>{title}</Link></Text>
+                <Text color={'gray.600'}>{text}</Text>
+            </VStack>
+        </HStack>
+    )
+}

templates/connect-chain/components/index.tsx

@@ -0,0 +1,5 @@
+export * from './types';
+export * from './wallet-connect';
+export * from './user-info';
+export * from './astronaut';
+export * from './features';

templates/connect-chain/components/types.tsx

@@ -0,0 +1,38 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { IconType } from "react-icons";
+
+export interface ChooseChainInfo {
+  chainId: string;
+  chainRoute?: string;
+  label: string;
+  value: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export enum WalletStatus {
+  NotInit = "NotInit",
+  Loading = "Loading",
+  Loaded = "Loaded",
+  NotExist = "NotExist",
+  Rejected = "Rejected"
+}
+
+export interface ConnectWalletType {
+  buttonText?: string;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  icon?: IconType;
+  onClickConnectBtn?: MouseEventHandler<HTMLButtonElement>;
+}
+
+export interface ConnectedUserCardType {
+  userName: string;
+  icon?: ReactNode;
+}
+
+export interface FeatureProps {
+  title: string;
+  text: string;
+  href: string;
+}

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

@@ -0,0 +1,55 @@
+import React, { ReactNode } from "react";
+import { Text, useColorModeValue, Stack, Box } from "@chakra-ui/react";
+import { ConnectedUserCardType } from "./types";
+
+export const ConnectedUserCard = ({
+  userName,
+  icon,
+}: ConnectedUserCardType) => {
+  return (
+    <Stack
+      isInline={true}
+      spacing={2}
+      justifyContent="center"
+      alignItems="center"
+      borderRadius="lg"
+      bg={useColorModeValue("whiteAlpha.100", "blackAlpha.100")}
+      boxShadow={useColorModeValue(
+        "inset 0 0 12px -5px #d3d3d3",
+        "inset 0 0 14px -7px #828282"
+      )}
+      w="full"
+      minW="fit-content"
+      p={2}
+      paddingX={20}
+    >
+      <Box
+        display={icon ? "block" : "none"}
+        minW={14}
+        maxW={14}
+        w={14}
+        minH={14}
+        maxH={14}
+        h={14}
+        borderRadius="full"
+        overflow="hidden"
+      >
+        {icon}
+      </Box>
+      <Text fontSize={{ lg: "lg" }} fontWeight="semibold">
+        {userName}
+      </Text>
+    </Stack>
+  );
+};
+
+
+export const ConnectedUserInfo = ({
+  name,
+  icon,
+}: {
+  name: string;
+  icon?: ReactNode;
+}) => {
+  return <ConnectedUserCard userName={name} icon={icon} />;
+};

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

@@ -0,0 +1,121 @@
+import React, { MouseEventHandler, ReactNode } from "react";
+import { Button, Icon, Stack, Text, useColorModeValue } from "@chakra-ui/react";
+import { FiAlertTriangle } from "react-icons/fi";
+import { WalletStatus } from "./types";
+import { IoWallet } from "react-icons/io5";
+import { ConnectWalletType } from "./types";
+
+export const ConnectWalletButton = ({
+  buttonText,
+  isLoading,
+  isDisabled,
+  icon,
+  onClickConnectBtn,
+}: ConnectWalletType) => {
+  return (
+    <Button
+      minW="fit-content"
+      colorScheme="primary"
+      size="lg"
+      isLoading={isLoading}
+      isDisabled={isDisabled}
+      onClick={onClickConnectBtn}
+    >
+      <Icon as={icon ? icon : IoWallet} mr={2} />
+      {buttonText ? buttonText : "Connect Wallet"}
+    </Button>
+  );
+};
+
+export const Disconnect = ({
+  buttonText,
+  onClick,
+}: {
+  buttonText: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
+  );
+};
+
+export const Connected = ({
+  buttonText,
+  onClick,
+}: {
+  buttonText: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+}) => {
+  return (
+    <ConnectWalletButton buttonText={buttonText} onClickConnectBtn={onClick} />
+  );
+};
+
+export const Connecting = () => {
+  return <ConnectWalletButton isLoading={true} />;
+};
+
+export const Rejected = ({
+  buttonText,
+  wordOfWarning,
+}: {
+  buttonText: string;
+  wordOfWarning?: string;
+}) => {
+  return (
+    <Stack>
+      <ConnectWalletButton buttonText={buttonText} isDisabled={true} />
+      <Stack
+        isInline={true}
+        borderRadius="md"
+        bg={useColorModeValue("orange.200", "orange.300")}
+        color="blackAlpha.900"
+        p={4}
+        spacing={1}
+      >
+        <Icon as={FiAlertTriangle} mt={1} />
+        <Text>
+          <Text fontWeight="semibold" as="span">
+            Warning:&ensp;
+          </Text>
+          {wordOfWarning}
+        </Text>
+      </Stack>
+    </Stack>
+  );
+};
+
+export const NotExist = ({ buttonText }: { buttonText: string }) => {
+  return <ConnectWalletButton buttonText={buttonText} isDisabled={true} />;
+};
+
+export const WalletConnectComponent = ({
+  walletStatus,
+  disconnect,
+  connecting,
+  connected,
+  rejected,
+  notExist,
+}: {
+  walletStatus: WalletStatus;
+  disconnect: ReactNode;
+  connecting: ReactNode;
+  connected: ReactNode;
+  rejected: ReactNode;
+  notExist: ReactNode;
+}) => {
+  switch (walletStatus) {
+    case WalletStatus.NotInit:
+      return <>{disconnect}</>;
+    case WalletStatus.Loading:
+      return <>{connecting}</>;
+    case WalletStatus.Loaded:
+      return <>{connected}</>;
+    case WalletStatus.Rejected:
+      return <>{rejected}</>;
+    case WalletStatus.NotExist:
+      return <>{notExist}</>;
+    default:
+      return <>{disconnect}</>;
+  }
+};

templates/connect-chain/config/features.ts

@@ -0,0 +1,47 @@
+import { FeatureProps } from "../components";
+
+export const products: FeatureProps[] = [
+    {
+        title: 'Cosmos Kit',
+        text: 'A wallet adapter for react with mobile WalletConnect support for the Cosmos ecosystem.',
+        href: 'https://github.com/cosmology-tech/cosmos-kit',
+    },
+    {
+        title: 'Telescope',
+        text: 'A TypeScript Transpiler for Cosmos Protobufs to generate libraries for Cosmos blockchains.',
+        href: 'https://github.com/osmosis-labs/telescope',
+    },
+    {
+        title: 'Ts Codegen',
+        text: 'The quickest and easiest way to convert CosmWasm Contracts into dev-friendly TypeScript classes.',
+        href: 'https://github.com/CosmWasm/ts-codegen',
+    },
+    {
+        title: 'Cosmology',
+        text: 'Build web3 applications on top of Osmosis and the Cosmos.',
+        href: 'https://github.com/cosmology-tech/cosmology',
+    },
+    {
+        title: 'Chain Registry',
+        text: 'The npm package for the Official Cosmos chain registry.',
+        href: 'https://github.com/cosmology-tech/chain-registry',
+    },
+    {
+        title: 'Videos',
+        text: 'Learn more from the official website of @cosmology-tech.',
+        href: 'https://cosmology.tech/',
+    }
+]
+
+export const dependencies: FeatureProps[] = [
+    {
+        title: 'Chakra UI',
+        text: 'A simple, modular and accessible React Component Library.',
+        href: 'https://chakra-ui.com/'
+    },
+    {
+        title: 'Next.js',
+        text: 'A React Framework supports hybrid static & server rendering.',
+        href: 'https://nextjs.org/'
+    }
+];

templates/connect-chain/config/index.ts

@@ -0,0 +1,2 @@
+export * from './theme';
+export * from './features';