Skip to content

Commit

Permalink
Merge pull request #1101 from lukso-network/86bzg91hu
Browse files Browse the repository at this point in the history
Update Styling for Getting Start (now Quick Start) page
  • Loading branch information
CJ42 authored Aug 2, 2024
2 parents 831031f + 5bc1566 commit b82d2ea
Show file tree
Hide file tree
Showing 13 changed files with 2,940 additions and 2,192 deletions.
16 changes: 8 additions & 8 deletions docs/contracts/interface-ids.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@ const LSP0_INTERFACE_ID = INTERFACE_IDS.LSP0ERC725Account;
<details>
<summary>Note on importing <code>INTERFACE_IDS</code> in Hardhat Typescript projects</summary>

If you are trying to import the `INTERFACE_IDS` within a Hardhat Typescript project, use the following import syntax:
If you are trying to import the `INTERFACE_IDS` within a Hardhat Typescript project, use the following import syntax:

```ts
import { INTERFACE_IDS } from '@lukso/lsp-smart-contracts/constants';
```ts
import { INTERFACE_IDS } from '@lukso/lsp-smart-contracts/constants';

// This will raise an error if you have ES Lint enabled,
// but will allow you to import the constants in a Hardhat + Typescript based project.
const LSP0_INTERFACE_ID = INTERFACE_IDS.LSP0ERC725Account;
```
// This will raise an error if you have ES Lint enabled,
// but will allow you to import the constants in a Hardhat + Typescript based project.
const LSP0_INTERFACE_ID = INTERFACE_IDS.LSP0ERC725Account;
```

This is due to the current issue that it is not possible to import ES Modules in Hardhat Typescript projects.
This is due to the current issue that it is not possible to import ES Modules in Hardhat Typescript projects.

</details>

Expand Down
6 changes: 3 additions & 3 deletions docs/learn/digital-assets/token/create-lsp7-token.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This guide will walk you through the process of creating and deploying a custom

:::tip

You can learn about the project setup and Hardhat workflow by checking the [Getting Started](../../getting-started.md) section.
You can learn about the project setup and Hardhat workflow by checking the [Getting Started](../../getting-started.mdx) section.

:::

Expand Down Expand Up @@ -129,7 +129,7 @@ deployToken()
});
```

If you have not yet setup the LUKSO networks and private keys in Hardhat, please check out the previous [Getting Started](../../getting-started.md) guide for smart contract developers. If you set up the Hardhat configuration, you can execute the deployment script using the following command:
If you have not yet setup the LUKSO networks and private keys in Hardhat, please check out the previous [Getting Started](../../getting-started.mdx) guide for smart contract developers. If you set up the Hardhat configuration, you can execute the deployment script using the following command:

```bash
npx hardhat --network luksoTestnet run scripts/deployLSP7AsUP.ts
Expand All @@ -155,7 +155,7 @@ module.exports = [
];
```

To verify the deployed token, you can use the **blockscout API properties** set up within the [Getting Started](../../getting-started.md) section. If you configured the API, you will be able to run the verification by specifying the _token address_, _paramter file_, and _network_:
To verify the deployed token, you can use the **blockscout API properties** set up within the [Getting Started](../../getting-started.mdx) section. If you configured the API, you will be able to run the verification by specifying the _token address_, _paramter file_, and _network_:

```bash
npx hardhat verify <myTokenAddress> --constructor-args ./verify/myCustomToken.ts --network luksoTestnet
Expand Down
133 changes: 0 additions & 133 deletions docs/learn/getting-started.md

This file was deleted.

202 changes: 202 additions & 0 deletions docs/learn/getting-started.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
---
sidebar_label: '🏎️ Quick Start'
description: Introduction to the LUKSO Ecosystem - why choose LUKSO? Who is LUKSO intended for?
---

import CallToActionButton from '@site/src/components/CallToActionButton';
import CardWithImage from '@site/src/components/CardWithImage';
import Chip from '@site/src/components/Chip';

import DappDevIcon from '../../static/img/learn/DappDevIcon.png';
import ValidatorIcon from '../../static/img/learn/ValidatorIcon.png';
import SmartContractDevIcon from '../../static/img/learn/SmartContractDevIcon.png';

