Add Prettier, Pt. Deux (#382)

* add prettier

* rm extra from prettierignore

* Add Prettier as dev dependency

* Fix markdownlint

* Ignore Prettier here

* fix prettier issue

* prettier and link fixes

---------

Co-authored-by: Benny Neugebauer <mail@bennycode.com>

Author: jhaaaa

.prettierignore

@@ -0,0 +1,4 @@
+# Contains CSS-in-JS template literals that break vocs when formatted
+docs/pages/chat-apps/intro/get-started.mdx
+# Contains "/xmtp/mls/1/w-$installationId/proto" which Prettier breaks in multiple lines
+docs/pages/chat-apps/push-notifs/push-notifs.mdx

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "proseWrap": "preserve"
+}

docs/pages/agents/content-types/attachments.mdx

@@ -30,10 +30,10 @@ After importing the package, you can register the codec.
 import {
   AttachmentCodec,
   RemoteAttachmentCodec,
-} from "@xmtp/content-type-remote-attachment";
+} from '@xmtp/content-type-remote-attachment';
 // Create the XMTP client
 const xmtp = await Client.create(signer, {
-  env: "dev",
+  env: 'dev',
   codecs: [new AttachmentCodec(), new RemoteAttachmentCodec()],
 });
 ```
@@ -50,7 +50,7 @@ const data = await new Promise((resolve, reject) => {
     if (reader.result instanceof ArrayBuffer) {
       resolve(reader.result);
     } else {
-      reject(new Error("Not an ArrayBuffer"));
+      reject(new Error('Not an ArrayBuffer'));
     }
   };
   reader.readAsArrayBuffer(image);
@@ -88,7 +88,7 @@ const remoteAttachment = {
   salt: encryptedEncoded.salt,
   nonce: encryptedEncoded.nonce,
   secret: encryptedEncoded.secret,
-  scheme: "https://",
+  scheme: 'https://',
   filename: attachment.filename,
   contentLength: attachment.data.byteLength,
 };
@@ -107,7 +107,7 @@ await conversation.send(remoteAttachment, {
 Now that you can send a remote attachment, you need a way to receive it. For example:
 
 ```tsx [Node]
-import { ContentTypeRemoteAttachment } from "@xmtp/content-type-remote-attachment";
+import { ContentTypeRemoteAttachment } from '@xmtp/content-type-remote-attachment';
 
 if (message.contentType.sameAs(RemoteAttachmentContentType)) {
   const attachment = await RemoteAttachmentCodec.load(message.content, client);
@@ -131,7 +131,7 @@ const objectURL = URL.createObjectURL(
   })
 );
 
-const img = document.createElement("img");
+const img = document.createElement('img');
 img.src = objectURL;
 img.title = attachment.filename;
 ```

docs/pages/agents/content-types/content-types.mdx

@@ -23,7 +23,7 @@ Here is the current standard content type:
 An agent built with XMTP uses the `TextCodec` (plain text) standard content type by default. This means that if your agent is sending plain text messages only, you don't need to perform any additional steps related to content types.
 
 ```jsx [Node]
-await conversation.send("gm");
+await conversation.send('gm');
 ```
 
 ## Standards-track content types

docs/pages/agents/content-types/reactions.mdx

@@ -31,12 +31,10 @@ pnpm add @xmtp/content-type-reaction
 After importing the package, you can register the codec.
 
 ```jsx [Node]
