LESSON 2

Front-End to Contract Workflow

Steps to connect a front-end (React, Vue, etc.) to Qubic:

1. Wallet Integration

Users sign transactions with the Qubic web wallet or browser wallet extension.

The browser wallet injects accounts into the dApp similarly to MetaMask, but all Procedure calls remain feeless for users.

2. Send Procedure Calls

dApp sends Procedure requests to the network.

Wallet signs and forwards them to Computors.

Example (from JS SDK):

await qubic.sendProcedure({
  contractId: 12345,
  procedure: "vote",
  args: [true]
});

3. Read State via Functions

Queries sent as Function calls — no ledger entry, instant read.

Example (from JS SDK):

const votes = await qubic.callFunction(12345, "getVotes");
console.log(votes);

PRO TIP

Always separate read (Function) calls from write (Procedure) calls in your UI to keep performance clean.

HANDS-ON TASK

Sketch a mock UI for a “Qubic Voting App” showing buttons for “Vote Yes/No” (Procedure) and a live counter (Function).

Back

Next Lesson →

HANDS-ON TASK

Sketch a mock UI for a “Qubic Voting App” showing buttons for “Vote Yes/No” (Procedure) and a live counter (Function).

PRO TIP

Always separate read (Function) calls from write (Procedure) calls in your UI to keep performance clean.

Learn

Developers

Ecosystem

Community

Legal

Qubic is a decentralized, open-source network for experimental technology. Nothing on this site should be construed as investment, legal, or financial advice. Qubic does not offer securities, and participation in the network may involve risks. Users are responsible for complying with local regulations. Please consult legal and financial professionals before engaging with the platform.