@sei-js/create-sei 0.0.1 → 0.0.2

package/dist/templates/next-cosmos-template/src/app/components/Homepage/Homepage.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import './Homepage.css'
+import Examples from './Examples';
+import { selectedChain } from '../../constants';
+import { WalletConnectButton } from '..';
+
+type HelpItem = {
+	title: string;
+	description: string;
+	link: string;
+};
+
+const renderHelpItem = ({ title, description, link }: HelpItem) => (
+	<div className="card secondary">
+		<div className="card-header">
+			<p className="card__title">
+				<a href={link} target='_blank' rel='noopener noreferrer' className="external-link">
+					{title} {externalIcon}
+				</a>
+			</p>
+			<small className="card__description">
+				{description}
+			</small>
+		</div>
+	</div>
+);
+
+const helpItems: HelpItem[] = [
+	{
+		title: 'Sei Docs',
+		description: 'Find in-depth information about Sei.',
+		link: 'https://docs.sei.io/'
+	},
+	{
+		title: 'CosmosKit',
+		description: "Learn about CosmosKit and it's hooks for chain interaction.",
+		link: 'https://docs.cosmology.zone/cosmos-kit/get-started'
+	},
+	{
+		title: 'sei-js',
+		description: 'Interact with Sei using @sei-js/cosmjs.',
+		link: 'https://sei-protocol.github.io/sei-js/modules/cosmjs.html'
+	}
+];
+
+const externalIcon = (
+	<svg
+	  width="16"
+	  height="16"
+	  viewBox="0 0 16 16"
+	  fill="none"
+	  xmlns="http://www.w3.org/2000/svg"
+	>
+	  <path
+		d="M12 8.66667V12.6667C12 13.0203 11.8595 13.3594 11.6095 13.6095C11.3594 13.8595 11.0203 14 10.6667 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V5.33333C2 4.97971 2.14048 4.64057 2.39052 4.39052C2.64057 4.14048 2.97971 4 3.33333 4H7.33333"
+		stroke="#9F1239"
+		strokeWidth="1.33333"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+	  />
+	  <path
+		d="M10 2H14V6"
+		stroke="#9F1239"
+		strokeWidth="1.33333"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+	  />
+	  <path
+		d="M6.66663 9.33333L14 2"
+		stroke="#9F1239"
+		strokeWidth="1.33333"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+	  />
+	</svg>
+  );
+
+export function Homepage() {
+
+	return (
+		<div className="container">
+			<img src="sei-logotype.svg" className="logo" alt="SEI logotype" />
+			<div className="card intro">
+				<div className="card-header">
+				<p className="card__title">Wallet address</p>
+				<small className="card__description">
+					Connect wallet to see your address and balance
+				</small>
+				</div>
+				<WalletConnectButton/>
+			</div>
+			<Examples chainId={selectedChain.chain_id}/>
+			<div className="get-started">
+				Get started by editing <code>src/app/page.tsx</code>
+			</div>
+			<div className="grid docs">
+				{
+					helpItems.map((item, _) => (
+						<div key={item.title}>
+							{renderHelpItem(item)}
+						</div>
+					))
+				}
+			</div>
+		</div>
+	);
+}
+
+export default Homepage;

package/dist/templates/next-cosmos-template/src/app/components/WalletConnectButton/WalletConnectButton.tsx

@@ -0,0 +1,26 @@
+import { useChain } from "@cosmos-kit/react";
+
+import "@interchain-ui/react/styles";
+
+import { truncateSeiAddress } from "@sei-js/cosmjs";
+import { selectedChain } from "../../constants";
+
+export function WalletConnectButton() {
+  const {
+    isWalletConnected,
+    address,
+    connect,
+    openView,
+  } = useChain(selectedChain.chain_name);
+
+  const truncatedSeiAddr = address ? truncateSeiAddress(address) : ""
+
+  return (
+    <button
+      className="primary"
+      onClick={isWalletConnected ? openView : connect}
+    >
+      {isWalletConnected ? truncateSeiAddress(truncatedSeiAddr) : "Connect"}
+    </button>
+  );
+}

package/dist/templates/next-cosmos-template/src/app/components/Web3Provider.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import { ChainProvider } from '@cosmos-kit/react';
+import { COSMOS_KIT_ASSET_LIST } from '@sei-js/cosmjs';
+import { wallets as finWallets } from '@cosmos-kit/fin'
+import { wallets as keplrWallets } from '@cosmos-kit/keplr'
+import {
+  CompassExtensionWallet,
+  compassExtensionInfo,
+} from '@cosmos-kit/compass-extension'
+import { selectedChain } from '../constants';
+
+interface Web3ProviderProps {
+	children: ReactNode;
+}
+
+const compassWallet = new CompassExtensionWallet({
+  ...compassExtensionInfo,
+  mobileDisabled: false,
+})
+
+function Web3Provider({ children }: Web3ProviderProps) {
+
+  // Define your supported wallets here
+  const wallets = [compassWallet, ...finWallets, ...keplrWallets];
+
+  // Define the list of sei chain you would like to connect to here.
+  const chains = [selectedChain]
+
+	return (
+      <ChainProvider chains={chains} assetLists={[COSMOS_KIT_ASSET_LIST]} wallets={wallets}>
+        {children}
+      </ChainProvider>
+	);
+}
+
+export default Web3Provider;

