Material for the Linea Dev Cook-Off Mini-Bootcamp
Join our Academy Telegram Group to participate in our future workshops and bootcamps.
Kickstart your blockchain journey with our Linea Dev Cook-Off series!
This tutorial is your gateway to mastering smart contract development using Solidity. Perfect for beginners or as a refresher, we'll guide you through everything from the basics of Solidity syntax to deploying your first ERC20 contract on Linea.
What You'll Learn:
Remix Default
option1_Storage.sol
0.8.19
for this tutorial, since we are going to deploy the contracts on LineaVirtual Machine
environment to test deploying and interacting with the smart contracts in a quick and practical way, even if you don't have testnet tokensInjected Web3
environment
Injected Web3
and the account is connected to your wallet (e.g., Metamask)Deploy
button to deploy the contract
Virtual Machine
environment, you will need testnet tokens to deploy the contract, and you will be prompted to confirm the transaction on your walletDeployed Contracts
sectionVisit the Solidity Documentation
Using Remix, create a new file named FrogJump.sol
Put an SPDX-License-Identifier
at the top of the file and a pragma
statement to specify the compiler version according to the Layout of a Solidity Source File specifications
Plan the Structure of the contract
name
to the frogname
of the frogCreate a contract
definition for the FrogJump
contract
Add a State Variable named name
of type string, and put it as public
Visibility to allow anyone to easily read it
public
automatically creates a Getter function for itpublic
doesn't allow writing to it directly from outside of this contract
, like in other OOP languagesCreate a Constructor function to set the name
of the frog
string
parameter and set the name
state variabledata location
for passing strings as parameters, and we should use memory
for this case
Your code should look like this:
// SPDX-License-Identifier: MIT
pragma solidity 0.8.19;
contract FrogJump {
string public name;
constructor(string memory name_) {
name = name_;
}
}
Compile the contract using Remix
Deploy to a Virtual Machine
environment and test the contract
Append the contract to add a jumps
state variable
jumps
state variable should be an Unsigned Integer (uint256
) type and of public
visibilityAppend the contract to add a jump
function
Implement the jump
function
jump
function should increment the jumps
state variable by one every time it is calledYour code should look like this:
// SPDX-License-Identifier: MIT
pragma solidity 0.8.19;
contract FrogJump {
string public name;
uint public jumps;
constructor(string memory name_) {
name = name_;
}
function jump() public {
jumps++;
}
}
Creating an Interface for IFrog
and IJumper
// SPDX-License-Identifier: MIT
pragma solidity 0.8.19;
interface IFrog {
function name() external view returns (string memory);
function jumps() external view returns (uint256);
}
interface IJumper {
function jump() external;
}
contract FrogJump is IFrog, IJumper {
string public name;
uint256 public jumps;
constructor(string memory _name) {
name = _name;
}
function jump() public {
jumps++;
}
}
Create another contract named PayFrogJump
that inherits from IFrog
and IJumper
Create a Constant named PRICE
of type uint256
and set it to 1000000000000000000
1 ether
unit to set the value in a more readable wayMake the jump
function Payable
Create an IPayableJumper
interface similar to IJumper
but sets the jump
function as payable
Modify the jumps
increment to be a function of the amount of Ether sent to the function
msg.value
transaction property to get the amount of Ether sent
require
) statement to check if the amount of Ether sent is equal to the PRICE
constant, or an exact multiple of itinterface IPayableJumper {
function jump() external payable;
}
contract PayFrogJump is IFrog, IPayableJumper {
string public name;
uint256 public jumps;
uint256 public constant PRICE = 1 ether;
constructor(string memory _name) {
name = _name;
}
function jump() public payable {
jumps += msg.value / PRICE;
}
}
Compile and deploy the PayFrogJump
contract using Remix
Test the contract in a Virtual Machine
environment by sending some Ether to the jump
function
Contract
dropdown before deployingPRICE
constant in the Value
field and select Ether
in the unit dropdown before clicking in the red jump
button
jumps
value increasing by the amount of Ether sent divided by the PRICE
constantPRICE
constant, the division will result in a remainder that will be rounded towards zero
1.5 ether
(1500000000000000000 wei
), the division will result in 1
, and the jumps
value will increase by 1
999999999999999999 wei
, the division will result in 0
, and the jumps
value will not increase, even though you sent almost 1 ether
to the contractPRICE
constant to 0.001 ether
or lower in the PayFrogJump
contract
withdraw
function, we will not be able to get the Ether back from the contract, so it's better to use a lower value for testing and avoid running out of testnet tokensPayFrogJump
contract using RemixInjected Web3
environment
Linea Sepolia
testnet
Custom (59141) network
under the Environment
dropdown in RemixCrazy Frog
Get to know the Ethereum Improvement Proposals and the Application-level standards and conventions for Ethereum
Check the ERC-20: Token Standard
Create a new ERC20
compliant contract named FrogToken
ERC20
option under the OpenZeppelin
section, and then leave all options as defaultRename the MyToken.sol
contract to FrogToken.sol
Change the code of the FrogToken
contract to set the name
and symbol
as FrogToken
and FROG
, respectively
Implement a premint
feature in contract to set the initial supply
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;
import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/token/ERC20/extensions/ERC20Permit.sol";
contract FrogToken is ERC20, ERC20Permit {
constructor() ERC20("FrogToken", "FROG") ERC20Permit("FrogToken") {
_mint(msg.sender, 1000 * 10 ** decimals());
}
}
Compile the FrogToken
contract using Remix
Deploy the contract to Linea using the Injected Web3
environment
Add the FrogToken
contract to your wallet
+ Import Tokens
feature in Metamask to add the FrogToken
contract to your walletToken Address
to add the token to your wallet
Token Address
in the Deployed Contracts
section in Remix, and also in your past transactions on the Linea Sepolia ExplorerInteract with the token by sending to other wallets, checking the balance, and approving transactions
Unlock the potential of dApp development for the Linea Dev Cook-Off with Scaffold ETH!
This tutorial covers everything from blockchain interaction and Linea integration to deploying smart contracts and crafting user interfaces.
What You'll Learn:
Install Git CLI
Install Yarn and learn how to use it
Install VSCode and learn how to use it
Recommendation: Before starting, make sure that you have the correct version of Node installed in your system.
You can check your current version by running node -v in your terminal.
v20 LTS
version to avoid problems# For Linux/MacOS
nvm install --lts
...
nvm use --lts
...
node -v
v20.11.1
Suggestion: use
nvm-windows
from Corey Butler's community package for Windows.
# For windows
nvm install lts
...
nvm use lts
...
node -v
v20.11.1
Clone the ScaffoldETH repository
git clone https://github.com/scaffold-eth/scaffold-eth-2.git
cd scaffold-eth-2
Install the dependencies
yarn install
Start the local blockchain
yarn chain
Deploy the contracts
Suggestion: since your terminal is busy running the local blockchain, you can open a new terminal tab or window to run the next commands
yarn deploy
Start the frontend
yarn start
http://localhost:3000/
Import your contracts to the ScaffoldETH project
packages/hardhat/contracts
directory and paste the FrogJump.sol
contract code from previous lesson in itCreate a deployment script for your contract
01_deploy_frog.ts
in the packages/hardhat/deploy
directory and paste the following code in itconst deployFrogJump: DeployFunction = async function (hre: HardhatRuntimeEnvironment) {
const { deployer } = await hre.getNamedAccounts();
const { deploy } = hre.deployments;
await deploy("FrogJump", {
from: deployer,
args: ["Froggy"],
log: true,
autoMine: true,
});
};
export default deployFrogJump;
Change the version
settings for the solidity
compiler in the hardhat.config.ts
to be 0.8.19
(line 24
)
packages/hardhat
directoryDeploy the FrogJump
contract and interact with it in the frontend using the debugger
page
nftsMetadata.ts
file under packages/nextjs/utils/simpleNFT
with the file in this repository
NFTCard.tsx
component under packages/nextjs/components/simpleNFT
folder to display the frog images correctly
className
of the NFT Image
to display a squared box by using className="h-60 w-60"
(read more about this in the Tailwind docs)