+ {/* Badge Background */}
+
+ {/* Inner Ring */}
+
+ {/* Center Content */}
+
+
๐
+
+ SWAP SURVIVOR
+
+
+ {new Date().getFullYear()}
+
+
+ {/* Decorative Stars */}
+
+ โญ
+
+
+ โญ
+
+
+ โญ
+
+
+ โญ
+
+
+
+
+ {/* Achievement Ribbon */}
+
+ LEGENDARY
+
+
+
+ {/* Glowing Effect */}
+
+
+ );
+
+ return (
+
+ {/* Floating celebration elements */}
+ {badgeGenerated &&
+ floatingElements.map((element) => (
+
+ {element.emoji}
+
+ ))}
+
+ {/* Header */}
+
+
๐
+
+ {mintingStage === "preparation" && "๐จ Preparing Your NFT Badge..."}
+ {mintingStage === "minting" && "โก Minting Your Achievement..."}
+ {mintingStage === "complete" && "๐ NFT Badge Minted Successfully!"}
+
+
+ {mintingStage === "complete"
+ ? "Congratulations! You now own a legendary 'I Survived The Swap' NFT badge!"
+ : "Creating your unique survival certificate..."}
+
+
+
+ {/* Minting Progress */}
+ {mintingStage !== "complete" && (
+
+
+
+
+
+
+ {mintingStage === "preparation"
+ ? "Preparing NFT..."
+ : "Minting in Progress..."}
+
+
+
+
+ {/* Progress Animation */}
+
+
+ {/* Current Attribute Being Added */}
+ {mintingStage === "minting" && (
+
+
Adding attribute:
+
+ {badgeAttributes[currentAttribute]?.trait_type}:{" "}
+ {badgeAttributes[currentAttribute]?.value}
+
+
+ )}
+
+
+ )}
+
+ {/* NFT Badge Preview */}
+ {showNFTPreview && (
+
{renderBadgeDesign()}
+ )}
+
+ {/* NFT Details */}
+ {badgeGenerated && (
+
+ {/* NFT Metadata */}
+
+
+ ๐
+ NFT Metadata
+
+
+
+ Name:
+
+ “I Survived The Swap”
+
+
+
+ Collection:
+
+ Elton's Over-Engineered Survivors
+
+
+
+ Token Standard:
+ ERC-721
+
+
+ Rarity:
+ LEGENDARY
+
+
+
+
+ {/* Swap Summary */}
+
+
+ ๐
+ Your Epic Journey
+
+
+
+ Swapped:
+
+ {fromAmount} {fromToken?.symbol}
+
+
+
+ Received:
+
+ {toAmount} {toToken?.symbol}
+
+
+
+ Steps Survived:
+ 6/6 โ
+
+
+ Comedy Level:
+ Maximum ๐ญ
+
+
+
+
+ )}
+
+ {/* Badge Attributes */}
+ {badgeGenerated && (
+
+
+ ๐
Badge Attributes
+
+
+ {badgeAttributes.map((attr, index) => (
+
+
+ {attr.trait_type}
+
+
+ {attr.value}
+
+
+ ))}
+
+
+ )}
+
+ {/* Hall of Fame */}
+ {badgeGenerated && (
+
+
+ ๐ Welcome to the Hall of Fame
+
+
+
+ You are now officially a member of the exclusive “Swap
+ Survivors” club!
+
+
+
+
๐ฅ
+
Gold Tier
+
Legendary Survivor
+
+
+
๐ญ
+
Comedy Master
+
+ Survived All Theatrics
+
+
+
+
๐
+
DeFi Explorer
+
+ Completed The Journey
+
+
+
+
+
+ )}
+
+ {/* Action Buttons */}
+ {badgeGenerated && (
+
+
+ ๐ Start New Swap Adventure
+
+ {
+ // Simulate downloading NFT
+ const link = document.createElement("a");
+ link.href =
+ "data:application/json;charset=utf-8," +
+ encodeURIComponent(
+ JSON.stringify(
+ {
+ name: "I Survived The Swap",
+ description:
+ "A legendary NFT badge awarded to brave souls who completed Elton's Over-Engineered Swap Protocol",
+ image: "https://example.com/nft-badge.png",
+ attributes: badgeAttributes,
+ },
+ null,
+ 2
+ )
+ );
+ link.download = "swap-survivor-nft.json";
+ link.click();
+ }}
+ className="flex-1 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-300 hover:scale-105 hover:shadow-lg bg-gradient-to-r from-purple-500 to-blue-500"
+ >
+ ๐พ Download NFT Metadata
+
+ {
+ if (navigator.share) {
+ navigator.share({
+ title: "I Survived The Swap!",
+ text: "I just completed the most over-engineered token swap in DeFi history and earned this legendary NFT badge! ๐",
+ url: window.location.href,
+ });
+ }
+ }}
+ className="flex-1 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-300 hover:scale-105"
+ style={{ backgroundColor: "#6E54FF" }}
+ >
+ ๐ฑ Share Achievement
+
+
+ )}
+
+ {/* Final Message */}
+ {badgeGenerated && (
+
+
+
๐
+
+ “Thank you for surviving my over-engineered masterpiece! You
+ are now forever part of DeFi comedy history.”
+
+
+ - Chef Elton, Creator of Theatrical Swaps
+
+
+
+ )}
+
+ );
+};
diff --git a/src/components/swap/PizzaApproval.tsx b/src/components/swap/PizzaApproval.tsx
new file mode 100644
index 000000000..2b45b1904
--- /dev/null
+++ b/src/components/swap/PizzaApproval.tsx
@@ -0,0 +1,359 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { SwapExecutionProgress } from "@/services/swapExecution";
+
+interface PizzaApprovalProps {
+ progress?: SwapExecutionProgress | null;
+ onComplete?: () => void;
+ onExecuteSwap?: () => void;
+}
+
+interface PizzaBite {
+ id: number;
+ angle: number;
+ eaten: boolean;
+}
+
+const eltonDialogue = [
+ "Hmm, let me examine this transaction...",
+ "*takes a big bite* ๐ Mmm...",
+ "*chew chew* This swap seems legitimate...",
+ "*another bite* The gas fees look reasonable...",
+ "*chew chew chew* Token addresses check out...",
+ "*nom nom* Slippage tolerance is acceptable...",
+ "*chew* Almost done with my analysis...",
+ "*final bite* Perfect! Transaction approved! ๐",
+];
+
+export const PizzaApproval = ({
+ progress,
+ onComplete,
+ onExecuteSwap,
+}: PizzaApprovalProps) => {
+ const [currentBite, setCurrentBite] = useState(0);
+ const [eltonThoughts, setEltonThoughts] = useState(
+ "Hmm, let me examine this transaction..."
+ );
+ const [approvalComplete, setApprovalComplete] = useState(false);
+ const [showRealStatus, setShowRealStatus] = useState(false);
+ const executionStartedRef = useRef(false);
+
+ // Create 8 pizza slices - memoized to prevent re-creation
+ const [pizzaBites, setPizzaBites] = useState