package/dist/templates/next-cosmos-template/src/app/components/index.ts

@@ -0,0 +1,3 @@
+export * from './Homepage/Homepage'
+export * from './WalletConnectButton/WalletConnectButton'
+export * from './Web3Provider'

package/dist/templates/next-cosmos-template/src/app/constants/chain.ts

@@ -0,0 +1,16 @@
+import { ARCTIC_1_SEI_COSMOS_KIT_CHAIN, ATLANTIC_2_SEI_COSMOS_KIT_CHAIN, PACIFIC_1_SEI_COSMOS_KIT_CHAIN } from '@sei-js/cosmjs';
+
+export type Urls = {
+    rpc: string,
+    rest: string,
+}
+
+export const defaultUrls: {[chainName: string]: Urls} = {
+    [PACIFIC_1_SEI_COSMOS_KIT_CHAIN.chain_id]: {rpc: "https://rpc.sei-apis.com", rest: 'https://rest-arctic-1.sei-apis.com'},
+    [ATLANTIC_2_SEI_COSMOS_KIT_CHAIN.chain_id]: {rpc: "https://rpc-testnet.sei-apis.com", rest: "https://rest-testnet.sei-apis.com"},
+    [ARCTIC_1_SEI_COSMOS_KIT_CHAIN.chain_id]: {rpc: "https://rpc-arctic-1.sei-apis.com", rest: "https://rest-arctic-1.sei-apis.com"}
+}
+
+// Set your selected chain here
+// To point to mainnet, use PACIFIC_1_SEI_COSMOS_KIT_CHAIN
+export const selectedChain = ARCTIC_1_SEI_COSMOS_KIT_CHAIN

package/dist/templates/next-cosmos-template/src/app/constants/index.ts

@@ -0,0 +1 @@
+export * from './chain';

package/dist/templates/next-cosmos-template/src/app/index.css

@@ -0,0 +1,171 @@
+/*
+  1. Use a more-intuitive box-sizing model.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+/*
+  2. Remove default margin
+*/
+* {
+  margin: 0;
+}
+/*
+  Typographic tweaks!
+  3. Add accessible line-height
+  4. Improve text rendering
+*/
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+/*
+  5. Improve media defaults
+*/
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+/*
+  6. Remove built-in form typography styles
+*/
+input, button, textarea, select {
+  font: inherit;
+}
+/*
+  7. Avoid text overflows
+*/
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+  line-height: 1;
+}
+/*
+  8. Create a root stacking context
+*/
+#root, #__next {
+  isolation: isolate;
+}
+
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color:#000;
+  background: var(--background);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --primary-color: #9F1239;
+  --primary-color-hover: #7F0A2E;
+  --background: linear-gradient(180deg, #F5F5F4 0%, #FFF 100%);
+  --border: #D6D3D1;
+  --card: #FFF;
+  --card-foreground: #242424;
+}
+
+a {
+  font-weight: 500;
+  color: var(--primary-color);
+  text-decoration: inherit;
+}
+a:hover {
+  color: var(--primary-color-hover)
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1;
+}
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+    display: inline-flex;
+    border-radius: 4px;
+    padding: 0.1rem 0.4rem;
+    background-color: #d7cccc;
+    color: var(--card-foreground);
+}
+
+button {
+  border-radius: 4rem;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #cec9c1;
+  cursor: pointer;
+  transition: all 0.25s ease;
+  color: black;
+}
+button:hover {
+  background-color: #b5afa7;
+}
+
+button:disabled {
+  filter:grayscale(1) opacity(0.5);
+  color: rgb(56, 55, 55);
+  pointer-events: none;
+}
+
+button.primary {
+  background-color: var(--primary-color);
+  color: #fff;
+}
+button.outline {
+  background-color: transparent;
+  border: 1px solid var(--border);
+}
+
+button.primary:hover {
+  background-color: var(--primary-color-hover);
+}
+
+button.secondary {
+  background-color: #000;
+  color: #fff;
+}
+
+button.secondary:hover {
+  background-color: #2b2b2b;
+}
+
+button:active {
+  transform: translateY(1px);
+}
+
+button.small {
+  padding: 0.4em 0.8em;
+  font-size: 0.8em;
+}
+
+
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+  outline-offset: 4px;
+}
+
+.header {
+  width: 100%;
+  height: 4rem;
+  padding: 0 1%;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  background-color: transparent;
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  background: #F5F5F4;
+}

package/dist/templates/next-cosmos-template/src/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Sei Next App (Cosmos)",
+  description: "Generated by create sei app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

package/dist/templates/next-cosmos-template/src/app/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import './index.css'
+import Homepage from "./components/Homepage/Homepage";
+import Web3Provider from "./components/Web3Provider";
+import { WalletConnectButton } from "./components/WalletConnectButton/WalletConnectButton";
+
+export default function Home() {  
+  return (
+    <Web3Provider>
+      <div className="header">
+        <WalletConnectButton/>
+      </div>
+      <Homepage/>
+    </Web3Provider>
+  );
+}

package/dist/templates/next-cosmos-template/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}