From 9f4fa4f4583ac2ac6eca0f5fb11e8e81ce096bc7 Mon Sep 17 00:00:00 2001 From: Tschakki Date: Wed, 10 Apr 2024 11:04:14 +0200 Subject: [PATCH] Deploy website - based on 0ffda43adf58683bcc625cea03cd39fcb2a8a533 --- 404.html | 4 +- add-token-to-lisk.html | 32 ++ assets/js/2ef85f89.4167ccd4.js | 1 + assets/js/56867589.126782ce.js | 1 + assets/js/5f139d3e.75d8310a.js | 1 - assets/js/6541bca2.9829201e.js | 1 + assets/js/6541bca2.a538a13a.js | 1 - assets/js/8d261ba2.20672409.js | 1 + assets/js/8d261ba2.7debcb5f.js | 1 - assets/js/935f2afb.0bfb099b.js | 1 - assets/js/935f2afb.714e2914.js | 1 + assets/js/951748bc.528797bb.js | 1 - assets/js/951748bc.724a7ffc.js | 1 + assets/js/a8c021bd.0269c486.js | 1 - assets/js/c04e2dde.31972077.js | 1 - assets/js/d9983e98.17fa4913.js | 1 + assets/js/d9983e98.b0a38668.js | 1 - assets/js/f7633811.d58635cf.js | 1 - assets/js/main.2a9490e8.js | 2 - assets/js/main.bd0ce7da.js | 2 + ...CENSE.txt => main.bd0ce7da.js.LICENSE.txt} | 0 assets/js/runtime~main.240ef0e8.js | 1 - assets/js/runtime~main.9edd175b.js | 1 + building-on-lisk/add-token-to-lisk.html | 34 -- .../add-token-to-lisk/custom-token.html | 76 ---- .../add-token-to-lisk/standard-token.html | 70 ---- building-on-lisk/bridge-tokens-to-lisk.html | 143 ------- .../with-Foundry.html | 8 +- .../with-Hardhat.html | 8 +- .../with-thirdweb.html | 152 +++++++ .../ethers.html | 6 +- .../interacting-with-the-blockchain/web3.html | 6 +- building-on-lisk/migration-guide.html | 6 +- category/building-on-lisk.html | 6 +- connecting-to-a-wallet.html | 6 +- contracts.html | 10 +- fees.html | 6 +- index.html | 6 +- interacting-with-blockchain/viem.html | 8 +- js/examples/bridge/README.md | 13 - js/examples/bridge/index.tsx | 380 ------------------ js/examples/bridge/package.json | 21 - js/examples/bridge/tsconfig.json | 21 - js/examples/bridge/tsconfig.node.json | 9 - js/examples/bridge/vite.config.ts | 7 - lisk-tools/api-providers.html | 6 +- lisk-tools/bridges.html | 6 +- lisk-tools/oracles.html | 6 +- lisk-tools/utilities.html | 6 +- markdown-page.html | 4 +- network-info.html | 6 +- search.html | 4 +- sitemap.xml | 2 +- 53 files changed, 254 insertions(+), 846 deletions(-) create mode 100644 add-token-to-lisk.html create mode 100644 assets/js/2ef85f89.4167ccd4.js create mode 100644 assets/js/56867589.126782ce.js delete mode 100644 assets/js/5f139d3e.75d8310a.js create mode 100644 assets/js/6541bca2.9829201e.js delete mode 100644 assets/js/6541bca2.a538a13a.js create mode 100644 assets/js/8d261ba2.20672409.js delete mode 100644 assets/js/8d261ba2.7debcb5f.js delete mode 100644 assets/js/935f2afb.0bfb099b.js create mode 100644 assets/js/935f2afb.714e2914.js delete mode 100644 assets/js/951748bc.528797bb.js create mode 100644 assets/js/951748bc.724a7ffc.js delete mode 100644 assets/js/a8c021bd.0269c486.js delete mode 100644 assets/js/c04e2dde.31972077.js create mode 100644 assets/js/d9983e98.17fa4913.js delete mode 100644 assets/js/d9983e98.b0a38668.js delete mode 100644 assets/js/f7633811.d58635cf.js delete mode 100644 assets/js/main.2a9490e8.js create mode 100644 assets/js/main.bd0ce7da.js rename assets/js/{main.2a9490e8.js.LICENSE.txt => main.bd0ce7da.js.LICENSE.txt} (100%) delete mode 100644 assets/js/runtime~main.240ef0e8.js create mode 100644 assets/js/runtime~main.9edd175b.js delete mode 100644 building-on-lisk/add-token-to-lisk.html delete mode 100644 building-on-lisk/add-token-to-lisk/custom-token.html delete mode 100644 building-on-lisk/add-token-to-lisk/standard-token.html delete mode 100644 building-on-lisk/bridge-tokens-to-lisk.html create mode 100644 building-on-lisk/deploying-smart-contract/with-thirdweb.html delete mode 100644 js/examples/bridge/README.md delete mode 100644 js/examples/bridge/index.tsx delete mode 100644 js/examples/bridge/package.json delete mode 100644 js/examples/bridge/tsconfig.json delete mode 100644 js/examples/bridge/tsconfig.node.json delete mode 100644 js/examples/bridge/vite.config.ts diff --git a/404.html b/404.html index a5bea1480..4dadb5439 100644 --- a/404.html +++ b/404.html @@ -5,8 +5,8 @@ Lisk Documentation - - + +
Skip to main content

