Merge branch 'main' into DEV-8626

docs/guides/digital-assets/read-asset-data.md

@@ -45,7 +45,7 @@ npm install web3 @erc725/erc725.js @lukso/lsp-smart-contracts
 <Tabs>
   <TabItem value="Current Standard" label="Current Standard">
 
-In the [**Read Profile Data** guide](../universal-profile/read-profile-data), we learned how to read the Universal Profile properties and use the data key names with the `fetchData()` function of the [erc725.js](../../tools/erc725js/getting-started/) library. In the same way, we can now fetch all the assets owned by the Universal Profile by calling `fetchData` and passing the `LSP5ReceivedAssets[]` key.
+In the [Read Profile Data](../../learn/dapp-developer/readData), we learned how to get the Universal Profile properties and use the data key names with the `fetchData()` function of the [erc725.js](../../tools/erc725js/getting-started/) library. In the same way, we can now fetch all the assets owned by the Universal Profile by calling `fetchData` and passing the `LSP5ReceivedAssets[]` key.
 
 :::info
 This same method can also be used to fetch all assets a Universal Profile has ever issued by using the `LSP12IssuedAssets[]` key.
@@ -90,7 +90,7 @@ console.log(ownedAssets);
 
   <TabItem value="Legacy Standard" label="Legacy Standard">
 
