diff --git a/docs/learn/getting-started.mdx b/docs/learn/getting-started.mdx index d618adfca3..255227c54f 100644 --- a/docs/learn/getting-started.mdx +++ b/docs/learn/getting-started.mdx @@ -7,50 +7,54 @@ 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 LinksBox from '@site/src/components/LinksBox'; +import LinkCards from '@site/src/components/LinkCards'; +import Link from '@docusaurus/Link'; import styles from './learn.module.scss'; -import DeveloperBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png'; +import DappBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png'; +import SmartContractBannerImage from '../../static/img/learn/DEVELOPERS_SmartContract.png'; + +import { gettingStarted } from './links'; # Developer Quickstart
- + - + @@ -58,17 +62,17 @@ import DeveloperBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png'; @@ -76,22 +80,17 @@ import DeveloperBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png'; @@ -153,16 +152,20 @@ When building dApps on LUKSO, you are interacting with [Universal Profiles 🆙] -If you are looking to build a dApp that needs to create Universal Profiles, you can use the [LUKSO Relayer API](../tools/services/relayer-developer.md) to do that easily programmatically. +The [LUKSO Relayer API](../tools/services/relayer-developer.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! -Your users will benefit from a free monthly gas quota and therefore, will be able to submit transactions without requiring to pay for gas. A great benefit for onboarding new users quickly and easily into your dApp! +🔌 [**Deploy with the LUKSO Relayer API**](../tools/services/relayer-developer.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. Follow our guide: +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). +🏭 [**Deploy with LSP23 Linked Contract Factory**](./universal-profile/advanced-guides/deploy-up-with-lsp23.md). @@ -193,7 +196,7 @@ LUKSO is a Layer 1 EVM Blockchain. All tools and tutorials for Ethereum also wor 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. - See the [Contracts](../contracts/introduction.md) section for the Solidity implementation of these standards and their ABI docs. -:::info Questions? Want to learn more? - - - -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/docusaurus.config.js b/docusaurus.config.js index 2317046001..f834d1fcd1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -439,7 +439,6 @@ export default { className: 'header-github-link', position: 'right', }, - // TODO: add Discord icon (need to add the icon in `custom.css`) { href: 'https://discord.com/invite/lukso', className: 'header-discord-link', @@ -451,7 +450,6 @@ export default { appId: '2C4F8KVKCI', apiKey: '27e4c8037f1e5b053cf1bf1d4d60c408', indexName: 'lukso_docs', - placeholder: 'Search anything...', contextualSearch: true, // Optional: Specify domains where the navigation should occur through window.location instead on history.push. Useful when our Algolia config crawls multiple documentation sites and we want to navigate with window.location.href to them. externalUrlRegex: 'docs\\.lukso\\.tech', diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx index 3a330f4c69..0282515b97 100644 --- a/src/components/Accordion/index.tsx +++ b/src/components/Accordion/index.tsx @@ -37,10 +37,7 @@ const CustomAccordion: React.FC = ({ >

{' '} - + {summary}

diff --git a/src/components/Box/Box.module.scss b/src/components/Box/Box.module.scss index df92c9f51c..7d8031153b 100644 --- a/src/components/Box/Box.module.scss +++ b/src/components/Box/Box.module.scss @@ -1,15 +1,12 @@ .card { - // color: var(--ifm-font-color-base); width: 100%; height: 100%; flex-direction: row; - margin-bottom: 1rem; + margin-bottom: 1rem; padding: 1rem; border-radius: 1.5625rem; - // background-color: var(--ifm-background-color); - transition: all 200ms ease-out 10ms; .title { @@ -21,10 +18,6 @@ line-height: 1.25rem; } - // a { - // max-width: 100%; - // } - &:hover { transform: scale(1.05); } diff --git a/src/components/Carousel/Carousel.module.scss b/src/components/Carousel/Carousel.module.scss deleted file mode 100644 index 9f52a9f58f..0000000000 --- a/src/components/Carousel/Carousel.module.scss +++ /dev/null @@ -1,123 +0,0 @@ -.Example { - margin-bottom: 3rem; -} - -.Banner { - height: 200px; - position: relative; - - .Media { - background-color: white; - height: 100%; - overflow: hidden; - - position: relative; - - .MediaCaption { - text-overflow: ellipsis; - - position: absolute; - bottom: 0; - - padding: 15px; - - background-color: black; - color: white; - opacity: 0.6; - - width: 100%; - height: 10%; - - font: { - size: 16px; - weight: 200; - } - - transition: 300ms; - cursor: pointer; - &:hover { - opacity: 0.8; - } - } - - transition: 300ms; - cursor: pointer; - &:hover { - filter: brightness(115%); - } - } - - .BannerGrid { - height: 100%; - display: flex; /* Ensures grid items align properly */ - align-items: stretch; /* Stretches items to match height */ - } - - .Content { - color: white; - background-color: darkred; - height: 100%; - - position: relative; - - cursor: pointer; - - padding: 30px; - - transition: 300ms; - - &:hover, - &:active { - background-color: darkgoldenrod; - - .ViewButton { - background-color: whitesmoke; - color: darkred; - } - } - - .Title { - font-size: 18px; - font-weight: 500; - color: white; - } - - .Caption { - margin-top: 10px; - font-size: 14px; - color: white; - } - - .ViewButton { - color: white; - - font-size: 16px; - border: 3px solid white; - text-transform: capitalize; - - transition: 200ms; - } - } -} - -.dappCard { - 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); -} - -.dappCardImage { - transition: all 300ms ease-out; - height: 100%; - width: 100%; - object-fit: contain; -} - -.dappCard:hover .dappCardImage { - transform: scale(1.04); -} diff --git a/src/components/Carousel/index.tsx b/src/components/Carousel/index.tsx deleted file mode 100644 index d03df64d58..0000000000 --- a/src/components/Carousel/index.tsx +++ /dev/null @@ -1,249 +0,0 @@ -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 './Carousel.module.scss'; - -// images -import UniversalEverythingLogo from '../../../static/img/dapps/universaleverything-io-logo.png'; -import UniversalSwapsLogo from '../../../static/img/dapps/universalswaps-logo.png'; -import UniversalPageLogo from '../../../static/img/dapps/universalpage-logo.png'; -import StakingverseLogo from '../../../static/img/dapps/stakingverse-logo.png'; -import CommongroundLogo from '../../../static/img/dapps/common-ground-logo.png'; -import DefolioLogo from '../../../static/img/dapps/defolio-logo.png'; -import UFeedLogo from '../../../static/img/dapps/ufeed-logo.png'; -import UpTurnLogo from '../../../static/img/dapps/upturn-logo-scaled.png'; -import LSP8AppLogo from '../../../static/img/dapps/lsp8app-logo.png'; -// TODO: define if we add some popular NFT collections or not -// import ChillwhaleLogo from '../../../static/img/dapps/chillwhale-logo.jpg'; -// import CupCoLogo from '../../../static/img/dapps/cupco-logo.webp'; -import FamilyLyxLogo from '../../../static/img/dapps/family-lyx-logo.png'; -import TxCityLogo from '../../../static/img/dapps/txcity-io-logo.webp'; -import TxsAppLogo from '../../../static/img/dapps/txs-app-logo.png'; - -// // template -// { -// description: 'Lorem ipsum dolor sit amet, consectetur adipiscing', -// contentPosition: 'left', -// image: ImagePlaceholder, -// backgroundColor: '#fcfcfc', -// link: 'https://...', -// }, -var items: Item[] = [ - // TODO: just use image and re-use top name props to simplify - // 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.', - contentPosition: 'left', - image: UniversalSwapsLogo, - backgroundColor: '#fddce7', - link: 'https://universalswaps.io/', - }, - { - name: 'Universal Page', - description: 'NFT marketplace and staking solution on LUKSO.', - contentPosition: 'middle', - image: UniversalPageLogo, - backgroundColor: '#5049df', - link: 'https://universal.page/', - }, - { - name: 'Stakingverse', - description: 'Stake your LYX and start earning staking rewards.', - contentPosition: 'middle', - image: StakingverseLogo, - backgroundColor: '#1E1E1E', - link: 'https://stakingverse.io/', - }, - // banner 2 ---------------- - { - name: 'Common Ground', - description: 'The social app for all web3 communities.', - contentPosition: 'right', - image: CommongroundLogo, - backgroundColor: '#404bbb', - link: 'https://app.cg/', - }, - { - name: 'DeFolio', - description: 'Universal Profiles management platform.', - contentPosition: 'right', - image: DefolioLogo, - backgroundColor: '#fcfcfc', - link: 'https://www.de-folio.com/', - }, - { - name: 'UFeed', - description: 'Social network and feed on LUKSO', - contentPosition: 'left', - image: UFeedLogo, - backgroundColor: '#fcfcfc', - link: 'https://ufeed.io/', - }, - { - name: 'UP Turn', - description: 'Token generator app for digital assets on LUKSO.', - contentPosition: 'right', - image: UpTurnLogo, - backgroundColor: 'white', - link: 'https://upturn.live/', - }, - // banner 3 ---------------- - { - name: 'LSP8.APP', - description: 'Track and analyze LSP8 NFT rarity and value.', - contentPosition: 'left', - image: LSP8AppLogo, - backgroundColor: '#2d1b46', - link: 'https://lsp8.app/', - }, - { - name: 'Family LYX', - description: 'Phygital garments powered by LUKSO standards.', - contentPosition: 'left', - image: FamilyLyxLogo, - backgroundColor: '#31353A', - link: 'https://www.familylyx.com/', - }, - { - name: 'Txs.app', - description: 'User friendly transaction explorer for LUKSO.', - contentPosition: 'left', - image: TxsAppLogo, - backgroundColor: '#fcfcfc', - link: 'https://txs.app/', - }, - - { - name: 'TxCity.io', - description: 'LUKSO live Blockchain transaction visualizer.', - contentPosition: 'left', - image: TxCityLogo, - backgroundColor: '#fcfcfc', - link: 'https://txcity.io/v/eth-lukso', - }, - // banner 4 ---------------- - // { - // name: 'Chillwhale', - // description: 'Lorem ipsum dolor sit amet, consectetur adipiscing', - // contentPosition: 'left', - // image: ChillwhaleLogo, - // backgroundColor: '#9F9596', - // link: 'https://chillwhales.com/', - // }, - // { - // name: 'CupCo', - // description: 'Lorem ipsum dolor sit amet, consectetur adipiscing', - // contentPosition: 'left', - // image: CupCoLogo, - // backgroundColor: '#262626', - // link: 'https://...', - // }, -]; - -const carouselConfig: CarouselProps = { - interval: 8000, - stopAutoPlayOnHover: true, - autoPlay: false, - animation: 'slide', - duration: 1000, - swipe: true, - navButtonsAlwaysVisible: true, -}; - -type Item = { - name: string; - description: string; - contentPosition?: 'left' | 'middle' | 'right'; // TODO: delete this property (not used) - image: string; - backgroundColor: string; - link: string; -}; - -const DappsCarousel = () => { - const firstItems = items.slice(0, 4); - const secondItems = items.slice(4, 8); - const thirdItems = items.slice(8, 12); - - // 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]) - : [firstItems, secondItems, thirdItems]; - - return ( - - {groupedItems.map((group) => { - return ; - })} - - ); -}; - -type DappsBannerProps = { - isMobile: boolean; - dapps: Item[]; -}; - -export const DappsBanner: React.FC = ({ - dapps, - isMobile, -}) => { - const Element: React.FC<{ dapp: Item }> = ({ dapp }) => ( - -
- - - -
- - {dapp.name} - -

{dapp.description}

- - - ); - - return ( - - {dapps.map((item, index) => ( - // 12 columns layout, so `3` as value gives us 4 items per banner - // otherwise 1 item per slide for mobile screens - - - - ))} - - ); -}; - -export default DappsCarousel; diff --git a/src/components/LinkCards/LinkCards.module.scss b/src/components/LinkCards/LinkCards.module.scss new file mode 100644 index 0000000000..eb51737ad0 --- /dev/null +++ b/src/components/LinkCards/LinkCards.module.scss @@ -0,0 +1,37 @@ +.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; + 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 }) => ( +
+ {links.map((item) => ( + +

{item.showAsCode ? {item.title} : item.title}

+

{item.description}

+ + ))} +
+); + +export default LinkCards; diff --git a/src/components/LinksBox/LinksBox.module.scss b/src/components/LinksBox/LinksBox.module.scss index eb51737ad0..4009f604e4 100644 --- a/src/components/LinksBox/LinksBox.module.scss +++ b/src/components/LinksBox/LinksBox.module.scss @@ -1,37 +1,21 @@ -.containerBoxLinks { - display: flex; - flex-direction: column; - gap: 1rem; - text-align: left; - - a { - max-width: 100% !important; - } -} - -.boxLink { +.linksBox { display: block; - background-color: #f5f5f598; + background-color: #f5f5f577; + text-align: left; border-radius: 8px; - padding: 1.5rem; + padding: 1.25rem 2.75rem; transition: all 0.2s ease; text-decoration: none; &:hover { - background-color: #eaeaea83; - 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; + li { + list-style-type: none; + margin-left: 0; + padding-left: 0; + margin-bottom: 0.25rem; + list-style-position: inside; } } diff --git a/src/components/LinksBox/index.tsx b/src/components/LinksBox/index.tsx index d43cee0a10..7b8ab19926 100644 --- a/src/components/LinksBox/index.tsx +++ b/src/components/LinksBox/index.tsx @@ -1,25 +1,20 @@ import React from 'react'; -import styles from './LinksBox.module.scss'; import Link from '@docusaurus/Link'; -type LinksBoxProps = { - links: { - title: string; - link: string; // use relative path - description?: string; - showAsCode: boolean; - }[]; -}; +import styles from './LinksBox.module.scss'; -const LinksBox: React.FC = ({ links }) => ( - -); +type LinksProps = { + links: { text: string; link: string }[]; +}; -export default LinksBox; +export default function LinksBox({ links }: LinksProps) { + return ( +
    + {links.map(({ text, link }, index) => ( +
  • + {text} +
    • + ))} +
+ ); +} diff --git a/src/components/LinksList/index.tsx b/src/components/LinksList/index.tsx deleted file mode 100644 index af829c04eb..0000000000 --- a/src/components/LinksList/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import Link from '@docusaurus/Link'; - -type LinksProps = { - links: { text: string; link: string }[]; -}; - -export default function LinksList({ links }: LinksProps) { - return ( -
    - {links.map(({ text, link }, index) => ( -
  • - {text} -
    • - ))} -
- ); -} 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..448106220d --- /dev/null +++ b/src/components/Slider/index.tsx @@ -0,0 +1,108 @@ +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 = ({ items, isMobile }) => { + const Element: React.FC<{ item: Item }> = ({ item }) => ( + +
+ + + +
+ {item.name} +

{item.description}

+ + + ); + + 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/css/custom.css b/src/css/custom.css index 62c498a895..888a7dd5e5 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -301,6 +301,10 @@ table#erc721-to-lsp8-table tr { background-color: transparent; } -#container-search button.DocSearch.DocSearch-Button { +#home-search button.DocSearch.DocSearch-Button { width: 25rem; } + +footer { + margin-top: 3rem; +} diff --git a/src/pages/accordion.js b/src/pages/accordion.js new file mode 100644 index 0000000000..97445c1111 --- /dev/null +++ b/src/pages/accordion.js @@ -0,0 +1,202 @@ +const accordionData = [ + { + summary: 'General', + icon: 'material-symbols:counter-1', + details: [ + { + question: 'Why is there new standards on LUKSO?', + answer: + 'LUKSO created a new set of Blockchain standard to solve the existing issues with other standards like ERCs. Such issues include security around tokens / NFTs approvals, limited metadata, lack of interoperability due to various token standards implementing different functions for notifications (or none), or the requirements for users to have to pay for gas. The LSP standards provide a better approach to these issues, such as a `universalReceiver` function (from the LSP1 Universal Receiver standard) to notify and react on these notifications, a flexible and extended metadata structure using ERC725Y, a more secure to manage permissions and approvals using the LSP6 Key Manager, and gas-less transactions to onboard users easily without requiring them to learn upfront the concept of gas and require them to acquire native tokens upfront.', + 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 and not a Layer 2 to start as its own ecosystem. This allows it to have its own community and set of applications from the start, compared to building new standards and applications on Ethereum where user base and different applications standards are used and congested. However, since LUKSO is an EVM-based network (the same tech stack as Ethereum), any tools and technology from Ethereum can be used to build on LUKSO as well. This allows developers to easily build with tools that they know and port their applications from Ethereum to LUKSO, and vice versa.', + link: '/learn/overview', + linkLabel: 'Learn more', + }, + { + question: + 'What are the advantages offered by the LUKSO LSP Standards 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, in a secure way, and building applications that are more user centric and offer a better user experience in web3.', + link: '/learn/benefits-lukso-standards', + linkLabel: 'Learn more', + }, + { + question: + 'What are the key differences between the LUKSO LSP Standards and the Ethereum ERC Standards?', + answer: + 'The main differences between the LUKSO LSP Standards and the Ethereum ERC Standards are the following: \n 1. LUKSO LSP Standards are designed to be more secure and flexible. \n 2. LUKSO LSP Standards are designed to be more interoperable. \n 3. LUKSO LSP Standards are designed to be more developer friendly. \n 4. LUKSO LSP Standards are designed to be able to build applications that are more user centric, and offer a better user experience getting started with web3.', + link: '/learn/benefits-lukso-standards', + linkLabel: 'Learn more', + }, + { + question: 'What can be built using the LUKSO 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 has all the features of a traditional web3 wallet like Metamask, except that it is a smart account (powered by a smart contract). Overall, a Universal Profile (and the Universal Profile Browser Extension) is more user-friendly and more oriented for non-technical users, compared to wallet users who need to be familiar with safeguarding private keys, having to pay for gas, verifying opaque transactions in the wallet before confirming themIn addition, it offers more features than a smart account, such as fine-grained permissioning to allow you to control your profile from multiple devices', + link: '/learn/benefits-lukso-standards#universal-profiles-vs-smart-wallets', + linkLabel: 'Learn more', + }, + { + question: 'How do I connect my dApp to a profile?', + answer: + 'The same way as you connect any wallet to a dApp. There is no difference. You can use any of the methods that you would use with other wallets (EIP-6963 Injected Provider Discovery, injected provider or Multi provider). See our dedicated page for a tutorial on how to connect your UP to your dApp and use 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 (virtually) an unlimited amount of data. The data can be anything of any type. Examples of data that can be stored in a UP includes: list of issued and received assets, profile details (biography, profile and cover picture, website and social links), followers, permissions and dApps settings, your favourite musics, the list of community you are engaging with, etc... It's up to your imagination to invent what you want to store and fetch from your Universal Profile.", + }, + { + question: 'How do I read the data from a profile?', + answer: + 'There are various ways to read and fetch data from a Universal Profile. At the core level, it is done by calling the `getData` function on the Universal Profile smart contract with any web3 library, passing the data key you want to read information from. However, this is a very low-level and technical way to do so, and we provide various Javascript library such as _erc725.js_ or _lsp-utils.js_ which make it easier for you to fetch any data from a Universal Profile.', + link: '/learn/universal-profile/metadata/read-profile-data', + linkLabel: 'Learn more', + }, + { + question: 'How do I change permissions on the Universal Profile?', + answer: + 'You can change permissions from a Universal Profile either from the UP Browser extension, or from a dApp. See our following guide to learn how to set permissions for any address.', + link: '/learn/universal-profile/key-manager/grant-permissions', + linkLabel: 'Learn more', + }, + { + question: 'How do I send a gasless transaction?', + answer: + "The Universal Profile browser extension automatically uses the relayer when a transaction screen appears. Alternatively, you can use our relayer API. See our documentation for more infos and guides. Otherwise, if you want an address to submit a transaction on behalf of another address and pay for the gas, you can follow our guide 'How to send relay transactions' to prepare the transaction data, sign it and dispatch it using any private key that holds funds to pay for the gas.", + link: '/learn/universal-profile/key-manager/execute-relay-transactions', + linkLabel: 'Learn more', + }, + { + question: 'How can I deploy a Universal Profile?', + answer: + 'There are 3 ways to deploy a Universal Profile (from the easiest to the hardest way): \n 1. create a Universal Profile using the UP Browser Extension \n 2. Use our relayer API to deploy a Universal Profile for your users and get them to benefit from gas-less transactions (up to a certain monthly quota) . \n 3. Using the LSP23 Universal Factory by interacting with the smart contract.', + 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: + 'Depending if you are a user or developer, you can transfer a token or NFT by: \n - For users: using any dApp that allow this functionality (such as universaleverything.io). \n 2. For developers: by creating a script in your dApp that calls the `transfer(...)` function on the Token or NFT contract. \n Note that transferring a token or NFT does not necessarily need to be done by a Universal Profile. Since LUKSO is fully EVM-compatible, any wallet connected to the LUKSO network can trigger a transaction.', + }, + { + question: 'How do I read metadata from a Token or NFT', + answer: + 'You can read the metadata of the Token or NFT collection by calling the `getData(bytes32)` function with the parameter `LSP4Metadata` data key. We recommend using erc725.js to do this easily.', + link: '/learn/digital-assets/metadata-management/read-asset-data', + linkLabel: 'Learn more', + }, + { + question: 'How can I edit the metadata of my token, after deployment?', + answer: + 'You can edit the metadata of your token by calling the `setData(bytes32,bytes)` function with the parameters `LSP4Metadata` for the data key and the second parameter data value as the hex encoded `VerifiableURI` of the JSON metadata. Use our guide to learn how to edit the token metadata.', + link: '/learn/digital-assets/metadata-management/edit-token-metadata', + linkLabel: 'Learn more', + }, + { + question: 'How does LSP7 token standard differ from ERC20', + answer: + 'LSP7 differ from ERC20 in multiple ways. First the token contract can hold any metadata thanks to its ERC725Y storage. Second, the token contract notifies the sender and recipient on transfer, mint and burn via the `universalReceiver(...)` callback function. Third, the function `transfer` function of LSP7 includes a boolean `force` parameter that only allow to transfer tokens to contracts that implement a `universalReceiver(...)` function, so to ensure that can handle receiving the token and therefore hold it and re-transfer it. Finally the transfer function signature of LSP7 is similar to LSP8, which makes it easier for developer to reason about when building applications that deal with tokens and NFTs (compared to ERC20 and ERC721 which have two different functions `transfer(...)` and `safeTransferFrom(...)`.', + link: '/learn/benefits-lukso-standards#lsp78-token-standards-vs-erc20721', + linkLabel: 'Learn more', + }, + { + question: 'How does LSP8 token standard differ from ERC721', + answer: + 'LSP8 differ from ERC721 in multiple ways. First the NFT collection contract can hold any metadata thanks to its ERC725Y storage. Second, the NFT contract notifies the sender and recipient on transfer, mint and burn via the `universalReceiver(...)` callback function. Third, the function `transfer` function of LSP8 includes a boolean `force` parameter that only allow to transfer tokens to contracts that implement a `universalReceiver(...)` function, so to ensure that can handle receiving the token and therefore hold it and re-transfer it. Finally the transfer function signature of LSP8 is similar to LSP7, which makes it easier for developer to reason about when building applications that deal with tokens and NFTs (compared to ERC721 and ERC20 which have two different functions `safeTransferFrom(...)` and `transfer(...)`.', + 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: + "There are many that the LSP7 and LSP8 standards offer compared to ERC20 and ERC721. This include the ability for the token contract to contain as many customizable information as wanted (called 'metadata'), notifying the sender and recipient on token transfer (via callback hook functions) as well as easier to reason interface and set of functions for developers.", + 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/pages/index.js b/src/pages/index.js index 2261cbe3e5..d343fd8335 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,13 +10,6 @@ import IntegrationIcon from '../../static/img/icons/icon-integrations-gradient.p import NetworksIcon from '../../static/img/icons/icon-networks-gradient.png'; import ToolsIcon from '../../static/img/icons/icon-tools-gradient.png'; -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'; - // components import Link from '@docusaurus/Link'; import IconsGallery from '../components/IconsGallery'; @@ -25,24 +18,33 @@ import Box from '../components/Box'; import CallToActionButton from '../components/CallToActionButton'; import Headline from '../components/Headline'; import CustomAccordion from '../components/Accordion'; -import DappsSlider from '../components/Carousel'; -import LinksList from '../components/LinksList'; +import Slider from '../components/Slider'; import LinksBox from '../components/LinksBox'; +import LinkCards from '../components/LinkCards'; // data -import QuestionsAnswers from './questions-answers.json'; +import accordionData from './accordion.js'; +import { + migrateGuides, + universalProfileGuides, + digitalAssetsGuides, + toolsLinks, + networkLinks, + integrationPartners, + dappsSlider, +} from './links.js'; function Index() { return (
-
- +
- +
- + + ); } diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss index addcb28813..656a04a35e 100644 --- a/src/pages/index.module.scss +++ b/src/pages/index.module.scss @@ -91,27 +91,3 @@ margin-bottom: 3rem; } } - -.guideBox { - ul { - display: block; - background-color: #f5f5f577; - text-align: left; - border-radius: 8px; - padding: 1.25rem 2.75rem; - transition: all 0.2s ease; - text-decoration: none; - - &:hover { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - } - - li { - list-style-type: none; - margin-left: 0; - padding-left: 0; - margin-bottom: 0.25rem; - list-style-position: inside; - } - } -} diff --git a/src/pages/links.js b/src/pages/links.js new file mode 100644 index 0000000000..b385663285 --- /dev/null +++ b/src/pages/links.js @@ -0,0 +1,317 @@ +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'; + +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/services/relayer-developer#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: + 'Connect to LUKSO Mainnet or Testnet in one click or 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: + 'Be part in making the LUKSO Network secure and decentralized by running your own node.', + }, + { + title: 'Become a Validator', + link: '/networks/mainnet/become-a-validator', + showAsCode: false, + description: + 'Run your own validator node and start earning rewards! (available with DappNode!)', + }, +]; + +export const toolsLinks = [ + { + title: 'Relayer API', + link: '', + showAsCode: false, + description: + 'Create Universal Profiles easily and get your users to benefit from gas less transactions.', + }, + { + title: 'Smart Contracts Packages', + link: '', + showAsCode: false, + description: + 'The smart contract implementation of the LSP standards in Solidity.', + }, + { + title: 'erc725.js', + link: '', + showAsCode: true, + description: + 'Set and retrieve data easily in Universal Profile and Digital Assets.', + }, + { + title: 'eip191-signer.js', + link: '', + showAsCode: true, + description: + 'Sign data easily to submit gas-less transactions via execute relay calls.', + }, + { + title: 'lsp-utils.js', + link: '', + showAsCode: true, + description: + 'Easy to use helper functions to interact with smart contracts powered by the LSPs.', + }, +]; + +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', + }, +]; + +// 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'; + +// 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/questions-answers.json b/src/pages/questions-answers.json deleted file mode 100644 index 762a655a74..0000000000 --- a/src/pages/questions-answers.json +++ /dev/null @@ -1,174 +0,0 @@ -[ - { - "summary": "General", - "icon": "material-symbols:counter-1", - "details": [ - { - "question": "Why is there new standards on LUKSO?", - "answer": "LUKSO created a new set of Blockchain standard to solve the existing issues with other standards like ERCs. Such issues include security around tokens / NFTs approvals, limited metadata, lack of interoperability due to various token standards implementing different functions for notifications (or none), or the requirements for users to have to pay for gas. The LSP standards provide a better approach to these issues, such as a `universalReceiver` function (from the LSP1 Universal Receiver standard) to notify and react on these notifications, a flexible and extended metadata structure using ERC725Y, a more secure to manage permissions and approvals using the LSP6 Key Manager, and gas-less transactions to onboard users easily without requiring them to learn upfront the concept of gas and require them to acquire native tokens upfront.", - "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 and not a Layer 2 to start as its own ecosystem. This allows it to have its own community and set of applications from the start, compared to building new standards and applications on Ethereum where user base and different applications standards are used and congested. However, since LUKSO is an EVM-based network (the same tech stack as Ethereum), any tools and technology from Ethereum can be used to build on LUKSO as well. This allows developers to easily build with tools that they know and port their applications from Ethereum to LUKSO, and vice versa.", - "link": "/learn/overview", - "linkLabel": "Learn more" - }, - { - "question": "What are the advantages offered by the LUKSO LSP Standards 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, in a secure way, and building applications that are more user centric and offer a better user experience in web3.", - "link": "/learn/benefits-lukso-standards", - "linkLabel": "Learn more" - }, - { - "question": "What are the key differences between the LUKSO LSP Standards and the Ethereum ERC Standards?", - "answer": "The main differences between the LUKSO LSP Standards and the Ethereum ERC Standards are the following: \n 1. LUKSO LSP Standards are designed to be more secure and flexible. \n 2. LUKSO LSP Standards are designed to be more interoperable. \n 3. LUKSO LSP Standards are designed to be more developer friendly. \n 4. LUKSO LSP Standards are designed to be able to build applications that are more user centric, and offer a better user experience getting started with web3.", - "link": "/learn/benefits-lukso-standards", - "linkLabel": "Learn more" - }, - { - "question": "What can be built using the LUKSO 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 has all the features of a traditional web3 wallet like Metamask, except that it is a smart account (powered by a smart contract). Overall, a Universal Profile (and the Universal Profile Browser Extension) is more user-friendly and more oriented for non-technical users, compared to wallet users who need to be familiar with safeguarding private keys, having to pay for gas, verifying opaque transactions in the wallet before confirming themIn addition, it offers more features than a smart account, such as fine-grained permissioning to allow you to control your profile from multiple devices", - "link": "/learn/benefits-lukso-standards#universal-profiles-vs-smart-wallets", - "linkLabel": "Learn more" - }, - { - "question": "How do I connect my dApp to a profile?", - "answer": "The same way as you connect any wallet to a dApp. There is no difference. You can use any of the methods that you would use with other wallets (EIP-6963 Injected Provider Discovery, injected provider or Multi provider). See our dedicated page for a tutorial on how to connect your UP to your dApp and use 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 (virtually) an unlimited amount of data. The data can be anything of any type. Examples of data that can be stored in a UP includes: list of issued and received assets, profile details (biography, profile and cover picture, website and social links), followers, permissions and dApps settings, your favourite musics, the list of community you are engaging with, etc... It's up to your imagination to invent what you want to store and fetch from your Universal Profile." - }, - { - "question": "How do I read the data from a profile?", - "answer": "There are various ways to read and fetch data from a Universal Profile. At the core level, it is done by calling the `getData` function on the Universal Profile smart contract with any web3 library, passing the data key you want to read information from. However, this is a very low-level and technical way to do so, and we provide various Javascript library such as _erc725.js_ or _lsp-utils.js_ which make it easier for you to fetch any data from a Universal Profile.", - "link": "/learn/universal-profile/metadata/read-profile-data", - "linkLabel": "Learn more" - }, - { - "question": "How do I change permissions on the Universal Profile?", - "answer": "You can change permissions from a Universal Profile either from the UP Browser extension, or from a dApp. See our following guide to learn how to set permissions for any address.", - "link": "/learn/universal-profile/key-manager/grant-permissions", - "linkLabel": "Learn more" - }, - { - "question": "How do I send a gasless transaction?", - "answer": "The Universal Profile browser extension automatically uses the relayer when a transaction screen appears. Alternatively, you can use our relayer API. See our documentation for more infos and guides. Otherwise, if you want an address to submit a transaction on behalf of another address and pay for the gas, you can follow our guide 'How to send relay transactions' to prepare the transaction data, sign it and dispatch it using any private key that holds funds to pay for the gas.", - "link": "/learn/universal-profile/key-manager/execute-relay-transactions", - "linkLabel": "Learn more" - }, - { - "question": "How can I deploy a Universal Profile?", - "answer": "There are 3 ways to deploy a Universal Profile (from the easiest to the hardest way): \n 1. create a Universal Profile using the UP Browser Extension \n 2. Use our relayer API to deploy a Universal Profile for your users and get them to benefit from gas-less transactions (up to a certain monthly quota) . \n 3. Using the LSP23 Universal Factory by interacting with the smart contract.", - "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": "Depending if you are a user or developer, you can transfer a token or NFT by: \n - For users: using any dApp that allow this functionality (such as universaleverything.io). \n 2. For developers: by creating a script in your dApp that calls the `transfer(...)` function on the Token or NFT contract. \n Note that transferring a token or NFT does not necessarily need to be done by a Universal Profile. Since LUKSO is fully EVM-compatible, any wallet connected to the LUKSO network can trigger a transaction." - }, - { - "question": "How do I read metadata from a Token or NFT", - "answer": "You can read the metadata of the Token or NFT collection by calling the `getData(bytes32)` function with the parameter `LSP4Metadata` data key. We recommend using erc725.js to do this easily.", - "link": "/learn/digital-assets/metadata-management/read-asset-data", - "linkLabel": "Learn more" - }, - { - "question": "How can I edit the metadata of my token, after deployment?", - "answer": "You can edit the metadata of your token by calling the `setData(bytes32,bytes)` function with the parameters `LSP4Metadata` for the data key and the second parameter data value as the hex encoded `VerifiableURI` of the JSON metadata. Use our guide to learn how to edit the token metadata.", - "link": "/learn/digital-assets/metadata-management/edit-token-metadata", - "linkLabel": "Learn more" - }, - { - "question": "How does LSP7 token standard differ from ERC20", - "answer": "LSP7 differ from ERC20 in multiple ways. First the token contract can hold any metadata thanks to its ERC725Y storage. Second, the token contract notifies the sender and recipient on transfer, mint and burn via the `universalReceiver(...)` callback function. Third, the function `transfer` function of LSP7 includes a boolean `force` parameter that only allow to transfer tokens to contracts that implement a `universalReceiver(...)` function, so to ensure that can handle receiving the token and therefore hold it and re-transfer it. Finally the transfer function signature of LSP7 is similar to LSP8, which makes it easier for developer to reason about when building applications that deal with tokens and NFTs (compared to ERC20 and ERC721 which have two different functions `transfer(...)` and `safeTransferFrom(...)`.", - "link": "/learn/benefits-lukso-standards#lsp78-token-standards-vs-erc20721", - "linkLabel": "Learn more" - }, - { - "question": "How does LSP8 token standard differ from ERC721", - "answer": "LSP8 differ from ERC721 in multiple ways. First the NFT collection contract can hold any metadata thanks to its ERC725Y storage. Second, the NFT contract notifies the sender and recipient on transfer, mint and burn via the `universalReceiver(...)` callback function. Third, the function `transfer` function of LSP8 includes a boolean `force` parameter that only allow to transfer tokens to contracts that implement a `universalReceiver(...)` function, so to ensure that can handle receiving the token and therefore hold it and re-transfer it. Finally the transfer function signature of LSP8 is similar to LSP7, which makes it easier for developer to reason about when building applications that deal with tokens and NFTs (compared to ERC721 and ERC20 which have two different functions `safeTransferFrom(...)` and `transfer(...)`.", - "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": "There are many that the LSP7 and LSP8 standards offer compared to ERC20 and ERC721. This include the ability for the token contract to contain as many customizable information as wanted (called 'metadata'), notifying the sender and recipient on token transfer (via callback hook functions) as well as easier to reason interface and set of functions for developers.", - "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." - } - ] - } -] diff --git a/src/theme/TOC/index.js b/src/theme/TOC/index.js index 2611bd6b35..84d085077a 100644 --- a/src/theme/TOC/index.js +++ b/src/theme/TOC/index.js @@ -2,6 +2,8 @@ import React from 'react'; import clsx from 'clsx'; import TOCItems from '@theme/TOCItems'; import styles from './styles.module.css'; +import DiscordLogo from '../../../static/img/icons/discord.svg'; + // Using a custom className // This prevents TOCInline/TOCCollapsible getting highlighted by mistake const LINK_CLASS_NAME = 'table-of-contents__link toc-highlight'; @@ -14,16 +16,35 @@ export default function TOC({ className, ...props }) { linkClassName={LINK_CLASS_NAME} linkActiveClassName={LINK_ACTIVE_CLASS_NAME} /> -
+
- Question? Give us feedback → +

+ Found an error in the docs? +
+ Give us feedback → +

+ + +

+ Questions? Want to learn more? +

+

+ Ask your questions to the team or community on the LUKSO Discord + server. +

+
); } diff --git a/src/theme/TOC/styles.module.css b/src/theme/TOC/styles.module.css index 4b5d9f462e..5f4f20fc43 100644 --- a/src/theme/TOC/styles.module.css +++ b/src/theme/TOC/styles.module.css @@ -5,6 +5,15 @@ top: calc(var(--ifm-navbar-height) + 1rem); } +.feedbacks { + margin-top: 3rem; +} + +.feedbacks p { + margin-bottom: 0.5rem; + font-size: 0.8rem; +} + @media (max-width: 996px) { .tableOfContents { display: none;