Icon LinkBuilding a Frontend to Interact With Your Contract

$ cd ..
$ npx create-react-app frontend --template typescript
Success! Created frontend at Fuel/fuel-project/frontend

$ cd frontend
$ npm install fuels@0.38.0 @fuel-wallet/sdk --save
added 114 packages, and audited 115 packages in 9s

{
  "compilerOptions": {
    "types": ["@fuel-wallet/sdk"]
  }
}

$ npx fuels typegen -i ../counter-contract/out/debug/*-abi.json -o ./src/contracts
Generating files..

 - src/contracts/CounterContractAbi.d.ts
 - src/contracts/factories/CounterContractAbi__factory.ts
 - src/contracts/index.ts

Done.⚡

import React, { useEffect, useState } from 'react';
 
import '@fuel-wallet/sdk';
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 =
  '0x9751545a0f45aa4b88904b6b4a896bfb02f231676de5438d346d4beab5cb9820';
 
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().get();
      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?.toFixed(0)}</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',
};

$ npm start
Compiled successfully!

You can now view frontend in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.4.48:3001

Note that the development build is not optimized.
To create a production build, use npm run build.