Skip to content

Commit

Permalink
docs: add profile section
Browse files Browse the repository at this point in the history
  • Loading branch information
janniks committed Jul 14, 2023
1 parent a124807 commit b37b311
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 18 deletions.
2 changes: 1 addition & 1 deletion docs/feature-guides/sign-transactions.md
Original file line number Diff line number Diff line change
Expand Up @@ -412,4 +412,4 @@ interface TransactionResponse {
}
```

<StacksProviderSection/>
<StacksProviderSection/>
37 changes: 20 additions & 17 deletions docs/feature-guides/update-profile.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
title: Update User Profile
---

import StacksjsStartersNote from '../includes/\_stacks.js-starters-note.mdx';
import StacksProviderSection from '../includes/\_stacks.js-provider-section.mdx';

<StacksjsStartersNote/>

This guide explains how to change the universal profile of an authenticated user.

When a user creates a new account with Hiro Wallet a basic profile is created and stored on the user's own storage hub. The basic profile contains
When a user creates a new account with Hiro Wallet a basic profile is created and stored on the user's own storage hub. The basic profile contains
only a public key. It can be extended to contain personal information like an avatar,name and description. It is always cryptographically signed by the user's key, the so-called owner key.

:::info
Expand All @@ -20,9 +21,10 @@ like this:

![image](https://user-images.githubusercontent.com/1449049/215344771-455d3345-b890-49d0-9cfa-fd1f92bf5b1e.png)

In order to update the public profile, apps can make request to the Stacks wallet. These requests are reviewed and confirmed by the user in the wallet similar to transaction signing.
In order to update the public profile, apps can make request to the Stacks wallet. These requests are reviewed and confirmed by the user in the wallet similar to transaction signing.

## Install dependency

:::tip
In order to utilize the latest profile updating with the Hiro Wallet, use a version >= 7.1.0 of the `@stacks/connect` NPM package.
:::
Expand All @@ -33,7 +35,7 @@ The following dependency must be installed:
npm install @stacks/connect
```

This also installs the NPM package `@stacks/profile`. It contains the data type `PublicPersonProfile` used for the public profile.
This also installs the NPM package `@stacks/profile`. It contains the data type `PublicPersonProfile` used for the public profile.

## Initiate session

Expand All @@ -43,17 +45,20 @@ See the [authentication guide](https://docs.hiro.so/build-apps/authentication) b

## Prompt to update the profile

After the user chose the content of the profile, create a `PublicPersonProfile` object from that data and call the `openProfileUpdateRequestPopup` function provided by the `connect` package to trigger the display of the profile update prompt.
After the user chose the content of the profile, create a `PublicPersonProfile` object from that data and call the `openProfileUpdateRequestPopup` function provided by the `connect` package to trigger the display of the profile update prompt.

```tsx
import { openProfileUpdateRequestPopup } from '@stacks/connect';

const profile = {"@type": "Person", "@context": "https://schema.org",
name: "Friedger",
image: [{"@type": "ImageObject",
name: "avatar",
contentUrl: "https://friedger.de/profile.png"}]};

const profile = {
'@type': 'Person',
'@context': 'https://schema.org',
name: 'Friedger',
image: [
{ '@type': 'ImageObject', name: 'avatar', contentUrl: 'https://friedger.de/profile.png' },
],
};

openProfileUpdateRequestPopup({
profile,
appDetails: {
Expand All @@ -67,6 +72,7 @@ openProfileUpdateRequestPopup({
```

Several parameters are available for calling `openProfileUpdateRequestPopup`. Here is the exact interface for them:

```tsx
interface ProfileUpdateRequestOptions {
profile: PublicPersonProfile;
Expand All @@ -82,7 +88,7 @@ interface ProfileUpdateRequestOptions {
}
```

After the profile was updated, the user can share the profile with other users.
After the profile was updated, the user can share the profile with other users.

## Lookup a Public Profile

Expand All @@ -102,18 +108,15 @@ export interface ProfileLookupOptions {
The function returns a promise with the data of the public profile if the data could be retrieved from the BNS name owner's storage and if the retrieved JSON token was sucessfully verified.

The recommended schema for the profile is as follows:

```tsx
export interface PublicPersonProfile extends PublicProfileBase {
'@type': 'Person';
name?: string;
givenName?: string;
familyName?: string;
description?: string;
image?: {'@type': 'ImageObject';
name?: string;
contentUrl?: string;
[k: string]: unknown;
}[];
image?: { '@type': 'ImageObject'; name?: string; contentUrl?: string; [k: string]: unknown }[];
website?: {
'@type'?: string;
url?: string;
Expand Down Expand Up @@ -152,6 +155,7 @@ export interface PublicPersonProfile extends PublicProfileBase {
[k: string]: unknown;
}
```

## Usage in React Apps

Import the `useConnect` helper from [`connect-react`](https://github.com/hirosystems/connect) package to update profiles more seamlessly with React apps.
Expand Down Expand Up @@ -210,5 +214,4 @@ interface ProfileUpdatePayload {

After the user confirms the update, a `profileUpdateResponse` payload of type `PublicProfile` is sent back to your app. It contains the updated profile as confirmed by the user. Note, that this profile can be different to the requested profile by the app because the user might have modified the profile in the wallet before confirming the changes.


<StacksProviderSection/>

0 comments on commit b37b311

Please sign in to comment.