Deploying a smart contract with Foundry

In this guide, we discuss, the basics of the Foundry development toolchain and will describe how to create and deploy a smart contract with Foundry to the Lisk Sepolia testnet.

Foundry is a powerful suite of tools to develop, test, and debug your smart contracts. It comprises several individual tools such as:

@@ -129,7 +129,7 @@

Blockscout explorer.

That's it! Although this is just the tip of the iceberg, there is a lot more to learn about Foundry. -For all things Foundry, check out the Foundry book, or head to the official Telegram dev chat or support chat.

diff --git a/building-on-lisk/deploying-smart-contract/with-Hardhat.html b/building-on-lisk/deploying-smart-contract/with-Hardhat.html index eae92f600..75a44914d 100644 --- a/building-on-lisk/deploying-smart-contract/with-Hardhat.html +++ b/building-on-lisk/deploying-smart-contract/with-Hardhat.html @@ -5,14 +5,14 @@ ... with Hardhat | Lisk Documentation - - + +

Deploying a smart contract with Hardhat

+

Deploying a smart contract with Hardhat

Prerequisites​

Node v18+​

This guide requires you to have Node version 18+ installed.

@@ -99,7 +99,7 @@

Interacting with the Smart Contract​

After the contract is verified, you can use the Read Contract and Write Contract tabs to interact with the deployed contract via BlockScout. Don't forget to update the contract address in the Blockscout URL. -You'll also need to connect your wallet first, by clicking the Connect Wallet button.

diff --git a/building-on-lisk/deploying-smart-contract/with-thirdweb.html b/building-on-lisk/deploying-smart-contract/with-thirdweb.html new file mode 100644 index 000000000..e9ec55228 --- /dev/null +++ b/building-on-lisk/deploying-smart-contract/with-thirdweb.html @@ -0,0 +1,152 @@ + + + + + +... with thirdweb | Lisk Documentation + + + + + +

Deploying a smart contract with thirdweb

+

thirdweb is an end-to-end framework for smart contract development and deployment.

+

It enables developers to deploy, standard contracts such as ERC-20, ERC-721, or ERC-1155, etc. without writing a line of code. +More of this is discussed in the via thirdweb Explore section.

+

Furthermore, developers looking to develop and deploy custom smart contracts can use the Solidity SDK provided by thirdweb, among others such as TypeScript SDK and Unity SDK. +However, for this guide, we will mainly talk about the thirdweb Explore and the Solidity SDK.

+

Features:

+
    +
  • Explore: Ready to deploy pre-built contracts.
    • +
  • Build (Solidity SDK): Write custom smart contracts.
    • +
  • Deploy: Support for contract deployment built for any use case.
    • +
  • Publish: Publish your contracts onchain.
    • +
  • Interact: Interact with smart contracts and integrate smart contracts directly into your app.
    • +
