Release Red Envelope

.github/workflows/u3-firebase-hosting-merge.yml

@@ -48,6 +48,7 @@ jobs:
           REACT_APP_CASTER_NFT_CHAIN_ID: "${{ vars.REACT_APP_CASTER_NFT_CHAIN_ID }}"
           REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS: "${{ vars.REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS }}"
           REACT_APP_VAPID_PUBLIC_KEY: "${{ vars.REACT_APP_VAPID_PUBLIC_KEY }}"
+          REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS: "${{ vars.REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
@@ -95,6 +96,7 @@ jobs:
           REACT_APP_CASTER_NFT_CHAIN_ID: "${{ vars.REACT_APP_CASTER_NFT_CHAIN_ID }}"
           REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS: "${{ vars.REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS }}"
           REACT_APP_VAPID_PUBLIC_KEY: "${{ vars.REACT_APP_VAPID_PUBLIC_KEY }}"
+          REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS: "${{ vars.REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"
@@ -142,6 +144,7 @@ jobs:
           REACT_APP_CASTER_NFT_CHAIN_ID: "${{ vars.REACT_APP_CASTER_NFT_CHAIN_ID }}"
           REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS: "${{ vars.REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS }}"
           REACT_APP_VAPID_PUBLIC_KEY: "${{ vars.REACT_APP_VAPID_PUBLIC_KEY }}"
+          REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS: "${{ vars.REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS }}"
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: "${{ secrets.GITHUB_TOKEN }}"

apps/u3/.env.development

@@ -61,4 +61,5 @@ REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS =  0x885d0069e238C7929F0351689A9493fECad9
 # REACT_APP_CASTER_NFT_CHAIN_ID =  999
 # REACT_APP_CASTER_NFT_RECIPIENT_ADDRESS =  0x885d0069e238C7929F0351689A9493fECad952Fe
 
-REACT_APP_VAPID_PUBLIC_KEY = BGMGngE6KTyCIbeBwtNLSObcu0IZM_QH8PVd4c4M5trYPonjjXGDM3aIhqFLIWFRyEF7XiHGB0CBcclsQTSWJoM
+REACT_APP_VAPID_PUBLIC_KEY = BGMGngE6KTyCIbeBwtNLSObcu0IZM_QH8PVd4c4M5trYPonjjXGDM3aIhqFLIWFRyEF7XiHGB0CBcclsQTSWJoM
+REACT_APP_RED_ENVELOPE_PLEDGE_ADDRESS = 0xCFd3527F4334Ebb2E3b53b01f70B7BD5C3170cD5

apps/u3/package.json

@@ -97,6 +97,7 @@
     "react-use-gesture": "^9.1.3",
     "remark-breaks": "^4.0.0",
     "remark-linkify-regex": "^1.2.1",
+    "satori": "^0.10.13",
     "screenfull": "^6.0.2",
     "slick-carousel": "^1.8.1",
     "styled-components": "^5.3.5",

apps/u3/src/components/layout/Index.tsx

@@ -21,6 +21,7 @@ import MobileNav from './mobile/MobileNav';
 import { MobileGuide } from './mobile/MobileGuide';
 import AddPostMobile from '../social/AddPostMobile';
 import ClaimOnboard from '../onboard/Claim';
+import RedEnvelopeFloatingWindow from '../social/frames/red-envelope/RedEnvelopeFloatingWindow';
 
 function Layout() {
   const { ready } = useAuthentication();
@@ -54,6 +55,7 @@ function Layout() {
               )}
             </RightInner>
             <DappMenu />
+            <RedEnvelopeFloatingWindow />
           </RightBox>
         )}
         <MobileGuide />

apps/u3/src/components/social/frames/red-envelope/CreateFrameForm.tsx

