docs: fixing part of the docs (#857)

Co-authored-by: isk <0xisk>

.github/workflows/deployDocs.yml

@@ -4,6 +4,17 @@ on:
     branches: [main]
     paths:
       - "docs/**"
+
+  workflow_dispatch:
+    inputs:
+      build:
+        description: "Build trigger"
+        required: true
+        default: "enable"
+        type: choice
+        options:
+        - enable
+        - disable
 
 permissions:
   contents: read
@@ -14,6 +25,10 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
 
+defaults:
+ run:
+  working-directory: ./docs
+
 jobs:
   build:
     runs-on: ubuntu-22.04
@@ -30,9 +45,6 @@ jobs:
         id: pages
         uses: actions/configure-pages@v3
 
-      - name: Change to Docs Directory
-        run: cd docs
-
       - name: Build with mdBook
         run: mdbook build
 

docs/book.toml

@@ -1,5 +1,5 @@
 [book]
-authors = ["AtHeartEngineer", "0xIsk", "0xmad"]
+authors = ["AtHeartEngineer", "0xisk", "0xmad"]
 language = "en"
 multilingual = false
 src = "src"

docs/src/SUMMARY.md

@@ -1,16 +1,13 @@
 # Summary
 
-- [Cryptkeeper](cryptkeeper/_intro.md)
-  - [Features](cryptkeeper/features.md)
-  - [Overview](cryptkeeper/overview.md)
+- [What is CryptKeeper](what-is-cryptkeeper/_intro.md)
 - [Guides](guides/_intro.md)
   - [Contributing](guides/contributing.md)
   - [Integration](guides/integration/_intro.md)
-    - [Connect to Extension](guides/integration/connect-to-extension.md)
+    - [Connect](guides/integration/connect-to-extension.md)
     - [Create Identity](guides/integration/create-identity.md)
-    - [Generate Proof](guides/integration/generate-proof.md)
-    - [Inject Client](guides/integration/inject-client.md)
-    - [Zkitter Examples](guides/integration/zkitter-examples.md)
+    - [Get Connected Identity](guides/integration/get-connected-identity.md)
+- [Resources](resources/_intro.md)
 - [References](references/_intro.md)
   - [Faq](references/faq.md)
   - [Terms](references/terms.md)

docs/src/guides/contributing.md

@@ -1,7 +1,73 @@
-# 🛠 Quick setup
+# 🛠 Contribution Guidelines
 
-## Development
+Welcome to our project! We appreciate your interest in contributing. This document provides detailed instructions on setting up the development environment, running the demo, and performing end-to-end testing.
 
-1. Install the necessary packages by running the command `npm install` in your terminal.
-2. Start the development server by running the command `npm run dev`
-3. In your browser, navigate to the extensions settings and load the `dist` directory as an unpacked extension.
+## Development Environment Setup
+
+To get started with development, follow these steps:
+
+1. **Install [pnpm](https://pnpm.io/):** If you haven't already, make sure to install pnpm, which is our package manager of choice.
+
+2. **Install Project Dependencies:** Run the following command to install the project's dependencies:
+
+```bash
+pnpm install
+```
+
+3. **Start the Development Build:** Launch the development server with this command:
+```bash
+pnpm run dev
+```
+
+4. **Load Extension in Your Browser:** Load the dist directory as an unpacked extension in your web browser.
+
+## Running the Demo
+
+To run the project's demo, follow these steps:
+
+1. **Development Environment:** Ensure you have set up the development environment as outlined above.
+
+2. **Build or Start the Demo:** Choose one of the following options based on your preference:
+    1. To build the demo, make sure you finished the setup steps.
+    2. To start the merkle tree mock server, execute these commands:
+    ```bash
+    pnpm run merkle:start
+    ```
+    3. To start the demo, execute these commands:
+    ```bash
+    pnpm run demo:start
+    ```
+
+## End-to-End Testing
+
+If you'd like to contribute by running end-to-end tests, follow these steps:
+
+1. **Install Playwright Dependencies:** Install Playwright dependencies for Chromium by running the following command:
+
+```bash
+    pnpx playwright install --with-deps chromium
+```
+
+2. **Install Extension and Demo Dependencies:** Make sure you have installed dependencies for both the extension and the demo:
+
+```bash
+    pnpm install
+```
+
+3. **Configure .env.test File:** 
+    - Create a `.env.test` file and set the `METAMASK_EXTENSION_ID`. 
+    - You can find the `METAMASK_EXTENSION_ID` in the log output when running the end-to-end tests `pnpm run e2e`. Different environments may require different `METAMASK_EXTENSION_ID` values, so be sure to specify it explicitly.
+
+4. **Build the Extension for Testing:** Build the extension for end-to-end testing:
+
+```bash
+    pnpm run build:e2e
+```
+
+5. **Run End-to-End Tests:** Execute the following command to run Playwright end-to-end tests:
+
+```bash
+    pnpm run e2e
+```
+
+Thank you for considering contributing to our project. We look forward to your valuable contributions!

docs/src/guides/integration/_intro.md

@@ -1 +1,59 @@
-# Integrations
+# 🧩 Integrations
+
+In order to connect your application with CryptKeeper Browser Extension, you would need to install CryptKeeper npm provider package. The `@cryptkeeperzk/providers` package simplifies the integration of CryptKeeper functionality into applications by providing injected providers.
+
+These injected providers allow applications to establish a connection with the CryptKeeper extension, enabling them to leverage its features and services. The package includes functions for initializing the CryptKeeper provider within the browser extension's InjectedScript and for connecting to CryptKeeper from an application.
+
+With the `@cryptkeeperzk/providers` package, developers can seamlessly integrate CryptKeeper functionality into their applications, enhancing security and privacy while benefiting from the features offered by CryptKeeper.
+
+## 🔧 Installation
+
+Install the package using your preferred package manager:
+```bash
+npm install @cryptkeeperzk/providers
+```
+
+## 📖 Usage
+
+### Inside an Application
+
+To connect and communicate with CryptKeeper from an external application, use the `cryptkeeperConnect` function from `@cryptkeeperzk/providers`:
+
+```ts
+import { cryptkeeperConnect, type CryptKeeperInjectedProvider } from "@cryptkeeperzk/providers";
+
+const client = await cryptkeeperConnect();
+```
+The `cryptkeeperConnect` function establishes a connection with CryptKeeper and returns a `CryptKeeperInjectedProvider` instance if CryptKeeper is installed, or undefined otherwise. You can await the function call to ensure the connection is established before proceeding with further operations.
+
+
+## 🎯 Injected client
+
+CryptKeeper injects a client object called `cryptkeeper` into the browser. This is similar to how MetaMask injects a [global API](https://docs.metamask.io/guide/ethereum-provider.html#ethereum-provider-api) into websites visited by its users at `window.ethereum` (formerly [window.web3](https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3)). 
+
+The injected client serves as bridge between frontend and backend processes. It is passed into the web page by the extension through an API allows the web page to make calls to CryptKeeper. From here you can manually generate and verify proofs, create identities, and set permissions.
+
+You should be able to access the injected client’s functions and permissions once connected:
+
+* `connect`: Retrieves the currently active identity.
+
+* `getConnectedIdentity`: Retrieves the connected identity.
+[@src/contentscripts/injected.ts](https://github.com/CryptKeeperZK/crypt-keeper-extension/blob/29b211bae48573f0212ce280fdcc2c4a5932394b/packages/providers/src/sdk/CryptKeeperInjectedProvider.ts#L191-195)
+
+```ts
+// Example
+const { name, host } = await client.getConnectedIdentity()
+```
+
+* `getHostPermissions`: Retrieves the permissions for the specified host.
+* `setHostPermissions`: Sets the permissions for the specified host.
+* `createIdentity`: Creates a new identity and returns the result.
+* `createDummyRequest`: Creates a dummy request and returns the result.
+* `semaphoreProof`: Sends a Semaphore proof request and returns the result.
+* `rlnProof`: Sends a RLN proof request and returns the result.
+* `clearApproved`: Clears the approved list of requests.
+* `getApproved`: Retrieves the approved list of requests.
+* `openPopup`: Opens the extension's popup window.
+* `closePopup`: Closes the extension's popup window.
+* `post`: Sends a request to the extension and returns the result.
+

docs/src/guides/integration/connect.md

@@ -0,0 +1,49 @@
+# 🔌 Connect
+
+## Connect to extension
+
+Use `cryptkeeper.connect` to access the extension.
+
+Initialize the `cryptkeeper.connect` function, which returns a promise that resolves to the client object.
+
+ Once you have the client object, you can use it to make RPC calls to the extension.
+
+ [@src/providers/sdk/CryptKeeperInjectedProvider.ts](https://github.com/CryptKeeperZK/crypt-keeper-extension/blob/29b211bae48573f0212ce280fdcc2c4a5932394b/packages/providers/src/sdk/CryptKeeperInjectedProvider.ts#L105-L125)
+
+
+```ts
+ /**
+   * Connects to the CryptKeeper extension.
+   *
+   * @returns {Promise<CryptKeeperInjectedProvider | undefined>} A Promise that resolves to the connected CryptKeeperInjectedProvider instance, or undefined if the CryptKeeper extension is not installed.
+   */
+  async connect(): Promise<CryptKeeperInjectedProvider | undefined> {
+    if (!window.isCryptkeeperInjected) {
+      return undefined;
+    }
+
+    const { isApproved, canSkipApprove } = await this.tryConnect(window.location.origin);
+
+    if (isApproved) {
+      await this.addHost(window.location.origin, canSkipApprove);
+    }
+
+    await this.post({ method: RPCAction.CLOSE_POPUP });
+
+    const connectedIdentity = await this.getConnectedIdentity();
+
+    if (!connectedIdentity) {
+      await this.connectIdentity({ host: window.location.origin });
+    }
+
+    return this;
+  }
+
+    declare global {
+        interface Window {
+            zkpr: {
+                connect: () => any
+            }
+        }
+    }// Some code
+```