+

Deploying pre-built contracts via thirdweb Explore​

+

In case you want to deploy a pre-built contract without any customization, thirdweb offers a convenient way to do so with Explore. +Check out the following video for a quick introduction to Explore:

+ +
note

Before you try out the following guides, please ensure that your wallet is connected to Lisk's Network and it has sufficient funds in it. +For more information, see the Wallet funds section.

+

The following videos describe step-by-step, how to deploy different tokens with pre-built contracts on Lisk.

+ +

via Solidity SDK​

+

Prerequisites​

+

Node.js v18+​

+

Download and install Node v18+.

+

If you are using nvm to manage your node versions, you can just run nvm install 18.

+

Installing and Configuring thirdweb​

+

To develop custom contracts, it is required to download and configure thirdweb.

+
    +
  1. To install thirdweb run the following command: +
    npm i -g thirdweb
    +
    2. +
  2. Set up your thirdweb API key.
    3. +
+

Logging in with your API key​

+
    +
  1. The next step is to log in to thirdweb via CLI, so to do that type the following: +
    thirdweb login
    +
    2. +
  2. Once, you execute the aforementioned command, the terminal will open a browser window where it will ask you to authenticate the device: +
    .......

    💎 thirdweb v0.13.60 💎

    Automatically attempting to open a link to authenticate with our dashboard...

    If the browser doesn't open, please use this link to authenticate:

    https://thirdweb.com/cli/login?payload=%7B%22payload%22%3A%7B%22type%22%3A%22evm%22%2C%22domain%22%3A%22thirdweb.com%22%2C%22address%22%3A%220x4fA5f77Fadcc319c626b28Ea6260FB0c3Ba6e41C%22%2C%22statement%22%3A%22Please%20ensure%20that%20the%20domain%20above%20matches%20the%20URL%20of%20the%20cuhdksjahjkdhkshajkdhkshakjhsjhdsajkhhdhs

    ⠙ Waiting for a response from the dashboard
    +
    3. +
  3. Once you authenticate via the browser, the terminal will log the following message: +
    Successfully linked your account to this device
    +
    4. +
  4. You can verify your login status by re-running the thirdweb login command. +
    💎 thirdweb v0.13.60 💎
    +
    5. +
+

Creating a project​

+

The first step of deploying smart contracts to Lisk is to set up your development environment by creating a project. +The thirdweb supports two of the most popular smart contracts development frameworks such as Foundry and Hardhat.

+

For this guide, we are using Foundry for smart contract development. +However, you can use Hardhat if you are more comfortable with that. +The project creation steps are similar for both Foundry and Hardhat.

+
    +
  1. +

    For Foundry, install its prerequisites on your system before proceeding with the creation of a thirdweb project.

    +
    2. +
  2. +

    Once, the aforementioned is installed, proceed with the following:

    +
    npx thirdweb create
    +
    3. +
  3. +

    Choose Contract as the type of your project and give an appropriate name to your project.

    +
    .......

    💎 thirdweb v0.13.60 💎

    ✔ What type of project do you want to create? › Contract
    ✔ What is your project named? … thirdweb-contracts
    +
    4. +
  4. +

    Next, choose Forge as the framework, NFT as the name of the contract, ERC721 as the type of smart contract, and None for the extensions option.

    +
    info

    In case you want to use the Hardhat framework, choose Hardhat instead of Forge in the following dialogue.

    +
    ✔ What framework do you want to use? › Forge
    ✔ What will be the name of your new smart contract? … NFT
    ✔ What type of contract do you want to start from? › ERC721
    ✔ What extensions do you want to add to your contract? › None
    +
    5. +
  5. +

    thirdweb will install all the relevant dependencies and set up a contract project for you.

    +
    Execution logs of the thirdweb contract project creation
    Creating a new thirdweb contracts project in /Users/XYZ/Lightcurve-Code/L2/thirdweb-contracts.

    Downloading files. This might take a moment.
    Installing packages. This might take a couple of minutes.

    yarn install v1.22.19
    warning ../../../package.json: No license field
    info No lockfile found.
    [1/4] 🔍  Resolving packages...
    [2/4] 🚚  Fetching packages...
    [3/4] 🔗  Linking dependencies...
    [4/4] 🔨  Building fresh packages...
    success Saved lockfile.
    ✨  Done in 9.73s.

    Initialized a git repository.

    Success! Created thirdweb-contracts at /Users/XYZ/Lightcurve-Code/L2/thirdweb-contracts

    Inside that directory, you can run several commands:

    yarn build
        Compiles your contracts and detects thirdweb extensions implemented on them.

    yarn deploy
        Deploys your contracts with the thirdweb deploy flow.

    yarn publish
        Publishes your contracts with the thirdweb publish flow.

    We suggest that you begin by typing:

    cd thirdweb-contracts
    +
    6. +
  6. +

    Foundry applications created with thirdweb have a similar directory structure to the following:

    +
    .
    ├── .github
    ├── .cache
    ├── lib
    ├── node_modules
    ├── out
    ├── src
    │   └── NFT.sol
    ├── test
    │   └── Contract.t.sol
    ├── .gitignore
    ├── .gitmodules
    ├── foundry.toml
    └── README.md
    +
    7. +
