Merge pull request #415 from xmtp-labs/dev

Dev --> Main

package.json

@@ -39,6 +39,7 @@
     "@xmtp/content-type-reaction": "^1.1.3",
     "@xmtp/content-type-remote-attachment": "^1.1.4",
     "@xmtp/content-type-reply": "^1.1.5",
+    "@xmtp/experimental-content-type-screen-effect": "^1.0.2",
     "@xmtp/react-sdk": "^3.0.0",
     "buffer": "^6.0.3",
     "date-fns": "^2.29.3",

src/component-library/components/EffectDialog/EffectDialog.tsx

@@ -0,0 +1,31 @@
+import type { EffectType } from "@xmtp/experimental-content-type-screen-effect";
+
+export const EffectDialog = ({
+  handleSendEffect,
+}: {
+  handleSendEffect: (effect: EffectType) => void;
+}) => (
+  <dialog
+    open
+    style={{
+      width: 200,
+      height: 150,
+      border: "1px dotted indigo",
+      borderRadius: "16px",
+      position: "absolute",
+      bottom: "200px",
+      marginLeft: "80%",
+      display: "flex",
+      alignSelf: "flex-end",
+    }}>
+    <div className="w-full flex flex-col justify-around items-center text-md">
+      <b>Send with effect:</b>
+      <button type="button" onClick={() => handleSendEffect("SNOW")}>
+        **Let it Snow**
+      </button>
+      <button type="button" onClick={() => handleSendEffect("RAIN")}>
+        Make it Rain XMTP!
+      </button>
+    </div>
+  </dialog>
+);