New BURN flow

[#144]

bread.theme.ts

@@ -30,6 +30,8 @@ const colors = {
   status: {
     danger: "#D8745C",
     "danger-light": "#CF2800",
+    "danger-alpha": "rgba(214, 115, 91, 1)",
+    "danger-light-alpha": "rgba(207, 40, 0, 0.1)",
     warning: "#F2D54E",
     success: "#9EC958",
   },

src/app/app.css

@@ -56,15 +56,13 @@
   .dark .guild-logo-dark {
     display: block;
   }
-  .supply-text-gradient {
+
+  .bread-pink-text-gradient {
     background: linear-gradient(
-      230deg,
-      #b72085 9.16%,
-      #cd19aa 16.07%,
-      #c463ca 35.44%,
-      #f5ac37 50.56%,
-      #f9c625 73.38%,
-      #ffe70f 95.3%
+      81.66deg,
+      #fc6baa 6.39%,
+      #d158d7 57.5%,
+      #af2cec 100.16%
     );
     background-clip: text;
     -webkit-background-clip: text;

src/app/bakery/components/Swap/Burn.tsx

@@ -1,6 +1,5 @@
 import { useContractWrite, usePrepareContractWrite } from "wagmi";
 import { parseEther } from "viem";
-
 import { TUserConnected } from "@/app/core/hooks/useConnectedUser";
 import { BREAD_ABI } from "@/abi";
 import Button from "@/app/core/components/Button";
@@ -11,6 +10,8 @@ import { useEffect, useState } from "react";
 import SafeAppsSDK from "@safe-global/safe-apps-sdk/dist/src/sdk";
 import { TransactionStatus } from "@safe-global/safe-apps-sdk";
 import { useModal } from "@/app/core/context/ModalContext";
+import { ExternalLink } from "@/app/core/components/ExternalLink";
+import SwapBreadButton from "@/app/bakery/components/Swap/SwapBreadButton";
 
 export default function Burn({
   user,
@@ -25,10 +26,8 @@ export default function Burn({
 }) {
   const { transactionsState, transactionsDispatch } = useTransactions();
   const [buttonIsEnabled, setButtonIsEnabled] = useState(false);
-  const { setModal } = useModal();
-
   const { BREAD } = getConfig(user.chain.id);
-
+  const { setModal } = useModal();
   const debouncedValue = useDebounce(inputValue, 500);
 
   const parsedValue = parseEther(
@@ -114,26 +113,22 @@ export default function Burn({
 
   return (
     <div className="relative">
+      <div className="group">
+        <SwapBreadButton withRecommended={true} />
+      </div>
+      <div className="m-3"></div>
       <Button
         fullWidth={true}
         size="xl"
+        variant={"cancel"}
         disabled={!buttonIsEnabled}
         onClick={() => {
-          if (!write) return;
-          transactionsDispatch({
-            type: "NEW",
-            payload: {
-              data: {
-                type: "BURN",
-                value: debouncedValue,
-              },
-            },
-          });
           setModal({
-            type: "BAKERY_TRANSACTION",
-            hash: null,
+            type: "CONFIRM_BURN",
+            breadValue: inputValue,
+            xdaiValue: debouncedValue,
+            write: write,
           });
-          write();
         }}
       >
         Burn

src/app/core/components/Button/Button.tsx

@@ -28,8 +28,14 @@ export const ButtonVariants = {
   danger:
     "bg-status-danger-light dark:bg-status-danger text-breadgray-ultra-white dark:text-breadgray-grey100 bg-opacity-85 hover:bg-opacity-100",
   cancel:
-    "border border-2 border-status-danger-light dark:border-status-danger hover:bg-status-danger-light dark:bg-status-danger dark:hover:bg-status-danger dark:bg-opacity-10 dark:hover:bg-opacity-10 text-status-danger-light dark:text-status-danger dark:hover:text-status-danger border border-2 border-status-danger dark:border-opacity-0 hover:border-opacity-100 transition-all hover:text-breadgray-ultra-white",
+    "text-status-danger-light  transition-all bg-status-danger-light-alpha \
+      disabled:text-opacity-50 \
+      enabled:hover:outline enabled:hover:outline-2 enabled:hover:outline-status-danger-alpha \
+      dark:bg-status-danger dark:bg-opacity-10 dark:text-status-danger \
+      ",
 };
+// disabled:text-opacity-50 disabled:hover:text-opacity-50 disabled:hover:border-opacity-0 disabled:hover:bg-status-danger disabled:hover:bg-opacity-10 disabled:hover:text-status-danger-light \
+// hover:bg-status-danger-light hover:border-opacity-100 hover:text-breadgray-ultra-white",
 
 const Button = forwardRef(
   (

src/app/core/components/Modal/ConfirmBurnModal.tsx

@@ -0,0 +1,114 @@
+import { ModalContainer, ModalContent, ModalHeading } from "./ModalUI";
+import { ConfirmBurnModalState, ModalState } from "../../context/ModalContext";
+import Button from "@/app/core/components/Button/Button";
+import { BreadIcon, XDAIIcon } from "@/app/core/components/Icons/TokenIcons";
+import { ExternalLink } from "@/app/core/components/ExternalLink";
+import SwapBreadButton from "@/app/bakery/components/Swap/SwapBreadButton";
+import { useTransactions } from "@/app/core/context/TransactionsContext/TransactionsContext";
+import { useModal } from "@/app/core/context/ModalContext";
+
+export function ConfirmBurnModal({
+  modalState,
+}: {
+  modalState: ConfirmBurnModalState;
+}) {
+  const { transactionsState, transactionsDispatch } = useTransactions();
+  const { setModal } = useModal();
+
+  function confirmBurn({
+    write,
+    xdaiValue,
+  }: {
+    write: Function | undefined;
+    xdaiValue: string;
+  }) {
+    // debugger;
+    if (!write) return;
+    transactionsDispatch({
+      type: "NEW",
+      payload: {
+        data: {
+          type: "BURN",
+          value: xdaiValue,
+        },
+      },
+    });
+    setModal({
+      type: "BAKERY_TRANSACTION",
+      hash: null,
+    });
+    write();
+  }
+
+  return (
+    <ModalContainer>
+      <ModalHeading>Important to know</ModalHeading>
+      <ModalContent>
+        <div className="w-full p-4 rounded-xl dark:text-breadgray-grey border border-breadgray-burnt">
+          <div className="flex mb-6 justify-between items-center">
+            <p className="text-left">You are about to burn</p>
+            <span className="flex gap-2 dark:text-breadgray-ultra-white font-bold">
+              <BreadIcon />
+              {modalState.breadValue}
+            </span>
+          </div>
+          <div className="w-full flex justify-between items-center">
+            <p className="text-left">You will receive</p>
+            <span className="flex gap-2 dark:text-breadgray-ultra-white font-bold">
+              <XDAIIcon />
+              {modalState.xdaiValue}
+            </span>
+          </div>
+        </div>
+        <div className="grid grid-cols-10 border border-status-danger p-3 rounded-xl">
+          <div className="col-span-1 flex mt-1 justify-center">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 0H10V2H8V4H6V6H4V8H2V10H0V12H2V14H4V16H6V18H8V20H10V22H12V20H14V18H16V16H18V14H20V12H22V10H20V8H18V6H16V4H14V2H12V0ZM12 2V4H14V6H16V8H18V10H20V12H18V14H16V16H14V18H12V20H10V18H8V16H6V14H4V12H2V10H4V8H6V6H8V4H10V2H12ZM12 6H10V12H12V6ZM12 14H10V16H12V14Z"
+                fill="#D8745C"
+              />
+            </svg>
+          </div>
+
+          <div className="col-span-9">
+            <p>
+              Burning $BREAD will reduce crucial funding for our post-capitalist
+              cooperatives.
+              <b>
+                To continue supporting the Breadchain network, consider swapping
+                your $BREAD instead.
+              </b>
+            </p>
+          </div>
+        </div>
+
+        <div className="w-full">
+          <ExternalLink href={"/"}>
+            <SwapBreadButton withRecommended={false} />
+          </ExternalLink>
+        </div>
+        <Button
+          fullWidth={true}
+          size="xl"
+          variant={"cancel"}
+          onClick={() => {
+            confirmBurn({
+              write: modalState.write,
+              xdaiValue: modalState.xdaiValue,
+            });
+          }}
+        >
+          Burn
+        </Button>
+      </ModalContent>
+    </ModalContainer>
+  );
+}

src/app/core/components/Modal/ModalPresenter.tsx

@@ -3,6 +3,7 @@ import * as Dialog from "@radix-ui/react-dialog";
 import { AnimatePresence, motion } from "framer-motion";
 import { useModal } from "@/app/core/context/ModalContext";
 import { ConfirmRecastModal } from "./ConfirmRecastModal";
+import { ConfirmBurnModal } from "./ConfirmBurnModal";
 import { ModalOverlay } from "./ModalUI";
 import { VoteTransactionModal } from "./TransactionModal/VoteTransactionModal";
 import { BakeryTransactionModal } from "./TransactionModal/BakeryTransactionModal";
@@ -27,6 +28,8 @@ export function ModalPresenter() {
                       return <BakeryTransactionModal modalState={modalState} />;
                     case "VOTE_TRANSACTION":
                       return <VoteTransactionModal modalState={modalState} />;
+                    case "CONFIRM_BURN":
+                      return <ConfirmBurnModal modalState={modalState} />;
                     case "CONFIRM_RECAST":
                       return <ConfirmRecastModal setModal={setModal} />;
                     case "LP_VAULT_TRANSACTION":

src/app/core/components/Modal/ModalUI.tsx

@@ -23,7 +23,7 @@ export const ModalContainer = forwardRef(
           animate={{ y: 0, opacity: 1 }}
           exit={{ y: 8, opacity: 0 }}
           transition={{ duration: 0.2 }}
-          className="max-w-[26rem] flex flex-col items-center rounded dark:bg-opacity-100 p-4 bg-breadgray-ultra-white border border-breadgray-light-grey dark:border-none dark:bg-breadgray-charcoal relative pointer-events-auto"
+          className="max-w-[30rem] flex flex-col items-center rounded dark:bg-opacity-100 p-4 bg-breadgray-ultra-white border border-breadgray-light-grey dark:border-none dark:bg-breadgray-charcoal relative pointer-events-auto"
         >
           <DialogPrimitiveClose className="absolute top-0 right-0 w-10 h-10 p-3">
             <CloseIcon />

src/app/core/context/ModalContext.tsx

@@ -6,6 +6,13 @@ export type RecastModalState = {
   isConfirmed: boolean;
 };
 
+export type ConfirmBurnModalState = {
+  type: "CONFIRM_BURN";
+  breadValue: string;
+  xdaiValue: string;
+  write: Function | undefined;
+};
+
 export type VoteModalState = {
   type: "VOTE_TRANSACTION";
   hash: string | null;
@@ -26,6 +33,7 @@ export type ModalState =
   | BakeryTransactionModalState
   | VoteModalState
   | RecastModalState
+  | ConfirmBurnModalState
   | LPVaultTransactionModalState
   | null;
 export type ModalContext = {