-In the [previous guide](../universal-profile/read-profile-data), we learned how to read the Universal Profile properties and use the data key names with the `fetchData()` function of the [erc725.js](../../tools/erc725js/getting-started/) library. In the same way, we can now fetch the address of the [Universal Receiver](../../standards/generic-standards/lsp1-universal-receiver/) by using `fetchData("LSP1UniversalReceiverDelegate")`.
+In the [Read Profile Data Guide](../../learn/dapp-developer/readData), we learned how to get the Universal Profile properties and use the data key names with the `fetchData()` function of the [erc725.js](../../tools/erc725js/getting-started/) library. In the same way, we can now fetch the address of the [Universal Receiver](../../standards/generic-standards/lsp1-universal-receiver/) by using `fetchData("LSP1UniversalReceiverDelegate")`.
 
 :::caution
 If using erc725.js in a NodeJS environment you may need to install and import [`isomorphic-fetch`](https://www.npmjs.com/package/isomorphic-fetch) to use the `fetchData()` method.

docs/guides/vault/edit-vault-data.md

@@ -572,4 +572,4 @@ await updateVaultURD(vaultURDAddress);
 
 The **LSP9Vault** contract is an **ERC725** contract, so it shares the same way to read data as Universal Profiles and other ERC725 contracts by using **[erc725.js](../../tools/erc725js/getting-started.md)**.
 
-You can refer to this **[previous guide](../universal-profile/read-profile-data.md)** to learn how to **fetch data** (received assets, issued assets, etc ..). Please note, that you will need to replace the address of the **Universal Profile** with the **Vault's** address.
+You can refer to the **[Read Profile Data Guide](../../learn/dapp-developer/readData)** to learn how to **fetch data** like received or issued assets from [ERC725Y Storage](../../standards/lsp-background/erc725#erc725y-generic-data-keyvalue-store). However, please note that the **Universal Profile** address has to be exchanged with the **Vault's** address.

docs/learn/dapp-developer/_category_.yml

@@ -0,0 +1,2 @@
+label: ' Dapp Developer'
+collapsed: false

docs/guides/universal-profile/read-profile-data.md → docs/learn/dapp-developer/readData.md

@@ -1,46 +1,44 @@
 ---
 sidebar_label: 'Read Profile Data'
-sidebar_position: 2
+sidebar_position: 1
 ---
 
 # Read Universal Profile Data
 
 In this guide, we will learn how to read data from a [Universal Profile](../../standards/universal-profile/introduction.md).
 
 :::tip
-A complete _"ready to use"_ JS file is available at the end in the [**Final Code**](#final-code) section. If you want to run the code as standalone JavaScript files within the terminal or the browser, you can open the [`lukso-playground`](https://github.com/lukso-network/lukso-playground) repository or use the correlated [StackBlitz](https://stackblitz.com/github/lukso-network/lukso-playground) page.
+If you want to run the code as standalone JavaScript files within the terminal or the browser, you can open the [`lukso-playground`](https://github.com/lukso-network/lukso-playground/blob/main/fetch-profile/02-fetch-profile-metadata.js) repository.
 :::
 
 <div style={{textAlign: 'center', color: 'grey'}}>
   <img
-    src={require('./img/example-up.png').default}
+    src={require('/img/learn/up_view.png').default}
     alt="Universal Profile example on universalprofile.cloud"
   />
 <br/>
-<i>A <a href="https://universalprofile.cloud/0x0C03fBa782b07bCf810DEb3b7f0595024A444F4e">Universal Profile</a> as seen on UniversalProfile.cloud</i>
+<i>A <a href="https://wallet.universalprofile.cloud/0x6979474Ecb890a8EFE37daB2b9b66b32127237f7">Universal Profile</a> as seen on UniversalProfile.cloud</i>
 </div>
 
 We will use:
 
-- [web3.js](https://web3js.readthedocs.io/en/v1.7.0/) for utility as well as connecting to the LUKSO Testnet network.
 - [erc725.js](../../tools/erc725js/getting-started/) library to check the interface of a profile.
-- [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) to enable you to use `fetch()` in Node.js code.
 
 ## Setup
 
 Open a terminal in the project's folder of your choice and install all required libraries.
 
 ```shell
-npm install web3 @erc725/erc725.js isomorphic-fetch
+npm install web3 @erc725/erc725.js
 ```
 
 ## Step 1 - Call the Universal Profile
 
-:::success Recommendation
-Complete "ready to use" JSON and JS files are available at the end in the [**Final Code**](#final-code) section.
-:::
+<details>
+<summary>
+To inspect the address and check if it has an ERC725 contract, we can call its interface through the `erc725.js` library. The instance of the contract will need the following information:</summary>
 
-To inspect the address and check if it has an ERC725 contract, we can call its interface through the `erc725.js` library. The instance of the contract will need the following information:
+<div>
 
 - [LSP3 - Profile Metadata](../../standards/universal-profile/lsp3-profile-metadata) describes the data in the Universal Profile contract storage, and which data keys to use to retrieve it. We can import the schema directly from the [erc725.js](../../tools/erc725js/schemas#standard-lsp-schemas) library.
 
@@ -54,7 +52,8 @@ To inspect the address and check if it has an ERC725 contract, we can call its i
 - `provider`: a [provider](../../tools/erc725js/providers) object. Usually used with the RPC endpoint URL
 - `config`: used to configure the IPFS gateway
 
-Besides the schema, we also use `isomorphic-fetch` to fetch the HTTP response from the profile while using `node` for execution. You may not need this library if you use browser environments like `ReactJS` or `VueJS`.
+</div>
+</details>
 
 After importing the ERC725 object, we can declare all data needed to instantiate the Universal Profile as ERC725 contract instance.
 
@@ -68,40 +67,31 @@ We will use the convenient `fetchData()` function since we only need one command
 :::
 
 ```javascript title="read_profile.js"
-// Import and Network Setup
-import Web3 from 'web3';
-import { ERC725 } from '@erc725/erc725.js';
-import 'isomorphic-fetch';
-import erc725schema from '@erc725/erc725.js/schemas/LSP3UniversalProfileMetadata.json';
-
-// Our static variables
-const SAMPLE_PROFILE_ADDRESS = '0xa907c1904c22DFd37FF56c1f3c3d795682539196';
-const RPC_ENDPOINT = 'https://rpc.testnet.lukso.network';
-const IPFS_GATEWAY = 'https://2eff.lukso.dev/ipfs/';
+import { ERC725 } from '@erc725/erc725.js'; // Library to check the interface of a profile
+import erc725schema from '@erc725/erc725.js/schemas/LSP3UniversalProfileMetadata.json' assert { type: 'json' };
 
 // Parameters for ERC725 Instance
+const config = {
+  ipfsGateway: 'https://ipfs-proxy.lukso-account.workers.dev/ipfs/',
+};
 const provider = new Web3.providers.HttpProvider(RPC_ENDPOINT);
-const config = { ipfsGateway: IPFS_GATEWAY };
 
 /*
  * Try fetching the @param's Universal Profile
  *
  * @param address of Universal Profile
  * @return string JSON or custom error
  */
-async function fetchProfile(address) {
-  try {
-    const profile = new ERC725(erc725schema, address, provider, config);
-    return await profile.fetchData();
-  } catch (error) {
-    return console.log('This is not an ERC725 Contract');
-  }
-}
+const profileData = await new ERC725(
+  erc725schema,
+  address,
+  provider,
+  config,
+).fetchData();
 
 // Debug
-fetchProfile(SAMPLE_PROFILE_ADDRESS).then((profileData) =>
-  console.log(JSON.stringify(profileData, undefined, 2)),
-);
+
+console.log(JSON.stringify(profileData, undefined, 2));
 ```
 
 If everything went fine, we now have the profile's [LSP3 - Universal Profile Metadata](../../standards/universal-profile/lsp3-profile-metadata) JSON. It should look like this JSON file:
@@ -203,79 +193,14 @@ In our case, to only read the profile's information, we can use `fetchData('LSP3
  * @param address of Universal Profile
  * @return string JSON or custom error
  */
-async function fetchProfileData(address) {
-  try {
-    const profile = new ERC725(erc725schema, address, provider, config);
-    return await profile.fetchData('LSP3Profile');
-  } catch (error) {
-    return console.log('This is not an ERC725 Contract');
-  }
-}
 
-// Debug
-fetchProfileData(SAMPLE_PROFILE_ADDRESS).then((profileData) =>
-  console.log(JSON.stringify(profileData, undefined, 2)),
-);
-```
+const profileData = await new ERC725(
+  erc725schema,
+  address,
+  provider,
+  config,
+).fetchData('LSP3Profile');
 
-## Final Code
-
-Below is the complete code snippet of this guide, with all the steps compiled together.
-
-```javascript title="read_profile.js"
-// Import and Network Setup
-import Web3 from 'web3';
-import { ERC725 } from '@erc725/erc725.js';
-import 'isomorphic-fetch';
-import erc725schema from '@erc725/erc725.js/schemas/LSP3UniversalProfileMetadata.json';
-
-// Our static variables
-const SAMPLE_PROFILE_ADDRESS = '0x0C03fBa782b07bCf810DEb3b7f0595024A444F4e';
-const RPC_ENDPOINT = 'https://rpc.testnet.lukso.network';
-const IPFS_GATEWAY = 'https://2eff.lukso.dev/ipfs/';
-
-// Parameters for ERC725 Instance
-const provider = new Web3.providers.HttpProvider(RPC_ENDPOINT);
-const config = { ipfsGateway: IPFS_GATEWAY };
-
-/*
- * Try fetching the @param's Universal Profile
- *
- * @param address of Universal Profile
- * @return string JSON or custom error
- */
-async function fetchProfile(address) {
-  try {
-    const profile = new ERC725(erc725schema, address, provider, config);
-    return await profile.fetchData();
-  } catch (error) {
-    return console.log('This is not an ERC725 Contract');
-  }
-}
-
-/*
- * Fetch the @param's Universal Profile's
- * LSP3 data
- *
- * @param address of Universal Profile
- * @return string JSON or custom error
- */
-async function fetchProfileData(address) {
-  try {
-    const profile = new ERC725(erc725schema, address, provider, config);
-    return await profile.fetchData('LSP3Profile');
-  } catch (error) {
-    return console.log('This is not an ERC725 Contract');
-  }
-}
-
-// Step 1
-fetchProfile(SAMPLE_PROFILE_ADDRESS).then((profileData) =>
-  console.log(JSON.stringify(profileData, undefined, 2)),
-);
-
-// Step 2
-fetchProfileData(SAMPLE_PROFILE_ADDRESS).then((profileData) =>
-  console.log(JSON.stringify(profileData, undefined, 2)),
-);
+// Debug
+console.log(JSON.stringify(profileData, undefined, 2));
 ```

docs/standards/universal-profile/lsp0-erc725account.md

@@ -101,7 +101,7 @@ See the **[ERC725](../lsp-background//erc725.md)** standard for more information
 
 Check the [**setData functions**](../../contracts/contracts/LSP0ERC725Account/LSP0ERC725Account.md#setdata) provided by **ERC725Y** that allows attaching data to the contract.
 
-Check the **javascript** guides to know [**How to Edit a Profile (setData)**](../../guides/universal-profile/edit-profile.md) or [**How to Read from a Profile (getData)**](../../guides/universal-profile/read-profile-data.md).
+Check the **javascript** guides to know [**How to Edit a Profile (setData)**](../../guides/universal-profile/edit-profile.md) or [**How to Read from a Profile (getData)**](../../learn/dapp-developer/readData).
 
 :::