# Install Dependecies
sudo apt-get update && apt-get upgrade -y
sudo apt-get install git-all -y
sudo apt-get install curl screen -y
# Install Rust
curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh
source "$HOME/.cargo/env"
rustup install stable
rustup update stable
rustup default stable# Install Fuel
curl https://install.fuel.network | sh
# Press y then Enter
# Set Path
source /root/.bashrc
# Set fuelup testnet
fuelup toolchain install latest
fuelup self update
fuelup update
fuelup default latest
fuelup default testnet
# Check version
fuelup --version# Create project
mkdir fuel-project
cd fuel-project
forc new counter-contract
# Edit Contract
nano counter-contract/src/main.sw
# Delete everything and Paste this code
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);
}
}
# Build Contract
cd counter-contract
forc buildFirst, Download Fuel-Wallet
Create new wallet and get Faucet
# Import seed phrase and create password
forc wallet import
# Create account
forc wallet account new
# Check your address
forc wallet accounts
# Deploy Contract , Enter password , Enter 0 , Enter y
forc deploy --testnet
# You get a Contract ID in your Terminal like this, Save it!
Contract counter-contract Deployed!
Network: https://testnet.fuel.network
Contract ID: 0x8342d413de2a678245d9ee39f020795800c7e6a4ac5ff7daae275f533dc05e08
Deployed in block 0x4ea52b6652836c499e44b7e42f7c22d1ed1f03cf90a1d94cd0113b9023dfa636Congrats, you have completed your first smart contract on Fuel ⛽ Tweet @fuel_network letting them to know you just built a dapp on Fuel, you might get invited to a private group of builders, be invited to the next Fuel dinner, get alpha on the project, or something 👀.
# Check Nodejs Version
node --version
# Delete old files
sudo apt-get remove nodejs
sudo apt-get purge nodejs
sudo apt-get autoremove
sudo rm /etc/apt/keyrings/nodesource.gpg
sudo rm /etc/apt/sources.list.d/nodesource.list
# Install 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
node --versioncd $HOME && cd fuel-project
npx create-react-app frontend --template typescript
# Success! Created frontend at Fuel/fuel-project/frontend
# Install fuels sdk
ls
cd frontend
npm install fuels @fuels/react @fuels/connectors @tanstack/react-query
# Generate Contract type
npx fuels init --contracts ../counter-contract/ --output ./src/sway-api
npx fuels build
# Building..
Building Sway programs using source 'forc' binary
Generating types..
🎉 Build completed successfully!
# If you get Config file not found again do this:
npx fuels init --contracts ../counter-contract/ --output ./src/sway-api
# Then
npx fuels build# Edit index
nano src/index.tsx
# Delete everything and Paste this code
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { FuelProvider } from '@fuels/react';
import {
defaultConnectors,
} from '@fuels/connectors';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const queryClient = new QueryClient();
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<QueryClientProvider client={queryClient}>
<FuelProvider
fuelConfig={{
connectors: defaultConnectors(),
}}
>
<App />
</FuelProvider>
</QueryClientProvider>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();Save ( Ctrl + X , Y , Enter )
# Edit App
nano src/App.tsx
# Delete everything and Paste this code
# Replace Contract ID
import { useEffect, useState } from "react";
import {
useBalance,
useConnectUI,
useIsConnected,
useWallet
} from '@fuels/react';
import { CounterContractAbi__factory } from "./sway-api"
import type { CounterContractAbi } from "./sway-api";
// REPLACE WITH YOUR CONTRACT ID
const CONTRACT_ID =
"0x6a99c924a15e3f9c35a759e4534f04560263b2cf512ad7998ab5194c487c3a4c";
export default function Home() {
const [contract, setContract] = useState<CounterContractAbi>();
const [counter, setCounter] = useState<number>();
const { connect, isConnecting } = useConnectUI();
const { isConnected } = useIsConnected();
const { wallet } = useWallet();
const { balance } = useBalance({
address: wallet?.address.toAddress(),
assetId: wallet?.provider.getBaseAssetId(),
});
useEffect(() => {
async function getInitialCount(){
if(isConnected && wallet){
const counterContract = CounterContractAbi__factory.connect(CONTRACT_ID, wallet);
await getCount(counterContract);
setContract(counterContract);
}
}
getInitialCount();
}, [isConnected, wallet]);
const getCount = async (counterContract: CounterContractAbi) => {
try{
const { value } = await counterContract.functions
.count()
.get();
setCounter(value.toNumber());
} catch(error) {
console.error(error);
}
}
const onIncrementPressed = async () => {
if (!contract) {
return alert("Contract not loaded");
}
try {
await contract.functions
.increment()
.call();
await getCount(contract);
} catch(error) {
console.error(error);
}
};
return (
<div style={styles.root}>
<div style={styles.container}>
{isConnected ? (
<>
<h3 style={styles.label}>Counter</h3>
<div style={styles.counter}>
{counter ?? 0}
</div>
{balance && balance.toNumber() === 0 ? (
<p>Get testnet funds from the <a target="_blank" rel="noopener noreferrer" href={`https://faucet-testnet.fuel.network/?address=${wallet?.address.toAddress()}`}>Fuel Faucet</a> to increment the counter.</p>
) :
(
<button
onClick={onIncrementPressed}
style={styles.button}
>
Increment Counter
</button>
)
}
<p>Your Fuel Wallet address is:</p>
<p>{wallet?.address.toAddress()}</p>
</>
) : (
<button
onClick={() => {
connect();
}}
style={styles.button}
>
{isConnecting ? 'Connecting' : 'Connect'}
</button>
)}
</div>
</div>
);
}
const styles = {
root: {
display: 'grid',
placeItems: 'center',
height: '100vh',
width: '100vw',
backgroundColor: "black",
} as React.CSSProperties,
container: {
color: "#ffffffec",
display: "flex",
flexDirection: "column",
alignItems: "center",
} as React.CSSProperties,
label: {
fontSize: "28px",
},
counter: {
color: "#a0a0a0",
fontSize: "48px",
},
button: {
borderRadius: "8px",
margin: "24px 0px",
backgroundColor: "#707070",
fontSize: "16px",
color: "#ffffffec",
border: "none",
outline: "none",
height: "60px",
padding: "0 1rem",
cursor: "pointer"
},
}# Start Dapp
npm start
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.4.48:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
# It can be 3001 for you in your browser, you have to check
# Open port (Don't touch this terminal and create a new terminal)
ufw allow 3000/tcpClick the "Connect" button and select the wallet you have installed to connect your wallet.
Once connected, if there are no funds in your wallet, you will see a link to get testnet funds.
If you have testnet ETH on Fuel, you should see the counter value and increment button:
You just built a fullstack dapp on Fuel! ⛽
Tweet @fuel_network letting them know you just built a dapp on Fuel, you might get invited to a private group of builders, be invited to the next Fuel dinner, get alpha on the project, or something 👀.
Node is not recommended to run by the team
# Install Dependecies
sudo apt-get update && apt-get upgrade -y
sudo apt install curl
sudo apt install screen
# Install Rust
curl --proto '=https' --tlsv1.3 https://sh.rustup.rs -sSf | sh
source "$HOME/.cargo/env"
rustup install stable
rustup update stable
rustup default stable# Install Fuel
curl https://install.fuel.network | sh
# Press y then Enter
# Set Path
source /root/.bashrc
# Set fuelup testnet
fuelup toolchain install testnet
fuelup default testnet
# Check version
fuelup --versionGet Ethereum Sepolia API in Alchemy
fuel-core-keygen new --key-type peering
# Make sure you save peerid and secret# Clone the repository
cd
git clone https://github.com/0xmoei/fuel-testnet# Start Screen
screen -S fuel
# Replace NAME , P2P_Secret , ETH_SEPOLIA_API
fuel-core run \
--service-name NNAME \
--keypair P2P_Secret \
--relayer ETH_SEPOLIA_API \
--ip 0.0.0.0 --port 4000 --peering-port 30333 \
--db-path ~/.testnet \
--snapshot $HOME/fuel-testnet/testnet-node \
--utxo-validation --poa-instant false --enable-p2p \
--min-gas-price 1 --max-block-size 18874368 --max-transmit-size 18874368 \
--reserved-nodes /dns4/p2p-devnet.fuel.network/tcp/30333/p2p/16Uiu2HAm6pmJUedRFjennk4A8yWL6zCApHCuykzRRroqMjjxZ8o6,/dns4/p2p-devnet.fuel.network/tcp/30334/p2p/16Uiu2HAm8dBwTRzqazCMqQDdR8thMa7BKiW4ep2B4DoQQp6Qhyfd \
--sync-header-batch-size 100 \
--enable-relayer \
--relayer-v2-listening-contracts 0x01855B78C1f8868DE70e84507ec735983bf262dA \
--relayer-da-deploy-height 5827607 \
--relayer-log-page-size 2000
# Minimeze Node
Screen + A + D
# Return Node
Screen -r fuelNow wait until you fully download Logs for Blocks
# Open port
sudo ufw allow 4000
You can now add this rpc to your wallet networks
http://your_ip:4000/graphql