Merge branch 'main' into feat-multi-api

TrofimovAnton85 · web-flow · commit 9788bb4b1bc5 · 2024-11-20T10:43:03.000+01:00
diff --git a/developer-tools/dashboard/get-started/create-api.md b/developer-tools/dashboard/get-started/create-api.md
@@ -37,7 +37,7 @@ requiring an API key secret or JWTs with each API request.
 
 We recommend the following best practices when creating your API keys:
 
-- Group API key endpoints by environment. For example, create seperate API keys for production or development environments.
+- Group API key endpoints by environment. For example, create separate API keys for production or development environments.
 - Group API key endpoints by groups or individuals [sharing the API key](../how-to/project-sharing.md).
 - Limit the number of networks or services per API key only to the necessary endpoints.
 - Group the API key endpoints based on shared security considerations such as
diff --git a/developer-tools/dashboard/how-to/troubleshoot.md b/developer-tools/dashboard/how-to/troubleshoot.md
@@ -7,7 +7,7 @@ sidebar_position: 9
 
 ### Suspicious activity detected during registration
 
-If you receive a "Suspicious activity detected" message during registration, it might be for of one of the following
+If you receive a "Suspicious activity detected" message during registration, it might be for one of the following
 reasons:
 
 - You have another account: Infura does not allow users to create multiple accounts, so if
