Added RariMe integration guide for issuers (#5)

* Added RariMe guide for issuers

* proofread

* fix typos

* Updated index page

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Added the "Identity State Replication" doc;
 - How-to-Guides:
   - Added the Collab.Land integration doc;
+  - Added RariMe guide for issuers;
 - Contribution guide to the README;
 
 ### Changed

docs/how-to-guides.mdx

@@ -16,6 +16,10 @@ Integrate Rarimo products into your DApps, solve typical tasks, and troubleshoot
 - [Setting Up a Validator Node](/how-to-guides/validator-setup)
 - [Staking And Delegating RMO Tokens](/how-to-guides/staking)
 
+## RariMe Guides
+
+- [How to serve Rarimo credentials to RariMe users](/how-to-guides/add-rarimo-credentials-to-rarime)
+
 ## Proof of Humanity Plugin Guides
 
 - [Using Proof of Humanity Off-Chain](/how-to-guides/poh-offchain-verification)

docs/how-to-guides/add-rarimo-credentials-to-rarime.mdx

@@ -0,0 +1,71 @@
+
+# How to serve Rarimo credentials to RariMe users
+
+:::tip
+If you still need to learn to issue Rarimo credentials, see [Setting Up A Credentials Issuer](/how-to-guides/setup-issuer).
+:::
+
+After issuing Rarimo credentials, you need to serve them to the users. To do that, we'll integrate RariMe snap into your DApp.
+
+
+## Step #1: Add the RariMe connector
+
+Install the RariMe connector package:
+
+```bash
+yarn add @rarimo/rarime-connector
+```
+
+<!-- TODO: need to add tabs to the theme
+```bash npm2yarn
+npm install @rarimo/rarime-connector
+```
+-->
+
+Create a connector instance:
+
+```js
+import { enableSnap } from '@rarimo/rarime-connector';
+
+async function createConnector() {
+    const snap = await enableSnap(); // connects to the snap or installs it
+    const connector = await snap.getConnector();
+
+   return connector;
+}
+```
+
+## Step #2: Prepare the claim offer
+
+To fetch the credential from the issuer, we need to form a claim offer:
+
+<!-- TODO: instruct how to get the claim schema-->
+
+```js
+// get the claim type from your schema
+const CLAIM_TYPE = "urn:uuid:6dff4518-5177-4f39-af58-9c156d9b6309";
+const ISSUER_DOMAIN = "https://issuer.example.com";
+
+const connector = await createConnector();
+const {identityIdString} = await connector.createIdentity();
+const {data: claimOffer} = await fetch(
+    `https://${ISSUER_DOMAIN}/v1/credentials/${identityIdString}/${CLAIM_TYPE}`
+  )
+  .then(res => res.json());
+```
+
+## Step #3: Prompt user to save the credential to RariMe
+
+Once we have the claim offer, we can prompt the user to save the credential to RariMe. To do that, we'll use the `saveCredentials` method of the connector instance:
+
+```js
+await connector.saveCredentials(claimOffer);
+```
+
+The user will be prompted to save the credential to RariMe:
+
+:::tip
+Keep the UX transparent: show the prompt only after the user explicitly clicks on the **Add credential** button or a similar UI element.
+:::
+
+![RariMe prompt](/img/rarime-add-credential.png)

docusaurus.config.js

@@ -56,6 +56,9 @@ module.exports = {
           editUrl: "https://github.com/rarimo/docs/blob/main",
           docLayoutComponent: "@theme/DocPage",
           docItemComponent: "@theme/ApiItem",
+          remarkPlugins: [
+            [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
+          ],
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@docusaurus/core": "^2.2.0",
     "@docusaurus/preset-classic": "^2.2.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.0.1",
     "@mdx-js/react": "^1.6.22",
     "aos": "^3.0.0-beta.6",
     "clsx": "^1.2.1",

sidebars.js

@@ -65,6 +65,7 @@ const sidebars = {
     "how-to-guides/poh-galxe",
     "how-to-guides/proof-of-humanity-collabland-discord",
     "how-to-guides/polygon-id-state-replication",
+    "how-to-guides/add-rarimo-credentials-to-rarime",
   ],
   reference: [
     {