From c14b980e7929a86ae282ab981e567901c27f020a Mon Sep 17 00:00:00 2001
From: kaf-lamed-beyt <belac335@gmail.com>
Date: Sun, 3 Aug 2025 22:43:46 +0100
Subject: [PATCH 1/2] fix: fixed mismatched imports due to the recent PR

i've also updated the ThemeProvider to expose a isDark value so it is not computed everytime in components needing it.
---
 app/context/theme-provider.tsx                | 27 ++++++++++++++++---
 app/dapp/components/claim-burn/index.tsx      |  3 +--
 app/dapp/components/claim-burn/success.tsx    |  3 +--
 app/dapp/components/claim-burn/tab.tsx        |  3 +--
 .../components/ui/ConnectWalletButton.tsx     |  3 +--
 app/dapp/components/ui/ThemeSwitcher.tsx      |  9 +++----
 app/dapp/swap/components/SwapSuccessModal.tsx |  7 +++--
 .../swap/components/TokenDropDownMenu.tsx     |  7 +++--
 app/dapp/swap/page.tsx                        |  2 +-
 app/hooks/context/theme.ts                    |  3 +--
 10 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/app/context/theme-provider.tsx b/app/context/theme-provider.tsx
index acc166b..f1c80be 100644
--- a/app/context/theme-provider.tsx
+++ b/app/context/theme-provider.tsx
@@ -1,15 +1,24 @@
 "use client";
 
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 export type Theme = "light" | "dark";
 
 export interface ThemeContextValues {
   theme: Theme;
+  isDark: boolean;
   toggleTheme: () => void;
 }
 
-export const ThemeContext = createContext<ThemeContextValues | undefined>(undefined);
+export const ThemeContext = createContext<ThemeContextValues | undefined>(
+  undefined,
+);
 
 export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
   const [theme, setTheme] = useState<Theme>("light");
