initial commit

.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,14 @@
+# Basic
+NEXT_PUBLIC_SITE_TITLE=WasmSwap
+NEXT_PUBLIC_LOGO_URL=/crab.png
+
+# Chain
+NEXT_PUBLIC_CHAIN_ID=lucina
+NEXT_PUBLIC_CHAIN_NAME=Juno
+NEXT_PUBLIC_CHAIN_BECH32_PREFIX=juno
+NEXT_PUBLIC_CHAIN_RPC_ENDPOINT=https://rpc-juno.itastakers.com/
+NEXT_PUBLIC_CHAIN_REST_ENDPOINT=https://lcd-juno.itastakers.com/
+NEXT_PUBLIC_STAKING_DENOM="ujuno"
+
+# Contracts
+NEXT_PUBLIC_AMM_CONTRACT_ADDRESS=juno1mvtl25cganft5ae9rcrqt7nz3ktvwz88m76eds

.eslintrc

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

.gitignore

@@ -0,0 +1,60 @@
+# 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
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# emacs
+*~
+\#*\#
+/.emacs.desktop
+/.emacs.desktop.lock
+*.elc
+auto-save-list
+tramp
+.\#*
+.log
+
+# vim
+# swap
+[._]*.s[a-v][a-z]
+[._]*.sw[a-p]
+[._]s[a-v][a-z]
+[._]sw[a-p]
+# session
+Session.vim
+# temporary
+.netrwhist
+*~
+# auto-generated tag files
+tags

.prettierignore

