Merge pull request #541 from us3r-network/F-postNotice-shixuewen

feat: post notice
degencast · Feb 9, 2024 · cf07d8f · cf07d8f
2 parents 9a76b5e + 45a0785
commit cf07d8f
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/apps/u3/src/components/social/frames/red-envelope/CreateModal.tsx b/apps/u3/src/components/social/frames/red-envelope/CreateModal.tsx
@@ -167,6 +167,7 @@ export default function CreateModal({
     [isLogin, isLoginFarcaster, openFarcasterQR, accountAddr]
   );
 
+  const [openNotice, setOpenNotice] = useState(false);
   return (
     <ModalBase isOpen={open} onRequestClose={closeModal}>
       <div className="bg-[#1b1e23] rounded-[20px] mx-[0] my-[60px]">
@@ -187,6 +188,7 @@ export default function CreateModal({
                 setFrameFormValues(defaultFrameFormValues);
                 setCreatedFrameData(null);
                 setFrameUrl('');
+                setOpenNotice(true);
               }}
               onBack={() => {
                 setStep(Steps.CREATE_FRAME);
@@ -223,6 +225,53 @@ export default function CreateModal({
           )}
         </div>
       </div>
+      <PostNotice
+        open={openNotice}
+        closeModal={() => {
+          setOpenNotice(false);
+        }}
+      />
+    </ModalBase>
+  );
+}
+
+function PostNotice({
+  open,
+  closeModal,
+}: {
+  open: boolean;
+  closeModal: () => void;
+}) {
+  return (
+    <ModalBase isOpen={open} onRequestClose={closeModal}>
+      <div className="bg-[#1b1e23] rounded-[20px] mx-[0] my-[60px]">
+        <div className="w-[320px] inline-flex p-[20px] box-border flex-col justify-center items-start gap-[20px]">
+          <div className="flex justify-between items-center self-stretch">
+            <span className="text-[#718096] text-[14px] font-medium">
+              Red Envelope
+            </span>
+            <ModalCloseBtn onClick={closeModal} />
+          </div>
+          <div className="flex flex-col gap-[20px]">
+            <span className="text-[#FFF] text-[16px] font-medium leading-[150%]">
+              Red envelope sent successfully! It will be posted to Warpcast in a
+              few minutes, please check back later.
+            </span>
+            <button
+              type="button"
+              className="
+                flex-1 flex px-[12px] py-[6px] h-[40px] justify-center items-center rounded-[10px] bg-[#F41F4C]
+              text-[#FFF] text-center text-[12px] font-normal leading-[20px]
+              "
+              onClick={() => {
+                closeModal();
+              }}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
     </ModalBase>
   );
 }