From 27a9ccaa1033799cb0ba85aef67536021de20929 Mon Sep 17 00:00:00 2001 From: Tschakki Date: Thu, 10 Oct 2024 16:25:41 +0200 Subject: [PATCH] Deploy website - based on c8b49e1214d71d5bcdac26ef8192ae7e7972165f --- 404.html | 2 +- assets/js/4984adb1.169dcb20.js | 1 + assets/js/4984adb1.f8138d13.js | 1 - assets/js/{554c6b45.7cc13b4f.js => 554c6b45.aef64f62.js} | 2 +- assets/js/56867589.c76ceff1.js | 1 - assets/js/56867589.dc19b2e3.js | 1 + assets/js/{87599bfc.f888de7a.js => 87599bfc.56fef14e.js} | 2 +- assets/js/8d261ba2.9a83f19c.js | 1 + assets/js/8d261ba2.a4e553e3.js | 1 - assets/js/a8c021bd.7ae53b29.js | 1 - assets/js/a8c021bd.88b55272.js | 1 + assets/js/{f1b37e9d.e50b1fbe.js => f1b37e9d.05b3837c.js} | 2 +- .../{runtime~main.3dd97049.js => runtime~main.144d9eb8.js} | 2 +- bridged-tokens.html | 4 ++-- building-on-lisk/add-token-to-lisk.html | 4 ++-- building-on-lisk/add-token-to-lisk/custom-token.html | 6 +++--- building-on-lisk/add-token-to-lisk/standard-token.html | 4 ++-- building-on-lisk/deploying-smart-contract/with-Foundry.html | 4 ++-- building-on-lisk/deploying-smart-contract/with-Hardhat.html | 4 ++-- .../deploying-smart-contract/with-thirdweb.html | 6 +++--- .../interacting-with-the-blockchain/ethers.html | 4 ++-- building-on-lisk/interacting-with-the-blockchain/viem.html | 6 +++--- building-on-lisk/interacting-with-the-blockchain/web3.html | 6 +++--- building-on-lisk/migration-guide.html | 4 ++-- building-on-lisk/run-a-lisk-node.html | 4 ++-- building-on-lisk/token-development/deploy-erc-1155.html | 4 ++-- building-on-lisk/token-development/deploy-erc-20.html | 4 ++-- building-on-lisk/token-development/deploy-erc-721.html | 4 ++-- building-on-lisk/use-oracle-data.html | 4 ++-- category/building-on-lisk.html | 4 ++-- category/building-on-lisk/add-token-to-lisk.html | 4 ++-- category/building-on-lisk/deploying-smart-contract.html | 4 ++-- category/building-on-lisk/token-development.html | 4 ++-- category/governance.html | 2 +- category/staking.html | 2 +- contracts.html | 4 ++-- docs.html | 4 ++-- fees.html | 4 ++-- governance/delegation.html | 2 +- governance/overview.html | 2 +- governance/proposal-lifecycle.html | 2 +- governance/voting.html | 2 +- index.html | 2 +- lisk-l1/legacy-chain-service.html | 4 ++-- lisk-tools/api-providers.html | 4 ++-- lisk-tools/faucets.html | 4 ++-- lisk-tools/indexers.html | 4 ++-- lisk-tools/oracles.html | 4 ++-- lisk-tools/utilities.html | 4 ++-- markdown-page.html | 2 +- network-info.html | 4 ++-- search.html | 2 +- tags.html | 2 +- tags/nodes.html | 2 +- token-development.html | 4 ++-- user.html | 2 +- user/bridges.html | 2 +- user/claiming.html | 2 +- user/connecting-to-a-wallet.html | 2 +- user/exchanges.html | 2 +- user/import-lsk-metamask.html | 2 +- user/staking/early-unstake.html | 2 +- user/staking/extend-duration.html | 2 +- user/staking/increase-stake.html | 2 +- user/staking/overview.html | 2 +- user/staking/pause-position.html | 2 +- user/staking/stake-unstake.html | 2 +- user/wallets.html | 2 +- 68 files changed, 99 insertions(+), 99 deletions(-) create mode 100644 assets/js/4984adb1.169dcb20.js delete mode 100644 assets/js/4984adb1.f8138d13.js rename assets/js/{554c6b45.7cc13b4f.js => 554c6b45.aef64f62.js} (92%) delete mode 100644 assets/js/56867589.c76ceff1.js create mode 100644 assets/js/56867589.dc19b2e3.js rename assets/js/{87599bfc.f888de7a.js => 87599bfc.56fef14e.js} (68%) create mode 100644 assets/js/8d261ba2.9a83f19c.js delete mode 100644 assets/js/8d261ba2.a4e553e3.js delete mode 100644 assets/js/a8c021bd.7ae53b29.js create mode 100644 assets/js/a8c021bd.88b55272.js rename assets/js/{f1b37e9d.e50b1fbe.js => f1b37e9d.05b3837c.js} (72%) rename assets/js/{runtime~main.3dd97049.js => runtime~main.144d9eb8.js} (68%) diff --git a/404.html b/404.html index f3c16c1da..137b0a61c 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ Lisk Documentation - + diff --git a/assets/js/4984adb1.169dcb20.js b/assets/js/4984adb1.169dcb20.js new file mode 100644 index 000000000..fd8f4a618 --- /dev/null +++ b/assets/js/4984adb1.169dcb20.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[895],{3993:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var a=t(5893),s=t(1151),i=t(4866),r=t(5162);const o={title:"...with web3.js",slug:"/building-on-lisk/interacting-with-the-blockchain/web3",description:"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.",keywords:["web3.js","JavaScript library","Lisk network","Lisk mainnet","Lisk testnet","smart contracts","EVM-compatible","blockchain","Web3","Wallet","ABI","eth","interacting with smart contract"]},c="Interacting with the blockchain via web3.js",l={id:"building-on-lisk/interacting-with-the-blockchain/web3",title:"...with web3.js",description:"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.",source:"@site/docs/building-on-lisk/interacting-with-the-blockchain/web3.mdx",sourceDirName:"building-on-lisk/interacting-with-the-blockchain",slug:"/building-on-lisk/interacting-with-the-blockchain/web3",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/web3",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"...with web3.js",slug:"/building-on-lisk/interacting-with-the-blockchain/web3",description:"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.",keywords:["web3.js","JavaScript library","Lisk network","Lisk mainnet","Lisk testnet","smart contracts","EVM-compatible","blockchain","Web3","Wallet","ABI","eth","interacting with smart contract"]},sidebar:"documentationSidebar",previous:{title:"...with ethers.js",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/ethers"},next:{title:"Bridging an L1 token to Lisk",permalink:"/lisk-documentation/category/building-on-lisk/add-token-to-lisk"}},d={},p=[{value:"Install",id:"install",level:2},{value:"Import",id:"import",level:2},{value:"Connecting to Lisk",id:"connecting-to-lisk",level:2},{value:"Reading data from the blockchain",id:"reading-data-from-the-blockchain",level:3},{value:"Writing data to the blockchain",id:"writing-data-to-the-blockchain",level:3},{value:"Interacting with smart contracts",id:"interacting-with-smart-contracts",level:2},{value:"Reading from smart contracts",id:"reading-from-smart-contracts",level:3},{value:"Writing to smart contracts",id:"writing-to-smart-contracts",level:3}];function u(n){const e={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...n.components},{Details:t}=e;return t||function(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.header,{children:(0,a.jsx)(e.h1,{id:"interacting-with-the-blockchain-via-web3js",children:"Interacting with the blockchain via web3.js"})}),"\n",(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.a,{href:"https://web3js.org/",children:"web3.js"})," is a JavaScript library for building and interacting with EVM-compatible blockchain networks."]}),"\n",(0,a.jsx)(e.p,{children:"You can also use web3.js to interact with smart contracts deployed on the Lisk network."}),"\n",(0,a.jsx)(e.h2,{id:"install",children:"Install"}),"\n",(0,a.jsx)(e.p,{children:"To install web3.js run the following command:"}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(r.Z,{value:"npm",label:"NPM",default:!0,children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm install --save web3\n"})})}),(0,a.jsx)(r.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"yarn add web3\n"})})})]}),"\n",(0,a.jsx)(e.h2,{id:"import",children:"Import"}),"\n",(0,a.jsx)(e.p,{children:"Before you can start using web3.js, you need to import it into your project."}),"\n",(0,a.jsx)(e.p,{children:"Web3.js supports both CommonJS and native ESM module imports."}),"\n",(0,a.jsx)(e.p,{children:"Add the following line of code to the top of your file to import web3.js:"}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(r.Z,{value:"cjs",label:"CommonJS",default:!0,children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",children:"const { Web3 } = require('web3');\n"})})}),(0,a.jsx)(r.Z,{value:"esm",label:"ESM Module",children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-ts",children:"import { Web3 } from 'web3';\n"})})})]}),"\n",(0,a.jsx)(e.h2,{id:"connecting-to-lisk",children:"Connecting to Lisk"}),"\n",(0,a.jsxs)(e.p,{children:["You can connect to Lisk by instantiating a new ",(0,a.jsx)(e.code,{children:"Web3"})," object with an RPC URL of the Lisk network:"]}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(r.Z,{value:"mainnet",label:"Lisk",children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\nconst web3 = new Web3('https://rpc.api.lisk.com');\n"})})}),(0,a.jsx)(r.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n"})})})]}),"\n",(0,a.jsx)(e.h3,{id:"reading-data-from-the-blockchain",children:"Reading data from the blockchain"}),"\n",(0,a.jsxs)(e.p,{children:["Once you have created the ",(0,a.jsx)(e.code,{children:"Web3"})," object, you can use it to read data from the Lisk network."]}),"\n",(0,a.jsxs)(e.p,{children:["For example, you can use the ",(0,a.jsx)(e.code,{children:"getBlockNumber"})," method to get the latest block:"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:'// Retrieve data from blockchain\nasync function getLatestBlock() {\n const latestBlock = await web3.eth.getBlockNumber()\n console.log("The latest block\'s number is:", latestBlock);\n}\n\ngetLatestBlock();\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\n// const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Retrieve data from blockchain\nasync function getLatestBlock() {\n const latestBlock = await web3.eth.getBlockNumber()\n console.log(\"The latest block's number is:\", latestBlock);\n}\n\ngetLatestBlock();\n"})})]}),"\n",(0,a.jsxs)(e.admonition,{type:"tip",children:[(0,a.jsx)(e.mdxAdmonitionTitle,{}),(0,a.jsxs)(e.p,{children:["Web3 provides a wide range of ",(0,a.jsx)(e.a,{href:"https://docs.web3js.org/guides/web3_eth/methods/",children:"Web3Eth methods"})," that can be used to interact with the blockchain."]})]}),"\n",(0,a.jsx)(e.h3,{id:"writing-data-to-the-blockchain",children:"Writing data to the blockchain"}),"\n",(0,a.jsxs)(e.p,{children:["To write data to the Lisk network, you need to create a ",(0,a.jsx)(e.a,{href:"https://docs.web3js.org/guides/wallet/",children:(0,a.jsx)(e.code,{children:"Wallet"})}),"."]}),"\n",(0,a.jsx)(e.admonition,{type:"note",children:(0,a.jsxs)(e.p,{children:["A web3.js ",(0,a.jsx)(e.code,{children:"Wallet"})," is your main entry point if you want to use a private key to do any blockchain operations e.g., sending transactions, etc.\nIt is also called a ",(0,a.jsx)(e.code,{children:"Signer"})," in other libraries."]})}),"\n",(0,a.jsxs)(e.p,{children:["You can create a ",(0,a.jsx)(e.code,{children:"Wallet"})," by instantiating a new Web3 ",(0,a.jsx)(e.code,{children:"Wallet"})," object and the add private key(s) into it.\nSuch private key(s) can later be used to send transactions on the blockchain."]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"// Add an account to a wallet\nconst privateKey = '0x';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Create transaction object to send '.0001' eth to '0x.....' address from the account[0]\nconst tx =\n{\n from: account[0].address,\n to: '',\n value: web3.utils.toWei('.0001', 'ether')\n};\n// The 'from' address must match the one previously added with 'wallet.add'\n\n// Send the transaction\nconst txReceipt = await web3.eth.sendTransaction(tx);\n\nconsole.log('Tx hash:', txReceipt.transactionHash)\n"})}),"\n",(0,a.jsx)(e.admonition,{type:"info",children:(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.code,{children:"PRIVATE_KEY"})," is the private key of the account that is used to sign and send a transaction using web3.js."]})}),"\n",(0,a.jsxs)(e.p,{children:["The receiving account's balance will increment by ",(0,a.jsx)(e.code,{children:"0.0001"})," ETH once the transaction execution is successful."]}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\n// const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Add an account to a wallet\nconst privateKey = '0x';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Create transaction object to send '.0001' eth to '0x.....' address from the account[0]\nconst tx =\n{\n from: account[0].address,\n to: '',\n value: web3.utils.toWei('.0001', 'ether')\n};\n// The 'from' address must match the one previously added with 'wallet.add'\n\n// Send the transaction\nconst txReceipt = await web3.eth.sendTransaction(tx);\n\nconsole.log('Tx hash:', txReceipt.transactionHash)\n"})})]}),"\n",(0,a.jsx)(e.h2,{id:"interacting-with-smart-contracts",children:"Interacting with smart contracts"}),"\n",(0,a.jsxs)(e.p,{children:["You can use web3.js to interact with a smart contract on Lisk by instantiating a ",(0,a.jsx)(e.code,{children:"Contract"})," object and passing it the ",(0,a.jsx)(e.code,{children:"ABI"})," and ",(0,a.jsx)(e.code,{children:"address"})," of a deployed contract."]}),"\n",(0,a.jsx)(e.p,{children:"In the following sections, we will:"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsxs)(e.li,{children:["Read data from a deployed contract, specifically, we will fetch the ",(0,a.jsx)(e.strong,{children:"name of the contract"}),"."]}),"\n",(0,a.jsxs)(e.li,{children:["Furthermore, we will ",(0,a.jsx)(e.strong,{children:"mint a token"}),", via an already deployed contract."]}),"\n"]}),"\n",(0,a.jsx)(e.admonition,{type:"tip",children:(0,a.jsxs)(e.p,{children:["For an overview of existing public functions for the contract, please check the ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/token/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=read_contract",children:"Read Contract"})," and ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/token/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=write_contract",children:"Write Contract"})," tabs for the specific contract."]})}),"\n",(0,a.jsx)(e.h3,{id:"reading-from-smart-contracts",children:"Reading from smart contracts"}),"\n",(0,a.jsxs)(e.p,{children:["To read data from a smart contract, one needs to pass the ",(0,a.jsx)(e.code,{children:"address"})," and ",(0,a.jsx)(e.code,{children:"abi"})," of the deployed & verfied contract.\nOnce the aforementioned information is passed, any read-only function of the smart contract can be called, as described below:"]}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsxs)(r.Z,{value:"ce",label:"get-contract-name.js",default:!0,children:[(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",metastring:'title="Fetching the contract\'s name"',children:"// Address of the contract you want to interact with.\nconst address = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, address);\n\n// Call any of the 'Read contract' functions e.g. 'name()'\nconst contractName = await contract.methods.name().call();\n\nconsole.log('Contract\\'s Name is: ', contractName);\n"})}),(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",metastring:'title="get-contract-name.js"',children:"import { Web3 } from 'web3';\nimport { abi } from './abi.js';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\n// const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Address of the contract you want to interact with.\nconst address = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, address);\n\n// Call any of the 'Read contract' functions e.g. 'name()'\nconst contractName = await contract.methods.name().call();\n\nconsole.log('Contract\\'s Name is: ', contractName);\n"})}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-text",metastring:'title="Output"',children:"Contract's Name is: Lisk\n"})})]})]}),(0,a.jsxs)(r.Z,{value:"abi",label:"abi.js",children:[(0,a.jsxs)(e.admonition,{type:"tip",children:[(0,a.jsxs)(e.p,{children:["The ABI of a contract can be found on the respective contract page in ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/",children:"BlockScout"}),"."]}),(0,a.jsxs)(e.p,{children:["For example, you can use the ABI for the ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/token/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=contract",children:"Lisk NFT Token contract"}),".\nJust scroll down to ",(0,a.jsx)(e.code,{children:"Contract ABI"})," and copy the deployed contract's ABI."]})]}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",metastring:'title="abi.js"',children:'export const abi = [\n {\n "inputs": [],\n "stateMutability": "nonpayable",\n "type": "constructor"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "sender",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n },\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n }\n ],\n "name": "ERC721IncorrectOwner",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "ERC721InsufficientApproval",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "approver",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidApprover",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidOperator",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidOwner",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "receiver",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidReceiver",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "sender",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidSender",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "ERC721NonexistentToken",\n "type": "error"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "owner",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "address",\n "name": "approved",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "Approval",\n "type": "event"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "owner",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "address",\n "name": "operator",\n "type": "address"\n },\n {\n "indexed": false,\n "internalType": "bool",\n "name": "approved",\n "type": "bool"\n }\n ],\n "name": "ApprovalForAll",\n "type": "event"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "Transfer",\n "type": "event"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "approve",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n }\n ],\n "name": "balanceOf",\n "outputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "currentTokenId",\n "outputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "getApproved",\n "outputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n }\n ],\n "name": "isApprovedForAll",\n "outputs": [\n {\n "internalType": "bool",\n "name": "",\n "type": "bool"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "recipient",\n "type": "address"\n }\n ],\n "name": "mint",\n "outputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "stateMutability": "payable",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "name",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "ownerOf",\n "outputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "safeTransferFrom",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n },\n {\n "internalType": "bytes",\n "name": "data",\n "type": "bytes"\n }\n ],\n "name": "safeTransferFrom",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n },\n {\n "internalType": "bool",\n "name": "approved",\n "type": "bool"\n }\n ],\n "name": "setApprovalForAll",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "bytes4",\n "name": "interfaceId",\n "type": "bytes4"\n }\n ],\n "name": "supportsInterface",\n "outputs": [\n {\n "internalType": "bool",\n "name": "",\n "type": "bool"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "symbol",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "tokenURI",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "transferFrom",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n }\n];\n'})})]})]}),"\n",(0,a.jsx)(e.h3,{id:"writing-to-smart-contracts",children:"Writing to smart contracts"}),"\n",(0,a.jsx)(e.p,{children:"To write data through a contract's method, a few things are required such as:"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsx)(e.li,{children:"contract's address"}),"\n",(0,a.jsx)(e.li,{children:"recipient's address"}),"\n",(0,a.jsx)(e.li,{children:"private key of the sender"}),"\n",(0,a.jsx)(e.li,{children:"... and the method's name"}),"\n"]}),"\n",(0,a.jsxs)(e.p,{children:["Use the following snippet to interact with an already ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/address/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=write_contract",children:"deployed contract's"})," ",(0,a.jsx)(e.code,{children:"mint()"})," function."]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",metastring:'title="miniting-token.js"',children:"// Address of the contract you want to interact with.\nconst contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Address of the Recipient account receiving the NFT.\nconst recipientAddress = 'RECIPIENT_ADDRESS'\nconst amount = web3.utils.toWei('.0001', 'ether')\n\n// PRIVATE_KEY of the sender's account.\nconst privateKey = 'PRIVATE_KEY';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Send a request to the 'mint()' function to mint a token.\nconst txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });\n\nconsole.log('Tx hash:', txReceipt.transactionHash);\n"})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",metastring:'title="miniting-token.js"',children:"import { Web3 } from 'web3';\nimport { abi } from './abi.js';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// For Lisk network\n//const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Address of the contract you want to interact with.\nconst contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Address of the Recipient account receiving the NFT.\nconst recipientAddress = 'RECIPIENT_ADDRESS'\nconst amount = web3.utils.toWei('.0001', 'ether')\n\n// PRIVATE_KEY of the sender's account.\nconst privateKey = 'PRIVATE_KEY';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Send a request to the 'mint()' function to mint a token.\nconst txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });\n\nconsole.log('Tx hash:', txReceipt.transactionHash);\n"})}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-text",metastring:'title="Output"',children:"Transaction hash: 0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9\n"})}),(0,a.jsx)(e.admonition,{type:"info",children:(0,a.jsxs)(e.p,{children:["You can use the transaction hash received above to check the details of the ",(0,a.jsx)(e.code,{children:"mint"})," transaction on Blockscout Explorer: ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/tx/0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9",children:(0,a.jsx)(e.code,{children:"0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9"})}),"."]})})]})]})}function h(n={}){const{wrapper:e}={...(0,s.a)(),...n.components};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(u,{...n})}):u(n)}},5162:(n,e,t)=>{t.d(e,{Z:()=>r});t(7294);var a=t(512);const s={tabItem:"tabItem_Ymn6"};var i=t(5893);function r(n){let{children:e,hidden:t,className:r}=n;return(0,i.jsx)("div",{role:"tabpanel",className:(0,a.Z)(s.tabItem,r),hidden:t,children:e})}},4866:(n,e,t)=>{t.d(e,{Z:()=>k});var a=t(7294),s=t(512),i=t(2466),r=t(6550),o=t(469),c=t(1980),l=t(7392),d=t(812);function p(n){return a.Children.toArray(n).filter((n=>"\n"!==n)).map((n=>{if(!n||(0,a.isValidElement)(n)&&function(n){const{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw new Error(`Docusaurus error: Bad child <${"string"==typeof n.type?n.type:n.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(n){const{values:e,children:t}=n;return(0,a.useMemo)((()=>{const n=e??function(n){return p(n).map((n=>{let{props:{value:e,label:t,attributes:a,default:s}}=n;return{value:e,label:t,attributes:a,default:s}}))}(t);return function(n){const e=(0,l.lx)(n,((n,e)=>n.value===e.value));if(e.length>0)throw new Error(`Docusaurus error: Duplicate values "${e.map((n=>n.value)).join(", ")}" found in . Every value needs to be unique.`)}(n),n}),[e,t])}function h(n){let{value:e,tabValues:t}=n;return t.some((n=>n.value===e))}function m(n){let{queryString:e=!1,groupId:t}=n;const s=(0,r.k6)(),i=function(n){let{queryString:e=!1,groupId:t}=n;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,c._X)(i),(0,a.useCallback)((n=>{if(!i)return;const e=new URLSearchParams(s.location.search);e.set(i,n),s.replace({...s.location,search:e.toString()})}),[i,s])]}function b(n){const{defaultValue:e,queryString:t=!1,groupId:s}=n,i=u(n),[r,c]=(0,a.useState)((()=>function(n){let{defaultValue:e,tabValues:t}=n;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(e){if(!h({value:e,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map((n=>n.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const a=t.find((n=>n.default))??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:e,tabValues:i}))),[l,p]=m({queryString:t,groupId:s}),[b,y]=function(n){let{groupId:e}=n;const t=function(n){return n?`docusaurus.tab.${n}`:null}(e),[s,i]=(0,d.Nk)(t);return[s,(0,a.useCallback)((n=>{t&&i.set(n)}),[t,i])]}({groupId:s}),f=(()=>{const n=l??b;return h({value:n,tabValues:i})?n:null})();(0,o.Z)((()=>{f&&c(f)}),[f]);return{selectedValue:r,selectValue:(0,a.useCallback)((n=>{if(!h({value:n,tabValues:i}))throw new Error(`Can't select invalid tab value=${n}`);c(n),p(n),y(n)}),[p,y,i]),tabValues:i}}var y=t(2389);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var w=t(5893);function g(n){let{className:e,block:t,selectedValue:a,selectValue:r,tabValues:o}=n;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),d=n=>{const e=n.currentTarget,t=c.indexOf(e),s=o[t].value;s!==a&&(l(e),r(s))},p=n=>{let e=null;switch(n.key){case"Enter":d(n);break;case"ArrowRight":{const t=c.indexOf(n.currentTarget)+1;e=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(n.currentTarget)-1;e=c[t]??c[c.length-1];break}}e?.focus()};return(0,w.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":t},e),children:o.map((n=>{let{value:e,label:t,attributes:i}=n;return(0,w.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:n=>c.push(n),onKeyDown:p,onClick:d,...i,className:(0,s.Z)("tabs__item",f.tabItem,i?.className,{"tabs__item--active":a===e}),children:t??e},e)}))})}function x(n){let{lazy:e,children:t,selectedValue:i}=n;const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const n=r.find((n=>n.props.value===i));return n?(0,a.cloneElement)(n,{className:(0,s.Z)("margin-top--md",n.props.className)}):null}return(0,w.jsx)("div",{className:"margin-top--md",children:r.map(((n,e)=>(0,a.cloneElement)(n,{key:e,hidden:n.props.value!==i})))})}function j(n){const e=b(n);return(0,w.jsxs)("div",{className:(0,s.Z)("tabs-container",f.tabList),children:[(0,w.jsx)(g,{...e,...n}),(0,w.jsx)(x,{...e,...n})]})}function k(n){const e=(0,y.Z)();return(0,w.jsx)(j,{...n,children:p(n.children)},String(e))}},1151:(n,e,t)=>{t.d(e,{Z:()=>o,a:()=>r});var a=t(7294);const s={},i=a.createContext(s);function r(n){const e=a.useContext(i);return a.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function o(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:r(n.components),a.createElement(i.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/4984adb1.f8138d13.js b/assets/js/4984adb1.f8138d13.js deleted file mode 100644 index a82ae56bc..000000000 --- a/assets/js/4984adb1.f8138d13.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[895],{3993:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>o,metadata:()=>l,toc:()=>p});var a=t(5893),s=t(1151),i=t(4866),r=t(5162);const o={title:"...with web3.js",slug:"/building-on-lisk/interacting-with-the-blockchain/web3",description:"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.",keywords:["web3.js","JavaScript library","Lisk network","Lisk mainnet","Lisk testnet","smart contracts","EVM-compatible","blockchain","Web3","Wallet","ABI","eth","interacting with smart contract"]},c="Interacting with the blockchain via web3.js",l={id:"building-on-lisk/interacting-with-the-blockchain/web3",title:"...with web3.js",description:"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.",source:"@site/docs/building-on-lisk/interacting-with-the-blockchain/web3.mdx",sourceDirName:"building-on-lisk/interacting-with-the-blockchain",slug:"/building-on-lisk/interacting-with-the-blockchain/web3",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/web3",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"...with web3.js",slug:"/building-on-lisk/interacting-with-the-blockchain/web3",description:"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.",keywords:["web3.js","JavaScript library","Lisk network","Lisk mainnet","Lisk testnet","smart contracts","EVM-compatible","blockchain","Web3","Wallet","ABI","eth","interacting with smart contract"]},sidebar:"documentationSidebar",previous:{title:"...with ethers.js",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/ethers"},next:{title:"Token development",permalink:"/lisk-documentation/category/building-on-lisk/token-development"}},d={},p=[{value:"Install",id:"install",level:2},{value:"Import",id:"import",level:2},{value:"Connecting to Lisk",id:"connecting-to-lisk",level:2},{value:"Reading data from the blockchain",id:"reading-data-from-the-blockchain",level:3},{value:"Writing data to the blockchain",id:"writing-data-to-the-blockchain",level:3},{value:"Interacting with smart contracts",id:"interacting-with-smart-contracts",level:2},{value:"Reading from smart contracts",id:"reading-from-smart-contracts",level:3},{value:"Writing to smart contracts",id:"writing-to-smart-contracts",level:3}];function u(n){const e={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",mdxAdmonitionTitle:"mdxAdmonitionTitle",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...n.components},{Details:t}=e;return t||function(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.header,{children:(0,a.jsx)(e.h1,{id:"interacting-with-the-blockchain-via-web3js",children:"Interacting with the blockchain via web3.js"})}),"\n",(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.a,{href:"https://web3js.org/",children:"web3.js"})," is a JavaScript library for building and interacting with EVM-compatible blockchain networks."]}),"\n",(0,a.jsx)(e.p,{children:"You can also use web3.js to interact with smart contracts deployed on the Lisk network."}),"\n",(0,a.jsx)(e.h2,{id:"install",children:"Install"}),"\n",(0,a.jsx)(e.p,{children:"To install web3.js run the following command:"}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(r.Z,{value:"npm",label:"NPM",default:!0,children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"npm install --save web3\n"})})}),(0,a.jsx)(r.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-bash",children:"yarn add web3\n"})})})]}),"\n",(0,a.jsx)(e.h2,{id:"import",children:"Import"}),"\n",(0,a.jsx)(e.p,{children:"Before you can start using web3.js, you need to import it into your project."}),"\n",(0,a.jsx)(e.p,{children:"Web3.js supports both CommonJS and native ESM module imports."}),"\n",(0,a.jsx)(e.p,{children:"Add the following line of code to the top of your file to import web3.js:"}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(r.Z,{value:"cjs",label:"CommonJS",default:!0,children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",children:"const { Web3 } = require('web3');\n"})})}),(0,a.jsx)(r.Z,{value:"esm",label:"ESM Module",children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-ts",children:"import { Web3 } from 'web3';\n"})})})]}),"\n",(0,a.jsx)(e.h2,{id:"connecting-to-lisk",children:"Connecting to Lisk"}),"\n",(0,a.jsxs)(e.p,{children:["You can connect to Lisk by instantiating a new ",(0,a.jsx)(e.code,{children:"Web3"})," object with an RPC URL of the Lisk network:"]}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsx)(r.Z,{value:"mainnet",label:"Lisk",children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\nconst web3 = new Web3('https://rpc.api.lisk.com');\n"})})}),(0,a.jsx)(r.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n"})})})]}),"\n",(0,a.jsx)(e.h3,{id:"reading-data-from-the-blockchain",children:"Reading data from the blockchain"}),"\n",(0,a.jsxs)(e.p,{children:["Once you have created the ",(0,a.jsx)(e.code,{children:"Web3"})," object, you can use it to read data from the Lisk network."]}),"\n",(0,a.jsxs)(e.p,{children:["For example, you can use the ",(0,a.jsx)(e.code,{children:"getBlockNumber"})," method to get the latest block:"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:'// Retrieve data from blockchain\nasync function getLatestBlock() {\n const latestBlock = await web3.eth.getBlockNumber()\n console.log("The latest block\'s number is:", latestBlock);\n}\n\ngetLatestBlock();\n'})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\n// const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Retrieve data from blockchain\nasync function getLatestBlock() {\n const latestBlock = await web3.eth.getBlockNumber()\n console.log(\"The latest block's number is:\", latestBlock);\n}\n\ngetLatestBlock();\n"})})]}),"\n",(0,a.jsxs)(e.admonition,{type:"tip",children:[(0,a.jsx)(e.mdxAdmonitionTitle,{}),(0,a.jsxs)(e.p,{children:["Web3 provides a wide range of ",(0,a.jsx)(e.a,{href:"https://docs.web3js.org/guides/web3_eth/methods/",children:"Web3Eth methods"})," that can be used to interact with the blockchain."]})]}),"\n",(0,a.jsx)(e.h3,{id:"writing-data-to-the-blockchain",children:"Writing data to the blockchain"}),"\n",(0,a.jsxs)(e.p,{children:["To write data to the Lisk network, you need to create a ",(0,a.jsx)(e.a,{href:"https://docs.web3js.org/guides/wallet/",children:(0,a.jsx)(e.code,{children:"Wallet"})}),"."]}),"\n",(0,a.jsx)(e.admonition,{type:"note",children:(0,a.jsxs)(e.p,{children:["A web3.js ",(0,a.jsx)(e.code,{children:"Wallet"})," is your main entry point if you want to use a private key to do any blockchain operations e.g., sending transactions, etc.\nIt is also called a ",(0,a.jsx)(e.code,{children:"Signer"})," in other libraries."]})}),"\n",(0,a.jsxs)(e.p,{children:["You can create a ",(0,a.jsx)(e.code,{children:"Wallet"})," by instantiating a new Web3 ",(0,a.jsx)(e.code,{children:"Wallet"})," object and the add private key(s) into it.\nSuch private key(s) can later be used to send transactions on the blockchain."]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",children:"// Add an account to a wallet\nconst privateKey = '0x';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Create transaction object to send '.0001' eth to '0x.....' address from the account[0]\nconst tx =\n{\n from: account[0].address,\n to: '',\n value: web3.utils.toWei('.0001', 'ether')\n};\n// The 'from' address must match the one previously added with 'wallet.add'\n\n// Send the transaction\nconst txReceipt = await web3.eth.sendTransaction(tx);\n\nconsole.log('Tx hash:', txReceipt.transactionHash)\n"})}),"\n",(0,a.jsx)(e.admonition,{type:"info",children:(0,a.jsxs)(e.p,{children:[(0,a.jsx)(e.code,{children:"PRIVATE_KEY"})," is the private key of the account that is used to sign and send a transaction using web3.js."]})}),"\n",(0,a.jsxs)(e.p,{children:["The receiving account's balance will increment by ",(0,a.jsx)(e.code,{children:"0.0001"})," ETH once the transaction execution is successful."]}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",children:"import { Web3 } from 'web3';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\n// const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Add an account to a wallet\nconst privateKey = '0x';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Create transaction object to send '.0001' eth to '0x.....' address from the account[0]\nconst tx =\n{\n from: account[0].address,\n to: '',\n value: web3.utils.toWei('.0001', 'ether')\n};\n// The 'from' address must match the one previously added with 'wallet.add'\n\n// Send the transaction\nconst txReceipt = await web3.eth.sendTransaction(tx);\n\nconsole.log('Tx hash:', txReceipt.transactionHash)\n"})})]}),"\n",(0,a.jsx)(e.h2,{id:"interacting-with-smart-contracts",children:"Interacting with smart contracts"}),"\n",(0,a.jsxs)(e.p,{children:["You can use web3.js to interact with a smart contract on Lisk by instantiating a ",(0,a.jsx)(e.code,{children:"Contract"})," object and passing it the ",(0,a.jsx)(e.code,{children:"ABI"})," and ",(0,a.jsx)(e.code,{children:"address"})," of a deployed contract."]}),"\n",(0,a.jsx)(e.p,{children:"In the following sections, we will:"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsxs)(e.li,{children:["Read data from a deployed contract, specifically, we will fetch the ",(0,a.jsx)(e.strong,{children:"name of the contract"}),"."]}),"\n",(0,a.jsxs)(e.li,{children:["Furthermore, we will ",(0,a.jsx)(e.strong,{children:"mint a token"}),", via an already deployed contract."]}),"\n"]}),"\n",(0,a.jsx)(e.admonition,{type:"tip",children:(0,a.jsxs)(e.p,{children:["For an overview of existing public functions for the contract, please check the ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/token/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=read_contract",children:"Read Contract"})," and ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/token/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=write_contract",children:"Write Contract"})," tabs for the specific contract."]})}),"\n",(0,a.jsx)(e.h3,{id:"reading-from-smart-contracts",children:"Reading from smart contracts"}),"\n",(0,a.jsxs)(e.p,{children:["To read data from a smart contract, one needs to pass the ",(0,a.jsx)(e.code,{children:"address"})," and ",(0,a.jsx)(e.code,{children:"abi"})," of the deployed & verfied contract.\nOnce the aforementioned information is passed, any read-only function of the smart contract can be called, as described below:"]}),"\n",(0,a.jsxs)(i.Z,{children:[(0,a.jsxs)(r.Z,{value:"ce",label:"get-contract-name.js",default:!0,children:[(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",metastring:'title="Fetching the contract\'s name"',children:"// Address of the contract you want to interact with.\nconst address = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, address);\n\n// Call any of the 'Read contract' functions e.g. 'name()'\nconst contractName = await contract.methods.name().call();\n\nconsole.log('Contract\\'s Name is: ', contractName);\n"})}),(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",metastring:'title="get-contract-name.js"',children:"import { Web3 } from 'web3';\nimport { abi } from './abi.js';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk Sepolia.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\n// const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Address of the contract you want to interact with.\nconst address = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, address);\n\n// Call any of the 'Read contract' functions e.g. 'name()'\nconst contractName = await contract.methods.name().call();\n\nconsole.log('Contract\\'s Name is: ', contractName);\n"})}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-text",metastring:'title="Output"',children:"Contract's Name is: Lisk\n"})})]})]}),(0,a.jsxs)(r.Z,{value:"abi",label:"abi.js",children:[(0,a.jsxs)(e.admonition,{type:"tip",children:[(0,a.jsxs)(e.p,{children:["The ABI of a contract can be found on the respective contract page in ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/",children:"BlockScout"}),"."]}),(0,a.jsxs)(e.p,{children:["For example, you can use the ABI for the ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/token/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=contract",children:"Lisk NFT Token contract"}),".\nJust scroll down to ",(0,a.jsx)(e.code,{children:"Contract ABI"})," and copy the deployed contract's ABI."]})]}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",metastring:'title="abi.js"',children:'export const abi = [\n {\n "inputs": [],\n "stateMutability": "nonpayable",\n "type": "constructor"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "sender",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n },\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n }\n ],\n "name": "ERC721IncorrectOwner",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "ERC721InsufficientApproval",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "approver",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidApprover",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidOperator",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidOwner",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "receiver",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidReceiver",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "sender",\n "type": "address"\n }\n ],\n "name": "ERC721InvalidSender",\n "type": "error"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "ERC721NonexistentToken",\n "type": "error"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "owner",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "address",\n "name": "approved",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "Approval",\n "type": "event"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "owner",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "address",\n "name": "operator",\n "type": "address"\n },\n {\n "indexed": false,\n "internalType": "bool",\n "name": "approved",\n "type": "bool"\n }\n ],\n "name": "ApprovalForAll",\n "type": "event"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "indexed": true,\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "Transfer",\n "type": "event"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "approve",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n }\n ],\n "name": "balanceOf",\n "outputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "currentTokenId",\n "outputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "getApproved",\n "outputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "owner",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n }\n ],\n "name": "isApprovedForAll",\n "outputs": [\n {\n "internalType": "bool",\n "name": "",\n "type": "bool"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "recipient",\n "type": "address"\n }\n ],\n "name": "mint",\n "outputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "stateMutability": "payable",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "name",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "ownerOf",\n "outputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "safeTransferFrom",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n },\n {\n "internalType": "bytes",\n "name": "data",\n "type": "bytes"\n }\n ],\n "name": "safeTransferFrom",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "operator",\n "type": "address"\n },\n {\n "internalType": "bool",\n "name": "approved",\n "type": "bool"\n }\n ],\n "name": "setApprovalForAll",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "bytes4",\n "name": "interfaceId",\n "type": "bytes4"\n }\n ],\n "name": "supportsInterface",\n "outputs": [\n {\n "internalType": "bool",\n "name": "",\n "type": "bool"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "symbol",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "tokenURI",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "from",\n "type": "address"\n },\n {\n "internalType": "address",\n "name": "to",\n "type": "address"\n },\n {\n "internalType": "uint256",\n "name": "tokenId",\n "type": "uint256"\n }\n ],\n "name": "transferFrom",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n }\n];\n'})})]})]}),"\n",(0,a.jsx)(e.h3,{id:"writing-to-smart-contracts",children:"Writing to smart contracts"}),"\n",(0,a.jsx)(e.p,{children:"To write data through a contract's method, a few things are required such as:"}),"\n",(0,a.jsxs)(e.ul,{children:["\n",(0,a.jsx)(e.li,{children:"contract's address"}),"\n",(0,a.jsx)(e.li,{children:"recipient's address"}),"\n",(0,a.jsx)(e.li,{children:"private key of the sender"}),"\n",(0,a.jsx)(e.li,{children:"... and the method's name"}),"\n"]}),"\n",(0,a.jsxs)(e.p,{children:["Use the following snippet to interact with an already ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/address/0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5?tab=write_contract",children:"deployed contract's"})," ",(0,a.jsx)(e.code,{children:"mint()"})," function."]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",metastring:'title="miniting-token.js"',children:"// Address of the contract you want to interact with.\nconst contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Address of the Recipient account receiving the NFT.\nconst recipientAddress = 'RECIPIENT_ADDRESS'\nconst amount = web3.utils.toWei('.0001', 'ether')\n\n// PRIVATE_KEY of the sender's account.\nconst privateKey = 'PRIVATE_KEY';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Send a request to the 'mint()' function to mint a token.\nconst txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });\n\nconsole.log('Tx hash:', txReceipt.transactionHash);\n"})}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)("summary",{children:"Complete code example"}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-javascript",metastring:'title="miniting-token.js"',children:"import { Web3 } from 'web3';\nimport { abi } from './abi.js';\n\n// Instantiate a web3 object by passing the RPC URL of Lisk.\nconst web3 = new Web3('https://rpc.sepolia-api.lisk.com');\n\n// For Lisk network\n//const web3 = new Web3('https://rpc.api.lisk.com');\n\n// Address of the contract you want to interact with.\nconst contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';\n\n// Address of the Recipient account receiving the NFT.\nconst recipientAddress = 'RECIPIENT_ADDRESS'\nconst amount = web3.utils.toWei('.0001', 'ether')\n\n// PRIVATE_KEY of the sender's account.\nconst privateKey = 'PRIVATE_KEY';\nconst account = web3.eth.accounts.wallet.add(privateKey);\n\n// Instantiate the contract object\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Send a request to the 'mint()' function to mint a token.\nconst txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });\n\nconsole.log('Tx hash:', txReceipt.transactionHash);\n"})}),(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-text",metastring:'title="Output"',children:"Transaction hash: 0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9\n"})}),(0,a.jsx)(e.admonition,{type:"info",children:(0,a.jsxs)(e.p,{children:["You can use the transaction hash received above to check the details of the ",(0,a.jsx)(e.code,{children:"mint"})," transaction on Blockscout Explorer: ",(0,a.jsx)(e.a,{href:"https://sepolia-blockscout.lisk.com/tx/0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9",children:(0,a.jsx)(e.code,{children:"0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9"})}),"."]})})]})]})}function h(n={}){const{wrapper:e}={...(0,s.a)(),...n.components};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(u,{...n})}):u(n)}},5162:(n,e,t)=>{t.d(e,{Z:()=>r});t(7294);var a=t(512);const s={tabItem:"tabItem_Ymn6"};var i=t(5893);function r(n){let{children:e,hidden:t,className:r}=n;return(0,i.jsx)("div",{role:"tabpanel",className:(0,a.Z)(s.tabItem,r),hidden:t,children:e})}},4866:(n,e,t)=>{t.d(e,{Z:()=>k});var a=t(7294),s=t(512),i=t(2466),r=t(6550),o=t(469),c=t(1980),l=t(7392),d=t(812);function p(n){return a.Children.toArray(n).filter((n=>"\n"!==n)).map((n=>{if(!n||(0,a.isValidElement)(n)&&function(n){const{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw new Error(`Docusaurus error: Bad child <${"string"==typeof n.type?n.type:n.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(n){const{values:e,children:t}=n;return(0,a.useMemo)((()=>{const n=e??function(n){return p(n).map((n=>{let{props:{value:e,label:t,attributes:a,default:s}}=n;return{value:e,label:t,attributes:a,default:s}}))}(t);return function(n){const e=(0,l.lx)(n,((n,e)=>n.value===e.value));if(e.length>0)throw new Error(`Docusaurus error: Duplicate values "${e.map((n=>n.value)).join(", ")}" found in . Every value needs to be unique.`)}(n),n}),[e,t])}function h(n){let{value:e,tabValues:t}=n;return t.some((n=>n.value===e))}function m(n){let{queryString:e=!1,groupId:t}=n;const s=(0,r.k6)(),i=function(n){let{queryString:e=!1,groupId:t}=n;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:e,groupId:t});return[(0,c._X)(i),(0,a.useCallback)((n=>{if(!i)return;const e=new URLSearchParams(s.location.search);e.set(i,n),s.replace({...s.location,search:e.toString()})}),[i,s])]}function b(n){const{defaultValue:e,queryString:t=!1,groupId:s}=n,i=u(n),[r,c]=(0,a.useState)((()=>function(n){let{defaultValue:e,tabValues:t}=n;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(e){if(!h({value:e,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${t.map((n=>n.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const a=t.find((n=>n.default))??t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:e,tabValues:i}))),[l,p]=m({queryString:t,groupId:s}),[b,y]=function(n){let{groupId:e}=n;const t=function(n){return n?`docusaurus.tab.${n}`:null}(e),[s,i]=(0,d.Nk)(t);return[s,(0,a.useCallback)((n=>{t&&i.set(n)}),[t,i])]}({groupId:s}),f=(()=>{const n=l??b;return h({value:n,tabValues:i})?n:null})();(0,o.Z)((()=>{f&&c(f)}),[f]);return{selectedValue:r,selectValue:(0,a.useCallback)((n=>{if(!h({value:n,tabValues:i}))throw new Error(`Can't select invalid tab value=${n}`);c(n),p(n),y(n)}),[p,y,i]),tabValues:i}}var y=t(2389);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var w=t(5893);function x(n){let{className:e,block:t,selectedValue:a,selectValue:r,tabValues:o}=n;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),d=n=>{const e=n.currentTarget,t=c.indexOf(e),s=o[t].value;s!==a&&(l(e),r(s))},p=n=>{let e=null;switch(n.key){case"Enter":d(n);break;case"ArrowRight":{const t=c.indexOf(n.currentTarget)+1;e=c[t]??c[0];break}case"ArrowLeft":{const t=c.indexOf(n.currentTarget)-1;e=c[t]??c[c.length-1];break}}e?.focus()};return(0,w.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":t},e),children:o.map((n=>{let{value:e,label:t,attributes:i}=n;return(0,w.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:n=>c.push(n),onKeyDown:p,onClick:d,...i,className:(0,s.Z)("tabs__item",f.tabItem,i?.className,{"tabs__item--active":a===e}),children:t??e},e)}))})}function g(n){let{lazy:e,children:t,selectedValue:i}=n;const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const n=r.find((n=>n.props.value===i));return n?(0,a.cloneElement)(n,{className:(0,s.Z)("margin-top--md",n.props.className)}):null}return(0,w.jsx)("div",{className:"margin-top--md",children:r.map(((n,e)=>(0,a.cloneElement)(n,{key:e,hidden:n.props.value!==i})))})}function j(n){const e=b(n);return(0,w.jsxs)("div",{className:(0,s.Z)("tabs-container",f.tabList),children:[(0,w.jsx)(x,{...e,...n}),(0,w.jsx)(g,{...e,...n})]})}function k(n){const e=(0,y.Z)();return(0,w.jsx)(j,{...n,children:p(n.children)},String(e))}},1151:(n,e,t)=>{t.d(e,{Z:()=>o,a:()=>r});var a=t(7294);const s={},i=a.createContext(s);function r(n){const e=a.useContext(i);return a.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function o(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:r(n.components),a.createElement(i.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/554c6b45.7cc13b4f.js b/assets/js/554c6b45.aef64f62.js similarity index 92% rename from assets/js/554c6b45.7cc13b4f.js rename to assets/js/554c6b45.aef64f62.js index 5e97da310..89e4c4ba6 100644 --- a/assets/js/554c6b45.7cc13b4f.js +++ b/assets/js/554c6b45.aef64f62.js @@ -1 +1 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[2940],{5362:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"documentationSidebar":[{"type":"category","label":"About Lisk","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Introduction to Lisk","href":"/lisk-documentation/docs","docId":"intro","unlisted":false},{"type":"link","label":"Network information, official explorers & faucets","href":"/lisk-documentation/network-info","docId":"about-lisk/network-info","unlisted":false},{"type":"link","label":"Fees","href":"/lisk-documentation/fees","docId":"about-lisk/fees","unlisted":false}]},{"type":"category","label":"Building on Lisk","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Connecting to a wallet","href":"/lisk-documentation/user/connecting-to-a-wallet","docId":"docs-user/connecting-to-a-wallet","unlisted":false},{"type":"link","label":"Contracts","href":"/lisk-documentation/contracts","docId":"building-on-lisk/contracts","unlisted":false},{"type":"link","label":"Bridged Token Addresses","href":"/lisk-documentation/bridged-tokens","docId":"building-on-lisk/bridged-tokens","unlisted":false},{"type":"link","label":"Running a Lisk Node","href":"/lisk-documentation/building-on-lisk/run-a-lisk-node","docId":"building-on-lisk/run-a-lisk-node","unlisted":false},{"type":"category","label":"Deploying a Smart Contract","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"... with Foundry","href":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-Foundry","docId":"building-on-lisk/deploying-smart-contract/with-Foundry","unlisted":false},{"type":"link","label":"... with Hardhat","href":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-Hardhat","docId":"building-on-lisk/deploying-smart-contract/with-Hardhat","unlisted":false},{"type":"link","label":"... with thirdweb","href":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-thirdweb","docId":"building-on-lisk/deploying-smart-contract/with-thirdweb","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk/deploying-smart-contract"},{"type":"category","label":"Bridging an L1 token to Lisk","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Introduction","href":"/lisk-documentation/building-on-lisk/add-token-to-lisk","docId":"building-on-lisk/add-token-to-lisk/index","unlisted":false},{"type":"link","label":"Deploying a standard token","href":"/lisk-documentation/building-on-lisk/add-token-to-lisk/standard-token","docId":"building-on-lisk/add-token-to-lisk/standard-token","unlisted":false},{"type":"link","label":"Deploying a custom token","href":"/lisk-documentation/building-on-lisk/add-token-to-lisk/custom-token","docId":"building-on-lisk/add-token-to-lisk/custom-token","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk/add-token-to-lisk"},{"type":"category","label":"Interacting with the blockchain","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"...with viem","href":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/viem","docId":"building-on-lisk/interacting-with-the-blockchain/viem","unlisted":false},{"type":"link","label":"...with ethers.js","href":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/ethers","docId":"building-on-lisk/interacting-with-the-blockchain/ethers","unlisted":false},{"type":"link","label":"...with web3.js","href":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/web3","docId":"building-on-lisk/interacting-with-the-blockchain/web3","unlisted":false}]},{"type":"category","label":"Token development","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Overview","href":"/lisk-documentation/token-development","docId":"building-on-lisk/token-development/overview","unlisted":false},{"type":"link","label":"How to deploy a new ERC-20 token on Lisk","href":"/lisk-documentation/building-on-lisk/token-development/deploy-erc-20","docId":"building-on-lisk/token-development/deploy-erc-20","unlisted":false},{"type":"link","label":"How to deploy a new ERC-721 token on Lisk","href":"/lisk-documentation/building-on-lisk/token-development/deploy-erc-721","docId":"building-on-lisk/token-development/deploy-erc-721","unlisted":false},{"type":"link","label":"How to deploy a new ERC-1155 token on Lisk","href":"/lisk-documentation/building-on-lisk/token-development/deploy-erc-1155","docId":"building-on-lisk/token-development/deploy-erc-1155","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk/token-development"},{"type":"link","label":"Accessing real-world data with Oracles","href":"/lisk-documentation/building-on-lisk/use-oracle-data","docId":"building-on-lisk/use-oracle-data","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk"},{"type":"category","label":"Lisk Tools","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"API Providers","href":"/lisk-documentation/lisk-tools/api-providers","docId":"lisk-tools/api-providers","unlisted":false},{"type":"link","label":"Faucets","href":"/lisk-documentation/lisk-tools/faucets","docId":"lisk-tools/faucets","unlisted":false},{"type":"link","label":"Bridges","href":"/lisk-documentation/user/bridges","docId":"docs-user/bridges","unlisted":false},{"type":"link","label":"Wallets","href":"/lisk-documentation/user/wallets","docId":"docs-user/wallets","unlisted":false},{"type":"link","label":"Oracles","href":"/lisk-documentation/lisk-tools/oracles","docId":"lisk-tools/oracles","unlisted":false},{"type":"link","label":"Utilities","href":"/lisk-documentation/lisk-tools/utilities","docId":"lisk-tools/utilities","unlisted":false},{"type":"link","label":"Data Indexers","href":"/lisk-documentation/lisk-tools/indexers","docId":"lisk-tools/indexers","unlisted":false}]},{"type":"category","label":"Lisk L1 legacy chain","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Legacy Chain Service","href":"/lisk-documentation/lisk-l1/legacy-chain-service","docId":"lisk-l1/legacy-chain-service","unlisted":false},{"type":"link","label":"Lisk L1->L2 migration guide","href":"/lisk-documentation/building-on-lisk/migration-guide","docId":"lisk-l1/migration-guide","unlisted":false}]}],"userSidebar":[{"type":"category","label":"Using Lisk","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Connecting to a wallet","href":"/lisk-documentation/user/connecting-to-a-wallet","docId":"docs-user/connecting-to-a-wallet","unlisted":false},{"type":"link","label":"Importing LSK to MetaMask","href":"/lisk-documentation/user/import-lsk-metamask","docId":"docs-user/using-lisk/import-lsk","unlisted":false},{"type":"link","label":"Exchanges supporting Lisk","href":"/lisk-documentation/user/exchanges","docId":"docs-user/exchanges","unlisted":false},{"type":"link","label":"Wallets","href":"/lisk-documentation/user/wallets","docId":"docs-user/wallets","unlisted":false},{"type":"link","label":"How to claim LSK","href":"/lisk-documentation/user/claiming","docId":"docs-user/claiming","unlisted":false},{"type":"link","label":"Bridges","href":"/lisk-documentation/user/bridges","docId":"docs-user/bridges","unlisted":false}]},{"type":"category","label":"Governance","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Overview","href":"/lisk-documentation/governance/overview","docId":"docs-user/governance/overview","unlisted":false},{"type":"link","label":"Delegation","href":"/lisk-documentation/governance/delegation","docId":"docs-user/governance/delegation","unlisted":false},{"type":"link","label":"Proposal Lifecycle","href":"/lisk-documentation/governance/proposal-lifecycle","docId":"docs-user/governance/proposal-lifecycle","unlisted":false},{"type":"link","label":"Voting","href":"/lisk-documentation/governance/voting","docId":"docs-user/governance/voting","unlisted":false}],"href":"/lisk-documentation/category/governance"},{"type":"category","label":"Staking","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Overview","href":"/lisk-documentation/user/staking/overview","docId":"docs-user/staking/staking","unlisted":false},{"type":"link","label":"How to stake LSK","href":"/lisk-documentation/user/staking/stake-unstake","docId":"docs-user/staking/stake-unstake","unlisted":false},{"type":"link","label":"How to pause the stake countdown","href":"/lisk-documentation/user/staking/pause-position","docId":"docs-user/staking/pause-position","unlisted":false},{"type":"link","label":"How to increase the stake","href":"/lisk-documentation/user/staking/increase-stake","docId":"docs-user/staking/increase-stake","unlisted":false},{"type":"link","label":"How to extend the stake countdown","href":"/lisk-documentation/user/staking/extend-duration","docId":"docs-user/staking/extend-duration","unlisted":false},{"type":"link","label":"How to unstake early","href":"/lisk-documentation/user/staking/early-unstake","docId":"docs-user/staking/early-unlock","unlisted":false}],"href":"/lisk-documentation/category/staking"}]},"docs":{"about-lisk/fees":{"id":"about-lisk/fees","title":"Fees","description":"Documentation about network fees on Lisk. This page covers details of the two-component cost system involving L2 execution fees and L1 data fees, and offers insights on fee variations and cost-saving strategies.","sidebar":"documentationSidebar"},"about-lisk/network-info":{"id":"about-lisk/network-info","title":"Network information, official explorers & faucets","description":"Network information, official explorers, and faucets available for Lisk L2 network.","sidebar":"documentationSidebar"},"building-on-lisk/add-token-to-lisk/custom-token":{"id":"building-on-lisk/add-token-to-lisk/custom-token","title":"Deploying a custom token","description":"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.","sidebar":"documentationSidebar"},"building-on-lisk/add-token-to-lisk/index":{"id":"building-on-lisk/add-token-to-lisk/index","title":"Introduction","description":"Guide to adding external ERC-20 contracts deployed on Ethereum to Lisk network.","sidebar":"documentationSidebar"},"building-on-lisk/add-token-to-lisk/standard-token":{"id":"building-on-lisk/add-token-to-lisk/standard-token","title":"Deploying a standard token","description":"Learn how to add your standard ERC-20 token to Lisk using the standard bridge.","sidebar":"documentationSidebar"},"building-on-lisk/bridged-tokens":{"id":"building-on-lisk/bridged-tokens","title":"Bridged Token Addresses","description":"A reference page listing all tokens bridged to Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/contracts":{"id":"building-on-lisk/contracts","title":"Contracts","description":"A reference page listing all the contracts deployed concerning Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/deploying-smart-contract/with-Foundry":{"id":"building-on-lisk/deploying-smart-contract/with-Foundry","title":"... with Foundry","description":"A guide on deploying a smart contract on the Lisk test network using Foundry. Includes instructions for setting up the environment, compiling, and deploying the smart contract.","sidebar":"documentationSidebar"},"building-on-lisk/deploying-smart-contract/with-Hardhat":{"id":"building-on-lisk/deploying-smart-contract/with-Hardhat","title":"... with Hardhat","description":"A guide on deploying a smart contract on the Lisk test network using Hardhat. Includes instructions for setting up the environment, compiling, and deploying the smart contract.","sidebar":"documentationSidebar"},"building-on-lisk/deploying-smart-contract/with-thirdweb":{"id":"building-on-lisk/deploying-smart-contract/with-thirdweb","title":"... with thirdweb","description":"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.","sidebar":"documentationSidebar"},"building-on-lisk/interacting-with-the-blockchain/ethers":{"id":"building-on-lisk/interacting-with-the-blockchain/ethers","title":"...with ethers.js","description":"Documentation for using ethers.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.","sidebar":"documentationSidebar"},"building-on-lisk/interacting-with-the-blockchain/viem":{"id":"building-on-lisk/interacting-with-the-blockchain/viem","title":"...with viem","description":"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/interacting-with-the-blockchain/web3":{"id":"building-on-lisk/interacting-with-the-blockchain/web3","title":"...with web3.js","description":"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.","sidebar":"documentationSidebar"},"building-on-lisk/run-a-lisk-node":{"id":"building-on-lisk/run-a-lisk-node","title":"Running a Lisk Node","description":"A tutorial that teaches how to set up and run a Lisk Node.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/deploy-erc-1155":{"id":"building-on-lisk/token-development/deploy-erc-1155","title":"How to deploy a new ERC-1155 token on Lisk","description":"A guide on how to deploy a new ERC-1155 token on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/deploy-erc-20":{"id":"building-on-lisk/token-development/deploy-erc-20","title":"How to deploy a new ERC-20 token on Lisk","description":"A guide on how to deploy a new ERC-20 token on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/deploy-erc-721":{"id":"building-on-lisk/token-development/deploy-erc-721","title":"How to deploy a new ERC-721 token on Lisk","description":"A guide on how to deploy a new ERC-721 token on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/overview":{"id":"building-on-lisk/token-development/overview","title":"Overview","description":"An introduction into token development on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/use-oracle-data":{"id":"building-on-lisk/use-oracle-data","title":"Accessing real-world data with Oracles","description":"A guide on using Redstone Data Feeds to access real-world data such as asset prices, directly from your smart contracts on the Lisk testnet.","sidebar":"documentationSidebar"},"docs-user/bridges":{"id":"docs-user/bridges","title":"Bridges","description":"Documentation for bridging assets to Lisk. This page covers how to bridge ETH and ERC-20s between Ethereum Sepolia and Lisk Sepoklia, with essential cautions and contract information.","sidebar":"userSidebar"},"docs-user/claiming":{"id":"docs-user/claiming","title":"How to claim LSK","description":"How to claim LSK tokens on Lisk L2.","sidebar":"userSidebar"},"docs-user/connecting-to-a-wallet":{"id":"docs-user/connecting-to-a-wallet","title":"Connecting to a wallet","description":"How to integrate Lisk with popular wallets like MetaMask.","sidebar":"userSidebar"},"docs-user/exchanges":{"id":"docs-user/exchanges","title":"Exchanges supporting Lisk","description":"A summary of all exchanges where you can buy LSK","sidebar":"userSidebar"},"docs-user/governance/delegation":{"id":"docs-user/governance/delegation","title":"Delegation","description":"Documentation about the delegation process of the Lisk DAO.","sidebar":"userSidebar"},"docs-user/governance/overview":{"id":"docs-user/governance/overview","title":"Overview","description":"Documentation about the governance of the Lisk project.","sidebar":"userSidebar"},"docs-user/governance/proposal-lifecycle":{"id":"docs-user/governance/proposal-lifecycle","title":"Proposal Lifecycle","description":"Summarizes the lifecycle of a proposal for the Lisk DAO.","sidebar":"userSidebar"},"docs-user/governance/voting":{"id":"docs-user/governance/voting","title":"Voting","description":"Documentation about the voting process of the Lisk DAO.","sidebar":"userSidebar"},"docs-user/intro-user":{"id":"docs-user/intro-user","title":"Overview","description":"In this section, we will walk you through various ways of interacting with Lisk\'s products and services."},"docs-user/staking/early-unlock":{"id":"docs-user/staking/early-unlock","title":"How to unstake early","description":"How to unstake a particular locking position before it has expired.","sidebar":"userSidebar"},"docs-user/staking/extend-duration":{"id":"docs-user/staking/extend-duration","title":"How to extend the stake countdown","description":"How to extend the stake of a particular locking position.","sidebar":"userSidebar"},"docs-user/staking/increase-stake":{"id":"docs-user/staking/increase-stake","title":"How to increase the stake","description":"How to inscrease the stake of a particular locking position.","sidebar":"userSidebar"},"docs-user/staking/pause-position":{"id":"docs-user/staking/pause-position","title":"How to pause the stake countdown","description":"How to pause the countdown of a locking position.","sidebar":"userSidebar"},"docs-user/staking/stake-unstake":{"id":"docs-user/staking/stake-unstake","title":"How to stake LSK","description":"How to stake and un-stake LSK tokens","sidebar":"userSidebar"},"docs-user/staking/staking":{"id":"docs-user/staking/staking","title":"Overview","description":"How to stake LSK tokens to receive staking rewards.","sidebar":"userSidebar"},"docs-user/using-lisk/import-lsk":{"id":"docs-user/using-lisk/import-lsk","title":"Importing LSK to MetaMask","description":"How to integrate Lisk with popular wallets like MetaMask.","sidebar":"userSidebar"},"docs-user/wallets":{"id":"docs-user/wallets","title":"Wallets","description":"A summary of the most important wallets supporting the LSK token.","sidebar":"userSidebar"},"intro":{"id":"intro","title":"Introduction to Lisk","description":"A brief introduction about Lisk L2, its basis, connection to Ethereum and its main contributors","sidebar":"documentationSidebar"},"lisk-l1/legacy-chain-service":{"id":"lisk-l1/legacy-chain-service","title":"Legacy Chain Service","description":"How to access data from the Lisk L1 legacy chain.","sidebar":"documentationSidebar"},"lisk-l1/migration-guide":{"id":"lisk-l1/migration-guide","title":"Lisk L1->L2 migration guide","description":"A migration guide, explaining how to smoothly migrate any Lisk L1 app to Lisk L2.","sidebar":"documentationSidebar"},"lisk-tools/api-providers":{"id":"lisk-tools/api-providers","title":"API Providers","description":"Documentation for Node Providers for the Lisk network. Including details on their services, supported networks, and pricing plans.","sidebar":"documentationSidebar"},"lisk-tools/faucets":{"id":"lisk-tools/faucets","title":"Faucets","description":"Summary of available ETH and LSK faucets on the Lisk Seolia Testnet. Get free testnet tokens on Lisk Sepolia.","sidebar":"documentationSidebar"},"lisk-tools/indexers":{"id":"lisk-tools/indexers","title":"Data Indexers","description":"Brief introduction to all the indexers linked with Lisk L2.","sidebar":"documentationSidebar"},"lisk-tools/oracles":{"id":"lisk-tools/oracles","title":"Oracles","description":"Documentation for various blockchain oracles for Lisk.","sidebar":"documentationSidebar"},"lisk-tools/utilities":{"id":"lisk-tools/utilities","title":"Utilities","description":"Summary of various services available for building on Lisk.","sidebar":"documentationSidebar"}}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[2940],{5362:e=>{e.exports=JSON.parse('{"version":{"pluginId":"default","version":"current","label":"Next","banner":null,"badge":false,"noIndex":false,"className":"docs-version-current","isLast":true,"docsSidebars":{"documentationSidebar":[{"type":"category","label":"About Lisk","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Introduction to Lisk","href":"/lisk-documentation/docs","docId":"intro","unlisted":false},{"type":"link","label":"Network information, official explorers & faucets","href":"/lisk-documentation/network-info","docId":"about-lisk/network-info","unlisted":false},{"type":"link","label":"Fees","href":"/lisk-documentation/fees","docId":"about-lisk/fees","unlisted":false}]},{"type":"category","label":"Building on Lisk","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Connecting to a wallet","href":"/lisk-documentation/user/connecting-to-a-wallet","docId":"docs-user/connecting-to-a-wallet","unlisted":false},{"type":"link","label":"Contracts","href":"/lisk-documentation/contracts","docId":"building-on-lisk/contracts","unlisted":false},{"type":"link","label":"Bridged Token Addresses","href":"/lisk-documentation/bridged-tokens","docId":"building-on-lisk/bridged-tokens","unlisted":false},{"type":"link","label":"Running a Lisk Node","href":"/lisk-documentation/building-on-lisk/run-a-lisk-node","docId":"building-on-lisk/run-a-lisk-node","unlisted":false},{"type":"category","label":"Deploying a Smart Contract","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"... with Foundry","href":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-Foundry","docId":"building-on-lisk/deploying-smart-contract/with-Foundry","unlisted":false},{"type":"link","label":"... with Hardhat","href":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-Hardhat","docId":"building-on-lisk/deploying-smart-contract/with-Hardhat","unlisted":false},{"type":"link","label":"... with thirdweb","href":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-thirdweb","docId":"building-on-lisk/deploying-smart-contract/with-thirdweb","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk/deploying-smart-contract"},{"type":"category","label":"Interacting with the blockchain","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"...with viem","href":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/viem","docId":"building-on-lisk/interacting-with-the-blockchain/viem","unlisted":false},{"type":"link","label":"...with ethers.js","href":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/ethers","docId":"building-on-lisk/interacting-with-the-blockchain/ethers","unlisted":false},{"type":"link","label":"...with web3.js","href":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/web3","docId":"building-on-lisk/interacting-with-the-blockchain/web3","unlisted":false}]},{"type":"category","label":"Bridging an L1 token to Lisk","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Introduction","href":"/lisk-documentation/building-on-lisk/add-token-to-lisk","docId":"building-on-lisk/add-token-to-lisk/index","unlisted":false},{"type":"link","label":"Deploying a standard token","href":"/lisk-documentation/building-on-lisk/add-token-to-lisk/standard-token","docId":"building-on-lisk/add-token-to-lisk/standard-token","unlisted":false},{"type":"link","label":"Deploying a custom token","href":"/lisk-documentation/building-on-lisk/add-token-to-lisk/custom-token","docId":"building-on-lisk/add-token-to-lisk/custom-token","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk/add-token-to-lisk"},{"type":"category","label":"Token development","collapsible":true,"collapsed":true,"items":[{"type":"link","label":"Overview","href":"/lisk-documentation/token-development","docId":"building-on-lisk/token-development/overview","unlisted":false},{"type":"link","label":"How to deploy a new ERC-20 token on Lisk","href":"/lisk-documentation/building-on-lisk/token-development/deploy-erc-20","docId":"building-on-lisk/token-development/deploy-erc-20","unlisted":false},{"type":"link","label":"How to deploy a new ERC-721 token on Lisk","href":"/lisk-documentation/building-on-lisk/token-development/deploy-erc-721","docId":"building-on-lisk/token-development/deploy-erc-721","unlisted":false},{"type":"link","label":"How to deploy a new ERC-1155 token on Lisk","href":"/lisk-documentation/building-on-lisk/token-development/deploy-erc-1155","docId":"building-on-lisk/token-development/deploy-erc-1155","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk/token-development"},{"type":"link","label":"Accessing real-world data with Oracles","href":"/lisk-documentation/building-on-lisk/use-oracle-data","docId":"building-on-lisk/use-oracle-data","unlisted":false}],"href":"/lisk-documentation/category/building-on-lisk"},{"type":"category","label":"Lisk Tools","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"API Providers","href":"/lisk-documentation/lisk-tools/api-providers","docId":"lisk-tools/api-providers","unlisted":false},{"type":"link","label":"Faucets","href":"/lisk-documentation/lisk-tools/faucets","docId":"lisk-tools/faucets","unlisted":false},{"type":"link","label":"Bridges","href":"/lisk-documentation/user/bridges","docId":"docs-user/bridges","unlisted":false},{"type":"link","label":"Wallets","href":"/lisk-documentation/user/wallets","docId":"docs-user/wallets","unlisted":false},{"type":"link","label":"Oracles","href":"/lisk-documentation/lisk-tools/oracles","docId":"lisk-tools/oracles","unlisted":false},{"type":"link","label":"Utilities","href":"/lisk-documentation/lisk-tools/utilities","docId":"lisk-tools/utilities","unlisted":false},{"type":"link","label":"Data Indexers","href":"/lisk-documentation/lisk-tools/indexers","docId":"lisk-tools/indexers","unlisted":false}]},{"type":"category","label":"Lisk L1 legacy chain","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Legacy Chain Service","href":"/lisk-documentation/lisk-l1/legacy-chain-service","docId":"lisk-l1/legacy-chain-service","unlisted":false},{"type":"link","label":"Lisk L1->L2 migration guide","href":"/lisk-documentation/building-on-lisk/migration-guide","docId":"lisk-l1/migration-guide","unlisted":false}]}],"userSidebar":[{"type":"category","label":"Using Lisk","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Connecting to a wallet","href":"/lisk-documentation/user/connecting-to-a-wallet","docId":"docs-user/connecting-to-a-wallet","unlisted":false},{"type":"link","label":"Importing LSK to MetaMask","href":"/lisk-documentation/user/import-lsk-metamask","docId":"docs-user/using-lisk/import-lsk","unlisted":false},{"type":"link","label":"Exchanges supporting Lisk","href":"/lisk-documentation/user/exchanges","docId":"docs-user/exchanges","unlisted":false},{"type":"link","label":"Wallets","href":"/lisk-documentation/user/wallets","docId":"docs-user/wallets","unlisted":false},{"type":"link","label":"How to claim LSK","href":"/lisk-documentation/user/claiming","docId":"docs-user/claiming","unlisted":false},{"type":"link","label":"Bridges","href":"/lisk-documentation/user/bridges","docId":"docs-user/bridges","unlisted":false}]},{"type":"category","label":"Governance","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Overview","href":"/lisk-documentation/governance/overview","docId":"docs-user/governance/overview","unlisted":false},{"type":"link","label":"Delegation","href":"/lisk-documentation/governance/delegation","docId":"docs-user/governance/delegation","unlisted":false},{"type":"link","label":"Proposal Lifecycle","href":"/lisk-documentation/governance/proposal-lifecycle","docId":"docs-user/governance/proposal-lifecycle","unlisted":false},{"type":"link","label":"Voting","href":"/lisk-documentation/governance/voting","docId":"docs-user/governance/voting","unlisted":false}],"href":"/lisk-documentation/category/governance"},{"type":"category","label":"Staking","collapsible":true,"collapsed":false,"items":[{"type":"link","label":"Overview","href":"/lisk-documentation/user/staking/overview","docId":"docs-user/staking/staking","unlisted":false},{"type":"link","label":"How to stake LSK","href":"/lisk-documentation/user/staking/stake-unstake","docId":"docs-user/staking/stake-unstake","unlisted":false},{"type":"link","label":"How to pause the stake countdown","href":"/lisk-documentation/user/staking/pause-position","docId":"docs-user/staking/pause-position","unlisted":false},{"type":"link","label":"How to increase the stake","href":"/lisk-documentation/user/staking/increase-stake","docId":"docs-user/staking/increase-stake","unlisted":false},{"type":"link","label":"How to extend the stake countdown","href":"/lisk-documentation/user/staking/extend-duration","docId":"docs-user/staking/extend-duration","unlisted":false},{"type":"link","label":"How to unstake early","href":"/lisk-documentation/user/staking/early-unstake","docId":"docs-user/staking/early-unlock","unlisted":false}],"href":"/lisk-documentation/category/staking"}]},"docs":{"about-lisk/fees":{"id":"about-lisk/fees","title":"Fees","description":"Documentation about network fees on Lisk. This page covers details of the two-component cost system involving L2 execution fees and L1 data fees, and offers insights on fee variations and cost-saving strategies.","sidebar":"documentationSidebar"},"about-lisk/network-info":{"id":"about-lisk/network-info","title":"Network information, official explorers & faucets","description":"Network information, official explorers, and faucets available for Lisk L2 network.","sidebar":"documentationSidebar"},"building-on-lisk/add-token-to-lisk/custom-token":{"id":"building-on-lisk/add-token-to-lisk/custom-token","title":"Deploying a custom token","description":"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.","sidebar":"documentationSidebar"},"building-on-lisk/add-token-to-lisk/index":{"id":"building-on-lisk/add-token-to-lisk/index","title":"Introduction","description":"Guide to adding external ERC-20 contracts deployed on Ethereum to Lisk network.","sidebar":"documentationSidebar"},"building-on-lisk/add-token-to-lisk/standard-token":{"id":"building-on-lisk/add-token-to-lisk/standard-token","title":"Deploying a standard token","description":"Learn how to add your standard ERC-20 token to Lisk using the standard bridge.","sidebar":"documentationSidebar"},"building-on-lisk/bridged-tokens":{"id":"building-on-lisk/bridged-tokens","title":"Bridged Token Addresses","description":"A reference page listing all tokens bridged to Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/contracts":{"id":"building-on-lisk/contracts","title":"Contracts","description":"A reference page listing all the contracts deployed concerning Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/deploying-smart-contract/with-Foundry":{"id":"building-on-lisk/deploying-smart-contract/with-Foundry","title":"... with Foundry","description":"A guide on deploying a smart contract on the Lisk test network using Foundry. Includes instructions for setting up the environment, compiling, and deploying the smart contract.","sidebar":"documentationSidebar"},"building-on-lisk/deploying-smart-contract/with-Hardhat":{"id":"building-on-lisk/deploying-smart-contract/with-Hardhat","title":"... with Hardhat","description":"A guide on deploying a smart contract on the Lisk test network using Hardhat. Includes instructions for setting up the environment, compiling, and deploying the smart contract.","sidebar":"documentationSidebar"},"building-on-lisk/deploying-smart-contract/with-thirdweb":{"id":"building-on-lisk/deploying-smart-contract/with-thirdweb","title":"... with thirdweb","description":"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.","sidebar":"documentationSidebar"},"building-on-lisk/interacting-with-the-blockchain/ethers":{"id":"building-on-lisk/interacting-with-the-blockchain/ethers","title":"...with ethers.js","description":"Documentation for using ethers.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.","sidebar":"documentationSidebar"},"building-on-lisk/interacting-with-the-blockchain/viem":{"id":"building-on-lisk/interacting-with-the-blockchain/viem","title":"...with viem","description":"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/interacting-with-the-blockchain/web3":{"id":"building-on-lisk/interacting-with-the-blockchain/web3","title":"...with web3.js","description":"Documentation for using web3.js, a JavaScript library for EVM-compatible blockchain interactions. This page covers installation, setup, connecting to the Lisk network, reading and writing blockchain data, and interacting with smart contracts.","sidebar":"documentationSidebar"},"building-on-lisk/run-a-lisk-node":{"id":"building-on-lisk/run-a-lisk-node","title":"Running a Lisk Node","description":"A tutorial that teaches how to set up and run a Lisk Node.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/deploy-erc-1155":{"id":"building-on-lisk/token-development/deploy-erc-1155","title":"How to deploy a new ERC-1155 token on Lisk","description":"A guide on how to deploy a new ERC-1155 token on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/deploy-erc-20":{"id":"building-on-lisk/token-development/deploy-erc-20","title":"How to deploy a new ERC-20 token on Lisk","description":"A guide on how to deploy a new ERC-20 token on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/deploy-erc-721":{"id":"building-on-lisk/token-development/deploy-erc-721","title":"How to deploy a new ERC-721 token on Lisk","description":"A guide on how to deploy a new ERC-721 token on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/token-development/overview":{"id":"building-on-lisk/token-development/overview","title":"Overview","description":"An introduction into token development on Lisk.","sidebar":"documentationSidebar"},"building-on-lisk/use-oracle-data":{"id":"building-on-lisk/use-oracle-data","title":"Accessing real-world data with Oracles","description":"A guide on using Redstone Data Feeds to access real-world data such as asset prices, directly from your smart contracts on the Lisk testnet.","sidebar":"documentationSidebar"},"docs-user/bridges":{"id":"docs-user/bridges","title":"Bridges","description":"Documentation for bridging assets to Lisk. This page covers how to bridge ETH and ERC-20s between Ethereum Sepolia and Lisk Sepoklia, with essential cautions and contract information.","sidebar":"userSidebar"},"docs-user/claiming":{"id":"docs-user/claiming","title":"How to claim LSK","description":"How to claim LSK tokens on Lisk L2.","sidebar":"userSidebar"},"docs-user/connecting-to-a-wallet":{"id":"docs-user/connecting-to-a-wallet","title":"Connecting to a wallet","description":"How to integrate Lisk with popular wallets like MetaMask.","sidebar":"userSidebar"},"docs-user/exchanges":{"id":"docs-user/exchanges","title":"Exchanges supporting Lisk","description":"A summary of all exchanges where you can buy LSK","sidebar":"userSidebar"},"docs-user/governance/delegation":{"id":"docs-user/governance/delegation","title":"Delegation","description":"Documentation about the delegation process of the Lisk DAO.","sidebar":"userSidebar"},"docs-user/governance/overview":{"id":"docs-user/governance/overview","title":"Overview","description":"Documentation about the governance of the Lisk project.","sidebar":"userSidebar"},"docs-user/governance/proposal-lifecycle":{"id":"docs-user/governance/proposal-lifecycle","title":"Proposal Lifecycle","description":"Summarizes the lifecycle of a proposal for the Lisk DAO.","sidebar":"userSidebar"},"docs-user/governance/voting":{"id":"docs-user/governance/voting","title":"Voting","description":"Documentation about the voting process of the Lisk DAO.","sidebar":"userSidebar"},"docs-user/intro-user":{"id":"docs-user/intro-user","title":"Overview","description":"In this section, we will walk you through various ways of interacting with Lisk\'s products and services."},"docs-user/staking/early-unlock":{"id":"docs-user/staking/early-unlock","title":"How to unstake early","description":"How to unstake a particular locking position before it has expired.","sidebar":"userSidebar"},"docs-user/staking/extend-duration":{"id":"docs-user/staking/extend-duration","title":"How to extend the stake countdown","description":"How to extend the stake of a particular locking position.","sidebar":"userSidebar"},"docs-user/staking/increase-stake":{"id":"docs-user/staking/increase-stake","title":"How to increase the stake","description":"How to inscrease the stake of a particular locking position.","sidebar":"userSidebar"},"docs-user/staking/pause-position":{"id":"docs-user/staking/pause-position","title":"How to pause the stake countdown","description":"How to pause the countdown of a locking position.","sidebar":"userSidebar"},"docs-user/staking/stake-unstake":{"id":"docs-user/staking/stake-unstake","title":"How to stake LSK","description":"How to stake and un-stake LSK tokens","sidebar":"userSidebar"},"docs-user/staking/staking":{"id":"docs-user/staking/staking","title":"Overview","description":"How to stake LSK tokens to receive staking rewards.","sidebar":"userSidebar"},"docs-user/using-lisk/import-lsk":{"id":"docs-user/using-lisk/import-lsk","title":"Importing LSK to MetaMask","description":"How to integrate Lisk with popular wallets like MetaMask.","sidebar":"userSidebar"},"docs-user/wallets":{"id":"docs-user/wallets","title":"Wallets","description":"A summary of the most important wallets supporting the LSK token.","sidebar":"userSidebar"},"intro":{"id":"intro","title":"Introduction to Lisk","description":"A brief introduction about Lisk L2, its basis, connection to Ethereum and its main contributors","sidebar":"documentationSidebar"},"lisk-l1/legacy-chain-service":{"id":"lisk-l1/legacy-chain-service","title":"Legacy Chain Service","description":"How to access data from the Lisk L1 legacy chain.","sidebar":"documentationSidebar"},"lisk-l1/migration-guide":{"id":"lisk-l1/migration-guide","title":"Lisk L1->L2 migration guide","description":"A migration guide, explaining how to smoothly migrate any Lisk L1 app to Lisk L2.","sidebar":"documentationSidebar"},"lisk-tools/api-providers":{"id":"lisk-tools/api-providers","title":"API Providers","description":"Documentation for Node Providers for the Lisk network. Including details on their services, supported networks, and pricing plans.","sidebar":"documentationSidebar"},"lisk-tools/faucets":{"id":"lisk-tools/faucets","title":"Faucets","description":"Summary of available ETH and LSK faucets on the Lisk Seolia Testnet. Get free testnet tokens on Lisk Sepolia.","sidebar":"documentationSidebar"},"lisk-tools/indexers":{"id":"lisk-tools/indexers","title":"Data Indexers","description":"Brief introduction to all the indexers linked with Lisk L2.","sidebar":"documentationSidebar"},"lisk-tools/oracles":{"id":"lisk-tools/oracles","title":"Oracles","description":"Documentation for various blockchain oracles for Lisk.","sidebar":"documentationSidebar"},"lisk-tools/utilities":{"id":"lisk-tools/utilities","title":"Utilities","description":"Summary of various services available for building on Lisk.","sidebar":"documentationSidebar"}}}}')}}]); \ No newline at end of file diff --git a/assets/js/56867589.c76ceff1.js b/assets/js/56867589.c76ceff1.js deleted file mode 100644 index aac62fd13..000000000 --- a/assets/js/56867589.c76ceff1.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[8040],{7018:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>s,metadata:()=>c,toc:()=>h});var r=n(5893),i=n(1151),o=n(4866),a=n(5162);const s={title:"... with thirdweb",slug:"/building-on-lisk/deploying-smart-contract/with-thirdweb",description:"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.",keywords:["thirdweb","smart contract","ERC-721","Lisk","Lisk test network","Lisk testnet","Node.js","Solidity","smart contract deployment","deploy a smart contract","deploying smart contracts","build on lisk","write smart contract","smart contract development"],toc_max_heading_level:4},l="Deploying a smart contract with thirdweb",c={id:"building-on-lisk/deploying-smart-contract/with-thirdweb",title:"... with thirdweb",description:"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.",source:"@site/docs/building-on-lisk/deploying-smart-contract/with-thirdweb.mdx",sourceDirName:"building-on-lisk/deploying-smart-contract",slug:"/building-on-lisk/deploying-smart-contract/with-thirdweb",permalink:"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-thirdweb",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"... with thirdweb",slug:"/building-on-lisk/deploying-smart-contract/with-thirdweb",description:"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.",keywords:["thirdweb","smart contract","ERC-721","Lisk","Lisk test network","Lisk testnet","Node.js","Solidity","smart contract deployment","deploy a smart contract","deploying smart contracts","build on lisk","write smart contract","smart contract development"],toc_max_heading_level:4},sidebar:"documentationSidebar",previous:{title:"... with Hardhat",permalink:"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-Hardhat"},next:{title:"Bridging an L1 token to Lisk",permalink:"/lisk-documentation/category/building-on-lisk/add-token-to-lisk"}},d={},h=[{value:"Deploying pre-built contracts via thirdweb Explore",id:"deploying-pre-built-contracts-via-thirdweb-explore",level:2},{value:"via Solidity SDK",id:"via-solidity-sdk",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"Node.js v18+",id:"nodejs-v18",level:4},{value:"Installing and Configuring thirdweb",id:"installing-and-configuring-thirdweb",level:4},{value:"Logging in with your API key",id:"logging-in-with-your-api-key",level:4},{value:"Creating a project",id:"creating-a-project",level:3},{value:"Creating the smart contract",id:"creating-the-smart-contract",level:4},{value:"Building the smart contract",id:"building-the-smart-contract",level:4},{value:"Deploying the smart contract",id:"deploying-the-smart-contract",level:4},{value:"Interacting with the Smart Contract",id:"interacting-with-the-smart-contract",level:2}];function u(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"deploying-a-smart-contract-with-thirdweb",children:"Deploying a smart contract with thirdweb"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://thirdweb.com/",children:"thirdweb"})," is an end-to-end framework for smart contract development and deployment."]}),"\n",(0,r.jsxs)(t.p,{children:["It enables developers to deploy, standard contracts such as ERC-20, ERC-721, or ERC-1155, etc. without writing a line of code.\nMore of this is discussed in the ",(0,r.jsx)(t.a,{href:"#deploying-pre-built-contracts-via-thirdweb-explore",children:"via thirdweb Explore"})," section."]}),"\n",(0,r.jsxs)(t.p,{children:["Furthermore, developers looking to develop and deploy custom smart contracts can use the ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/build/overview",children:"Solidity SDK"})," provided by thirdweb, among others such as ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/typescript/v5",children:"TypeScript SDK"})," and ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/unity",children:"Unity SDK"}),".\nHowever, for this guide, we will mainly talk about the ",(0,r.jsx)(t.a,{href:"https://thirdweb.com/explore",children:"thirdweb Explore"})," and the ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/build/overview",children:"Solidity SDK"}),"."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Features:"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/explore/overview",children:"Explore"}),": Ready to deploy pre-built contracts."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/build/overview",children:"Build (Solidity SDK)"}),": Write custom smart contracts."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/deploy/overview",children:"Deploy"}),": Support for contract deployment built for any use case."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/publish/overview",children:"Publish"}),": Publish your contracts onchain."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/interact/overview",children:"Interact"}),": Interact with smart contracts and integrate smart contracts directly into your app."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"deploying-pre-built-contracts-via-thirdweb-explore",children:"Deploying pre-built contracts via thirdweb Explore"}),"\n",(0,r.jsxs)(t.p,{children:["In case you want to deploy a pre-built contract without any customization, thirdweb offers a convenient way to do so with ",(0,r.jsx)(t.strong,{children:"Explore"}),".\nCheck out the following video for a quick introduction to Explore:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=5300",children:["What is thirdweb ",(0,r.jsx)(t.strong,{children:"Explore"}),"?"]})}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsxs)(t.p,{children:["Before you try out the following guides, please ensure that your ",(0,r.jsx)(t.a,{href:"/user/connecting-to-a-wallet",children:"wallet is connected to Lisk's Network"})," and it has sufficient funds in it.\nFor more information, see the ",(0,r.jsx)(t.a,{href:"/building-on-lisk/deploying-smart-contract/with-Foundry#wallet-funds",children:"Wallet funds"})," section."]})}),"\n",(0,r.jsx)(t.p,{children:"The following videos describe step-by-step, how to deploy different tokens with pre-built contracts on Lisk."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=5776",children:["How to deploy a pre-built ",(0,r.jsx)(t.strong,{children:"ERC-20"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=6040",children:["How to deploy a pre-built ",(0,r.jsx)(t.strong,{children:"ERC-721"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=6396",children:["How to deploy a pre-built ",(0,r.jsx)(t.strong,{children:"ERC-1155"})," contract via Explore?"]})}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"via-solidity-sdk",children:"via Solidity SDK"}),"\n",(0,r.jsx)(t.h3,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,r.jsx)(t.h4,{id:"nodejs-v18",children:"Node.js v18+"}),"\n",(0,r.jsxs)(t.p,{children:["Download and install ",(0,r.jsx)(t.a,{href:"https://nodejs.org/en/download/",children:"Node v18+"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["If you are using nvm to manage your node versions, you can just run ",(0,r.jsx)(t.code,{children:"nvm install 18"}),"."]}),"\n",(0,r.jsx)(t.h4,{id:"installing-and-configuring-thirdweb",children:"Installing and Configuring thirdweb"}),"\n",(0,r.jsx)(t.p,{children:"To develop custom contracts, it is required to download and configure thirdweb."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["To install thirdweb run the following command:","\n",(0,r.jsxs)(o.Z,{children:[(0,r.jsx)(a.Z,{value:"npm",label:"NPM",default:!0,children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm i -g thirdweb\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn global add thirdweb\n"})})})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=9467",children:"Set up your thirdweb API key"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"logging-in-with-your-api-key",children:"Logging in with your API key"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["The next step is to log in to thirdweb via CLI, so to do that type the following:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"thirdweb login\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["Once, you execute the aforementioned command, the terminal will open a browser window where it will ask you to authenticate the device:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n\nAutomatically attempting to open a link to authenticate with our dashboard...\n\nIf the browser doesn't open, please use this link to authenticate:\n\nhttps://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\n\n\u2819 Waiting for a response from the dashboard\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["Once you authenticate via the browser, the terminal will log the following message:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"Successfully linked your account to this device \n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["You can verify your login status by re-running the ",(0,r.jsx)(t.code,{children:"thirdweb login"})," command.","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n"})}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"creating-a-project",children:"Creating a project"}),"\n",(0,r.jsxs)(t.p,{children:["The first step of deploying smart contracts to Lisk is to set up your development environment by creating a project.\nThe thirdweb supports two of the most popular smart contracts development frameworks such as ",(0,r.jsx)(t.a,{href:"https://book.getfoundry.sh/",children:"Foundry"})," and ",(0,r.jsx)(t.a,{href:"https://hardhat.org",children:"Hardhat"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"For this guide, we are using Foundry for smart contract development.\nHowever, you can use Hardhat if you are more comfortable with that.\nThe project creation steps are similar for both Foundry and Hardhat."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["For Foundry, install its ",(0,r.jsx)(t.a,{href:"/building-on-lisk/deploying-smart-contract/with-Foundry#prerequisites",children:"prerequisites"})," on your system before proceeding with the creation of a thirdweb project."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"Once, the aforementioned is installed, proceed with the following:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npx thirdweb create\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Choose ",(0,r.jsx)(t.code,{children:"Contract"})," as the type of your project and give an appropriate name to your project."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n\n\u2714 What type of project do you want to create? \u203a Contract\n\u2714 What is your project named? \u2026 thirdweb-contracts\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Next, choose ",(0,r.jsx)(t.code,{children:"Forge"})," as the framework, ",(0,r.jsx)(t.code,{children:"NFT"})," as the name of the contract, ",(0,r.jsx)(t.code,{children:"ERC721"})," as the type of smart contract, and ",(0,r.jsx)(t.code,{children:"None"})," for the extensions option."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["In case you want to use the Hardhat framework, choose ",(0,r.jsx)(t.code,{children:"Hardhat"})," instead of ",(0,r.jsx)(t.code,{children:"Forge"})," in the following dialogue."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"\u2714 What framework do you want to use? \u203a Forge\n\u2714 What will be the name of your new smart contract? \u2026 NFT\n\u2714 What type of contract do you want to start from? \u203a ERC721\n\u2714 What extensions do you want to add to your contract? \u203a None\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"thirdweb will install all the relevant dependencies and set up a contract project for you."}),"\n",(0,r.jsxs)(n,{children:[(0,r.jsxs)("summary",{children:["Execution logs of the thirdweb ",(0,r.jsx)(t.code,{children:"contract"})," project creation"]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"Creating a new thirdweb contracts project in /Users/XYZ/Lightcurve-Code/L2/thirdweb-contracts.\n\nDownloading files. This might take a moment.\nInstalling packages. This might take a couple of minutes.\n\nyarn install v1.22.19\nwarning ../../../package.json: No license field\ninfo No lockfile found.\n[1/4] \ud83d\udd0d Resolving packages...\n[2/4] \ud83d\ude9a Fetching packages...\n[3/4] \ud83d\udd17 Linking dependencies...\n[4/4] \ud83d\udd28 Building fresh packages...\nsuccess Saved lockfile.\n\u2728 Done in 9.73s.\n\nInitialized a git repository.\n\nSuccess! Created thirdweb-contracts at /Users/XYZ/Lightcurve-Code/L2/thirdweb-contracts\n\nInside that directory, you can run several commands:\n\nyarn build\n Compiles your contracts and detects thirdweb extensions implemented on them.\n\nyarn deploy\n Deploys your contracts with the thirdweb deploy flow.\n\nyarn publish\n Publishes your contracts with the thirdweb publish flow.\n\nWe suggest that you begin by typing:\n\ncd thirdweb-contracts\n"})})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"Foundry applications created with thirdweb have a similar directory structure to the following:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:".\n\u251c\u2500\u2500 .github\n\u251c\u2500\u2500 .cache\n\u251c\u2500\u2500 lib\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 out\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u2514\u2500\u2500 NFT.sol\n\u251c\u2500\u2500 test\n\u2502 \u2514\u2500\u2500 Contract.t.sol\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 .gitmodules\n\u251c\u2500\u2500 foundry.toml\n\u2514\u2500\u2500 README.md\n"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.h4,{id:"creating-the-smart-contract",children:[(0,r.jsx)(t.strong,{children:"Creating"})," the smart contract"]}),"\n",(0,r.jsxs)(t.p,{children:["For ease and security, thirdweb already provides base contracts, which can be easily customized via code.\nSince we chose to create an ",(0,r.jsx)(t.code,{children:"ERC721"})," token earlier, an ",(0,r.jsx)(t.code,{children:"NFT.sol"})," file will be present in the ",(0,r.jsx)(t.code,{children:"src/"})," folder.\nThe ",(0,r.jsx)(t.code,{children:"NFT.sol"})," will already have the base code required for an NFT contract."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-sol",metastring:'title="src/NFT.sol"',children:'// SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\nimport "@thirdweb-dev/contracts/base/ERC721Base.sol";\n\ncontract NFT is ERC721Base {\n constructor(\n address _defaultAdmin,\n string memory _name,\n string memory _symbol,\n address _royaltyRecipient,\n uint128 _royaltyBps\n )\n ERC721Base(\n _defaultAdmin,\n _name,\n _symbol,\n _royaltyRecipient,\n _royaltyBps\n )\n {}\n}\n\n'})}),"\n",(0,r.jsxs)(t.h4,{id:"building-the-smart-contract",children:[(0,r.jsx)(t.strong,{children:"Building"})," the smart contract"]}),"\n",(0,r.jsx)(t.p,{children:"Once the smart contract's code is ready, it must be built using thirdweb."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["To do that, simply run:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npx thirdweb build\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["If the smart contract doesn't have any errors, you will see the following output on the terminal:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.62 \ud83d\udc8e\n\n\u2714 Detected project type: foundry\n\u2714 Compilation successful\n\u2714 Choose which contracts to run detection on \xb7 NFT\n\n\n\ud83d\udd0e Detected extension on NFT\n\u2714\ufe0f ERC721\n\u2714\ufe0f ERC721Burnable\n\u2714\ufe0f ERC721Supply\n\u2714\ufe0f ERC721AQueryable\n\u2714\ufe0f ERC721Mintable\n\u2714\ufe0f ERC721BatchMintable\n\u2714\ufe0f Royalty\n\u2714\ufe0f ContractMetadata\n\u2714\ufe0f Ownable\n\u2714\ufe0f Fallback\n\n\u2139 Suggested extensions\n- ERC721Enumerable - https://portal.thirdweb.com/interfaces/erc721enumerable\n- ERC721LazyMintable - https://portal.thirdweb.com/interfaces/erc721lazymintable\n- ERC721SignatureMintV1 - https://portal.thirdweb.com/interfaces/erc721signaturemintv1\n- ERC721SignatureMintV2 - https://portal.thirdweb.com/interfaces/erc721signaturemintv2\n- ERC721TieredDrop - https://portal.thirdweb.com/interfaces/erc721tiereddrop\n- ERC721ClaimCustom - https://portal.thirdweb.com/interfaces/erc721claimcustom\n- ERC721ClaimZora - https://portal.thirdweb.com/interfaces/erc721claimzora\n- ERC721ClaimConditionsV1 - https://portal.thirdweb.com/interfaces/erc721claimconditionsv1\n- ERC721ClaimConditionsV2 - https://portal.thirdweb.com/interfaces/erc721claimconditionsv2\n- ERC721ClaimPhasesV1 - https://portal.thirdweb.com/interfaces/erc721claimphasesv1\n- ERC721ClaimPhasesV2 - https://portal.thirdweb.com/interfaces/erc721claimphasesv2\n- ERC721SharedMetadata - https://portal.thirdweb.com/interfaces/erc721sharedmetadata\n- ERC721LoyaltyCard - https://portal.thirdweb.com/interfaces/erc721loyaltycard\n- ERC721UpdatableMetadata - https://portal.thirdweb.com/interfaces/erc721updatablemetadata\n- Permissions - https://portal.thirdweb.com/interfaces/permissions\n\n\u2139 Once you're done writing your contracts, you can run the following command to deploy them:\n\n yarn deploy\n"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.h4,{id:"deploying-the-smart-contract",children:[(0,r.jsx)(t.strong,{children:"Deploying"})," the smart contract"]}),"\n",(0,r.jsx)(t.p,{children:"All checks passed, which means that the smart contract is ready to be deployed using thirdweb."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"To do that, simply run:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npx thirdweb deploy\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"If the smart contract doesn't have any errors, you will see the following output on the terminal:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n\n\u2714 Detected project type: foundry\n\u2714 Compilation successful\n\u2714 Choose which contract(s) to deploy \xb7 NFT\n\u2714 Upload successful\n// highlight-next-line\n\u2714 Open this link to deploy your contracts: https://thirdweb.com/contracts/deploy/QmSJExQJfPYFuaRZuDu9XRR2jUu9yp3kaFX3Sdc1KRWxiP\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"The terminal will also open a browser window, directing towards a unique URL, as highlighted above."}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Fill out the form as suggested in the ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/deploy/deploy-contract#Fill%20parameter",children:"Fill Parameter"})," section."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Once you fill out the details of the ERC721 smart contract, click on the ",(0,r.jsx)(t.code,{children:"Deploy Now"})," button and it will deploy the contract to the chosen network of your wallet."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["If you want to test your Foundry-based contract, follow the steps mentioned in the ",(0,r.jsx)(t.a,{href:"/building-on-lisk/deploying-smart-contract/with-Foundry#testing-the-smart-contract",children:"Testing the Smart Contract"})," guide."]})}),"\n",(0,r.jsx)(t.h2,{id:"interacting-with-the-smart-contract",children:"Interacting with the Smart Contract"}),"\n",(0,r.jsx)(t.p,{children:"Once the contract is deployed, you can interact with it via Explore.\nThe following videos describe step-by-step, how to interact with different token contracts on Lisk."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=6823",children:["How to interact with a deployed ",(0,r.jsx)(t.strong,{children:"ERC-20"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=7581",children:["How to interact with a deployed ",(0,r.jsx)(t.strong,{children:"ERC-721"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=8355",children:["How to interact with a deployed ",(0,r.jsx)(t.strong,{children:"ERC-1155"})," contract via Explore?"]})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const i={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(i.tabItem,a),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>v});var r=n(7294),i=n(512),o=n(2466),a=n(6550),s=n(469),l=n(1980),c=n(7392),d=n(812);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:i}}=e;return{value:t,label:n,attributes:r,default:i}}))}(n);return function(e){const t=(0,c.lx)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const i=(0,a.k6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(i.location.search);t.set(o,e),i.replace({...i.location,search:t.toString()})}),[o,i])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,o=u(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[c,h]=m({queryString:n,groupId:i}),[g,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,o]=(0,d.Nk)(n);return[i,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:i}),w=(()=>{const e=c??g;return p({value:e,tabValues:o})?e:null})();(0,s.Z)((()=>{w&&l(w)}),[w]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),b(e)}),[h,b,o]),tabValues:o}}var b=n(2389);const w={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var y=n(5893);function x(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:s}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),i=s[n].value;i!==r&&(c(t),a(i))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,y.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:s.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,y.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",w.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,y.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function f(e){const t=g(e);return(0,y.jsxs)("div",{className:(0,i.Z)("tabs-container",w.tabList),children:[(0,y.jsx)(x,{...t,...e}),(0,y.jsx)(j,{...t,...e})]})}function v(e){const t=(0,b.Z)();return(0,y.jsx)(f,{...e,children:h(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7294);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/56867589.dc19b2e3.js b/assets/js/56867589.dc19b2e3.js new file mode 100644 index 000000000..0abc228a6 --- /dev/null +++ b/assets/js/56867589.dc19b2e3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[8040],{7018:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>s,metadata:()=>c,toc:()=>h});var r=n(5893),i=n(1151),o=n(4866),a=n(5162);const s={title:"... with thirdweb",slug:"/building-on-lisk/deploying-smart-contract/with-thirdweb",description:"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.",keywords:["thirdweb","smart contract","ERC-721","Lisk","Lisk test network","Lisk testnet","Node.js","Solidity","smart contract deployment","deploy a smart contract","deploying smart contracts","build on lisk","write smart contract","smart contract development"],toc_max_heading_level:4},l="Deploying a smart contract with thirdweb",c={id:"building-on-lisk/deploying-smart-contract/with-thirdweb",title:"... with thirdweb",description:"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.",source:"@site/docs/building-on-lisk/deploying-smart-contract/with-thirdweb.mdx",sourceDirName:"building-on-lisk/deploying-smart-contract",slug:"/building-on-lisk/deploying-smart-contract/with-thirdweb",permalink:"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-thirdweb",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"... with thirdweb",slug:"/building-on-lisk/deploying-smart-contract/with-thirdweb",description:"A guide on deploying a smart contract on the Lisk test network using thirdweb. Includes instructions for setting up the environment, compiling, and deploying the smart contract.",keywords:["thirdweb","smart contract","ERC-721","Lisk","Lisk test network","Lisk testnet","Node.js","Solidity","smart contract deployment","deploy a smart contract","deploying smart contracts","build on lisk","write smart contract","smart contract development"],toc_max_heading_level:4},sidebar:"documentationSidebar",previous:{title:"... with Hardhat",permalink:"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-Hardhat"},next:{title:"...with viem",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/viem"}},d={},h=[{value:"Deploying pre-built contracts via thirdweb Explore",id:"deploying-pre-built-contracts-via-thirdweb-explore",level:2},{value:"via Solidity SDK",id:"via-solidity-sdk",level:2},{value:"Prerequisites",id:"prerequisites",level:3},{value:"Node.js v18+",id:"nodejs-v18",level:4},{value:"Installing and Configuring thirdweb",id:"installing-and-configuring-thirdweb",level:4},{value:"Logging in with your API key",id:"logging-in-with-your-api-key",level:4},{value:"Creating a project",id:"creating-a-project",level:3},{value:"Creating the smart contract",id:"creating-the-smart-contract",level:4},{value:"Building the smart contract",id:"building-the-smart-contract",level:4},{value:"Deploying the smart contract",id:"deploying-the-smart-contract",level:4},{value:"Interacting with the Smart Contract",id:"interacting-with-the-smart-contract",level:2}];function u(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.header,{children:(0,r.jsx)(t.h1,{id:"deploying-a-smart-contract-with-thirdweb",children:"Deploying a smart contract with thirdweb"})}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.a,{href:"https://thirdweb.com/",children:"thirdweb"})," is an end-to-end framework for smart contract development and deployment."]}),"\n",(0,r.jsxs)(t.p,{children:["It enables developers to deploy, standard contracts such as ERC-20, ERC-721, or ERC-1155, etc. without writing a line of code.\nMore of this is discussed in the ",(0,r.jsx)(t.a,{href:"#deploying-pre-built-contracts-via-thirdweb-explore",children:"via thirdweb Explore"})," section."]}),"\n",(0,r.jsxs)(t.p,{children:["Furthermore, developers looking to develop and deploy custom smart contracts can use the ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/build/overview",children:"Solidity SDK"})," provided by thirdweb, among others such as ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/typescript/v5",children:"TypeScript SDK"})," and ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/unity",children:"Unity SDK"}),".\nHowever, for this guide, we will mainly talk about the ",(0,r.jsx)(t.a,{href:"https://thirdweb.com/explore",children:"thirdweb Explore"})," and the ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/build/overview",children:"Solidity SDK"}),"."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.strong,{children:"Features:"})}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/explore/overview",children:"Explore"}),": Ready to deploy pre-built contracts."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/build/overview",children:"Build (Solidity SDK)"}),": Write custom smart contracts."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/deploy/overview",children:"Deploy"}),": Support for contract deployment built for any use case."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/publish/overview",children:"Publish"}),": Publish your contracts onchain."]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/interact/overview",children:"Interact"}),": Interact with smart contracts and integrate smart contracts directly into your app."]}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"deploying-pre-built-contracts-via-thirdweb-explore",children:"Deploying pre-built contracts via thirdweb Explore"}),"\n",(0,r.jsxs)(t.p,{children:["In case you want to deploy a pre-built contract without any customization, thirdweb offers a convenient way to do so with ",(0,r.jsx)(t.strong,{children:"Explore"}),".\nCheck out the following video for a quick introduction to Explore:"]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=5300",children:["What is thirdweb ",(0,r.jsx)(t.strong,{children:"Explore"}),"?"]})}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"note",children:(0,r.jsxs)(t.p,{children:["Before you try out the following guides, please ensure that your ",(0,r.jsx)(t.a,{href:"/user/connecting-to-a-wallet",children:"wallet is connected to Lisk's Network"})," and it has sufficient funds in it.\nFor more information, see the ",(0,r.jsx)(t.a,{href:"/building-on-lisk/deploying-smart-contract/with-Foundry#wallet-funds",children:"Wallet funds"})," section."]})}),"\n",(0,r.jsx)(t.p,{children:"The following videos describe step-by-step, how to deploy different tokens with pre-built contracts on Lisk."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=5776",children:["How to deploy a pre-built ",(0,r.jsx)(t.strong,{children:"ERC-20"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=6040",children:["How to deploy a pre-built ",(0,r.jsx)(t.strong,{children:"ERC-721"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=6396",children:["How to deploy a pre-built ",(0,r.jsx)(t.strong,{children:"ERC-1155"})," contract via Explore?"]})}),"\n"]}),"\n",(0,r.jsx)(t.h2,{id:"via-solidity-sdk",children:"via Solidity SDK"}),"\n",(0,r.jsx)(t.h3,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,r.jsx)(t.h4,{id:"nodejs-v18",children:"Node.js v18+"}),"\n",(0,r.jsxs)(t.p,{children:["Download and install ",(0,r.jsx)(t.a,{href:"https://nodejs.org/en/download/",children:"Node v18+"}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["If you are using nvm to manage your node versions, you can just run ",(0,r.jsx)(t.code,{children:"nvm install 18"}),"."]}),"\n",(0,r.jsx)(t.h4,{id:"installing-and-configuring-thirdweb",children:"Installing and Configuring thirdweb"}),"\n",(0,r.jsx)(t.p,{children:"To develop custom contracts, it is required to download and configure thirdweb."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["To install thirdweb run the following command:","\n",(0,r.jsxs)(o.Z,{children:[(0,r.jsx)(a.Z,{value:"npm",label:"NPM",default:!0,children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npm i -g thirdweb\n"})})}),(0,r.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"yarn global add thirdweb\n"})})})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=9467",children:"Set up your thirdweb API key"}),"."]}),"\n"]}),"\n",(0,r.jsx)(t.h4,{id:"logging-in-with-your-api-key",children:"Logging in with your API key"}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["The next step is to log in to thirdweb via CLI, so to do that type the following:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"thirdweb login\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["Once, you execute the aforementioned command, the terminal will open a browser window where it will ask you to authenticate the device:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n\nAutomatically attempting to open a link to authenticate with our dashboard...\n\nIf the browser doesn't open, please use this link to authenticate:\n\nhttps://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\n\n\u2819 Waiting for a response from the dashboard\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["Once you authenticate via the browser, the terminal will log the following message:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"Successfully linked your account to this device \n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["You can verify your login status by re-running the ",(0,r.jsx)(t.code,{children:"thirdweb login"})," command.","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n"})}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"creating-a-project",children:"Creating a project"}),"\n",(0,r.jsxs)(t.p,{children:["The first step of deploying smart contracts to Lisk is to set up your development environment by creating a project.\nThe thirdweb supports two of the most popular smart contracts development frameworks such as ",(0,r.jsx)(t.a,{href:"https://book.getfoundry.sh/",children:"Foundry"})," and ",(0,r.jsx)(t.a,{href:"https://hardhat.org",children:"Hardhat"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"For this guide, we are using Foundry for smart contract development.\nHowever, you can use Hardhat if you are more comfortable with that.\nThe project creation steps are similar for both Foundry and Hardhat."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["For Foundry, install its ",(0,r.jsx)(t.a,{href:"/building-on-lisk/deploying-smart-contract/with-Foundry#prerequisites",children:"prerequisites"})," on your system before proceeding with the creation of a thirdweb project."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"Once, the aforementioned is installed, proceed with the following:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npx thirdweb create\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Choose ",(0,r.jsx)(t.code,{children:"Contract"})," as the type of your project and give an appropriate name to your project."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n\n\u2714 What type of project do you want to create? \u203a Contract\n\u2714 What is your project named? \u2026 thirdweb-contracts\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Next, choose ",(0,r.jsx)(t.code,{children:"Forge"})," as the framework, ",(0,r.jsx)(t.code,{children:"NFT"})," as the name of the contract, ",(0,r.jsx)(t.code,{children:"ERC721"})," as the type of smart contract, and ",(0,r.jsx)(t.code,{children:"None"})," for the extensions option."]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["In case you want to use the Hardhat framework, choose ",(0,r.jsx)(t.code,{children:"Hardhat"})," instead of ",(0,r.jsx)(t.code,{children:"Forge"})," in the following dialogue."]})}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"\u2714 What framework do you want to use? \u203a Forge\n\u2714 What will be the name of your new smart contract? \u2026 NFT\n\u2714 What type of contract do you want to start from? \u203a ERC721\n\u2714 What extensions do you want to add to your contract? \u203a None\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"thirdweb will install all the relevant dependencies and set up a contract project for you."}),"\n",(0,r.jsxs)(n,{children:[(0,r.jsxs)("summary",{children:["Execution logs of the thirdweb ",(0,r.jsx)(t.code,{children:"contract"})," project creation"]}),(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:"Creating a new thirdweb contracts project in /Users/XYZ/Lightcurve-Code/L2/thirdweb-contracts.\n\nDownloading files. This might take a moment.\nInstalling packages. This might take a couple of minutes.\n\nyarn install v1.22.19\nwarning ../../../package.json: No license field\ninfo No lockfile found.\n[1/4] \ud83d\udd0d Resolving packages...\n[2/4] \ud83d\ude9a Fetching packages...\n[3/4] \ud83d\udd17 Linking dependencies...\n[4/4] \ud83d\udd28 Building fresh packages...\nsuccess Saved lockfile.\n\u2728 Done in 9.73s.\n\nInitialized a git repository.\n\nSuccess! Created thirdweb-contracts at /Users/XYZ/Lightcurve-Code/L2/thirdweb-contracts\n\nInside that directory, you can run several commands:\n\nyarn build\n Compiles your contracts and detects thirdweb extensions implemented on them.\n\nyarn deploy\n Deploys your contracts with the thirdweb deploy flow.\n\nyarn publish\n Publishes your contracts with the thirdweb publish flow.\n\nWe suggest that you begin by typing:\n\ncd thirdweb-contracts\n"})})]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"Foundry applications created with thirdweb have a similar directory structure to the following:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:".\n\u251c\u2500\u2500 .github\n\u251c\u2500\u2500 .cache\n\u251c\u2500\u2500 lib\n\u251c\u2500\u2500 node_modules\n\u251c\u2500\u2500 out\n\u251c\u2500\u2500 src\n\u2502\xa0\xa0 \u2514\u2500\u2500 NFT.sol\n\u251c\u2500\u2500 test\n\u2502 \u2514\u2500\u2500 Contract.t.sol\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 .gitmodules\n\u251c\u2500\u2500 foundry.toml\n\u2514\u2500\u2500 README.md\n"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.h4,{id:"creating-the-smart-contract",children:[(0,r.jsx)(t.strong,{children:"Creating"})," the smart contract"]}),"\n",(0,r.jsxs)(t.p,{children:["For ease and security, thirdweb already provides base contracts, which can be easily customized via code.\nSince we chose to create an ",(0,r.jsx)(t.code,{children:"ERC721"})," token earlier, an ",(0,r.jsx)(t.code,{children:"NFT.sol"})," file will be present in the ",(0,r.jsx)(t.code,{children:"src/"})," folder.\nThe ",(0,r.jsx)(t.code,{children:"NFT.sol"})," will already have the base code required for an NFT contract."]}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-sol",metastring:'title="src/NFT.sol"',children:'// SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\nimport "@thirdweb-dev/contracts/base/ERC721Base.sol";\n\ncontract NFT is ERC721Base {\n constructor(\n address _defaultAdmin,\n string memory _name,\n string memory _symbol,\n address _royaltyRecipient,\n uint128 _royaltyBps\n )\n ERC721Base(\n _defaultAdmin,\n _name,\n _symbol,\n _royaltyRecipient,\n _royaltyBps\n )\n {}\n}\n\n'})}),"\n",(0,r.jsxs)(t.h4,{id:"building-the-smart-contract",children:[(0,r.jsx)(t.strong,{children:"Building"})," the smart contract"]}),"\n",(0,r.jsx)(t.p,{children:"Once the smart contract's code is ready, it must be built using thirdweb."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["To do that, simply run:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npx thirdweb build\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["If the smart contract doesn't have any errors, you will see the following output on the terminal:","\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.62 \ud83d\udc8e\n\n\u2714 Detected project type: foundry\n\u2714 Compilation successful\n\u2714 Choose which contracts to run detection on \xb7 NFT\n\n\n\ud83d\udd0e Detected extension on NFT\n\u2714\ufe0f ERC721\n\u2714\ufe0f ERC721Burnable\n\u2714\ufe0f ERC721Supply\n\u2714\ufe0f ERC721AQueryable\n\u2714\ufe0f ERC721Mintable\n\u2714\ufe0f ERC721BatchMintable\n\u2714\ufe0f Royalty\n\u2714\ufe0f ContractMetadata\n\u2714\ufe0f Ownable\n\u2714\ufe0f Fallback\n\n\u2139 Suggested extensions\n- ERC721Enumerable - https://portal.thirdweb.com/interfaces/erc721enumerable\n- ERC721LazyMintable - https://portal.thirdweb.com/interfaces/erc721lazymintable\n- ERC721SignatureMintV1 - https://portal.thirdweb.com/interfaces/erc721signaturemintv1\n- ERC721SignatureMintV2 - https://portal.thirdweb.com/interfaces/erc721signaturemintv2\n- ERC721TieredDrop - https://portal.thirdweb.com/interfaces/erc721tiereddrop\n- ERC721ClaimCustom - https://portal.thirdweb.com/interfaces/erc721claimcustom\n- ERC721ClaimZora - https://portal.thirdweb.com/interfaces/erc721claimzora\n- ERC721ClaimConditionsV1 - https://portal.thirdweb.com/interfaces/erc721claimconditionsv1\n- ERC721ClaimConditionsV2 - https://portal.thirdweb.com/interfaces/erc721claimconditionsv2\n- ERC721ClaimPhasesV1 - https://portal.thirdweb.com/interfaces/erc721claimphasesv1\n- ERC721ClaimPhasesV2 - https://portal.thirdweb.com/interfaces/erc721claimphasesv2\n- ERC721SharedMetadata - https://portal.thirdweb.com/interfaces/erc721sharedmetadata\n- ERC721LoyaltyCard - https://portal.thirdweb.com/interfaces/erc721loyaltycard\n- ERC721UpdatableMetadata - https://portal.thirdweb.com/interfaces/erc721updatablemetadata\n- Permissions - https://portal.thirdweb.com/interfaces/permissions\n\n\u2139 Once you're done writing your contracts, you can run the following command to deploy them:\n\n yarn deploy\n"})}),"\n"]}),"\n"]}),"\n",(0,r.jsxs)(t.h4,{id:"deploying-the-smart-contract",children:[(0,r.jsx)(t.strong,{children:"Deploying"})," the smart contract"]}),"\n",(0,r.jsx)(t.p,{children:"All checks passed, which means that the smart contract is ready to be deployed using thirdweb."}),"\n",(0,r.jsxs)(t.ol,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"To do that, simply run:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-bash",children:"npx thirdweb deploy\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"If the smart contract doesn't have any errors, you will see the following output on the terminal:"}),"\n",(0,r.jsx)(t.pre,{children:(0,r.jsx)(t.code,{className:"language-text",children:".......\n\n\ud83d\udc8e thirdweb v0.13.60 \ud83d\udc8e\n\n\u2714 Detected project type: foundry\n\u2714 Compilation successful\n\u2714 Choose which contract(s) to deploy \xb7 NFT\n\u2714 Upload successful\n// highlight-next-line\n\u2714 Open this link to deploy your contracts: https://thirdweb.com/contracts/deploy/QmSJExQJfPYFuaRZuDu9XRR2jUu9yp3kaFX3Sdc1KRWxiP\n"})}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsx)(t.p,{children:"The terminal will also open a browser window, directing towards a unique URL, as highlighted above."}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Fill out the form as suggested in the ",(0,r.jsx)(t.a,{href:"https://portal.thirdweb.com/contracts/deploy/deploy-contract#Fill%20parameter",children:"Fill Parameter"})," section."]}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:["Once you fill out the details of the ERC721 smart contract, click on the ",(0,r.jsx)(t.code,{children:"Deploy Now"})," button and it will deploy the contract to the chosen network of your wallet."]}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.admonition,{type:"info",children:(0,r.jsxs)(t.p,{children:["If you want to test your Foundry-based contract, follow the steps mentioned in the ",(0,r.jsx)(t.a,{href:"/building-on-lisk/deploying-smart-contract/with-Foundry#testing-the-smart-contract",children:"Testing the Smart Contract"})," guide."]})}),"\n",(0,r.jsx)(t.h2,{id:"interacting-with-the-smart-contract",children:"Interacting with the Smart Contract"}),"\n",(0,r.jsx)(t.p,{children:"Once the contract is deployed, you can interact with it via Explore.\nThe following videos describe step-by-step, how to interact with different token contracts on Lisk."}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=6823",children:["How to interact with a deployed ",(0,r.jsx)(t.strong,{children:"ERC-20"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=7581",children:["How to interact with a deployed ",(0,r.jsx)(t.strong,{children:"ERC-721"})," contract via Explore?"]})}),"\n",(0,r.jsx)(t.li,{children:(0,r.jsxs)(t.a,{href:"https://youtu.be/jYEqoIeAoBg?t=8355",children:["How to interact with a deployed ",(0,r.jsx)(t.strong,{children:"ERC-1155"})," contract via Explore?"]})}),"\n"]})]})}function p(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(u,{...e})}):u(e)}},5162:(e,t,n)=>{n.d(t,{Z:()=>a});n(7294);var r=n(512);const i={tabItem:"tabItem_Ymn6"};var o=n(5893);function a(e){let{children:t,hidden:n,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(i.tabItem,a),hidden:n,children:t})}},4866:(e,t,n)=>{n.d(t,{Z:()=>v});var r=n(7294),i=n(512),o=n(2466),a=n(6550),s=n(469),l=n(1980),c=n(7392),d=n(812);function h(e){return r.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,r.isValidElement)(e)&&function(e){const{props:t}=e;return!!t&&"object"==typeof t&&"value"in t}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function u(e){const{values:t,children:n}=e;return(0,r.useMemo)((()=>{const e=t??function(e){return h(e).map((e=>{let{props:{value:t,label:n,attributes:r,default:i}}=e;return{value:t,label:n,attributes:r,default:i}}))}(n);return function(e){const t=(0,c.lx)(e,((e,t)=>e.value===t.value));if(t.length>0)throw new Error(`Docusaurus error: Duplicate values "${t.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[t,n])}function p(e){let{value:t,tabValues:n}=e;return n.some((e=>e.value===t))}function m(e){let{queryString:t=!1,groupId:n}=e;const i=(0,a.k6)(),o=function(e){let{queryString:t=!1,groupId:n}=e;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:t,groupId:n});return[(0,l._X)(o),(0,r.useCallback)((e=>{if(!o)return;const t=new URLSearchParams(i.location.search);t.set(o,e),i.replace({...i.location,search:t.toString()})}),[o,i])]}function g(e){const{defaultValue:t,queryString:n=!1,groupId:i}=e,o=u(e),[a,l]=(0,r.useState)((()=>function(e){let{defaultValue:t,tabValues:n}=e;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!p({value:t,tabValues:n}))throw new Error(`Docusaurus error: The has a defaultValue "${t}" but none of its children has the corresponding value. Available values are: ${n.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return t}const r=n.find((e=>e.default))??n[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:t,tabValues:o}))),[c,h]=m({queryString:n,groupId:i}),[g,b]=function(e){let{groupId:t}=e;const n=function(e){return e?`docusaurus.tab.${e}`:null}(t),[i,o]=(0,d.Nk)(n);return[i,(0,r.useCallback)((e=>{n&&o.set(e)}),[n,o])]}({groupId:i}),w=(()=>{const e=c??g;return p({value:e,tabValues:o})?e:null})();(0,s.Z)((()=>{w&&l(w)}),[w]);return{selectedValue:a,selectValue:(0,r.useCallback)((e=>{if(!p({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);l(e),h(e),b(e)}),[h,b,o]),tabValues:o}}var b=n(2389);const w={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var y=n(5893);function x(e){let{className:t,block:n,selectedValue:r,selectValue:a,tabValues:s}=e;const l=[],{blockElementScrollPositionUntilNextRender:c}=(0,o.o5)(),d=e=>{const t=e.currentTarget,n=l.indexOf(t),i=s[n].value;i!==r&&(c(t),a(i))},h=e=>{let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{const n=l.indexOf(e.currentTarget)+1;t=l[n]??l[0];break}case"ArrowLeft":{const n=l.indexOf(e.currentTarget)-1;t=l[n]??l[l.length-1];break}}t?.focus()};return(0,y.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t),children:s.map((e=>{let{value:t,label:n,attributes:o}=e;return(0,y.jsx)("li",{role:"tab",tabIndex:r===t?0:-1,"aria-selected":r===t,ref:e=>l.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",w.tabItem,o?.className,{"tabs__item--active":r===t}),children:n??t},t)}))})}function j(e){let{lazy:t,children:n,selectedValue:o}=e;const a=(Array.isArray(n)?n:[n]).filter(Boolean);if(t){const e=a.find((e=>e.props.value===o));return e?(0,r.cloneElement)(e,{className:(0,i.Z)("margin-top--md",e.props.className)}):null}return(0,y.jsx)("div",{className:"margin-top--md",children:a.map(((e,t)=>(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==o})))})}function f(e){const t=g(e);return(0,y.jsxs)("div",{className:(0,i.Z)("tabs-container",w.tabList),children:[(0,y.jsx)(x,{...t,...e}),(0,y.jsx)(j,{...t,...e})]})}function v(e){const t=(0,b.Z)();return(0,y.jsx)(f,{...e,children:h(e.children)},String(t))}},1151:(e,t,n)=>{n.d(t,{Z:()=>s,a:()=>a});var r=n(7294);const i={},o=r.createContext(i);function a(e){const t=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function s(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:a(e.components),r.createElement(o.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/87599bfc.f888de7a.js b/assets/js/87599bfc.56fef14e.js similarity index 68% rename from assets/js/87599bfc.f888de7a.js rename to assets/js/87599bfc.56fef14e.js index 6b4786623..9e936c308 100644 --- a/assets/js/87599bfc.f888de7a.js +++ b/assets/js/87599bfc.56fef14e.js @@ -1 +1 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[199],{9355:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Token development","description":"Guides explainig how to create a new token on Lisk.","keywords":["guides","smart contracts","token development","token standards","erc-20","erc-721","erc-1155"],"slug":"/category/building-on-lisk/token-development","permalink":"/lisk-documentation/category/building-on-lisk/token-development","sidebar":"documentationSidebar","navigation":{"previous":{"title":"...with web3.js","permalink":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/web3"},"next":{"title":"Overview","permalink":"/lisk-documentation/token-development"}}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[199],{9355:e=>{e.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Token development","description":"Guides explainig how to create a new token on Lisk.","keywords":["guides","smart contracts","token development","token standards","erc-20","erc-721","erc-1155"],"slug":"/category/building-on-lisk/token-development","permalink":"/lisk-documentation/category/building-on-lisk/token-development","sidebar":"documentationSidebar","navigation":{"previous":{"title":"Deploying a custom token","permalink":"/lisk-documentation/building-on-lisk/add-token-to-lisk/custom-token"},"next":{"title":"Overview","permalink":"/lisk-documentation/token-development"}}}}')}}]); \ No newline at end of file diff --git a/assets/js/8d261ba2.9a83f19c.js b/assets/js/8d261ba2.9a83f19c.js new file mode 100644 index 000000000..33f6deba6 --- /dev/null +++ b/assets/js/8d261ba2.9a83f19c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[7939],{8042:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>r,default:()=>p,frontMatter:()=>c,metadata:()=>o,toc:()=>h});var i=t(5893),a=t(1151),l=t(4866),s=t(5162);const c={title:"...with viem",slug:"/building-on-lisk/interacting-with-the-blockchain/viem",description:"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.",keywords:["viem","Lisk","Lisk mainnet","Lisk testnet","Ethereum","smart contracts","blockchain","RPC URL","JavaScript","TypeScript"]},r="Interacting with the blockchain with viem",o={id:"building-on-lisk/interacting-with-the-blockchain/viem",title:"...with viem",description:"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.",source:"@site/docs/building-on-lisk/interacting-with-the-blockchain/viem.mdx",sourceDirName:"building-on-lisk/interacting-with-the-blockchain",slug:"/building-on-lisk/interacting-with-the-blockchain/viem",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/viem",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"...with viem",slug:"/building-on-lisk/interacting-with-the-blockchain/viem",description:"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.",keywords:["viem","Lisk","Lisk mainnet","Lisk testnet","Ethereum","smart contracts","blockchain","RPC URL","JavaScript","TypeScript"]},sidebar:"documentationSidebar",previous:{title:"... with thirdweb",permalink:"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-thirdweb"},next:{title:"...with ethers.js",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/ethers"}},u={},h=[{value:"Install",id:"install",level:2},{value:"Setup",id:"setup",level:2},{value:"Public Client",id:"public-client",level:3},{value:"Wallet Client",id:"wallet-client",level:3},{value:"Reading data from the blockchain",id:"reading-data-from-the-blockchain",level:2},{value:"Writing data to the blockchain",id:"writing-data-to-the-blockchain",level:2},{value:"Interacting with smart contracts",id:"interacting-with-smart-contracts",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",strong:"strong",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"interacting-with-the-blockchain-with-viem",children:"Interacting with the blockchain with viem"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://viem.sh/",children:"viem"})," a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum."]}),"\n",(0,i.jsxs)(n.p,{children:["You can use viem to interact with smart contracts deployed on Lisk.\nViem provides first-class support for chains implemented on the OP stack, see ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack",children:"viem.sh > OP stack"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"install",children:"Install"}),"\n",(0,i.jsx)(n.p,{children:"To install viem run the following command:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install --save viem\n"})}),"\n",(0,i.jsx)(n.h2,{id:"setup",children:"Setup"}),"\n",(0,i.jsxs)(n.p,{children:["Before you can start using viem, you need to setup a ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client",children:"Client"})," with a desired ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/clients/intro.html#transports",children:"Transport"})," and ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/chains/introduction",children:"Chain"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"public-client",children:"Public Client"}),"\n",(0,i.jsxs)(n.p,{children:["In order to read data from Lisk, you need to create a ",(0,i.jsx)(n.strong,{children:"Public client"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["By extending the public client with ",(0,i.jsx)(n.code,{children:"publicActionsL2"})," or ",(0,i.jsx)(n.code,{children:"publicActionsL1"}),", you have access to additional methods for Lisk and other chains built on top of the OP stack.\nSee ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"Layer 2 extensions"})," for more information."]}),"\n",(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="public-client.js"',children:"import { createPublicClient, http } from 'viem'\nimport { lisk, ethereum } from 'viem/chains'\nimport { publicActionsL2, publicActionsL1 } from 'viem/op-stack'\n\nexport const publicClientL2 = createPublicClient({\n chain: lisk,\n transport: http()\n}).extend(publicActionsL2()) \n\nexport const publicClientL1 = createPublicClient({\n chain: ethereum,\n transport: http()\n}).extend(publicActionsL1()) \n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="public-client.js"',children:"import { createPublicClient, http } from 'viem'\nimport { liskSepolia, sepolia } from 'viem/chains'\nimport { publicActionsL2, publicActionsL1 } from 'viem/op-stack'\n\nexport const publicClientL2 = createPublicClient({\n chain: liskSepolia,\n transport: http()\n}).extend(publicActionsL2()) \n\nexport const publicClientL1 = createPublicClient({\n chain: sepolia,\n transport: http()\n}).extend(publicActionsL1()) \n"})})})]}),"\n",(0,i.jsx)(n.h3,{id:"wallet-client",children:"Wallet Client"}),"\n",(0,i.jsxs)(n.p,{children:["In order to write data to Lisk, you need to create a Wallet client (",(0,i.jsx)(n.code,{children:"createWalletClient"}),") and specify an ",(0,i.jsx)(n.a,{href:"https://ethereum.org/en/developers/docs/accounts/",children:(0,i.jsx)(n.code,{children:"Account"})})," to use."]}),"\n",(0,i.jsxs)(n.p,{children:["By extending the wallet client with ",(0,i.jsx)(n.code,{children:"walletActionsL1"})," or ",(0,i.jsx)(n.code,{children:"walletActionsL2"}),", you have access to additional methods for Lisk and other chains built on top of the OP stack.\nSee ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"Layer 2 extensions"})," for more information."]}),"\n",(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"jsonrpc",label:"JSON-RPC Account",children:(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, custom } from 'viem'\nimport { ethereum, lisk } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Retrieve Account from an EIP-1193 Provider.\nconst [account] = await window.ethereum.request({ \n method: 'eth_requestAccounts'\n}) \n\nexport const walletClientL1 = createWalletClient({\n account, \n chain: ethereum,\n transport: custom(window.ethereum)\n}).extend(walletActionsL1());\n\nexport const walletClientL2 = createWalletClient({\n account, \n chain: lisk,\n transport: custom(window.ethereum)\n}).extend(walletActionsL2());\n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, custom } from 'viem'\nimport { sepolia, liskSepolia } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Retrieve Account from an EIP-1193 Provider.\nconst [account] = await window.ethereum.request({ \n method: 'eth_requestAccounts'\n}) \n\nexport const walletClientL1 = createWalletClient({\n account, \n chain: sepolia,\n transport: custom(window.ethereum)\n}).extend(walletActionsL1());\n\nexport const walletClientL2 = createWalletClient({\n account, \n chain: liskSepolia,\n transport: custom(window.ethereum)\n}).extend(walletActionsL2());\n"})})})]})}),(0,i.jsxs)(s.Z,{value:"local",label:"Local Account",children:[(0,i.jsxs)(n.p,{children:["Replace ",(0,i.jsx)(n.code,{children:""})," with the private key of the account you want to use.\nThe ",(0,i.jsx)(n.code,{children:"0x"})," prefix indicates that the following string is a hexadecimal number."]}),(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, http } from 'viem'\nimport { privateKeyToAccount } from 'viem/accounts'\nimport { ethereum, lisk } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Wallet client for Ethereum\nexport const walletClientL1 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: ethereum,\n transport: http()\n}).extend(walletActionsL1());\n\n// Wallet client for Lisk\nexport const walletClientL2 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: lisk,\n transport: http()\n}).extend(walletActionsL2());\n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, http } from 'viem'\nimport { privateKeyToAccount } from 'viem/accounts'\nimport { sepolia, liskSepolia } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Wallet client for Ethereum\nexport const walletClientL1 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: sepolia,\n transport: http()\n}).extend(walletActionsL1());\n\n// Wallet client for Lisk\nexport const walletClientL2 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: liskSepolia,\n transport: http()\n}).extend(walletActionsL2());\n"})})})]})]})]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:["In addition to making a JSON-RPC request (",(0,i.jsx)(n.code,{children:"eth_requestAccounts"}),") to get an Account, viem provides various helper methods for creating an ",(0,i.jsx)(n.code,{children:"Account"}),", including: ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/accounts/privateKey.html",children:(0,i.jsx)(n.code,{children:"privateKeyToAccount"})}),", ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/accounts/mnemonic.html",children:(0,i.jsx)(n.code,{children:"mnemonicToAccount"})}),", and ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/accounts/hd.html",children:(0,i.jsx)(n.code,{children:"hdKeyToAccount"})}),"."]})}),"\n",(0,i.jsx)(n.h2,{id:"reading-data-from-the-blockchain",children:"Reading data from the blockchain"}),"\n",(0,i.jsxs)(n.p,{children:["Create a ",(0,i.jsx)(n.a,{href:"#public-client",children:"public client"})," and use it to read and access data from Lisk using ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/actions/public/introduction",children:"Public Actions"})," and ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"OP stack public actions"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:['Public Actions are client methods that map one-to-one with a "public" Ethereum RPC method (',(0,i.jsx)(n.code,{children:"eth_blockNumber"}),", ",(0,i.jsx)(n.code,{children:"eth_getBalance"}),", etc.)."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can use the ",(0,i.jsx)(n.code,{children:"getBlockNumber"})," action to get the latest block:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="read-example.js"',children:"import { parseEther } from 'viem'\nimport { publicClientL2 } from './public-client.js'\n\nconst blockNumber = await publicClientL2.getBlockNumber();\n\nexport const l1Gas = await publicClientL2.estimateL1Gas({ \n account: '0x3C46A11471f285E36EE8d089473ce98269D1b081', \n to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8', \n value: parseEther('0.1') \n}) \n\nconsole.log(blockNumber);\nconsole.log(l1Gas);\n"})}),"\n",(0,i.jsx)(n.h2,{id:"writing-data-to-the-blockchain",children:"Writing data to the blockchain"}),"\n",(0,i.jsxs)(n.p,{children:["Create a ",(0,i.jsx)(n.a,{href:"#wallet-client",children:"wallet client"})," and use it to read and access data from Lisk using ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/actions/wallet/introduction",children:"Wallet Actions"})," and ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"OP stack wallet actions"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:['Wallet Actions are actions that map one-to-one with a "wallet" or "signable" Ethereum RPC method (',(0,i.jsx)(n.code,{children:"eth_requestAccounts"}),", ",(0,i.jsx)(n.code,{children:"eth_sendTransaction"}),", etc)."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can use the ",(0,i.jsx)(n.code,{children:"sendTransaction"})," action to post a transaction:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="write-example.js"',children:"import { walletClientL2 } from './wallet-client.js'\n\nconst hash = await walletClientL2.sendTransaction({ \n to: '0x...',\n value: 1000000000000000000n\n})\n\nconsole.log(hash);\n"})}),"\n",(0,i.jsx)(n.h2,{id:"interacting-with-smart-contracts",children:"Interacting with smart contracts"}),"\n",(0,i.jsxs)(n.p,{children:["You can use viem to interact with a smart contract on Lisk by creating a ",(0,i.jsx)(n.code,{children:"Contract"})," instance using ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/contract/getContract.html",children:(0,i.jsx)(n.code,{children:"getContract"})})," and passing it the contract ABI, contract address, and and ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/clients/public.html",children:"Public"})," and/or ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/clients/wallet.html",children:"Wallet"})," Client:"]}),"\n",(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"example",label:"contract-example.js",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="contract-example.js"',children:"import { getContract } from 'viem'\nimport { wagmiAbi } from './abi.js'\nimport { publicClient, walletClient } from './client.js'\n \n// 1. Create contract instance\nconst contract = getContract({\n address: 'CONTRACT_ADDRESS',\n abi: wagmiAbi,\n // 1a. Insert a single client\n //client: publicClient,\n // 1b. Or public and/or wallet clients\n client: { public: publicClient, wallet: walletClient }\n})\n \n// 2. Call contract methods, fetch events, listen to events, etc.\nconst result = await contract.read.totalSupply()\nconst logs = await contract.getEvents.Transfer()\nconst unwatch = contract.watchEvent.Transfer(\n { from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' },\n { onLogs(logs) { console.log(logs) } }\n)\n"})})}),(0,i.jsx)(s.Z,{value:"client",label:"client.js",children:(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="client.js"',children:"import { createPublicClient, createWalletClient, http, custom } from 'viem'\nimport { lisk } from 'viem/chains'\nimport { EthereumProvider } from '@walletconnect/ethereum-provider'\nimport { publicActionsL2 } from 'viem/op-stack'\n\nexport const publicClient = createPublicClient({\n chain: lisk,\n transport: http(),\n}).extend(publicActionsL2());\n\n// eg: Metamask\nexport const walletClient = createWalletClient({\n chain: lisk,\n transport: custom(window.ethereum),\n})\n\n// eg: WalletConnect\nconst provider = await EthereumProvider.init({\n projectId: \"abcd1234\",\n showQrModal: true,\n chains: [1],\n})\n\nexport const walletClientWC = createWalletClient({\n chain: lisk,\n transport: custom(provider),\n})\n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="client.js"',children:"import { createPublicClient, createWalletClient, http, custom } from 'viem'\nimport { liskSepolia } from 'viem/chains'\nimport { EthereumProvider } from '@walletconnect/ethereum-provider'\nimport { publicActionsL2 } from 'viem/op-stack'\n\nexport const publicClient = createPublicClient({\n chain: liskSepolia,\n transport: http(),\n}).extend(publicActionsL2());\n\n// eg: Metamask\nexport const walletClient = createWalletClient({\n chain: liskSepolia,\n transport: custom(window.ethereum),\n})\n\n// eg: WalletConnect\nconst provider = await EthereumProvider.init({\n projectId: \"abcd1234\",\n showQrModal: true,\n chains: [1],\n})\n\nexport const walletClientWC = createWalletClient({\n chain: liskSepolia,\n transport: custom(provider),\n})\n"})})})]})}),(0,i.jsxs)(s.Z,{value:"abi",label:"abi.js",children:[(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:["The ABI of a contract can be found on the respective contract page in ",(0,i.jsx)(n.a,{href:"https://sepolia-blockscout.lisk.com/",children:"BlockScout"}),"."]})}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="abi.js"',children:'export const wagmiAbi = [\n [\n {\n "inputs": [],\n "stateMutability": "nonpayable",\n "type": "constructor"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "sender",\n "type": "address"\n },\n {\n "indexed": false,\n "internalType": "string",\n "name": "message",\n "type": "string"\n }\n ],\n "name": "NewHello",\n "type": "event"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "name": "blacklist",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "counter",\n "outputs": [\n {\n "internalType": "uint32",\n "name": "",\n "type": "uint32"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "string",\n "name": "_message",\n "type": "string"\n }\n ],\n "name": "createHello",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "maxLength",\n "outputs": [\n {\n "internalType": "uint32",\n "name": "",\n "type": "uint32"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "name": "message",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "minLength",\n "outputs": [\n {\n "internalType": "uint32",\n "name": "",\n "type": "uint32"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "owner",\n "outputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "string[]",\n "name": "_newBlackList",\n "type": "string[]"\n }\n ],\n "name": "setBlacklist",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint32",\n "name": "_newMin",\n "type": "uint32"\n },\n {\n "internalType": "uint32",\n "name": "_newMax",\n "type": "uint32"\n }\n ],\n "name": "setMinMaxMessageLength",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n }\n ]\n];\n'})})]})]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"CONTRACT_ADDRESS"})," is the address of the deployed contract."]})})]})}function p(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},5162:(e,n,t)=>{t.d(n,{Z:()=>s});t(7294);var i=t(512);const a={tabItem:"tabItem_Ymn6"};var l=t(5893);function s(e){let{children:n,hidden:t,className:s}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,i.Z)(a.tabItem,s),hidden:t,children:n})}},4866:(e,n,t)=>{t.d(n,{Z:()=>k});var i=t(7294),a=t(512),l=t(2466),s=t(6550),c=t(469),r=t(1980),o=t(7392),u=t(812);function h(e){return i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function d(e){const{values:n,children:t}=e;return(0,i.useMemo)((()=>{const e=n??function(e){return h(e).map((e=>{let{props:{value:n,label:t,attributes:i,default:a}}=e;return{value:n,label:t,attributes:i,default:a}}))}(t);return function(e){const n=(0,o.lx)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const a=(0,s.k6)(),l=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,r._X)(l),(0,i.useCallback)((e=>{if(!l)return;const n=new URLSearchParams(a.location.search);n.set(l,e),a.replace({...a.location,search:n.toString()})}),[l,a])]}function b(e){const{defaultValue:n,queryString:t=!1,groupId:a}=e,l=d(e),[s,r]=(0,i.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const i=t.find((e=>e.default))??t[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:n,tabValues:l}))),[o,h]=m({queryString:t,groupId:a}),[b,x]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[a,l]=(0,u.Nk)(t);return[a,(0,i.useCallback)((e=>{t&&l.set(e)}),[t,l])]}({groupId:a}),v=(()=>{const e=o??b;return p({value:e,tabValues:l})?e:null})();(0,c.Z)((()=>{v&&r(v)}),[v]);return{selectedValue:s,selectValue:(0,i.useCallback)((e=>{if(!p({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);r(e),h(e),x(e)}),[h,x,l]),tabValues:l}}var x=t(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=t(5893);function g(e){let{className:n,block:t,selectedValue:i,selectValue:s,tabValues:c}=e;const r=[],{blockElementScrollPositionUntilNextRender:o}=(0,l.o5)(),u=e=>{const n=e.currentTarget,t=r.indexOf(n),a=c[t].value;a!==i&&(o(n),s(a))},h=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const t=r.indexOf(e.currentTarget)+1;n=r[t]??r[0];break}case"ArrowLeft":{const t=r.indexOf(e.currentTarget)-1;n=r[t]??r[r.length-1];break}}n?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},n),children:c.map((e=>{let{value:n,label:t,attributes:l}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:i===n?0:-1,"aria-selected":i===n,ref:e=>r.push(e),onKeyDown:h,onClick:u,...l,className:(0,a.Z)("tabs__item",v.tabItem,l?.className,{"tabs__item--active":i===n}),children:t??n},n)}))})}function j(e){let{lazy:n,children:t,selectedValue:l}=e;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===l));return e?(0,i.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==l})))})}function w(e){const n=b(e);return(0,f.jsxs)("div",{className:(0,a.Z)("tabs-container",v.tabList),children:[(0,f.jsx)(g,{...n,...e}),(0,f.jsx)(j,{...n,...e})]})}function k(e){const n=(0,x.Z)();return(0,f.jsx)(w,{...e,children:h(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const a={},l=i.createContext(a);function s(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/8d261ba2.a4e553e3.js b/assets/js/8d261ba2.a4e553e3.js deleted file mode 100644 index e76f4f3b8..000000000 --- a/assets/js/8d261ba2.a4e553e3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[7939],{8042:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>r,default:()=>p,frontMatter:()=>c,metadata:()=>o,toc:()=>h});var i=t(5893),a=t(1151),l=t(4866),s=t(5162);const c={title:"...with viem",slug:"/building-on-lisk/interacting-with-the-blockchain/viem",description:"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.",keywords:["viem","Lisk","Lisk mainnet","Lisk testnet","Ethereum","smart contracts","blockchain","RPC URL","JavaScript","TypeScript"]},r="Interacting with the blockchain with viem",o={id:"building-on-lisk/interacting-with-the-blockchain/viem",title:"...with viem",description:"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.",source:"@site/docs/building-on-lisk/interacting-with-the-blockchain/viem.mdx",sourceDirName:"building-on-lisk/interacting-with-the-blockchain",slug:"/building-on-lisk/interacting-with-the-blockchain/viem",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/viem",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"...with viem",slug:"/building-on-lisk/interacting-with-the-blockchain/viem",description:"Documentation for using Viem, a TypeScript interface for EVM-compatible blockchains. This page covers installation, setup, and various functionalities such as reading and writing blockchain data and interacting with smart contracts on Lisk.",keywords:["viem","Lisk","Lisk mainnet","Lisk testnet","Ethereum","smart contracts","blockchain","RPC URL","JavaScript","TypeScript"]},sidebar:"documentationSidebar",previous:{title:"Deploying a custom token",permalink:"/lisk-documentation/building-on-lisk/add-token-to-lisk/custom-token"},next:{title:"...with ethers.js",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/ethers"}},u={},h=[{value:"Install",id:"install",level:2},{value:"Setup",id:"setup",level:2},{value:"Public Client",id:"public-client",level:3},{value:"Wallet Client",id:"wallet-client",level:3},{value:"Reading data from the blockchain",id:"reading-data-from-the-blockchain",level:2},{value:"Writing data to the blockchain",id:"writing-data-to-the-blockchain",level:2},{value:"Interacting with smart contracts",id:"interacting-with-smart-contracts",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",strong:"strong",...(0,a.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.header,{children:(0,i.jsx)(n.h1,{id:"interacting-with-the-blockchain-with-viem",children:"Interacting with the blockchain with viem"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.a,{href:"https://viem.sh/",children:"viem"})," a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum."]}),"\n",(0,i.jsxs)(n.p,{children:["You can use viem to interact with smart contracts deployed on Lisk.\nViem provides first-class support for chains implemented on the OP stack, see ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack",children:"viem.sh > OP stack"}),"."]}),"\n",(0,i.jsx)(n.h2,{id:"install",children:"Install"}),"\n",(0,i.jsx)(n.p,{children:"To install viem run the following command:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-bash",children:"npm install --save viem\n"})}),"\n",(0,i.jsx)(n.h2,{id:"setup",children:"Setup"}),"\n",(0,i.jsxs)(n.p,{children:["Before you can start using viem, you need to setup a ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client",children:"Client"})," with a desired ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/clients/intro.html#transports",children:"Transport"})," and ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/chains/introduction",children:"Chain"}),"."]}),"\n",(0,i.jsx)(n.h3,{id:"public-client",children:"Public Client"}),"\n",(0,i.jsxs)(n.p,{children:["In order to read data from Lisk, you need to create a ",(0,i.jsx)(n.strong,{children:"Public client"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:["By extending the public client with ",(0,i.jsx)(n.code,{children:"publicActionsL2"})," or ",(0,i.jsx)(n.code,{children:"publicActionsL1"}),", you have access to additional methods for Lisk and other chains built on top of the OP stack.\nSee ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"Layer 2 extensions"})," for more information."]}),"\n",(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="public-client.js"',children:"import { createPublicClient, http } from 'viem'\nimport { lisk, ethereum } from 'viem/chains'\nimport { publicActionsL2, publicActionsL1 } from 'viem/op-stack'\n\nexport const publicClientL2 = createPublicClient({\n chain: lisk,\n transport: http()\n}).extend(publicActionsL2()) \n\nexport const publicClientL1 = createPublicClient({\n chain: ethereum,\n transport: http()\n}).extend(publicActionsL1()) \n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="public-client.js"',children:"import { createPublicClient, http } from 'viem'\nimport { liskSepolia, sepolia } from 'viem/chains'\nimport { publicActionsL2, publicActionsL1 } from 'viem/op-stack'\n\nexport const publicClientL2 = createPublicClient({\n chain: liskSepolia,\n transport: http()\n}).extend(publicActionsL2()) \n\nexport const publicClientL1 = createPublicClient({\n chain: sepolia,\n transport: http()\n}).extend(publicActionsL1()) \n"})})})]}),"\n",(0,i.jsx)(n.h3,{id:"wallet-client",children:"Wallet Client"}),"\n",(0,i.jsxs)(n.p,{children:["In order to write data to Lisk, you need to create a Wallet client (",(0,i.jsx)(n.code,{children:"createWalletClient"}),") and specify an ",(0,i.jsx)(n.a,{href:"https://ethereum.org/en/developers/docs/accounts/",children:(0,i.jsx)(n.code,{children:"Account"})})," to use."]}),"\n",(0,i.jsxs)(n.p,{children:["By extending the wallet client with ",(0,i.jsx)(n.code,{children:"walletActionsL1"})," or ",(0,i.jsx)(n.code,{children:"walletActionsL2"}),", you have access to additional methods for Lisk and other chains built on top of the OP stack.\nSee ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"Layer 2 extensions"})," for more information."]}),"\n",(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"jsonrpc",label:"JSON-RPC Account",children:(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, custom } from 'viem'\nimport { ethereum, lisk } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Retrieve Account from an EIP-1193 Provider.\nconst [account] = await window.ethereum.request({ \n method: 'eth_requestAccounts'\n}) \n\nexport const walletClientL1 = createWalletClient({\n account, \n chain: ethereum,\n transport: custom(window.ethereum)\n}).extend(walletActionsL1());\n\nexport const walletClientL2 = createWalletClient({\n account, \n chain: lisk,\n transport: custom(window.ethereum)\n}).extend(walletActionsL2());\n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, custom } from 'viem'\nimport { sepolia, liskSepolia } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Retrieve Account from an EIP-1193 Provider.\nconst [account] = await window.ethereum.request({ \n method: 'eth_requestAccounts'\n}) \n\nexport const walletClientL1 = createWalletClient({\n account, \n chain: sepolia,\n transport: custom(window.ethereum)\n}).extend(walletActionsL1());\n\nexport const walletClientL2 = createWalletClient({\n account, \n chain: liskSepolia,\n transport: custom(window.ethereum)\n}).extend(walletActionsL2());\n"})})})]})}),(0,i.jsxs)(s.Z,{value:"local",label:"Local Account",children:[(0,i.jsxs)(n.p,{children:["Replace ",(0,i.jsx)(n.code,{children:""})," with the private key of the account you want to use.\nThe ",(0,i.jsx)(n.code,{children:"0x"})," prefix indicates that the following string is a hexadecimal number."]}),(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, http } from 'viem'\nimport { privateKeyToAccount } from 'viem/accounts'\nimport { ethereum, lisk } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Wallet client for Ethereum\nexport const walletClientL1 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: ethereum,\n transport: http()\n}).extend(walletActionsL1());\n\n// Wallet client for Lisk\nexport const walletClientL2 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: lisk,\n transport: http()\n}).extend(walletActionsL2());\n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="wallet-client.js"',children:"import { createWalletClient, http } from 'viem'\nimport { privateKeyToAccount } from 'viem/accounts'\nimport { sepolia, liskSepolia } from 'viem/chains'\nimport { walletActionsL1, walletActionsL2 } from 'viem/op-stack'\n\n// Wallet client for Ethereum\nexport const walletClientL1 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: sepolia,\n transport: http()\n}).extend(walletActionsL1());\n\n// Wallet client for Lisk\nexport const walletClientL2 = createWalletClient({\n account: privateKeyToAccount('0x'), \n chain: liskSepolia,\n transport: http()\n}).extend(walletActionsL2());\n"})})})]})]})]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:["In addition to making a JSON-RPC request (",(0,i.jsx)(n.code,{children:"eth_requestAccounts"}),") to get an Account, viem provides various helper methods for creating an ",(0,i.jsx)(n.code,{children:"Account"}),", including: ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/accounts/privateKey.html",children:(0,i.jsx)(n.code,{children:"privateKeyToAccount"})}),", ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/accounts/mnemonic.html",children:(0,i.jsx)(n.code,{children:"mnemonicToAccount"})}),", and ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/accounts/hd.html",children:(0,i.jsx)(n.code,{children:"hdKeyToAccount"})}),"."]})}),"\n",(0,i.jsx)(n.h2,{id:"reading-data-from-the-blockchain",children:"Reading data from the blockchain"}),"\n",(0,i.jsxs)(n.p,{children:["Create a ",(0,i.jsx)(n.a,{href:"#public-client",children:"public client"})," and use it to read and access data from Lisk using ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/actions/public/introduction",children:"Public Actions"})," and ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"OP stack public actions"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:['Public Actions are client methods that map one-to-one with a "public" Ethereum RPC method (',(0,i.jsx)(n.code,{children:"eth_blockNumber"}),", ",(0,i.jsx)(n.code,{children:"eth_getBalance"}),", etc.)."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can use the ",(0,i.jsx)(n.code,{children:"getBlockNumber"})," action to get the latest block:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="read-example.js"',children:"import { parseEther } from 'viem'\nimport { publicClientL2 } from './public-client.js'\n\nconst blockNumber = await publicClientL2.getBlockNumber();\n\nexport const l1Gas = await publicClientL2.estimateL1Gas({ \n account: '0x3C46A11471f285E36EE8d089473ce98269D1b081', \n to: '0x70997970c51812dc3a010c7d01b50e0d17dc79c8', \n value: parseEther('0.1') \n}) \n\nconsole.log(blockNumber);\nconsole.log(l1Gas);\n"})}),"\n",(0,i.jsx)(n.h2,{id:"writing-data-to-the-blockchain",children:"Writing data to the blockchain"}),"\n",(0,i.jsxs)(n.p,{children:["Create a ",(0,i.jsx)(n.a,{href:"#wallet-client",children:"wallet client"})," and use it to read and access data from Lisk using ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/actions/wallet/introduction",children:"Wallet Actions"})," and ",(0,i.jsx)(n.a,{href:"https://viem.sh/op-stack/client#layer-2-extensions",children:"OP stack wallet actions"}),"."]}),"\n",(0,i.jsxs)(n.p,{children:['Wallet Actions are actions that map one-to-one with a "wallet" or "signable" Ethereum RPC method (',(0,i.jsx)(n.code,{children:"eth_requestAccounts"}),", ",(0,i.jsx)(n.code,{children:"eth_sendTransaction"}),", etc)."]}),"\n",(0,i.jsxs)(n.p,{children:["For example, you can use the ",(0,i.jsx)(n.code,{children:"sendTransaction"})," action to post a transaction:"]}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-javascript",metastring:'title="write-example.js"',children:"import { walletClientL2 } from './wallet-client.js'\n\nconst hash = await walletClientL2.sendTransaction({ \n to: '0x...',\n value: 1000000000000000000n\n})\n\nconsole.log(hash);\n"})}),"\n",(0,i.jsx)(n.h2,{id:"interacting-with-smart-contracts",children:"Interacting with smart contracts"}),"\n",(0,i.jsxs)(n.p,{children:["You can use viem to interact with a smart contract on Lisk by creating a ",(0,i.jsx)(n.code,{children:"Contract"})," instance using ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/contract/getContract.html",children:(0,i.jsx)(n.code,{children:"getContract"})})," and passing it the contract ABI, contract address, and and ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/clients/public.html",children:"Public"})," and/or ",(0,i.jsx)(n.a,{href:"https://viem.sh/docs/clients/wallet.html",children:"Wallet"})," Client:"]}),"\n",(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"example",label:"contract-example.js",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="contract-example.js"',children:"import { getContract } from 'viem'\nimport { wagmiAbi } from './abi.js'\nimport { publicClient, walletClient } from './client.js'\n \n// 1. Create contract instance\nconst contract = getContract({\n address: 'CONTRACT_ADDRESS',\n abi: wagmiAbi,\n // 1a. Insert a single client\n //client: publicClient,\n // 1b. Or public and/or wallet clients\n client: { public: publicClient, wallet: walletClient }\n})\n \n// 2. Call contract methods, fetch events, listen to events, etc.\nconst result = await contract.read.totalSupply()\nconst logs = await contract.getEvents.Transfer()\nconst unwatch = contract.watchEvent.Transfer(\n { from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' },\n { onLogs(logs) { console.log(logs) } }\n)\n"})})}),(0,i.jsx)(s.Z,{value:"client",label:"client.js",children:(0,i.jsxs)(l.Z,{children:[(0,i.jsx)(s.Z,{value:"mainnet",label:"Lisk",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="client.js"',children:"import { createPublicClient, createWalletClient, http, custom } from 'viem'\nimport { lisk } from 'viem/chains'\nimport { EthereumProvider } from '@walletconnect/ethereum-provider'\nimport { publicActionsL2 } from 'viem/op-stack'\n\nexport const publicClient = createPublicClient({\n chain: lisk,\n transport: http(),\n}).extend(publicActionsL2());\n\n// eg: Metamask\nexport const walletClient = createWalletClient({\n chain: lisk,\n transport: custom(window.ethereum),\n})\n\n// eg: WalletConnect\nconst provider = await EthereumProvider.init({\n projectId: \"abcd1234\",\n showQrModal: true,\n chains: [1],\n})\n\nexport const walletClientWC = createWalletClient({\n chain: lisk,\n transport: custom(provider),\n})\n"})})}),(0,i.jsx)(s.Z,{value:"testnet",label:"Lisk Sepolia",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="client.js"',children:"import { createPublicClient, createWalletClient, http, custom } from 'viem'\nimport { liskSepolia } from 'viem/chains'\nimport { EthereumProvider } from '@walletconnect/ethereum-provider'\nimport { publicActionsL2 } from 'viem/op-stack'\n\nexport const publicClient = createPublicClient({\n chain: liskSepolia,\n transport: http(),\n}).extend(publicActionsL2());\n\n// eg: Metamask\nexport const walletClient = createWalletClient({\n chain: liskSepolia,\n transport: custom(window.ethereum),\n})\n\n// eg: WalletConnect\nconst provider = await EthereumProvider.init({\n projectId: \"abcd1234\",\n showQrModal: true,\n chains: [1],\n})\n\nexport const walletClientWC = createWalletClient({\n chain: liskSepolia,\n transport: custom(provider),\n})\n"})})})]})}),(0,i.jsxs)(s.Z,{value:"abi",label:"abi.js",children:[(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsxs)(n.p,{children:["The ABI of a contract can be found on the respective contract page in ",(0,i.jsx)(n.a,{href:"https://sepolia-blockscout.lisk.com/",children:"BlockScout"}),"."]})}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",metastring:'title="abi.js"',children:'export const wagmiAbi = [\n [\n {\n "inputs": [],\n "stateMutability": "nonpayable",\n "type": "constructor"\n },\n {\n "anonymous": false,\n "inputs": [\n {\n "indexed": true,\n "internalType": "address",\n "name": "sender",\n "type": "address"\n },\n {\n "indexed": false,\n "internalType": "string",\n "name": "message",\n "type": "string"\n }\n ],\n "name": "NewHello",\n "type": "event"\n },\n {\n "inputs": [\n {\n "internalType": "uint256",\n "name": "",\n "type": "uint256"\n }\n ],\n "name": "blacklist",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "counter",\n "outputs": [\n {\n "internalType": "uint32",\n "name": "",\n "type": "uint32"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "string",\n "name": "_message",\n "type": "string"\n }\n ],\n "name": "createHello",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "maxLength",\n "outputs": [\n {\n "internalType": "uint32",\n "name": "",\n "type": "uint32"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "name": "message",\n "outputs": [\n {\n "internalType": "string",\n "name": "",\n "type": "string"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "minLength",\n "outputs": [\n {\n "internalType": "uint32",\n "name": "",\n "type": "uint32"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [],\n "name": "owner",\n "outputs": [\n {\n "internalType": "address",\n "name": "",\n "type": "address"\n }\n ],\n "stateMutability": "view",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "string[]",\n "name": "_newBlackList",\n "type": "string[]"\n }\n ],\n "name": "setBlacklist",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n },\n {\n "inputs": [\n {\n "internalType": "uint32",\n "name": "_newMin",\n "type": "uint32"\n },\n {\n "internalType": "uint32",\n "name": "_newMax",\n "type": "uint32"\n }\n ],\n "name": "setMinMaxMessageLength",\n "outputs": [],\n "stateMutability": "nonpayable",\n "type": "function"\n }\n ]\n];\n'})})]})]}),"\n",(0,i.jsx)(n.admonition,{type:"info",children:(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"CONTRACT_ADDRESS"})," is the address of the deployed contract."]})})]})}function p(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},5162:(e,n,t)=>{t.d(n,{Z:()=>s});t(7294);var i=t(512);const a={tabItem:"tabItem_Ymn6"};var l=t(5893);function s(e){let{children:n,hidden:t,className:s}=e;return(0,l.jsx)("div",{role:"tabpanel",className:(0,i.Z)(a.tabItem,s),hidden:t,children:n})}},4866:(e,n,t)=>{t.d(n,{Z:()=>k});var i=t(7294),a=t(512),l=t(2466),s=t(6550),c=t(469),r=t(1980),o=t(7392),u=t(812);function h(e){return i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error(`Docusaurus error: Bad child <${"string"==typeof e.type?e.type:e.type.name}>: all children of the component should be , and every should have a unique "value" prop.`)}))?.filter(Boolean)??[]}function d(e){const{values:n,children:t}=e;return(0,i.useMemo)((()=>{const e=n??function(e){return h(e).map((e=>{let{props:{value:n,label:t,attributes:i,default:a}}=e;return{value:n,label:t,attributes:i,default:a}}))}(t);return function(e){const n=(0,o.lx)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map((e=>e.value)).join(", ")}" found in . Every value needs to be unique.`)}(e),e}),[n,t])}function p(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function m(e){let{queryString:n=!1,groupId:t}=e;const a=(0,s.k6)(),l=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return t??null}({queryString:n,groupId:t});return[(0,r._X)(l),(0,i.useCallback)((e=>{if(!l)return;const n=new URLSearchParams(a.location.search);n.set(l,e),a.replace({...a.location,search:n.toString()})}),[l,a])]}function b(e){const{defaultValue:n,queryString:t=!1,groupId:a}=e,l=d(e),[s,r]=(0,i.useState)((()=>function(e){let{defaultValue:n,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!p({value:n,tabValues:t}))throw new Error(`Docusaurus error: The has a defaultValue "${n}" but none of its children has the corresponding value. Available values are: ${t.map((e=>e.value)).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return n}const i=t.find((e=>e.default))??t[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:n,tabValues:l}))),[o,h]=m({queryString:t,groupId:a}),[b,x]=function(e){let{groupId:n}=e;const t=function(e){return e?`docusaurus.tab.${e}`:null}(n),[a,l]=(0,u.Nk)(t);return[a,(0,i.useCallback)((e=>{t&&l.set(e)}),[t,l])]}({groupId:a}),v=(()=>{const e=o??b;return p({value:e,tabValues:l})?e:null})();(0,c.Z)((()=>{v&&r(v)}),[v]);return{selectedValue:s,selectValue:(0,i.useCallback)((e=>{if(!p({value:e,tabValues:l}))throw new Error(`Can't select invalid tab value=${e}`);r(e),h(e),x(e)}),[h,x,l]),tabValues:l}}var x=t(2389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=t(5893);function g(e){let{className:n,block:t,selectedValue:i,selectValue:s,tabValues:c}=e;const r=[],{blockElementScrollPositionUntilNextRender:o}=(0,l.o5)(),u=e=>{const n=e.currentTarget,t=r.indexOf(n),a=c[t].value;a!==i&&(o(n),s(a))},h=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{const t=r.indexOf(e.currentTarget)+1;n=r[t]??r[0];break}case"ArrowLeft":{const t=r.indexOf(e.currentTarget)-1;n=r[t]??r[r.length-1];break}}n?.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},n),children:c.map((e=>{let{value:n,label:t,attributes:l}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:i===n?0:-1,"aria-selected":i===n,ref:e=>r.push(e),onKeyDown:h,onClick:u,...l,className:(0,a.Z)("tabs__item",v.tabItem,l?.className,{"tabs__item--active":i===n}),children:t??n},n)}))})}function j(e){let{lazy:n,children:t,selectedValue:l}=e;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===l));return e?(0,i.cloneElement)(e,{className:(0,a.Z)("margin-top--md",e.props.className)}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==l})))})}function w(e){const n=b(e);return(0,f.jsxs)("div",{className:(0,a.Z)("tabs-container",v.tabList),children:[(0,f.jsx)(g,{...n,...e}),(0,f.jsx)(j,{...n,...e})]})}function k(e){const n=(0,x.Z)();return(0,f.jsx)(w,{...e,children:h(e.children)},String(n))}},1151:(e,n,t)=>{t.d(n,{Z:()=>c,a:()=>s});var i=t(7294);const a={},l=i.createContext(a);function s(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:s(e.components),i.createElement(l.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a8c021bd.7ae53b29.js b/assets/js/a8c021bd.7ae53b29.js deleted file mode 100644 index 866efc433..000000000 --- a/assets/js/a8c021bd.7ae53b29.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[936],{6761:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var o=n(5893),i=n(1151);const r={title:"Deploying a custom token",slug:"/building-on-lisk/add-token-to-lisk/custom-token",description:"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.",keywords:["ERC-20 contract","Custom token","Lisk Testnet","Sepolia","Ethereum","Lisk Sepolia","Lisk","Lisk mainnet","Optimism Superchain token list"]},s="Deploying your Custom ERC-20 token to Lisk",a={id:"building-on-lisk/add-token-to-lisk/custom-token",title:"Deploying a custom token",description:"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.",source:"@site/docs/building-on-lisk/add-token-to-lisk/custom-token.mdx",sourceDirName:"building-on-lisk/add-token-to-lisk",slug:"/building-on-lisk/add-token-to-lisk/custom-token",permalink:"/lisk-documentation/building-on-lisk/add-token-to-lisk/custom-token",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Deploying a custom token",slug:"/building-on-lisk/add-token-to-lisk/custom-token",description:"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.",keywords:["ERC-20 contract","Custom token","Lisk Testnet","Sepolia","Ethereum","Lisk Sepolia","Lisk","Lisk mainnet","Optimism Superchain token list"]},sidebar:"documentationSidebar",previous:{title:"Deploying a standard token",permalink:"/lisk-documentation/building-on-lisk/add-token-to-lisk/standard-token"},next:{title:"...with viem",permalink:"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/viem"}},l={},d=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Get ETH on Sepolia and Lisk Sepolia",id:"get-eth-on-sepolia-and-lisk-sepolia",level:3},{value:"Add Lisk Sepolia to Your Wallet",id:"add-lisk-sepolia-to-your-wallet",level:3},{value:"Get an L1 ERC-20 Token Address",id:"get-an-l1-erc-20-token-address",level:3},{value:"Create an L2 ERC-20 Token",id:"create-an-l2-erc-20-token",level:2},{value:"1. Open Remix",id:"1-open-remix",level:3},{value:"2. Create a new file",id:"2-create-a-new-file",level:3},{value:"3. Copy the example contract",id:"3-copy-the-example-contract",level:3},{value:"4. Review the example contract",id:"4-review-the-example-contract",level:3},{value:"5. Compile the contract",id:"5-compile-the-contract",level:3},{value:"6. Deploy the contract",id:"6-deploy-the-contract",level:3}];function c(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.a)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"deploying-your-custom-erc-20-token-to-lisk",children:"Deploying your Custom ERC-20 token to Lisk"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["In this tutorial, you will learn how to bridge a custom ERC-20 token from Ethereum or Sepolia to the Lisk or Lisk Sepolia network, respectively.\nBy using the ",(0,o.jsx)(t.a,{href:"https://docs.optimism.io/builders/dapp-developers/bridging/standard-bridge",children:"Standard Bridge system"}),", this tutorial is meant for developers who already have an existing ERC-20 token on Ethereum and want to create a bridged representation of that token on Lisk."]}),"\n",(0,o.jsxs)(t.p,{children:["Learn step-by-step how you can create a custom token that conforms to the ",(0,o.jsx)(t.a,{href:"https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/IOptimismMintableERC20.sol",children:(0,o.jsx)(t.code,{children:"IOptimismMintableERC20"})})," interface so that it can be used with the Standard Bridge system.\nA custom token allows you to do things like trigger extra logic whenever a token is deposited.\nIf you don't need extra functionality like this, consider following the tutorial on ",(0,o.jsx)(t.a,{href:"./standard-token",children:"Deploying your Standard ERC-20 token to Lisk"})," instead."]}),"\n",(0,o.jsx)(t.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,o.jsxs)(t.admonition,{type:"note",children:[(0,o.jsxs)(t.p,{children:["You can deploy your ",(0,o.jsx)(t.strong,{children:"Custom ERC-20"})," token on Lisk Mainnet by adopting the same process.\nFor deploying to mainnet, ensure that your wallet has enough ETH."]}),(0,o.jsxs)(t.p,{children:["The subsequent text contains commands for both Lisk and Lisk Sepolia for your ease.\nFor more information, see the ",(0,o.jsx)(t.a,{href:"/network-info",children:"available Lisk networks"})," and ",(0,o.jsx)(t.a,{href:"/user/connecting-to-a-wallet",children:"how to connect a wallet with them"}),"."]})]}),"\n",(0,o.jsx)(t.h3,{id:"get-eth-on-sepolia-and-lisk-sepolia",children:"Get ETH on Sepolia and Lisk Sepolia"}),"\n",(0,o.jsx)(t.p,{children:"You will need to get some ETH on both, Sepolia and Lisk Sepolia networks."}),"\n",(0,o.jsx)(t.admonition,{type:"info",children:(0,o.jsxs)(t.p,{children:["You can use ",(0,o.jsx)(t.a,{href:"https://sepoliafaucet.com/",children:"ETH Sepolia Faucet"})," to get ETH on Sepolia.\nYou can use the ",(0,o.jsx)(t.a,{href:"https://app.optimism.io/faucet?utm_source=docs",children:"Superchain Faucet"})," to get ETH on Lisk Sepolia."]})}),"\n",(0,o.jsx)(t.h3,{id:"add-lisk-sepolia-to-your-wallet",children:"Add Lisk Sepolia to Your Wallet"}),"\n",(0,o.jsxs)(t.p,{children:["This tutorial uses ",(0,o.jsx)(t.a,{href:"https://remix.ethereum.org",children:"Remix"})," to deploy contracts.\nYou will need to add the Lisk or Lisk Sepolia network to your wallet in order to follow this tutorial.\nPlease follow the ",(0,o.jsx)(t.a,{href:"/user/connecting-to-a-wallet",children:"How to connect Lisk to a wallet"})," guide, to connect your wallet to Lisk or Lisk Sepolia network."]}),"\n",(0,o.jsx)(t.h3,{id:"get-an-l1-erc-20-token-address",children:"Get an L1 ERC-20 Token Address"}),"\n",(0,o.jsxs)(t.p,{children:["You will need an L1 ERC-20 token for this tutorial.\nIf you already have an L1 ERC-20 token deployed on Ethereum Mainnet or Sepolia, you can skip this step.\nFor Sepolia, you can use the testing token located at ",(0,o.jsx)(t.a,{href:"https://sepolia.etherscan.io/address/0x5589BB8228C07c4e15558875fAf2B859f678d129",children:(0,o.jsx)(t.code,{children:"0x5589BB8228C07c4e15558875fAf2B859f678d129"})})," that includes a ",(0,o.jsx)(t.code,{children:"faucet()"})," function that can be used to mint tokens."]}),"\n",(0,o.jsx)(t.h2,{id:"create-an-l2-erc-20-token",children:"Create an L2 ERC-20 Token"}),"\n",(0,o.jsxs)(t.p,{children:["Once you have an L1 ERC-20 token, you can create a corresponding L2 ERC-20 token on Lisk or Lisk Sepolia network.\nThis tutorial uses ",(0,o.jsx)(t.a,{href:"https://remix.ethereum.org",children:"Remix"}),", so you can easily deploy a token without a framework like ",(0,o.jsx)(t.a,{href:"https://hardhat.org",children:"Hardhat"})," or ",(0,o.jsx)(t.a,{href:"https://getfoundry.sh",children:"Foundry"}),".\nYou can follow the same general process within your favorite framework if you prefer."]}),"\n",(0,o.jsx)(t.p,{children:"In this section, you'll be creating an ERC-20 token that can be deposited but cannot be withdrawn.\nThis is just one example of the endless ways in which you could customize your L2 token."}),"\n",(0,o.jsx)(t.h3,{id:"1-open-remix",children:"1. Open Remix"}),"\n",(0,o.jsxs)(t.p,{children:["Navigate to ",(0,o.jsx)(t.a,{href:"https://remix.ethereum.org",children:"Remix"})," in your browser."]}),"\n",(0,o.jsx)(t.h3,{id:"2-create-a-new-file",children:"2. Create a new file"}),"\n",(0,o.jsxs)(t.p,{children:['Click the \ud83d\udcc4 ("Create new file") button to create a new empty Solidity file.\nYou can name this file whatever you\'d like, e.g. ',(0,o.jsx)(t.code,{children:"custom-token.sol"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"3-copy-the-example-contract",children:"3. Copy the example contract"}),"\n",(0,o.jsx)(t.p,{children:"Copy the following example contract into your new file:"}),"\n",(0,o.jsxs)(n,{children:[(0,o.jsx)("summary",{children:"custom-token.sol"}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-solidity",children:'// SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\nimport { ERC20 } from "@openzeppelin/contracts/token/ERC20/ERC20.sol";\nimport { IERC165 } from "@openzeppelin/contracts/utils/introspection/IERC165.sol";\nimport { IOptimismMintableERC20 } from "https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/IOptimismMintableERC20.sol";\n\ncontract MyCustomL2Token is IOptimismMintableERC20, ERC20 {\n /// @notice Address of the corresponding version of this token on the remote chain.\n address public immutable REMOTE_TOKEN;\n\n /// @notice Address of the StandardBridge on this network.\n address public immutable BRIDGE;\n\n /// @notice Emitted whenever tokens are minted for an account.\n /// @param account Address of the account tokens are being minted for.\n /// @param amount Amount of tokens minted.\n event Mint(address indexed account, uint256 amount);\n\n /// @notice Emitted whenever tokens are burned from an account.\n /// @param account Address of the account tokens are being burned from.\n /// @param amount Amount of tokens burned.\n event Burn(address indexed account, uint256 amount);\n\n /// @notice A modifier that only allows the bridge to call.\n modifier onlyBridge() {\n require(msg.sender == BRIDGE, "MyCustomL2Token: only bridge can mint and burn");\n _;\n }\n\n /// @param _bridge Address of the L2 standard bridge.\n /// @param _remoteToken Address of the corresponding L1 token.\n /// @param _name ERC20 name.\n /// @param _symbol ERC20 symbol.\n constructor(\n address _bridge,\n address _remoteToken,\n string memory _name,\n string memory _symbol\n )\n ERC20(_name, _symbol)\n {\n REMOTE_TOKEN = _remoteToken;\n BRIDGE = _bridge;\n }\n\n /// @custom:legacy\n /// @notice Legacy getter for REMOTE_TOKEN.\n function remoteToken() public view returns (address) {\n return REMOTE_TOKEN;\n }\n\n /// @custom:legacy\n /// @notice Legacy getter for BRIDGE.\n function bridge() public view returns (address) {\n return BRIDGE;\n }\n\n /// @notice ERC165 interface check function.\n /// @param _interfaceId Interface ID to check.\n /// @return Whether or not the interface is supported by this contract.\n function supportsInterface(bytes4 _interfaceId) external pure virtual returns (bool) {\n bytes4 iface1 = type(IERC165).interfaceId;\n // Interface corresponding to the updated OptimismMintableERC20 (this contract).\n bytes4 iface2 = type(IOptimismMintableERC20).interfaceId;\n return _interfaceId == iface1 || _interfaceId == iface2;\n }\n\n /// @notice Allows the StandardBridge on this network to mint tokens.\n /// @param _to Address to mint tokens to.\n /// @param _amount Amount of tokens to mint.\n function mint(\n address _to,\n uint256 _amount\n )\n external\n virtual\n override(IOptimismMintableERC20)\n onlyBridge\n {\n _mint(_to, _amount);\n emit Mint(_to, _amount);\n }\n\n /// @notice Prevents tokens from being withdrawn to L1.\n function burn(\n address,\n uint256\n )\n external\n virtual\n override(IOptimismMintableERC20)\n onlyBridge\n {\n revert("MyCustomL2Token cannot be withdrawn");\n }\n}\n'})})]}),"\n",(0,o.jsx)(t.h3,{id:"4-review-the-example-contract",children:"4. Review the example contract"}),"\n",(0,o.jsxs)(t.p,{children:["Take a moment to review the example contract.\nIt's almost the same as the standard ",(0,o.jsx)(t.a,{href:"https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/OptimismMintableERC20.sol",children:(0,o.jsx)(t.code,{children:"OptimismMintableERC20"})})," contract except that the ",(0,o.jsx)(t.code,{children:"_burn"})," function has been made to always revert."]}),"\n",(0,o.jsxs)(t.p,{children:["The contract for the custom token inherits from the ",(0,o.jsx)(t.a,{href:"https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/IOptimismMintableERC20.sol",children:(0,o.jsx)(t.code,{children:"IOptimismMintableERC20"})})," interface and the ",(0,o.jsx)(t.code,{children:"ERC20"})," contract.\nThe constructor takes the address of the L2 standard bridge, the address of the corresponding L1 token, the name of the ERC20 token, and the symbol of the ERC20 token.\nThe ",(0,o.jsx)(t.code,{children:"mint"})," function allows the bridge to mint tokens for users.\nSince the bridge needs to burn tokens when users want to withdraw them to L1, this means that users will not be able to withdraw tokens from this contract, which is what we intend for this example."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-solidity",children:'/// @notice Prevents tokens from being withdrawn to L1.\nfunction burn(\n address,\n uint256\n)\n external\n virtual\n override(IOptimismMintableERC20)\n onlyBridge\n{\n revert("MyCustomL2Token cannot be withdrawn");\n}\n'})}),"\n",(0,o.jsx)(t.h3,{id:"5-compile-the-contract",children:"5. Compile the contract"}),"\n",(0,o.jsx)(t.p,{children:'Save the file to automatically compile the contract.\nIf you\'ve disabled auto-compile, you\'ll need to manually compile the contract by clicking the "Solidity Compiler" tab (this looks like the letter "S") and pressing the blue "Compile" button.'}),"\n",(0,o.jsx)(t.h3,{id:"6-deploy-the-contract",children:"6. Deploy the contract"}),"\n",(0,o.jsxs)(t.p,{children:['Open the deployment tab (this looks like an Ethereum logo with an arrow pointing right).\nMake sure that your environment is set to "Injected Provider", your wallet is connected to Lisk or Lisk Sepolia network, and Remix has access to your wallet.\nThen, select the ',(0,o.jsx)(t.code,{children:"MyCustomL2Token"})," contract from the deployment dropdown and deploy it with the following parameters:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-text",children:'_BRIDGE: "0x4200000000000000000000000000000000000007"\n_REMOTETOKEN: ""\n_NAME: "My Custom Lisk L2 Token"\n_SYMBOL: "MCL2T"\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["If you used the testing token described in step ",(0,o.jsx)(t.a,{href:"#get-an-l1-erc-20-token-address",children:"Get an L1 ERC-20 Token Address"}),", use the address ",(0,o.jsx)(t.code,{children:"0x5589BB8228C07c4e15558875fAf2B859f678d129"})," for the ",(0,o.jsx)(t.code,{children:"_REMOTETOKEN"})," parameter."]})}),"\n"]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(7294);const i={},r=o.createContext(i);function s(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a8c021bd.88b55272.js b/assets/js/a8c021bd.88b55272.js new file mode 100644 index 000000000..1e1cc3656 --- /dev/null +++ b/assets/js/a8c021bd.88b55272.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[936],{6761:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>r,metadata:()=>a,toc:()=>d});var o=n(5893),i=n(1151);const r={title:"Deploying a custom token",slug:"/building-on-lisk/add-token-to-lisk/custom-token",description:"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.",keywords:["ERC-20 contract","Custom token","Lisk Testnet","Sepolia","Ethereum","Lisk Sepolia","Lisk","Lisk mainnet","Optimism Superchain token list"]},s="Deploying your Custom ERC-20 token to Lisk",a={id:"building-on-lisk/add-token-to-lisk/custom-token",title:"Deploying a custom token",description:"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.",source:"@site/docs/building-on-lisk/add-token-to-lisk/custom-token.mdx",sourceDirName:"building-on-lisk/add-token-to-lisk",slug:"/building-on-lisk/add-token-to-lisk/custom-token",permalink:"/lisk-documentation/building-on-lisk/add-token-to-lisk/custom-token",draft:!1,unlisted:!1,tags:[],version:"current",frontMatter:{title:"Deploying a custom token",slug:"/building-on-lisk/add-token-to-lisk/custom-token",description:"Learn how to bridge your custom ERC-20 token to Lisk using the standard bridge.",keywords:["ERC-20 contract","Custom token","Lisk Testnet","Sepolia","Ethereum","Lisk Sepolia","Lisk","Lisk mainnet","Optimism Superchain token list"]},sidebar:"documentationSidebar",previous:{title:"Deploying a standard token",permalink:"/lisk-documentation/building-on-lisk/add-token-to-lisk/standard-token"},next:{title:"Token development",permalink:"/lisk-documentation/category/building-on-lisk/token-development"}},l={},d=[{value:"Prerequisites",id:"prerequisites",level:2},{value:"Get ETH on Sepolia and Lisk Sepolia",id:"get-eth-on-sepolia-and-lisk-sepolia",level:3},{value:"Add Lisk Sepolia to Your Wallet",id:"add-lisk-sepolia-to-your-wallet",level:3},{value:"Get an L1 ERC-20 Token Address",id:"get-an-l1-erc-20-token-address",level:3},{value:"Create an L2 ERC-20 Token",id:"create-an-l2-erc-20-token",level:2},{value:"1. Open Remix",id:"1-open-remix",level:3},{value:"2. Create a new file",id:"2-create-a-new-file",level:3},{value:"3. Copy the example contract",id:"3-copy-the-example-contract",level:3},{value:"4. Review the example contract",id:"4-review-the-example-contract",level:3},{value:"5. Compile the contract",id:"5-compile-the-contract",level:3},{value:"6. Deploy the contract",id:"6-deploy-the-contract",level:3}];function c(e){const t={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",p:"p",pre:"pre",strong:"strong",...(0,i.a)(),...e.components},{Details:n}=t;return n||function(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}("Details",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.header,{children:(0,o.jsx)(t.h1,{id:"deploying-your-custom-erc-20-token-to-lisk",children:"Deploying your Custom ERC-20 token to Lisk"})}),"\n","\n",(0,o.jsxs)(t.p,{children:["In this tutorial, you will learn how to bridge a custom ERC-20 token from Ethereum or Sepolia to the Lisk or Lisk Sepolia network, respectively.\nBy using the ",(0,o.jsx)(t.a,{href:"https://docs.optimism.io/builders/dapp-developers/bridging/standard-bridge",children:"Standard Bridge system"}),", this tutorial is meant for developers who already have an existing ERC-20 token on Ethereum and want to create a bridged representation of that token on Lisk."]}),"\n",(0,o.jsxs)(t.p,{children:["Learn step-by-step how you can create a custom token that conforms to the ",(0,o.jsx)(t.a,{href:"https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/IOptimismMintableERC20.sol",children:(0,o.jsx)(t.code,{children:"IOptimismMintableERC20"})})," interface so that it can be used with the Standard Bridge system.\nA custom token allows you to do things like trigger extra logic whenever a token is deposited.\nIf you don't need extra functionality like this, consider following the tutorial on ",(0,o.jsx)(t.a,{href:"./standard-token",children:"Deploying your Standard ERC-20 token to Lisk"})," instead."]}),"\n",(0,o.jsx)(t.h2,{id:"prerequisites",children:"Prerequisites"}),"\n",(0,o.jsxs)(t.admonition,{type:"note",children:[(0,o.jsxs)(t.p,{children:["You can deploy your ",(0,o.jsx)(t.strong,{children:"Custom ERC-20"})," token on Lisk Mainnet by adopting the same process.\nFor deploying to mainnet, ensure that your wallet has enough ETH."]}),(0,o.jsxs)(t.p,{children:["The subsequent text contains commands for both Lisk and Lisk Sepolia for your ease.\nFor more information, see the ",(0,o.jsx)(t.a,{href:"/network-info",children:"available Lisk networks"})," and ",(0,o.jsx)(t.a,{href:"/user/connecting-to-a-wallet",children:"how to connect a wallet with them"}),"."]})]}),"\n",(0,o.jsx)(t.h3,{id:"get-eth-on-sepolia-and-lisk-sepolia",children:"Get ETH on Sepolia and Lisk Sepolia"}),"\n",(0,o.jsx)(t.p,{children:"You will need to get some ETH on both, Sepolia and Lisk Sepolia networks."}),"\n",(0,o.jsx)(t.admonition,{type:"info",children:(0,o.jsxs)(t.p,{children:["You can use ",(0,o.jsx)(t.a,{href:"https://sepoliafaucet.com/",children:"ETH Sepolia Faucet"})," to get ETH on Sepolia.\nYou can use the ",(0,o.jsx)(t.a,{href:"https://app.optimism.io/faucet?utm_source=docs",children:"Superchain Faucet"})," to get ETH on Lisk Sepolia."]})}),"\n",(0,o.jsx)(t.h3,{id:"add-lisk-sepolia-to-your-wallet",children:"Add Lisk Sepolia to Your Wallet"}),"\n",(0,o.jsxs)(t.p,{children:["This tutorial uses ",(0,o.jsx)(t.a,{href:"https://remix.ethereum.org",children:"Remix"})," to deploy contracts.\nYou will need to add the Lisk or Lisk Sepolia network to your wallet in order to follow this tutorial.\nPlease follow the ",(0,o.jsx)(t.a,{href:"/user/connecting-to-a-wallet",children:"How to connect Lisk to a wallet"})," guide, to connect your wallet to Lisk or Lisk Sepolia network."]}),"\n",(0,o.jsx)(t.h3,{id:"get-an-l1-erc-20-token-address",children:"Get an L1 ERC-20 Token Address"}),"\n",(0,o.jsxs)(t.p,{children:["You will need an L1 ERC-20 token for this tutorial.\nIf you already have an L1 ERC-20 token deployed on Ethereum Mainnet or Sepolia, you can skip this step.\nFor Sepolia, you can use the testing token located at ",(0,o.jsx)(t.a,{href:"https://sepolia.etherscan.io/address/0x5589BB8228C07c4e15558875fAf2B859f678d129",children:(0,o.jsx)(t.code,{children:"0x5589BB8228C07c4e15558875fAf2B859f678d129"})})," that includes a ",(0,o.jsx)(t.code,{children:"faucet()"})," function that can be used to mint tokens."]}),"\n",(0,o.jsx)(t.h2,{id:"create-an-l2-erc-20-token",children:"Create an L2 ERC-20 Token"}),"\n",(0,o.jsxs)(t.p,{children:["Once you have an L1 ERC-20 token, you can create a corresponding L2 ERC-20 token on Lisk or Lisk Sepolia network.\nThis tutorial uses ",(0,o.jsx)(t.a,{href:"https://remix.ethereum.org",children:"Remix"}),", so you can easily deploy a token without a framework like ",(0,o.jsx)(t.a,{href:"https://hardhat.org",children:"Hardhat"})," or ",(0,o.jsx)(t.a,{href:"https://getfoundry.sh",children:"Foundry"}),".\nYou can follow the same general process within your favorite framework if you prefer."]}),"\n",(0,o.jsx)(t.p,{children:"In this section, you'll be creating an ERC-20 token that can be deposited but cannot be withdrawn.\nThis is just one example of the endless ways in which you could customize your L2 token."}),"\n",(0,o.jsx)(t.h3,{id:"1-open-remix",children:"1. Open Remix"}),"\n",(0,o.jsxs)(t.p,{children:["Navigate to ",(0,o.jsx)(t.a,{href:"https://remix.ethereum.org",children:"Remix"})," in your browser."]}),"\n",(0,o.jsx)(t.h3,{id:"2-create-a-new-file",children:"2. Create a new file"}),"\n",(0,o.jsxs)(t.p,{children:['Click the \ud83d\udcc4 ("Create new file") button to create a new empty Solidity file.\nYou can name this file whatever you\'d like, e.g. ',(0,o.jsx)(t.code,{children:"custom-token.sol"}),"."]}),"\n",(0,o.jsx)(t.h3,{id:"3-copy-the-example-contract",children:"3. Copy the example contract"}),"\n",(0,o.jsx)(t.p,{children:"Copy the following example contract into your new file:"}),"\n",(0,o.jsxs)(n,{children:[(0,o.jsx)("summary",{children:"custom-token.sol"}),(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-solidity",children:'// SPDX-License-Identifier: MIT\npragma solidity ^0.8.0;\n\nimport { ERC20 } from "@openzeppelin/contracts/token/ERC20/ERC20.sol";\nimport { IERC165 } from "@openzeppelin/contracts/utils/introspection/IERC165.sol";\nimport { IOptimismMintableERC20 } from "https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/IOptimismMintableERC20.sol";\n\ncontract MyCustomL2Token is IOptimismMintableERC20, ERC20 {\n /// @notice Address of the corresponding version of this token on the remote chain.\n address public immutable REMOTE_TOKEN;\n\n /// @notice Address of the StandardBridge on this network.\n address public immutable BRIDGE;\n\n /// @notice Emitted whenever tokens are minted for an account.\n /// @param account Address of the account tokens are being minted for.\n /// @param amount Amount of tokens minted.\n event Mint(address indexed account, uint256 amount);\n\n /// @notice Emitted whenever tokens are burned from an account.\n /// @param account Address of the account tokens are being burned from.\n /// @param amount Amount of tokens burned.\n event Burn(address indexed account, uint256 amount);\n\n /// @notice A modifier that only allows the bridge to call.\n modifier onlyBridge() {\n require(msg.sender == BRIDGE, "MyCustomL2Token: only bridge can mint and burn");\n _;\n }\n\n /// @param _bridge Address of the L2 standard bridge.\n /// @param _remoteToken Address of the corresponding L1 token.\n /// @param _name ERC20 name.\n /// @param _symbol ERC20 symbol.\n constructor(\n address _bridge,\n address _remoteToken,\n string memory _name,\n string memory _symbol\n )\n ERC20(_name, _symbol)\n {\n REMOTE_TOKEN = _remoteToken;\n BRIDGE = _bridge;\n }\n\n /// @custom:legacy\n /// @notice Legacy getter for REMOTE_TOKEN.\n function remoteToken() public view returns (address) {\n return REMOTE_TOKEN;\n }\n\n /// @custom:legacy\n /// @notice Legacy getter for BRIDGE.\n function bridge() public view returns (address) {\n return BRIDGE;\n }\n\n /// @notice ERC165 interface check function.\n /// @param _interfaceId Interface ID to check.\n /// @return Whether or not the interface is supported by this contract.\n function supportsInterface(bytes4 _interfaceId) external pure virtual returns (bool) {\n bytes4 iface1 = type(IERC165).interfaceId;\n // Interface corresponding to the updated OptimismMintableERC20 (this contract).\n bytes4 iface2 = type(IOptimismMintableERC20).interfaceId;\n return _interfaceId == iface1 || _interfaceId == iface2;\n }\n\n /// @notice Allows the StandardBridge on this network to mint tokens.\n /// @param _to Address to mint tokens to.\n /// @param _amount Amount of tokens to mint.\n function mint(\n address _to,\n uint256 _amount\n )\n external\n virtual\n override(IOptimismMintableERC20)\n onlyBridge\n {\n _mint(_to, _amount);\n emit Mint(_to, _amount);\n }\n\n /// @notice Prevents tokens from being withdrawn to L1.\n function burn(\n address,\n uint256\n )\n external\n virtual\n override(IOptimismMintableERC20)\n onlyBridge\n {\n revert("MyCustomL2Token cannot be withdrawn");\n }\n}\n'})})]}),"\n",(0,o.jsx)(t.h3,{id:"4-review-the-example-contract",children:"4. Review the example contract"}),"\n",(0,o.jsxs)(t.p,{children:["Take a moment to review the example contract.\nIt's almost the same as the standard ",(0,o.jsx)(t.a,{href:"https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/OptimismMintableERC20.sol",children:(0,o.jsx)(t.code,{children:"OptimismMintableERC20"})})," contract except that the ",(0,o.jsx)(t.code,{children:"_burn"})," function has been made to always revert."]}),"\n",(0,o.jsxs)(t.p,{children:["The contract for the custom token inherits from the ",(0,o.jsx)(t.a,{href:"https://github.com/ethereum-optimism/optimism/blob/v1.1.4/packages/contracts-bedrock/src/universal/IOptimismMintableERC20.sol",children:(0,o.jsx)(t.code,{children:"IOptimismMintableERC20"})})," interface and the ",(0,o.jsx)(t.code,{children:"ERC20"})," contract.\nThe constructor takes the address of the L2 standard bridge, the address of the corresponding L1 token, the name of the ERC20 token, and the symbol of the ERC20 token.\nThe ",(0,o.jsx)(t.code,{children:"mint"})," function allows the bridge to mint tokens for users.\nSince the bridge needs to burn tokens when users want to withdraw them to L1, this means that users will not be able to withdraw tokens from this contract, which is what we intend for this example."]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-solidity",children:'/// @notice Prevents tokens from being withdrawn to L1.\nfunction burn(\n address,\n uint256\n)\n external\n virtual\n override(IOptimismMintableERC20)\n onlyBridge\n{\n revert("MyCustomL2Token cannot be withdrawn");\n}\n'})}),"\n",(0,o.jsx)(t.h3,{id:"5-compile-the-contract",children:"5. Compile the contract"}),"\n",(0,o.jsx)(t.p,{children:'Save the file to automatically compile the contract.\nIf you\'ve disabled auto-compile, you\'ll need to manually compile the contract by clicking the "Solidity Compiler" tab (this looks like the letter "S") and pressing the blue "Compile" button.'}),"\n",(0,o.jsx)(t.h3,{id:"6-deploy-the-contract",children:"6. Deploy the contract"}),"\n",(0,o.jsxs)(t.p,{children:['Open the deployment tab (this looks like an Ethereum logo with an arrow pointing right).\nMake sure that your environment is set to "Injected Provider", your wallet is connected to Lisk or Lisk Sepolia network, and Remix has access to your wallet.\nThen, select the ',(0,o.jsx)(t.code,{children:"MyCustomL2Token"})," contract from the deployment dropdown and deploy it with the following parameters:"]}),"\n",(0,o.jsx)(t.pre,{children:(0,o.jsx)(t.code,{className:"language-text",children:'_BRIDGE: "0x4200000000000000000000000000000000000007"\n_REMOTETOKEN: ""\n_NAME: "My Custom Lisk L2 Token"\n_SYMBOL: "MCL2T"\n'})}),"\n",(0,o.jsx)(t.admonition,{type:"tip",children:(0,o.jsxs)(t.p,{children:["If you used the testing token described in step ",(0,o.jsx)(t.a,{href:"#get-an-l1-erc-20-token-address",children:"Get an L1 ERC-20 Token Address"}),", use the address ",(0,o.jsx)(t.code,{children:"0x5589BB8228C07c4e15558875fAf2B859f678d129"})," for the ",(0,o.jsx)(t.code,{children:"_REMOTETOKEN"})," parameter."]})}),"\n"]})}function h(e={}){const{wrapper:t}={...(0,i.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(c,{...e})}):c(e)}},1151:(e,t,n)=>{n.d(t,{Z:()=>a,a:()=>s});var o=n(7294);const i={},r=o.createContext(i);function s(e){const t=o.useContext(r);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),o.createElement(r.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f1b37e9d.e50b1fbe.js b/assets/js/f1b37e9d.05b3837c.js similarity index 72% rename from assets/js/f1b37e9d.e50b1fbe.js rename to assets/js/f1b37e9d.05b3837c.js index 2a1da8d4a..ef8526ad2 100644 --- a/assets/js/f1b37e9d.e50b1fbe.js +++ b/assets/js/f1b37e9d.05b3837c.js @@ -1 +1 @@ -"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[6493],{9441:i=>{i.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Bridging an L1 token to Lisk","description":"Guides explainig how to bridge tokens from Ethereum to Lisk and add them to the superchain token list.","keywords":["guides","smart contracts","bridging","superchain token list"],"slug":"/category/building-on-lisk/add-token-to-lisk","permalink":"/lisk-documentation/category/building-on-lisk/add-token-to-lisk","sidebar":"documentationSidebar","navigation":{"previous":{"title":"... with thirdweb","permalink":"/lisk-documentation/building-on-lisk/deploying-smart-contract/with-thirdweb"},"next":{"title":"Introduction","permalink":"/lisk-documentation/building-on-lisk/add-token-to-lisk"}}}}')}}]); \ No newline at end of file +"use strict";(self.webpackChunklisk_docs=self.webpackChunklisk_docs||[]).push([[6493],{9441:i=>{i.exports=JSON.parse('{"categoryGeneratedIndex":{"title":"Bridging an L1 token to Lisk","description":"Guides explainig how to bridge tokens from Ethereum to Lisk and add them to the superchain token list.","keywords":["guides","smart contracts","bridging","superchain token list"],"slug":"/category/building-on-lisk/add-token-to-lisk","permalink":"/lisk-documentation/category/building-on-lisk/add-token-to-lisk","sidebar":"documentationSidebar","navigation":{"previous":{"title":"...with web3.js","permalink":"/lisk-documentation/building-on-lisk/interacting-with-the-blockchain/web3"},"next":{"title":"Introduction","permalink":"/lisk-documentation/building-on-lisk/add-token-to-lisk"}}}}')}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.3dd97049.js b/assets/js/runtime~main.144d9eb8.js similarity index 68% rename from assets/js/runtime~main.3dd97049.js rename to assets/js/runtime~main.144d9eb8.js index 42612a880..394160712 100644 --- a/assets/js/runtime~main.3dd97049.js +++ b/assets/js/runtime~main.144d9eb8.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,b,c,d={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return d[e].call(f.exports,f,f.exports,r),f.exports}r.m=d,e=[],r.O=(a,f,b,c)=>{if(!f){var d=1/0;for(i=0;i=c)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,b,c]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,b){if(1&b&&(e=this(e)),8&b)return e;if("object"==typeof e&&e){if(4&b&&e.__esModule)return e;if(16&b&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var d={};a=a||[null,f({}),f([]),f(f)];for(var t=2&b&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>d[a]=()=>e[a]));return d.default=()=>e,r.d(c,d),c},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({199:"87599bfc",251:"17bdee9f",270:"ac1f69a1",336:"039b21c9",763:"57d22669",895:"4984adb1",936:"a8c021bd",1004:"c141421f",1068:"0eafa1eb",1169:"a29e3505",1425:"d25e57c7",1475:"1b8354b2",1674:"15e9dd0c",1679:"484b75f3",1817:"8b0f9f4a",2e3:"746da5eb",2009:"356cc13d",2086:"ad9ad9bc",2184:"6ce766bb",2375:"d9983e98",2634:"857902ca",2672:"5f139d3e",2861:"af13aafd",2940:"554c6b45",2961:"3d9a73a5",3080:"2e7d4620",3085:"1f391b9e",3181:"1543b51c",3206:"f8409a7e",3346:"2edd81d0",3567:"8bcd76a4",3629:"aba21aa0",3751:"3720c009",4195:"c4f5d8e4",4318:"b2059c63",4368:"a94703ab",4943:"1cb7678f",5108:"c4f0bf58",5182:"dbb9021c",5379:"f7633811",5469:"9636b8fc",5712:"516f4631",5860:"e36629f4",5980:"a7456010",6493:"f1b37e9d",6554:"d1f45362",6633:"b04fc419",7005:"55bfc4dc",7111:"e556ce07",7195:"79ab6a57",7414:"393be207",7468:"7aeaf29f",7800:"f9cb542d",7918:"17896441",7920:"1a4e3797",7939:"8d261ba2",8040:"56867589",8438:"66705cd6",8518:"a7bd4aaa",9468:"d38dfec1",9474:"7d66d443",9479:"72da674a",9661:"5e95c892",9711:"6d987312",9799:"6541bca2",9817:"14eb3368",9924:"df203c0f"}[e]||e)+"."+{199:"f888de7a",251:"c496340e",270:"5ad841c9",336:"a5643ced",763:"75b8551a",895:"f8138d13",936:"7ae53b29",1004:"17ccd098",1068:"87e14b39",1169:"ac4a0f84",1425:"eb663ee0",1426:"1068e9cf",1475:"862e5164",1674:"2b7c6873",1679:"e3b8f8b8",1772:"62066f4b",1817:"36978a97",2e3:"4b90117e",2009:"b6e6f8ec",2086:"75a2b350",2184:"e5dba7bf",2375:"a6c2634a",2634:"dbe57faf",2672:"999b6adb",2861:"4853dcfd",2916:"c89dd23b",2940:"7cc13b4f",2961:"63bc3e8b",3080:"77df2e2c",3085:"ec24c1b6",3181:"dd4a8aa6",3206:"2dafcd95",3346:"7f3a5bcc",3567:"66b95353",3629:"dbcdef91",3751:"a733d788",4195:"f93369b0",4318:"ca2fd32f",4368:"2c3e87bd",4943:"29bf7ea7",5108:"da214e48",5182:"3d19323d",5379:"b84d747c",5469:"b7b29e48",5712:"15847de2",5860:"8c7a6131",5980:"0a80f2f1",6493:"e50b1fbe",6554:"2de20a4b",6633:"e302d68c",6945:"5ba1f545",7005:"aa790f1d",7111:"9453157e",7195:"7e6fa7db",7414:"b714faaa",7468:"59b66f81",7800:"99092022",7918:"db73a423",7920:"7bd995e7",7939:"a4e553e3",8040:"c76ceff1",8438:"220c2b34",8518:"67c0499a",8894:"5fb01b92",9468:"b38d477e",9474:"3073cec2",9479:"4626981a",9661:"f983f3d6",9711:"a50807a5",9799:"d6dc7eff",9817:"769b1e1b",9924:"11c34b2b"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),b={},c="lisk-docs:",r.l=(e,a,f,d)=>{if(b[e])b[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var c=b[e];if(delete b[e],t.parentNode&&t.parentNode.removeChild(t),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/lisk-documentation/",r.gca=function(e){return e={17896441:"7918",56867589:"8040","87599bfc":"199","17bdee9f":"251",ac1f69a1:"270","039b21c9":"336","57d22669":"763","4984adb1":"895",a8c021bd:"936",c141421f:"1004","0eafa1eb":"1068",a29e3505:"1169",d25e57c7:"1425","1b8354b2":"1475","15e9dd0c":"1674","484b75f3":"1679","8b0f9f4a":"1817","746da5eb":"2000","356cc13d":"2009",ad9ad9bc:"2086","6ce766bb":"2184",d9983e98:"2375","857902ca":"2634","5f139d3e":"2672",af13aafd:"2861","554c6b45":"2940","3d9a73a5":"2961","2e7d4620":"3080","1f391b9e":"3085","1543b51c":"3181",f8409a7e:"3206","2edd81d0":"3346","8bcd76a4":"3567",aba21aa0:"3629","3720c009":"3751",c4f5d8e4:"4195",b2059c63:"4318",a94703ab:"4368","1cb7678f":"4943",c4f0bf58:"5108",dbb9021c:"5182",f7633811:"5379","9636b8fc":"5469","516f4631":"5712",e36629f4:"5860",a7456010:"5980",f1b37e9d:"6493",d1f45362:"6554",b04fc419:"6633","55bfc4dc":"7005",e556ce07:"7111","79ab6a57":"7195","393be207":"7414","7aeaf29f":"7468",f9cb542d:"7800","1a4e3797":"7920","8d261ba2":"7939","66705cd6":"8438",a7bd4aaa:"8518",d38dfec1:"9468","7d66d443":"9474","72da674a":"9479","5e95c892":"9661","6d987312":"9711","6541bca2":"9799","14eb3368":"9817",df203c0f:"9924"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,f)=>{var b=r.o(e,a)?e[a]:void 0;if(0!==b)if(b)f.push(b[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>b=e[a]=[f,c]));f.push(b[2]=c);var d=r.p+r.u(a),t=new Error;r.l(d,(f=>{if(r.o(e,a)&&(0!==(b=e[a])&&(e[a]=void 0),b)){var c=f&&("load"===f.type?"missing":f.type),d=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+c+": "+d+")",t.name="ChunkLoadError",t.type=c,t.request=d,b[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var b,c,d=f[0],t=f[1],o=f[2],n=0;if(d.some((a=>0!==e[a]))){for(b in t)r.o(t,b)&&(r.m[b]=t[b]);if(o)var i=o(r)}for(a&&a(f);n{"use strict";var e,a,f,d,c,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={exports:{}};return b[e].call(f.exports,f,f.exports,r),f.exports}r.m=b,e=[],r.O=(a,f,d,c)=>{if(!f){var b=1/0;for(i=0;i=c)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,c0&&e[i-1][2]>c;i--)e[i]=e[i-1];e[i]=[f,d,c]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,d){if(1&d&&(e=this(e)),8&d)return e;if("object"==typeof e&&e){if(4&d&&e.__esModule)return e;if(16&d&&"function"==typeof e.then)return e}var c=Object.create(null);r.r(c);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&d&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(c,b),c},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({199:"87599bfc",251:"17bdee9f",270:"ac1f69a1",336:"039b21c9",763:"57d22669",895:"4984adb1",936:"a8c021bd",1004:"c141421f",1068:"0eafa1eb",1169:"a29e3505",1425:"d25e57c7",1475:"1b8354b2",1674:"15e9dd0c",1679:"484b75f3",1817:"8b0f9f4a",2e3:"746da5eb",2009:"356cc13d",2086:"ad9ad9bc",2184:"6ce766bb",2375:"d9983e98",2634:"857902ca",2672:"5f139d3e",2861:"af13aafd",2940:"554c6b45",2961:"3d9a73a5",3080:"2e7d4620",3085:"1f391b9e",3181:"1543b51c",3206:"f8409a7e",3346:"2edd81d0",3567:"8bcd76a4",3629:"aba21aa0",3751:"3720c009",4195:"c4f5d8e4",4318:"b2059c63",4368:"a94703ab",4943:"1cb7678f",5108:"c4f0bf58",5182:"dbb9021c",5379:"f7633811",5469:"9636b8fc",5712:"516f4631",5860:"e36629f4",5980:"a7456010",6493:"f1b37e9d",6554:"d1f45362",6633:"b04fc419",7005:"55bfc4dc",7111:"e556ce07",7195:"79ab6a57",7414:"393be207",7468:"7aeaf29f",7800:"f9cb542d",7918:"17896441",7920:"1a4e3797",7939:"8d261ba2",8040:"56867589",8438:"66705cd6",8518:"a7bd4aaa",9468:"d38dfec1",9474:"7d66d443",9479:"72da674a",9661:"5e95c892",9711:"6d987312",9799:"6541bca2",9817:"14eb3368",9924:"df203c0f"}[e]||e)+"."+{199:"56fef14e",251:"c496340e",270:"5ad841c9",336:"a5643ced",763:"75b8551a",895:"169dcb20",936:"88b55272",1004:"17ccd098",1068:"87e14b39",1169:"ac4a0f84",1425:"eb663ee0",1426:"1068e9cf",1475:"862e5164",1674:"2b7c6873",1679:"e3b8f8b8",1772:"62066f4b",1817:"36978a97",2e3:"4b90117e",2009:"b6e6f8ec",2086:"75a2b350",2184:"e5dba7bf",2375:"a6c2634a",2634:"dbe57faf",2672:"999b6adb",2861:"4853dcfd",2916:"c89dd23b",2940:"aef64f62",2961:"63bc3e8b",3080:"77df2e2c",3085:"ec24c1b6",3181:"dd4a8aa6",3206:"2dafcd95",3346:"7f3a5bcc",3567:"66b95353",3629:"dbcdef91",3751:"a733d788",4195:"f93369b0",4318:"ca2fd32f",4368:"2c3e87bd",4943:"29bf7ea7",5108:"da214e48",5182:"3d19323d",5379:"b84d747c",5469:"b7b29e48",5712:"15847de2",5860:"8c7a6131",5980:"0a80f2f1",6493:"05b3837c",6554:"2de20a4b",6633:"e302d68c",6945:"5ba1f545",7005:"aa790f1d",7111:"9453157e",7195:"7e6fa7db",7414:"b714faaa",7468:"59b66f81",7800:"99092022",7918:"db73a423",7920:"7bd995e7",7939:"9a83f19c",8040:"dc19b2e3",8438:"220c2b34",8518:"67c0499a",8894:"5fb01b92",9468:"b38d477e",9474:"3073cec2",9479:"4626981a",9661:"f983f3d6",9711:"a50807a5",9799:"d6dc7eff",9817:"769b1e1b",9924:"11c34b2b"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),d={},c="lisk-docs:",r.l=(e,a,f,b)=>{if(d[e])d[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(s);var c=d[e];if(delete d[e],t.parentNode&&t.parentNode.removeChild(t),c&&c.forEach((e=>e(f))),a)return a(f)},s=setTimeout(l.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=l.bind(null,t.onerror),t.onload=l.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/lisk-documentation/",r.gca=function(e){return e={17896441:"7918",56867589:"8040","87599bfc":"199","17bdee9f":"251",ac1f69a1:"270","039b21c9":"336","57d22669":"763","4984adb1":"895",a8c021bd:"936",c141421f:"1004","0eafa1eb":"1068",a29e3505:"1169",d25e57c7:"1425","1b8354b2":"1475","15e9dd0c":"1674","484b75f3":"1679","8b0f9f4a":"1817","746da5eb":"2000","356cc13d":"2009",ad9ad9bc:"2086","6ce766bb":"2184",d9983e98:"2375","857902ca":"2634","5f139d3e":"2672",af13aafd:"2861","554c6b45":"2940","3d9a73a5":"2961","2e7d4620":"3080","1f391b9e":"3085","1543b51c":"3181",f8409a7e:"3206","2edd81d0":"3346","8bcd76a4":"3567",aba21aa0:"3629","3720c009":"3751",c4f5d8e4:"4195",b2059c63:"4318",a94703ab:"4368","1cb7678f":"4943",c4f0bf58:"5108",dbb9021c:"5182",f7633811:"5379","9636b8fc":"5469","516f4631":"5712",e36629f4:"5860",a7456010:"5980",f1b37e9d:"6493",d1f45362:"6554",b04fc419:"6633","55bfc4dc":"7005",e556ce07:"7111","79ab6a57":"7195","393be207":"7414","7aeaf29f":"7468",f9cb542d:"7800","1a4e3797":"7920","8d261ba2":"7939","66705cd6":"8438",a7bd4aaa:"8518",d38dfec1:"9468","7d66d443":"9474","72da674a":"9479","5e95c892":"9661","6d987312":"9711","6541bca2":"9799","14eb3368":"9817",df203c0f:"9924"}[e]||e,r.p+r.u(e)},(()=>{var e={1303:0,532:0};r.f.j=(a,f)=>{var d=r.o(e,a)?e[a]:void 0;if(0!==d)if(d)f.push(d[2]);else if(/^(1303|532)$/.test(a))e[a]=0;else{var c=new Promise(((f,c)=>d=e[a]=[f,c]));f.push(d[2]=c);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(d=e[a])&&(e[a]=void 0),d)){var c=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+c+": "+b+")",t.name="ChunkLoadError",t.type=c,t.request=b,d[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var d,c,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(d in t)r.o(t,d)&&(r.m[d]=t[d]);if(o)var i=o(r)}for(a&&a(f);n Bridged Token Addresses | Lisk Documentation - + -

Bridged tokens

+

Bridged tokens

This page summarizes officially reviewed tokens deployed on Lisk and their corresponding L1 addresses.

The list is based on the Superchain Token List.

tip

If you want to add a token to the list, please check out the guide Bridging an L1 token to Lisk.

diff --git a/building-on-lisk/add-token-to-lisk.html b/building-on-lisk/add-token-to-lisk.html index fc1a6118d..01db72ff7 100644 --- a/building-on-lisk/add-token-to-lisk.html +++ b/building-on-lisk/add-token-to-lisk.html @@ -5,11 +5,11 @@ Introduction | Lisk Documentation - + -

Bridging an L1 token to Lisk

+

Bridging an L1 token to Lisk

This page is intended for token issuers who already have an ERC-20 contract deployed on Ethereum and would like to submit their token for bridging between Ethereum and Lisk. Lisk uses the Superchain Token List as a reference for tokens that have been deployed on Lisk. In case you want to create a new token on Lisk, please refer to the page Token development.

diff --git a/building-on-lisk/add-token-to-lisk/custom-token.html b/building-on-lisk/add-token-to-lisk/custom-token.html index 94e9b6ac6..326c1ecc4 100644 --- a/building-on-lisk/add-token-to-lisk/custom-token.html +++ b/building-on-lisk/add-token-to-lisk/custom-token.html @@ -5,11 +5,11 @@ Deploying a custom token | Lisk Documentation - + -

Deploying your Custom ERC-20 token to Lisk

+

Deploying your Custom ERC-20 token to Lisk

In this tutorial, you will learn how to bridge a custom ERC-20 token from Ethereum or Sepolia to the Lisk or Lisk Sepolia network, respectively. By using the Standard Bridge system, this tutorial is meant for developers who already have an existing ERC-20 token on Ethereum and want to create a bridged representation of that token on Lisk.

@@ -63,7 +63,7 @@

6. Dep Then, select the MyCustomL2Token contract from the deployment dropdown and deploy it with the following parameters:

_BRIDGE:      "0x4200000000000000000000000000000000000007"
_REMOTETOKEN: "<L1 ERC-20 address>"
_NAME:        "My Custom Lisk L2 Token"
_SYMBOL:      "MCL2T"
tip

If you used the testing token described in step Get an L1 ERC-20 Token Address, use the address 0x5589BB8228C07c4e15558875fAf2B859f678d129 for the _REMOTETOKEN parameter.

-

  • +
diff --git a/building-on-lisk/add-token-to-lisk/standard-token.html b/building-on-lisk/add-token-to-lisk/standard-token.html index 06933e5a3..5b1dd7b50 100644 --- a/building-on-lisk/add-token-to-lisk/standard-token.html +++ b/building-on-lisk/add-token-to-lisk/standard-token.html @@ -5,11 +5,11 @@ Deploying a standard token | Lisk Documentation - + -

Deploying your Standard ERC-20 token to Lisk

+

Deploying your Standard ERC-20 token to Lisk

In this tutorial, you'll learn how to bridge a standard ERC-20 token from Ethereum to Lisk using the Standard Bridge system. This tutorial is meant for developers who already have an existing ERC-20 token on Ethereum and want to create a bridged representation of that token on Lisk.

This tutorial explains how to use the OptimismMintableERC20Factory to deploy a standardized ERC-20 token on Lisk or Lisk Sepolia network. diff --git a/building-on-lisk/deploying-smart-contract/with-Foundry.html b/building-on-lisk/deploying-smart-contract/with-Foundry.html index 1a984949b..3580b1df2 100644 --- a/building-on-lisk/deploying-smart-contract/with-Foundry.html +++ b/building-on-lisk/deploying-smart-contract/with-Foundry.html @@ -5,11 +5,11 @@ ... with Foundry | Lisk Documentation - + -

Deploying a smart contract with Foundry

+

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.

note

You can deploy a contract on Lisk mainnet by adopting the same process. For deploying to mainnet, ensure that your wallet has enough ETH.

The subsequent text contains commands for both Lisk and Lisk Sepolia for your ease. diff --git a/building-on-lisk/deploying-smart-contract/with-Hardhat.html b/building-on-lisk/deploying-smart-contract/with-Hardhat.html index 9a947140c..8ba8ba792 100644 --- a/building-on-lisk/deploying-smart-contract/with-Hardhat.html +++ b/building-on-lisk/deploying-smart-contract/with-Hardhat.html @@ -5,11 +5,11 @@ ... 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.

diff --git a/building-on-lisk/deploying-smart-contract/with-thirdweb.html b/building-on-lisk/deploying-smart-contract/with-thirdweb.html index 23c808d0f..bcd5a4510 100644 --- a/building-on-lisk/deploying-smart-contract/with-thirdweb.html +++ b/building-on-lisk/deploying-smart-contract/with-thirdweb.html @@ -5,11 +5,11 @@ ... with thirdweb | Lisk Documentation - + -

Deploying a smart contract with thirdweb

+

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.

@@ -141,7 +141,7 @@

How to interact with a deployed ERC-20 contract via Explore?
  • How to interact with a deployed ERC-721 contract via Explore?
  • How to interact with a deployed ERC-1155 contract via Explore?
    • -

    • +
    diff --git a/building-on-lisk/interacting-with-the-blockchain/ethers.html b/building-on-lisk/interacting-with-the-blockchain/ethers.html index fa4dc53e9..d2ca3db6c 100644 --- a/building-on-lisk/interacting-with-the-blockchain/ethers.html +++ b/building-on-lisk/interacting-with-the-blockchain/ethers.html @@ -5,11 +5,11 @@ ...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/viem.html b/building-on-lisk/interacting-with-the-blockchain/viem.html index 58c89282a..bd95c70c5 100644 --- a/building-on-lisk/interacting-with-the-blockchain/viem.html +++ b/building-on-lisk/interacting-with-the-blockchain/viem.html @@ -5,11 +5,11 @@ ...with viem | Lisk Documentation - + -

    Interacting with the blockchain with viem

    +

    Interacting with the blockchain with viem

    viem a TypeScript interface for Ethereum that provides low-level stateless primitives for interacting with Ethereum.

    You can use viem to interact with smart contracts deployed on Lisk. Viem provides first-class support for chains implemented on the OP stack, see viem.sh > OP stack.

    @@ -43,7 +43,7 @@

    Interacting with smart contracts​

    You can use viem to interact with a smart contract on Lisk by creating a Contract instance using getContract and passing it the contract ABI, contract address, and and Public and/or Wallet Client:

    contract-example.js
    import { getContract } from 'viem'
    import { wagmiAbi } from './abi.js'
    import { publicClient, walletClient } from './client.js'
     
    // 1. Create contract instance
    const contract = getContract({
      address: 'CONTRACT_ADDRESS',
      abi: wagmiAbi,
      // 1a. Insert a single client
      //client: publicClient,
      // 1b. Or public and/or wallet clients
      client: { public: publicClient, wallet: walletClient }
    })
     
    // 2. Call contract methods, fetch events, listen to events, etc.
    const result = await contract.read.totalSupply()
    const logs = await contract.getEvents.Transfer()
    const unwatch = contract.watchEvent.Transfer(
      { from: '0xA0Cf798816D4b9b9866b5330EEa46a18382f251e' },
      { onLogs(logs) { console.log(logs) } }
    )
    -
    info

    CONTRACT_ADDRESS is the address of the deployed contract.

    • +
      info

      CONTRACT_ADDRESS is the address of the deployed contract.

    diff --git a/building-on-lisk/interacting-with-the-blockchain/web3.html b/building-on-lisk/interacting-with-the-blockchain/web3.html index df21ed60b..555362fca 100644 --- a/building-on-lisk/interacting-with-the-blockchain/web3.html +++ b/building-on-lisk/interacting-with-the-blockchain/web3.html @@ -5,11 +5,11 @@ ...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​

    @@ -62,7 +62,7 @@

    W

    Use the following snippet to interact with an already deployed contract's mint() function.

    miniting-token.js
    // Address of the contract you want to interact with.
    const contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';

    // Address of the Recipient account receiving the NFT.
    const recipientAddress = 'RECIPIENT_ADDRESS'
    const amount = web3.utils.toWei('.0001', 'ether')

    // PRIVATE_KEY of the sender's account.
    const privateKey = 'PRIVATE_KEY';
    const account = web3.eth.accounts.wallet.add(privateKey);

    // Instantiate the contract object
    const contract = new web3.eth.Contract(abi, contractAddress);

    // Send a request to the 'mint()' function to mint a token.
    const txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });

    console.log('Tx hash:', txReceipt.transactionHash);
    -
    Complete code example
    miniting-token.js
    import { Web3 } from 'web3';
    import { abi } from './abi.js';

    // Instantiate a web3 object by passing the RPC URL of Lisk.
    const web3 = new Web3('https://rpc.sepolia-api.lisk.com');

    // For Lisk network
    //const web3 = new Web3('https://rpc.api.lisk.com');

    // Address of the contract you want to interact with.
    const contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';

    // Address of the Recipient account receiving the NFT.
    const recipientAddress = 'RECIPIENT_ADDRESS'
    const amount = web3.utils.toWei('.0001', 'ether')

    // PRIVATE_KEY of the sender's account.
    const privateKey = 'PRIVATE_KEY';
    const account = web3.eth.accounts.wallet.add(privateKey);

    // Instantiate the contract object
    const contract = new web3.eth.Contract(abi, contractAddress);

    // Send a request to the 'mint()' function to mint a token.
    const txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });

    console.log('Tx hash:', txReceipt.transactionHash);
    Output
    Transaction hash: 0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9
    info

    You can use the transaction hash received above to check the details of the mint transaction on Blockscout Explorer: 0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9.

    • +
      Complete code example
      miniting-token.js
      import { Web3 } from 'web3';
      import { abi } from './abi.js';

      // Instantiate a web3 object by passing the RPC URL of Lisk.
      const web3 = new Web3('https://rpc.sepolia-api.lisk.com');

      // For Lisk network
      //const web3 = new Web3('https://rpc.api.lisk.com');

      // Address of the contract you want to interact with.
      const contractAddress = '0x108872F713A27bc22ca1db8CEefCAC8CbeDdF9E5';

      // Address of the Recipient account receiving the NFT.
      const recipientAddress = 'RECIPIENT_ADDRESS'
      const amount = web3.utils.toWei('.0001', 'ether')

      // PRIVATE_KEY of the sender's account.
      const privateKey = 'PRIVATE_KEY';
      const account = web3.eth.accounts.wallet.add(privateKey);

      // Instantiate the contract object
      const contract = new web3.eth.Contract(abi, contractAddress);

      // Send a request to the 'mint()' function to mint a token.
      const txReceipt = await contract.methods.mint(recipientAddress, amount).send({ from: account[0].address });

      console.log('Tx hash:', txReceipt.transactionHash);
      Output
      Transaction hash: 0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9
      info

      You can use the transaction hash received above to check the details of the mint transaction on Blockscout Explorer: 0xe654513f453623d9ce329b575985b7fcd09116325d10150d7cd30dcdedc124a9.

    diff --git a/building-on-lisk/migration-guide.html b/building-on-lisk/migration-guide.html index e7f0c8ca1..6ff6d23d9 100644 --- a/building-on-lisk/migration-guide.html +++ b/building-on-lisk/migration-guide.html @@ -5,11 +5,11 @@ Lisk L1->L2 migration guide | Lisk Documentation - + -
    warning

    These docs are referring to the previous Lisk chain on L1, which stopped when Lisk migrated to L2 on May 2024. +

    warning

    These docs are referring to the previous Lisk chain on L1, which stopped when Lisk migrated to L2 on May 2024. If you wish to develop on the current Lisk L2 chain, please refer to the developer documentation under the Building on Lisk category

    Lisk L1->L2 migration guide

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

    diff --git a/building-on-lisk/run-a-lisk-node.html b/building-on-lisk/run-a-lisk-node.html index df122afad..1d575f7cd 100644 --- a/building-on-lisk/run-a-lisk-node.html +++ b/building-on-lisk/run-a-lisk-node.html @@ -5,11 +5,11 @@ Running a Lisk Node | Lisk Documentation - + -

    Running a Lisk Node

    This tutorial will walk you through setting up your own Lisk Node.

    +

    Running a Lisk Node

    This tutorial will walk you through setting up your own Lisk Node.

    Objectives​

    By the end of this tutorial you should be able to: