diff --git a/apps/docs/docs/api-sdk.md b/apps/docs/docs/api-sdk.md index 30924325..bd337f9a 100644 --- a/apps/docs/docs/api-sdk.md +++ b/apps/docs/docs/api-sdk.md @@ -50,7 +50,7 @@ pnpm add @bandada/api-sdk Creates a new instance of ApiSdk using the API URL and the [config](https://axios-http.com/docs/req_config). -- Create a new instance using the Bandada API URL and the default config. +- Create a new instance using the Bandada API URL with the default config. This is what you need if you are using the production Bandada API. diff --git a/apps/docs/docs/api.md b/apps/docs/docs/api.md index 08aa5951..3a965ce6 100644 --- a/apps/docs/docs/api.md +++ b/apps/docs/docs/api.md @@ -4,8 +4,8 @@ sidebar_position: 2 # API -The API has a list of endpoints to interact with the Bandada infrastructure. +The API provides a list of endpoints to interact with the Bandada infrastructure. It is compatible with any programming language that supports REST API requests. -Read the documentation of the API and try it out: [Bandada API Docs](https://api.bandada.pse.dev/). +Read the API documentation and try it out: [Bandada API Docs](https://api.bandada.pse.dev/). diff --git a/apps/docs/docs/faq.md b/apps/docs/docs/faq.md index 7b822f73..51791f59 100644 --- a/apps/docs/docs/faq.md +++ b/apps/docs/docs/faq.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 --- # FAQ diff --git a/apps/docs/docs/intro.md b/apps/docs/docs/intro.md index 6240cbbd..0a6f3a30 100644 --- a/apps/docs/docs/intro.md +++ b/apps/docs/docs/intro.md @@ -5,7 +5,7 @@ slug: / # What is Bandada? -Bandada is an infrastructure to manage privacy-preserving groups. It also provides antisybil mechanisms by using credential groups so that you can only join a group if you meet a specific criteria. +Bandada is an infrastructure for managing privacy-preserving groups. It also provides anti-sybil mechanisms by using credential groups so that you can only join a group if you meet specific criteria. Bandada is a public good project. It is free and open source. Everyone can use it and contribute to it. diff --git a/apps/docs/docs/resources.mdx b/apps/docs/docs/resources.mdx index 31f6878c..c4aa4036 100644 --- a/apps/docs/docs/resources.mdx +++ b/apps/docs/docs/resources.mdx @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 6 --- import RenderArticles from "../src/components/RenderArticles" diff --git a/apps/docs/docs/tutorials/_category_.json b/apps/docs/docs/tutorials/_category_.json new file mode 100644 index 00000000..07b81ad8 --- /dev/null +++ b/apps/docs/docs/tutorials/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Tutorials", + "position": 4 +} \ No newline at end of file diff --git a/apps/docs/docs/tutorials/api-sdk/_category_.json b/apps/docs/docs/tutorials/api-sdk/_category_.json new file mode 100644 index 00000000..4ccd6685 --- /dev/null +++ b/apps/docs/docs/tutorials/api-sdk/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "API SDK", + "position": 2 +} \ No newline at end of file diff --git a/apps/docs/docs/tutorials/api-sdk/groups.md b/apps/docs/docs/tutorials/api-sdk/groups.md new file mode 100644 index 00000000..cfe1871e --- /dev/null +++ b/apps/docs/docs/tutorials/api-sdk/groups.md @@ -0,0 +1,327 @@ +--- +sidebar_position: 1 +title: Create and manage groups +--- + +import Tabs from "@theme/Tabs" +import TabItem from "@theme/TabItem" + +# Create and manage groups with API SDK + +This tutorial will guide you through the complete process of creating and managing a group by using the API SDK. + +## Install library + + + + +```bash +npm install @bandada/api-sdk +``` + + + + +```bash +yarn add @bandada/api-sdk +``` + + + + +```bash +pnpm add @bandada/api-sdk +``` + + + + +## Create a new instance + +After installing the API SDK, create a new instance of `ApiSdk` using the API URL and the [config](https://axios-http.com/docs/req_config). + +You can choose to: + +- Create a new instance using the Bandada API URL with the default config. + +```ts +import { ApiSdk } from "@bandada/api-sdk" + +const apiSdk = new ApiSdk() +``` + +- Create a new instance using a [Supported URL](https://github.com/bandada-infra/bandada/blob/main/libs/api-sdk/src/types/index.ts#L43). + +```ts +import { ApiSdk, SupportedUrl } from "@bandada/api-sdk" + +const apiSdk = new ApiSdk(SupportedUrl.DEV) +``` + +## Create a group + +### Manual group + +Create a new manual group using the API SDK. + +```ts +const apiKey = "your-api-key" + +const groupCreationDetails = { + name: "Manual Group", + description: "This is a description", + treeDepth: 16, + fingerprintDuration: 3600 +} + +const group = apiSdk.createGroup(groupCreationDetails, apiKey) +``` + +### Credential group + +Create a new credential group using the API SDK. + +```ts +const apiKey = "your-api-key" + +const credentials = { + id: "BLOCKCHAIN_BALANCE", + criteria: { + minBalance: "10", + network: "Sepolia" + } +} + +const groupCreationDetails = { + name: "Credential Group", + description: "This is a description", + treeDepth: 16, + fingerprintDuration: 3600, + credentials +} + +const credentialGroup = apiSdk.createGroup(groupCreationDetails, apiKey) +``` +### Multiple credentials group + +Create a multiple-credentials group using the API SDK + +```ts +const apiKey = "your-api-key" + +const credentials = { + credentials: [ + { + id: "BLOCKCHAIN_TRANSACTIONS", + criteria: { + minTransactions: 10, + network: "Sepolia" + } + }, + { + id: "BLOCKCHAIN_BALANCE", + criteria: { + minBalance: "5", + network: "Sepolia" + } + } + ], + expression: ["", "and", ""] +} + +const groupCreationDetails = { + name: "Multiple Credentials Group", + description: "This is a description", + treeDepth: 16, + fingerprintDuration: 3600, + credentials +} + +const credentialGroup = apiSdk.createGroup(groupCreationDetails, apiKey) +``` +More details on the credentials can be found at the [Credentials library](https://github.com/bandada-infra/bandada/tree/main/libs/credentials). + +## Add members to a group + +### Manual group + +You can add users directly to a manual group by using the API SDK. + +```ts +const groupId = "your-group-id" +const memberId = "member-id-1" +const apiKey = "your-api-key" + +await apiSdk.addMemberByApiKey( + groupId, + memberId, + apiKey +) +``` + +### Add members using an invite code + +Using the API SDK, you can invite users to join a manual group by sharing an invite code. + +#### Create invite + +Create a new group invite. + +```ts +const groupId = "your-group-id" +const apiKey = "your-api-key" + +const invite = await apiSdk.createInvite(groupId, apiKey) +``` + +You can wrap the invite code into a custom URL for your app, where it will handle the logic for adding a member to the group by invite code. + +Here is an example of the custom URL structure: + +``` +https://?inviteCode= +``` + +#### Get invite + +Returns a specific invite along with the group details associated to the invite. + +```ts +const inviteCode = "INVITECODE" +const apiKey = "your-api-key" + +const invite = await apiSdk.getInvite(inviteCode) +``` + +#### Add member using an invite code + +Adds a member to a group using an invite code. + +```ts +const groupId = "your-group-id" +const memberId = "member-id-1" +const inviteCode = "INVITECODE" + +await apiSdk.addMemberByInviteCode(groupId, memberId, inviteCode) +``` + +#### Full example + +This is an example of how the whole code would look like: + +```ts +const groupId = "your-group-id" +const memberId = "member-id-1" +const apiKey = "your-api-key" + +// generate invite code +const invite = await apiSdk.createInvite(groupId, apiKey) + +// wrap the invite code into a custom URL for easier sharing +const inviteLink = `https://client.bandada.pse.dev?inviteCode=${invite.code}` + +// add member to group by invite code +const response = await apiSdk.addMemberByInviteCode( + invite.group.id, + memberId, + invite.code +) +``` + +You can refer to the [Client app](https://github.com/bandada-infra/bandada/blob/main/apps/client/src/pages/home.tsx) to better understand the context and logic for adding members to a group using an invite code. + +### Credential group + +You can invite users to join a credential group by generating the credential group join URL. + +```ts +import { DashboardUrl } from "@bandada/api-sdk" + +const dashboardUrl = DashboardUrl.DEV +const groupId = "your-group-id" +const commitment = "commitment-value" +const providerName = "github" +const redirectUri = "http://localhost:3003" + +const url = apiSdk.getCredentialGroupJoinUrl( + dashboardUrl, + groupId, + commitment, + providerName, + redirectUri +) +``` + +### Multiple credentials group + +You can invite users to join a multiple credentials group by generating the multiple credentials group join URL. + +```ts +import { DashboardUrl } from "@bandada/api-sdk" + +const dashboardUrl = DashboardUrl.DEV +const groupId = "your-group-id" +const commitment = "commitment-value" + +const url = apiSdk.getMultipleCredentialsGroupJoinUrl( + dashboardUrl, + groupId, + commitment +) +``` + +Send the generated URL to the users you want to invite. + +Upon clicking the generated URL, users will be redirected to the dashboard where they will need to validate their credentials based on the group credentials criteria. + +Once the user has completed and passed the criteria validation, they will be added as a member to the group. + +## Remove member from a group + +You can remove members from a group by using the API SDK. + +```ts +const groupId = "your-group-id" +const memberId = "member-id-1" +const apiKey = "your-api-key" + +await apiSdk.removeMemberByApiKey( + groupId, + memberId, + apiKey +) +``` + +## Remove multiple members from a group + +You can remove multiple members from a group by using the API SDK. + +```ts +const groupId = "your-group-id" +const memberId = ["member-id-1", "member-id-2", "member-id-3"] +const apiKey = "your-api-key" + +await apiSdk.removeMemberByApiKey( + groupId, + memberId, + apiKey +) +``` + +## Remove group + +You can remove a group by using the API SDK. + +```ts +const groupId = "your-group-id" +const apiKey = "your-api-key" + +await apiSdk.removeGroup(groupId, apiKey) +``` \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/_category_.json b/apps/docs/docs/tutorials/dashboard/_category_.json new file mode 100644 index 00000000..a0f3ba0c --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Dashboard", + "position": 1 +} \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/groups.md b/apps/docs/docs/tutorials/dashboard/groups.md new file mode 100644 index 00000000..1c204a98 --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/groups.md @@ -0,0 +1,36 @@ +--- +sidebar_position: 1 +title: Login, view, and create groups +--- + +# Login, view, and create groups + +## Log in to the Bandada Dashboard + +1. Open your web browser and navigate to the [Bandada Dashboard](https://app.bandada.pse.dev). +2. Log in by clicking `Sign in with Ethereum` and select the wallet of your choice (MetaMask, Coinbase Wallet, WalletConnect). + +![Homepage](../../../static/img/tutorial/homepage.png) + +![Login](../../../static/img/tutorial/login.png) + +## Navigate the Groups page + +1. Once logged in, you will be greeted by the `Groups` page where you can see a list of your existing groups and other credential groups. +2. On this page, you can: + - View the details of a group by clicking on the group card. + - Add a new group by clicking the `Add group` button. + - Search for a specific group by name or description. + - View, copy, and refresh your API key by clicking on the API key button. + +![Groups](../../../static/img/tutorial/groups.png) + +## Create a new group + +1. Click on the `Add group` button. +2. You will be redirected to the `New Group` page. +3. Select the type of group you want to create: + - **Off-chain**: The group will be stored on the Bandada server. + - **On-chain**: The group will be fully decentralized and will be on the Ethereum blockchain. + +![Create group](../../../static/img/tutorial/create.png) \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/manage.md b/apps/docs/docs/tutorials/dashboard/manage.md new file mode 100644 index 00000000..241196cf --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/manage.md @@ -0,0 +1,54 @@ +--- +sidebar_position: 4 +title: Manage groups +--- + +# Manage groups + +Upon successful group creation or clicking the group card on the `Groups` page, you will be redirected to the `Group Details` page where you can: +- View the group details. +- Copy the group ID. +- Download the group's data in JSON format. +- Manage group members. +- Remove group. + +![Group details](../../../static/img/tutorial/group.png) + +## Add members + +To add members, click on `Add member`. + +Depending on the group type, you will be presented with different methods to add members. +- `Off-chain` groups with `Manual` credential and `On-chain` groups: + - Add members by pasting one or more member IDs, separated by commas, spaces, or newlines, into the `Add member IDs` field. + - Click on the `Generate new link` button to generate an invite link. Then, copy the invite link and send it to the person you want to invite. + - Upon visiting the invite link generated by `Generate new link`, click on `Join group` to join the group. + - The invite link will be invalidated once the user successfully joins the group. + + ![Add members manually step 1](../../../static/img/tutorial/addmember-manual-1.png) + + ![Add members manually step 2](../../../static/img/tutorial/addmember-manual-2.png) + +- `Off-chain` groups with `Credentials` and `Multiple credentials`: + - Copy and share the access link to the person you want to invite. + - Upon visiting the invite link, click on `Join group` to join the group. + - The invite link can be reused by other people even after the user successfully joins the group. + + ![Add members by credentials step 1](../../../static/img/tutorial/addmember-credentials-1.png) + + ![Add members by credentials step 2](../../../static/img/tutorial/addmember-credentials-2.png) + +The current add member logic is being handled by the [Client app](https://github.com/bandada-infra/bandada/tree/main/apps/client). + +You can also implement your own add member logic by using the API SDK. For more information, read our API SDK [documentation](../../api-sdk.md) and [tutorial](../api-sdk/credential-group.md)! + +## Remove members + +Group administrators can remove group members by: +- Checking the checkbox to the left of the member ID, then clicking on `Remove Selected Members`. + +![Remove members using checkbox](../../../static/img/tutorial/deletemember-checkbox.png) + +- Clicking on the option button to the right of the member ID, then clicking on `Remove`. + +![Remove members using option](../../../static/img/tutorial/deletemember-option.png) diff --git a/apps/docs/docs/tutorials/dashboard/off-chain/_category_.json b/apps/docs/docs/tutorials/dashboard/off-chain/_category_.json new file mode 100644 index 00000000..6e0be73b --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/off-chain/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Off-chain groups", + "position": 2 +} \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/off-chain/credential.md b/apps/docs/docs/tutorials/dashboard/off-chain/credential.md new file mode 100644 index 00000000..b843e832 --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/off-chain/credential.md @@ -0,0 +1,42 @@ +--- +sidebar_position: 3 +title: Credential access +--- + +# Credential access + +## Create an off-chain group with credential access + +1. To create an off-chain group with credential access, select `Credential` access mode. + +![Create off-chain group credential access](../../../../static/img/tutorial/offchain-credentials.png) + +2. You can select the type of credentials for the off-chain group so that only users that fit the criteria can join the group. Currently supported credentials and providers are: + - **Provider**: GitHub. + - **Credential**: Followers. + **Input**: Minimum followers. + - **Credential**: Personal stars. + **Input**: Minimum stars. + - **Credential**: Repository commits. + **Input**: Minimum commits, repository details. + - **Provider**: Twitter (X). + - **Credential**: Followers. + **Input**: Minimum followers. + - **Credential**: Following user. + **Input**: Username. + - **Provider**: Blockchain. + - **Credential**: Transactions. + **Input**: Minimum transactions, network, block number. + - **Credential**: Balance. + **Input**: Minimum balance, network, block number. + - **Provider**: EAS. + - **Credential**: Attestations. + **Input**: Minimum attestations, network, attestation details. + +3. Click `Continue` to proceed. +4. You will be redirected to the `Group Preview` page to review the group details. +5. Click `Create Group` to finalize the group creation. + +![Create off-chain group preview](../../../../static/img/tutorial/offchain-preview.png) + +Congratulations! You have successfully created an off-chain credential access group! \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/off-chain/manual.md b/apps/docs/docs/tutorials/dashboard/off-chain/manual.md new file mode 100644 index 00000000..869873a4 --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/off-chain/manual.md @@ -0,0 +1,21 @@ +--- +sidebar_position: 2 +title: Manual access +--- + +# Manual access + +## Create an off-chain group with manual access + +1. To create an off-chain group with manual access, select `Manual` access mode. + +![Create off-chain group manual access](../../../../static/img/tutorial/offchain-manual.png) + +2. Click `Continue` to proceed. +3. You will be redirected to the `Group Preview` page to review the group details. +4. Click `Create Group` to finalize the group creation. + +![Create off-chain group preview](../../../../static/img/tutorial/offchain-preview.png) + +Congratulations! You have successfully created an off-chain group with manual access! + diff --git a/apps/docs/docs/tutorials/dashboard/off-chain/multiple-credentials.md b/apps/docs/docs/tutorials/dashboard/off-chain/multiple-credentials.md new file mode 100644 index 00000000..9541a6d0 --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/off-chain/multiple-credentials.md @@ -0,0 +1,41 @@ +--- +sidebar_position: 4 +title: Multiple credentials access +--- + +# Muleiple credentials access + +## Create an off-chain group with multiple credentials access + +1. To create an off-chain group with multiple credentials access, select `Multiple credentials` access mode. + +![Create off-chain group multiple credentials access](../../../../static/img/tutorial/offchain-mult-credentials.png) + +2. You can select multiple types of credentials for the off-chain group so that only users that fit the criteria can join the group. Users can use parentheses and logical operators such as `AND`, `OR`, `NOT` and `XOR` to chain multiple credentials together. Currently supported credentials and providers are: + - **Provider**: GitHub. + - **Credential**: Followers. + **Input**: Minimum followers. + - **Credential**: Personal stars. + **Input**: Minimum stars. + - **Credential**: Repository commits. + **Input**: Minimum commits, repository details. + - **Provider**: Twitter (X). + - **Credential**: Followers. + **Input**: Minimum followers. + - **Credential**: Following user. + **Input**: Username. + - **Provider**: Blockchain. + - **Credential**: Transactions. + **Input**: Minimum transactions, network, block number. + - **Credential**: Balance. + **Input**: Minimum balance, network, block number. + - **Provider**: EAS. + - **Credential**: Attestations. + **Input**: Minimum attestations, network, attestation details. +4. Click `Continue` to proceed. +5. You will be redirected to the `Group Preview` page to review the group details. +6. Click `Create Group` to finalize the group creation. + +![Create off-chain group preview](../../../../static/img/tutorial/offchain-preview.png) + +Congratulations! You have successfully created an off-chain multiple credentials access group! \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/off-chain/offchain.md b/apps/docs/docs/tutorials/dashboard/off-chain/offchain.md new file mode 100644 index 00000000..ee0b2fb4 --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/off-chain/offchain.md @@ -0,0 +1,29 @@ +--- +sidebar_position: 1 +title: Create group +--- + +# Off-chain groups + +## Create a new off-chain group + +1. To create an off-chain group, select the `Off-chain` group type. + +![Create group](../../../../static/img/tutorial/create.png) + +2. Fill up the off-chain group details as below: + - **Name**: Enter the group name. + - **Description**: Enter the description for the group with at least 10 characters. + - **Fingerprint Duration**: Select the validity duration of old fingerprints in milliseconds. +3. Click `Continue` to proceed. + +![Create off-chain group step 1](../../../../static/img/tutorial/offchain-1.png) + +4. Select the size of the off-chain group from the following options: + - **Small**: Store up to 65K members. + - **Medium**: Store up to 1M members. + - **Large**: Store up to 33M members. + - **XL**: Store up to 1B members. +5. Click `Continue` to proceed. + +![Create off-chain group step 2](../../../../static/img/tutorial/offchain-2.png) diff --git a/apps/docs/docs/tutorials/dashboard/on-chain/_category_.json b/apps/docs/docs/tutorials/dashboard/on-chain/_category_.json new file mode 100644 index 00000000..dfdcf60e --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/on-chain/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "On-chain groups", + "position": 3 +} \ No newline at end of file diff --git a/apps/docs/docs/tutorials/dashboard/on-chain/onchain.md b/apps/docs/docs/tutorials/dashboard/on-chain/onchain.md new file mode 100644 index 00000000..3495a328 --- /dev/null +++ b/apps/docs/docs/tutorials/dashboard/on-chain/onchain.md @@ -0,0 +1,20 @@ +--- +sidebar_position: 1 +title: Create group +--- + +# On-chain groups + +## Create a new on-chain group + +1. To create an on-chain group, select the `On-chain` group type. + +![Create on-chain group](../../../../static/img/tutorial/create.png) + +2. You will be redirected to the `Group Preview` page upon selecting the `On-chain` type in the group type selection. +3. Unlike an off-chain group, you do not have to input any group details to create an on-chain group. +4. Click `Create Group` to finalize the group creation. + +![Create on-chain group preview](../../../../static/img/tutorial/onchain-preview.png) + +Congratulations! You have successfully created an on-chain group! \ No newline at end of file diff --git a/apps/docs/static/img/tutorial/addmember-credentials-1.png b/apps/docs/static/img/tutorial/addmember-credentials-1.png new file mode 100644 index 00000000..6f681958 Binary files /dev/null and b/apps/docs/static/img/tutorial/addmember-credentials-1.png differ diff --git a/apps/docs/static/img/tutorial/addmember-credentials-2.png b/apps/docs/static/img/tutorial/addmember-credentials-2.png new file mode 100644 index 00000000..59980120 Binary files /dev/null and b/apps/docs/static/img/tutorial/addmember-credentials-2.png differ diff --git a/apps/docs/static/img/tutorial/addmember-manual-1.png b/apps/docs/static/img/tutorial/addmember-manual-1.png new file mode 100644 index 00000000..319ea9e2 Binary files /dev/null and b/apps/docs/static/img/tutorial/addmember-manual-1.png differ diff --git a/apps/docs/static/img/tutorial/addmember-manual-2.png b/apps/docs/static/img/tutorial/addmember-manual-2.png new file mode 100644 index 00000000..caaa9dbb Binary files /dev/null and b/apps/docs/static/img/tutorial/addmember-manual-2.png differ diff --git a/apps/docs/static/img/tutorial/create.png b/apps/docs/static/img/tutorial/create.png new file mode 100644 index 00000000..c04a2097 Binary files /dev/null and b/apps/docs/static/img/tutorial/create.png differ diff --git a/apps/docs/static/img/tutorial/deletemember-checkbox.png b/apps/docs/static/img/tutorial/deletemember-checkbox.png new file mode 100644 index 00000000..50acbff7 Binary files /dev/null and b/apps/docs/static/img/tutorial/deletemember-checkbox.png differ diff --git a/apps/docs/static/img/tutorial/deletemember-option.png b/apps/docs/static/img/tutorial/deletemember-option.png new file mode 100644 index 00000000..6c48ff83 Binary files /dev/null and b/apps/docs/static/img/tutorial/deletemember-option.png differ diff --git a/apps/docs/static/img/tutorial/group.png b/apps/docs/static/img/tutorial/group.png new file mode 100644 index 00000000..5820cce0 Binary files /dev/null and b/apps/docs/static/img/tutorial/group.png differ diff --git a/apps/docs/static/img/tutorial/groups.png b/apps/docs/static/img/tutorial/groups.png new file mode 100644 index 00000000..d56c0672 Binary files /dev/null and b/apps/docs/static/img/tutorial/groups.png differ diff --git a/apps/docs/static/img/tutorial/homepage.png b/apps/docs/static/img/tutorial/homepage.png new file mode 100644 index 00000000..9fbd5bef Binary files /dev/null and b/apps/docs/static/img/tutorial/homepage.png differ diff --git a/apps/docs/static/img/tutorial/login.png b/apps/docs/static/img/tutorial/login.png new file mode 100644 index 00000000..5ffdc554 Binary files /dev/null and b/apps/docs/static/img/tutorial/login.png differ diff --git a/apps/docs/static/img/tutorial/offchain-1.png b/apps/docs/static/img/tutorial/offchain-1.png new file mode 100644 index 00000000..a8d17b7c Binary files /dev/null and b/apps/docs/static/img/tutorial/offchain-1.png differ diff --git a/apps/docs/static/img/tutorial/offchain-2.png b/apps/docs/static/img/tutorial/offchain-2.png new file mode 100644 index 00000000..475c5d66 Binary files /dev/null and b/apps/docs/static/img/tutorial/offchain-2.png differ diff --git a/apps/docs/static/img/tutorial/offchain-credentials.png b/apps/docs/static/img/tutorial/offchain-credentials.png new file mode 100644 index 00000000..7adb5ab7 Binary files /dev/null and b/apps/docs/static/img/tutorial/offchain-credentials.png differ diff --git a/apps/docs/static/img/tutorial/offchain-manual.png b/apps/docs/static/img/tutorial/offchain-manual.png new file mode 100644 index 00000000..72231325 Binary files /dev/null and b/apps/docs/static/img/tutorial/offchain-manual.png differ diff --git a/apps/docs/static/img/tutorial/offchain-mult-credentials.png b/apps/docs/static/img/tutorial/offchain-mult-credentials.png new file mode 100644 index 00000000..88a6401d Binary files /dev/null and b/apps/docs/static/img/tutorial/offchain-mult-credentials.png differ diff --git a/apps/docs/static/img/tutorial/offchain-preview.png b/apps/docs/static/img/tutorial/offchain-preview.png new file mode 100644 index 00000000..3a78ae0c Binary files /dev/null and b/apps/docs/static/img/tutorial/offchain-preview.png differ diff --git a/apps/docs/static/img/tutorial/onchain-preview.png b/apps/docs/static/img/tutorial/onchain-preview.png new file mode 100644 index 00000000..d200d5b7 Binary files /dev/null and b/apps/docs/static/img/tutorial/onchain-preview.png differ