diff --git a/docs/whats-new.md b/docs/whats-new.md
@@ -11,12 +11,13 @@ of the [MetaMask developer page](https://metamask.io/developer/).
 
 ## November 2024
 
+- Updated Snaps [Custom UI documentation](/snaps/features/custom-ui/) for MetaMask Extension version 12.6.
+  ([#1715](https://github.com/MetaMask/metamask-docs/pull/1715))
 - Added tutorial for
   [creating a simple Starknet dapp](/wallet/how-to/use-non-evm-networks/starknet/create-a-simple-starknet-dapp).
   ([#1656](https://github.com/MetaMask/metamask-docs/pull/1656))
 - Documented Snaps [`Card`](/snaps/features/custom-ui/#card) and [`Section`](/snaps/features/custom-ui/#section) UI components.
-  ([#1707](https://github.com/MetaMask/metamask-docs/pull/1707) and
-  [#1700](https://github.com/MetaMask/metamask-docs/pull/1700))
+  ([#1707](https://github.com/MetaMask/metamask-docs/pull/1707)) ([#1700](https://github.com/MetaMask/metamask-docs/pull/1700))
 
 ## October 2024
 
diff --git a/services/concepts/gas.md b/services/concepts/gas.md
@@ -6,7 +6,7 @@ sidebar_position: 6
 # Gas
 
 Gas is a unit used to measure the computational effort required to perform an action on a blockchain network, such as
-executing a smart contract or sending a transaction. To perform an action, users must pay in units of gas, which is
+executing a smart contract or sending a transaction. To perform an action, users must pay in units of gas, which are
 calculated based on the computational resources required for the action, and to compensate the miners who execute the
 request.
 
diff --git a/services/reference/arbitrum/index.md b/services/reference/arbitrum/index.md
@@ -54,6 +54,4 @@ Select one of the following options to get started with the Arbitrum network:
 
 No personal information is sent as part of partner requests, only information necessary to fulfill your API request. This means that Infura's partner service provider can service your request, but not store the content of your request.
 
-For any parameters required in an RPC request, these could be the type that describe the method, addresses, gas, and session.
-
-Liquify ([Privacy Policy](https://www.liquify.com/Liquify_RPC_PP.pdf)) is Infura's failover-protection partner and currently offer failover support for all Infura's Arbitrum methods.
+Liquify ([Privacy Policy](https://www.liquify.com/Liquify_RPC_PP.pdf)) is Infura's failover-protection partner and currently offers failover support for all Infura's Arbitrum methods.
diff --git a/services/reference/avalanche-c-chain/index.md b/services/reference/avalanche-c-chain/index.md
@@ -59,6 +59,4 @@ Select one of the following options to get started with the Avalanche C-Chain ne
 
 No personal information is sent as part of partner requests, only information necessary to fulfill your API request. This means that Infura's partner service provider can service your request, but not store the content of your request.
 
-For any parameters required in an RPC request, these could be the type that describe the method, addresses, gas, and session.
-
-Liquify ([Privacy Policy](https://www.liquify.com/Liquify_RPC_PP.pdf)) is Infura's failover-protection partner and currently offer failover support for all Infura's Avalanche (C-Chain) methods.
+Liquify ([Privacy Policy](https://www.liquify.com/Liquify_RPC_PP.pdf)) is Infura's failover-protection partner and currently offers failover support for all Infura's Avalanche (C-Chain) methods.
diff --git a/services/reference/base/index.md b/services/reference/base/index.md
@@ -8,7 +8,7 @@ import CardList from '@site/src/components/CardList'
 
 Base is an optimistic layer 2 rollup chain built by Coinbase on the MIT-licensed [OP Stack](https://docs.optimism.io/stack/getting-started#the-op-stack-today), in collaboration with [Optimism](../optimism/index.md).
 
-The Base network provides seamless Coinbase integrations, easy fiat onramps, and access to more than 
+The Base network provides seamless Coinbase integrations, easy fiat on-ramps, and access to more than 
 100 million users and $100 billion in assets in the Coinbase ecosystem.
 
 :::info See also
diff --git a/services/reference/ipfs/http-api-methods/add.md b/services/reference/ipfs/http-api-methods/add.md
@@ -69,4 +69,4 @@ On success, the call to this endpoint will return with 200 and the following bod
 
 - `Name` - Name of the object.
 - `Hash` - Hash of the uploaded object.
-- `Size` - Integer indication size in bytes.
+- `Size` - Integer indicating size in bytes.
diff --git a/services/reference/mantle/index.md b/services/reference/mantle/index.md
@@ -53,6 +53,6 @@ Select one of the following options to get started with the Mantle network:
 
 ## Partners and privacy policies
 
-The following partner provides access to Mantle network:
+The following partner provides access to the Mantle network:
 
 - 0xFury ([Privacy policy](https://0xfury.com/privacy.php))
diff --git a/services/reference/optimism/index.md b/services/reference/optimism/index.md
@@ -50,8 +50,6 @@ occur on Optimism are posted and validated on Ethereum mainnet using Optimistic
 
 No personal information is sent as part of partner requests, only information necessary to fulfill your API request. This means that Infura's partner service provider can service your request, but not store the content of your request.
 
-For any parameters required in an RPC request, these could be the type that describe the method, addresses, gas, and session.
-
 Bware Labs ([Terms of Service](https://bwarelabs.com/terms), [Privacy Policy](https://bwarelabs.com/privacy)) is Infura's failover-protection partner. While Bware Labs supports most Infura methods, it does not yet support the following methods:
 
 - `eth_accounts`
diff --git a/services/reference/palm/index.md b/services/reference/palm/index.md
@@ -8,7 +8,7 @@ import CardList from '@site/src/components/CardList'
 
 The [Palm Network](https://palm.io/) is an Ethereum Virtual Machine-compatible Polygon Supernet. The Palm Network is for
 creators, fans, and leaders in various industries such as art, technology, sports, and entertainment. The network
-provides support to developers in their quest to build new and user-friendly tools that contributes to the growth of
+provides support to developers in their quest to build new and user-friendly tools that contribute to the growth of
 the Web3 ecosystem.
 
 :::info See also
diff --git a/services/reference/polygon-pos/index.md b/services/reference/polygon-pos/index.md
@@ -50,8 +50,6 @@ The [official Polygon documentation](https://docs.polygon.technology) for more i
 
 No personal information is sent as part of partner requests, only information necessary to fulfill your API request. This means that Infura's partner service provider can service your request, but not store the content of your request.
 
-For any parameters required in an RPC request, these could be the type that describe the method, addresses, gas, and session.
-
 <!-- markdown-link-check-disable -->
 
 Rivet.cloud ([Terms of Service](https://rivet.cloud/terms), [Privacy Policy](https://rivet.cloud/privacy-policy)) is Infura's failover-protection partner. While Rivet.cloud supports most Infura methods,
diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md
@@ -3,6 +3,9 @@ description: Display custom user interface components using JSX.
 sidebar_position: 4
 ---
 
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
 # Custom UI
 
 You can display custom user interface (UI) JSX components using the
@@ -15,7 +18,9 @@ implementing the following features:
 - [Signature insights](../signature-insights.md)
 
 :::note
-JSX is supported in the MetaMask extension and Flask version 12 and later. New UI components will be added as JSX components. The previous function-based library is deprecated.
+JSX is supported in the MetaMask extension and Flask version 12 and later. 
+New UI components will be added as JSX components. 
+The previous function-based library is deprecated.
 :::
 
 To use custom UI, first install [`@metamask/snaps-sdk`](https://github.com/MetaMask/snaps/tree/main/packages/snaps-sdk)
@@ -27,7 +32,8 @@ yarn add @metamask/snaps-sdk
 
 Then, whenever you're required to return a custom UI component, import the components from the
 SDK at `@metamask/snaps-sdk/jsx` and build your UI with them.
-For example, to display a [`Box`](#box) using [`snap_dialog`](../../reference/snaps-api.md#snap_dialog):
+For example, to display a [`Box`](#box) using 
+[`snap_dialog`](../../reference/snaps-api.md#snap_dialog):
 
 ```javascript title="index.jsx"
 import { Box, Heading, Text } from "@metamask/snaps-sdk/jsx";
@@ -56,12 +62,21 @@ The following custom UI components are available:
 
 ### `Address`
 
-Outputs a formatted text field for an Ethereum address. 
-The address is automatically displayed with a jazzicon and truncated value. 
-Hovering the address shows the full value in a tooltip.
+Outputs a formatted text field for a blockchain address. 
+The address is automatically displayed with a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon)
+and truncated value. 
+Hovering over the address shows the full value in a tooltip.
+
+#### Props 
+
+- `address`: `string` - A valid Ethereum address, starting with `0x`, or a valid 
+  [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address.
 
 #### Example
 
+<Tabs>
+<TabItem value="Ethereum address">
+
 ```javascript title="index.jsx"
 import { Box, Heading, Address } from "@metamask/snaps-sdk/jsx";
 
@@ -88,6 +103,59 @@ await snap.request({
     </div>
 </div>
 
+</TabItem>
+<TabItem value="CAIP-10 address">
+
+```javascript title="index.jsx"
+import { Box, Heading, Address } from "@metamask/snaps-sdk/jsx";
+
+await snap.request({
+  method: "snap_dialog",
+  params: {
+    type: "alert",
+    content: (
+      <Box>
+        <Heading>The following is an Ethereum address</Heading>
+        <Address address="eip155:1:0x1234567890123456789012345678901234567890" />
+        <Heading>The following is a Bitcoin address</Heading>
+        <Address address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+      </Box>
+    ),
+  },
+});
+```
+
+</TabItem>
+</Tabs>
+
+### `Avatar`
+
+Outputs a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon) for an address.
+
+:::note
+MetaMask automatically calculates checksums for EVM addresses (`eip155:`). 
+Addresses for other namespaces are not validated; you should validate them in your Snap.
+:::
+
+#### Props
+
+- `address`: `string` - A valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address.
+
+#### Example
+
+```js
+export const onHomePage: OnHomePageHandler = async () => {
+  return {
+    content: (
+      <Box>
+        <Avatar address="eip155:1:0x1234567890123456789012345678901234567890" />
+        <Avatar address="bip122:000000000019d6689c085ae165831e93:128Lkh3S7CkDTBZ8W7BbpsN3YYizJMp8p6" />
+      </Box>
+    ),
+  };
+};
+```
+
 ### `Bold`
 
 Outputs bold text.
@@ -166,8 +234,8 @@ For use in [interactive UI](interactive-ui.md).
 - `type` - (Optional) The type of button.
   Possible values are `"button"` and `"submit"`.
   The default is `"button"`.
-- `name`: `string` - (Optional) The name that will be sent to [`onUserInput`](../../reference/entry-points.md#onuserinput)
-  when a user selects the button.
+- `name`: `string` - (Optional) The name that will be sent to 
+  [`onUserInput`](../../reference/entry-points.md#onuserinput) when a user selects the button.
 - `variant` - (Optional) Determines the appearance of the button.
   Possible values are `"primary"` and `"destructive"`.
   The default is `"primary"`.
@@ -209,7 +277,8 @@ Outputs a card component which is used to display values in a card structure.
 
 :::info
 Unlike many `Card` components from other UI libraries, the Snaps `Card` does not have any shape.
-It is only used for layout. To give a shape to a `Card`, wrap it in a [`Section`](#section) component.
+It is only used for layout. To give a shape to a `Card`, wrap it in a [`Section`](#section) 
+component.
 :::
 
 #### Props
@@ -305,7 +374,8 @@ Outputs a read-only text field with a copy-to-clipboard shortcut.
 #### Props
 
 - `value`: `string` - The value to copy when the user clicks on the copyable element.
-- `sensitive`: `boolean` - (Optional) Indicates whether the value is sensitive. If `true`, the value will be hidden when the user is not interacting with the copyable element.
+- `sensitive`: `boolean` - (Optional) Indicates whether the value is sensitive. If `true`, the 
+  value will be hidden when the user is not interacting with the copyable element.
 
 #### Example
 
@@ -412,9 +482,11 @@ Outputs a form field, wrapping an element to give it a label and optional error.
 #### Props
 
 - `label`: `string` - The label for the wrapped element.
-- `error`: `string` - (Optional) Any error for the wrapped element. Setting this changes the style of the wrapped element to show that there is an error.
+- `error`: `string` - (Optional) Any error for the wrapped element. Setting this changes the style 
+  of the wrapped element to show that there is an error.
 - `children` - The element to be wrapped.
-  This can be a [`Dropdown`](#dropdown), [`Input`](#input), [`Selector`](#selector), or [`RadioGroup`](#radiogroup) component.
+  This can be a [`Dropdown`](#dropdown), [`Input`](#input), [`Selector`](#selector), or 
+  [`RadioGroup`](#radiogroup) component.
 
 #### Example
 
@@ -508,8 +580,8 @@ Outputs a form for use in [interactive UI](interactive-ui.md).
 
 #### Props
 
-- `name`: `string` - The name that will be sent to [`onUserInput`](../../reference/entry-points.md#onuserinput)
-  when a user interacts with the form.
+- `name`: `string` - The name that will be sent to 
+  [`onUserInput`](../../reference/entry-points.md#onuserinput) when a user interacts with the form.
 - `children`: `array` - An array of [`Input`](#input) or [`Button`](#button) components.
 
 #### Example
@@ -549,6 +621,11 @@ await snap.request({
 Outputs a heading.
 This is useful for [`Box`](#box) titles.
 
+#### Props
+
+- `size`: `string` - (Optional) The size of the heading. Possible values are `"sm"`, `"md"`, and 
+  `"lg"`. The default is `"sm"`.
+
 #### Example
 
 ```javascript title="index.jsx"
@@ -616,7 +693,8 @@ This component takes an inline SVG.
 It does not support remote URLs.
 
 You can import SVG, PNG, and JPEG files using an import statement.
-These files are automatically imported as SVG strings, so you can pass them directly to the `Image` component.
+These files are automatically imported as SVG strings, so you can pass them directly to the 
+`Image` component.
 
 The SVG is rendered within an `<img>` tag, which prevents JavaScript or interaction events from
 being supported.
@@ -667,13 +745,20 @@ Outputs an input component for use in [interactive UI](interactive-ui.md).
 #### Props
 
 - `name`: `string` - The name that will be used as a key to the event sent to
-  [`onUserInput`](../../reference/entry-points.md#onuserinput) when the containing form is submitted.
+  [`onUserInput`](../../reference/entry-points.md#onuserinput) when the containing form is 
+  submitted.
 - `type` - (Optional) The type of input.
   Possible values are `"text"`, `"number"`, and `"password"`.
   The default is `"text"`.
 - `placeholder`: `string` - (Optional) The text displayed when the input is empty.
 - `label`: `string` - (Optional) The text displayed alongside the input to label it.
 - `value`: `string` - (Optional) The default value of the input.
+- `min`: `string` - (Optional) The minimum value of the input field. Only applicable to the input
+  type `"number"`.
+- `max`: `string` - (Optional) The maximum value of the input field. Only applicable to the input 
+  type `"number"`.
+- `step`: `string` - (Optional) The step value of the input field. Only applicable to the input
+  type `"number"`.
 
 #### Example
 
@@ -738,8 +823,28 @@ Outputs a clickable link.
 
 #### Props
 
-- `href`: `string` - The URL to point to. Supported schemes are `https:` and `mailto:`. `http:` is not allowed.
-- `children`: `Array<string | Bold | Italic>` - The link text.
+- `href`: `string` - The URL to point to. Supported schemes are `https:`, `mailto:`, and 
+  `metamask:`. `http:` is not allowed.
+- `children`: `Array<string | Bold | Italic | Address>` - The link text, or an 
+  [`Address`](#address).
+
+#### About `metamask:` URLs
+
+A Snap can link to the following screens using the `metamask:` scheme: 
+
+- `metamask://client/` - Leads to the main screen of MetaMask.
+- `metamask://snap/[Snap ID]/home/` - Leads to the Snap's 
+  [home page](../custom-ui/home-pages.md), or the Snap's settings page if it does not have a home 
+  page. Valid Snap IDs are npm IDs beginning with `npm:`, such as 
+  `metamask://snap/npm:@consensys/starknet-snap/home`, or `local:`, such as 
+  `metamask://snap/local:http://localhost:8080/home`. Consider using 
+  [environment variables](../../how-to/use-environment-variables.md) so you can have different 
+  Snap IDs for local testing and production.
+
+:::warning
+MetaMask will throw an error if the URL is not valid or if the URL leads to a Snap that is not 
+installed. 
+:::
 
 #### Example
 
@@ -813,8 +918,8 @@ Outputs a row with a label and value, which can be used for key-value data.
 - `variant` - (Optional) The variant of the label.
   Possible values are `"default"`, `"error"`, and `"warning"`.
   The default is `"default"`.
-- `children` - The value of the row, which can be a [`Text`](#text), [`Image`](#image), or
-  [`Address`](#address) component.
+- `children` - The value of the row, which can be a [`Text`](#text), [`Image`](#image), 
+  [`Address`](#address), or [`Link`](#link) component.
 
 #### Example
 
diff --git a/snaps/reference/snaps-api.md b/snaps/reference/snaps-api.md
diff --git a/snaps/reference/wallet-api-for-snaps.md b/snaps/reference/wallet-api-for-snaps.md
diff --git a/src/components/Faucet/Faq.tsx b/src/components/Faucet/Faq.tsx
diff --git a/wallet/connect/metamask-sdk/mobile/ios.md b/wallet/connect/metamask-sdk/mobile/ios.md
diff --git a/wallet/how-to/sign-data/index.md b/wallet/how-to/sign-data/index.md
