Add custom action sheet to choose the server to add a emoji to

src/components/AddToServerRow.jsx

@@ -0,0 +1,49 @@
+import { findByDisplayName, findByProps } from "@vendetta/metro";
+import { getAssetIDByName } from "@vendetta/ui/assets";
+import { FormRow } from "@vendetta/ui/components/Forms";
+import { showToast } from "@vendetta/ui/toasts";
+import fetchImageAsDataURL from "../functions/fetchImageAsDataURL";
+
+// Components
+const { default: GuildIcon, GuildIconSizes } = findByProps("GuildIconSizes");
+const Icon = findByDisplayName("Icon");
+
+// Misc
+const Emojis = findByProps("uploadEmoji");
+const LazyActionSheet = findByProps("openLazy", "hideActionSheet");
+
+const Add = getAssetIDByName("ic_add_24px");
+const Checkmark = getAssetIDByName("Check");
+
+export default function AddToServerRow({ guild, emojiNode }) {
+	const addToServerCallback = () => {
+		// Fetch image
+		fetchImageAsDataURL(emojiNode.src, (dataUrl) => {
+			// Upload it to Discord
+			Emojis.uploadEmoji({
+				guildId: guild.id,
+				image: dataUrl,
+				name: emojiNode.alt,
+				roles: undefined
+			}).then(() => {
+				// Let user know it was added
+				showToast(`Added ${emojiNode.alt} to ${guild.name}`, Checkmark);
+				// Close the sheet
+				LazyActionSheet.hideActionSheet();
+			});
+		});
+	};
+
+	return (<FormRow
+		leading={
+			<GuildIcon
+				guild={guild}
+				size={GuildIconSizes.LARGE}
+				animate={false}
+			/>
+		}
+		label={guild.name}
+		trailing={<Icon source={Add} />}
+		onPress={addToServerCallback}
+	/>)
+}

src/components/StealButtons.jsx

@@ -4,6 +4,7 @@ import { setString, setImage } from "@vendetta/metro/common/clipboard";
 import { getAssetIDByName } from "@vendetta/ui/assets";
 import { showToast } from "@vendetta/ui/toasts";
 import fetchImageAsDataURL from "../functions/fetchImageAsDataURL";
+import { showAddToServerActionSheet } from "../sheets/AddToServerActionSheet";
 
 const {
 	default: Button,
@@ -18,10 +19,10 @@ const CopyFile = getAssetIDByName('ic_message_copy');
 
 export default function StealButtons({ emojiNode }) {
 	const buttons = [
-		/*{
+		{
 			text: "Add to Server",
-			callback: () => { }
-		},*/
+			callback: () => showAddToServerActionSheet(emojiNode)
+		},
 		{
 			text: "Copy URL to clipboard",
 			callback: () => {
@@ -45,6 +46,7 @@ export default function StealButtons({ emojiNode }) {
 		})
 
 	]
+
 	return <>
 		{buttons.map(({ text, callback }) =>
 			<Button

src/sheets/AddToServerActionSheet.jsx

@@ -0,0 +1,36 @@
+import { find, findByProps } from "@vendetta/metro";
+import { Permissions } from "@vendetta/metro/common/constants";
+import { FormDivider } from "@vendetta/ui/components/Forms";
+import AddToServerRow from "../components/AddToServerRow";
+
+const LazyActionSheet = findByProps("openLazy", "hideActionSheet");
+
+// Components
+const ActionSheet = find((m) => m.default && m.default.render && m.default.render.name == "ActionSheet").default.render;
+const { BottomSheetScrollView } = findByProps("BottomSheetScrollView");
+
+// Stores
+const GuildStore = findByProps("getGuilds");
+const PermissionsStore = findByProps("can", "_dispatcher");
+
+// function to easily show the sheet
+export function showAddToServerActionSheet(emojiNode) {
+	LazyActionSheet.openLazy(() => Promise.resolve(AddToServerActionSheet), "AddToServerActionSheet", { emojiNode: emojiNode });
+};
+
+// The sheet itself
+export default function AddToServerActionSheet({ emojiNode }) {
+	// Get guilds as a Array of ID and value pairs, and filter out guilds the user can't edit emojis in
+	const guilds = Object.entries(GuildStore.getGuilds()).filter(([_, guild]) => PermissionsStore.can(Permissions.MANAGE_GUILD_EXPRESSIONS, guild));
+
+	return (<ActionSheet>
+		<BottomSheetScrollView contentContainerStyle={{ paddingBottom: 16 }}>
+			{guilds.map(([_, guild], num) =>
+				<>
+					<AddToServerRow guild={guild} emojiNode={emojiNode} />
+					{num !== guilds.length - 1 && <FormDivider />}
+				</>
+			)}
+		</BottomSheetScrollView>
+	</ActionSheet>)
+};