Welcome here guys, as you know Beta-4 was recently released and it means that it’s time to build our first program on Fuel!Actually, I am a coder-beginner so I created that guide so guys,who think it is extremely hard will find out that it is don’t!(At least write just a simple contract)
So before we start just one more clarification - I’ll be using a Linux and this guide is mostly Linux-oriented. You can just install Linux as a separate OS , or rent a server, or , like in my case, run a Virtual Machine and install Linux on it! The link to download Ubuntu is here - it is absolutely free so you don’t need to worry about it!
For virtual Machine I’m using a VMware workstation,you can use any VM you like!
Open a terminal in Ubuntu
And now we will be pasting commands step-by-step
sudo apt update && sudo apt upgrade -y
Then type:
sudo apt-get install git-all
Press Y
Then,to make next steps work out,let’s install curl
sudo apt-get install curl
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
Then type
source "$HOME/.cargo/env"
Let’s delete the old files
cd $home && rm -rf .fuel && rm -rf .forc && rm -rf .fuelup && rm -rf fuel-project
Then, let’s install install the Fuel toolchain.
curl --proto '=https' --tlsv1.2 -sSf https://install.fuel.network/fuelup-init.sh | sh
Press Y
After that you need to close and open you Terminal again
fuelup self update
fuelup toolchain install beta-4
fuelup default beta-4
*You can check your fuelup version
fuelup --version
Now we create the folder with our project
mkdir fuel-project
And we enter that folder
cd fuel-project
Then we create a contract project using forc:
forc new counter-contract
Then type
nano counter-contract/src/main.sw
We could actually use VS Code or any other IDE but I decided that the best way is to just open a file from terminal.
So now delete everything that is inside the file
And Paste this:
contract;
storage {
counter: u64 = 0,
}
abi Counter {
#[storage(read, write)]
fn increment();
#[storage(read)]
fn count() -> u64;
}
impl Counter for Contract {
#[storage(read)]
fn count() -> u64 {
storage.counter.read()
}
#[storage(read, write)]
fn increment() {
let incremented = storage.counter.read() + 1;
storage.counter.write(incremented);
}
}
Every Sway file must start with a declaration of what type of program the file contains; here, we've declared that this file is a contract.In our case as you can see this is contract;
Once you’ve pasted it:
Press Ctrl + X
Then Y
Then Enter
Move to the folder of your created project
cd counter-contract
Now it’s time to build your contract
forc build
I’ll just leave you a link to the official guide - where you can check out how to test your contract and how to check out thee view of your project
Just write that command
forc-wallet import
You’ll be asked to write 12 words - your seed and create a password to protect your wallet.
Then write
forc wallet account new
And one more time you’ll be asked to write a password that you’ve created.
You can create a new wallet with the command below:
forc wallet new
Create a password to protect your wallet and make sure to save your seed.
Next, create a new wallet account with:
forc wallet account new
By that command you can check list of your wallets:
forc wallet accounts
To deploy your contract on the network - you need some Test Eth.
You can faucet it here.
And now it’s finally time to deploy your contract on the Fuel Network
forc deploy --testnet
You’ll be asked to enter your password again
Once you’ve entered a password,you’ll see your accounts(in my case there is only 1 account - its number is 0
)
Select number of your account and then type y
You can see your Contract ID - which you need to save here as we will need it in the next steps!But I want to congratulate you - you’ve deployed your first contract on Beta-4.
You can see your contract in the block explorer here (if it doesn’t appear - don’t worry,explorer doesn’t show most of the transactions right now but the team I’m sure is working on it!
***********For now you’ve completed the first part - you’ve created your own smart contract,in the next steps we will create a Frontend for your dApp!***********
Anyway don’t forget to tweet that you’ve built a smart-contract on Fuel,tagging @fuel_network
Before we start,make sure to install Fuel wallet on your browser
To check out your JS version
node --version
The best version of NodeJS for now is 18,if you have it you can freely move to the step 2.3,if you don’t - let’s solve it!
There will be quite a lot of commands,but just paste them one after another.
If you have another versions,you need to uninstall NodeJS beforehand
sudo apt-get remove nodejs
Press Y
sudo apt-get purge nodejs
Then write
sudo apt-get autoremove
Press Y
sudo rm /etc/apt/keyrings/nodesource.gpg
And then write:
sudo rm /etc/apt/sources.list.d/nodesource.list
You’ve successfully uninstall NodeJS,and now let’s download NodeJS 18
NODE_MAJOR=18
sudo apt-get update
sudo apt-get install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_${NODE_MAJOR}.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt-get update
sudo apt-get install -y nodejs
You’ve install NodeJS and now let’s check that we have the right version:
node --version
Move to the fuel-project
folder
cd $home && cd fuel-project
Then write
npx create-react-app frontend --template typescript
Press Y
Now let’s head to the frontend
folder
cd frontend
And now install fuels
and @fuel-wallet/sdk
npm install fuels@0.60.0 @fuel-wallet/sdk@0.13.0 --save
As I’ve said previously you can just use VS code or any other IDE,I’ll edit it in terminal
nano tsconfig.json
Replace the previous code and paste that one
{
"compilerOptions": {
"types": ["@fuel-wallet/sdk"],
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
As usual:
Press Ctrl + X
ThenY
ThenEnter
After that run this:
npx fuels typegen -i ../counter-contract/out/debug/*-abi.json -o ./src/contracts
And after that,you should see something like that:
If you see some kind of errors,feel free to visit Fuel Forum - it is more likely someone already faced with the same issue!
Open-up:
nano src/App.tsx
And in the code below, replace all the :
CONTRACT_ID = the address of the contract you just deployed on step 1.8
Code:
import { useEffect, useState } from "react";
import "./App.css";
// Import the contract factory -- you can find the name in index.ts.
// You can also do command + space and the compiler will suggest the correct name.
import { CounterContractAbi__factory } from "./contracts";
// The address of the contract deployed the Fuel testnet
const CONTRACT_ID =
"0x...";
function App() {
const [connected, setConnected] = useState<boolean>(false);
const [account, setAccount] = useState<string>("");
const [counter, setCounter] = useState<number>(0);
const [loaded, setLoaded] = useState(false);
useEffect(() => {
setTimeout(() => {
checkConnection();
setLoaded(true);
}, 200)
if (connected) getCount();
}, [connected])
async function connect() {
if (window.fuel) {
try {
await window.fuel.connect();
const [account] = await window.fuel.accounts();
setAccount(account);
setConnected(true);
} catch (err) {
console.log("error connecting: ", err);
}
}
}
async function checkConnection() {
if (window.fuel) {
const isConnected = await window.fuel.isConnected();
if (isConnected) {
const [account] = await window.fuel.accounts();
setAccount(account);
setConnected(true);
}
}
}
async function getCount() {
if (window.fuel) {
const wallet = await window.fuel.getWallet(account);
const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
const { value } = await contract.functions.count().simulate();
setCounter(value.toNumber());
}
}
async function increment() {
if (window.fuel) {
const wallet = await window.fuel.getWallet(account);
const contract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
// Creates a transactions to call the increment function
// because it creates a TX and updates the contract state this requires the wallet to have enough coins to cover the costs and also to sign the Transaction
try {
await contract.functions.increment().txParams({ gasPrice: 1 }).call();
getCount();
} catch (err) {
console.log("error sending transaction...", err);
}
}
}
if (!loaded) return null
return (
<>
<div className="App">
{
connected ? (
<>
<h3>Counter: {counter}</h3>
<button style={buttonStyle} onClick={increment}>
Increment
</button>
</>
) : (
<button style={buttonStyle} onClick={connect}>Connect</button>
)
}
</div>
</>
);
}
export default App;
const buttonStyle = {
borderRadius: "48px",
marginTop: "10px",
backgroundColor: "#03ffc8",
fontSize: "20px",
fontWeight: "600",
color: "rgba(0, 0, 0, .88)",
border: "none",
outline: "none",
height: "60px",
width: "400px",
cursor: "pointer"
}
And we are amost there!
Now let’s go to the root
to open port 3000
sudo su -
Open port 3000
ufw allow 3000/tcp
Then go out from root
exit
And finallllllly run your program!
npm start
And now make sure that you localhost will be opened and you can finally test your app!!!
Counter check
So that was it guys,thanks everyone for reading,I hope you’ve made that far and congratulations on deploying your first smart contract on Beta-4!
@fuel_network
See you in the next guide! <3