@@ -0,0 +1,175 @@
+import { ComponentPropsWithRef } from 'react';
+import { toast } from 'react-toastify';
+// import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+import { CreateRedEnvelopeParams } from '@/services/frames/api/red-envelope';
+
+export const constraintsOptions = [
+  {
+    value: 'Follow',
+    label: 'Follow',
+  },
+  {
+    value: 'Like',
+    label: 'Like',
+  },
+  {
+    value: 'Repost',
+    label: 'Repost',
+  },
+];
+
+export const defaultFrameFormValues: CreateRedEnvelopeParams = {
+  description: 'Red envelope',
+  randomFrom: 1,
+  randomTo: 1,
+  totalAmount: 1,
+  txHash: '',
+};
+
+export type CreateFrameFormProps = ComponentPropsWithRef<'form'> & {
+  values: CreateRedEnvelopeParams;
+  submitting?: boolean;
+  disabled?: boolean;
+  onValuesChange: (values: CreateRedEnvelopeParams) => void;
+  onSubmit: (values: CreateRedEnvelopeParams) => void;
+};
+
+export default function CreateFrameForm({
+  values,
+  submitting,
+  disabled,
+  onValuesChange,
+  onSubmit,
+  className,
+  ...props
+}: CreateFrameFormProps) {
+  const { randomFrom, randomTo, totalAmount } = values;
+  // const constraintsOptionsEl = constraintsOptions.map(({ value, label }) => (
+  //   <div key={value} className="flex items-center gap-[10px] cursor-pointer">
+  //     <Checkbox
+  //       id={`constraints-${value}`}
+  //       className="border border-white"
+  //       checked={constraints.includes(value)}
+  //       disabled={disabled}
+  //       onCheckedChange={(v) => {
+  //         if (v) {
+  //           onValuesChange({ ...values, constraints: [...constraints, value] });
+  //         } else {
+  //           onValuesChange({
+  //             ...values,
+  //             constraints: constraints.filter((c) => c !== value),
+  //           });
+  //         }
+  //       }}
+  //     />
+  //     <label
+  //       htmlFor={`constraints-${value}`}
+  //       className="text-[#FFF] text-[16px] font-normal cursor-pointer"
+  //     >
+  //       {label}
+  //     </label>
+  //   </div>
+  // ));
+  return (
+    <form
+      className={cn('w-full flex flex-col gap-[30px]', className)}
+      {...props}
+    >
+      <div className="flex items-center gap-[20px]">
+        <span className="text-[#718096] text-[14px] font-medium">
+          Constraints
+        </span>
+        <div className="flex items-center gap-[20px]">
+          {/* {constraintsOptionsEl} */}
+          <span className="text-[#FFF] text-[16px] font-normal">
+            Follow & Like & Repost
+          </span>
+        </div>
+      </div>
+      <div className="flex items-center gap-[20px]">
+        <span className="text-[#718096] text-[14px] font-medium">
+          Random interval
+        </span>
+        <div className="flex-1 flex items-center gap-[20px]">
+          <div className="flex-1 h-[40px] flex flex-grow items-center border border-[#39424C] rounded-full px-3">
+            <input
+              type="number"
+              className="w-full p-1 px-2 text-white bg-[#1B1E23] outline-none"
+              value={randomFrom}
+              disabled={disabled}
+              onChange={(e) => {
+                onValuesChange({ ...values, randomFrom: +e.target.value });
+              }}
+            />
+            <span className="text-[#FFF] text-[16px] font-medium">$DEGEN</span>
+          </div>
+          <div className="text-[#718096] text-[16px] font-medium">—</div>
+          <div className="flex-1 h-[40px] flex flex-grow items-center border border-[#39424C] rounded-full px-3">
+            <input
+              type="number"
+              className="w-full p-1 px-2 text-white bg-[#1B1E23] outline-none"
+              value={randomTo}
+              disabled={disabled}
+              onChange={(e) => {
+                onValuesChange({ ...values, randomTo: +e.target.value });
+              }}
+            />
+            <span className="text-[#FFF] text-[16px] font-medium">$DEGEN</span>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center gap-[20px]">
+        <span className="text-[#718096] text-[14px] font-medium">Reward</span>
+        <div className="flex-1 flex items-center gap-[20px]">
+          <div className="flex-1 flex flex-grow items-center border border-[#39424C] rounded-full px-3">
+            <input
+              type="number"
+              className="w-full h-[40px] p-1 px-2 text-white bg-[#1B1E23] outline-none"
+              value={totalAmount}
+              disabled={disabled}
+              onChange={(e) => {
+                onValuesChange({ ...values, totalAmount: +e.target.value });
+              }}
+            />
+            <span className="text-[#FFF] text-[16px] font-medium">$DEGEN</span>
+          </div>
+          <button
+            type="button"
+            className="
+            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]
+            "
+            disabled={disabled}
+            onClick={() => {
+              // if (constraints.length === 0) {
+              //   toast.error('Please select at least one constraint');
+              //   return;
+              // }
+              if (randomFrom === 0 || randomTo === 0) {
+                toast.error('Reward must be greater than 0');
+                return;
+              }
+              if (randomFrom > randomTo) {
+                toast.error('Min reward must be less than max reward');
+                return;
+              }
+              if (totalAmount === 0) {
+                toast.error('Total reward must be greater than 0');
+                return;
+              }
+              if (totalAmount < randomTo) {
+                toast.error('Total reward must be greater than max reward');
+                return;
+              }
+
+              onSubmit(values);
+            }}
+          >
+            {submitting ? 'Submitting...' : 'Pledge'}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}