@@ -0,0 +1,4 @@
+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,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.tsx`.
+
+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.

components/Layout.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import { useAppContext } from 'contexts/app'
+import Nav from './Nav'
+
+export default function Layout({ children }) {
+  const { address, connectWallet } = useAppContext()
+
+  return (
+    <>
+      <Nav
+        title={process.env.NEXT_PUBLIC_SITE_TITLE}
+        logoURL={process.env.NEXT_PUBLIC_LOGO_URL}
+        walletAddress={address}
+        onConnectWallet={connectWallet}
+      />
+      <main>
+        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">{children}</div>
+      </main>
+    </>
+  )
+}

components/Nav.tsx

@@ -0,0 +1,131 @@
+import { Fragment } from 'react'
+import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
+import { PlusIcon } from '@heroicons/react/solid'
+
+interface NavType {
+  title?: string
+  logoURL?: string
+  navItems?: Array<NavItemType>
+  walletAddress: string
+  onConnectWallet: Function
+}
+
+interface NavItemType {
+  name: string
+  href: string
+  current?: boolean
+}
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+export default function Example<NavType>({
+  title,
+  logoURL,
+  navItems = [],
+  walletAddress,
+  onConnectWallet,
+}) {
+  return (
+    <Disclosure as="nav" className="bg-gray-800">
+      {({ open }) => (
+        <>
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between h-16">
+              <div className="flex">
+                <div className="-ml-2 mr-2 flex items-center md:hidden">
+                  {/* Mobile menu button */}
+                  <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                    <span className="sr-only">Open main menu</span>
+                    {open ? (
+                      <XIcon className="block h-6 w-6" aria-hidden="true" />
+                    ) : (
+                      <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                    )}
+                  </Disclosure.Button>
+                </div>
+                <div className="flex-shrink-0 flex items-center">
+                  {logoURL ? (
+                    <img className="lg:block h-10 w-auto" src={logoURL} />
+                  ) : null}
+                  {title ? (
+                    <div className="ml-4 text-white">{title}</div>
+                  ) : null}
+                </div>
+                <div className="hidden md:ml-6 md:flex md:items-center md:space-x-4">
+                  {navItems.map((item) => (
+                    <a
+                      key={item.name}
+                      href={item.href}
+                      className={classNames(
+                        item.current
+                          ? 'bg-gray-900 text-white'
+                          : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                        'px-3 py-2 rounded-md text-sm font-medium'
+                      )}
+                      aria-current={item.current ? 'page' : undefined}
+                    >
+                      {item.name}
+                    </a>
+                  ))}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <div className="flex-shrink-0">
+                  <button
+                    type="button"
+                    className="relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-500 hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-purple-500"
+                    onClick={() =>
+                      walletAddress?.length === 0 && onConnectWallet()
+                    }
+                  >
+                    {walletAddress?.length === 0 && (
+                      <PlusIcon
+                        className="-ml-1 mr-2 h-5 w-5"
+                        aria-hidden="true"
+                      />
+                    )}
+
+                    <span>
+                      {walletAddress?.length > 0
+                        ? walletAddress
+                        : 'Connect Wallet'}
+                    </span>
+                  </button>
+                </div>
+                {/* <div className="hidden md:ml-4 md:flex-shrink-0 md:flex md:items-center">
+                    <button className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
+                    <span className="sr-only">View notifications</span>
+                    <BellIcon className="h-6 w-6" aria-hidden="true" />
+                    </button>
+                    </div> */}
+              </div>
+            </div>
+          </div>
+
+          <Disclosure.Panel className="md:hidden">
+            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+              {navItems.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className={classNames(
+                    item.current
+                      ? 'bg-gray-900 text-white'
+                      : 'text-gray-300 hover:bg-gray-700 hover:text-white',
+                    'block px-3 py-2 rounded-md text-base font-medium'
+                  )}
+                  aria-current={item.current ? 'page' : undefined}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </div>
+          </Disclosure.Panel>
+        </>
+      )}
+    </Disclosure>
+  )
+}

contexts/app.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useContext, useState } from 'react'
+import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
+import { connectKeplr } from 'services/keplr'
+
+interface AppContextType {
+  address: string
+  client: any
+  connectWallet: () => void
+}
+
+const AppContext = createContext<AppContextType>({} as AppContextType)
+
+export const useAppContext = (): AppContextType => useContext(AppContext)
+
+export function AppProvider({
+  children,
+}: React.HTMLAttributes<HTMLOrSVGElement>): JSX.Element {
+  const [address, setAddress] = useState('')
+  const [client, setClient] = useState({})
+
+  const connectWallet = async () => {
+    const chainId = process.env.NEXT_PUBLIC_CHAIN_ID
+    await window.keplr?.enable(chainId)
+    const offlineSigner = await window?.getOfflineSigner(chainId)
+
+    const wasmChainClient = await SigningCosmWasmClient.connectWithSigner(
+      process.env.NEXT_PUBLIC_CHAIN_RPC_ENDPOINT,
+      offlineSigner
+    )
+
+    setClient(wasmChainClient)
+
+    const [{ address }] = await offlineSigner.getAccounts()
+
+    setAddress(address)
+  }
+
+  const value: AppContextType = { address, client, connectWallet }
+
+  return <AppContext.Provider value={value}>{children}</AppContext.Provider>
+}

next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  reactStrictMode: true,
+}

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "cosmwasm-nextjs-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "prettier:write": "prettier --write ."
+  },
+  "dependencies": {
+    "@cosmjs/amino": "0.25.4",
+    "@cosmjs/cosmwasm": "^0.25.5",
+    "@cosmjs/cosmwasm-stargate": "^0.25.5",
+    "@cosmjs/crypto": "0.25.4",
+    "@cosmjs/encoding": "0.25.4",
+    "@cosmjs/launchpad": "0.25.4",
+    "@cosmjs/math": "0.25.4",
+    "@cosmjs/proto-signing": "0.25.4",
+    "@cosmjs/stargate": "0.25.4",
+    "@headlessui/react": "^1.4.0",
+    "@heroicons/react": "^1.0.3",
+    "@stargazefi/util": "^0.0.3",
+    "@tailwindcss/aspect-ratio": "^0.2.1",
+    "@tailwindcss/forms": "^0.3.3",
+    "mobx": "^6.3.2",
+    "mobx-react": "^7.2.0",
+    "next": "11.0.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.14",
+    "autoprefixer": "^10.3.1",
+    "eslint": "7.30.0",
+    "eslint-config-next": "11.0.1",
+    "postcss": "^8.3.5",
+    "prettier": "^2.3.2",
+    "tailwindcss": "^2.2.4",
+    "typescript": "4.3.5"
+  }
+}