+

Creating the smart contract​

+

For ease and security, thirdweb already provides base contracts, which can be easily customized via code. +Since we chose to create an ERC721 token earlier, an NFT.sol file will be present in the src/ folder. +The NFT.sol will already have the base code required for an NFT contract.

+
src/NFT.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@thirdweb-dev/contracts/base/ERC721Base.sol";

contract NFT is ERC721Base {
    constructor(
        address _defaultAdmin,
        string memory _name,
        string memory _symbol,
        address _royaltyRecipient,
        uint128 _royaltyBps
    )
        ERC721Base(
            _defaultAdmin,
            _name,
            _symbol,
            _royaltyRecipient,
            _royaltyBps
        )
    {}
}

+

Building the smart contract​

+

Once the smart contract's code is ready, it must be built using thirdweb.

+
    +
  1. To do that, simply run: +
    npx thirdweb build
    +
    2. +
  2. If the smart contract doesn't have any errors, you will see the following output on the terminal: +
    .......

    💎 thirdweb v0.13.62 💎

    ✔ Detected project type: foundry
    ✔ Compilation successful
    ✔ Choose which contracts to run detection on · NFT


    🔎 Detected extension on NFT
    ✔️ ERC721
    ✔️ ERC721Burnable
    ✔️ ERC721Supply
    ✔️ ERC721AQueryable
    ✔️ ERC721Mintable
    ✔️ ERC721BatchMintable
    ✔️ Royalty
    ✔️ ContractMetadata
    ✔️ Ownable
    ✔️ Fallback

    ℹ Suggested extensions
    - ERC721Enumerable - https://portal.thirdweb.com/interfaces/erc721enumerable
    - ERC721LazyMintable - https://portal.thirdweb.com/interfaces/erc721lazymintable
    - ERC721SignatureMintV1 - https://portal.thirdweb.com/interfaces/erc721signaturemintv1
    - ERC721SignatureMintV2 - https://portal.thirdweb.com/interfaces/erc721signaturemintv2
    - ERC721TieredDrop - https://portal.thirdweb.com/interfaces/erc721tiereddrop
    - ERC721ClaimCustom - https://portal.thirdweb.com/interfaces/erc721claimcustom
    - ERC721ClaimZora - https://portal.thirdweb.com/interfaces/erc721claimzora
    - ERC721ClaimConditionsV1 - https://portal.thirdweb.com/interfaces/erc721claimconditionsv1
    - ERC721ClaimConditionsV2 - https://portal.thirdweb.com/interfaces/erc721claimconditionsv2
    - ERC721ClaimPhasesV1 - https://portal.thirdweb.com/interfaces/erc721claimphasesv1
    - ERC721ClaimPhasesV2 - https://portal.thirdweb.com/interfaces/erc721claimphasesv2
    - ERC721SharedMetadata - https://portal.thirdweb.com/interfaces/erc721sharedmetadata
    - ERC721LoyaltyCard - https://portal.thirdweb.com/interfaces/erc721loyaltycard
    - ERC721UpdatableMetadata - https://portal.thirdweb.com/interfaces/erc721updatablemetadata
    - Permissions - https://portal.thirdweb.com/interfaces/permissions

    ℹ Once you're done writing your contracts, you can run the following command to deploy them:

     yarn deploy
    +
    3. +
