add bake sound

src/app/core/context/TransactionsContext/TransactionsReducer.ts

@@ -87,8 +87,8 @@ export function TransactionsReducer(
   switch (action.type) {
     case "NEW": {
       return {
-        ...state,
         new: action.payload.data,
+        submitted: [...state.submitted],
       };
     }
     case "SET_SUBMITTED": {

src/app/core/context/TransactionsContext/TransactionsWatcher.tsx

@@ -5,6 +5,7 @@ import {
 } from "./TransactionsReducer";
 import { useWaitForTransaction } from "wagmi";
 import { useToast } from "../ToastContext/ToastContext";
+import { useAudio } from "../../hooks/useAudio/useAudio";
 
 export function TransactionWatcher({
   transaction,
@@ -15,6 +16,7 @@ export function TransactionWatcher({
 }) {
   const { status, hash } = transaction;
   const { toastDispatch } = useToast();
+  const { playSound } = useAudio({ src: "/cookies.mp3" });
 
   const { data: waitData } = useWaitForTransaction({ hash });
 
@@ -30,6 +32,7 @@ export function TransactionWatcher({
     if (status !== "SUBMITTED") return;
     if (waitData.status === "success") {
       transactionsDispatch({ type: "SET_SUCCESS", payload: { hash } });
+      if (transaction.data.type === "BAKE") playSound();
       toastDispatch({
         type: "NEW",
         payload: { toastType: "CONFIRMED", txHash: hash },

src/app/core/hooks/useAudio/audioContext.ts

@@ -0,0 +1,20 @@
+let audioContext: AudioContext | undefined;
+
+export function getAudioContext() {
+  if (!audioContext) {
+    audioContext = new AudioContext();
+  }
+  return audioContext;
+}
+
+export function resumeAudioContext() {
+  if (audioContext && audioContext.state === "suspended") {
+    return audioContext.resume();
+  }
+}
+
+export function suspendAudioContext() {
+  if (audioContext && audioContext.state === "running") {
+    return audioContext.suspend();
+  }
+}

src/app/core/hooks/useAudio/useAudio.ts

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { getAudioContext } from "./audioContext";
+
+export function useAudio({ src }: { src: string }) {
+  const [audioBuffer, setAudioBuffer] = useState<AudioBuffer | null>(null);
+
+  useEffect(() => {
+    async function fetchAudio() {
+      const audioContext = getAudioContext();
+      if (!audioContext) return;
+      const arrayBuffer = await fetch(src).then((res) => res.arrayBuffer());
+      audioContext
+        .decodeAudioData(arrayBuffer)
+        .then((audioBuffer) => {
+          setAudioBuffer(audioBuffer);
+        })
+        .catch((err): void => {
+          console.log({ err });
+        });
+    }
+    fetchAudio();
+  }, [src]);
+
+  async function playSound() {
+    if (!audioBuffer) return;
+    const audioContext = getAudioContext();
+    const src = audioContext.createBufferSource();
+    const gain = audioContext.createGain();
+    const now = audioContext.currentTime;
+    if (audioContext.state === "suspended") {
+      await audioContext.resume();
+    }
+    src.buffer = audioBuffer;
+    src.loop = false;
+    src.connect(gain);
+    gain.connect(audioContext.destination);
+    src.start(now);
+    gain.gain.setValueAtTime(1, now);
+    gain.gain.setValueAtTime(1, now + 0.4);
+    gain.gain.linearRampToValueAtTime(0, now + 1.2);
+
+    // console.log("playing sound");
+    // console.log("playing sound", audioContext.state);
+    // if (audioContext.state === "suspended") {
+    //   await audioContext.resume();
+    //   console.log("ctx state after:", audioContext.state);
+    //   source.onended = () => initSource(audioBuffer);
+    //   return;
+    // }
+    // source.start();
+    // source.onended = () => initSource(audioBuffer);
+  }
+
+  return { playSound };
+}