@@ -17,7 +26,9 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
   useEffect(() => {
     const storedTheme = localStorage.getItem("theme") as Theme | null;
 
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const prefersDark = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
     const activeTheme = storedTheme || (prefersDark ? "dark" : "light");
 
     setTheme(activeTheme);
@@ -29,6 +40,8 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
     document.documentElement.classList.add(newTheme);
   };
 
+  const isDark = useMemo(() => theme === "dark", [theme]);
+
   const toggleTheme = () => {
     const newTheme = theme === "dark" ? "light" : "dark";
     setTheme(newTheme);
@@ -36,8 +49,14 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
     localStorage.setItem("theme", newTheme);
   };
 
+  const contextValues: ThemeContextValues = {
+    theme,
+    isDark,
+    toggleTheme,
+  };
+
   return (
-    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+    <ThemeContext.Provider value={contextValues}>
       {children}
     </ThemeContext.Provider>
   );
diff --git a/app/dapp/components/claim-burn/index.tsx b/app/dapp/components/claim-burn/index.tsx
index 64671dc..1aeaf95 100644
--- a/app/dapp/components/claim-burn/index.tsx
+++ b/app/dapp/components/claim-burn/index.tsx
@@ -28,13 +28,12 @@ type BurnClaimData = {
 };
 
 const ClaimBurn = () => {
-  const { theme } = useThemeContext();
+  const { isDark } = useThemeContext();
   const { isConnected } = useWallet();
   const [activeTab, setActiveTab] = useState("claim");
   const [amount, setAmount] = useState("");
   const [showSuccessModal, setShowSuccessModal] = useState(false);
 
-  const isDark = useMemo(() => theme === "dark", [theme]);
 
   const CLAIM_BURN_DATA: Record<string, BurnClaimData> = useMemo(
     () => ({
diff --git a/app/dapp/components/claim-burn/success.tsx b/app/dapp/components/claim-burn/success.tsx
index a8ac05a..b1404a9 100644
--- a/app/dapp/components/claim-burn/success.tsx
+++ b/app/dapp/components/claim-burn/success.tsx
@@ -30,8 +30,7 @@ export const SuccessModal = ({
   type,
   amount,
 }: SuccessModalProps) => {
-  const { theme } = useThemeContext();
-  const isDark = useMemo(() => theme === "dark", [theme]);
+  const { isDark } = useThemeContext();
   const date = new Date().toLocaleString("en-US", {
     dateStyle: "long",
     timeStyle: "medium",
diff --git a/app/dapp/components/claim-burn/tab.tsx b/app/dapp/components/claim-burn/tab.tsx
index 6f9366a..4775881 100644
--- a/app/dapp/components/claim-burn/tab.tsx
+++ b/app/dapp/components/claim-burn/tab.tsx
@@ -12,8 +12,7 @@ export const ClaimBurnTab = ({
   activeTab,
   setActiveTab,
 }: ClaimBurnTabProps) => {
-  const { theme } = useThemeContext();
-  const isDark = useMemo(() => theme === "dark", [theme]);
+  const { isDark } = useThemeContext();
   return (
     <div className="flex justify-center mb-8 relative">
       <div
diff --git a/app/dapp/components/ui/ConnectWalletButton.tsx b/app/dapp/components/ui/ConnectWalletButton.tsx
index ff00a08..401f86d 100644
--- a/app/dapp/components/ui/ConnectWalletButton.tsx
+++ b/app/dapp/components/ui/ConnectWalletButton.tsx
@@ -29,8 +29,7 @@ export const ConnectWalletButton = ({
     shortAddress,
   } = useWallet();
 
-  const { theme } = useThemeContext();
-  const isDark = useMemo(() => theme === "dark", [theme]);
+  const { isDark } = useThemeContext();
 
   const handleClick = async () => {
     if (isConnected) {
diff --git a/app/dapp/components/ui/ThemeSwitcher.tsx b/app/dapp/components/ui/ThemeSwitcher.tsx
index 51e2154..4083bd1 100644
--- a/app/dapp/components/ui/ThemeSwitcher.tsx
+++ b/app/dapp/components/ui/ThemeSwitcher.tsx
@@ -5,8 +5,7 @@ import MoonIcon from "@/svg/MoonIcon";
 import SunIcon from "@/svg/SunIcon";
 
 function ThemeSwitcher() {
-  const { theme, toggleTheme } = useThemeContext();
-  const isDarkMode = theme === "dark";
+  const { isDark, toggleTheme } = useThemeContext();
   return (
     <div
       onClick={toggleTheme}
@@ -14,12 +13,12 @@ function ThemeSwitcher() {
     >
       <div
         className={`absolute left-[3px] top-1/2 h-[calc(100%-4px)] w-[calc(50%-4px)] -translate-y-1/2 rounded-full bg-toggle-slider-bg border-[1px] border-toggle-slider-border transition-all duration-200 ease-in-out ${
-          !isDarkMode ? "translate-x-0" : "translate-x-[calc(100%+3px)]"
+          !isDark ? "translate-x-0" : "translate-x-[calc(100%+3px)]"
         }`}
       />
       <span
         className={`relative z-10 flex flex-1 justify-center items-center h-full rounded-full text-center transition-colors duration-300 ${
-          !isDarkMode
+          !isDark
             ? "text-theme-icon-fill-active"
             : "text-theme-icon-fill-not-active"
         }`}
@@ -28,7 +27,7 @@ function ThemeSwitcher() {
       </span>
       <span
         className={`relative z-10 flex-1  rounded-full justify-center h-full items-center flex transition-colors duration-300 ${
-          isDarkMode
+          isDark
             ? "text-theme-icon-fill-active"
             : "text-theme-icon-fill-not-active"
         }`}
diff --git a/app/dapp/swap/components/SwapSuccessModal.tsx b/app/dapp/swap/components/SwapSuccessModal.tsx
index 93ac0aa..c2e76c3 100644
--- a/app/dapp/swap/components/SwapSuccessModal.tsx
+++ b/app/dapp/swap/components/SwapSuccessModal.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { Globe } from "lucide-react";
-import { useTheme } from "@/app/hooks/useTheme";
 import Check from "@/public/check.png";
 import CheckDark from "@/public/check-dark.png";
 import Image from "next/image";
 import { Dialog, DialogContent } from "../../components/ui/dialog";
 import { getFormattedDate } from "@/lib/utils";
+import { useThemeContext } from "@/app/hooks/context";
 
 interface SuccessModalProps {
   isOpen: boolean;
@@ -28,8 +28,7 @@ export function SwapSuccessModal({
   onClose,
   transaction,
 }: SuccessModalProps) {
-  const { theme } = useTheme();
-  const isDarkMode = theme === "dark";
+  const { isDark } = useThemeContext();
   if (!transaction) return null;
 
   return (
@@ -84,7 +83,7 @@ export function SwapSuccessModal({
           <div className="w-full space-y-3">
             <button
               className={`w-full p-3 flex justify-center rounded-[8px] items-center gap-x-2  ${
-                isDarkMode
+                isDark
                   ? "bg-[#1F1F1F] hover:bg-gray-600"
                   : "bg-[#1F1F1F] hover:bg-gray-700"
               } text-[#F4F4F4]`}
diff --git a/app/dapp/swap/components/TokenDropDownMenu.tsx b/app/dapp/swap/components/TokenDropDownMenu.tsx
index 6b7f61e..4158ad2 100644
--- a/app/dapp/swap/components/TokenDropDownMenu.tsx
+++ b/app/dapp/swap/components/TokenDropDownMenu.tsx
@@ -1,6 +1,5 @@
 "use client";
 import { ChevronDown } from "lucide-react";
-import { useTheme } from "@/app/hooks/useTheme";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,6 +7,7 @@ import {
   DropdownMenuTrigger,
 } from "../../components/ui/dropdown-menu";
 import Image from "next/image";
+import { useThemeContext } from "@/app/hooks/context";
 
 interface Token {
   logo: string;
@@ -25,8 +25,7 @@ export function TokenSelectDropdown({
   onTokenSelect,
   tokens,
 }: TokenSelectDropdownProps) {
-  const { theme } = useTheme();
-  const isDarkMode = theme === "dark";
+  const { isDark } = useThemeContext();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -56,7 +55,7 @@ export function TokenSelectDropdown({
               <div className="font-medium text-sm">{token.name}</div>
               <div
                 className={`text-xs ${
-                  isDarkMode ? "text-gray-400" : "text-gray-500"
+                  isDark ? "text-gray-400" : "text-gray-500"
                 }`}
               >
                 {token.symbol}
diff --git a/app/dapp/swap/page.tsx b/app/dapp/swap/page.tsx
index 5b203c1..f44b037 100644
--- a/app/dapp/swap/page.tsx
+++ b/app/dapp/swap/page.tsx
@@ -2,7 +2,6 @@
 
 import { useState } from "react";
 import { Menu } from "lucide-react";
-import ConnectWalletButton from "../components/ui/ConnectWalletButton";
 import SwapFromInput from "./components/SwapFromInput";
 import SwapToInput from "./components/SwapToInput";
 import SwapToggle from "./components/SwapToggle";
@@ -11,6 +10,7 @@ import SwapToggle from "./components/SwapToggle";
 import { tokens_swap as tokens } from "@/utils/data";
 import { useConnection } from "@/app/context/ConnectionContext";
 import { SwapSuccessModal } from "./components/SwapSuccessModal";
+import { ConnectWalletButton } from "../components/ui/ConnectWalletButton";
 
 export default function SwapPage() {
   const [isSuccessModalOpen, setIsSuccessModalOpen] = useState(false);
diff --git a/app/hooks/context/theme.ts b/app/hooks/context/theme.ts
index 717409d..884f181 100644
--- a/app/hooks/context/theme.ts
+++ b/app/hooks/context/theme.ts
@@ -1,13 +1,12 @@
 import React from "react";
 import { ThemeContext, ThemeContextValues } from "@/app/context";
 
-
 export const useThemeContext = (): ThemeContextValues => {
   const context = React.useContext(ThemeContext);
 
   if (context === null) {
     throw new Error(
-      "Theme context is missing. You probably forgot to wrap a route/component depending on theme in <ThemeProvider />"
+      "Theme context is missing. You probably forgot to wrap a route/component depending on theme in <ThemeProvider />",
     );
   }
 

From bdaaca68aca73509a0ebf7bc7e724aca8c25a517 Mon Sep 17 00:00:00 2001
From: kaf-lamed-beyt <belac335@gmail.com>
Date: Thu, 21 Aug 2025 22:43:32 +0100
Subject: [PATCH 2/2] feat: mint and claim xZB

this is a base setup for #151. still needs more polish when i get info on telegram.
---
 app/dapp/claim-burn/page.tsx | 44 ++++++++++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/app/dapp/claim-burn/page.tsx b/app/dapp/claim-burn/page.tsx
index 65e8a5e..9a13e39 100644
--- a/app/dapp/claim-burn/page.tsx
+++ b/app/dapp/claim-burn/page.tsx
@@ -11,6 +11,7 @@ import { Hamburger } from "@/svg/Hamburger";
 import { Info } from "@/svg/Info";
 import { useThemeContext } from "@/app/hooks/context";
 import { InfoRow } from "./components/info";
+import { useAccount, useContract } from "@starknet-react/core";
 
 const geistMono = Geist_Mono({
   subsets: ["latin"],
@@ -28,6 +29,10 @@ type BurnClaimData = {
   displayAmount: string;
 };
 
+// pretty much the contract address. i chose to word it differently
+const bridgeAddress =
+  "0x0123a4ce7980e3c4f5832af0735fc3beabdc157379e09aaf7c5e62dfa8c19427";
+
 export default function ClaimBurnPage() {
   const { isDark } = useThemeContext();
   const { isConnected, openWalletModal } = useWallet();
@@ -35,6 +40,12 @@ export default function ClaimBurnPage() {
   const [amount, setAmount] = useState("");
   const [showSuccessModal, setShowSuccessModal] = useState(false);
 
+  const { status, address } = useAccount();
+  const { contract } = useContract({
+    abi: bridgeAbi, // this would break for now until i get an ABI provided
+    address: bridgeAddress,
+  });
+
   const CLAIM_BURN_DATA: Record<string, BurnClaimData> = useMemo(
     () => ({
       claim: {
@@ -61,8 +72,37 @@ export default function ClaimBurnPage() {
     if (isConnected) setAmount(currentData.displayAmount);
   };
 
-  const handleAction = () => {
-    if (isConnected && amount) setShowSuccessModal(true);
+  const handleAction = async () => {
+    if (!contract || status !== "connected") return;
+
+    try {
+      if (activeTab === "burn") {
+        const tx = await contract.invoke("burn_xzb_for_unlock", [
+          amount,
+          address,
+        ]);
+        console.log("Burn Tx:", tx);
+      } else {
+        // this proof here is a dummy placeholder until i'm aware of how to get it from the server.
+        const proof = [
+          "0x123",
+          "0x64",
+          "0x1",
+          `${Math.floor(Date.now() / 1000)}`,
+        ];
+        const commitmentHash = "0xabc";
+
+        const tx = await contract.invoke("mint_and_claim_xzb", [
+          proof,
+          commitmentHash,
+        ]);
+        console.log("Claim Tx:", tx);
+      }
+
+      setShowSuccessModal(true);
+    } catch (err) {
+      console.error(`${activeTab} failed:`, err);
+    }
   };
 
   const isActionable = !!(amount && amount !== "0" && amount !== "0.00");