Merge pull request #34 from algorandfoundation/docs/peer-section-ENG-483

docs: peer to peer sections

docs/.astro/settings.json

@@ -2,4 +2,4 @@
 	"_variables": {
 		"lastUpdateCheck": 1723148542874
 	}
-}
+}

docs/.astro/types.d.ts

@@ -262,6 +262,13 @@ declare module 'astro:content' {
   collection: "docs";
   data: InferEntrySchema<"docs">
 } & { render(): Render[".mdx"] };
+"guides/Peer to Peer/exchange.mdx": {
+	id: "guides/Peer to Peer/exchange.mdx";
+  slug: "guides/peer-to-peer/exchange";
+  body: string;
+  collection: "docs";
+  data: InferEntrySchema<"docs">
+} & { render(): Render[".mdx"] };
 "guides/Peer to Peer/offer.mdx": {
 	id: "guides/Peer to Peer/offer.mdx";
   slug: "guides/peer-to-peer/offer";

docs/astro.config.mjs

@@ -95,18 +95,10 @@ export default defineConfig({
           {
             label: "Peer Offer",
             link: "/clients/android/offer",
-            badge: {
-              text: "WIP",
-              variant: "caution"
-            },
           },
           {
             label: "Peer Answer",
             link: "/clients/android/answer",
-            badge: {
-              text: "WIP",
-              variant: "caution"
-            },
           },
           {
             label: "Provider Service",

docs/src/content/docs/clients/android/answer.mdx

@@ -17,18 +17,28 @@ val origin = "https://my-liquid-service.com" // Specify the origin of the servic
 val client = SignalClient(origin, context, httpClient) // Create the Client
 
 // Display the QR Code
-val qrCode = signalClient.qrCode(requestId, BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher_round))
+val qrCode = client.qrCode(requestId, BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher_round))
 
 // Wait for peer to scan the QR Code
-val dc = signalClient.peer(requestId, "offer" )
+val dc = client.peer(requestId, "offer" )
 
-// Handle the data channel messages and state changes
-signalClient.handleDataChannel(dc!!, {
+```
+
+## Data Channel[WIP]
+
+We are working on a more robust way to handle data channel messages. For now, you can use the following:
+
+```kotlin
+// Example.kt
+
+// Handle Peer Messages
+client.handleDataChannel(dc, {
     Log.d(TAG, "onMessage($it)")
-},{
+}, {
     Log.d(TAG, "onStateChange($it)")
 })
 
+
 // Send Message to Peer
-signalClient.peerClient.send("Hello World!")
+client.send("Hello World!")
 ```

docs/src/content/docs/clients/android/offer.mdx

@@ -8,14 +8,35 @@ import {Aside} from "@astrojs/starlight/components";
   See the [Authentication](./authentication) and [Registration](./registration) guides for more information.
 </Aside>
 
-[Peer-to-Peer]() connections can only be done using the `SignalClient`.
+[Peer-to-Peer](/guides/concepts/#peer-to-peer) connections can only be done using the `SignalClient`.
 Wallets are responsible for creating offers to connect.
 
+### Who is this for?
+
+- **Android Wallets** that want to communicate with other clients
+
 ## Signaling
 
 ```kotlin
-val requestID = 12345 // Scanned from a QR Code or Deep Link
-val origin = "https://my-liquid-service.com" // Origin of the service
+// Example.kt
+import foundation.algorand.auth.connect.SignalClient
+
+val requestID = "UUID-STRING-FROM-QR-CODE" // Scanned from a QR Code or Deep Link
+val origin = "https://<ORIGIN-OF-SERVICE-FROM-QR-CODE>" // Origin of the service
 val client = SignalClient(origin, context, httpClient)
-val dc = signalClient?.peer(requestId, "answer" )
+val dc = client.peer(requestId, "answer" )
+```
+
+## Data Channel[WIP]
+
+We are working on a more robust way to handle data channel messages. For now, you can use the following:
+
+```kotlin
+// Example.kt
+
+client.handleDataChannel(dc, {
+    Log.d(TAG, "onMessage($it)")
+}, {
+    Log.d(TAG, "onStateChange($it)")
+})
 ```

docs/src/content/docs/clients/browser/answer.mdx

@@ -25,14 +25,26 @@ const requestId = SignalClient.generateRequestId();
 ## Signaling
 
 ```typescript
+// Wait for a remote offer for the current request id
 client
     .peer(requestId, 'offer')
-    .then((dataChannel: RTCDataChannel)=>{
-        // Handle the data channel
-        dataChannel.onmessage = (event: MessageEvent) => {
-            console.log(event.data)
-        }
-    })
-const blob = await client.qrCode()
+    .then(handleDataChannel)
+
 // Display QR Code
+const blob = await client.qrCode()
+```
+
+## Data Channel[WIP]
+
+We are working on a more robust way to handle data channel messages. For now, you can use the following:
+
+```typescript
+
+function handleDataChannel(dc: RTCDataChannel){
+  dc.onmessage = (event: MessageEvent) => {
+      console.log(event.data)
+    }
+  dc.send('Hello world!')
+}
 ```
+

docs/src/content/docs/clients/browser/offer.mdx

@@ -11,7 +11,7 @@ import {Aside} from "@astrojs/starlight/components";
   See the [Authentication](/docs/clients/browser/authentication) and [Registration]() guides for more information.
 </Aside>
 
-[Peer-to-Peer]() connections can only be done using the `SignalClient`.
+[Peer-to-Peer](/guides/concepts/#peer-to-peer) connections can only be done using the `SignalClient`.
 Wallets are responsible for creating offers to connect.
 
 ### Who is this for?
@@ -22,27 +22,32 @@ Wallets are responsible for creating offers to connect.
 
 ```typescript
 import { SignalClient } from "@algorandfoundation/liquid-client";
-const client = new SignalClient("<ORIGIN OF SERVICE>")
+const client = new SignalClient("<ORIGIN-FROM-QR-CODE>")
 
 // Receive the RequestID from the Peer willing to Answer this offer
-const requestId = 12345
+const requestId = "<UUID-FROM-QR-CODE>"
 
 // Register or create a new credential,
 // ensure the requestId is included in the call
 // ...
 
 // Create the Peer Connection and await the remote client's answer
-client.peer(
+const dc = await client.peer(
   // Request ID from the Peer,
   // usually displayed as a Deep Link or QR Code
   requestId,
   // Type of remote client
   'answer'
-).then((dataChannel: RTCDataChannel) => {
-  // Handle the data channel
-  dataChannel.onmessage = (event: MessageEvent) => {
+)
+```
+
+## Data Channel[WIP]
+
+We are working on a more robust way to handle data channel messages. For now, you can use the following:
+
+```typescript
+dc.onmessage = (event: MessageEvent) => {
     console.log(event.data)
   }
-  dataChannel.send('Hello world!')
-})
+dc.send('Hello world!')
 ```

docs/src/content/docs/guides/Peer to Peer/answer.mdx

@@ -3,28 +3,31 @@ title: "Answer Guide"
 sidebar:
     order: 21
     label: "Answer"
-    badge:
-        text: "WIP"
-        variant: caution
 ---
 
+import { LinkCard, CardGrid } from "@astrojs/starlight/components";
+
 An **Answer** is a type of session that is initiated by a client
 and is used to respond to an **Offer** from another client.
-```mermaid
-sequenceDiagram
-    participant A as Answer Client
-    participant B as Offer Client
-    B->>A: Offer
-    A->>B: Answer
-```
 
-## Peering
+This is usually a dApp that wants to peer with a wallet client with an Offer.
+The Answer client is responsible for presenting the QRCode to the Offer client.
 
-TODO: add Tabs
+<LinkCard
+  href="/guides/peer-to-peer/exchange"
+  title="Exchange Sessions"
+  description="A detailed guide on how Offer and Answer clients exchange messages."
+/>
 
-```typescript
-// Wait for the Offer and send the Answer
-client.peer(requestId, "offer").then((dc)=>{
-  // Handle the Data Channel
-})
-```
+<CardGrid>
+  <LinkCard
+    href="/clients/browser/answer"
+    title="Browser: Peer Answer"
+    description="A detailed guide on using the Answer client in the browser."
+  />
+  <LinkCard
+    href="/clients/android/answer"
+    title="Android: Peer Answer"
+    description="A detailed guide on using the Answer client in Android."
+  />
+</CardGrid>

docs/src/content/docs/guides/Peer to Peer/exchange.mdx

@@ -0,0 +1,25 @@
+---
+title: "Exchange Sessions"
+sidebar:
+  order: 22
+label: "Exchange"
+---
+
+Both clients listen for each other's **Offer** and **Answer** messages at the relay service.
+Once the QR code is scanned, the **Offer** client proves it's identity then sends an **Offer** message to the **Answer** client.
+The **Answer** client then sends an **Answer** message to the **Offer** client,
+and the two clients can communicate over the P2P connection.
+
+```mermaid
+sequenceDiagram
+    participant A as Answer Client
+    participant C as Liquid Service
+    participant B as Offer Client
+    A->>A: Present QR Code
+    B->>A: Scan QR Code
+    A-->>B: Receive Origin and RequestId
+    B->>C: Offer to Origin
+    C->>A: Offer to Client
+    A->>C: Answer to Origin
+    C->>B: Answer to Client
+```

docs/src/content/docs/guides/Peer to Peer/offer.mdx

@@ -3,31 +3,30 @@ title: "Offer Guide"
 sidebar:
   order: 20
   label: "Offer"
-  badge:
-    text: "WIP"
-    variant: caution
 ---
-import {Aside} from '@astrojs/starlight/components';
+import {Aside, CardGrid, LinkCard} from '@astrojs/starlight/components';
 
-<Aside>The client must authenticate the request prior to sending the offer. See Linking for more information</Aside>
+<Aside>The client must authenticate the request prior to sending the offer. See [Authentication](/guides/passkey/authentication/) for more information</Aside>
 
 An **Offer** is a type of session that is initiated by a client
-and is used to request an **Answer** from another client.
-```mermaid
-sequenceDiagram
-    participant A as Offer Client
-    participant B as Answer Client
-    A->>B: Offer
-    B->>A: Answer
-```
+and is used to create a P2P connection with an **Answer** client.
 
-## Peering
+This is usually a wallet that wants to peer with a dApp client that can produce an Answer.
 
-TODO: add Tabs
-
-```typescript
-// Send the Offer and wait for the Answer
-client.peer(requestId, "answer").then((dc)=>{
-  // Handle the Data Channel
-})
-```
+<LinkCard
+  href="/guides/peer-to-peer/exchange"
+  title="Exchange Sessions"
+  description="A detailed guide on how Offer and Answer clients exchange messages."
+/>
+<CardGrid>
+  <LinkCard
+    href="/clients/browser/offer"
+    title="Browser: Peer Offer"
+    description="A detailed guide on using the Offer client in the browser."
+  />
+  <LinkCard
+    href="/clients/android/offer"
+    title="Android: Peer Offer"
+    description="A detailed guide on using the Offer client in Android."
+  />
+</CardGrid>