export const CardData = [
{
image: DappDevIcon,
imageTitle: 'Dapp Developer Icon',
cardHeading: 'Dapp Developer',
cardContent: [
{
linkText: 'Fork our boilerplate dapp',
linkPath: 'https://github.com/lukso-network/tools-dapp-boilerplate',
},
{
linkText: 'Explore code examples in our playground repository',
linkPath: 'https://github.com/lukso-network/lukso-playground',
},
],
},
{
image: ValidatorIcon,
imageTitle: 'Validator Icon',
cardHeading: 'Validators',
cardContent: [
{
linkText: 'Run a node for LUKSO',
linkPath: '../../networks/mainnet/running-a-node',
},
{
linkText: 'Become a Validator',
linkPath: '../../networks/mainnet/become-a-validator',
},
{
linkText: 'Checkout the Network Parameters',
linkPath: '../../networks/mainnet/parameters',
},
],
},
{
image: SmartContractDevIcon,
imageTitle: 'Smart Contract Developer Icon',
cardHeading: 'Smart Contract Developer',
cardContent: [
{
linkText: 'Get started with Tokens and NFTs',
linkPath: '../learn/digital-assets/getting-started',
},
{
linkText: 'Create a token',
linkPath: '../learn/digital-assets/create-lsp7-token',
},
{
linkText: 'Migrate ERC20 a token to LSP7',
linkPath: '../learn/digital-assets/migrate-erc20-to-lsp7',
},
],
},
];

# Quick Start

## What is LUKSO?

LUKSO is a Layer 1 EVM chain that uses the same consensus as Ethereum. It is fundamentally the same as Ethereum at a network level but with some innovative differences.

<table>
<thead>
<tr>
<th>🆙 **Universal Profiles** 🆙</th>
<th>🪙 **Tokens** 🪙</th>
<th>🌅 **NFTs** 🌅</th>
</tr>
</thead>
<tbody>
<tr>
<td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
Smart contract based profiles are the essential foundation for a better
web3 experience.
</td>
<td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
Extensible Token that move us beyond DeFi. The future of blockchain is
social.
</td>
<td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
Flexible NFTs that are extensible and directly composable with Universal
Profiles.
</td>
</tr>
<tr>
<td style={{ textAlign: 'center', verticalAlign: 'middle' }}>
<div className="chip-container">
<Chip label="Visual" />
<Chip label="Upgradeable" />
<Chip label="Security" />
<Chip label="Gas-less" />
<Chip label="Smart" />
<Chip label="Extensible" />
</div>
</td>
<td>
<div className="chip-container">
<Chip label="Safer" />
<Chip label="Token Icons" />
<Chip label="Unlimited Metadata" />
<Chip label="Updatable" />
<Chip label="Extensible" />
<Chip label="Notifying" />
<Chip label="Unified" />
</div>
</td>
<td>
<div className="chip-container">
<Chip label="Authentic" />
<Chip label="Safer" />
<Chip label="Unlimited Metadata" />
<Chip label="Updatable" />
<Chip label="Better IDs" />
<Chip label="Iteratable" />
<Chip label="Batch Transfers" />
</div>
</td>
</tr>
</tbody>
</table>

:::success
Learn more about the LSPs 🧱
To learn more about the main building blocks of LUKSO check out the [LUKSO Standard Proposals (**LSPs**)](../standards/introduction.md) page.
:::

## How do I start?

<div>
<CallToActionButton
style={{
display: 'inline-block !important',
}}
icon="material-symbols:counter-1"
color="white"
target="_blank"
link="https://chromewebstore.google.com/detail/universal-profiles/abpickdkkbnbcoepogfhkhennhfhehfn"
text="Install the Universal Profile Browser Extension 🧩"
/>

{' '}

<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '3em',
}}
>
<p>⬇</p>
</div>

{' '}

<CallToActionButton
icon="material-symbols:counter-2"
color="white"
target="_blank"
link="https://my.universalprofile.cloud"
text="Create your Universal Profile 🆙"
/>

<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '3em',
}}
>
<p>⬇</p>
</div>
</div>

<CallToActionButton
icon="material-symbols:counter-3"
color="white"
target="_blank"
link="https://www.lukso.network/ecosystem"
text="Explore the Ecosystem 🌐"
/>

## Ready to build?

<CardWithImage CardData={CardData} />

## Join the Community

If you need anything else, then either [contact the team building LUKSO](https://support.lukso.network/contact-us) or ask the [Developer Community on Discord](https://discord.com/channels/359064931246538762/585786253992132609) are happy to help.
Loading

0 comments on commit b82d2ea

Please sign in to comment.