diff --git a/src/pages/example--gift-card.mdx b/src/pages/example--gift-card.mdx index 49db6a8..6b05c18 100644 --- a/src/pages/example--gift-card.mdx +++ b/src/pages/example--gift-card.mdx @@ -15,16 +15,14 @@ Let's build a UI to send and redeem a gift card using smart contracts on Cardano - [x] Writing `Aiken` inter-dependent `mint` & `spend` validators. - [x] Parameterizing validators. -- [x] Using [Lucid](https://lucid.spacebudz.io/) with [Blockfrost](https://blockfrost.io)★. +- [x] Using [Blaze](https://github.com/butaneprotocol/blaze-cardano/) with Blockfrost★. - ★ We'll once again be using the `Blockfrost` provider. So have your - Blockfrost API key ready. - -- [x] Using [Deno fresh](https://fresh.deno.dev/)★. - - ★ You can install deno using these - [instructions](https://deno.land/manual@v1.29.1/getting_started/installation). + ★ You can easily get access by using [Demeter](https://demeter.run). Go + there and grab your API key by creating a Blockfrost instance on their + dashboard. +- [x] Using [SvelteKit](https://kit.svelte.dev/)★. + ★ Make sure you have Node.js installed. When encountering an unfamiliar syntax or concept, do not hesitate to refer to @@ -379,152 +377,121 @@ aiken build ## Building a frontend With the easy part out of the way we can start building a frontend to interact with our -smart contracts in the browser. Deno fresh is an interesting project for building -web applications in Deno. +smart contracts in the browser. SvelteKit is an interesting framework for building +web applications. ### Setting up -Let's generate a Deno fresh project in the same directory as our Aiken project. +Let's generate a SvelteKit project in the same directory as our Aiken project. ```sh -deno run -A -r https://fresh.deno.dev . +npm create svelte@latest . ``` -When prompted to enable Tailwind CSS say yes. - -We need lucid and we should probably add an alias for better looking imports. -Let's edit `import_map.json`. - -```json filename="import_map.json" {11-12} -{ - "imports": { - "$fresh/": "...", - "preact": "...", - "preact/": "...", - "preact-render-to-string": "...", - "@preact/signals": "...", - "@preact/signals-core": "...", - "twind": "...", - "twind/": "...", - "lucid/": "https://deno.land/x/lucid@0.9.5/", - "~/": "./" - } -} + + When prompted use the current directory, continue even though directory is not + empty, choose a skeleton project, use Svelte 5, and enable typescript. + + +We need to add Blaze now. + +```sh +npm add @blaze-cardano/sdk@latest @blaze-cardano/core@latest @blaze-cardano/query@latest @blaze-cardano/uplc@latest @blaze-cardano/wallet@latest @blaze-cardano/tx@latest ``` -We can delete a few things that come with the starter template that we don't need. +Let's add tailwindcss to our project. ```sh -rm islands/Counter.tsx -rm -rf routes/api -rm routes/\[name\].tsx +npx svelte-add@latest tailwindcss ``` -Let's also add some reusable components to our project. +When prompted just say yes to everything. -```tsx filename="components/Button.tsx" -import { JSX } from "preact"; -import { IS_BROWSER } from "$fresh/runtime.ts"; +Let's also add some reusable components to our project. -export function Button(props: JSX.HTMLAttributes) { - return ( - ``` -### Home page - -Everything we'll be doing with validators and transactions will happen fully client side. -This means we can just have our route render a single `island` component and then -we can write all of our code in this island for the most part. +```svelte filename="src/lib/components/Input.svelte" + + +
+ + +
``` -Now inside of `routes/index.tsx` we can import our new island and render it. +### Home page -```tsx filename="routes/index.tsx" {3,29} -import { Head } from "$fresh/runtime.ts"; +Everything we'll be doing with validators and transactions will happen fully client side. +This means we can just have our app render a single `+page.svelte` component and then +we can write all of our code in this page component for the most part. -import Oneshot from "~/islands/Oneshot"; +Let's edit `src/routes/+page.svelte` to contain the following code. -export default function Home() { - return ( - <> - - One Shot - +```svelte filename="src/routes/+page.svelte" + + One Shot + -
-
-

- Make a one shot minting and lock contract -

+
+
+

Make a one shot minting and lock contract

-

Redeem

- 
-            TODO: Render non-parameterized redeem validator
-
+

Redeem

+ 
+      TODO: Render non-parameterized redeem validator
+
-

Gift Card

- 
-            TODO: Render non-parameterized gift_card validator
-
-
+

Gift Card

+ 
+      TODO: Render non-parameterized gift_card validator
+
+
- -
- - ); -} +
Oneshot
+
``` -You can replace everything that was in `routes/index.tsx` with the above code. -We've left some `TODO`'s in the code to remind us to render the validators. We'll render +We've left a `TODO` in the code to remind us to render the validator. We'll render the compiled aiken code as a hex encoded string. There not much of a reason to do this, it's just kinda cool to see. Next we should load the `plutus.json` file and get the compiled aiken code. Let's create -a file called `utils.ts` and add the following code. +a file called `lib/utils.ts` and add the following code. -```ts filename="utils.ts" +```ts filename="lib/utils.ts" import { MintingPolicy, SpendingValidator } from "lucid/mod.ts"; import blueprint from "~/plutus.json" assert { type: "json" }; @@ -780,7 +747,10 @@ export function applyParams( return { redeem: { type: "PlutusV2", script: applyDoubleCborEncoding(redeem) }, - giftCard: { type: "PlutusV2", script: applyDoubleCborEncoding(giftCard) }, + giftCard: { + type: "PlutusV2", + script: applyDoubleCborEncoding(giftCard), + }, policyId, lockAddress, };