Repository: ithacaxyz/porto
Pull request #271: feat(docs): dialog page
Author: login: o-az
Created: 2025-05-22T16:10:06Z | Merged: 2025-05-23T05:07:19Z



Diff:
diff --git a/apps/docs/pages/sdk/api/dialog.mdx b/apps/docs/pages/sdk/api/dialog.mdx
new file mode 100644
index 000000000..2516aaf09
--- /dev/null
+++ b/apps/docs/pages/sdk/api/dialog.mdx
@@ -0,0 +1,47 @@
+# Dialog
+
+Porto dialog is a renderer that displays the account interface in a modal dialog.
+As with everything else, Porto comes pre-configured with a default dialog renderer suitable for the user's browser of choice.
+That means that you don't need to do anything to use the dialog.
+
+
+## Behavior
+
+- The dialog opens automatically when a request requires user confirmation
+- The dialog closes when:
+  - The user completes the requested action
+  - The user clicks outside the dialog
+  - The user presses the Escape key
+- When the dialog closes due to a user cancellation, all pending requests will be rejected with a `UserRejectedRequestError`
+
+## `Dialog.iframe`
+
+The [`iframe`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) dialog is Porto's default rendering option.
+
+### Usage
+
+```ts twoslash
+import { Porto, Dialog, Mode } from 'porto'
+
+const porto = Porto.create({
+  mode: Mode.dialog({
+    renderer: Dialog.iframe() // [!code focus]
+  })
+})
+```
+
+## `Dialog.popup`
+
+The `popup` dialog is the same as the `iframe` dialog but uses a popup window instead of an `iframe`.
+
+### Usage
+
+```ts twoslash
+import { Porto, Dialog, Mode } from 'porto'
+
+const porto = Porto.create({
+  mode: Mode.dialog({
+    renderer: Dialog.popup() // [!code focus]
+  })
+})
+```
\ No newline at end of file
diff --git a/apps/docs/pages/sdk/api/dialog/iframe.mdx b/apps/docs/pages/sdk/api/dialog/iframe.mdx
deleted file mode 100644
index d63e686e4..000000000
--- a/apps/docs/pages/sdk/api/dialog/iframe.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { TryItOut } from '../../../../components/TryItOut'
-
-# `Dialog.iframe`
-
-The [`iframe`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) dialog is Porto's default rendering option that displays the account interface in a modal dialog using an `iframe`.
-
-## Usage
-
-```ts twoslash
-import { Porto, Dialog, Mode } from 'porto'
-
-const porto = Porto.create({
-  mode: Mode.dialog({
-    renderer: Dialog.iframe()
-  })
-})
-```
-
-## Behavior
-
-- The dialog opens automatically when a request requires user confirmation
-- The dialog closes when:
-  - The user completes the requested action
-  - The user clicks outside the dialog
-  - The user presses the Escape key
-- When the dialog closes due to a user cancellation, all pending requests will be rejected with a `UserRejectedRequestError`
diff --git a/apps/docs/vocs.config.tsx b/apps/docs/vocs.config.tsx
index 1407546d9..ae30df83d 100644
--- a/apps/docs/vocs.config.tsx
+++ b/apps/docs/vocs.config.tsx
@@ -161,18 +161,6 @@ export default defineConfig({
             text: 'Chains',
           },
           {
-            collapsed: true,
-            items: [
-              {
-                link: '/sdk/api/dialog/iframe',
-                text: '.iframe',
-              },
-              {
-                disabled: true,
-                link: '/sdk/api/dialog/popup',
-                text: '.popup',
-              },
-            ],
             link: '/sdk/api/dialog',
             text: 'Dialog',
           },


Reviews:
user: login: jxom
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-23T05:06:56Z
user: login: graphite-app[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-23T05:07:55Z

Review comments:
diff_hunk: @@ -0,0 +1,51 @@
+# Dialog
+
+Porto dialog is a renderer that displays the account interface in a modal dialog.
+As with everything else, Porto comes pre-configured with a default dialog renderer suitable for the user's browser of choice.
+That means that you don't need to do anything to use the dialog.
+
+There are two different dialog renderers:
+
+- [`Dialog.iframe`](#dialogiframe): default in all browsers except Safari
+- [`Dialog.popup`](#dialogpopup): default in Safari
path: apps/docs/pages/sdk/api/dialog.mdx
user: login: jxom
body: ```suggestion
```
created_at: 2025-05-23T05:06:56Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,47 @@
+# Dialog
+
+Porto dialog is a renderer that displays the account interface in a modal dialog.
+As with everything else, Porto comes pre-configured with a default dialog renderer suitable for the user's browser of choice.
+That means that you don't need to do anything to use the dialog.
+
+
+## Behavior
+
+- The dialog opens automatically when a request requires user confirmation
+- The dialog closes when:
+  - The user completes the requested action
+  - The user clicks outside the dialog
+  - The user presses the Escape key
+- When the dialog closes due to a user cancellation, all pending requests will be rejected with a `UserRejectedRequestError`
+
+## `Dialog.iframe`
+
+The [`iframe`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe) dialog is Porto's default rendering option.
+
+### Usage
+
+```ts twoslash
+import { Porto, Dialog, Mode } from 'porto'
+
+const porto = Porto.create({
+  mode: Mode.dialog({
+    renderer: Dialog.iframe() // [!code focus]
+  })
+})
+```
+
+## `Dialog.popup`
+
+The `popup` dialog is the same as the `iframe` dialog but uses a popup window instead of an `iframe`.
+
+### Usage
+
+```ts twoslash
+import { Porto, Dialog, Mode } from 'porto'
+
+const porto = Porto.create({
+  mode: Mode.dialog({
+    renderer: Dialog.popup() // [!code focus]
+  })
+})
+```
path: apps/docs/pages/sdk/api/dialog.mdx
user: login: graphite-app[bot]
body: The file is missing a trailing newline at the end. This can cause issues with certain tools and goes against standard file formatting conventions. Consider adding a blank line at the end of the file.

*Spotted by [Diamond](https://app.graphite.dev/diamond/?org=ithacaxyz&ref=ai-review-comment)*<i class='graphite__hidden'><br /><br />Is this helpful? React 👍 or 👎 to let us know.</i>
created_at: 2025-05-23T05:07:54Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-22T16:10:09Z
body: ###  ⚠️  No Changeset found

Latest commit: 7d766b4be1f54320b42a6576ed3511bdb68dfc39

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/ithacaxyz/porto/new/o-az/docs-dialog?filename=.changeset/stupid-chicken-kneel.md&value=---%0A%22docs%22%3A%20patch%0A---%0A%0Afeat(docs)%3A%20dialog%20page%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-22T16:10:11Z
body: [vc]: #U0B3klrhmPerNXLtzLkmjbmB2DR9IkhMXPfYNocZ3+E=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJkb2NzLnBvcnRvIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvZG9jcyIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9pdGhhY2F4eXovZG9jcy5wb3J0by81MUd3aFVnTjhoSk5FMzVyWjFMY0VBblJUVzZEIiwicHJldmlld1VybCI6ImRvY3Nwb3J0by1naXQtby1hei1kb2NzLWRpYWxvZy1pdGhhY2F4eXoudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJkb2NzcG9ydG8tZ2l0LW8tYXotZG9jcy1kaWFsb2ctaXRoYWNheHl6LnZlcmNlbC5hcHAifX0seyJuYW1lIjoibWFuYWdlLnBvcnRvIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvbWFuYWdlciIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9pdGhhY2F4eXovbWFuYWdlLnBvcnRvLzRUNnd2VVZwbzNrNkwyNHZyNnpjUXJmcGlXcjciLCJwcmV2aWV3VXJsIjoibWFuYWdlcG9ydG8tZ2l0LW8tYXotZG9jcy1kaWFsb2ctaXRoYWNheHl6LnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibWFuYWdlcG9ydG8tZ2l0LW8tYXotZG9jcy1kaWFsb2ctaXRoYWNheHl6LnZlcmNlbC5hcHAifX0seyJuYW1lIjoiZGlhbG9nLnBvcnRvIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvZGlhbG9nIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2l0aGFjYXh5ei9kaWFsb2cucG9ydG8vMzdON3Y0OHZCTEZuYjlHM2Q5U1Q3SHNmU3RRQSIsInByZXZpZXdVcmwiOiJkaWFsb2dwb3J0by1naXQtby1hei1kb2NzLWRpYWxvZy1pdGhhY2F4eXoudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJkaWFsb2dwb3J0by1naXQtby1hei1kb2NzLWRpYWxvZy1pdGhhY2F4eXoudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJpZC5wb3J0byIsInJvb3REaXJlY3RvcnkiOiJhcHBzL3Byb3h5IiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2l0aGFjYXh5ei9pZC5wb3J0by80aUNVRlhNWGhTdjhMWW5EOEhzMm1TZGZWdW51IiwicHJldmlld1VybCI6ImlkcG9ydG8tZ2l0LW8tYXotZG9jcy1kaWFsb2ctaXRoYWNheHl6LnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiaWRwb3J0by1naXQtby1hei1kb2NzLWRpYWxvZy1pdGhhY2F4eXoudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJ3YWdtaS5wb3J0byIsInJvb3REaXJlY3RvcnkiOiJhcHBzL3dhZ21pIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2l0aGFjYXh5ei93YWdtaS5wb3J0by8ybmllVjc1dU5jeFlWem54cEw2eWZyWVhEZ052IiwicHJldmlld1VybCI6IndhZ21pcG9ydG8tZ2l0LW8tYXotZG9jcy1kaWFsb2ctaXRoYWNheHl6LnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoid2FnbWlwb3J0by1naXQtby1hei1kb2NzLWRpYWxvZy1pdGhhY2F4eXoudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJwbGF5Z3JvdW5kLnBvcnRvIiwicm9vdERpcmVjdG9yeSI6ImFwcHMvcGxheWdyb3VuZCIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9pdGhhY2F4eXovcGxheWdyb3VuZC5wb3J0by9Ianl0SkxLREd0SkxqaTRyejNCcDg2M1l1azVXIiwicHJldmlld1VybCI6InBsYXlncm91bmRwb3J0by1naXQtby1hei1kb2NzLWRpYWxvZy1pdGhhY2F4eXoudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJwbGF5Z3JvdW5kcG9ydG8tZ2l0LW8tYXotZG9jcy1kaWFsb2ctaXRoYWNheHl6LnZlcmNlbC5hcHAifX1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **dialog.porto** | ✅ Ready ([Inspect](https://vercel.com/ithacaxyz/dialog.porto/37N7v48vBLFnb9G3d9ST7HsfStQA)) | [Visit Preview](https://dialogporto-git-o-az-docs-dialog-ithacaxyz.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/dialogporto-git-o-az-docs-dialog-ithacaxyz.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 5:23am |
| **docs.porto** | ✅ Ready ([Inspect](https://vercel.com/ithacaxyz/docs.porto/51GwhUgN8hJNE35rZ1LcEAnRTW6D)) | [Visit Preview](https://docsporto-git-o-az-docs-dialog-ithacaxyz.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/docsporto-git-o-az-docs-dialog-ithacaxyz.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 5:23am |
| **id.porto** | ✅ Ready ([Inspect](https://vercel.com/ithacaxyz/id.porto/4iCUFXMXhSv8LYnD8Hs2mSdfVunu)) | [Visit Preview](https://idporto-git-o-az-docs-dialog-ithacaxyz.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/idporto-git-o-az-docs-dialog-ithacaxyz.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 5:23am |
| **manage.porto** | ✅ Ready ([Inspect](https://vercel.com/ithacaxyz/manage.porto/4T6wvUVpo3k6L24vr6zcQrfpiWr7)) | [Visit Preview](https://manageporto-git-o-az-docs-dialog-ithacaxyz.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/manageporto-git-o-az-docs-dialog-ithacaxyz.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 5:23am |
| **playground.porto** | ✅ Ready ([Inspect](https://vercel.com/ithacaxyz/playground.porto/HjytJLKDGtJLji4rz3Bp863Yuk5W)) | [Visit Preview](https://playgroundporto-git-o-az-docs-dialog-ithacaxyz.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/playgroundporto-git-o-az-docs-dialog-ithacaxyz.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 5:23am |
| **wagmi.porto** | ✅ Ready ([Inspect](https://vercel.com/ithacaxyz/wagmi.porto/2nieV75uNcxYVznxpL6yfrYXDgNv)) | [Visit Preview](https://wagmiporto-git-o-az-docs-dialog-ithacaxyz.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/wagmiporto-git-o-az-docs-dialog-ithacaxyz.vercel.app?via=pr-comment-feedback-link) | May 23, 2025 5:23am |







author_association: NONE