Skip to content

Commit

Permalink
Merge branch 'liskdocs-19-mobile-dapp-guide' into gh-pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Tschakki committed Jan 10, 2025
2 parents 6c6a0cb + 6b4052c commit 2ea80a3
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 27 deletions.
8 changes: 8 additions & 0 deletions docs/building-on-lisk/add-token-to-lisk/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ For step-by-step instructions on how to deploy ERC-20 tokens on Lisk, check the

### Step 2: Submit details of your token
Follow the instructions in the [GitHub repository](https://github.com/ethereum-optimism/ethereum-optimism.github.io) and submit a PR containing the required details for your token.
Especially, follow the Lisk-specific instructions detailed in the section [Specifying chains](https://github.com/ethereum-optimism/ethereum-optimism.github.io?tab=readme-ov-file#specifying-chains).

**Important:** You must specify in your token's `data.json` file a section for `lisk-sepolia` and/or `lisk`.

Expand All @@ -93,3 +94,10 @@ For example, [this PR](https://github.com/ethereum-optimism/ethereum-optimism.gi

### Step 3: Await final approval
Reviews are regularly conducted by the Lisk team and you should receive a reply within 24-72 hours (depending on if the PR is opened on a weekday, weekend or holiday).

## Step 4 : Add token to Gelato Bridge
To add your token to the [Gelato Bridge](https://bridge.lisk.com/), reach out to the Lisk team on [Lisk Discord](https://lisk.chat) with the details of the token:

- Go to the `#lisk-dev` channel.
- Tag a moderator, ask them to add your token to the Gelato Bridge, and share the link to your PR from [step 2: token details](#step-2-submit-details-of-your-token).
- The Lisk team will then coordinate with Gelato to get the token added to the Gelato Bridge.
52 changes: 26 additions & 26 deletions docs/building-on-lisk/web3-app-development.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,14 @@ On this page, you will learn what Web3 applications are, how they differ from We
### Evolution of the Web

Since the internet was born, there has been constant innovation in how people use the internet to communicate and interact with each other.
To describe important steps in this innovation, websites and apps are generally categorized into different Web "versions":
To describe important steps in this innovation, websites, and apps are generally categorized into different Web "versions":

<Tabs queryString="web-version">
<TabItem value="web1" label="Web 1.0">
Web 1.0 is the first "version" of the Web, i.e. the first generation of websites that occured when the internet became available to the broader public around 1990.
Web 1.0 is the first "version" of the Web, i.e., the first generation of websites that occurred when the Internet became available to the broader public around 1990.
Web 1.0 is often referred to as the "static" or "read-only" web, consisting mainly of simple static HTML pages with limited interactivity.

However, some Web 2.0 capabilities were present in the days of Web 1.0, but were implemented differently.
However, some Web 2.0 capabilities were present in the days of Web 1.0 but were implemented differently.
For example, a Web 1.0 site may have had a guestbook page for visitor comments, instead of a comment section at the end of each page (typical of Web 2.0).

</TabItem>
Expand All @@ -48,16 +48,16 @@ To describe important steps in this innovation, websites and apps are generally
The term "Web 2.0" was coined by Darcy DiNucci, an information architecture consultant, in her January 1999 article [Fragmented Future](http://darcyd.com/fragmented_future.pdf).
:::

Web 2.0 is the era where social media, [web applications](https://en.wikipedia.org/wiki/Web_application), and mobile apps come to the rise.
Web 2.0 is the era where social media, [web applications](https://en.wikipedia.org/wiki/Web_application), and mobile apps came to the rise.
Because of the new social features and improved user experience that Web 2.0 apps offered, the number of users interacting with the web increased significantly, leading to the creation of many new web services and applications.
Some of the most popular examples for Web 2.0 applications are Facebook, Twitter/X, Amazon and YouTube.
Some of the most popular examples of Web 2.0 applications are Facebook, X, Amazon, and YouTube.

Many of these applications and services became important pillars of the internet and peoples life, and even society as a whole.
However, the more relevant these applications became, the more obvious and relevant became their limitations, as users had to trust the companies behind these applications with their data and privacy.
Many of these applications and services became important pillars of the internet and people's lives, and even society as a whole.
However, the more relevant these applications became, the more obvious and relevant their limitations became, as users had to trust the companies behind them with their data and privacy.

<h5>Web2 limitations</h5>

Though Web 2.0 revolutionized how people use the web in a positive way, it's characteristics lead to certain disadvantages, for users who interact with Web2 applications:
Though Web 2.0 revolutionized how people positively used the web, a few of its characteristics led to certain disadvantages for users interacting with Web2 applications. For example:

- Censorship
- Lack of transparency
Expand All @@ -66,27 +66,27 @@ To describe important steps in this innovation, websites and apps are generally
</TabItem>
<TabItem value="web3" label="Web3" default>
Web3 (also known as Web 3.0) is the next step in the evolution of the Web, aiming to address the [limitations of Web 2.0](web3-app-development.mdx?web-version=web2#web2-limitations).
Web3 is the idea of a decentralized internet, where users are in control over their data.
Web3 is based on the idea of a decentralized internet, where users are in control over their data.

:::info
The term "Web3" was coined by Polkadot founder and Ethereum co-founder Gavin Wood in 2014, referring to a [decentralized online ecosystem based on the blockchain](https://www.wired.com/story/web3-gavin-wood-interview/).
:::

2015, when Ethereum launched as the world's first programmable blockchain, marked the beginning of the Web3 era.
2015 marked the beginning of the Web3 era when Ethereum launched as the world's first programmable blockchain.
Web3 applications are decentralized applications (also known as "dApps") that run on a blockchain, allowing users to interact with each other and the blockchain in a trustless way.
This puts users in control of their data and privacy, removing the need to trust a central authority.

Web3 apps are built on top of blockchain technology, which allows users greater ownership and control over their data.
This provides new features and allows services that are not feasible in the Web2 world.
Often, Web3 apps combine other cutting edge technologies like AI to provide unique new user experiences.
Often, Web3 apps combine other cutting-edge technologies like AI to provide unique and new user experiences.

New types of Web3 apps include:

- DeFi (Decentralized Finance), for example:
- DEXs (Decentralized Exchanges)
- GameFi (Gaming Finance)
- Staking and yield farming platforms
- Decentralized crowdfunding and -investing platforms
- Decentralized crowdfunding and investing platforms
- Decentralized lending and borrowing
- Prediction markets
- Asset / RWA tokenization platforms
Expand All @@ -102,7 +102,7 @@ To describe important steps in this innovation, websites and apps are generally

### Web2 vs Web3 app development
#### Languages
Concerning frontend app development, there aren't many differences between Web2 and Web3 apps, when it comes to programming languages.
Concerning frontend app development, there aren't many differences between Web2 and Web3 apps when it comes to programming languages.
All languages that are typically used for Web2 app development can also be used for Web3 app development.
In the end, Web3 apps can even look and feel exactly like Web2 apps for users, because their frontend is built with the same technologies.

Expand All @@ -115,29 +115,29 @@ As mentioned above, the Web2 and Web3 app frontend development is very similar.
Theoretically, you could build a Web3 app with nearly the same tech stack as a Web2 app, like Next.js, Vite, etc.
The only thing you need to add is a way for your application to interact with the blockchain, see [Data access](#data-access).

To support developers, many blockcain platforms offer their own SDKs and tools to interact with their blockchain, which can make development easier and more efficient.
To support developers, many blockchain platforms offer their own SDKs and tools to interact with their blockchain, which can make development easier and more efficient.
There are also SDKs for Web3 app development that provide a complete tech stack, like [thirdweb](https://thirdweb.com/) or [Alchemy](https://www.alchemy.com/), which take away most of the complexity of blockchain development and provide a smooth developer experience.
thirdweb supports [Lisk](https://thirdweb.com/lisk) and many other EVM-compatible blockchains.

#### Data storage
In Web2 apps, data is typically stored in a centralized database.
In Web3 apps, some data is stored on the blockchain, i.e. a decentralized database.
How the data is stored is defined inside of smart cotracts.
In Web3 apps, some data is stored on the blockchain, i.e., a decentralized database.
How the data is stored is defined inside of smart contracts.
However, not all data should always be stored on the blockchain, as it is quite expensive and slow to store large amounts of data onchain.
Therefore, Web3 apps sometimes use a combination of onchain storage and offchain storage.

#### Data access
In Web2 apps, data from the database is accessed through APIs.
In Web3 apps, blockchain data is accessed through smart contracts.
They usually expose public functions that can be called by the app frontend to read and/or write data from/to the blockchain, similar to a classical API.
To interact with the blockchain, there are various libraries and frameworks available, like [viem](https://viem.sh/), [web3.js](https://web3js.readthedocs.io) or [ethers.js](https://docs.ethers.io).
To interact with the blockchain, there are various libraries and frameworks available, like [viem](https://viem.sh/), [web3.js](https://web3js.readthedocs.io), or [ethers.js](https://docs.ethers.io).

### Further regarding
- [Introduction to Web3](https://ethereum.org/en/web3/) *by Ethereum*

## Getting started with Web3 app development

To get started with the actual development of a Web3 app, you need to be clear about the the right app **platform(s)** to build your Web3 app on.
To get started with the actual development of a Web3 app, you need to be clear about the right **platform(s)** to build your Web3 app on.
The following sections will give you an overview of the different platforms you can choose from to build your Web3 app on, including further resources and guides to get you started with the app development.

### Web3 Mobile Apps
Expand All @@ -154,26 +154,26 @@ Last but not least, mobile apps allow users to access your app on the go, which

### Web3 Web Apps
The main advantage of web applications is that they are platform-independent and can be accessed from any device with a web browser.
Additionally, they don't need to be installed by the user, and can be used directly in the browser.
Additionally, they don't need to be installed by the user and can be used directly in the browser.

#### Development resources
- [How to Build an NFT Minting dApp](https://blog.thirdweb.com/guides/build-nft-minting-dapp-with-thirdweb-guide/) *by thirdweb*

### Web3 PWAs
A Progressive Web App (= PWA) allows users to install your web app to their device.
They appear as native apps on your desktop or mobile device and offer features like offline support and push notifications.
This way, PWAs allow to develop an application that can be used via browser[^1], mobile, or desktop application alike.
Therefore, PWAs are a great choice to reach users on different platforms simultaneously.
A Progressive Web App (PWA) allows users to install a web app on their devices.
They appear as native apps on desktop or mobile devices and offer features like offline support and push notifications.
This way, PWAs allow the development of an application that can be used via a browser[^1], mobile, or desktop application alike.
Therefore, PWAs are a great choice for reaching users on different platforms simultaneously.

Additionally, PWAs allow a user to directly install the app through your web app, without need to visit an app store.
Additionally, PWAs allow a user to directly install the app through your web app without the need to visit an app store.
This allows you to serve the app directly to the users, without bothering about restrictions of app stores on what is allowed for blockchain applications.
In-app purchase fees can also be avoided because users no longer need to go through the app store.

[^1]: Only supported in PWA-compatible browsers (most Chromium based browsers should work).
[^1]: Only supported in PWA-compatible browsers (most Chromium-based browsers should work).

#### Development resources
- [How to Create a Web3 PWA](https://blog.thirdweb.com/guides/how-to-create-a-web3-pwa/) *by thirdweb*
- [Video tutorial: Build a web3 PWA](https://www.youtube.com/watch?v=VU8i-dn2_GE) *by thirdweb*
- [Video tutorial: Build a Web3 PWA](https://www.youtube.com/watch?v=VU8i-dn2_GE) *by thirdweb*

{/* ### Web3 Desktop apps
Desktop apps are native applications that are installed on a user's computer.
Expand Down
2 changes: 1 addition & 1 deletion docs/intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ keywords:
scalable,
secured by Ethereum,
Optimism's L2 rollup,
Optimism's Super chain,
Optimism's Superchain,
interoperable,
great user experience,
shared liquidity,
Expand Down

0 comments on commit 2ea80a3

Please sign in to comment.