+

Deploying the smart contract​

+

All checks passed, which means that the smart contract is ready to be deployed using thirdweb.

+
    +
  1. +

    To do that, simply run:

    +
    npx thirdweb deploy
    +
    2. +
  2. +

    If the smart contract doesn't have any errors, you will see the following output on the terminal:

    +
    .......

    💎 thirdweb v0.13.60 💎

    ✔ Detected project type: foundry
    ✔ Compilation successful
    ✔ Choose which contract(s) to deploy · NFT
    ✔ Upload successful
    ✔ Open this link to deploy your contracts: https://thirdweb.com/contracts/deploy/QmSJExQJfPYFuaRZuDu9XRR2jUu9yp3kaFX3Sdc1KRWxiP
    +
    3. +
  3. +

    The terminal will also open a browser window, directing towards a unique URL, as highlighted above.

    +
    4. +
  4. +

    Fill out the form as suggested in the Fill Parameter section.

    +
    5. +
  5. +

    Once you fill out the details of the ERC721 smart contract, click on the Deploy Now button and it will deploy the contract to the chosen network of your wallet.

    +
    6. +
+
info

If you want to test your Foundry-based contract, follow the steps mentioned in the Testing the Smart Contract guide.

+

Interacting with the Smart Contract​

+

Once the contract is deployed, you can interact with it via Explore. +The following videos describe step-by-step, how to interact with different token contracts on Lisk.

+
+ + \ No newline at end of file diff --git a/building-on-lisk/interacting-with-the-blockchain/ethers.html b/building-on-lisk/interacting-with-the-blockchain/ethers.html index ba9864deb..ce984e3d3 100644 --- a/building-on-lisk/interacting-with-the-blockchain/ethers.html +++ b/building-on-lisk/interacting-with-the-blockchain/ethers.html @@ -5,14 +5,14 @@ ...with ethers.js | Lisk Documentation - - + +

Interacting with the blockchain with ethers.js

+

Interacting with the blockchain with ethers.js

ethers.js is a JavaScript library that allows developers to interact with EVM-compatible blockchain networks.

You can use ethers.js to interact with smart contracts deployed on the Lisk network.

Install​

diff --git a/building-on-lisk/interacting-with-the-blockchain/web3.html b/building-on-lisk/interacting-with-the-blockchain/web3.html index c16d7e8b5..680714b59 100644 --- a/building-on-lisk/interacting-with-the-blockchain/web3.html +++ b/building-on-lisk/interacting-with-the-blockchain/web3.html @@ -5,14 +5,14 @@ ...with web3.js | Lisk Documentation - - + +

Interacting with the blockchain via web3.js

+

Interacting with the blockchain via web3.js

web3.js is a JavaScript library for building and interacting with EVM-compatible blockchain networks.

You can also use web3.js to interact with smart contracts deployed on the Lisk network.

Install​

diff --git a/building-on-lisk/migration-guide.html b/building-on-lisk/migration-guide.html index 77c55d482..7fbcc5072 100644 --- a/building-on-lisk/migration-guide.html +++ b/building-on-lisk/migration-guide.html @@ -5,14 +5,14 @@ Lisk L1->L2 migration guide | Lisk Documentation - - + +

Lisk L1->L2 migration guide

+

Lisk L1->L2 migration guide

How to smoothly migrate any Lisk L1 app to Lisk L2.

Requirements​

You need:

diff --git a/category/building-on-lisk.html b/category/building-on-lisk.html index 9fc023f3c..eebbfe0bb 100644 --- a/category/building-on-lisk.html +++ b/category/building-on-lisk.html @@ -5,14 +5,14 @@ Building on Lisk | Lisk Documentation - - + +

Building on Lisk

Guides for developers to start building dApps on Lisk L2.