feat: convert gift card tutorial to lucid-evolution and weld

examples/gift_card/src/lib/components/Input.svelte

@@ -6,7 +6,7 @@
     children: Snippet<[]>;
   }
 
-  let { id, children, ...props }: Props = $props();
+  let { id, children, value = $bindable(), ...props }: Props = $props();
 </script>
 
 <div>
@@ -14,6 +14,7 @@
     {@render children()}
   </label>
   <input
+    bind:value
     {...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"

examples/gift_card/src/lib/utils.ts

@@ -1,11 +1,38 @@
+import {
+  applyDoubleCborEncoding,
+  applyParamsToScript,
+  Constr,
+  fromText,
+  validatorToAddress,
+  validatorToScriptHash,
+  type MintingPolicy,
+  type OutRef,
+  type SpendingValidator
+} from '@lucid-evolution/lucid';
 import blueprint from '../../plutus.json' assert { type: 'json' };
 
 export type Validators = {
   giftCard: string;
 };
 
+export type LocalCache = {
+  tokenName: string;
+  giftADA: string;
+  lockTxHash: string;
+  parameterizedValidators: AppliedValidators;
+};
+
+export type AppliedValidators = {
+  redeem: SpendingValidator;
+  giftCard: MintingPolicy;
+  policyId: string;
+  lockAddress: string;
+};
+
 export function readValidators(): Validators {
-  const giftCard = blueprint.validators.find((v) => v.title === 'oneshot.gift_card.spend');
+  const giftCard = blueprint.validators.find(
+    (v) => v.title === 'oneshot.gift_card.spend'
+  );
 
   if (!giftCard) {
     throw new Error('Gift Card validator not found');
@@ -15,3 +42,36 @@ export function readValidators(): Validators {
     giftCard: giftCard.compiledCode
   };
 }
+
+export function applyParams(
+  tokenName: string,
+  outputReference: OutRef,
+  validator: string
+): AppliedValidators {
+  const outRef = new Constr(0, [
+    new Constr(0, [outputReference.txHash]),
+    BigInt(outputReference.outputIndex)
+  ]);
+
+  const giftCard = applyParamsToScript(validator, [
+    fromText(tokenName),
+    outRef
+  ]);
+
+  const policyId = validatorToScriptHash({
+    type: 'PlutusV2',
+    script: giftCard
+  });
+
+  const lockAddress = validatorToAddress('Preprod', {
+    type: 'PlutusV2',
+    script: giftCard
+  });
+
+  return {
+    redeem: { type: 'PlutusV2', script: applyDoubleCborEncoding(giftCard) },
+    giftCard: { type: 'PlutusV2', script: applyDoubleCborEncoding(giftCard) },
+    policyId,
+    lockAddress
+  };
+}

examples/gift_card/src/lib/wallet.svelte.ts

@@ -0,0 +1,43 @@
+import { createWeldInstance, type WeldConfig } from '@ada-anvil/weld';
+import { getContext, setContext } from 'svelte';
+
+export class Weld {
+  weld = createWeldInstance();
+
+  // Use the $state rune to create a reactive object for each Weld store
+  config = $state(this.weld.config.getState());
+  wallet = $state(this.weld.wallet.getState());
+  extensions = $state(this.weld.extensions.getState());
+
+  constructor(persist?: Partial<WeldConfig>) {
+    this.weld.config.update({ updateInterval: 2000 });
+
+    if (persist) this.weld.persist(persist);
+
+    $effect(() => {
+      this.weld.init();
+
+      // Subscribe to Weld stores and update reactive objects when changse occur
+      // Note: No need to use subscribeWithSelector as $state objects are deeply reactive
+      this.weld.config.subscribe((s) => (this.config = s));
+      this.weld.wallet.subscribe((s) => (this.wallet = s));
+      this.weld.extensions.subscribe((s) => (this.extensions = s));
+
+      return () => this.weld.cleanup();
+    });
+  }
+}
+
+// Use the context API to scope weld stores and prevent unwanted sharing
+// of data between clients when rendering on the server
+const weldKey = Symbol('weld');
+
+export function setWeldContext(persist?: Partial<WeldConfig>) {
+  const value = new Weld(persist);
+  setContext(weldKey, value);
+  return value;
+}
+
+export function getWeldContext() {
+  return getContext<ReturnType<typeof setWeldContext>>(weldKey);
+}