docs: documentation refresh

.github/workflows/docs-deploy-staging.yml

@@ -0,0 +1,27 @@
+name: Deploy docs to staging
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  build-deploy-staging:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@master
+      - name: Use Node.js 10.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 10.15.3
+      - name: yarn install & build
+        run: |
+          yarn
+          yarn build
+      - uses: benjlevesque/s3-sync-action@master
+        env:
+          SOURCE_DIR: './packages/docs/build'
+          AWS_REGION: ${{ secrets.AWS_REGION }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_S3_BUCKET: ${{ secrets. AWS_S3_BUCKET_DOCS_STAGING }}

packages/docs/.gitignore

@@ -0,0 +1,26 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+docs/client/**
+docs/guides/4-request-payment/1-multisig.md
+docs/guides/5-request-client/2-erc20-payment-detection.md
+docs/guides/5-request-client/3-eth-payment-detection.md
+docs/guides/5-request-client/4-btc-payment-detection.md
+docs/guides/5-request-client/5-declarative-payment-network.md
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/docs/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and open up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+```
+$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

packages/docs/docs/guides/0-getting-started.md

@@ -0,0 +1,23 @@
+---
+title: Get Started with Request
+keywords:
+description: Learn how to integrate Request network and its features.
+---
+
+import IntegrationOptions from '../../src/components/integration-options';
+
+Request enables a **global cooperative financial system**, where people and organizations are in full control over their financial data and choices.
+
+Users share payment requests securely thanks to a common network that keeps track of changes. Financial experiences become seamless with Request.
+
+## Integration options
+
+Different integration schemas are possible with Request. This tutorial aims to discover the features of the network and at the same time to guide you through different options.
+
+<IntegrationOptions />
+
+Within this guide, we naturally guide you through all options in order of complexity. For a detailed overview, [head to the integration options](/integration-options)
+
+:::info
+If you are already familiar with basic concepts of Request, you can jump to the [API](./3-Portal-API/0-portal-intro.md), the [Request Client](./5-request-client/0-intro.md) or the [Node setup guide](./6-hosting-a-node/0-intro.md).
+:::

packages/docs/docs/guides/1-first-request.md

@@ -0,0 +1,69 @@
+---
+title: Create your first Request
+sidebar_label: First request creation
+keywords: [Request creation, API]
+description: Learn how to integrate Request network and its features.
+
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Get an outlook of the Request network in a matter of minutes with the API.
+
+:::info
+This is a very fast ramp to the Request network, using the Portal API, a centralized option.
+If you want to jump to the decentralized options, head towards the [Request Client section](./5-request-client/0-intro.md).
+:::
+
+## Request identity and API Key
+
+Head towards [the Request Portal dashboard](https://dashboard.request.network) and create your account, you will need it to get your API keys and pursue the first steps of Request.
+
+
+<img alt="Getthing the API key from the Portal" src={useBaseUrl('img/portal-api-key.gif')} />
+
+More info about the Request Portal [in the next section](./3-Portal-API/0-portal-intro.md).
+
+## Create your first request
+
+To create a payment request or invoice, you must create a basic Request object which outlines some information such as the receiving payment address, which payment network is being used, the currency and the amount expected. 
+
+```jsx
+const axios = require('axios')
+
+const API_KEY = 'YOUR_API_KEY';
+const requestParams = {
+  "currency": "BTC",
+  "expectedAmount": "100000000",
+  "payment": {
+    "type": "bitcoin-testnet",
+    "value": "mgcZRSj6ngfKBUHr2DGBqCfHSSYBDSbjph"
+  },
+};
+
+const request = await axios.post('https://api.request.network/requests', requestParams, {
+  headers: { Authorization: API_KEY }
+})
+
+console.log(request.data);
+```
+
+The `data` object contains a `requestId` field that you can use for other API calls. 
+
+## Check that it worked
+
+You can check that the request was created by heading towards [the list of requests in your dashboard](https://dashboard.request.network). The request should be listed on top of the list.
+
+By clicking on the request row, you can see the details.
+
+You can see that the status is Pending: the request has not been paid yet. We will deal with payment detection [later](./3-Portal-API/2-payment-status.md).
+
+## Wrap-up
+
+The request created is proof that some money has been requested by a person or company, and its pending status the proof that the money is still due.
+
+In the next sections, you will also see how to transform such a basic creation into seamless financial workflows:
+
+* For the payer who can pay in one click, because we have all the information he needs
+
+* For the requester to keep track of his due payments

packages/docs/docs/guides/3-Portal-API/0-portal-intro.md

@@ -0,0 +1,99 @@
+---
+title: Portal Introduction
+sidebar_label: Portal Introduction
+keywords: [Request, REST, API, Tutorial, Portal]
+description: Learn how to integrate Request network and its features.
+
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Request Portal simplifies the use of the Request protocol, abstracting all the blockchain complexity. You can create requests and manage your users' requests through a REST API.
+
+Our API accepts JSON-encoded request bodies, returns JSON-encoded responses, and uses standard HTTP response codes and Bearer authentication.
+
+Aside from the guide, you can also consult [the Portal API documentation](/portal).
+
+## Authentication
+
+All API endpoints are authenticated.
+Two mechanisms are currently allowed:
+
+- API Key, explained below, to be used for scripting and test purposes
+- OAuth, explained in the [Apps](./3-api-apps.md) section
+
+## Portal outlook
+
+If you have not already done it, head towards [the Request Portal dashboard](https://dashboard.request.network) and create your account.
+
+Once your account is created, you are able to:
+
+- Create a request, which is useful for manual testing for example
+- List requests you sent or received, useful for debugging
+- Know your Request identity (cf. below)
+- Access your API keys, by clicking on your account and then Settings.
+
+<img alt="Getting the API key from the Portal" src={useBaseUrl('img/portal-api-key.gif')} />
+
+You have two API keys, use the Test one to follow this guide.
+
+## Request identity
+
+Senders and recipients of money transfer requests need a way to trust each other. The identity is how we certify the debtor about the authenticity of the request sender, limiting frauds like SCAM for example.
+With decentralized integration options (cf. [the Request client](/docs/guides/5-Request-client/0-intro), end users manage their private keys, but the Portal simplifies their life.
+
+This simplification should be applied with great care, we do not recommend using the Request Portal API for critical cases where a lot of money or public reputation is at stake. If you want full control over the security of your finance, you should handle your keys, and the same applies to your users. Have a look at [the integration options](/integration-options) to take the best decision.
+
+## How to list the requests associated with your identity
+
+Head to the Portal to create a first manual request, and use the snippet below to fetch requests associated with your identity
+
+```jsx
+import ReactDOM from "react-dom";
+import React, { useState, useEffect } from "react";
+import axios from "axios";
+
+const API_KEY = "YOUR-API-KEY";
+
+function RequestsList() {
+  const [requests, setRequests] = useState([]);
+
+  useEffect(() => {
+    const fetchResult = async () => {
+      const result = await axios.get("https://api.request.network/requests/", {
+        headers: { Authorization: API_KEY }
+      });
+      console.log(result);
+      setRequests(result.data);
+    };
+    fetchResult();
+  }, []);
+
+  return (
+    <div className="App">
+      <h2>The most basic list of payment requests</h2>
+      <ul>
+        {requests.map(request => {
+          return (
+            <li key={request.requestId}>
+              {request.requestInput.expectedAmount} {request.requestInput.currency}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<RequestsList />, rootElement);
+
+
+const result = await axios.get('https://api.request.network/requests/' + requestId, {
+  headers: { Authorization: API_KEY },
+});
+```
+
+The expected result should but a list of requests with amounts and currencies. Depending on your currency, some amounts seem too big. We will see later how to display amounts properly.
+
+As you can see, manipulating requests with the Portal API is very straight-forward. What you can notice is the use of `request.requestInput.expectedAmount` and `request.requestInput.currency`. We will detail on the next page how to manipulate different details of the request. You can also have more details on the [Portal API Docs](/portal).

packages/docs/docs/guides/3-Portal-API/1-create-and-share-request.md

@@ -0,0 +1,108 @@
+---
+title: Request API - Let's play
+keywords: [ERC20, DAI, Request, Portal, API]
+description: Learn how to integrate Request network and its features.
+
+---
+
+## Create a request in DAI
+
+On this page, you will learn to create requests in DAI or in any ERC20, whose payment will be automatically detected. 
+
+DAI is one of the most frequently used currencies on the Request network. As the most popular stablecoin, it allows merchants and e-commerce software builders to propose blockchain-powered payments, finance, and accounting, without having to deal with the change risks.
+
+The Portal can detect payments of requests in ETH, BTC, and ERC20. After the example below, you will understand that smart invoices can open many use cases and that reconciliation processes between bank statements and accounting is already outdated.
+
+### Prerequisites
+
+Before you execute the code below, don't forget to:
+
+* Change the `API_KEY`, with your test API key
+* Change the payment value with one of your Ethereum addresses
+
+Even if for this tests the transaction will be done over the Rinkeby network, it's more realistic to configure your own address.
+
+And now, let's look at the code:
+
+```jsx
+import ReactDOM from "react-dom";
+import React, {useState} from "react";
+import axios from "axios";
+import { ethers } from "ethers";
+
+const API_KEY = "YOUR_API_KEY";
+
+function CreateDAIRequest() {
+
+  const [paymentLink, setPaymentLink] = useState([]);
+
+  async function createRequest() {
+
+    // When the button is clicked, make a POST query to create the request
+    const result = await axios.post(
+      `https://api.request.network/requests/`,
+      {
+
+        // The same works with any ERC20
+        currency: "DAI",
+
+        // Here we want to create a $49.99 request
+        expectedAmount: ethers.utils.parseUnits("49.99", 18).toString(),
+        payment: {
+
+          // Proxy contract: the payment will be detected automatically 
+          // and the same address can be used several times
+          type: "erc20-proxy-contract",
+
+          // This is where the funds will come, you probably want to put your address
+          value: "0xAa0c45D2877373ad1AB2aa5Eab15563301e9b7b3"
+        }
+      },
+      {
+        headers: {
+          Authorization: API_KEY
+        }
+      }
+    );
+
+    // Once the query returns, we know the request ID
+    // The payment page can only query and show the request once it is broadcasted over Ethereum.
+    setPaymentLink("https://pay.request.network/" + result.data['requestId']);
+    return result.data['requestId'];
+  }
+
+  return (
+    <>
+      <button onClick={createRequest}>Click me to create a request</button>
+      <a href={paymentLink} rel="noopener noreferrer" target="_blank">{paymentLink}</a>
+    </>
+  );
+}
+
+const rootElement = document.getElementById("root");
+ReactDOM.render(<CreateDAIRequest />, rootElement);
+
+```
+
+Try it! By clicking on the button, a request is created and with its ID, we display the payment page URL. There are several ways to pay a request, we will come back on that later, but the payment page is the most convenient to start. Did you notice that Metamask did not prompt you? That's because the Portal takes care of the blockchain transaction, as well as the fees.
+
+Now **what happens if you click on the payment link right after the request creation?**
+
+The payment page throws a "Your request was not found" error, why?
+
+Remember that the Portal abstracts the blockchain access. By doing so, a request created on the portal does not exist on every node of the network, yet. And the payment page is another node on the network.
+
+**To summarize, before you can access the payment page, you need to wait a few seconds.**
+
+You can check the request status and details in the [dashboard](https://dashboard.request.network/)
+
+
+## Sharing the request to get paid
+
+Once a user has created a request, you need to support him alerting the payer.
+
+The first way is to let the user share a payment URL with the payer. From a UX point of view, it forces him to switch context, but mobile apps often propose this solution. Keep in mind that for the recipient, it looks more secure to click on a link directly sent by a known contact. The best payment page so far is the one we have made, check it out! You can find the link in front of each request on your dashboard. The URL is `https://pay.request.network/{requestId}`
+
+Another way is to handle the notification in your backend, either within your app (if the payer also uses it) or with an e-mail for example. For app-embedded payment requests, it is **strongly advised** to provide the payer with a white-list feature, and to prevent him from clicking on requests sent by strangers.
+
+Whatever the solution you pick, you should consider the UX / security tradeoff with great attention.