-import {
-  ReactionCodec,
-} from "@xmtp/content-type-reaction";
+import { ReactionCodec } from '@xmtp/content-type-reaction';
 // Create the XMTP client
 const xmtp = await Client.create(signer, {
-  env: "dev",
+  env: 'dev',
   codecs: [new ReactionCodec()],
 });
 ```
@@ -56,8 +54,8 @@ With XMTP, reactions are represented as objects with the following keys:
 ```tsx [Node]
 const reaction = {
   reference: someMessageID,
-  action: "added",
-  content: "smile",
+  action: 'added',
+  content: 'smile',
 };
 
 await conversation.send(reaction, {

docs/pages/agents/content-types/replies.mdx

@@ -31,10 +31,10 @@ pnpm add @xmtp/content-type-reply
 After importing the package, you can register the codec.
 
 ```js [Node]
-import { ReplyCodec } from "@xmtp/content-type-reply";
+import { ReplyCodec } from '@xmtp/content-type-reply';
 // Create the XMTP client
 const xmtp = await Client.create(signer, {
-  env: "dev",
+  env: 'dev',
   codecs: [new ReplyCodec()],
 });
 ```
@@ -48,14 +48,14 @@ Once you've created a reply, you can send it. Replies are represented as objects
 - `content`: String representation of the reply
 
 ```ts [Node]
-import { ContentTypeText } from "@xmtp/content-type-text";
-import { ContentTypeReply } from "@xmtp/content-type-reply";
-import type { Reply } from "@xmtp/content-type-reply";
+import { ContentTypeText } from '@xmtp/content-type-text';
+import { ContentTypeReply } from '@xmtp/content-type-reply';
+import type { Reply } from '@xmtp/content-type-reply';
 
 const reply: Reply = {
   reference: someMessageID,
   contentType: ContentTypeText,
-  content: "I concur",
+  content: 'I concur',
 };
 
 await conversation.send(reply, {

docs/pages/agents/content-types/transaction-refs.mdx

@@ -36,10 +36,10 @@ After importing the package, you can register the codec.
 import {
   ContentTypeTransactionReference,
   TransactionReferenceCodec,
-} from "@xmtp/content-type-transaction-reference";
+} from '@xmtp/content-type-transaction-reference';
 // Create the XMTP client
 const xmtp = await Client.create(signer, {
-  env: "dev",
+  env: 'dev',
   codecs: [new TransactionReferenceCodec()],
 });
 ```

docs/pages/agents/content-types/transactions.mdx

@@ -33,12 +33,10 @@ pnpm i @xmtp/content-type-wallet-send-calls
 After importing the package, you can register the codec.
 
 ```js [Node]
-import {
-  WalletSendCallsCodec,
-} from "@xmtp/content-type-wallet-send-calls";
+import { WalletSendCallsCodec } from '@xmtp/content-type-wallet-send-calls';
 // Create the XMTP client
 const xmtp = await Client.create(signer, {
-  env: "dev",
+  env: 'dev',
   codecs: [new WalletSendCallsCodec()],
 });
 ```
@@ -49,33 +47,33 @@ With XMTP, a transaction request is represented using `wallet_sendCalls` with ad
 
 ```ts [Node]
 const walletSendCalls: WalletSendCallsParams = {
-  version: "1.0",
-  from: "0x123...abc",
-  chainId: "0x2105",
+  version: '1.0',
+  from: '0x123...abc',
+  chainId: '0x2105',
   calls: [
     {
-      to: "0x456...def",
-      value: "0x5AF3107A4000",
+      to: '0x456...def',
+      value: '0x5AF3107A4000',
       metadata: {
-        description: "Send 0.0001 ETH on base to 0x456...def",
-        transactionType: "transfer",
-        currency: "ETH",
+        description: 'Send 0.0001 ETH on base to 0x456...def',
+        transactionType: 'transfer',
+        currency: 'ETH',
         amount: 100000000000000,
         decimals: 18,
-        toAddress: "0x456...def",
+        toAddress: '0x456...def',
       },
     },
     {
-      to: "0x789...cba",
-      data: "0xdead...beef",
+      to: '0x789...cba',
+      data: '0xdead...beef',
       metadata: {
-        description: "Lend 10 USDC on base with Morpho @ 8.5% APY",
-        transactionType: "lend",
-        currency: "USDC",
+        description: 'Lend 10 USDC on base with Morpho @ 8.5% APY',
+        transactionType: 'lend',
+        currency: 'USDC',
         amount: 10000000,
         decimals: 6,
-        platform: "morpho",
-        apy: "8.5",
+        platform: 'morpho',
+        apy: '8.5',
       },
     },
   ],

docs/pages/agents/core-messaging/agent-installations.mdx

@@ -15,11 +15,15 @@ Your agent can have **up to 10 active installations** before you need to revoke
 For example, if you deploy your agent across these network environments, you will have 3 inboxes, each with 1 installation:
 
 - Local development: `local` network
-- Railway: `dev` network  
+- Railway: `dev` network
 - Production server: `production` network
 
 <div>
-  <img src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/agent-install-sep.png" width="500px" alt="Diagram showing agent deployments across different network environments (local, dev, production) creating separate inboxes with one installation each" />
+  <img
+    src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/agent-install-sep.png"
+    width="500px"
+    alt="Diagram showing agent deployments across different network environments (local, dev, production) creating separate inboxes with one installation each"
+  />
 </div>
 
 If you deploy your agent to this same network environment, you have 1 inbox with 3 installations:
@@ -29,7 +33,11 @@ If you deploy your agent to this same network environment, you have 1 inbox with
 - Production server: `production` network
 
 <div>
-  <img src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/agent-install.png" width="500px" alt="Diagram showing agent deployments to the same production network environment creating one inbox with three installations" />
+  <img
+    src="https://raw.githubusercontent.com/xmtp/docs-xmtp-org/refs/heads/main/docs/pages/img/agent-install.png"
+    width="500px"
+    alt="Diagram showing agent deployments to the same production network environment creating one inbox with three installations"
+  />
 </div>
 
 Here are some best practices for agent installation management:

docs/pages/agents/core-messaging/create-a-client.mdx

@@ -67,11 +67,13 @@ If you want to inspect the database visually, you can use [DB Browser for SQLite
 To call `Client.create()`, you must pass in a required `signer` and can also pass in any of the optional parameters covered in [Configure an XMTP client](#configure-an-xmtp-client).
 
 ```tsx [Node]
-import { Client, type Signer } from "@xmtp/node-sdk";
-import { getRandomValues } from "node:crypto";
+import { Client, type Signer } from '@xmtp/node-sdk';
+import { getRandomValues } from 'node:crypto';
 
 // create a signer
-const signer: Signer = { /* ... */ };
+const signer: Signer = {
+  /* ... */
+};
 
 /**
  * The database encryption key is optional but strongly recommended for
@@ -89,7 +91,7 @@ const client = await Client.create(
     dbEncryptionKey,
     // Optional: Use a function to dynamically set the database path based on inbox ID
     // dbPath: (inboxId) => `./agent-databases/xmtp-${inboxId}.db3`,
-  },
+  }
 );
 ```
 
@@ -98,26 +100,26 @@ const client = await Client.create(
 You can configure an XMTP client with these options passed to `Client.create`:
 
 ```tsx [Node]
-import type { ContentCodec } from "@xmtp/content-type-primitives";
-import type { LogLevel } from "@xmtp/node-bindings";
+import type { ContentCodec } from '@xmtp/content-type-primitives';
+import type { LogLevel } from '@xmtp/node-bindings';
 
 type ClientOptions = {
   /**
    * Specify which XMTP environment to connect to. (default: `dev`)
    */
-  env?: "local" | "dev" | "production";
+  env?: 'local' | 'dev' | 'production';
   /**
    * Add a client app version identifier that's included with API requests.
    * Production apps are strongly encouraged to set this value.
    *
    * You can use the following format: `appVersion: 'AGENT_NAME/AGENT_VERSION'`.
    * For example, `appVersion: 'alix/2.x'`
    *
-   * If you have an agent and an app, it's best to distinguish them from each other by 
+   * If you have an agent and an app, it's best to distinguish them from each other by
    * adding `-agent` and `-app` to the names. For example:
    * - Agent: `appVersion: 'alix-agent/2.x'`
    * - App: `appVersion: 'alix-app/3.x'`
-   * 
+   *
    * Setting this value provides telemetry that shows which agents are using the
    * XMTP client SDK. This information can help XMTP core developers provide you with agent
    * support, especially around communicating important SDK updates, including