Skip to content

Commit 146cf50

Browse files
stephancillstephancill
committed
chore(docs): add post action mods to docs
1 parent 4d07f26 commit 146cf50

File tree

4 files changed

+158
-3
lines changed

4 files changed

+158
-3
lines changed

‎docs/pages/integrate/creation.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { CreationMod } from "@mod-protocol/react";
2929
/>
3030
```
3131

32-
if you want to support the user choosing between Mods, you can give them a UI to select a Mod, or use our component.
32+
If you want to support the user choosing between Mods, you can give them a UI to select a Mod, or use our component.
3333

3434
## Full example with the Mod Editor
3535

‎docs/pages/integrate/getting-started.mdx

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,20 @@ You can integrate as much or as little of Mod as you'd like, as Mod supports pro
88

99
You also have free choice of which Mods you want to support in your App. You can pick and choose from our open source ones, or even build and bring your own.
1010

11-
There are two kinds of Mods currently:
11+
There are three kinds of Mods currently:
1212

1313
1. [Creation Mods](creation.mdx): Enable users to use Mods when creating a post, such as Mods for adding Gifs, Images, Videos, Polls or using AI.
1414
You can integrate these with or without the Mod Editor, which is a great Farcaster cast creator with batteries included.
1515
2. [Rich-embed Mods](rich-embeds.mdx): Turn urls into rich embeds, with a fallback to an open graph style card embed. These enable Images, Videos, Polls, Games, Minting NFTs,
1616
or any other mini-interaction to happen directly in the interface.
1717
You can integrate these with or without the Mod Metadata Cache.
18+
3. [Post Action Mods](post-actions.mdx): Enable users to use Mods when interacting with posts, such as Mods for tipping, sharing, traslating or other mini-interactions that require the context of the post such as its author and contents.
19+
You can integrate these with or without the Mod Metadata Cache.
1820

1921
## Support
2022

2123
Mod currently only has SDKs for React, and we're working on adding React-native support.
2224

2325
## Boilerplate starter
2426

25-
Fork the [Mod-starter repo](https://github.com/mod-protocol/mod-starter) to get started
27+
Fork the [Mod-starter repo](https://github.com/mod-protocol/mod-starter) to get started

‎docs/pages/integrate/post-actions.mdx

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import Image from "next/image";
2+
3+
# Post Action Mods
4+
5+
Post Action Mods enable users to use Mods when interacting with posts, such as Mods for tipping, sharing, traslating or other mini-interactions that require the context of the post such as its author and contents.
6+
7+
Here's an example of where post action Mods will typically be used:
8+
9+
<Image
10+
src="/post-action.png"
11+
alt="Post Action Mod example"
12+
width="400"
13+
height="200"
14+
/>
15+
16+
You can integrate Post Action Mods with or without our [Mod Metadata Cache](../metadata-cache.mdx).
17+
18+
## Integration Example
19+
20+
```tsx
21+
import { ActionMod } from "@mod-protocol/react";
22+
23+
...
24+
25+
<ActionMod
26+
input={text}
27+
embeds={embeds}
28+
api={API_URL}
29+
variant="action"
30+
manifest={currentMod}
31+
renderers={renderers}
32+
onOpenFileAction={handleOpenFile}
33+
onExitAction={hideCurrentMod}
34+
/>
35+
```
36+
37+
## Full Example with Mod Search
38+
39+
```tsx
40+
import { Embed, ModManifest, handleOpenFile } from "@mod-protocol/core";
41+
import { actionMods, actionModsExperimental } from "@mod-protocol/mod-registry";
42+
import { ActionMod } from "@mod-protocol/react";
43+
import { ModsSearch } from "@mod-protocol/react-ui-shadcn/dist/components/creation-mods-search";
44+
import { Button } from "@mod-protocol/react-ui-shadcn/dist/components/ui/button";
45+
import {
46+
Popover,
47+
PopoverContent,
48+
PopoverTrigger,
49+
} from "@mod-protocol/react-ui-shadcn/dist/components/ui/popover";
50+
import { renderers } from "@mod-protocol/react-ui-shadcn/dist/renderers";
51+
import { KebabHorizontalIcon } from "@primer/octicons-react";
52+
import React, { useMemo } from "react";
53+
import { getAddress } from "viem";
54+
import { useAccount } from "wagmi";
55+
import { API_URL } from "./constants";
56+
import { useExperimentalMods } from "./use-experimental-mods";
57+
import { sendEthTransaction } from "./utils";
58+
59+
export function Actions({
60+
author,
61+
post,
62+
}: {
63+
author: {
64+
farcaster: {
65+
fid: string;
66+
};
67+
};
68+
post: {
69+
id: string;
70+
text: string;
71+
embeds: Embed[];
72+
};
73+
}) {
74+
const experimentalMods = useExperimentalMods();
75+
const [currentMod, setCurrentMod] = React.useState<ModManifest | null>(null);
76+
77+
const { address: unchecksummedAddress } = useAccount();
78+
const checksummedAddress = React.useMemo(() => {
79+
if (!unchecksummedAddress) return null;
80+
return getAddress(unchecksummedAddress);
81+
}, [unchecksummedAddress]);
82+
const user = React.useMemo(() => {
83+
return {
84+
wallet: {
85+
address: checksummedAddress,
86+
},
87+
};
88+
}, [checksummedAddress]);
89+
90+
const onSendEthTransactionAction = useMemo(() => sendEthTransaction, []);
91+
92+
return (
93+
<Popover
94+
open={!!currentMod}
95+
onOpenChange={(op: boolean) => {
96+
if (!op) setCurrentMod(null);
97+
}}
98+
>
99+
<PopoverTrigger></PopoverTrigger>
100+
<ModsSearch
101+
mods={experimentalMods ? actionModsExperimental : actionMods}
102+
onSelect={setCurrentMod}
103+
>
104+
<Button variant="ghost" role="combobox" type="button">
105+
<KebabHorizontalIcon></KebabHorizontalIcon>
106+
</Button>
107+
</ModsSearch>
108+
<PopoverContent className="w-[400px] ml-2" align="start">
109+
<div className="space-y-4">
110+
<h4 className="font-medium leading-none">{currentMod?.name}</h4>
111+
<hr />
112+
<ActionMod
113+
api={API_URL}
114+
user={user}
115+
variant="action"
116+
manifest={currentMod}
117+
renderers={renderers}
118+
onOpenFileAction={handleOpenFile}
119+
onExitAction={() => setCurrentMod(null)}
120+
onSendEthTransactionAction={onSendEthTransactionAction}
121+
author={author}
122+
post={{
123+
text: post.text,
124+
embeds: post.embeds,
125+
}}
126+
/>
127+
</div>
128+
</PopoverContent>
129+
</Popover>
130+
);
131+
}
132+
```
133+
134+
This component can then be included in your post to allow it to be invoked by the user:
135+
136+
```tsx
137+
...
138+
<div className="ml-auto">
139+
<Actions
140+
post={{
141+
id: props.cast.hash,
142+
text: props.cast.text,
143+
embeds: props.cast.embeds,
144+
}}
145+
author={{
146+
farcaster: {
147+
fid: `${props.cast.fid}`,
148+
},
149+
}}
150+
/>
151+
</div>
152+
...
153+
```

‎docs/public/post-action.png

211 KB
Loading

0 commit comments

Comments
 (0)