restore next files

.gitignore

@@ -42,6 +42,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.next
 
 # System Files
 .DS_Store

packages/create-sei-app/templates/next-cosmos-template/README.md

@@ -0,0 +1,52 @@
+# Next-Cosmos Sei App Template
+
+This repo provides a basic framework for an application that interacts with Sei via Cosmos endpoints.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Repository Basics
+This repository includes basic features that allow you to connect to a wallet and use the wallet to interact with the chain.
+
+Additionally, basic examples and links to documentation are provided on the example homepage in `src/app/components/Homepage`.
+
+### Web3 Provider
+This component is a Sei specific wrapper around CosmosKit Provider that should wrap the application. Wrapping the application in this provider will enable it to access hooks in CosmosKit. These hooks are enable connection to a wallet and interaction with the chain.
+
+To change the list of supported wallets, as well as connection configurations you can modify the `src/app/components/Web3Provider.tsx` component.
+
+### Wallet Connect Button
+This component provides an interface to connect your wallet to the application. It utilizies CosmosKit's hooks and modal.
+
+To customize the wallet connect button or connection logic, you can modify the `src/app/components/WalletConnectButton.tsx` component.
+
+## Learn More
+
+### Next.js
+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.

packages/create-sei-app/templates/next-cosmos-template/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

packages/create-sei-app/templates/next-cosmos-template/next.config.mjs

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                protocol: 'https',
+                hostname: 'cdn.sei.io',
+                port: '',
+            },
+        ],
+    },
+};
+
+export default nextConfig;

packages/create-sei-app/templates/next-cosmos-template/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "next-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@cosmos-kit/react": "^2.17.0",
+    "@interchain-ui/react": "1.23.21",
+    "@interchain-ui/react-no-ssr": "^0.1.4",
+    "@sei-js/cosmjs": "^1.0.7",
+    "@tanstack/react-query": "^5.45.1",
+    "chain-registry": "^1.63.5",
+    "cosmos-kit": "^2.18.0",
+    "next": "14.2.4",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "typescript": "^5"
+  }
+}

packages/create-sei-app/templates/next-cosmos-template/src/app/components/Homepage/Components.module.css

@@ -0,0 +1,135 @@
+.mainContent {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    gap: 1rem;
+    padding: 2rem;
+    width: 100%;
+    max-width: 1000px;
+    box-sizing: border-box;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.welcomeHeading {
+    font-size: 32px;
+    font-weight: bold;
+    margin-bottom: 2rem;
+}
+
+.walletInfoContainer,
+.connectButtonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 1rem;
+    width: 100%;
+    background-color: white;
+    border-color: black;
+}
+
+.walletInfoContainer {
+    background-color: darkgray;
+    align-items: center;
+    width: 100%;
+}
+
+.walletInfoContainer>button {
+    width: 100%
+}
+
+.walletAddressContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    background-color: 'white';
+    padding: 1rem;
+    border-radius: 0.5rem;
+    width: 100%;
+    text-align: center;
+}
+
+.walletAddressLabel {
+    margin: 0;
+}
+
+.walletAddress {
+    margin: 0;
+}
+
+.exampleContainer {
+    background-color: lightgray;
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    width: 100%;
+    text-align: center;
+    border-color: black;
+    min-width: 20rem;
+}
+
+.exampleButton {
+    padding: 1rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    border-radius: 1rem;
+    font-size: 16px;
+    color: white;
+    background-color: rgb(214, 147, 53);
+    border-color: black;
+}
+
+.helpItem {
+    background-color: #f8f8f8;
+    color: black;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    width: 100%;
+    text-decoration: none;
+    box-sizing: border-box;
+}
+
+.helpItem:hover {
+    background-color: #f3f4f6;
+    /* Gray-50 */
+}
+
+.helpTitle {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.helpDescription {
+    color: #000000;
+    margin: 0;
+}
+
+.editMessage {
+    margin-bottom: 32px;
+}
+
+.editCode {
+    background-color: #e5e7eb;
+    /* Gray-200 */
+    font-size: 14px;
+    border-radius: 8px;
+    padding: 4px;
+    color: #000000;
+}
+
+.link {
+    color: blue;
+}