waalge/aiken
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: start switching to blaze and svelte

Browse Source
This commit is contained in:
rvcas
2024-09-03 14:11:34 -04:00
committed by Lucas
parent 94ff20253b
commit 7c1cd81554
39 changed files with 10185 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
examples/gift_card/src/app.css Normal file
View File

@@ -0,0 +1,3 @@
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

33
examples/gift_card/src/app.d.ts vendored Normal file
View File

@@ -0,0 +1,33 @@
import type { CIP30Interface } from '@blaze-cardano/wallet';
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}
type WalletOption = {
name: string;
icon: string;
apiVersion: string;
enable(): Promise<CIP30Interface>;
isEnabled(): Promise<boolean>;
};
type Cardano = {
[key: string]: WalletOption;
};
declare global {
interface Window {
cardano?: Cardano;
}
}
export {};

12
examples/gift_card/src/app.html Normal file
View File

@@ -0,0 +1,12 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

16
examples/gift_card/src/lib/components/Button.svelte Normal file
View File

@@ -0,0 +1,16 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import type { HTMLButtonAttributes } from 'svelte/elements';
interface Props extends HTMLButtonAttributes {
children: Snippet;
}
let { children, ...props }: Props = $props();
</script>
<button
{...props}
class="group inline-flex items-center justify-center rounded-full bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500 focus:outline-none active:bg-blue-800 active:text-blue-100"
>{@render children()}</button
>

21
examples/gift_card/src/lib/components/Input.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import type { HTMLInputAttributes } from 'svelte/elements';
interface Props extends HTMLInputAttributes {
children: Snippet<[]>;
}
let { id, children, ...props }: Props = $props();
</script>
<div>
<label for={id} class="mb-3 block text-sm font-medium text-gray-700">
{@render children()}
</label>
<input
{...props}
{id}
class="block w-full appearance-none rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:bg-white focus:outline-none focus:ring-blue-500 sm:text-sm"
/>
</div>

1
examples/gift_card/src/lib/index.ts Normal file
View File

@@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

17
examples/gift_card/src/lib/utils.ts Normal file
View File

@@ -0,0 +1,17 @@
import blueprint from '../../plutus.json' assert { type: 'json' };
export type Validators = {
giftCard: string;
};
export function readValidators(): Validators {
const giftCard = blueprint.validators.find((v) => v.title === 'oneshot.gift_card.spend');
if (!giftCard) {
throw new Error('Gift Card validator not found');
}
return {
giftCard: giftCard.compiledCode
};
}

5
examples/gift_card/src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script>
import '../app.css';
</script>
<slot></slot>

8
examples/gift_card/src/routes/+page.server.ts Normal file
View File

@@ -0,0 +1,8 @@
import { readValidators } from '$lib/utils';
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async () => {
const validator = readValidators().giftCard;
return { validator };
};

76
examples/gift_card/src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,76 @@
<script lang="ts">
import { Blaze, Blockfrost, WebWallet } from '@blaze-cardano/sdk';
// Components
import Input from '$lib/components/Input.svelte';
import Button from '$lib/components/Button.svelte';
// Local Types
import type { PageData } from './$types';
// Props
type Props = {
data: PageData;
};
let { data }: Props = $props();
// Page Local State
let blaze: Blaze<Blockfrost, WebWallet> | undefined = $state();
let blockfrostAPIKey = $state('');
let tokenName = $state('');
async function setupBlaze(e: Event) {
e.preventDefault();
const walletApi = await window.cardano?.eternl.enable();
if (walletApi) {
blaze = await Blaze.from(
new Blockfrost({ network: 'cardano-preview', projectId: blockfrostAPIKey }),
new WebWallet(walletApi)
);
}
}
function submitTokenName(e: Event) {
e.preventDefault();
console.log('TODO: apply params to raw validators');
}
</script>
<svelte:head>
<title>One Shot</title>
</svelte:head>
<div class="mx-auto mb-10 mt-20 max-w-2xl">
<div class="mb-10">
<h2 class="text-lg font-semibold text-gray-900">Make a one shot minting and lock contract</h2>
<h3 class="mb-2 mt-4">Gift Card</h3>
<pre class="overflow-x-scroll rounded bg-gray-200 p-2">{data.validator}</pre>
</div>
<div>
{#if blaze}
<form class="mt-10 grid grid-cols-1 gap-y-8" onsubmit={setupBlaze}>
<Input type="password" id="blockfrostAPIKey" bind:value={blockfrostAPIKey}>
Blockfrost API Key
</Input>
<Button type="submit">Setup Blaze</Button>
</form>
{:else}
<form class="mt-10 grid grid-cols-1 gap-y-8" onsubmit={submitTokenName}>
<Input type="text" name="tokenName" id="tokenName" bind:value={tokenName}>Token Name</Input>
{#if tokenName.length > 0}
<Button type="submit">Make Contracts</Button>
{/if}
</form>
{/if}
</div>
</div>