readme improvements (#24)

Author: humanagent

examples/gated-group/README.md

@@ -2,6 +2,8 @@
 
 To create a gated group chat using XMTP, you will need an admin bot within the group to manage member additions and removals. The admin bot will create the group, assign you as the admin, and then verify NFT ownership before adding new members.
 
+![](/media/gated.png)
+
 #### Environment variables
 
 ```bash
@@ -26,45 +28,38 @@ yarn gen:keys
 Start your XMTP client and begin listening to messages. The bot responds to the following commands:
 
 - `/create` - Creates a new gated group
-- `/add <wallet_address> <group_id>` - Adds a wallet to an existing group (if they own the required NFT)
 
 ```tsx
-const client = await Client.create(signer, encryptionKey, {
-  env,
-});
-
-// Listen for messages
-const stream = client.conversations.streamAllMessages();
+if (message.content === "/create") {
+  console.log("Creating group");
+  const group = await client.conversations.newGroup([]);
+  await group.addMembersByInboxId([message.senderInboxId]);
+  await group.addSuperAdmin(message.senderInboxId);
+
+  await conversation.send(
+    `Group created!\n- ID: ${group.id}\n- Group URL: https://xmtp.chat/conversations/${group.id}`,
+  );
+  return;
+}
+```
 
-for await (const message of await stream) {
-  // Handle /create command
-  if (message.content === "/create") {
-    console.log("Creating group");
-    const group = await client.conversations.newGroup([]);
-    await group.addMembersByInboxId([message.senderInboxId]);
-    await group.addSuperAdmin(message.senderInboxId);
+- `/add <group_id> <wallet_address>` - Adds a wallet to an existing group (if they own the required NFT)
 
+```tsx
+// Handle /add command
+if (message.content.startsWith("/add")) {
+  const groupId = message.content.split(" ")[1];
+  const walletAddress = message.content.split(" ")[2];
+
+  const result = await checkNft(walletAddress, "XMTPeople");
+  if (!result) {
+    console.log("User can't be added to the group");
+    return;
+  } else {
+    await group.addMembers([walletAddress]);
     await conversation.send(
-      `Group created!\n- ID: ${group.id}\n- Group URL: https://xmtp.chat/conversations/${group.id}`,
+      `User added to the group\n- Group ID: ${groupId}\n- Wallet Address: ${walletAddress}`,
     );
-    return;
-  }
-
-  // Handle /add command
-  if (message.content.startsWith("/add")) {
-    const walletAddress = message.content.split(" ")[1];
-    const groupId = message.content.split(" ")[2];
-
-    const result = await checkNft(walletAddress, "XMTPeople");
-    if (!result) {
-      console.log("User can't be added to the group");
-      return;
-    } else {
-      await group.addMembers([walletAddress]);
-      await conversation.send(
-        `User added to the group\n- Group ID: ${groupId}\n- Wallet Address: ${walletAddress}`,
-      );
-    }
   }
 }
 ```
@@ -99,7 +94,7 @@ async function checkNft(
 
 1. Start the bot with your environment variables configured
 2. Message the bot at its address to create a new group using `/create`
-3. Once you have the group ID, you can add members using `/add <wallet_address> <group_id>`
+3. Once you have the group ID, you can add members using `/add <group_id> <wallet_address>`
 4. The bot will verify NFT ownership and add the wallet if they own the required NFT
 
 The bot will automatically make the group creator a super admin and can optionally make new members admins as well.

examples/gated-group/index.ts

@@ -83,7 +83,7 @@ async function main() {
       );
 
       await conversation.send(
-        `Group created!\n- ID: ${group.id}\n- Group URL: https://xmtp.chat/conversations/${group.id}: \n- This url will deeplink to the group created\n- Once in the other group you can share the invite with your friends.\n- You can add more members to the group by using the /add <group.id> <wallet-address>.`,
+        `Group created!\n- ID: ${group.id}\n- Group URL: https://xmtp.chat/conversations/${group.id}: \n- This url will deeplink to the group created\n- Once in the other group you can share the invite with your friends.\n- You can add more members to the group by using the /add <group_id> <wallet_address>.`,
       );
       return;
     } else if (