├── Procfile
├── .eslintrc.json
├── assets
    ├── logo.png
    └── logo-white.png
├── public
    ├── favicon.png
    └── favicon.svg
├── pages
    ├── api
    │   └── blockfrost
    │   │   └── [[...all]].ts
    ├── _document.tsx
    ├── 404.tsx
    ├── 500.tsx
    ├── about.tsx
    ├── contact.tsx
    ├── licensing.tsx
    ├── privacy-policy.tsx
    ├── _app.tsx
    ├── transact.tsx
    ├── sign.tsx
    ├── mint.tsx
    └── index.tsx
├── postcss.config.js
├── styles
    ├── globals.css
    └── use-cardano-overrides.css
├── .env.template
├── tailwind.config.js
├── next.config.js
├── .gitignore
├── tsconfig.json
├── components
    ├── icons
    │   └── CommandLineIcon.tsx
    ├── Navigation.tsx
    └── Footer.tsx
├── README.md
├── layouts
    └── DefaultLayout.tsx
├── LICENSE
├── package.json
├── hooks
    └── use-transaction.ts
└── lib
    └── minting-utils.ts


/Procfile:
--------------------------------------------------------------------------------
1 | web: npm start


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-cardano/cardano-starter-kit/HEAD/assets/logo.png


--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-cardano/cardano-starter-kit/HEAD/public/favicon.png


--------------------------------------------------------------------------------
/assets/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/use-cardano/cardano-starter-kit/HEAD/assets/logo-white.png


--------------------------------------------------------------------------------
/pages/api/blockfrost/[[...all]].ts:
--------------------------------------------------------------------------------
1 | export { blockfrostProxy as default } from "use-cardano-blockfrost-proxy"
2 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | html {
6 |     @apply dark:bg-gray-800;
7 | }


--------------------------------------------------------------------------------
/.env.template:
--------------------------------------------------------------------------------
1 | BLOCKFROST_PROJECT_ID_TESTNET=testnetMySecretBlockFrostProjectId
2 | BLOCKFROST_PROJECT_ID_PREVIEW=previewMySecretBlockFrostProjectId
3 | BLOCKFROST_PROJECT_ID_MAINNET=mainnetMySecretBlockFrostProjectId
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./pages/**/*.{js,ts,jsx,tsx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx}",
 6 |     "./layouts/**/*.{js,ts,jsx,tsx}",
 7 |   ],
 8 |   theme: {
 9 |     extend: {},
10 |   },
11 |   plugins: [],
12 | }


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document"
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 | 
 8 |       <body>
 9 |         <Main />
10 | 
11 |         <NextScript />
12 |       </body>
13 |     </Html>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   swcMinify: true,
 5 |   webpack: (config) => {
 6 |     config.experiments = {
 7 |       asyncWebAssembly: true,
 8 |       topLevelAwait: true,
 9 |       layers: true, // optional, with some bundlers/frameworks it doesn't work without
10 |     }
11 | 
12 |     return config
13 |   },
14 | }
15 | 
16 | module.exports = nextConfig
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/pages/404.tsx:
--------------------------------------------------------------------------------
 1 | import { Inter } from "@next/font/google"
 2 | 
 3 | const inter = Inter({ subsets: ["latin"] })
 4 | 
 5 | const notFoundPage = () => {
 6 |   return (
 7 |     <div className="flex justify-center items-center h-[calc(100vh-96px)] transition-all text-blue-400">
 8 |       <h1 style={inter.style} className="uppercase text-5xl -mt-20 font-bold tracking-wider rounded-3xl drop-shadow-2xl drop-shadow-blue-400 p-4">
 9 |         404 <span className="font-normal">|</span> Not Found
10 |       </h1>
11 |     </div>
12 |   )
13 | }
14 | 
15 | export default notFoundPage
16 | 


--------------------------------------------------------------------------------
/pages/500.tsx:
--------------------------------------------------------------------------------
 1 | import { Inter } from "@next/font/google"
 2 | 
 3 | const inter = Inter({ subsets: ["latin"] })
 4 | 
 5 | const notFoundPage = () => {
 6 |   return (
 7 |     <div className="flex justify-center items-center h-[calc(100vh-96px)] transition-all text-blue-400">
 8 |       <h1
 9 |         style={inter.style}
10 |         className="uppercase text-5xl -mt-20 font-bold tracking-wider rounded-3xl drop-shadow-2xl drop-shadow-blue-400 p-4"
11 |       >
12 |         500 <span className="font-normal">|</span> Internal Server Error
13 |       </h1>
14 |     </div>
15 |   )
16 | }
17 | 
18 | export default notFoundPage
19 | 


