Initial commit from Create Next App

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*.{ts,tsx,json,js,jsx}]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = true
+insert_final_newline = true

.env.example

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_CHAIN_ID=lucina
+NEXT_PUBLIC_CHAIN_NAME=Juno
+NEXT_PUBLIC_CHAIN_BECH32_PREFIX=juno
+NEXT_PUBLIC_CHAIN_RPC_ENDPOINT=https://rpc.juno.omniflix.co/
+NEXT_PUBLIC_CHAIN_REST_ENDPOINT=https://api.juno.omniflix.co/
+NEXT_PUBLIC_STAKING_DENOM="ujuno"
+NEXT_PUBLIC_SITE_TITLE=Next CosmWasm Keplr Starter
+NEXT_PUBLIC_SITE_ICON_URL="/juno.svg"

.eslintrc.json

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

.gitignore

@@ -0,0 +1,48 @@
+# 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*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# emacs
+.log
+*~
+\#*\#
+.\#*
+*.~undo-tree
+
+# vim
+*.swp
+*.swo
+
+# macos
+.DS_Store

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+**/.next/**
+**/_next/**
+**/dist/**
+

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

README.md

@@ -0,0 +1,58 @@
+## Preview
+
+<p align="center" width="100%">
+    <img alt="Next CosmWasm Keplr Starter Preview" src="https://i.imgur.com/BW6UZZa.gif">
+</p>
+
+## Getting Started
+
+First, bootstrap your new project with this example using [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app):
+
+```bash
+npx create-next-app -e https://github.com/ebaker/next-cosmwasm-keplr-starter my-cosmwasm-dapp
+# or
+yarn create next-app -e https://github.com/ebaker/next-cosmwasm-keplr-starter my-cosmwasm-dapp
+```
+
+Next, setup your `.env` file by copying the example:
+
+```bash
+cd my-cosmwasm-dapp
+cp .env.example .env.local
+```
+
+Then, 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.
+
+## Requirements
+
+Please ensure you have the [Keplr wallet extension](https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap) installed in your Chrome based browser (Chrome, Brave, etc).
+
+## Learn More
+
+To learn more about Next.js, CosmosJS, Keplr, and Tailwind CSS - 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.
+- [CosmosJS Repository](https://github.com/cosmostation/cosmosjs) - Cosmos JavaScript library developed by [Cosmostation](https://www.cosmostation.io/).
+- [@cosmjs/cosmwasm-stargate Documentation](https://cosmos.github.io/cosmjs/latest/cosmwasm-stargate/modules.html) - CosmosJS CosmWasm module documentation.
+- [Keplr Wallet Documentation](https://docs.keplr.app/api/cosmjs.html) - using Keplr wallet with CosmosJS.
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs) - utility-first CSS framework.
+- [DaisyUI Documentation](https://daisyui.com/docs/use) - lightweight component library built on [tailwindcss](https://tailwindcss.com/).
+
+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.

components/Layout.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react'
+import Head from 'next/head'
+import Nav from './Nav'
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-base-100 text-base-content">
+      <Head>
+        <title>{process.env.NEXT_PUBLIC_SITE_TITLE}</title>
+        <meta name="description" content="Generated by create next app" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Nav />
+      <main className="flex flex-col items-center justify-center w-full flex-1 p-2 md:px-20 text-center">
+        {children}
+      </main>
+      <footer className="flex items-center justify-center w-full h-24 border-t">
+        Powered by{' '}
+        <a
+          className="pl-1 link link-primary link-hover"
+          href="https://github.com/cosmostation/cosmosjs"
+        >
+          CosmosJS
+        </a>
+        <span className="pl-1"> and</span>
+        <a
+          className="pl-1 link link-primary link-hover"
+          href="https://keplr.app/"
+        >
+          Keplr
+        </a>
+      </footer>
+    </div>
+  )
+}

components/Loader.tsx

@@ -0,0 +1,25 @@
+// https://codepen.io/chris__sev/pen/JjRqOxa
+
+function Loader() {
+  return (
+    <div
+      className="bg-secondary p-5 rounded-full flex space-x-3"
+      style={{ animationDuration: '0.5s' }}
+    >
+      <div
+        className="w-5 h-5 bg-white rounded-full animate-bounce"
+        style={{ animationDelay: '0.1s' }}
+      />
+      <div
+        className="w-5 h-5 bg-white rounded-full animate-bounce"
+        style={{ animationDelay: '0.3s' }}
+      />
+      <div
+        className="w-5 h-5 bg-white rounded-full animate-bounce"
+        style={{ animationDelay: '0.5s' }}
+      />
+    </div>
+  )
+}
+
+export default Loader

components/Nav.tsx

@@ -0,0 +1,51 @@
+import { useSigningClient } from 'contexts/cosmwasm'
+import Link from 'next/link'
+import Image from 'next/image'
+import ThemeToggle from 'components/ThemeToggle'
+
+function Nav() {
+  const { walletAddress, connectWallet, disconnect } = useSigningClient()
+  const handleConnect = () => {
+    if (walletAddress.length === 0) {
+      connectWallet()
+    } else {
+      disconnect()
+    }
+  }
+
+  const PUBLIC_SITE_ICON_URL = process.env.NEXT_PUBLIC_SITE_ICON_URL || ''
+
+  return (
+    <div className="border-b w-screen px-2 md:px-16">
+      <nav className="flex flex-wrap text-center md:text-left md:flex flex-row w-full justify-between items-center py-4 ">
+        <div className="flex items-center">
+          <Link href="/">
+            <a>
+              {PUBLIC_SITE_ICON_URL.length > 0 ? (
+                <Image src={PUBLIC_SITE_ICON_URL} height={32} width={32} />
+              ) : (
+                <span className="text-2xl">⚛️ </span>
+              )}
+            </a>
+          </Link>
+          <Link href="/">
+            <a className="ml-1 md:ml-2 link link-hover font-semibold text-xl md:text-2xl align-top">
+              {process.env.NEXT_PUBLIC_SITE_TITLE}
+            </a>
+          </Link>
+        </div>
+        <ThemeToggle />
+        <div className="flex flex-grow lg:flex-grow-0 max-w-full">
+          <button
+            className="block btn btn-outline btn-primary w-full max-w-full truncate"
+            onClick={handleConnect}
+          >
+            {walletAddress || 'Connect Wallet'}
+          </button>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+export default Nav

components/ThemeToggle.jsx

@@ -0,0 +1,38 @@
+import { themeChange } from 'theme-change'
+import { useEffect, useState } from 'react'
+import daisyuiThemes from 'styles/daisyui-themes.json'
+
+const themes = Object.keys(daisyuiThemes) || ['']
+export const defaultTheme = themes[0]
+
+function ThemeToggle() {
+  const [theme, setTheme] = useState(defaultTheme)
+  useEffect(() => {
+    themeChange(false)
+    setTheme(
+      document.documentElement.getAttribute('data-theme') || defaultTheme
+    )
+  }, [])
+
+  return (
+    <div className="form-control lg:mr-4 md:ml-auto">
+      <label className="cursor-pointer label">
+        <span className="label-text">🌞</span>
+        <input
+          type="checkbox"
+          className="toggle toggle-secondary mx-1"
+          data-toggle-theme={themes.join(',')}
+          data-act-class="active"
+          checked={theme !== themes[0]}
+          onClick={() =>
+            setTheme(theme !== defaultTheme ? defaultTheme : themes[1])
+          }
+          readOnly
+        />
+        <span className="label-text">🌚</span>
+      </label>
+    </div>
+  )
+}
+
+export default ThemeToggle

components/WalletLoader.tsx

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react'
+import { useSigningClient } from 'contexts/cosmwasm'
+import Loader from './Loader'
+
+function WalletLoader({
+  children,
+  loading = false,
+}: {
+  children: ReactNode
+  loading?: boolean
+}) {
+  const {
+    walletAddress,
+    loading: clientLoading,
+    error,
+    connectWallet,
+  } = useSigningClient()
+
+  if (loading || clientLoading) {
+    return (
+      <div className="flex justify-center">
+        <Loader />
+      </div>
+    )
+  }
+
+  if (walletAddress === '') {
+    return (
+      <div className="max-w-full">
+        <h1 className="text-6xl font-bold">
+          Welcome to{' '}
+          <a className="link link-primary link-hover" href="https://nextjs.org">
+            Next.js!
+          </a>
+        </h1>
+
+        <p className="mt-3 text-2xl">
+          Get started by installing{' '}
+          <a
+            className="pl-1 link link-primary link-hover"
+            href="https://keplr.app/"
+          >
+            Keplr wallet
+          </a>
+        </p>
+
+        <div className="flex flex-wrap items-center justify-around md:max-w-4xl mt-6 sm:w-full">
+          <button
+            className="p-6 mt-6 text-left border border-secondary hover:border-primary w-96 rounded-xl hover:text-primary focus:text-primary-focus"
+            onClick={connectWallet}
+          >
+            <h3 className="text-2xl font-bold">Connect your wallet &rarr;</h3>
+            <p className="mt-4 text-xl">
+              Get your Keplr wallet connected now and start using it with
+              Cosmos.js.
+            </p>
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return <code>{JSON.stringify(error)}</code>
+  }
+
+  return <>{children}</>
+}
+
+export default WalletLoader