Test adding Infura to the MetaMask docs (MetaMask#1325)

* Add API section.

Signed-off-by: bgravenorst <[email protected]>

* Add missing dependencies.

Signed-off-by: bgravenorst <[email protected]>

* Reorg structure.

Signed-off-by: bgravenorst <[email protected]>

* add developer tools dropdown and dashboard docs

* update yarn.lock

* restructure services

* fix partial links

* fix image errors

* update branch remove conflicts

* Add missing dependencies.

Signed-off-by: bgravenorst <[email protected]>

* Reorg structure.

Signed-off-by: bgravenorst <[email protected]>

* add developer tools dropdown and dashboard docs

* update yarn.lock

* restructure services

* fix partial links

* fix image errors

* Add how-to section

* update location

* update location

* update build

* update structure

* update build

* update pl

* update file

* remove inconsistencies

* remove repeated pages

* update links

* update links

* Missing Gas link

* remove ref howtos

* apply feedback

* apply suggestions

* update links to intro

* Add logos and css

* update images and links

* fix build

* update for failover protection

* fix typo

* Update failover note

* update description for consistency

* fix websocket fail

* update to fix build

* update link for consistency

---------

Signed-off-by: bgravenorst <[email protected]>
Co-authored-by: Alexandra Tran <[email protected]>
Co-authored-by: Joan E <[email protected]>

dashboard-sidebar.js

@@ -0,0 +1,22 @@
+const sidebar = {
+  dashboardSidebar: [
+    "index",
+    {
+      type: "category",
+      label: "Get started",
+      link: { type: "generated-index", slug: "/get-started" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "get-started" }],
+    },
+    {
+      type: "category",
+      label: "How to",
+      link: { type: "generated-index", slug: "/how-to" },
+      collapsed: false,
+      items: [{ type: "autogenerated", dirName: "how-to" }],
+    },
+  ],
+};
+
+module.exports = sidebar;
+

developer-tools/dashboard/get-started/create-api.md

