-
-
-
-:::note Manual Deployment
-
-You can also create new [Universal Profiles](../standards/accounts/introduction.md) by βοΈ [deploying it programmatically](./universal-profile/advanced-guides/deploy-up-with-lsp23.md). However, please keep in mind that you would also have to deploy your own [Transaction Relay Service](../standards/accounts/lsp15-transaction-relayer-api.md) to allow gasless onboarding. Customly deployed profiles will not receive free monthly transaction quota through the LUKSO Transaction Relay Service.
-
-:::
-
-:::tip Relayer API
-
-If you want to deploy Universal Profiles for your users, please check out our [Relayer API](../tools/services/relayer-developer.md).
-
-:::
-
-## Resources for Builders
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-LUKSO is an L1 EVM-based Blockchain. All tools and tutorials for Ethereum also work for LUKSO by default.
-
-Developers building on LUKSO can write smart contracts in any EVM-based smart contract languages (Solidity, Vyper, etc...), and use existing standards already developed for other Ethereum networks.
-
-- [Awesome LUKSO, a comprehensive list of awesome LUKSO resources!](https://github.com/lukso-network/awesome-lukso)
-- [What are the main features of LUKSO standards?](../faq/onboarding/lukso-standards.md#what-are-the-main-features-of-lsps)
-- [Learning Tools of the Ethereum Foundation](https://ethereum.org/en/developers/learning-tools/)
-
-## Code Repositories
-
-Want to dive into the code directly? Check the following repos π
-
-### Next.js Boilerplate
-
-The [`tools-dapp-boilerplate`](https://github.com/lukso-network/tools-dapp-boilerplate) is a Next.js repository that gives you a fully working dApp with lot of ready to use components and features:
-
-
-
-
-
-
-
-### Playground
-
-The [`lukso-playground`](https://github.com/lukso-network/lukso-playground) repository is a great place to start playing around with dApps. It includes:
-
-- ready-to-go network configurations with LUKSO [Mainnet](../networks/mainnet/parameters.md) and [Testnet](../networks/testnet/parameters.md).
-- a full Hardhat setup to work with smart contracts.
-- example scripts to fetch profile and asset metadata, update them, and even more code examples!
-- sample contracts for Tokens, NFTs and Universal Receivers to build smart contracts based on the [LSP standards](./benefits-lukso-standards.md).
-- scripts to deploy and verify contracts on the network.
-
-
-
-
-
-
-
-
diff --git a/docs/learn/getting-started.mdx b/docs/learn/getting-started.mdx
new file mode 100644
index 0000000000..3db9da2f33
--- /dev/null
+++ b/docs/learn/getting-started.mdx
@@ -0,0 +1,254 @@
+---
+sidebar_label: 'ποΈ Developer Quickstart'
+description: Introduction to the LUKSO Ecosystem - why choose LUKSO? Who is LUKSO intended for?
+title: 'Quick Start'
+---
+
+import CallToActionButton from '@site/src/components/CallToActionButton';
+import Chip from '@site/src/components/Chip';
+import CardWithContent from '@site/src/components/CardWithContent';
+import LinkCards from '@site/src/components/LinkCards';
+import Link from '@docusaurus/Link';
+
+import styles from './learn.module.scss';
+
+import DappBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png';
+import SmartContractBannerImage from '../../static/img/learn/DEVELOPERS_SmartContract.png';
+
+# Developer Quickstart
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+:::info
+
+In order to follow the guides and tutorial of the LUKSO Developer documentation, you should have some basic knowledge and be familiar with the following:
+
+- Building general applications on Ethereum: [**Learning Tools of the Ethereum Foundation**](https://ethereum.org/en/developers/learning-tools/)
+- For smart contract developers:
+ - Smart contract development in [**Solidity**](https://docs.soliditylang.org).
+ - If you pick a template, [**Foundry**](https://hardhat.org/docs) or [**Hardhat**](https://book.getfoundry.sh/).
+- For dApp developers:
+ - Basic programming skills in [**Javascript**](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or [**Typescript**](https://www.typescriptlang.org/docs/).
+ - Using a javascript library to interaction with web3 applications like [**web3.js**](https://docs.web3js.org/), [**ethers**](https://docs.ethers.org/v6/) or [**viem**](https://viem.sh/).
+
+:::
+
+## Building dApps for Universal Profiles
+
+When building dApps on LUKSO, you are interacting with [Universal Profiles π](../standards/accounts/introduction.md) through the [Universal Profile Browser Extension](https://chromewebstore.google.com/detail/universal-profiles/abpickdkkbnbcoepogfhkhennhfhehfn). This page guides you on the first step to get started building on LUKSO with the π Browser Extension.
+
+-
+
- + + Learn how to develop with Universal Profiles + + +
- + + Explore code examples in the LUKSO playground + + +
-
+
- + + Get started with Tokens and NFTs + + +
- + + Create a token + + +
- + + Create an Automatic Token Forwarder for your UP + + +
-
+
- + Migrate to LUKSO + +
- + + Refactor a Solidity ERC20 token to LSP7 + + +
- + + Refactor a Solidity ERC721 NFT to LSP8 + + +
-
+
- + Visit our support website + +
- + + Join the Developer community on Discord + + +
- + + Contact the tech team + + +
+
+
+
+
+
+
+
+The [LUKSO Relayer API](../tools/apis/relayer-api.md) allows you to easily create and deploy Universal Profiles from your dApp in Javascript.
+
+Your users will benefit from a free monthly gas quota and will be able to submit transactions without requiring to pay for gas. A great way to onboard new users quickly and easily into your dApp!
+
+π [**Deploy with the LUKSO Relayer API**](../tools/apis/relayer-api.md).
+
+
+
+
+If you prefer to create a Universal Profile manually, use the LSP23 Linked Contracts Factory contract on LUKSO Mainnet.
+
+This factory contract can help you to deploy a Universal Profile + its Key Manager. However, you will have to set the metadata and permissions as well on deployment. Follow our guide below.
+
+π [**Deploy with LSP23 Linked Contract Factory**](./universal-profile/advanced-guides/deploy-up-with-lsp23.md).
+
+
+
+
+
+:::caution
+
+Please note that Universal Profile created and deployed manually are not registered on the [LUKSO Transaction Relay Service](../tools/apis/relayer-api.md), do not get a free monthly gas quota, and as a result, do not benefit from gas-less transactions.
+
+:::
+
+## Resources for Builders
+
+
+
+
+
+LUKSO is a Layer 1 EVM Blockchain. All tools and tutorials for Ethereum also work for LUKSO by default.
+
+Developers building on LUKSO can write smart contracts in any EVM-based smart contract languages (Solidity, Vyper, etc...), and use existing standards already developed for other Ethereum networks.
+
+
+
+
+
+
+
+### Playground
+
+The [`lukso-playground`](https://github.com/lukso-network/lukso-playground) repository is a great place to start playing around with dApps. It includes:
+
+- ready-to-go network configurations with LUKSO [Mainnet](../networks/mainnet/parameters.md) and [Testnet](../networks/testnet/parameters.md).
+- a full Hardhat setup to work with smart contracts.
+- example scripts to fetch profile and asset metadata, update them, and even more code examples!
+- sample contracts for Tokens, NFTs and Universal Receivers to build smart contracts based on the [LSP standards](./benefits-lukso-standards.md).
+- scripts to deploy and verify contracts on the network.
+
+
+
+
+
+
+
+
diff --git a/docs/learn/learn.module.scss b/docs/learn/learn.module.scss
new file mode 100644
index 0000000000..bbe3752486
--- /dev/null
+++ b/docs/learn/learn.module.scss
@@ -0,0 +1,19 @@
+// ideally these styles should be moved to the component level (since the component is used in the markdown file)
+.containerQuickstartCards {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+
+ a p {
+ margin: 0;
+ }
+}
+
+.containerDeployProfiles {
+ display: flex;
+ flex-wrap: no-wrap;
+
+ @media (max-width: 768px) {
+ flex-wrap: wrap;
+ }
+}
diff --git a/docs/learn/migrate/migrate-erc20-to-lsp7.md b/docs/learn/migrate/migrate-erc20-to-lsp7.md
index e4affb74dd..bd67aecaab 100644
--- a/docs/learn/migrate/migrate-erc20-to-lsp7.md
+++ b/docs/learn/migrate/migrate-erc20-to-lsp7.md
@@ -245,9 +245,9 @@ const symbol = ethers.toUtf8String(symbolValue); // UP725
+
+| π **Universal Profiles** π | -πͺ **Tokens** πͺ | -π **NFTs** π | -
|---|---|---|
| - Smart contract based profiles are the essential foundation for a better - web3 experience. - | -- Extensible Token that move us beyond DeFi. The future of blockchain is - social. - | -- Flexible NFTs that are extensible and directly composable with Universal - Profiles. - | -
|
-
-
- |
-
-
-
- |
-
-
-
- |
-
[π©βπ€ Standardised On-Chain profile](/standards/metadata/lsp3-profile-metadata.md)Users can build their profiles on-chain, adding images, tags, descriptions and links to their accounts to shape their online persona.Standardizing accounts prevents delays in adoption caused by unpredictable changes. It ensures all developers follow a unified behavior, enabling consistent and reliable development on top of the account. |
- [π Updatable and flexible metadata](/standards/metadata/lsp2-json-schema.md)Metadata can be updated, enabling dynamic NFTs that can change certain properties over time, while other properties remain immutable. |
-
[π’ Notifications and Reactability](/standards/accounts/lsp1-universal-receiver.md)The ability to be notified and react on different actions is essential for an account to become more interactive and social by emitting a unique event to the network with the action being informed about, which can be parsed by interfaces and off chain clients. |
- [β½οΈ Gasless experience](./concepts.md#transaction-relay-service)Universal Profiles support Transaction Relay Services that cover the gas for users's transactions. Users won't have the burden of getting the native token of the chain to start interacting with your application. |
-
[π« Extend your account over time](/standards/accounts/lsp17-contract-extension.md)Users can extend their account over time seamlessly, with no need to alter code and redeploy the associated smart contract. |
- [π Upgradeable security](/standards/access-control/lsp6-key-manager)Universal Profiles can be owned by any EOA or smart contract (_e.g: multisig_). And users can control their accounts through multiple devices and applications, each of them with different permissions.This also allow the creation of services like social recovery, through family, friends or trustless dApps. |
-
[π¦ Permission System](../learn/universal-profile/key-manager/grant-permissions.md)A robust permission system allows fine-grained control over who can perform certain actions on the contract.This is essential for managing access rights and maintaining security, especially in complex systems with multiple users or roles while having the permissions and restrictions stored within the profile. |
- [βοΈ βοΈMulti Sig](../learn/universal-profile/key-manager/grant-permissions.md)The use of multisig provide an extra layer of security to manage the account. |
-
[πͺ Pre and Post Execution Hooks](/standards/tokens/LSP7-Digital-Asset#lsp1-token-hooks)These hooks allow additional logic to be executed before and after the main function call. This feature, available through LSP20 in Universal Profiles, provides greater control over contract behavior and enables advanced use cases. |
- π¨ππͺ Multi-purposeThe ability to serve various roles (like being a DAO, organization, Brands, AI, robot, etc.) showcases the versatility of the contract. This flexibility is important for supporting a wide range of applications and adapting to different use cases. |
-
+
+
+
+
+
+
+
+
+
+## What makes LUKSO unique?
+
+-
+
- Discover the main building blocks of LUKSO +
- Learn the benefits of using the LUKSO Standards +
- Deep dive into the specs of the LSPs +
-
+
- Connect your wallet to the LUKSO Mainnet +
- Run a LUKSO node +
- Become a Validator +
| π **Universal Profiles** π | +πͺ **Tokens** πͺ | +π **NFTs** π | +
|---|---|---|
| + Smart contract based profiles are the essential foundation for a better + web3 experience. + | ++ Extensible Token that move us beyond DeFi. The future of blockchain is + social. + | ++ Flexible NFTs that are extensible and directly composable with Universal + Profiles. + | +
|
+
+
+ |
+
+
+
+ |
+
+
+
+ |
+
+ + [π©βπ€ Standardised On-Chain + profile](/standards/metadata/lsp3-profile-metadata.md) ++ Users can build their profiles on-chain, adding images, tags, descriptions + and links to their accounts to shape their online persona.{' '} + Standardizing accounts prevents delays in adoption caused by unpredictable + changes. It ensures all developers follow a unified behavior, enabling + consistent and reliable development on top of the account.{' '} + |
+
+ + [π Updatable and flexible + metadata](/standards/metadata/lsp2-json-schema.md) ++ Metadata can be updated, enabling dynamic NFTs that can change certain + properties over time, while other properties remain immutable. + |
+
+ + [π’ Notifications and + Reactability](/standards/accounts/lsp1-universal-receiver.md) ++ The ability to be notified and react on different actions is essential for + an account to become more interactive and social by emitting a unique + event to the network with the action being informed about, which can be + parsed by interfaces and off chain clients. + |
+
+ [β½οΈ Gasless experience](./concepts.md#transaction-relay-service)+ Universal Profiles support Transaction Relay Services that cover the gas + for users's transactions. Users won't have the burden of getting the + native token of the chain to start interacting with your application. + |
+
+ + [π« Extend your account over + time](/standards/accounts/lsp17-contract-extension.md) ++ Users can extend their account over time seamlessly, with no need to alter + code and redeploy the associated smart contract. + |
+
+ + [π Upgradeable security](/standards/access-control/lsp6-key-manager) ++ Universal Profiles can be owned by any EOA or smart contract (_e.g: + multisig_). And users can control their accounts through multiple devices + and applications, each of them with different permissions. ++ This also allow the creation of services like social recovery, + through family, friends or trustless dApps. + |
+
+ + [π¦ Permission + System](../learn/universal-profile/key-manager/grant-permissions.md) ++ A robust permission system allows fine-grained control over who can + perform certain actions on the contract. +This is essential for managing access rights and maintaining + security, especially in complex systems with multiple users or roles while + having the permissions and restrictions stored within the profile. + |
+
+ + [βοΈ βοΈMulti + Sig](../learn/universal-profile/key-manager/grant-permissions.md) ++ The use of multisig provide an extra layer of security to manage the + account. + |
+
+ + [πͺ Pre and Post Execution + Hooks](/standards/tokens/LSP7-Digital-Asset#lsp1-token-hooks) ++ These hooks allow additional logic to be executed before and after the + main function call. This feature, available through LSP20 in Universal + Profiles, provides greater control over contract behavior and enables + advanced use cases. + |
+
+ π¨ππͺ Multi-purposeThe ability to serve various roles (like being + a DAO, organization, Brands, AI, robot, etc.) showcases the versatility of + the contract. This flexibility is important for supporting a wide range of + applications and adapting to different use cases. + |
+
@@ -15,11 +21,11 @@ import TabItem from '@theme/TabItem';
:::success Relayer API
-Want to easily deploy a Universal Profile using our Developer Relayer API? See the [**Relayer Developer Access**](../../tools/services/relayer-developer.md) page.
+Want to easily deploy a Universal Profile using our Developer Relayer API? See the [**Relayer Developer Access**](../../tools/apis/relayer-api.md) page.
:::
-This standard is the off-chain API that any transaction relay service can implement to be compatible with the [Universal Profile controller apps](/install-up-browser-extension). See [the `up_addTransactionRelayer` RPC endpoint](../../tools/services/rpc-api#up_addTransactionRelayer) for more.
+This standard is the off-chain API that any transaction relay service can implement to be compatible with the [Universal Profile controller apps](/install-up-browser-extension). See [the `up_addTransactionRelayer` RPC endpoint](../../tools/apis/up-rpc-api#up_addTransactionRelayer) for more.
To learn how to sign a transaction relay message see [LSP25 Execute Relay Call](./lsp25-execute-relay-call.md).
@@ -148,5 +154,4 @@ Quota systems could also use a Pay As You Go model, in which case totalQuota and
## Resources
-- [LSP-15-TransactionRelayerAPI (GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-15-TransactionRelayServiceAPI.md)
- [Mock relayer repository (GitHub)](https://github.com/lukso-network/tools-mock-relayer)
diff --git a/docs/standards/accounts/lsp17-contract-extension.md b/docs/standards/accounts/lsp17-contract-extension.md
index dcd0ddb5d0..617dc75570 100644
--- a/docs/standards/accounts/lsp17-contract-extension.md
+++ b/docs/standards/accounts/lsp17-contract-extension.md
@@ -6,7 +6,7 @@ description: LUKSO's LSP17 - Contract Extension for enabling smart contracts to
# LSP17 - Contract Extension
-:::info Standard Document
+:::info Standard Specification
[LSP17 - Contract Extension](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-17-ContractExtension.md)
@@ -46,7 +46,9 @@ As shown in the figure above, smart contract B **changed the extension** of the
This system of extensions allows for a smart contract to evolve and adapt to changes that may arise in the future. By implementing this system, smart contracts can become more versatile and capable of supporting a broader range of functionalities, even after deployment.
-### Specification
+## Specification
+
+### Extendable vs Extension contracts
This standard defines two types of contracts:
@@ -82,7 +84,7 @@ As the extensions are called using the **CALL** opcode not **DELEGATECALL**, it'
However, it is important to be aware that **adding random contracts as extensions carelessly** can be problematic as the extensions will have the extendable contract as their caller (`msg.sender`), which can lead to impersonating the extendable contract in certain situations.
-### Example
+## Example
A decentralized exchange cannot accept safe ERC721 or ERC1155 transfers unless it implements specific functions with specific return values. This ensures that the contract knows how to handle these tokens, thus making the transfer safe.
diff --git a/docs/standards/accounts/lsp20-call-verification.md b/docs/standards/accounts/lsp20-call-verification.md
index d5b85ced27..16a9b77825 100644
--- a/docs/standards/accounts/lsp20-call-verification.md
+++ b/docs/standards/accounts/lsp20-call-verification.md
@@ -6,7 +6,7 @@ description: LUKSO's LSP20 - Call Verification for delegating the the verificati
# LSP20 - Call Verification
-:::info Standard Document
+:::info Standard Specification
[LSP20 - Call Verification](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-20-CallVerification.md)
diff --git a/docs/standards/accounts/lsp26-follower-system.md b/docs/standards/accounts/lsp26-follower-system.md
index bf1f9923c4..f3b51eda41 100644
--- a/docs/standards/accounts/lsp26-follower-system.md
+++ b/docs/standards/accounts/lsp26-follower-system.md
@@ -7,7 +7,7 @@ description: LUKSO's LSP26 Follower System for managing on-chain following relat
# LSP26 - Follower System
-:::info Standard Document
+:::info Standard Specification
[LSP26 - Follower System](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-26-FollowerSystem.md)
diff --git a/docs/standards/accounts/lsp9-vault.md b/docs/standards/accounts/lsp9-vault.md
index e52945c6ef..e8e0c0bdca 100644
--- a/docs/standards/accounts/lsp9-vault.md
+++ b/docs/standards/accounts/lsp9-vault.md
@@ -6,7 +6,7 @@ description: LUKSO LSP9 - Vault for holding assets and interacting with other sm
# LSP9 - Vault
-:::info Standard Document
+:::info Standard Specification
[LSP9 - Vault](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-9-Vault.md)
@@ -24,6 +24,8 @@ This standard defines a vault that can hold assets and interact with other contr
This standard uses the **[ERC173](https://eips.ethereum.org/EIPS/eip-173)** standard to provide ownership functions for owning and controlling the implementation contract.
+## Specification
+
### ERC725X - Generic Executor
This substandard enables the vault to execute a call on any other smart contracts, transfer the blockchain's native token, or deploy a new smart contract. Only the owner can perform these operations below.
diff --git a/docs/standards/discord-logo.png b/docs/standards/discord-logo.png
deleted file mode 100644
index 2a2d702c14..0000000000
Binary files a/docs/standards/discord-logo.png and /dev/null differ
diff --git a/docs/standards/erc725.md b/docs/standards/erc725.md
index 3ca6adcf15..be98b869a2 100644
--- a/docs/standards/erc725.md
+++ b/docs/standards/erc725.md
@@ -5,7 +5,7 @@ description: 'ERC725X operations: call, create, create2, staticcall, delegatecal
# ERC725
-:::info Standard Document
+:::info Standard Specification
[ERC725 - General Executor and Data Key/Value Store](https://github.com/ERC725Alliance/ERC725/blob/develop/docs/ERC-725.md)
diff --git a/docs/standards/factories/lsp16-universal-factory.md b/docs/standards/factories/lsp16-universal-factory.md
index 3e7555039c..3d904138aa 100644
--- a/docs/standards/factories/lsp16-universal-factory.md
+++ b/docs/standards/factories/lsp16-universal-factory.md
@@ -6,7 +6,7 @@ description: LUKSO's LSP16 - Universal Factory for deploying the same smart cont
# LSP16 - Universal Factory
-:::info Standard Document
+:::info Standard Specification
[LSP16 - Universal Factory](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-16-UniversalFactory.md)
@@ -41,7 +41,7 @@ This standard defines a contract called **Universal Factory** which provide a wa
This multi-chain compatibility eliminates the **risk of asset loss** due to mismatched contracts and addresses. Further, it opens up the possibility of establishing a kind of multi-chain identity, which is particularly beneficial for factory, registry, and account-based contracts.
-### Specification
+## Specification
:::tip
@@ -63,7 +63,7 @@ For a contract to be replicated at the same address across different chain, it s
- Salt
- Initialization Data (If the contract is initializable)
-### Example
+## Example
Suppose Alice wants to deploy a **UniversalProfile** on **LUKSO Mainnet** owned by her EOA. If she deploys the UniversalProfile using the UniversalFactory on LUKSO, she can later deploy the same UniversalProfile owned by her EOA on **Ethereum Mainnet** using the UniversalFactory with **producing the same address**.
diff --git a/docs/standards/factories/lsp23-linked-contracts-factory.md b/docs/standards/factories/lsp23-linked-contracts-factory.md
index bab9a2cb7b..c3322d4b08 100644
--- a/docs/standards/factories/lsp23-linked-contracts-factory.md
+++ b/docs/standards/factories/lsp23-linked-contracts-factory.md
@@ -6,7 +6,7 @@ description: LUKSO's LSP23 Linked Contracts Factory to allow the deployment of p
# LSP23 Linked Contracts Factory
-:::info Standard Document
+:::info Standard Specification
[LSP23 - Linked Contracts Factory](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-23-LinkedContractsFactory.md)
diff --git a/docs/standards/introduction.md b/docs/standards/introduction.md
index 03356eeaca..018bc83aad 100644
--- a/docs/standards/introduction.md
+++ b/docs/standards/introduction.md
@@ -39,20 +39,6 @@ The **[default implementation of these standards in Solidity](../contracts/intro
> See the [Contracts](../contracts/introduction.md) section for the Solidity implementation of these standards and their ABI docs.
-:::info Questions? Want to learn more?
-
-
Informs about the data set by default on the contract and which data keys to query to retrieve such data | [LSP3-Profile-Metadata](./metadata/lsp3-profile-metadata.md)
[LSP4-DigitalAsset-Metadata](./tokens/LSP4-Digital-Asset-Metadata.md)
[LSP10ReceivedVaults](./metadata/lsp10-received-vaults.md) |  - -## Interface Checks - -:::tip - -See the **[LSP Detection Guide](../learn/standard-detection.md)** to lean how to check standardized metadata storage and interfaces. - -::: diff --git a/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md b/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md index a5728da5e4..e9d76db520 100644 --- a/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md +++ b/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md @@ -6,7 +6,7 @@ description: LUKSO LSP4 - Digital Asset Metadata for defining data keys to descr # LSP4 - Digital Asset Metadata -:::info Standard Document +:::info Standard Specification [LSP4 - Digital Asset Metadata](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-4-DigitalAsset-Metadata.md) @@ -211,7 +211,3 @@ This data key refers to the **address(es)** of the **creator(s)** of the digital "valueContent": "(Bytes4,Number)" } ``` - -## References - -- [LUKSO Standards Proposals: LSP4 - Digital Asset Metadata (Standard Specification, GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-4-DigitalAsset-Metadata.md) diff --git a/docs/standards/tokens/LSP7-Digital-Asset.md b/docs/standards/tokens/LSP7-Digital-Asset.md index 1f0a6ffc33..656b5f44a7 100644 --- a/docs/standards/tokens/LSP7-Digital-Asset.md +++ b/docs/standards/tokens/LSP7-Digital-Asset.md @@ -6,7 +6,7 @@ description: LUKSO LSP7 - Digital Asset for fungible assets. # LSP7 - Digital Asset -:::info Standard Document +:::info Standard Specification [LSP7 - Digital Asset](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-7-DigitalAsset.md) @@ -24,9 +24,7 @@ Fungible assets such as **[ERC20](https://eips.ethereum.org/EIPS/eip-20)**, **[E  -## What does this Standard represent? - -### Specification +## Specification **[LSP7-DigitalAsset](../../standards/tokens/LSP7-Digital-Asset.md)** is a standard that aims to describe fungible assets. The term _fungible_ means that these assets are **mutually interchangeable** (*e.g., *one token has the same value as another token). @@ -112,7 +110,3 @@ To ensure a **safe asset transfer**, an additional boolean parameter was added t  Implementing the **[LSP1-UniversalReceiver](../accounts/lsp1-universal-receiver.md)** standard will give a sign that the contract knows how to handle the tokens received. - -## References - -- [LUKSO Standards Proposals: LSP7 - Digital Asset (Standard Specification, GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-7-DigitalAsset.md) diff --git a/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md b/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md index b9b61af08c..41a467de12 100644 --- a/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md +++ b/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md @@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem'; # LSP8 - Identifiable Digital Asset -:::info Standard Document +:::info Standard Specification [LSP8 - Identifiable Digital Asset](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-8-IdentifiableDigitalAsset.md) @@ -28,8 +28,6 @@ Non-Fungible assets such as **[ERC721](https://eips.ethereum.org/EIPS/eip-721)**  -## What does this Standard represent? - ### Specification **[LSP8-IdentifiableDigitalAsset](../../standards/tokens/LSP8-Identifiable-Digital-Asset.md)** is a standard that aims to describe _non-fungible_ assets. The term _Non-fungible_ means that each asset is **unique and different**. They are distinguishable from each other and therefore **not interchangeable**. @@ -170,7 +168,3 @@ The LSP8 standard offers ways to set metadata for the whole LSP8 collection as w - The generic metadata and information related to the whole LSP8 collection can be updated using [`setData(bytes32,bytes)`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdata) or [`setDataBatch(bytes[],bytes[])`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdatabatch), passing the `bytes32` data key of [`LSP4Metadata`](./LSP4-Digital-Asset-Metadata.md#lsp4metadata) as the first argument. - Alternatively, the generic information and metadata specific to a `tokenId` can be set using the [`setDataForTokenId`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdatafortokenid) or [`setDataBatchForTokenIds(bytes32[],bytes32[],bytes[])`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdatabatchfortokenids) functions. - -## References - -- [LUKSO Standards Proposals: LSP8 - Identifiable Digital Asset (Standard Specification, GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-8-IdentifiableDigitalAsset.md) diff --git a/docs/tools/services/_category_.yml b/docs/tools/apis/_category_.yml similarity index 100% rename from docs/tools/services/_category_.yml rename to docs/tools/apis/_category_.yml diff --git a/docs/tools/services/indexer.md b/docs/tools/apis/indexer-api.md similarity index 94% rename from docs/tools/services/indexer.md rename to docs/tools/apis/indexer-api.md index 49d29d02c0..f11863a338 100644 --- a/docs/tools/services/indexer.md +++ b/docs/tools/apis/indexer-api.md @@ -1,13 +1,13 @@ --- -title: π Indexer API -sidebar_position: 1 +title: π Indexer API +sidebar_position: 2 --- # Indexer API :::info π Private Beta access -This feature is currently in private beta. If you are interested, please [contact us](https://forms.gle/rhWA25m3jjuPNPva9). +This feature is currently in private beta. If you are interested, please [fill in this form](https://forms.gle/rhWA25m3jjuPNPva9). ::: diff --git a/docs/tools/services/relayer-developer.md b/docs/tools/apis/relayer-api.md similarity index 99% rename from docs/tools/services/relayer-developer.md rename to docs/tools/apis/relayer-api.md index 8e53c60ada..e8b0a0ea85 100644 --- a/docs/tools/services/relayer-developer.md +++ b/docs/tools/apis/relayer-api.md @@ -1,6 +1,6 @@ --- title: β½οΈ Relayer API -sidebar_position: 2 +sidebar_position: 1 --- # Relayer API diff --git a/docs/tools/services/rpc-api.md b/docs/tools/apis/up-rpc-api.md similarity index 99% rename from docs/tools/services/rpc-api.md rename to docs/tools/apis/up-rpc-api.md index b72dc644a0..d84b39f0a9 100644 --- a/docs/tools/services/rpc-api.md +++ b/docs/tools/apis/up-rpc-api.md @@ -1,6 +1,7 @@ --- title: π RPC API description: LUKSO's RPC API supported methods. +sidebar_position: 3 --- # π RPC API diff --git a/docs/tools/dapps/_category_.yml b/docs/tools/dapps/_category_.yml new file mode 100644 index 0000000000..b4c911962f --- /dev/null +++ b/docs/tools/dapps/_category_.yml @@ -0,0 +1,3 @@ +label: 'π οΈ Javascript libraries' +collapsed: false +position: 3 diff --git a/docs/tools/libraries/eip191-signerjs/Classes/EIP191Signer.md b/docs/tools/dapps/eip191-signerjs/Classes/EIP191Signer.md similarity index 100% rename from docs/tools/libraries/eip191-signerjs/Classes/EIP191Signer.md rename to docs/tools/dapps/eip191-signerjs/Classes/EIP191Signer.md diff --git a/docs/tools/libraries/eip191-signerjs/Classes/_category_.yml b/docs/tools/dapps/eip191-signerjs/Classes/_category_.yml similarity index 100% rename from docs/tools/libraries/eip191-signerjs/Classes/_category_.yml rename to docs/tools/dapps/eip191-signerjs/Classes/_category_.yml diff --git a/docs/tools/libraries/eip191-signerjs/_category_.yml b/docs/tools/dapps/eip191-signerjs/_category_.yml similarity index 100% rename from docs/tools/libraries/eip191-signerjs/_category_.yml rename to docs/tools/dapps/eip191-signerjs/_category_.yml diff --git a/docs/tools/libraries/eip191-signerjs/getting-started.md b/docs/tools/dapps/eip191-signerjs/getting-started.md similarity index 100% rename from docs/tools/libraries/eip191-signerjs/getting-started.md rename to docs/tools/dapps/eip191-signerjs/getting-started.md diff --git a/docs/tools/libraries/erc725js/_category_.yml b/docs/tools/dapps/erc725js/_category_.yml similarity index 100% rename from docs/tools/libraries/erc725js/_category_.yml rename to docs/tools/dapps/erc725js/_category_.yml diff --git a/docs/tools/libraries/erc725js/getting-started.md b/docs/tools/dapps/erc725js/getting-started.md similarity index 100% rename from docs/tools/libraries/erc725js/getting-started.md rename to docs/tools/dapps/erc725js/getting-started.md diff --git a/docs/tools/libraries/erc725js/methods.md b/docs/tools/dapps/erc725js/methods.md similarity index 100% rename from docs/tools/libraries/erc725js/methods.md rename to docs/tools/dapps/erc725js/methods.md diff --git a/docs/tools/libraries/erc725js/providers.md b/docs/tools/dapps/erc725js/providers.md similarity index 100% rename from docs/tools/libraries/erc725js/providers.md rename to docs/tools/dapps/erc725js/providers.md diff --git a/docs/tools/libraries/erc725js/schemas.md b/docs/tools/dapps/erc725js/schemas.md similarity index 100% rename from docs/tools/libraries/erc725js/schemas.md rename to docs/tools/dapps/erc725js/schemas.md diff --git a/docs/tools/dapps/lsp-factoryjs/_category_.yml b/docs/tools/dapps/lsp-factoryjs/_category_.yml new file mode 100644 index 0000000000..28da802f58 --- /dev/null +++ b/docs/tools/dapps/lsp-factoryjs/_category_.yml @@ -0,0 +1,3 @@ +label: 'π lsp-factory.js (deprecated)' +collapsed: true +position: 5 diff --git a/docs/tools/libraries/lsp-factoryjs/getting-started.md b/docs/tools/dapps/lsp-factoryjs/getting-started.md similarity index 100% rename from docs/tools/libraries/lsp-factoryjs/getting-started.md rename to docs/tools/dapps/lsp-factoryjs/getting-started.md diff --git a/docs/tools/libraries/lsp-utils/IPFS.md b/docs/tools/dapps/lsp-utils/IPFS.md similarity index 100% rename from docs/tools/libraries/lsp-utils/IPFS.md rename to docs/tools/dapps/lsp-utils/IPFS.md diff --git a/docs/tools/libraries/lsp-utils/LSP12IssuedAssets.md b/docs/tools/dapps/lsp-utils/LSP12IssuedAssets.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP12IssuedAssets.md rename to docs/tools/dapps/lsp-utils/LSP12IssuedAssets.md diff --git a/docs/tools/libraries/lsp-utils/LSP23LinkedContractsFactory.md b/docs/tools/dapps/lsp-utils/LSP23LinkedContractsFactory.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP23LinkedContractsFactory.md rename to docs/tools/dapps/lsp-utils/LSP23LinkedContractsFactory.md diff --git a/docs/tools/libraries/lsp-utils/LSP2ERC725YJSONSchema.md b/docs/tools/dapps/lsp-utils/LSP2ERC725YJSONSchema.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP2ERC725YJSONSchema.md rename to docs/tools/dapps/lsp-utils/LSP2ERC725YJSONSchema.md diff --git a/docs/tools/libraries/lsp-utils/LSP3ProfileMetadata.md b/docs/tools/dapps/lsp-utils/LSP3ProfileMetadata.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP3ProfileMetadata.md rename to docs/tools/dapps/lsp-utils/LSP3ProfileMetadata.md diff --git a/docs/tools/libraries/lsp-utils/LSP4DigitalAssetMetadata.md b/docs/tools/dapps/lsp-utils/LSP4DigitalAssetMetadata.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP4DigitalAssetMetadata.md rename to docs/tools/dapps/lsp-utils/LSP4DigitalAssetMetadata.md diff --git a/docs/tools/libraries/lsp-utils/LSP5ReceivedAssets.md b/docs/tools/dapps/lsp-utils/LSP5ReceivedAssets.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP5ReceivedAssets.md rename to docs/tools/dapps/lsp-utils/LSP5ReceivedAssets.md diff --git a/docs/tools/libraries/lsp-utils/LSP6KeyManager.md b/docs/tools/dapps/lsp-utils/LSP6KeyManager.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP6KeyManager.md rename to docs/tools/dapps/lsp-utils/LSP6KeyManager.md diff --git a/docs/tools/libraries/lsp-utils/_category_.yml b/docs/tools/dapps/lsp-utils/_category_.yml similarity index 100% rename from docs/tools/libraries/lsp-utils/_category_.yml rename to docs/tools/dapps/lsp-utils/_category_.yml diff --git a/docs/tools/libraries/lsp-utils/getting-started.md b/docs/tools/dapps/lsp-utils/getting-started.md similarity index 100% rename from docs/tools/libraries/lsp-utils/getting-started.md rename to docs/tools/dapps/lsp-utils/getting-started.md diff --git a/docs/tools/docker-factory.md b/docs/tools/docker-factory.md index 698203f42c..84198e0519 100644 --- a/docs/tools/docker-factory.md +++ b/docs/tools/docker-factory.md @@ -1,6 +1,6 @@ --- title: π Node Docker Factory -sidebar_position: 6 +sidebar_position: 7 --- # Node Docker Factory diff --git a/docs/tools/erc725-tools.md b/docs/tools/explorers-debuggers.md similarity index 98% rename from docs/tools/erc725-tools.md rename to docs/tools/explorers-debuggers.md index de9f9e5040..d88eb86fc3 100644 --- a/docs/tools/erc725-tools.md +++ b/docs/tools/explorers-debuggers.md @@ -1,6 +1,6 @@ --- title: π Explorers & Debug Tools -sidebar_position: 4 +sidebar_position: 6 --- # π Explorers & Debug Tools diff --git a/docs/tools/index.mdx b/docs/tools/index.mdx new file mode 100644 index 0000000000..df8bd9e83e --- /dev/null +++ b/docs/tools/index.mdx @@ -0,0 +1,438 @@ +--- +id: tools +title: Tools +sidebar_position: 1 +--- + +import ReferenceCard from '@site/src/components/ReferenceCard'; +import CodeBlock from '@theme/CodeBlock'; + +import styles from './tools.module.scss'; + +import SolidityLogo from '@site/static/img/tools/solidity-logo.png'; +import FoundryLogo from '@site/static/img/tools/foundry-logo.png'; +import EnvioLogo from '@site/static/img/tools/envio_logo.png'; +import API3Logo from '@site/static/img/tools/api3-logo.png'; +import DIALogo from '@site/static/img/tools/dia_logo.png'; +import DappnodeLogo from '@site/static/img/tools/dappnode_logo.png'; + +# Tools + +Explore the different tools available for developers to build dApps, smart contracts and protocols more easily on LUKSO. + +## APIs + +
+ +## Javascript libraries + +
+ +## Smart Contracts + +
+ +## Explorers & Debuggers + +
-
diff --git a/docs/tools/libraries/lsp-factoryjs/_category_.yml b/docs/tools/libraries/lsp-factoryjs/_category_.yml
deleted file mode 100644
index b039ca716b..0000000000
--- a/docs/tools/libraries/lsp-factoryjs/_category_.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-label: 'π lsp-factory.js'
-collapsed: true
-position: 5
diff --git a/docs/tools/libraries/lsp-smart-contracts/_category_.yml b/docs/tools/libraries/lsp-smart-contracts/_category_.yml
deleted file mode 100644
index 8454fbef5c..0000000000
--- a/docs/tools/libraries/lsp-smart-contracts/_category_.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-label: 'π lsp-smart-contracts'
-collapsed: true
-position: 2
diff --git a/docs/tools/lsp-smart-contracts/_category_.yml b/docs/tools/lsp-smart-contracts/_category_.yml
new file mode 100644
index 0000000000..4df1f33a58
--- /dev/null
+++ b/docs/tools/lsp-smart-contracts/_category_.yml
@@ -0,0 +1,3 @@
+label: 'π Smart Contracts'
+collapsed: true
+position: 4
diff --git a/docs/tools/libraries/lsp-smart-contracts/constants.md b/docs/tools/lsp-smart-contracts/constants.md
similarity index 100%
rename from docs/tools/libraries/lsp-smart-contracts/constants.md
rename to docs/tools/lsp-smart-contracts/constants.md
diff --git a/docs/tools/libraries/lsp-smart-contracts/contracts-abi.md b/docs/tools/lsp-smart-contracts/contracts-abi.md
similarity index 80%
rename from docs/tools/libraries/lsp-smart-contracts/contracts-abi.md
rename to docs/tools/lsp-smart-contracts/contracts-abi.md
index f9e9526755..86a043fc72 100644
--- a/docs/tools/libraries/lsp-smart-contracts/contracts-abi.md
+++ b/docs/tools/lsp-smart-contracts/contracts-abi.md
@@ -4,7 +4,7 @@ sidebar_position: 2
# Contracts ABI
-You can import the [LUKSO smart contracts](../../../contracts/introduction.md) ABIs from the `/artifacts` folder:
+You can import the [LUKSO smart contracts](../../contracts/introduction.md) ABIs from the `/artifacts` folder:
diff --git a/docs/tools/libraries/lsp-smart-contracts/getting-started.md b/docs/tools/lsp-smart-contracts/getting-started.md
similarity index 89%
rename from docs/tools/libraries/lsp-smart-contracts/getting-started.md
rename to docs/tools/lsp-smart-contracts/getting-started.md
index 1c68898f13..128d0aaf1d 100644
--- a/docs/tools/libraries/lsp-smart-contracts/getting-started.md
+++ b/docs/tools/lsp-smart-contracts/getting-started.md
@@ -17,6 +17,6 @@ npm install @lukso/lsp-smart-contracts
:::tip
-You can find more information and examples on our [smart contract implementation page](../../../contracts/introduction.md).
+You can find more information and examples on our [smart contract implementation page](../../contracts/introduction.md).
:::
diff --git a/docs/tools/libraries/lsp-smart-contracts/solidity-contracts.md b/docs/tools/lsp-smart-contracts/solidity-contracts.md
similarity index 67%
rename from docs/tools/libraries/lsp-smart-contracts/solidity-contracts.md
rename to docs/tools/lsp-smart-contracts/solidity-contracts.md
index bae29f031b..1513bfd229 100644
--- a/docs/tools/libraries/lsp-smart-contracts/solidity-contracts.md
+++ b/docs/tools/lsp-smart-contracts/solidity-contracts.md
@@ -4,7 +4,7 @@ sidebar_position: 3
# Solidity Contracts
-The solidity sources of the [LUKSO smart contracts](../../../contracts/introduction.md) are available in the `/contracts` folder.
+The solidity sources of the [LUKSO smart contracts](../../contracts/introduction.md) are available in the `/contracts` folder.
```solidity
import "@lukso/lsp-smart-contracts/contracts/LSP0ERC725Account/LSP0ERC725Account.sol";
diff --git a/docs/tools/tools.module.scss b/docs/tools/tools.module.scss
new file mode 100644
index 0000000000..427cb261e1
--- /dev/null
+++ b/docs/tools/tools.module.scss
@@ -0,0 +1,9 @@
+.referenceCardGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ gap: 1rem;
+
+ @media (max-width: 680px) {
+ grid-template-columns: 1fr; /* Single column on mobile */
+ }
+}
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 0a7e9ec3e1..9ac18080de 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -176,87 +176,71 @@ export default {
},
{
from: '/tools/eip191-signerjs/getting-started',
- to: '/tools/libraries/eip191-signerjs/getting-started',
+ to: '/tools/dapps/eip191-signerjs/getting-started',
},
{
from: '/tools/erc725js/getting-started',
- to: '/tools/libraries/erc725js/getting-started',
+ to: '/tools/dapps/erc725js/getting-started',
},
{
from: '/tools/erc725js/methods',
- to: '/tools/libraries/erc725js/methods',
+ to: '/tools/dapps/erc725js/methods',
},
{
from: '/tools/erc725js/providers',
- to: '/tools/libraries/erc725js/providers',
+ to: '/tools/dapps/erc725js/providers',
},
{
from: '/tools/erc725js/schemas',
- to: '/tools/libraries/erc725js/schemas',
- },
- {
- from: '/tools/lsp-smart-contracts/constants',
- to: '/tools/libraries/lsp-smart-contracts/constants',
- },
- {
- from: '/tools/lsp-smart-contracts/contracts-abi',
- to: '/tools/libraries/lsp-smart-contracts/contracts-abi',
- },
- {
- from: '/tools/lsp-smart-contracts/getting-started',
- to: '/tools/libraries/lsp-smart-contracts/getting-started',
- },
- {
- from: '/tools/lsp-smart-contracts/solidity-contracts',
- to: '/tools/libraries/lsp-smart-contracts/solidity-contracts',
+ to: '/tools/dapps/erc725js/schemas',
},
{
from: '/tools/lsp-utils/getting-started',
- to: '/tools/libraries/lsp-utils/getting-started',
+ to: '/tools/dapps/lsp-utils/getting-started',
},
{
from: '/tools/lsp-utils/IPFS',
- to: '/tools/libraries/lsp-utils/IPFS',
+ to: '/tools/dapps/lsp-utils/IPFS',
},
{
from: '/tools/lsp-utils/LSP3ProfileMetadata',
- to: '/tools/libraries/lsp-utils/LSP3ProfileMetadata',
+ to: '/tools/dapps/lsp-utils/LSP3ProfileMetadata',
},
{
from: '/tools/lsp-utils/LSP4DigitalAssetMetadata',
- to: '/tools/libraries/lsp-utils/LSP4DigitalAssetMetadata',
+ to: '/tools/dapps/lsp-utils/LSP4DigitalAssetMetadata',
},
{
from: '/tools/lsp-utils/LSP5ReceivedAssets',
- to: '/tools/libraries/lsp-utils/LSP5ReceivedAssets',
+ to: '/tools/dapps/lsp-utils/LSP5ReceivedAssets',
},
{
from: '/tools/lsp-utils/LSP6KeyManager',
- to: '/tools/libraries/lsp-utils/LSP6KeyManager',
+ to: '/tools/dapps/lsp-utils/LSP6KeyManager',
},
{
from: '/tools/lsp-utils/LSP12IssuedAssets',
- to: '/tools/libraries/lsp-utils/LSP12IssuedAssets',
+ to: '/tools/dapps/lsp-utils/LSP12IssuedAssets',
},
{
from: '/tools/lsp-utils/LSP23LinkedContractsFactory',
- to: '/tools/libraries/lsp-utils/LSP23LinkedContractsFactory',
+ to: '/tools/dapps/lsp-utils/LSP23LinkedContractsFactory',
},
{
from: '/tools/rpc-api',
- to: '/tools/services/rpc-api',
+ to: '/tools/apis/up-rpc-api',
},
{
- from: '/tools/getting-started',
- to: '/tools/libraries/getting-started',
+ from: '/tools/libraries/getting-started', // tools path before re-branding
+ to: '/tools',
},
{
from: '/tools/indexer',
- to: '/tools/services/indexer',
+ to: '/tools/apis/indexer-api',
},
{
from: '/tools/relayer-developer',
- to: '/tools/services/relayer-developer',
+ to: '/tools/apis/relayer-api',
},
// lsp-factory deprecation
@@ -270,23 +254,23 @@ export default {
},
{
from: '/tools/lsp-factoryjs/getting-started',
- to: '/tools/libraries/lsp-factoryjs/getting-started',
+ to: '/tools/dapps/lsp-factoryjs/getting-started',
},
{
from: '/tools/lsp-factoryjs/classes/universal-profile',
- to: '/tools/libraries/lsp-factoryjs/getting-started',
+ to: '/tools/dapps/lsp-factoryjs/getting-started',
},
{
from: '/tools/lsp-factoryjs/classes/lsp4-digital-asset-metadata',
- to: '/tools/libraries/lsp-factoryjs/getting-started',
+ to: '/tools/dapps/lsp-factoryjs/getting-started',
},
{
from: '/tools/lsp-factoryjs/classes/lsp7-digital-asset',
- to: '/tools/libraries/lsp-factoryjs/getting-started',
+ to: '/tools/dapps/lsp-factoryjs/getting-started',
},
{
from: '/tools/lsp-factoryjs/classes/lsp8-identifiable-digital-asset',
- to: '/tools/libraries/lsp-factoryjs/getting-started',
+ to: '/tools/dapps/lsp-factoryjs/getting-started',
},
{
from: '/learn/expert-guides/universal-profile/deploy-universal-profile',
@@ -385,13 +369,13 @@ export default {
items: [
{
type: 'doc',
- docId: 'learn/getting-started',
+ docId: 'learn/overview',
position: 'left',
label: 'Learn',
},
{
type: 'doc',
- docId: 'tools/libraries/getting-started',
+ docId: 'tools/tools',
position: 'left',
label: 'Tools',
},
@@ -423,11 +407,11 @@ export default {
{
to: '/install-up-browser-extension',
position: 'right',
- label: 'π Extension',
+ label: 'π Browser Extension',
},
{
href: 'https://support.lukso.network/contact-us',
- label: 'Contact Us',
+ label: 'Help Center',
position: 'right',
},
{
@@ -435,6 +419,11 @@ export default {
className: 'header-github-link',
position: 'right',
},
+ {
+ href: 'https://discord.com/invite/lukso',
+ className: 'header-discord-link',
+ position: 'right',
+ },
],
},
algolia: {
diff --git a/package.json b/package.json
index 5f10a8f098..f9921be454 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,9 @@
"plugin-image-zoom": "^1.2.0",
"prettier": "^3.3.2",
"prism-react-renderer": "^2.3.1",
- "react": "^18.3.1",
- "react-dom": "^18.3.1",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-material-ui-carousel": "^3.4.2",
"sass": "^1.77.8",
"url-loader": "^4.1.1"
},
diff --git a/src/accordion.js b/src/accordion.js
new file mode 100644
index 0000000000..c6d2b44ae0
--- /dev/null
+++ b/src/accordion.js
@@ -0,0 +1,202 @@
+const accordionData = [
+ {
+ summary: 'General',
+ icon: 'material-symbols:counter-1',
+ details: [
+ {
+ question: 'Why are there new standards on LUKSO?',
+ answer:
+ 'LUKSO introduced new blockchain standards to address issues with existing ERCs, such as token/NFT approval security, limited metadata, lack of interoperability (ERC677, ERC777 and ERC1155 use each different callback hook functions to notify on token transfer), and requiring users to acquire native token upfront to pay for transaction fess (gas). LSP standards include features like universalReceiver (LSP1) for notifications, flexible metadata (ERC725Y), secure permissions management (LSP6 Key Manager), and gasless transactions (LSP25 Execute Relay Call) for easier user onboarding.',
+ link: '/learn/overview#why-new-standards',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'Why is LUKSO a Layer 1 and not a Layer 2?',
+ answer:
+ "LUKSO was created as a Layer 1 to establish its own ecosystem, community, and applications, rather than building on Ethereum's congested standards. Being an EVM-based blockchain (same technology as Ethereum, unmodified), LUKSO supports any Ethereum tools, enabling developers to easily build and port applications between the two networks.",
+ link: '/learn/overview',
+ linkLabel: 'Learn more',
+ },
+ {
+ question:
+ 'What are the advantages of the LUKSO LSP compared to the ERC Standards?',
+ answer:
+ 'The LSP standards offer various advantages for various use cases. This includes storing various form of data on Universal Profiles (e.g: user settings from a dApp, list of received assets, list of creators of a digital asset, followers, etc), sending gas-less transactions, fine-grained permissions management. These allow to build user-centric web3 applications that offer a better experience to users.',
+ link: '/learn/benefits-lukso-standards',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How do LUKSO LSP and Ethereum ERC Standards differ?',
+ answer:
+ 'Compared to the Ethereum ERC Standards, the LUKSO LSP Standards are (1) more secure, (2) more flexible and interoperable, (3) more developer friendly, (4) focused on creating user-centric applications with an improved user experience for getting started interacting with web3.',
+ link: '/learn/benefits-lukso-standards',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'What can be built using the LUKSO LSP Standards?',
+ answer:
+ 'Any form of dApps and protocols can be built using the LUKSO standards! From governance and DAO toolings to Tokens and complex NFT collections as well as recovery services.',
+ },
+ ],
+ },
+ {
+ summary: 'Universal Profiles',
+ icon: 'material-symbols:counter-1',
+ details: [
+ {
+ question: 'How does a profile differ from a wallet?',
+ answer:
+ 'A Universal Profile is a smart account with all the features of a traditional wallet like Metamask, but more user-friendly and designed for non-technical users. It eliminates the need for managing private keys, paying gas, or verifying opaque transactions before confirming them. It also offers advanced features like fine-grained permissions for multi-device control.',
+ link: '/learn/benefits-lukso-standards#universal-profiles-vs-smart-wallets',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How do I connect my dApp to a profile?',
+ answer:
+ 'Like any other web3 wallet using methods like EIP-6963, injected provider or multi-providers). Check our tutorial for details on how to connect a UP to a dApp or using Sign-in with Ethereum.',
+ link: '/learn/universal-profile/connect-profile/connect-up',
+ linkLabel: 'See tutorial',
+ },
+ {
+ question: 'What kind of data can be stored on my profile?',
+ answer:
+ 'A Universal Profile can store unlimited data of any type, such as assets, profile details (biography, profile and cover picture, website and social links), followers, permissions, dApp settings, favorite music, communities and more. You can customize it to store and retrieve anything you could potentially imagine.',
+ },
+ {
+ question: 'How do I read the data from a profile?',
+ answer:
+ 'You can fetch data from a Universal Profile using (a) the getData function on the Universal Profile smart contract and decode the value, or (b) the easier-to-use libraries like erc725.js or lsp-utils.js which will do all the decoding for you.',
+ link: '/learn/universal-profile/metadata/read-profile-data',
+ linkLabel: 'View guide',
+ },
+ {
+ question: 'How do I change permissions on the Universal Profile?',
+ answer:
+ 'Either via (a) the UP Browser extension, (b) a dApp with this functionality, or (c) programmatically via a script (see our guide below).',
+ link: '/learn/universal-profile/key-manager/grant-permissions',
+ linkLabel: 'View guide',
+ },
+ {
+ question: 'How do I send a gasless transaction?',
+ answer:
+ 'If you created your UP via universaleverything.io, the UP in your browser extension automatically allows you to send gas-free transactions. Otherwise, see our relayer API documentation to learn how to send transactions to our relayer who will dispatch the transaction and pay for the gas.',
+ link: '/learn/universal-profile/key-manager/execute-relay-transactions',
+ linkLabel: 'View guide',
+ },
+ {
+ question: 'How can I deploy a Universal Profile?',
+ answer:
+ '3 ways: (1) via the UP Browser Extension (easy πΆοΈ), (2) via the relayer API (intermediate πΆοΈπΆοΈ), (3) or via the LSP23 Universal Factory (advanced πΆοΈπΆοΈπΆοΈ).',
+ link: '/learn/getting-started#building-dapps-for-universal-profiles',
+ linkLabel: 'Learn more',
+ },
+ ],
+ },
+ {
+ summary: 'Tokens & NFTs',
+ icon: 'material-symbols:counter-1',
+ details: [
+ {
+ question: 'How do I transfer a token or NFT?',
+ answer:
+ 'Users can transfer tokens or NFTs using a dApp like universaleverything.io. For developers, call the `transfer` function on the token or NFT contract. Note that since LUKSO is fully EVM-compatible, transferring tokens / NFTs can be done by any wallet connected to the LUKSO network, by interacting with the token contract. It does not necessarily need to be done by a Universal Profile.',
+ link: null,
+ },
+ {
+ question: 'How do I read metadata from a Token or NFT?',
+ answer:
+ 'Either by (1) using the `getData(bytes32)` function with the `LSP4Metadata` data key and decode the result, or (2) use the erc725.js for convenience (will do the decoding for you).',
+ link: '/learn/digital-assets/metadata-management/read-asset-data',
+ linkLabel: 'View guide',
+ },
+ {
+ question: 'How can I edit the metadata of my token after deployment?',
+ answer:
+ 'By calling the `setData(bytes32,bytes)` with `LSP4Metadata` as the data key and the JSON metadata as the hex-encoded value.',
+ link: '/learn/digital-assets/metadata-management/edit-token-metadata',
+ linkLabel: 'View guide',
+ },
+ {
+ question: 'How does LSP7 token standard differ from ERC20?',
+ answer:
+ 'LSP7 (1) supports ERC725Y storage for unlimited metadata, (2) notifies sender and recipient on token transfers, (3) uses a `force` parameter for more secure transfers, and (4) has a `transfer(...)` function signature similar to LSP8 which makes it easier for developer to reason (instead of learning multiple transfer function based on different standards, like ERC20, 721, 1155, etc...).',
+ link: '/learn/benefits-lukso-standards#lsp78-token-standards-vs-erc20721',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How does LSP8 token standard differ from ERC721?',
+ answer:
+ 'LSP8 (1) supports ERC725Y storage for unlimited metadata, (2) notifies sender and recipient on NFT transfers, (3) uses a `force` parameter for more secure transfers, and (4) has a `transfer(...)` function signature similar to LSP7 which makes it easier for developer to reason (instead of learning multiple transfer function based on different standards, like ERC20, 721, 1155, etc...)',
+ link: '/learn/benefits-lukso-standards#lsp78-token-standards-vs-erc20721',
+ linkLabel: 'Learn more',
+ },
+ {
+ question:
+ 'What are the benefits of the LSP7 and LSP8 token standards over the ERC20 / ERC721 standards?',
+ answer:
+ 'LSP7 and LSP8 offer improved features such as (1) unlimited metadata to store any type of information in the token contract, (2) transfer notifications via callback hooks, and (3) a simpler interface for developers. It also includes additional benefits over ERC20/721. See our dedicated page.',
+ link: '/learn/benefits-lukso-standards#lsp78-token-standards-vs-erc20721',
+ linkLabel: 'Learn more',
+ },
+ ],
+ },
+ {
+ summary: 'Network & Validators',
+ icon: 'material-symbols:counter-1',
+ details: [
+ {
+ question: 'What is the RPC endpoint for LUKSO',
+ answer:
+ 'There are multiple RPC endpoints available to connect to the LUKSO network. See our dedicated page for more infos.',
+ link: '/networks/mainnet/parameters',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How to run a LUKSO node?',
+ answer: 'Visit our dedicated page to learn how to run your own node.',
+ link: '/networks/mainnet/running-a-node',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How to run a validator on LUKSO?',
+ answer:
+ 'Visit our dedicated page to learn how to become a validator on LUKSO and start earning staking rewards.',
+ link: '/networks/mainnet/become-a-validator',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How to update your node for the Dencun hardfork?',
+ answer:
+ 'Visit our dedicated page in the docs to learn how to update your node for the Dencun hardfork.',
+ link: '/networks/advanced-guides/update-the-node',
+ linkLabel: 'Learn more',
+ },
+ ],
+ },
+ {
+ summary: 'Wallets & Controller dApps',
+ icon: 'material-symbols:counter-1',
+ details: [
+ {
+ question: 'How do I add LUKSO to my wallet like MetaMask',
+ answer:
+ 'Visit our Networks page and add one of the available LUKSO RPC endpoint, chain ID (42 for Mainnet, 4201 for Testnet) and the Blockscout explorer in your wallet. We also have a one click button to add the network to your wallet.',
+ link: '/networks/mainnet/parameters#add-lukso-to-wallets',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How do I install the Universal Profile Browser Extension',
+ answer: 'Visit our page in the docs to download the π Browser.',
+ link: '/install-up-browser-extension',
+ linkLabel: 'Learn more',
+ },
+ {
+ question: 'How do I install the Universal Profile Mobile App',
+ answer:
+ 'The UP Mobile app is currently in beta and under testing by our beta testers. It will soon be available on the App Store and Google Play Store for the public and will be available for the public to download.',
+ },
+ ],
+ },
+];
+
+export default accordionData;
diff --git a/src/components/Accordion/accordion.module.scss b/src/components/Accordion/accordion.module.scss
new file mode 100644
index 0000000000..92aee19ed2
--- /dev/null
+++ b/src/components/Accordion/accordion.module.scss
@@ -0,0 +1,11 @@
+.innerAccordion {
+ text-align: left;
+ padding: 0;
+}
+.innerAccordionHeading {
+ font-weight: 500;
+}
+
+.innerAccordionContent {
+ padding: 16px;
+}
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
index fe2284d157..0282515b97 100644
--- a/src/components/Accordion/index.tsx
+++ b/src/components/Accordion/index.tsx
@@ -1,32 +1,71 @@
-import * as React from 'react';
+import React from 'react';
+import Link from '@docusaurus/Link';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import styles from './accordion.module.scss';
+
+import { Icon } from '@iconify/react';
+
type AccordionData = {
+ index: number; // index of the accordion line
summary: string; // summary or heading of the accordion line
- details: string; // any html data you want to see appearing in the dropdown.
+ icon: string;
+ details: {
+ question: string;
+ answer: string;
+ link?: string;
+ linkLabel?: string;
+ }[]; // any html data you want to see appearing in the dropdown.
};
-type Props = AccordionData[];
-
-export default function CustomAccordion(accordionData: Props) {
+const CustomAccordion: React.FC = ({
+ summary,
+ icon,
+ details,
+ index,
+}) => {
return (
-
+
+ {' '}
+
+
+
+ {details.length > 0 &&
+ details.map(({ question, answer, link, linkLabel }, index) => {
+ return (
+
+
+
+
+ );
+ })}
+
+
);
-}
+};
+
+export default CustomAccordion;
diff --git a/src/components/AddNetworkButton/AddNetworkButton.module.scss b/src/components/AddNetworkButton/AddNetworkButton.module.scss
index 131d5b67df..c9b13ab98b 100644
--- a/src/components/AddNetworkButton/AddNetworkButton.module.scss
+++ b/src/components/AddNetworkButton/AddNetworkButton.module.scss
@@ -5,7 +5,6 @@
box-sizing: border-box;
border: none;
font-size: 100%;
- font-weight: inherit;
line-height: inherit;
margin: 15px 0px 30px 0px;
text-transform: none;
diff --git a/src/components/AddNetworkButton/index.js b/src/components/AddNetworkButton/index.js
index 6135add86b..442f48dd6d 100644
--- a/src/components/AddNetworkButton/index.js
+++ b/src/components/AddNetworkButton/index.js
@@ -70,7 +70,7 @@ export default function AddNetworkButton({ networkName }) {
return (
);
}
diff --git a/src/components/Box/Box.module.scss b/src/components/Box/Box.module.scss
index b5e474bfd1..a6c577ed0d 100644
--- a/src/components/Box/Box.module.scss
+++ b/src/components/Box/Box.module.scss
@@ -1,39 +1,19 @@
-.card {
- color: var(--ifm-font-color-base);
- width: 100%;
- height: 100%;
- flex-direction: row;
- margin-bottom: 1rem;
+.image {
+ justify-content: center;
- padding: 1rem;
- border-radius: 1.5625rem;
-
- background-color: var(--ifm-background-color);
-
- transition: all 200ms ease-out 10ms;
-
- p {
- margin-bottom: 0;
- line-height: 1.25rem;
- }
-
- a {
- max-width: 100%;
- }
-
- h3 {
- margin-top: -40px;
- }
-
- &:hover {
+ img:hover {
transform: scale(1.05);
+ transition: all 300ms ease-out;
}
}
-.img {
- width: 100%;
- padding-bottom: 100%;
- margin-left: 25px;
- background-size: contain;
- background-repeat: no-repeat;
+.rightBox {
+ display: flex;
+ align-items: center;
+}
+
+.title {
+ @media (max-width: 680px) {
+ font-size: 1.3rem;
+ }
}
diff --git a/src/components/Box/index.js b/src/components/Box/index.js
deleted file mode 100644
index 7329cf58e5..0000000000
--- a/src/components/Box/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import Link from '@docusaurus/Link';
-import styles from './Box.module.scss';
-
-export default function Box({ icon, link, title, content, className }) {
- return (
-
- = ({
+ icon,
+ link,
+ title,
+ content,
+ position = 'right',
+ maxImageWidth = '200px',
+}) => {
+ const alignment = position == 'center' ? 'center' : 'left';
+ const leftPadding = position == 'center' ? '0' : '2.5rem';
+
+ const Image: React.FC = () => (
+ = ({
+ bgColor,
+ color,
+ link,
+ text,
+ icon,
+ newTab,
+}) => (
+ = ({ items }) => {
+ return (
+ = ({ links }) => (
+ = ({
+ name,
+ showAsCode = false,
+ children: description,
+ links,
+}: Props) => {
+ return (
+ = ({ items, isMobile }) => {
+ const Element: React.FC<{ item: Item }> = ({ item }) => (
+
+
+ );
+
+ return (
+
+ {items.map((item, index) => (
+ // 12 columns layout, so `3` as value gives us 4 items per banner
+ // otherwise 1 item per slide for mobile screens
+
+
+ ))}
+
+ );
+};
+
+type SliderProps = {
+ items: Item[];
+};
+
+const Slider: React.FC = ({ items }) => {
+ const itemsPerSlide = 4;
+
+ const chunks = items.reduce((resultArray, _, index) => {
+ const startSlice = index * itemsPerSlide;
+ const endSlice = startSlice + itemsPerSlide;
+
+ if (endSlice > items.length) return resultArray;
+
+ resultArray.push(items.slice(startSlice, endSlice));
+ return resultArray;
+ }, []);
+
+ // Adjust to 1 item per slide for mobile screens
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+ // Group slides dynamically based on screen size
+ const groupedItems = isMobile ? items.map((item) => [item]) : [...chunks];
+
+ return (
+
+ {groupedItems.map((group) => {
+ return
+ );
+};
+
+export default Slider;
diff --git a/src/components/TitleWithSeparator/TitleWithSeparator.module.scss b/src/components/TitleWithSeparator/TitleWithSeparator.module.scss
new file mode 100644
index 0000000000..4ef93c9bbc
--- /dev/null
+++ b/src/components/TitleWithSeparator/TitleWithSeparator.module.scss
@@ -0,0 +1,21 @@
+.titleWithSeparator {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .separator {
+ border: none;
+ border-top: 1px solid #ccc;
+ width: 100%;
+ margin: 1rem 0;
+ }
+
+ .title {
+ margin-block-end: 0.335rem;
+ font-weight: bold;
+
+ @media (max-width: 960px) {
+ font-size: 1.75rem;
+ }
+ }
+}
diff --git a/src/components/TitleWithSeparator/index.tsx b/src/components/TitleWithSeparator/index.tsx
new file mode 100644
index 0000000000..ec6fba006d
--- /dev/null
+++ b/src/components/TitleWithSeparator/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './TitleWithSeparator.module.scss';
+
+type Props = {
+ title: string;
+ children?: React.ReactNode;
+};
+
+export default function TitleWithSeparator({ title, children }: Props) {
+ return (
+
-
-
-
- Item One
-
-
- Item Two
-
-
- Item Three
-
-
- Item Four
-
-
- Item Five
-
-
- Item Six
-
-
- Item Seven
-
-
- );
-}
diff --git a/src/css/custom.css b/src/css/custom.css
index 2f3c25df99..888a7dd5e5 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -9,17 +9,17 @@
/* You can override the default Infima variables here. */
:root {
- --ifm-color-primary: #4467bb;
+ --ifm-color-primary: #6972e1;
--ifm-color-primary-dark: #3d5da8;
--ifm-color-primary-darker: #3a589f;
--ifm-color-primary-darkest: #304883;
- --ifm-color-primary-light: #5776c2;
+ --ifm-color-primary-light: #a4b5ff;
--ifm-color-primary-lighter: #607ec5;
--ifm-color-primary-lightest: #7c95cf;
--ifm-code-font-size: 95%;
- --color-cta-background: #ecf0f3;
- --color-cta-background-blue: #6270a4;
- --ifm-heading-font-family: Apax, sans-serif;
+ --color-cta-background: #6981ec;
+ --color-cta-background-blue: #6981ec;
+ --ifm-heading-font-family: Inter, sans-serif;
--ifm-font-family-base: Inter, sans-serif;
--ifm-heading-font-weight: 400;
--ifm-h2-font-size: 1.5rem;
@@ -100,16 +100,11 @@ html[data-theme='dark'] {
padding-top: 2rem !important;
}
-.header-github-link:hover {
- opacity: 0.6;
-}
-
.header-github-link:before {
content: '';
width: 24px;
height: 24px;
display: flex;
- margin-right: 5px;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}
@@ -119,34 +114,52 @@ html[data-theme='dark'] .header-github-link:before {
no-repeat;
}
-html[data-theme='dark'] .headline {
- background-image: url('../../static/img/icons/ellipse-top-gradient-dark.png');
+.header-github-link:hover {
+ opacity: 0.6;
}
-html[data-theme='dark'] .networks .img {
- background-image: url('../../static/img/icons/icon-networks-gradient-dark.png') !important;
+.header-discord-link:before {
+ content: '';
+ width: 28px;
+ height: 28px;
+ display: flex;
+ margin-top: 5px;
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83A97.68 97.68 0 0 0 49 6.83 72.37 72.37 0 0 0 45.64 0 105.89 105.89 0 0 0 19.39 8.09C2.79 32.65-1.71 56.6.54 80.21h0A105.73 105.73 0 0 0 32.71 96.36a77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1A105.25 105.25 0 0 0 126.6 80.22h0C129.24 52.84 122.09 29.11 107.7 8.07ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.05 12.69-11.44 12.69Z'/%3E%3C/svg%3E")
+ no-repeat;
}
-html[data-theme='dark'] .standards .img {
- background-image: url('../../static/img/icons/icon-guides-dark.png') !important;
+html[data-theme='dark'] .header-discord-link:before {
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='white' d='M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83A97.68 97.68 0 0 0 49 6.83 72.37 72.37 0 0 0 45.64 0 105.89 105.89 0 0 0 19.39 8.09C2.79 32.65-1.71 56.6.54 80.21h0A105.73 105.73 0 0 0 32.71 96.36a77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1A105.25 105.25 0 0 0 126.6 80.22h0C129.24 52.84 122.09 29.11 107.7 8.07ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.05 12.69-11.44 12.69Z'/%3E%3C/svg%3E")
+ no-repeat;
}
-html[data-theme='dark'] .tools .img {
- background-image: url('../../static/img/icons/icon-tools-gradient-dark.png') !important;
+.header-discord-link:hover {
+ opacity: 0.6;
+ fill: #235865f2;
+}
+
+/* TODO: have the same images for dark theme like before? (with `[file-name]-dark.png` */
+
+/* html[data-theme='dark'] .integrations .img {
+ background-image: url('../../static/img/icons/icon-integrations-gradient.png') !important;
}
-html[data-theme='dark'] .integrations .img {
- background-image: url('../../static/img/icons/icon-partners-gradient-dark.png') !important;
+html[data-theme='dark'] .universal-profile .img {
+ background-image: url('../../static/img/icons/icon-universal-profile-gradient-dark.png') !important;
}
-html[data-theme='dark'] .guides .img {
- background-image: url('../../static/img/icons/icon-guides-gradient-dark.png') !important;
+html[data-theme='dark'] .digital-assets .img {
+ background-image: url('../../static/img/icons/icon-digital-assets-dark.png') !important;
}
-html[data-theme='dark'] .faq .img {
- background-image: url('../../static/img/icons/icon-faq-gradient-dark.png') !important;
+html[data-theme='dark'] .networks .img {
+ background-image: url('../../static/img/icons/icon-networks-gradient-dark.png') !important;
}
+html[data-theme='dark'] .tools .img {
+ background-image: url('../../static/img/icons/icon-tools-dark.png') !important;
+} */
+
.discord-logo {
float: left;
}
@@ -179,37 +192,10 @@ html[data-theme='dark'] .faq .img {
font-weight: var(--ifm-font-weight-normal);
}
-@font-face {
- font-family: 'Apax';
- src: url('/static/fonts/Apax-Light.woff2') format('woff2');
- font-weight: 300;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Apax';
- src: url('/static/fonts/Apax-Regular.woff2') format('woff2');
- font-weight: 400;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Apax';
- src: url('/static/fonts/Apax-Medium.woff2') format('woff2');
- font-weight: 500;
- font-style: normal;
-}
-
-@font-face {
- font-family: 'Apax';
- src: url('/static/fonts/Apax-Bold.woff2') format('woff2');
- font-weight: 700;
- font-style: normal;
-}
-
a.imageLink {
display: inline-block;
position: relative;
+ margin-bottom: 0.5rem;
}
a.imageLink img {
@@ -284,15 +270,6 @@ table.lsp-features td {
list-style-type: '\1f517' !important;
}
-div.cardwithimage {
- display: flex;
- flex-direction: row;
- justify-content: space-evenly;
- align-content: center;
- gap: 10px 10px;
- flex-wrap: wrap;
-}
-
.chip-container {
display: flex;
flex-direction: column;
@@ -323,3 +300,11 @@ table#erc721-to-lsp8-table pre {
table#erc721-to-lsp8-table tr {
background-color: transparent;
}
+
+#home-search button.DocSearch.DocSearch-Button {
+ width: 25rem;
+}
+
+footer {
+ margin-top: 3rem;
+}
diff --git a/src/links.js b/src/links.js
new file mode 100644
index 0000000000..2e374b6768
--- /dev/null
+++ b/src/links.js
@@ -0,0 +1,318 @@
+// integration partner images
+import LogoDappNode from '../static/img/tools/dappnode_logo.png';
+import LogoEnvio from '../static/img/tools/envio_logo.png';
+import LogoAPI3 from '../static/img/tools/api3-logo.png';
+import LogoDIA from '../static/img/tools/dia_logo.png';
+import LogoTransak from '../static/img/tools/transak_logo.png';
+import LogoRamp from '../static/img/tools/ramp-network-logo.png';
+
+// dApps images
+import UniversalEverythingLogo from '@site/static/img/dapps/universaleverything-io-logo.png';
+import UniversalSwapsLogo from '@site/static/img/dapps/universalswaps-logo.png';
+import UniversalPageLogo from '@site/static/img/dapps/universalpage-logo.png';
+import StakingverseLogo from '@site/static/img/dapps/stakingverse-logo.png';
+import CommongroundLogo from '@site/static/img/dapps/common-ground-logo.png';
+import DefolioLogo from '@site/static/img/dapps/defolio-logo.png';
+import UFeedLogo from '@site/static/img/dapps/ufeed-logo.png';
+import UpTurnLogo from '@site/static/img/dapps/upturn-logo-scaled.png';
+import LSP8AppLogo from '@site/static/img/dapps/lsp8app-logo.png';
+import FamilyLyxLogo from '@site/static/img/dapps/family-lyx-logo.png';
+import TxCityLogo from '@site/static/img/dapps/txcity-io-logo.webp';
+import TxsAppLogo from '@site/static/img/dapps/txs-app-logo.png';
+
+export const migrateGuides = [
+ {
+ text: 'Discover the benefits of LSPs and Universal Profiles',
+ link: '/learn/benefits-lukso-standards',
+ },
+ {
+ text: 'Integrate Universal Profile in your dApp',
+ link: '/learn/universal-profile/connect-profile/connect-up',
+ },
+ {
+ text: 'Deploy Universal Profiles with the relayer API',
+ link: '/tools/apis/relayer-api#1-deploy-universal-profiles',
+ },
+ {
+ text: 'Convert your ERC20 token to the LSP7 standard',
+ link: '/learn/migrate/migrate-erc20-to-lsp7',
+ },
+ {
+ text: 'Convert your NFT Collection to the LSP8 standard',
+ link: '/learn/migrate/migrate-erc721-to-lsp8',
+ },
+];
+
+export const universalProfileGuides = [
+ {
+ text: "Customize your profile's pictures and infos",
+ link: '/learn/universal-profile/metadata/edit-profile',
+ },
+ {
+ text: 'Learn how to transfer LYX, tokens or NFTs',
+ link: '/learn/universal-profile/universal-receiver/create-receiver-forwarder',
+ },
+ {
+ text: 'Perform multiple actions with batch transactions',
+ link: '/learn/universal-profile/universal-receiver/create-receiver-forwarder',
+ },
+ {
+ text: 'Control your Universal Profile from multiple addresses',
+ link: '/learn/universal-profile/key-manager/grant-permissions',
+ },
+ {
+ text: 'Configure which assets to allow receiving',
+ link: '/learn/universal-profile/universal-receiver/create-receiver-forwarder',
+ },
+];
+
+export const digitalAssetsGuides = [
+ {
+ text: 'Create a fungible token with the LSP7 standard',
+ link: '/learn/digital-assets/token/create-lsp7-token',
+ },
+ {
+ text: 'Create an NFT collection using the LSP8 standard',
+ link: '/learn/digital-assets/nft/create-nft-collection-lsp8',
+ },
+ {
+ text: 'Set the metadata of specific NFTs in a collection',
+ link: '/learn/digital-assets/nft/set-nft-metadata',
+ },
+ {
+ text: 'Create complex collections of sub-collections',
+ link: '/learn/digital-assets/nft/create-nft-collection-with-lsp7-tokenId',
+ },
+ {
+ text: 'Transfer tokens and NFTs in batches for airdrops',
+ link: '/learn/digital-assets/transfer-batch',
+ },
+];
+
+export const networkLinks = [
+ {
+ title: 'Add LUKSO Network to your wallet or dApp',
+ link: '/networks/mainnet/parameters#add-lukso-to-wallets',
+ showAsCode: false,
+ description:
+ 'One-click connect to LUKSO Mainnet or Testnet (see the available RPC endpoints).',
+ },
+ {
+ title: 'Block Explorer',
+ link: '/networks/mainnet/parameters',
+ showAsCode: false,
+ description:
+ 'Browse transactions and interact with contracts on Blockscout.',
+ },
+ {
+ title: 'Running a Node',
+ link: '/networks/mainnet/running-a-node#starting-a-node',
+ showAsCode: false,
+ description:
+ 'Run your own node to make the LUKSO Network secure and decentralized.',
+ },
+ {
+ title: 'Become a Validator',
+ link: '/networks/mainnet/become-a-validator',
+ showAsCode: false,
+ description:
+ 'Run your own validator node and start earning rewards. DappNode available!',
+ },
+];
+
+export const toolsLinks = [
+ {
+ title: 'Relayer API',
+ link: '/tools/apis/relayer-api',
+ showAsCode: false,
+ description:
+ 'Create Universal Profiles easily and get users to benefit from gas less transactions.',
+ },
+ {
+ title: 'Smart Contracts Packages',
+ link: '/contracts/introduction',
+ showAsCode: false,
+ description:
+ 'The smart contract implementation of the LSP standards in Solidity.',
+ },
+ {
+ title: 'erc725.js',
+ link: '/tools/dapps/erc725js/getting-started',
+ showAsCode: true,
+ description:
+ 'Set and retrieve data easily in Universal Profile and Digital Assets.',
+ },
+ {
+ title: 'lsp-utils.js',
+ link: '/tools/dapps/lsp-utils/getting-started',
+ showAsCode: true,
+ description:
+ 'Easy to use helper functions to interact with smart contracts powered by the LSPs.',
+ },
+ {
+ title: 'eip191-signer.js',
+ link: '/tools/dapps/eip191-signerjs/getting-started',
+ showAsCode: true,
+ description:
+ 'Sign data easily to submit gas-less transactions via execute relay calls.',
+ },
+];
+
+export const integrationPartners = [
+ {
+ name: 'DappNode',
+ image: LogoDappNode,
+ url: 'https://universalswaps.io/',
+ backgroundColor: 'white',
+ },
+ {
+ name: 'Envio',
+ image: LogoEnvio,
+ url: 'https://stakingverse.io/',
+ backgroundColor: 'white',
+ },
+
+ {
+ name: 'API3',
+ image: LogoAPI3,
+ url: 'https://lsp8.app/',
+ backgroundColor: 'white',
+ },
+ {
+ name: 'DIA',
+ image: LogoDIA,
+ url: 'https://universal.page/',
+ backgroundColor: 'white',
+ },
+ {
+ name: 'Transak',
+ image: LogoTransak,
+ url: 'https://upturn.live/',
+ backgroundColor: 'white',
+ },
+ {
+ name: 'Ramp',
+ image: LogoRamp,
+ url: 'https://app.cg/',
+ backgroundColor: 'white',
+ },
+];
+
+// image placeholder (uncomment to use)
+// import ImagePlaceholder from '@site/static/img/image-placeholder.jpeg';
+
+// // template (uncomment to use and add it in the list below)
+// {
+// description: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+// image: ImagePlaceholder,
+// backgroundColor: '#fcfcfc',
+// link: 'https://...',
+// },
+export const dappsSlider = [
+ // banner 1 ----------------
+ {
+ name: 'Universal Everything',
+ description: 'Explorer and wallet for Universal Profiles.',
+ image: UniversalEverythingLogo,
+ backgroundColor: '#fcfcfc',
+ link: 'https://universaleverything.io/',
+ },
+ {
+ name: 'Universal Swaps',
+ description: 'Defi made social for swaps and tokens liquidity.',
+ image: UniversalSwapsLogo,
+ backgroundColor: '#fddce7',
+ link: 'https://universalswaps.io/',
+ },
+ {
+ name: 'Universal Page',
+ description: 'NFT marketplace and staking solution on LUKSO.',
+ image: UniversalPageLogo,
+ backgroundColor: '#5049df',
+ link: 'https://universal.page/',
+ },
+ {
+ name: 'Stakingverse',
+ description: 'Stake your LYX and start earning staking rewards.',
+ image: StakingverseLogo,
+ backgroundColor: '#1E1E1E',
+ link: 'https://stakingverse.io/',
+ },
+ // banner 2 ----------------
+ {
+ name: 'Common Ground',
+ description: 'The social app for all web3 communities.',
+ image: CommongroundLogo,
+ backgroundColor: '#404bbb',
+ link: 'https://app.cg/',
+ },
+ {
+ name: 'DeFolio',
+ description: 'Universal Profiles management platform.',
+ image: DefolioLogo,
+ backgroundColor: '#fcfcfc',
+ link: 'https://www.de-folio.com/',
+ },
+ {
+ name: 'UFeed',
+ description: 'Social network and feed on LUKSO',
+ image: UFeedLogo,
+ backgroundColor: '#fcfcfc',
+ link: 'https://ufeed.io/',
+ },
+ {
+ name: 'UP Turn',
+ description: 'Token generator app for digital assets on LUKSO.',
+ image: UpTurnLogo,
+ backgroundColor: 'white',
+ link: 'https://upturn.live/',
+ },
+ // banner 3 ----------------
+ {
+ name: 'LSP8.APP',
+ description: 'Track and analyze LSP8 NFT rarity and value.',
+ image: LSP8AppLogo,
+ backgroundColor: '#2d1b46',
+ link: 'https://lsp8.app/',
+ },
+ {
+ name: 'Family LYX',
+ description: 'Phygital garments powered by LUKSO standards.',
+ image: FamilyLyxLogo,
+ backgroundColor: '#31353A',
+ link: 'https://www.familylyx.com/',
+ },
+ {
+ name: 'Txs.app',
+ description: 'User friendly transaction explorer for LUKSO.',
+ image: TxsAppLogo,
+ backgroundColor: '#fcfcfc',
+ link: 'https://txs.app/',
+ },
+
+ {
+ name: 'TxCity.io',
+ description: 'LUKSO live Blockchain transaction visualizer.',
+ image: TxCityLogo,
+ backgroundColor: '#fcfcfc',
+ link: 'https://txcity.io/v/eth-lukso',
+ },
+ // banner 4 ----------------
+ // TODO: define if we add some popular NFT collections or not. If yes add these import below at the top of the file
+ // import ChillwhaleLogo from '@site/static/img/dapps/chillwhale-logo.jpg';
+ // import CupCoLogo from '@site/static/img/dapps/cupco-logo.webp';
+ // {
+ // name: 'Chillwhale',
+ // description: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+ // image: ChillwhaleLogo,
+ // backgroundColor: '#9F9596',
+ // link: 'https://chillwhales.com/',
+ // },
+ // {
+ // name: 'CupCo',
+ // description: 'Lorem ipsum dolor sit amet, consectetur adipiscing',
+ // image: CupCoLogo,
+ // backgroundColor: '#262626',
+ // link: 'https://...',
+ // },
+];
diff --git a/src/pages/index.js b/src/pages/index.js
index 7a4bb1b707..a6d825c6f1 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,91 +1,194 @@
import React from 'react';
import Layout from '@theme/Layout';
+import clsx from 'clsx';
+// styles
import styles from './index.module.scss';
+import SearchBarWrapper from '../theme/SearchBar';
+// images
+import IntegrationGuidesIcon from '../../static/img/icons/icon-guides-integration.png';
+import UniversalProfileGuidesIcon from '../../static/img/icons/icon-guides-universal-profile.png';
+import DigitalAssetGuidesIcon from '../../static/img/icons/icon-guides-digital-asset.png';
+import NetworksIcon from '../../static/img/icons/icon-networks-gradient.png';
+import ToolsIcon from '../../static/img/icons/icon-tools-gradient.png';
+
+// components
+import IconsGallery from '../components/IconsGallery';
+import TitleWithSeparator from '../components/TitleWithSeparator';
import Box from '../components/Box';
import CallToActionButton from '../components/CallToActionButton';
import Headline from '../components/Headline';
+import CustomAccordion from '../components/Accordion';
+import Slider from '../components/Slider';
+import LinksBox from '../components/LinksBox';
+import LinkCards from '../components/LinkCards';
-import NetworksIcon from '../../static/img/icons/icon-networks-gradient.png';
-import StandardsIcon from '../../static/img/icons/icon-standards-gradient.png';
-import ToolsIcon from '../../static/img/icons/icon-tools-gradient.png';
-import PartnersIcon from '../../static/img/icons/icon-partners-gradient.png';
-import GuidesIcon from '../../static/img/icons/icon-guides-gradient.png';
-import FAQIcon from '../../static/img/icons/icon-faq-gradient.png';
-import DappsGallery from '../components/DappsGallery';
-import SeparatorWithTitle from '../components/SeperatorWithTitle';
+// data
+import accordionData from '../accordion.js';
+import {
+ migrateGuides,
+ universalProfileGuides,
+ digitalAssetsGuides,
+ toolsLinks,
+ networkLinks,
+ integrationPartners,
+ dappsSlider,
+} from '../links.js';
function Index() {
return (
-
-
-
-
-
-Feel free to join the [LUKSO **Discord server**](https://discord.com/channels/359064931246538762/620552532602912769), and ask your questions in the [#standards](https://discord.com/channels/359064931246538762/620552532602912769) channel.
-
-Our team and community members look forward to helping you understand the standards.
-
-:::
-
## LSP Standard Specifications
See [LUKSO Improvement Proposals - LIPs (GitHub)](https://github.com/lukso-network/LIPs) if you are looking for the design and formal specifications of each LSP Standards.
diff --git a/docs/standards/metadata/lsp10-received-vaults.md b/docs/standards/metadata/lsp10-received-vaults.md
index 40ffa9d220..0acfaa3293 100644
--- a/docs/standards/metadata/lsp10-received-vaults.md
+++ b/docs/standards/metadata/lsp10-received-vaults.md
@@ -6,7 +6,7 @@ description: LUKSO LSP10 - Received Vaults for keeping track of all the vaults o
# LSP10 - Received Vaults
-:::info Standard Document
+:::info Standard Specification
[LSP10 - Received Vaults](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-10-ReceivedVaults.md)
diff --git a/docs/standards/metadata/lsp12-issued-assets.md b/docs/standards/metadata/lsp12-issued-assets.md
index 2541900d37..0124204309 100644
--- a/docs/standards/metadata/lsp12-issued-assets.md
+++ b/docs/standards/metadata/lsp12-issued-assets.md
@@ -6,7 +6,7 @@ description: LUKSO LSP12 - Issued Assets for keeping track of all the assets iss
# LSP12 - Issued Assets
-:::info Standard Document
+:::info Standard Specification
[LSP12 - Issued Assets](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-12-IssuedAssets.md)
diff --git a/docs/standards/metadata/lsp2-json-schema.md b/docs/standards/metadata/lsp2-json-schema.md
index 1a095a171f..1d5da93f3b 100644
--- a/docs/standards/metadata/lsp2-json-schema.md
+++ b/docs/standards/metadata/lsp2-json-schema.md
@@ -6,7 +6,7 @@ description: LUKSO's LSP2 - ERC725Y JSON Schema for better abstraction on top of
# LSP2 - ERC725Y JSON Schema
-:::info Standard Document
+:::info Standard Specification
[LSP2 - ERC725Y JSON Schema](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-2-ERC725YJSONSchema.md)
@@ -14,7 +14,7 @@ description: LUKSO's LSP2 - ERC725Y JSON Schema for better abstraction on top of
:::success Recommendation
-Our [JavaScript library **erc725.js**](../../tools/libraries/erc725js/getting-started.md) makes it easy to read + write data encoded according to the LSP2 Schema without manually going through all the encoding complexity.
+Our [JavaScript library **erc725.js**](../../tools/dapps/erc725js/getting-started.md) makes it easy to read + write data encoded according to the LSP2 Schema without manually going through all the encoding complexity.
:::
@@ -44,8 +44,6 @@ These two issues make it very hard for smart contracts to interact with each oth
## What does this standard represent?
-### Specification
-
The LSP2 Standard aims to offer a better abstraction on top of the storage of a smart contract.
This standard introduces a JSON schema that enables to represent the storage of a smart contract through more understandable data keys. It makes the data stored in a smart contract more organized.
@@ -54,18 +52,12 @@ This standard introduces a JSON schema that enables to represent the storage of
By introducing a schema, we can represent contract storage in the same way across contracts in the network. Everyone has a unified view of the data stored between smart contracts. Developers can quickly parse data, and contracts or interfaces can read or write data from or to the contract storage in the same manner. The standardization makes smart contracts **more interoperable with each other**.
-### How does LSP2 work?
+## Specification
-LSP2 introduces new ways to encode data, depending on its type. From a single entry to multiple entries (like arrays or maps).
+LSP2 introduces new ways to encode data, depending on its type. From single to multiple entries (like arrays or maps).
A data key in the contract storage can be defined as a JSON object with properties that describe the key. The schema includes information about the data key itself, as well as its value to explain what this data represents.
-- the data `key` itself: the `bytes32` hex value used when calling [`setData`](../../contracts/contracts/ERC725/ERC725.md#setdata) or [`setDataBatch`](../../contracts/contracts/ERC725/ERC725.md#setdatabatch) on the smart contract.
-- the data key `name`: human readable version
-- the `keyType` (_e.g., singleton, array, mapping_)
-- the `valueType`: how to encode or decode the data.
-- the `valueContent`: how to interpret the data being stored (is it some text? is it some URL? is it an address?)
-
```json
{
"name": "LSP4TokenName",
@@ -76,6 +68,16 @@ A data key in the contract storage can be defined as a JSON object with properti
}
```
+Below are descriptions of what each properties in the JSON schema represent.
+
+| Property in JSON schema | Explanation |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| data key `name` | Describe what kind of metadata value is stored under this data key in a human readable way. |
+| data `key` itself | The `bytes32` hex value used when calling [`setData`](../../contracts/contracts/ERC725/ERC725.md#setdata) or [`setDataBatch`](../../contracts/contracts/ERC725/ERC725.md#setdatabatch) on the smart contract. |
+| `keyType` | Define if the information stored under this data key is a single entry (_`Singleton`_), a list of items (_`Array`_), or map to a specific field like an address or unique identifier (_`Mapping` and `MappingWithGrouping`_). |
+| `valueType` | Describe the low level type to be used to encode or decode the data. |
+| `valueContent` | Describe how to interpret the data being fetched (_is it some text? is it some URL? is it an address? is it a JSON object?_) |
+
## Data Key Types
A Data Key Type defines **HOW** a 32 bytes data key is constructed, representing how a particular data key type is described in 32 bytes. For example, `Singleton` data keys are simple keccak256 hashes of the key name string. Other Data Key Types are constructed of slices of hashes to group different key name parts or define array element keys.
diff --git a/docs/standards/metadata/lsp3-profile-metadata.md b/docs/standards/metadata/lsp3-profile-metadata.md
index c189bc9bc0..dea05a792d 100644
--- a/docs/standards/metadata/lsp3-profile-metadata.md
+++ b/docs/standards/metadata/lsp3-profile-metadata.md
@@ -6,7 +6,7 @@ description: 'LUKSO LSP3-Profile-Metadata: a Metadata standard that defines spec
# LSP3 - Profile Metadata
-:::info Standard Document
+:::info Standard Specification
[LSP3 - Profile Metadata](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-3-Profile-Metadata.md)
diff --git a/docs/standards/metadata/lsp5-received-assets.md b/docs/standards/metadata/lsp5-received-assets.md
index 68b8fc2b77..97904c1448 100644
--- a/docs/standards/metadata/lsp5-received-assets.md
+++ b/docs/standards/metadata/lsp5-received-assets.md
@@ -6,7 +6,7 @@ description: 'LUKSO LSP5 - Received Assets: a standard for referencing and keepi
# LSP5 - Received Assets
-:::info Standard Document
+:::info Standard Specification
[LSP5 - Received Assets](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-5-ReceivedAssets.md)
diff --git a/docs/standards/standard-types.md b/docs/standards/standard-types.md
index c4b587fd58..c97164a2c8 100644
--- a/docs/standards/standard-types.md
+++ b/docs/standards/standard-types.md
@@ -5,6 +5,12 @@ description: 'Discover the different type of LUKSO Standards Proposals: smart co
# Types of LSPs Standards
+:::tip
+
+See the **[LSP Detection Guide](../learn/standard-detection.md)** to lean how to check standardized metadata and ERC165 interface IDs.
+
+:::
+
There are two types of **LSP** standards used to interact with smart contracts on the LUKSO blockchain.
| Standard Type | Description | Examples |
@@ -13,11 +19,3 @@ There are two types of **LSP** standards used to interact with smart contracts o
| **Metadata Standards** | **Standardize a set of ERC725Y data keys**. Informs about the data set by default on the contract and which data keys to query to retrieve such data | [LSP3-Profile-Metadata](./metadata/lsp3-profile-metadata.md)
[LSP4-DigitalAsset-Metadata](./tokens/LSP4-Digital-Asset-Metadata.md)
[LSP10ReceivedVaults](./metadata/lsp10-received-vaults.md) |  - -## Interface Checks - -:::tip - -See the **[LSP Detection Guide](../learn/standard-detection.md)** to lean how to check standardized metadata storage and interfaces. - -::: diff --git a/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md b/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md index a5728da5e4..e9d76db520 100644 --- a/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md +++ b/docs/standards/tokens/LSP4-Digital-Asset-Metadata.md @@ -6,7 +6,7 @@ description: LUKSO LSP4 - Digital Asset Metadata for defining data keys to descr # LSP4 - Digital Asset Metadata -:::info Standard Document +:::info Standard Specification [LSP4 - Digital Asset Metadata](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-4-DigitalAsset-Metadata.md) @@ -211,7 +211,3 @@ This data key refers to the **address(es)** of the **creator(s)** of the digital "valueContent": "(Bytes4,Number)" } ``` - -## References - -- [LUKSO Standards Proposals: LSP4 - Digital Asset Metadata (Standard Specification, GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-4-DigitalAsset-Metadata.md) diff --git a/docs/standards/tokens/LSP7-Digital-Asset.md b/docs/standards/tokens/LSP7-Digital-Asset.md index 1f0a6ffc33..656b5f44a7 100644 --- a/docs/standards/tokens/LSP7-Digital-Asset.md +++ b/docs/standards/tokens/LSP7-Digital-Asset.md @@ -6,7 +6,7 @@ description: LUKSO LSP7 - Digital Asset for fungible assets. # LSP7 - Digital Asset -:::info Standard Document +:::info Standard Specification [LSP7 - Digital Asset](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-7-DigitalAsset.md) @@ -24,9 +24,7 @@ Fungible assets such as **[ERC20](https://eips.ethereum.org/EIPS/eip-20)**, **[E  -## What does this Standard represent? - -### Specification +## Specification **[LSP7-DigitalAsset](../../standards/tokens/LSP7-Digital-Asset.md)** is a standard that aims to describe fungible assets. The term _fungible_ means that these assets are **mutually interchangeable** (*e.g., *one token has the same value as another token). @@ -112,7 +110,3 @@ To ensure a **safe asset transfer**, an additional boolean parameter was added t  Implementing the **[LSP1-UniversalReceiver](../accounts/lsp1-universal-receiver.md)** standard will give a sign that the contract knows how to handle the tokens received. - -## References - -- [LUKSO Standards Proposals: LSP7 - Digital Asset (Standard Specification, GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-7-DigitalAsset.md) diff --git a/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md b/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md index b9b61af08c..41a467de12 100644 --- a/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md +++ b/docs/standards/tokens/LSP8-Identifiable-Digital-Asset.md @@ -9,7 +9,7 @@ import TabItem from '@theme/TabItem'; # LSP8 - Identifiable Digital Asset -:::info Standard Document +:::info Standard Specification [LSP8 - Identifiable Digital Asset](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-8-IdentifiableDigitalAsset.md) @@ -28,8 +28,6 @@ Non-Fungible assets such as **[ERC721](https://eips.ethereum.org/EIPS/eip-721)**  -## What does this Standard represent? - ### Specification **[LSP8-IdentifiableDigitalAsset](../../standards/tokens/LSP8-Identifiable-Digital-Asset.md)** is a standard that aims to describe _non-fungible_ assets. The term _Non-fungible_ means that each asset is **unique and different**. They are distinguishable from each other and therefore **not interchangeable**. @@ -170,7 +168,3 @@ The LSP8 standard offers ways to set metadata for the whole LSP8 collection as w - The generic metadata and information related to the whole LSP8 collection can be updated using [`setData(bytes32,bytes)`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdata) or [`setDataBatch(bytes[],bytes[])`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdatabatch), passing the `bytes32` data key of [`LSP4Metadata`](./LSP4-Digital-Asset-Metadata.md#lsp4metadata) as the first argument. - Alternatively, the generic information and metadata specific to a `tokenId` can be set using the [`setDataForTokenId`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdatafortokenid) or [`setDataBatchForTokenIds(bytes32[],bytes32[],bytes[])`](../../contracts/contracts/LSP8IdentifiableDigitalAsset/LSP8IdentifiableDigitalAsset.md#setdatabatchfortokenids) functions. - -## References - -- [LUKSO Standards Proposals: LSP8 - Identifiable Digital Asset (Standard Specification, GitHub)](https://github.com/lukso-network/LIPs/blob/main/LSPs/LSP-8-IdentifiableDigitalAsset.md) diff --git a/docs/tools/services/_category_.yml b/docs/tools/apis/_category_.yml similarity index 100% rename from docs/tools/services/_category_.yml rename to docs/tools/apis/_category_.yml diff --git a/docs/tools/services/indexer.md b/docs/tools/apis/indexer-api.md similarity index 94% rename from docs/tools/services/indexer.md rename to docs/tools/apis/indexer-api.md index 49d29d02c0..f11863a338 100644 --- a/docs/tools/services/indexer.md +++ b/docs/tools/apis/indexer-api.md @@ -1,13 +1,13 @@ --- -title: π Indexer API -sidebar_position: 1 +title: π Indexer API +sidebar_position: 2 --- # Indexer API :::info π Private Beta access -This feature is currently in private beta. If you are interested, please [contact us](https://forms.gle/rhWA25m3jjuPNPva9). +This feature is currently in private beta. If you are interested, please [fill in this form](https://forms.gle/rhWA25m3jjuPNPva9). ::: diff --git a/docs/tools/services/relayer-developer.md b/docs/tools/apis/relayer-api.md similarity index 99% rename from docs/tools/services/relayer-developer.md rename to docs/tools/apis/relayer-api.md index 8e53c60ada..e8b0a0ea85 100644 --- a/docs/tools/services/relayer-developer.md +++ b/docs/tools/apis/relayer-api.md @@ -1,6 +1,6 @@ --- title: β½οΈ Relayer API -sidebar_position: 2 +sidebar_position: 1 --- # Relayer API diff --git a/docs/tools/services/rpc-api.md b/docs/tools/apis/up-rpc-api.md similarity index 99% rename from docs/tools/services/rpc-api.md rename to docs/tools/apis/up-rpc-api.md index b72dc644a0..d84b39f0a9 100644 --- a/docs/tools/services/rpc-api.md +++ b/docs/tools/apis/up-rpc-api.md @@ -1,6 +1,7 @@ --- title: π RPC API description: LUKSO's RPC API supported methods. +sidebar_position: 3 --- # π RPC API diff --git a/docs/tools/dapps/_category_.yml b/docs/tools/dapps/_category_.yml new file mode 100644 index 0000000000..b4c911962f --- /dev/null +++ b/docs/tools/dapps/_category_.yml @@ -0,0 +1,3 @@ +label: 'π οΈ Javascript libraries' +collapsed: false +position: 3 diff --git a/docs/tools/libraries/eip191-signerjs/Classes/EIP191Signer.md b/docs/tools/dapps/eip191-signerjs/Classes/EIP191Signer.md similarity index 100% rename from docs/tools/libraries/eip191-signerjs/Classes/EIP191Signer.md rename to docs/tools/dapps/eip191-signerjs/Classes/EIP191Signer.md diff --git a/docs/tools/libraries/eip191-signerjs/Classes/_category_.yml b/docs/tools/dapps/eip191-signerjs/Classes/_category_.yml similarity index 100% rename from docs/tools/libraries/eip191-signerjs/Classes/_category_.yml rename to docs/tools/dapps/eip191-signerjs/Classes/_category_.yml diff --git a/docs/tools/libraries/eip191-signerjs/_category_.yml b/docs/tools/dapps/eip191-signerjs/_category_.yml similarity index 100% rename from docs/tools/libraries/eip191-signerjs/_category_.yml rename to docs/tools/dapps/eip191-signerjs/_category_.yml diff --git a/docs/tools/libraries/eip191-signerjs/getting-started.md b/docs/tools/dapps/eip191-signerjs/getting-started.md similarity index 100% rename from docs/tools/libraries/eip191-signerjs/getting-started.md rename to docs/tools/dapps/eip191-signerjs/getting-started.md diff --git a/docs/tools/libraries/erc725js/_category_.yml b/docs/tools/dapps/erc725js/_category_.yml similarity index 100% rename from docs/tools/libraries/erc725js/_category_.yml rename to docs/tools/dapps/erc725js/_category_.yml diff --git a/docs/tools/libraries/erc725js/getting-started.md b/docs/tools/dapps/erc725js/getting-started.md similarity index 100% rename from docs/tools/libraries/erc725js/getting-started.md rename to docs/tools/dapps/erc725js/getting-started.md diff --git a/docs/tools/libraries/erc725js/methods.md b/docs/tools/dapps/erc725js/methods.md similarity index 100% rename from docs/tools/libraries/erc725js/methods.md rename to docs/tools/dapps/erc725js/methods.md diff --git a/docs/tools/libraries/erc725js/providers.md b/docs/tools/dapps/erc725js/providers.md similarity index 100% rename from docs/tools/libraries/erc725js/providers.md rename to docs/tools/dapps/erc725js/providers.md diff --git a/docs/tools/libraries/erc725js/schemas.md b/docs/tools/dapps/erc725js/schemas.md similarity index 100% rename from docs/tools/libraries/erc725js/schemas.md rename to docs/tools/dapps/erc725js/schemas.md diff --git a/docs/tools/dapps/lsp-factoryjs/_category_.yml b/docs/tools/dapps/lsp-factoryjs/_category_.yml new file mode 100644 index 0000000000..28da802f58 --- /dev/null +++ b/docs/tools/dapps/lsp-factoryjs/_category_.yml @@ -0,0 +1,3 @@ +label: 'π lsp-factory.js (deprecated)' +collapsed: true +position: 5 diff --git a/docs/tools/libraries/lsp-factoryjs/getting-started.md b/docs/tools/dapps/lsp-factoryjs/getting-started.md similarity index 100% rename from docs/tools/libraries/lsp-factoryjs/getting-started.md rename to docs/tools/dapps/lsp-factoryjs/getting-started.md diff --git a/docs/tools/libraries/lsp-utils/IPFS.md b/docs/tools/dapps/lsp-utils/IPFS.md similarity index 100% rename from docs/tools/libraries/lsp-utils/IPFS.md rename to docs/tools/dapps/lsp-utils/IPFS.md diff --git a/docs/tools/libraries/lsp-utils/LSP12IssuedAssets.md b/docs/tools/dapps/lsp-utils/LSP12IssuedAssets.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP12IssuedAssets.md rename to docs/tools/dapps/lsp-utils/LSP12IssuedAssets.md diff --git a/docs/tools/libraries/lsp-utils/LSP23LinkedContractsFactory.md b/docs/tools/dapps/lsp-utils/LSP23LinkedContractsFactory.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP23LinkedContractsFactory.md rename to docs/tools/dapps/lsp-utils/LSP23LinkedContractsFactory.md diff --git a/docs/tools/libraries/lsp-utils/LSP2ERC725YJSONSchema.md b/docs/tools/dapps/lsp-utils/LSP2ERC725YJSONSchema.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP2ERC725YJSONSchema.md rename to docs/tools/dapps/lsp-utils/LSP2ERC725YJSONSchema.md diff --git a/docs/tools/libraries/lsp-utils/LSP3ProfileMetadata.md b/docs/tools/dapps/lsp-utils/LSP3ProfileMetadata.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP3ProfileMetadata.md rename to docs/tools/dapps/lsp-utils/LSP3ProfileMetadata.md diff --git a/docs/tools/libraries/lsp-utils/LSP4DigitalAssetMetadata.md b/docs/tools/dapps/lsp-utils/LSP4DigitalAssetMetadata.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP4DigitalAssetMetadata.md rename to docs/tools/dapps/lsp-utils/LSP4DigitalAssetMetadata.md diff --git a/docs/tools/libraries/lsp-utils/LSP5ReceivedAssets.md b/docs/tools/dapps/lsp-utils/LSP5ReceivedAssets.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP5ReceivedAssets.md rename to docs/tools/dapps/lsp-utils/LSP5ReceivedAssets.md diff --git a/docs/tools/libraries/lsp-utils/LSP6KeyManager.md b/docs/tools/dapps/lsp-utils/LSP6KeyManager.md similarity index 100% rename from docs/tools/libraries/lsp-utils/LSP6KeyManager.md rename to docs/tools/dapps/lsp-utils/LSP6KeyManager.md diff --git a/docs/tools/libraries/lsp-utils/_category_.yml b/docs/tools/dapps/lsp-utils/_category_.yml similarity index 100% rename from docs/tools/libraries/lsp-utils/_category_.yml rename to docs/tools/dapps/lsp-utils/_category_.yml diff --git a/docs/tools/libraries/lsp-utils/getting-started.md b/docs/tools/dapps/lsp-utils/getting-started.md similarity index 100% rename from docs/tools/libraries/lsp-utils/getting-started.md rename to docs/tools/dapps/lsp-utils/getting-started.md diff --git a/docs/tools/docker-factory.md b/docs/tools/docker-factory.md index 698203f42c..84198e0519 100644 --- a/docs/tools/docker-factory.md +++ b/docs/tools/docker-factory.md @@ -1,6 +1,6 @@ --- title: π Node Docker Factory -sidebar_position: 6 +sidebar_position: 7 --- # Node Docker Factory diff --git a/docs/tools/erc725-tools.md b/docs/tools/explorers-debuggers.md similarity index 98% rename from docs/tools/erc725-tools.md rename to docs/tools/explorers-debuggers.md index de9f9e5040..d88eb86fc3 100644 --- a/docs/tools/erc725-tools.md +++ b/docs/tools/explorers-debuggers.md @@ -1,6 +1,6 @@ --- title: π Explorers & Debug Tools -sidebar_position: 4 +sidebar_position: 6 --- # π Explorers & Debug Tools diff --git a/docs/tools/index.mdx b/docs/tools/index.mdx new file mode 100644 index 0000000000..df8bd9e83e --- /dev/null +++ b/docs/tools/index.mdx @@ -0,0 +1,438 @@ +--- +id: tools +title: Tools +sidebar_position: 1 +--- + +import ReferenceCard from '@site/src/components/ReferenceCard'; +import CodeBlock from '@theme/CodeBlock'; + +import styles from './tools.module.scss'; + +import SolidityLogo from '@site/static/img/tools/solidity-logo.png'; +import FoundryLogo from '@site/static/img/tools/foundry-logo.png'; +import EnvioLogo from '@site/static/img/tools/envio_logo.png'; +import API3Logo from '@site/static/img/tools/api3-logo.png'; +import DIALogo from '@site/static/img/tools/dia_logo.png'; +import DappnodeLogo from '@site/static/img/tools/dappnode_logo.png'; + +# Tools + +Explore the different tools available for developers to build dApps, smart contracts and protocols more easily on LUKSO. + +## APIs + +
+
+
+
+Deploy Universal Profiles easily, execute gas-free transactions up to a free monthly gas quota.
+
+
+
+
+
+Query easily any information about Universal Profiles and LSP7/8 Digital Assets.
+
+
+
+
+
+Available RPC endpoints for the Universal Profile Browser Extension π§©.
+
+
+
+
+
++ +## Javascript libraries + +
+
+
+
+
+ 
+
+
+```bash
+npm install @erc725/erc725.js
+```
+
+Fetch any metadata easily from Universal Profiles, Tokens and NFTs. Includes helper functions to encode and prepare metadata before setting.
+
+
+
+
+
+
+ 
+
+
+```bash
+npm install @lukso/lsp-utils
+```
+
+High level helper functions to `getProfileMetadata(...)`, `decodeAllowedCalls(...)`, `decodeAllowedERC725YDataKeys(...)` to read / encode metadata efficiently and avoid dealing with low level encoding / decoding.
+
+
+
+
+
+
+ 
+
+
+```bash
+npm install @lukso/eip191-signer.js
+```
+
+Sign EIP-191 messages with a private key, to be used for preparing gas-less transactions for the relayer.
+
+
+
+
+
+
+ 
+
+
+Universal Profile Integration for Web3-Onboard to easily integrate Universal Profiles in your dApp.
+
+
+
+
+
+
+ 
+
+
+Skeleton repository to create a transaction relayer service compliant with the [LSP15 Standard Transaction Relay Service API](../standards/accounts/lsp15-transaction-relayer-api.md).
+
+
+
+
+
+Create docker compose file to connect to LUKSO network.
+
+
+
+
+
+
+
+
+```bash
+npm install @erc725/erc725.js
+```
+
+Fetch any metadata easily from Universal Profiles, Tokens and NFTs. Includes helper functions to encode and prepare metadata before setting.
+
+
+
+
+```bash
+npm install @lukso/lsp-utils
+```
+
+High level helper functions to `getProfileMetadata(...)`, `decodeAllowedCalls(...)`, `decodeAllowedERC725YDataKeys(...)` to read / encode metadata efficiently and avoid dealing with low level encoding / decoding.
+
+
+
+
+```bash
+npm install @lukso/eip191-signer.js
+```
+
+Sign EIP-191 messages with a private key, to be used for preparing gas-less transactions for the relayer.
+
+
+
+
+Universal Profile Integration for Web3-Onboard to easily integrate Universal Profiles in your dApp.
+
+
+
+
+Skeleton repository to create a transaction relayer service compliant with the [LSP15 Standard Transaction Relay Service API](../standards/accounts/lsp15-transaction-relayer-api.md).
+
++ +## Smart Contracts + +
+
+
+
+
+ 
+
+
+
+
+ 
+
+
+The reference Solidity implementation of the LUKSO LSP Standards. Available as whole umbrella package or individual packages for specific LSPs.
+
+
+
+
+
+
+ 
+
+
+
+Foundry repository template with pre-installed `@lukso/lsp-smart-contracts` package and example contracts ready to use.
+
+
+
+
+
+
+
+
+The reference Solidity implementation of the LUKSO LSP Standards. Available as whole umbrella package or individual packages for specific LSPs.
+
++ +## Explorers & Debuggers + +
+
+
+
+Network explorer for the LUKSO networks.
+
+
+
+
+
+Inspector tool for developers to easily retrieve the list of metadata and permission from Universal Profile and Digital Assets, as well as encoding and decoding data.
+
+
+
+
+
+Visualize transactions happening live in the LUKSO network decoded in a human readable manner.
+
+
+
+
+
+## Integrated partners
+
+:::caution
+
+Please note that the format of the data indexed by Envio might change in the future. This is also currently a free feature that might become a paid service in the future.
+
+:::
+
+Third-party services and tools that are integrated with LUKSO to provide additional functionalities and services.
+
+
+
+
+
+
+ 
+
+
+
+Indexer with playground to query data for Universal Profiles and Digital Assets in graphql.
+
+
+
+
+
+
+ 
+
+
+
+Oracle with different data feeds available for LUKSO.
+
+
+
+
+
+
+ 
+
+
+
+Oracle with different data feeds available for LUKSO.
+
+
+
+
+
+
+ 
+
+
+
+Start running your own validator to stake and earn rewards.
+
+
+
+
diff --git a/docs/tools/integrations.md b/docs/tools/integrations.md
index 978d94c599..75bdfb158c 100644
--- a/docs/tools/integrations.md
+++ b/docs/tools/integrations.md
@@ -1,7 +1,7 @@
---
id: integrations
title: πͺ’ Integrations
-sidebar_position: 3
+sidebar_position: 5
---
# πͺ’ Integrations
diff --git a/docs/tools/libraries/_category_.yml b/docs/tools/libraries/_category_.yml
deleted file mode 100644
index 3abacc74cb..0000000000
--- a/docs/tools/libraries/_category_.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-label: 'π Libraries'
-collapsed: true
-position: 1
diff --git a/docs/tools/libraries/getting-started.md b/docs/tools/libraries/getting-started.md
deleted file mode 100644
index a9d321e6f1..0000000000
--- a/docs/tools/libraries/getting-started.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-id: getting-started
-title: π Introduction
-sidebar_position: 0
----
-
-# Libraries
-
-Libraries that are actively maintained by the LUKSO team.
-
-| Tool | -npm | -Repository | -
|---|---|---|
| lsp-smart-contracts | - |
- lukso-network/lsp-smart-contracts | -
| lsp-utils | - |
- lukso-network/lsp-utils | -
| erc725.js | - |
- ERC725Alliance/erc725.js | -
| eip191-signer.js | - |
- lukso-network/tools-eip191-signer | -
| web3-onboard-config | - |
- lukso-network/web3-onboard-config | -
| mock relayer | - |
- lukso-network/tools-mock-relayer | -
- {accordionData.map((item, index) => (
-
- {item.details}
-
- ))}
-
+
+ {' '}
+
+
+ {answer}
++ {linkLabel} +
+
-
-
-
- );
-}
diff --git a/src/components/Box/index.tsx b/src/components/Box/index.tsx
new file mode 100644
index 0000000000..efd410185b
--- /dev/null
+++ b/src/components/Box/index.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './Box.module.scss';
+
+type BoxProps = {
+ icon: string;
+ link: string;
+ title: string;
+ content: string;
+ position?: 'right' | 'center';
+ maxImageWidth?: string;
+};
+
+const Box: React.FC{title}
-{content}
-
+
+ 
+
+
+ );
+
+ const Text: React.FC = () => (
+
+
+ );
+
+ return (
+ {title}
+{content}
+
+ {position == 'center' ? (
+
+ );
+};
+
+export default Box;
diff --git a/src/components/CallToActionButton/CallToActionButton.module.scss b/src/components/CallToActionButton/CallToActionButton.module.scss
index 345bb4311f..085e7f0c0d 100644
--- a/src/components/CallToActionButton/CallToActionButton.module.scss
+++ b/src/components/CallToActionButton/CallToActionButton.module.scss
@@ -1,13 +1,9 @@
.ctaContainer {
- height: 50px;
display: flex;
align-items: center;
- justify-content: center;
- text-align: center;
}
.ctaButton {
- // background-color: var(--color-cta-background);
background-color: var(--color-cta-background-blue);
border-radius: 40px;
padding: 10px 20px;
@@ -15,15 +11,14 @@
max-width: 500px;
margin-bottom: 30px;
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
-
- transition: all 200ms ease-out 10ms;
+ transition: all 300ms ease-out 10ms;
color: white;
+ @media (max-width: 960px) {
+ margin-bottom: 0;
+ }
+
&:hover {
box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
transform: scale(1.05);
@@ -40,7 +35,7 @@
display: flex;
align-items: center;
justify-content: center;
- margin: 0px 20px 0px 0px;
+ margin-right: 5px;
height: 100%;
}
}
diff --git a/src/components/CallToActionButton/index.js b/src/components/CallToActionButton/index.js
deleted file mode 100644
index edce89da74..0000000000
--- a/src/components/CallToActionButton/index.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import styles from './CallToActionButton.module.scss';
-
-import { Icon } from '@iconify/react';
-
-export default function CallToActionButton({
- bgColor,
- color,
- link,
- text,
- icon,
- target,
-}) {
- return (
-
+
+ ) : (
+
+
+ )}
+
-
-
-
- );
-}
diff --git a/src/components/CallToActionButton/index.tsx b/src/components/CallToActionButton/index.tsx
new file mode 100644
index 0000000000..98f1bec0e2
--- /dev/null
+++ b/src/components/CallToActionButton/index.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import styles from './CallToActionButton.module.scss';
+
+import { Icon } from '@iconify/react';
+
+type ButtonProps = {
+ bgColor?: string;
+ color: string;
+ link: string;
+ text: string;
+ icon: string;
+ newTab?: boolean;
+};
+
+const CallToActionButton: React.FC
+
+
+
+);
+
+export default CallToActionButton;
diff --git a/src/components/CardWithContent/CardWithContent.module.scss b/src/components/CardWithContent/CardWithContent.module.scss
new file mode 100644
index 0000000000..8a01b5cc3c
--- /dev/null
+++ b/src/components/CardWithContent/CardWithContent.module.scss
@@ -0,0 +1,12 @@
+.cardWithContent {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ gap: 10px 10px;
+ flex-wrap: wrap;
+ padding: 0.5rem;
+}
+
+.cardWithContent > div {
+ flex: 1 0 100%;
+}
diff --git a/src/components/CardWithContent/index.tsx b/src/components/CardWithContent/index.tsx
new file mode 100644
index 0000000000..60b134a58b
--- /dev/null
+++ b/src/components/CardWithContent/index.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Typography from '@mui/material/Typography';
+
+import styles from './CardWithContent.module.scss';
+
+type Props = {
+ image?: string;
+ title: string;
+ children: React.ReactNode;
+};
+
+export default function CardWithContent({
+ image,
+ title,
+ children: content,
+}: Props) {
+ return (
+
+
+ {image && (
+
+
+ {title}
+
+ {content}
+
+
+
+ );
+}
diff --git a/src/components/CardWithImage/index.tsx b/src/components/CardWithImage/index.tsx
deleted file mode 100644
index 91b96f3a99..0000000000
--- a/src/components/CardWithImage/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import * as React from 'react';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Typography from '@mui/material/Typography';
-
-type Props = {
- CardData: Array<{
- image?: string;
- imageTitle: string;
- cardHeading: string;
- cardContent: Array<{
- linkPath: string;
- linkText: string;
- newTab?: boolean;
- }>;
- }>;
-};
-
-export default function CardWithImage({ CardData }: Props) {
- return (
-
- {CardData.map((item, index) => (
-
- {item.image && (
-
-
- {item.cardHeading}
-
-
-
-
-
- ))}
-
- );
-}
diff --git a/src/components/DappsGallery/index.js b/src/components/DappsGallery/index.js
deleted file mode 100644
index 72d4b611e0..0000000000
--- a/src/components/DappsGallery/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import styles from './DappsGallery.module.scss';
-//image imports
-import UniversalSwaps from '../../../static/img/universalswaps.png';
-import Stakingverse from '../../../static/img/tools/stakingverse_logo.png';
-import UniversalPage from '../../../static/img/tools/universalpage_logo.png';
-import Commonground from '../../../static/img/cg.png';
-import LSP8 from '../../../static/img/lsp8app.png';
-import UpTurn from '../../../static/img/upturn-scaled.png';
-
-const dapps = [
- {
- name: 'Universal Swaps',
- imageUrl: UniversalSwaps,
- link: 'https://universalswaps.io/',
- backgroundColor: '#fddce7',
- },
- {
- name: 'Stakingverse',
- imageUrl: Stakingverse,
- link: 'https://stakingverse.io/',
- backgroundColor: '#1E1E1E',
- },
- {
- name: 'Commonground',
- imageUrl: Commonground,
- link: 'https://app.cg/',
- backgroundColor: '#404bbb',
- },
- {
- name: 'LSP8.APP',
- imageUrl: LSP8,
- link: 'https://lsp8.app/',
- backgroundColor: '#2d1b46',
- },
- {
- name: 'Universal Page',
- imageUrl: UniversalPage,
- link: 'https://universal.page/',
- backgroundColor: '#5049df',
- },
- {
- name: 'UP Turn',
- imageUrl: UpTurn,
- link: 'https://upturn.live/',
- backgroundColor: 'white',
- },
-];
-
-export default function DappsGallery() {
- return (
- -
- {item.cardContent.map((link, index) => (
-
- - - {link.linkText} - - - ))} -
- {dapps.map((dapp) => (
-
- );
-}
diff --git a/src/components/Headline/Headline.module.scss b/src/components/Headline/Headline.module.scss
index af9c2f25e9..b78eac5c9c 100644
--- a/src/components/Headline/Headline.module.scss
+++ b/src/components/Headline/Headline.module.scss
@@ -1,19 +1,11 @@
.headline {
- background-image: url('../../../static/img/icons/ellipse-top-gradient.png');
- background-repeat: no-repeat;
- background-position: center -100px;
- background-size: contain;
- min-height: 500px;
- margin-bottom: -250px;
-
- padding-top: 5rem;
- padding-bottom: 1rem;
text-align: center;
+ padding-top: 3.5rem;
+
h1 {
font-family: var(--ifm-heading-font-family);
font-size: 66px;
- line-height: 1.7;
}
@media (max-width: 960px) {
@@ -26,7 +18,7 @@
background-size: cover;
h1 {
- font-size: 40px;
+ font-size: 36px;
}
}
}
diff --git a/src/components/Headline/index.js b/src/components/Headline/index.js
index 2e68c4c54b..2bc420b865 100644
--- a/src/components/Headline/index.js
+++ b/src/components/Headline/index.js
@@ -4,10 +4,15 @@ import styles from './Headline.module.scss';
export default function Headline() {
return (
-
- 
-
-
- ))}
-
-
- Welcome to the
+
);
}
diff --git a/src/components/DappsGallery/DappsGallery.module.scss b/src/components/IconsGallery/IconsGallery.module.scss
similarity index 64%
rename from src/components/DappsGallery/DappsGallery.module.scss
rename to src/components/IconsGallery/IconsGallery.module.scss
index 3e037661b6..892af7e565 100644
--- a/src/components/DappsGallery/DappsGallery.module.scss
+++ b/src/components/IconsGallery/IconsGallery.module.scss
@@ -1,33 +1,26 @@
.dappCard {
- width: auto;
height: 100%;
- box-sizing: border-box;
- filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.12));
- overflow: hidden;
- border-radius: 20px;
- -webkit-border-radius: 20px;
- border: 1px solid rgba(255, 255, 255, 0.05);
}
.dappCardImage {
+ filter: grayscale(100%);
transition: all 300ms ease-out;
height: 100%;
width: 100%;
+ padding: 2rem;
object-fit: contain;
}
.dappCard:hover .dappCardImage {
+ filter: grayscale(0%) drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.12));
transform: scale(1.04);
}
.dappsContainer {
+ width: 50%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 27px;
- grid-auto-rows: 1fr;
- width: 65%;
- margin-bottom: 2%;
- justify-self: center;
@media (max-width: 960px) {
display: grid;
diff --git a/src/components/IconsGallery/index.tsx b/src/components/IconsGallery/index.tsx
new file mode 100644
index 0000000000..79a003eb6b
--- /dev/null
+++ b/src/components/IconsGallery/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import styles from './IconsGallery.module.scss';
+
+type IconsGalleryProps = {
+ items: {
+ name: string;
+ image: string;
+ url: string;
+ backgroundColor: string;
+ }[];
+};
+
+const IconsGallery: React.FC
- Welcome to the
+ Welcome to the
+
+ LUKSO Developer Docs
- LUKSO Dev Docs
+ {items.map(
+ ({
+ name,
+ image,
+ url,
+ backgroundColor: bgColor, // renaming destructured property for code clarity (avoid confusion with `style={{ backgroundColor: '...' }}`)
+ }) => (
+
+ );
+};
+
+export default IconsGallery;
diff --git a/src/components/LinkCards/LinkCards.module.scss b/src/components/LinkCards/LinkCards.module.scss
new file mode 100644
index 0000000000..2f67f709f0
--- /dev/null
+++ b/src/components/LinkCards/LinkCards.module.scss
@@ -0,0 +1,38 @@
+.containerBoxLinks {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ text-align: left;
+
+ a {
+ max-width: 100% !important;
+ }
+}
+
+.boxLink {
+ display: block;
+ background-color: #f5f5f598;
+ border-radius: 8px;
+ padding: 1.5rem;
+ transition: all 0.2s ease;
+ text-decoration: none;
+
+ &:hover {
+ background-color: #eaeaea83;
+ transition: all 300ms ease-out;
+ transform: translateY(-2px);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ h3 {
+ margin: 0 0 0.5rem 0;
+ font-size: 1.2rem;
+ }
+
+ p {
+ margin: 0;
+ color: #666;
+ font-size: 0.95rem;
+ line-height: 1.4;
+ }
+}
diff --git a/src/components/LinkCards/index.tsx b/src/components/LinkCards/index.tsx
new file mode 100644
index 0000000000..74d9215a32
--- /dev/null
+++ b/src/components/LinkCards/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+import styles from './LinkCards.module.scss';
+
+type LinkCardsProps = {
+ links: {
+ title: string;
+ link: string;
+ description?: string;
+ showAsCode: boolean;
+ }[];
+};
+
+const LinkCards: React.FC
+
+ 
+
+
+ ),
+ )}
+
+ {links.map((item) => (
+
+ {item.showAsCode ?
+
+);
+
+export default LinkCards;
diff --git a/src/components/LinksBox/LinksBox.module.scss b/src/components/LinksBox/LinksBox.module.scss
new file mode 100644
index 0000000000..9109fca403
--- /dev/null
+++ b/src/components/LinksBox/LinksBox.module.scss
@@ -0,0 +1,20 @@
+.linksBox {
+ display: block;
+ background-color: #f5f5f577;
+ text-align: left;
+ border-radius: 8px;
+ padding: 2.5rem;
+ transition: all 300ms ease-out;
+ text-decoration: none;
+
+ &:hover {
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ }
+
+ li {
+ list-style-type: none;
+
+ margin-bottom: 0.5rem;
+ list-style-position: inside;
+ }
+}
diff --git a/src/components/LinksBox/index.tsx b/src/components/LinksBox/index.tsx
new file mode 100644
index 0000000000..7b8ab19926
--- /dev/null
+++ b/src/components/LinksBox/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+
+import styles from './LinksBox.module.scss';
+
+type LinksProps = {
+ links: { text: string; link: string }[];
+};
+
+export default function LinksBox({ links }: LinksProps) {
+ return (
+ {item.showAsCode ? {item.title} : item.title}
+ {item.description}
+ + ))} +-
+ {links.map(({ text, link }, index) => (
+
- + {text} + + ))} +
+
+ );
+};
+
+export default ReferenceCard;
diff --git a/src/components/SeperatorWithTitle/SeperatorWithTitle.module.scss b/src/components/SeperatorWithTitle/SeperatorWithTitle.module.scss
deleted file mode 100644
index 8792df519f..0000000000
--- a/src/components/SeperatorWithTitle/SeperatorWithTitle.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.separatorWithTitle {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 2rem 0;
-
- .separator {
- border: none;
- border-top: 1px solid #ccc;
- width: 100%;
- margin: 1rem 0;
- }
-
- .title {
- font-size: 1.5rem;
- font-weight: bold;
- margin-top: 0.5rem;
- }
- }
-
\ No newline at end of file
diff --git a/src/components/SeperatorWithTitle/index.js b/src/components/SeperatorWithTitle/index.js
deleted file mode 100644
index 024ff3839f..0000000000
--- a/src/components/SeperatorWithTitle/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import styles from './SeperatorWithTitle.module.scss';
-
-export default function SeparatorWithTitle({ title }) {
- return (
-
+ {showAsCode ?
+ {description}
+
+ {name} : name}
+
+
+ {links.map((item, index) => (
+
+ {item.label}
+
+ ))}
+
+
-
-
- );
-}
diff --git a/src/components/Slider/Slider.module.scss b/src/components/Slider/Slider.module.scss
new file mode 100644
index 0000000000..9f7d002317
--- /dev/null
+++ b/src/components/Slider/Slider.module.scss
@@ -0,0 +1,21 @@
+.itemCard {
+ margin: 1rem 0;
+ height: 200px; /* Set a fixed height */
+ box-sizing: border-box;
+ filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.12));
+ overflow: hidden;
+ border-radius: 20px;
+ -webkit-border-radius: 20px;
+ border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.itemCardImage {
+ transition: all 300ms ease-out;
+ height: 100%;
+ width: 100%;
+ object-fit: contain;
+}
+
+.itemCard:hover .itemCardImage {
+ transform: scale(1.04);
+}
diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
new file mode 100644
index 0000000000..27e5e96400
--- /dev/null
+++ b/src/components/Slider/index.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import Carousel from 'react-material-ui-carousel';
+import {
+ CardContent,
+ Typography,
+ useMediaQuery,
+ useTheme,
+} from '@mui/material';
+import Grid from '@mui/material/Grid2';
+import { CarouselProps } from 'react-material-ui-carousel/dist/components/types';
+import CallToActionButton from '../CallToActionButton/index';
+
+import styles from './Slider.module.scss';
+
+const carouselConfig: CarouselProps = {
+ interval: 8000,
+ stopAutoPlayOnHover: true,
+ autoPlay: false,
+ animation: 'slide',
+ duration: 1000,
+ swipe: true,
+ navButtonsAlwaysVisible: true,
+};
+
+type Item = {
+ name: string;
+ description: string;
+ image: string;
+ backgroundColor: string;
+ link: string;
+};
+
+type BannerProps = {
+ isMobile: boolean;
+ items: Item[];
+};
+
+export const Banner: React.FC-
{title}
-
+
+ 
+
+
+
+ {item.name}
+
+ {item.description}
+
+
+
+ );
+}
diff --git a/src/components/VerticalTabs/index.tsx b/src/components/VerticalTabs/index.tsx
deleted file mode 100644
index 5f1b213746..0000000000
--- a/src/components/VerticalTabs/index.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import * as React from 'react';
-import Tabs from '@mui/material/Tabs';
-import Tab from '@mui/material/Tab';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-
-interface TabPanelProps {
- children?: React.ReactNode;
- index: number;
- value: number;
-}
-
-function TabPanel(props: TabPanelProps) {
- const { children, value, index, ...other } = props;
-
- return (
- {title}
+ {children} ++
- {value === index && (
-
- {children}
-
- )}
-
- );
-}
-
-function a11yProps(index: number) {
- return {
- id: `vertical-tab-${index}`,
- 'aria-controls': `vertical-tabpanel-${index}`,
- };
-}
-
-type VerticalTabsContent = {
- title: string;
- summary: string;
-}[];
-
-export default function VerticalTabs({ tabsContent: VerticalTabsContent }) {
- const [value, setValue] = React.useState(0);
-
- const handleChange = (event: React.SyntheticEvent, newValue: number) => {
- setValue(newValue);
- };
-
- return (
-
+
+
+
+
+
+
+ {accordionData.map((item, index) => (
+
+
+
+
+
+ + Quickest guides to get started building on LUKSO with the LSPs and + Universal Profiles. +
+
+
+
+
+
-
+
+
+
+
-
-
+
-
+
+ {/* margin: 0 to remove the default left-right margin for the background image to span full width */}
+
+
+
-
+
+
+ What is LUKSO?
++ An EVM-based Blockchain built for social, culture and creators. +
+Providing the foundation to unify our digital lives.
+
+
+
+
What are the LUKSO LSP Standards?
++ A holistic set of new blockchain standards that are EVM + compatible. +
+To create protocols and applications social and user-centric.
+
+
+
-
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+