--------------------------------------------------------------------------------
/pages/about.tsx:
--------------------------------------------------------------------------------
 1 | import { CommandLineIcon } from "components/icons/CommandLineIcon"
 2 | 
 3 | import { Inter } from "@next/font/google"
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] })
 6 | 
 7 | export default function About() {
 8 |   return (
 9 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
10 |       <h1
11 |         style={inter.style}
12 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
13 |       >
14 |         About
15 |       </h1>
16 | 
17 |       <div style={inter.style} className="mt-12 mb-4"></div>
18 |     </div>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/pages/contact.tsx:
--------------------------------------------------------------------------------
 1 | import { CommandLineIcon } from "components/icons/CommandLineIcon"
 2 | 
 3 | import { Inter } from "@next/font/google"
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] })
 6 | 
 7 | export default function About() {
 8 |   return (
 9 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
10 |       <h1
11 |         style={inter.style}
12 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
13 |       >
14 |         Contact
15 |       </h1>
16 | 
17 |       <div style={inter.style} className="mt-12 mb-4"></div>
18 |     </div>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/pages/licensing.tsx:
--------------------------------------------------------------------------------
 1 | import { CommandLineIcon } from "components/icons/CommandLineIcon"
 2 | 
 3 | import { Inter } from "@next/font/google"
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] })
 6 | 
 7 | export default function About() {
 8 |   return (
 9 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
10 |       <h1
11 |         style={inter.style}
12 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
13 |       >
14 |         Licensing
15 |       </h1>
16 | 
17 |       <div style={inter.style} className="mt-12 mb-4"></div>
18 |     </div>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/pages/privacy-policy.tsx:
--------------------------------------------------------------------------------
 1 | import { CommandLineIcon } from "components/icons/CommandLineIcon"
 2 | 
 3 | import { Inter } from "@next/font/google"
 4 | 
 5 | const inter = Inter({ subsets: ["latin"] })
 6 | 
 7 | export default function PrivacyPolicy() {
 8 |   return (
 9 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
10 |       <h1
11 |         style={inter.style}
12 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
13 |       >
14 |         Privacy Policy
15 |       </h1>
16 | 
17 |       <div style={inter.style} className="mt-12 mb-4"></div>
18 |     </div>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "sourceMap": true,
 5 |     "target": "ES2020",
 6 |     "lib": ["dom", "dom.iterable", "esnext"],
 7 |     "allowJs": true,
 8 |     "skipLibCheck": true,
 9 |     "strict": true,
10 |     "forceConsistentCasingInFileNames": true,
11 |     "noEmit": true,
12 |     "esModuleInterop": true,
13 |     "module": "esnext",
14 |     "moduleResolution": "node",
15 |     "resolveJsonModule": true,
16 |     "isolatedModules": true,
17 |     "jsx": "preserve",
18 |     "incremental": true
19 |   },
20 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
21 |   "exclude": ["node_modules"]
22 | }
23 | 


--------------------------------------------------------------------------------
/components/icons/CommandLineIcon.tsx:
--------------------------------------------------------------------------------
 1 | import { twMerge } from "tailwind-merge"
 2 | 
 3 | type Props = {
 4 |   className?: string
 5 | }
 6 | 
 7 | export const CommandLineIcon = ({ className }: Props) => (
 8 |   <svg
 9 |     className={twMerge("w-6 h-6", className)}
10 |     xmlns="http://www.w3.org/2000/svg"
11 |     fill="none"
12 |     viewBox="0 0 24 24"
13 |     strokeWidth={1.5}
14 |     stroke="currentColor"
15 |   >
16 |     <path
17 |       strokeLinecap="round"
18 |       strokeLinejoin="round"
19 |       d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
20 |     />
21 |   </svg>
22 | )
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Cardano Starter Kit
 2 | 
 3 | Build Web3 applications on Cardano with [use-cardano](https://use-cardano.alangaming.com) and [Lucid](https://lucid.spacebudz.io/)
 4 | 
 5 | ## What's included?
 6 | 
 7 | - [lucid-cardano](https://www.github.com/spacebudz/lucid)
 8 | - [use-cardano](https://www.github.com/use-cardano/use-cardano)
 9 | - [Next.js](https://nextjs.org/) with [TypeScript](https://www.typescriptlang.org/)
10 | - [Tailwind CSS](https://tailwindcss.com/)
11 | 
12 | ## run instructions
13 | 
14 | set up your environment variables in `.env.local` or elsewhere in your system (see `.env.template`)
15 | 
16 | ```sh
17 | pnpm i && pnpm dev
18 | ```
19 | 
20 | ## Docs
21 | 
22 | - [use-cardano](https://use-cardano.alangaming.com)
23 | - [Lucid](https://lucid.spacebudz.io/)
24 | 
25 | ## license
26 | 
27 | MIT
28 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import "../styles/globals.css"
 3 | import "use-cardano/styles/use-cardano.css"
 4 | import "../styles/use-cardano-overrides.css"
 5 | 
 6 | import type { AppProps } from "next/app"
 7 | import { CardanoProvider, CardanoToaster, UseCardanoOptions } from "use-cardano"
 8 | import { DefaultLayout } from "layouts/DefaultLayout"
 9 | 
10 | const options: UseCardanoOptions = {
11 |   allowedNetworks: ["Testnet"],
12 |   testnetNetwork: "Preview",
13 |   node: {
14 |     provider: "blockfrost-proxy",
15 |     proxyUrl: "/api/blockfrost",
16 |   },
17 | }
18 | 
19 | export default function App({ Component, pageProps }: AppProps) {
20 |   return (
21 |     <CardanoProvider options={options}>
22 |       <DefaultLayout>
23 |         <Component {...pageProps} />
24 |       </DefaultLayout>
25 | 
26 |       <CardanoToaster />
27 |     </CardanoProvider>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/layouts/DefaultLayout.tsx:
--------------------------------------------------------------------------------
 1 | import { Footer } from "components/Footer"
 2 | import { Navigation } from "components/Navigation"
 3 | import Head from "next/head"
 4 | import { PropsWithChildren } from "react"
 5 | 
 6 | export const DefaultLayout = ({ children }: PropsWithChildren<{}>) => {
 7 |   return (
 8 |     <>
 9 |       <Head>
10 |         <title>Cardano Starter Kit</title>
11 | 
12 |         <meta name="description" content="Build Web3 applications on Cardano" />
13 | 
14 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
15 | 
16 |         <link rel="icon" href="/favicon.png" />
17 |         <link rel="icon" href="/favicon.svg" />
18 |       </Head>
19 | 
20 |       <div className="container mx-auto px-4">
21 |         <Navigation />
22 | 
23 |         <main className="h-[calc(100vh-295px)] pt-12">{children}</main>
24 | 
25 |         <Footer />
26 |       </div>
27 |     </>
28 |   )
29 | }
30 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Alan Smithee
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "cardano-web3-dapp-starter-kit",
 3 |   "engines": {
 4 |     "node": "^16.15"
 5 |   },
 6 |   "version": "0.1.0",
 7 |   "private": true,
 8 |   "license": "MIT",
 9 |   "scripts": {
10 |     "dev": "concurrently \"next dev -p 4202\" \"open-cli http://localhost:4202\"",
11 |     "build": "next build",
12 |     "start": "next start",
13 |     "lint": "next lint"
14 |   },
15 |   "dependencies": {
16 |     "@next/font": "13.1.1",
17 |     "@types/node": "18.11.18",
18 |     "@types/react": "18.0.26",
19 |     "@types/react-dom": "18.0.10",
20 |     "eslint": "8.30.0",
21 |     "eslint-config-next": "13.1.1",
22 |     "http-proxy": "^1.18.1",
23 |     "lucid-cardano": "^0.8.3",
24 |     "next": "13.1.1",
25 |     "react": "18.2.0",
26 |     "react-dom": "18.2.0",
27 |     "sharp": "^0.31.3",
28 |     "tailwind-merge": "^1.8.1",
29 |     "typescript": "4.9.4",
30 |     "use-cardano": "1.0.0",
31 |     "use-cardano-blockfrost-proxy": "^1.0.0"
32 |   },
33 |   "devDependencies": {
34 |     "autoprefixer": "^10.4.13",
35 |     "concurrently": "^7.6.0",
36 |     "open-cli": "^7.1.0",
37 |     "postcss": "^8.4.20",
38 |     "tailwindcss": "^3.2.4"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/styles/use-cardano-overrides.css:
--------------------------------------------------------------------------------
 1 | .cardano-wallet-selector__button {
 2 |   @apply bg-blue-300 min-w-[225px] dark:bg-transparent border-blue-300 dark:border-white text-white font-bold tracking-wider p-0 min-h-0 h-10;
 3 | }
 4 | 
 5 | .cardano-wallet-selector__button img {
 6 |   @apply w-5 h-5;
 7 | }
 8 | 
 9 | .cardano-wallet-selector__menu {
10 |   @apply dark:bg-gray-800 opacity-95;
11 | }
12 | 
13 | .cardano-wallet-selector__menu__item,
14 | .cardano-wallet-selector__menu__item:last-child {
15 |   @apply border-blue-300 dark:border-white;
16 | }
17 | 
18 | .cardano-wallet-selector__menu__item button {
19 |   @apply bg-blue-300 dark:bg-transparent font-bold tracking-wider transition-colors duration-200 ease-in-out;
20 | }
21 | 
22 | .cardano-wallet-selector__menu__item button:not(:disabled):hover {
23 |   @apply bg-blue-400 dark:bg-transparent;
24 | }
25 | 
26 | .cardano-wallet-selector__menu__item__text,
27 | .cardano-wallet-selector__menu__item--current__checkmark,
28 | .cardano-wallet-selector__menu__item__disconnect,
29 | .cardano-wallet-selector__menu__item button {
30 |   @apply text-white;
31 | }
32 | 
33 | .cardano-wallet-selector__button__loading-spinner {
34 |   @apply pt-0.5 pb-1;
35 | }
36 | 
37 | .cardano-wallet-selector__button__loading-spinner:after {
38 |   @apply dark:border-t-white dark:border-b-white border-t-gray-800 border-b-gray-800;
39 | }
40 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 3 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 4 |     width="222.000000pt" height="222.000000pt" viewBox="0 0 222.000000 222.000000"
 5 |     preserveAspectRatio="xMidYMid meet">
 6 | 
 7 |     <style>
 8 |         path {
 9 |             fill: #0030A9;
10 |         }
11 |         
12 |         @media ( prefers-color-scheme: dark ) {
13 |             path { fill: #FFFFFF; }
14 |         }
15 |     </style>
16 | 
17 |     <g transform="translate(0.000000,222.000000) scale(0.100000,-0.100000)"
18 |         fill="#000000" stroke="none">
19 | 
20 |         <path
21 |             d="M1066 2194 c-14 -13 -16 -66 -16 -430 0 -250 4 -423 10 -434 14 -26
22 | 57 -34 86 -15 l24 15 0 425 c0 465 1 455 -60 455 -16 0 -36 -7 -44 -16z" />
23 |         <path
24 |             d="M404 1658 c-127 -137 -211 -298 -250 -482 -20 -96 -20 -290 1 -390
25 | 42 -201 137 -370 290 -514 139 -131 324 -223 507 -252 109 -18 311 -8 413 20
26 | 273 74 506 271 630 532 109 230 119 523 24 768 -36 94 -111 217 -179 293 -57
27 | 63 -93 74 -130 37 -30 -30 -25 -54 24 -109 301 -339 300 -833 -2 -1153 -169
28 | -178 -374 -269 -612 -270 -134 0 -224 17 -335 63 -531 221 -690 888 -319 1334
29 | 35 43 64 85 64 94 0 9 -7 27 -16 39 -24 34 -73 30 -110 -10z" />
30 |     </g>
31 | </svg>


--------------------------------------------------------------------------------
/hooks/use-transaction.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useState } from "react"
 2 | import { useCardano } from "use-cardano"
 3 | 
 4 | const useTransaction = () => {
 5 |   const { isValid, lucid } = useCardano()
 6 | 
 7 |   const [successMessage, setSuccessMessage] = useState<string>()
 8 |   const [error, setError] = useState<Error | undefined>()
 9 |   const [lovelace, setLovelace] = useState(0)
10 |   const [toAccount, setToAccount] = useState("")
11 | 
12 |   const sendTransaction = useCallback(async () => {
13 |     if (!lucid || !toAccount || !lovelace) return
14 | 
15 |     try {
16 |       const tx = await lucid
17 |         .newTx()
18 |         .payToAddress(toAccount, { lovelace: BigInt(lovelace) })
19 |         .complete()
20 | 
21 |       const signedTx = await tx.sign().complete()
22 | 
23 |       const txHash = await signedTx.submit()
24 | 
25 |       setLovelace(0)
26 |       setToAccount("")
27 |       setSuccessMessage(`Transaction submitted with hash ${txHash}`)
28 |     } catch (e) {
29 |       if (e instanceof Error) setError(e)
30 |       else console.error(e)
31 |     }
32 |   }, [lucid, toAccount, lovelace])
33 | 
34 |   const lovelaceSetter = useCallback((value: string) => {
35 |     setError(undefined)
36 |     setSuccessMessage(undefined)
37 | 
38 |     const parsed = parseInt(value)
39 |     if (isNaN(parsed)) return
40 |     setLovelace(parsed)
41 |   }, [])
42 | 
43 |   const toAccountSetter = useCallback((value: string) => {
44 |     setError(undefined)
45 |     setSuccessMessage(undefined)
46 |     setToAccount(value)
47 |   }, [])
48 | 
49 |   return {
50 |     error,
51 |     successMessage,
52 |     lovelace,
53 |     setLovelace: lovelaceSetter,
54 |     toAccount,
55 |     setToAccount: toAccountSetter,
56 |     sendTransaction,
57 |     canTransact: isValid && lovelace > 0 && toAccount,
58 |   }
59 | }
60 | 
61 | export { useTransaction }
62 | 


--------------------------------------------------------------------------------
/components/Navigation.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link"
 2 | import { useRouter } from "next/router"
 3 | import { useMemo } from "react"
 4 | import { twMerge } from "tailwind-merge"
 5 | import { CardanoWalletSelector } from "use-cardano"
 6 | 
 7 | const className =
 8 |   "h-10 text-white font-bold tracking-widest uppercase rounded mr-2 px-6 flex items-center dark:hover:text-white bg-blue-300 dark:bg-transparent dark:hover:bg-transparent dark:shadow-none shadow shadow-blue-100s hover:shadow-none hover:bg-blue-400 transition-all duration-300 hover:underline underline-offset-4"
 9 | 
10 | const activeClassName =
11 |   "text-black dark:text-white ark:bg-transparent dark:shadow-none dark:hover:bg-transparent dark:underline"
12 | 
13 | export const Navigation = () => {
14 |   const { asPath } = useRouter()
15 | 
16 |   const isHome = useMemo(() => asPath === "/", [asPath])
17 |   const isTransact = useMemo(() => asPath === "/transact", [asPath])
18 |   const isSign = useMemo(() => asPath === "/sign", [asPath])
19 |   const isMint = useMemo(() => asPath === "/mint", [asPath])
20 | 
21 |   return (
22 |     <nav className="flex h-24 items-center justify-between w-full py-2">
23 |       <div className="flex items-center">
24 |         <Link href="/">
25 |           <button className={twMerge(className, isHome && activeClassName)}>home</button>
26 |         </Link>
27 | 
28 |         <Link href="/transact">
29 |           <button className={twMerge(className, isTransact && activeClassName)}>transact</button>
30 |         </Link>
31 | 
32 |         <Link href="/sign">
33 |           <button className={twMerge(className, isSign && activeClassName)}>Sign</button>
34 |         </Link>
35 | 
36 |         <Link href="/mint">
37 |           <button className={twMerge(className, isMint && activeClassName)}>Mint</button>
38 |         </Link>
39 |       </div>
40 | 
41 |       <div>
42 |         <CardanoWalletSelector />
43 |       </div>
44 |     </nav>
45 |   )
46 | }
47 | 


--------------------------------------------------------------------------------
/lib/minting-utils.ts:
--------------------------------------------------------------------------------
 1 | import { Lucid, MintingPolicy, PolicyId, TxHash, Unit, utf8ToHex } from "lucid-cardano"
 2 | 
 3 | interface Options {
 4 |   lucid: Lucid
 5 |   address: string
 6 |   name: string
 7 | }
 8 | 
 9 | // fully qualified asset name, hex encoded policy id + name
10 | const getUnit = (policyId: PolicyId, name: string): Unit => policyId + utf8ToHex(name)
11 | 
12 | const getMintingPolicy = (lucid: Lucid, address: string) => {
13 |   const { paymentCredential } = lucid.utils.getAddressDetails(address)
14 | 
15 |   const mintingPolicy: MintingPolicy = lucid.utils.nativeScriptFromJson({
16 |     type: "all",
17 |     scripts: [{ type: "sig", keyHash: paymentCredential?.hash! }],
18 |   })
19 | 
20 |   return mintingPolicy
21 | }
22 | 
23 | const getPolicyId = (lucid: Lucid, mintingPolicy: MintingPolicy) => {
24 |   const policyId: PolicyId = lucid.utils.mintingPolicyToId(mintingPolicy)
25 | 
26 |   return policyId
27 | }
28 | 
29 | export const mintNFT = async ({ lucid, address, name }: Options): Promise<TxHash> => {
30 |   const mintingPolicy = getMintingPolicy(lucid, address)
31 |   const policyId = getPolicyId(lucid, mintingPolicy)
32 |   const unit = getUnit(policyId, name)
33 | 
34 |   const tx = await lucid
35 |     .newTx()
36 |     .mintAssets({ [unit]: 1n })
37 |     .attachMintingPolicy(mintingPolicy)
38 |     .complete()
39 | 
40 |   const signedTx = await tx.sign().complete()
41 | 
42 |   const txHash = await signedTx.submit()
43 | 
44 |   return txHash
45 | }
46 | 
47 | export const burnNFT = async ({ lucid, address, name }: Options): Promise<TxHash> => {
48 |   const mintingPolicy = getMintingPolicy(lucid, address)
49 |   const policyId = getPolicyId(lucid, mintingPolicy)
50 |   const unit = getUnit(policyId, name)
51 | 
52 |   const tx = await lucid
53 |     .newTx()
54 |     .mintAssets({ [unit]: -1n })
55 |     .attachMintingPolicy(mintingPolicy)
56 |     .complete()
57 | 
58 |   const signedTx = await tx.sign().complete()
59 | 
60 |   const txHash = await signedTx.submit()
61 | 
62 |   return txHash
63 | }
64 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import LogoWhite from "assets/logo-white.png"
 2 | import Logo from "assets/logo.png"
 3 | import Image from "next/image"
 4 | import Link from "next/link"
 5 | import { useRouter } from "next/router"
 6 | import { useMemo } from "react"
 7 | import { twMerge } from "tailwind-merge"
 8 | 
 9 | const linkClassName = "mr-4 hover:underline md:mr-6 underline-offset-2"
10 | const companySiteUrl = "https://use-cardano.alangaming.com/"
11 | 
12 | export const Footer = () => {
13 |   const { asPath } = useRouter()
14 | 
15 |   const isAbout = useMemo(() => asPath === "/about", [asPath])
16 |   const isPrivacyPolicy = useMemo(() => asPath === "/privacy-policy", [asPath])
17 |   const isLicensing = useMemo(() => asPath === "/licensing", [asPath])
18 |   const isContact = useMemo(() => asPath === "/contact", [asPath])
19 | 
20 |   return (
21 |     <footer className="p-4 md:px-6 md:py-8">
22 |       <div className="sm:flex sm:items-center sm:justify-between">
23 |         <span className="block dark:hidden">
24 |           <a href={companySiteUrl} className="flex items-center mb-4 sm:mb-0">
25 |             <Image src={Logo} width={200} height={22.2} alt="use-cardano Logo" />
26 |           </a>
27 |         </span>
28 | 
29 |         <span className="hidden dark:block">
30 |           <a href={companySiteUrl} className="flex items-center mb-4 sm:mb-0">
31 |             <Image src={LogoWhite} width={200} height={22.2} alt="use-cardano Logo" />
32 |           </a>
33 |         </span>
34 | 
35 |         <ul className="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
36 |           <li>
37 |             <Link href="/about" className={twMerge(linkClassName, isAbout && "underline")}>
38 |               About
39 |             </Link>
40 |           </li>
41 |           <li>
42 |             <Link
43 |               href="/privacy-policy"
44 |               className={twMerge(linkClassName, isPrivacyPolicy && "underline")}
45 |             >
46 |               Privacy Policy
47 |             </Link>
48 |           </li>
49 |           <li>
50 |             <Link href="/licensing" className={twMerge(linkClassName, isLicensing && "underline")}>
51 |               Licensing
52 |             </Link>
53 |           </li>
54 |           <li>
55 |             <Link href="/contact" className={twMerge(linkClassName, isContact && "underline")}>
56 |               Contact
57 |             </Link>
58 |           </li>
59 |         </ul>
60 |       </div>
61 |       <hr className="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
62 |       <span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
63 |         © 2022{" "}
64 |         <a href={companySiteUrl} className="hover:underline">
65 |           use-cardano™
66 |         </a>
67 |         . All Rights Reserved.
68 |       </span>
69 |     </footer>
70 |   )
71 | }
72 | 


--------------------------------------------------------------------------------
/pages/transact.tsx:
--------------------------------------------------------------------------------
 1 | import { useTransaction } from "hooks/use-transaction"
 2 | import { useEffect } from "react"
 3 | import { useCardano } from "use-cardano"
 4 | 
 5 | import { Inter } from "@next/font/google"
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] })
 8 | 
 9 | export default function Transact() {
10 |   const { isValid, hideToaster, showToaster } = useCardano()
11 |   const tx = useTransaction()
12 | 
13 |   useEffect(() => {
14 |     if (!tx.successMessage) {
15 |       hideToaster
16 |     } else {
17 |       showToaster("Success!", tx.successMessage)
18 |     }
19 |   }, [tx.successMessage, hideToaster, showToaster])
20 | 
21 |   return (
22 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
23 |       <h1
24 |         style={inter.style}
25 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
26 |       >
27 |         Transact
28 |       </h1>
29 | 
30 |       <div style={inter.style} className="my-4 text-center">
31 |         Using Lucid, we can easily send transactions on the Cardano blockchain.
32 |       </div>
33 | 
34 |       <div className="text-left my-8">
35 |         <div className="my-4">
36 |           <label className="flex flex-col w-100">
37 |             <span className="text-sm lowercase mb-1">To Account</span>
38 | 
39 |             <input
40 |               className="rounded py-1 px-2 text-gray-800 border"
41 |               type="text"
42 |               placeholder="addr..."
43 |               value={tx.toAccount}
44 |               onChange={(e) => tx.setToAccount(e.target.value?.toString())}
45 |             />
46 |           </label>
47 |         </div>
48 | 
49 |         <div className="my-4">
50 |           <label className="flex flex-col w-40">
51 |             <span className="text-sm lowercase mb-1">Lovelace</span>
52 | 
53 |             <input
54 |               className="rounded py-1 px-2 text-gray-800 border"
55 |               type="number"
56 |               min="0"
57 |               step="1000"
58 |               name="amount"
59 |               value={tx.lovelace}
60 |               onChange={(e) => tx.setLovelace(e.target.value?.toString())}
61 |             />
62 |           </label>
63 |         </div>
64 | 
65 |         <div className="my-4">
66 |           <button
67 |             className="border hover:bg-blue-400 text-white my-4 w-40 py-2 cursor-pointer transition-colors disabled:cursor-not-allowed disabled:text-gray-200 rounded bg-blue-300 disabled:bg-blue-200 dark:bg-white dark:text-gray-800 dark:disabled:bg-white dark:hover:bg-white font-bold uppercase"
68 |             disabled={!tx.canTransact || !!tx.error}
69 |             onClick={tx.sendTransaction}
70 |           >
71 |             Send
72 |           </button>
73 | 
74 |           <div className="italic">
75 |             {isValid === false ? (
76 |               <p>
77 |                 <small>connect a wallet to send a transaction</small>
78 |               </p>
79 |             ) : !tx.successMessage && !tx.error && !tx.canTransact ? (
80 |               <p>
81 |                 <small>specify a lovelace amount and account to send a transaction</small>
82 |               </p>
83 |             ) : tx.error ? (
84 |               <p>
85 |                 <small>{tx.error.message}</small>
86 |               </p>
87 |             ) : null}
88 |           </div>
89 |         </div>
90 |       </div>
91 |     </div>
92 |   )
93 | }
94 | 


--------------------------------------------------------------------------------
/pages/sign.tsx:
--------------------------------------------------------------------------------
  1 | import { utf8ToHex } from "lucid-cardano"
  2 | import { useCallback, useMemo, useState } from "react"
  3 | import { useCardano, utility } from "use-cardano"
  4 | 
  5 | import { Inter } from "@next/font/google"
  6 | 
  7 | const inter = Inter({ subsets: ["latin"] })
  8 | 
  9 | export default function Sign() {
 10 |   const {
 11 |     lucid,
 12 |     isValid,
 13 |     showToaster,
 14 |     hideToaster,
 15 |     account: { address },
 16 |   } = useCardano()
 17 | 
 18 |   const [message, setMessage] = useState<string>()
 19 |   const [isSigning, setIsSigning] = useState(false)
 20 | 
 21 |   const signMessage = useCallback(async () => {
 22 |     if (!lucid || !address || !message) return
 23 | 
 24 |     setIsSigning(true)
 25 | 
 26 |     try {
 27 |       const payload = utf8ToHex(message)
 28 | 
 29 |       const signedMessage = await lucid.newMessage(address, payload).sign()
 30 |       const hasSigned: boolean = lucid.verifyMessage(address, payload, signedMessage)
 31 | 
 32 |       if (!hasSigned) throw new Error("Could not sign message")
 33 | 
 34 |       showToaster("Signed message", message)
 35 |       setMessage(undefined)
 36 |     } catch (e) {
 37 |       if (utility.isError(e)) showToaster("Could not sign message", e.message)
 38 |       else if (typeof e === "string") showToaster("Could not sign message", e)
 39 |     } finally {
 40 |       setIsSigning(false)
 41 |     }
 42 |   }, [lucid, address, message, showToaster])
 43 | 
 44 |   const canSign = useMemo(() => isValid && !isSigning && !!message, [isValid, isSigning, message])
 45 | 
 46 |   return (
 47 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
 48 |       <h1
 49 |         style={inter.style}
 50 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
 51 |       >
 52 |         Sign a Message
 53 |       </h1>
 54 | 
 55 |       <div style={inter.style} className="my-4 text-center">
 56 |         Using Lucid, we can sign a message on the Cardano blockchain.
 57 |       </div>
 58 | 
 59 |       <div className="text-left my-8">
 60 |         <div className="my-4">
 61 |           <label className="flex flex-col w-100">
 62 |             <span className="text-sm lowercase mb-1">Message</span>
 63 | 
 64 |             <input
 65 |               className="rounded py-1 px-2 text-gray-800 border"
 66 |               name="message"
 67 |               placeholder="Hello, Cardano!"
 68 |               value={message || ""}
 69 |               onChange={(e) => setMessage(e.target.value?.toString())}
 70 |             />
 71 |           </label>
 72 |         </div>
 73 | 
 74 |         <div className="my-4">
 75 |           <button
 76 |             disabled={!canSign}
 77 |             className="border hover:bg-blue-400 text-white my-4 w-40 py-2 cursor-pointer transition-colors disabled:cursor-not-allowed disabled:text-gray-200 rounded bg-blue-300 disabled:bg-blue-200 dark:bg-white dark:text-gray-800 dark:disabled:bg-white dark:hover:bg-white font-bold uppercase"
 78 |             onClick={() => {
 79 |               hideToaster()
 80 |               signMessage()
 81 |             }}
 82 |           >
 83 |             sign
 84 |           </button>
 85 | 
 86 |           <div className="italic">
 87 |             {isValid === false ? (
 88 |               <p>
 89 |                 <small>connect a wallet to send a transaction</small>
 90 |               </p>
 91 |             ) : isSigning ? (
 92 |               <p>
 93 |                 <small>Signing...</small>
 94 |               </p>
 95 |             ) : null}
 96 |           </div>
 97 |         </div>
 98 |       </div>
 99 |     </div>
100 |   )
101 | }
102 | 


--------------------------------------------------------------------------------
/pages/mint.tsx:
--------------------------------------------------------------------------------
 1 | import * as utils from "lib/minting-utils"
 2 | import { useCallback, useMemo, useState } from "react"
 3 | import { useCardano, utility } from "use-cardano"
 4 | 
 5 | import { Inter } from "@next/font/google"
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] })
 8 | 
 9 | export default function Mint() {
10 |   const { lucid, account, showToaster, hideToaster } = useCardano()
11 | 
12 |   const [name, setName] = useState("")
13 | 
14 |   const mintNFT = useCallback(async () => {
15 |     try {
16 |       if (!lucid || !account?.address || !name) return
17 | 
18 |       const nftTx = await utils.mintNFT({ lucid, address: account.address, name })
19 | 
20 |       showToaster("Minted NFT", `Transaction: ${nftTx}`)
21 |     } catch (e) {
22 |       if (utility.isError(e)) showToaster("Could not mint NFT", e.message)
23 |       else if (typeof e === "string") showToaster("Could not mint NFT", e)
24 |     }
25 |   }, [lucid, account?.address, showToaster, name])
26 | 
27 |   const burnNFT = useCallback(async () => {
28 |     try {
29 |       if (!lucid || !account?.address || !name) return
30 | 
31 |       const nftTx = await utils.burnNFT({ lucid, address: account?.address, name })
32 | 
33 |       showToaster("Burned NFT", `Transaction: ${nftTx}`)
34 |     } catch (e) {
35 |       if (utility.isError(e)) showToaster("Could not burn NFT", e.message)
36 |       else if (typeof e === "string") showToaster("Could not burn NFT", e)
37 |     }
38 |   }, [lucid, account?.address, showToaster, name])
39 | 
40 |   const canMint = useMemo(() => lucid && account?.address && name, [lucid, account?.address, name])
41 | 
42 |   return (
43 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
44 |       <h1
45 |         style={inter.style}
46 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
47 |       >
48 |         Mint a Token
49 |       </h1>
50 | 
51 |       <div style={inter.style} className="my-4 text-center">
52 |         Using Lucid, we can mint a token on the Cardano blockchain.
53 |       </div>
54 | 
55 |       <div className="text-left my-8">
56 |         <div className="my-4">
57 |           <label className="flex flex-col w-100">
58 |             <span className="text-sm lowercase mb-1">NFT name</span>
59 | 
60 |             <input
61 |               className="rounded py-1 px-2 text-gray-800 border"
62 |               name="message"
63 |               placeholder="My NFT name"
64 |               value={name || ""}
65 |               onChange={(e) => setName(e.target.value?.toString())}
66 |             />
67 |           </label>
68 |         </div>
69 | 
70 |         <div className="my-4">
71 |           <button
72 |             disabled={!canMint}
73 |             className="border hover:bg-blue-400 text-white my-4 w-40 py-2 cursor-pointer transition-colors disabled:cursor-not-allowed disabled:text-gray-200 rounded bg-blue-300 disabled:bg-blue-200 dark:bg-white dark:text-gray-800 dark:disabled:bg-white dark:hover:bg-white font-bold uppercase"
74 |             onClick={() => {
75 |               hideToaster()
76 |               mintNFT()
77 |             }}
78 |           >
79 |             mint
80 |           </button>
81 | 
82 |           <button
83 |             disabled={!canMint}
84 |             className="border ml-4 hover:bg-blue-400 text-white w-40 py-2 cursor-pointer transition-colors disabled:cursor-not-allowed disabled:text-gray-200 rounded bg-blue-300 disabled:bg-blue-200 dark:bg-white dark:text-gray-800 dark:disabled:bg-white dark:hover:bg-white font-bold uppercase"
85 |             onClick={() => {
86 |               hideToaster()
87 |               burnNFT()
88 |             }}
89 |           >
90 |             burn
91 |           </button>
92 |         </div>
93 |       </div>
94 |     </div>
95 |   )
96 | }
97 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import { CommandLineIcon } from "components/icons/CommandLineIcon"
  2 | 
  3 | import { Inter } from "@next/font/google"
  4 | 
  5 | const inter = Inter({ subsets: ["latin"] })
  6 | 
  7 | export default function Home() {
  8 |   return (
  9 |     <div className="text-center max-w-4xl m-auto text-gray-900 dark:text-gray-100">
 10 |       <h1
 11 |         style={inter.style}
 12 |         className="mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl"
 13 |       >
 14 |         Cardano Starter Kit
 15 |       </h1>
 16 | 
 17 |       <p
 18 |         style={inter.style}
 19 |         className="mb-6 text-lg font-normal text-gray-600 lg:text-xl sm:px-16 xl:px-48 dark:text-gray-400"
 20 |       >
 21 |         Build Web3 applications on Cardano
 22 |       </p>
 23 | 
 24 |       <div style={inter.style} className="my-4 text-left ">
 25 |         This is a starter kit for building cardano web3 applications. It uses{" "}
 26 |         <a
 27 |           className="underline underline-offset-2"
 28 |           href="https://use-cardano.alangaming.com"
 29 |           rel="noreferrer"
 30 |           target="_blank"
 31 |         >
 32 |           use-cardano
 33 |         </a>{" "}
 34 |         which is a React hook, context, and set of components for interacting with the Cardano
 35 |         blockchain, which is built on top of{" "}
 36 |         <a
 37 |           className="underline underline-offset-2"
 38 |           href="https://lucid.spacebudz.io/"
 39 |           rel="noreferrer"
 40 |           target="_blank"
 41 |         >
 42 |           Lucid
 43 |         </a>{" "}
 44 |         and provides a simple API for interacting with the Cardano blockchain.
 45 |       </div>
 46 | 
 47 |       <div style={inter.style} className="my-4 text-left">
 48 |         The aim of this project is to serve as a simple starting point, but also to help developers
 49 |         get into Cardano dApp development. With that said, this tech stack provides all
 50 |         functionality needed for writing off chain code for dApps and should scale with your needs.
 51 |       </div>
 52 | 
 53 |       <div style={inter.style} className="my-4 text-left">
 54 |         <span className="italic text-gray-500">
 55 |           In an upcoming version of this boilerplate, we aim to include a DSL (Domain Specific
 56 |           Language) for the on-chain components of Cardano dApp development. We are still deciding
 57 |           on which language to use, but we are considering either{" "}
 58 |           <a
 59 |             className="underline underline-offset-2"
 60 |             href="https://www.hyperion-bt.org/Helios-Book/intro.html"
 61 |             rel="noreferrer"
 62 |             target="_blank"
 63 |           >
 64 |             Helios
 65 |           </a>
 66 |           ,{" "}
 67 |           <a
 68 |             className="underline underline-offset-2"
 69 |             href="https://aiken-lang.github.io/aiken/"
 70 |             rel="noreferrer"
 71 |             target="_blank"
 72 |           >
 73 |             Aiken
 74 |           </a>
 75 |           , or{" "}
 76 |           <a
 77 |             className="underline underline-offset-2"
 78 |             href="https://www.harmoniclabs.tech/plu-ts-docs/index.html"
 79 |             rel="noreferrer"
 80 |             target="_blank"
 81 |           >
 82 |             plu-ts
 83 |           </a>
 84 |           .
 85 |         </span>
 86 |       </div>
 87 | 
 88 |       <div style={inter.style} className="my-4 text-left">
 89 |         The starter project is built on top of Next.js, which is a React framework for building
 90 |         static and dynamic websites. It is a great choice for building dApps, as it is easy to use,
 91 |         and provides a lot of functionality out of the box. It also has a great developer
 92 |         experience, which makes it easy to get started.
 93 |       </div>
 94 | 
 95 |       <div style={inter.style} className="my-4 text-left">
 96 |         For styling, we are using Tailwind CSS, which is a utility-first CSS framework with a good
 97 |         balance of flexibility, composability, and ease of use. It is also very easy to use with
 98 |         Next.js, and provides a lot of functionality out of the box.
 99 |       </div>
100 | 
101 |       <div style={inter.style} className="mt-12 mb-4">
102 |         <a
103 |           className="underline underline-offset-4"
104 |           href="https://github.com/use-cardano/cardano-starter-kit/generate"
105 |           rel="noreferrer"
106 |           target="_blank"
107 |         >
108 |           <CommandLineIcon className="inline mr-1" />
109 |           Fork the repository to use the template
110 |         </a>
111 |       </div>
112 |     </div>
113 |   )
114 | }
115 | 


--------------------------------------------------------------------------------