@@ -0,0 +1,53 @@
+---
+description: Create a Web3 or IPFS API
+sidebar_position: 2
+---
+
+# Create an API key
+
+:::important API key restrictions
+
+Based on your plan, Infura allows for the following amount of API keys:
+
+- Free plan - Allows one API key.
+- Developer plan - Allows up to five API keys.
+- Team plans and higher - No limit on the number of API keys.
+
+For more information, see to the [Infura pricing page](https://www.infura.io/pricing).
+
+:::
+
+Infura allows you to enable multiple network endpoints and expansion APIs for your API key. If calls are
+made to a disabled network or service, then all requests to that network or service will fail.
+
+To keep your account secure and cost effective, add only the necessary endpoints, as some have usage limits or charges based
+on request volume.
+
+To create an API key:
+
+1. Open the [Infura dashboard](https://infura.io/dashboard). Enter your login details, if required.
+1. Select **CREATE NEW API KEY**.
+
+    <div class="left-align-container">
+    <div class="img-large">
+        <img
+        src={require('../../images/create_key.png').default}
+        />
+    </div>
+    </div> 
+1. From the pop-up window, provide a name, then click **CREATE**.
+1. Select the networks that you want your API key to access, and select **Save Changes**.
+
+You can [configure additional security](./secure-an-api/) for your API key by requiring an API key secret or JWTs with
+each API request.
+
+## Best practices for configuring API key endpoints
+
+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 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
+    [allowlists](../how-to/secure-an-api/use-an-allowlist.md) or
+    [key request volume limits](../how-to/secure-an-api/set-rate-limits.md).

developer-tools/dashboard/how-to/dashboard-stats.md

@@ -0,0 +1,98 @@
+---
+description: View your Infura usage stats.
+---
+
+# View API request stats
+
+The dashboard provides detailed analytics and real-time statistics about your API usage.
+You can monitor the number of requests, track the most used methods, and identify any potential
+issues or bottlenecks.
+This data is crucial for optimizing your applications and ensuring they run smoothly.
+
+## Specify stats to view
+
+1. In the top menu of the [Infura dashboard](https://app.infura.io/), select **Stats**.
+    The stats page displays the total volume of requests sent to Infura over the specified time period.
+    By default, data is shown from the last 24 hours from all Web3 API keys.
+
+2. To change the API key, make a selection from the API keys dropdown.
+
+3. To change the stats time range, make a selection from the time dropdown.
+    Time values are given in Coordinated Universal Time (UTC).
+    For Web3 API usage, you can choose from the following options:
+    - **Last 15 Minutes** - The last completed 15 minutes.
+      This updates once a minute.
+    - **Last 1 Hour** - The last fully completed hour, from 0 to 59 minutes and 59 seconds.
+    - **Last 24 Hours** - The last fully completed 24 consecutive hours.
+      This is the default.
+    - **Last 7 Days** - The last fully completed seven consecutive days.
+      A day appears once it has completed.
+    - **Last 30 Days** - The last fully completed 30 days.
+      A day appears once it has completed.
+
+4. To view your IPFS usage, select **IPFS Usage** in the toggle in the top-right corner.
+    You can choose to show data from the **Last 24 Hours** (default) or the **Last 7 Days**.
+
+## Web3 stats charts
+
+You can view your Web3 API usage stats in the following charts and tables.
+
+### Requests Volume chart
+
+This chart displays the total volume of requests sent to Infura using the selected API key(s) over
+the selected time period.
+
+### Product Request Volumes
+
+This chart displays the aggregate request volumes for the top five API methods called using the
+selected API key(s) over the selected time period.
+To view stats for a particular product (network) instead of the default of all products, make a
+selection from the products dropdown.
+This change will impact what API methods are displayed in the
+[Method Request Volumes](#method-request-volumes) chart.
+
+### Method Request Volumes
+
+This chart displays the aggregate request volumes for requests made on the top five networks using
+the selected API key(s) over the selected time period.
+To view stats for a particular method instead of the default of all methods, make a selection from
+the methods dropdown.
+
+### Requests Activity
+
+This table displays the total request volumes and successful and failed requests, based on each
+product (network) and method called using the selected API key(s) over the selected time period.
+
+For more details about the failure status codes, select the two diagonal arrows to the right of the
+**FAILED REQUESTS (%)** values.
+This opens the Failed Requests Breakdown table, which displays an aggregated count of failed API
+requests, grouped by the returned status codes.
+
+### Eth_call activity
+
+This table displays the activities made on the `eth_call` method, including contract addresses that
+interacted with the selected API key(s).
+This table only shows the `eth_call` activity for the last 30 minutes, and is not impacted by any
+time period selection.
+
+To view smart contract details on Etherscan, select any contract address.
+A new tab opens with the details.
+
+## IPFS stats charts
+
+You can view your IPFS usage stats in the following charts.
+
+### Data Transfer Up
+
+This chart displays the amount of data sent to the IPFS service using the selected API key(s) over
+the selected time period.
+
+### Data Transfer Down
+
+This chart displays the amount of data retrieved from the IPFS service using the selected API key(s)
+over the selected time period.
+
+### Total Storage
+
+This chart displays the total amount of data stored by the selected API key(s) over the selected
+time period.

developer-tools/dashboard/how-to/network-status.md

@@ -0,0 +1,19 @@
+---
+description: View the network status
+sidebar_position: 8
+---
+
+# View the network status
+
+View the [Infura status page](https://status.infura.io/) to check for service outages and other incidents, as well as
+scheduled maintenance notices. You can also subscribe to status updates via email, SMS, webhook, Slack and Atom/RSS.
+
+You can also select the **Status** link at the top of the Infura dashboard to view the status page.
+
+<div class="left-align-container">
+  <div class="img-medium">
+    <img
+      src={require('../../images/status-page.png').default}
+    />
+  </div>
+</div>

developer-tools/dashboard/how-to/project-sharing.md

@@ -0,0 +1,101 @@
+---
+description: Share your Infura API key
+sidebar_position: 5
+---
+
+# Share your API key with Infura users
+
+You can share access to your Infura API keys by inviting existing Infura account members.
+
+## Share API key access
+
+To share an API key:
+
+1. In the Infura dashboard, select the API that you want to share.
+1. Select the **API Key Sharing** tab.
+1. Select **INVITE MEMBERS** in the top right.
+
+   <div class="left-align-container">
+     <div class="img-large">
+       <img
+         src={require('../../images/invite-member-button.png').default}
+       />
+     </div>
+   </div>
+
+1. Input one or more user emails, select the [user role](#user-roles), and select **SUBMIT**.
+1. Confirm your email address and select **CONFIRM**.
+
+:::note
+
+- Infura blocks non-Infura account holders from collaborating on Infura API keys.
+
+:::
+
+## User roles
+
+### Owner
+
+- The Infura account owner who created the API key.
+
+:::note
+
+You cannot change ownership of an API key.
+
+:::
+
+### Admin
+
+- Has read/write access to the API key name, security settings, and collaborator list.
+- Can edit security settings, change someone’s role, and revoke and resend invites.
+- Can view the API key statistics.
+- Admins cannot:
+  - Delete the API key or the owner.
+  - View billing details.
+  - View any other API key's stats.
+
+### Contributor
+
+- Has read-only access to the API key details and stats.
+- Has limited access to the security settings and can only view the API key secret.
+- Contributors cannot:
+  - View the API key sharing settings.
+  - View billing details
+  - View any other API key's stats.
+
+## Accept an invitation
+
+You'll receive an email invitation to access an API key. In the email invitation, select **CONFIRM EMAIL ADDRESS**
+and accept the invitation.
+
+You can view all keys that you own, and all keys shared with you, by selecting **Key Sharing** in the **Settings** menu.
+
+## Update user role or remove user
+
+1. In the Infura dashboard, select the API key that the user is assigned to.
+1. Select the **API Key Sharing** tab.
+1. Select the vertical ellipsis icon next to the relevant user.
+
+   - To remove a user, select **Remove Member**. They are removed immediately.
+   - To update a user's role, select **Update Role**.
+
+     <div class="left-align-container">
+       <div class="img-large">
+         <img
+           src={require('../../images/update-role.png').default}
+         />
+       </div>
+     </div>
+
+1. Upgrade or downgrade accordingly and select **UPDATE ROLE**.
+
+## Revoke or resend an invite
+
+While invitations remain in a pending state, they can be revoked or sent again.
+
+1. In the Infura dashboard, select the API key for the user.
+
+1. Select the **API Key Sharing** tab.
+
+1. Select the vertical ellipsis icon next to the relevant user and select
+   **Revoke Invitation** or **Resend Invite** and follow the steps.

developer-tools/dashboard/how-to/secure-an-api/_category_.json

@@ -0,0 +1,11 @@
+{
+    "position": 3,
+    "label": "Secure an API",
+    "collapsible": true,
+    "collapsed": true,
+    "link": {
+      "type": "generated-index",
+      "slug": "dashboard/secure-an-api",
+      "description": "This section provides information about how to secure your API key using Infura's security settings."
+    }
+}

developer-tools/dashboard/how-to/secure-an-api/api-key-secret.md

@@ -0,0 +1,62 @@
+---
+description: Authenticate all requests to Infura with an API key secret.
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# API key secret
+
+For enhanced security, you can require an API key secret for all requests to Infura. The API key
+secret serves as a password accompanying the API key (which serves as a username). This two-factor
+approach strengthens the authentication process, ensuring that only requests from authorized sources
+are accepted.
+
+## When to use an API key secret
+
+Use an API key secret if your dapp includes server-side components. Storing and using the API key
+secret only on the server side prevents exposure to client-side risks, such as malicious actors
+gaining access through browser inspection tools or network monitoring.
+
+If your dapp operates solely on the client side without a server, use only the API key.
+The API key is exposed in client-side code, so you should secure it using [allowlists](use-an-allowlist.md).
+
+:::tip
+For customers on the Developer tier or higher, Infura supports [overriding your allowlist](use-an-allowlist.md#overide-your-allowlist-settings)
+when you specify an API key secret. This allows you to apply the principle of least privilege on the
+client side while allowing unrestricted access on the server side.
+:::
+
+## Enable the API key secret for requests
+
+In the API key's **Settings** tab, select **Require API Key secret for all requests**.
+
+<div class="left-align-container">
+  <div class="img-large">
+    <img
+      src={require('../../../images/security-page.png').default}
+    />
+  </div>
+</div>
+
+## Call APIs using an API key secret
+
+<Tabs>
+  <TabItem value="HTTPS" label="HTTPS" default>
+
+```bash
+curl --user :<YOUR-API-KEY-SECRET> \
+  https://mainnet.infura.io/v3/<YOUR-API-KEY> \
+  -d '{"jsonrpc":"2.0","method":"eth_blockNumber","params":[],"id":1}'
+```
+
+  </TabItem>
+  <TabItem value="WebSocket" label="WebSocket" >
+
+```bash
+wscat -c wss://mainnet.infura.io/ws/v3/<YOUR-API-KEY> --auth ":<YOUR-API-KEY-SECRET>"
+> {"jsonrpc":"2.0","method":"eth_blockNumber","params":[],"id":1}
+```
+
+  </TabItem>
+</Tabs>