Skip to main content

Frontend Application

We will need a Pinata development API key and JWT with the pinFileToIPFS permission. Let's obtain that first.

VueJS​

We will take a shortcut and bypass developing a VueJS app. Instead, we will simply apply a sparse checkout of the complete frontend repo. Inside your opl-secret-ballot directory run:

git init .
git remote add -f origin https://github.com/oasisprotocol/playground
git checkout origin/main opl-secret-ballot/frontend
mv opl-secret-ballot/frontend/ .

Next, update the @oasislabs/secret-ballot-backend package name in frontend/package.json to match your backend/package.json project name.

We recommend using pnpm to install dependencies, but yarn and npm will work with some modifications around workspaces.

pnpm install

Compile and Hot-Reload for Development

pnpm run dev

Build assets for deployment

pnpm run build

We can now reference the deployed contracts in our frontend Vue app.

Modify the .env.development file with the appropriate addresses:

VITE_BALLOT_BOX_V1_ADDR=0xFb40591a8df155da291A4B52E4Df9901a95b7C06

and

VITE_DAO_V1_ADDR=0xFBcb580DD6D64fbF7caF57FB0439502412324179

Pinata​

Additionally, we will need a Pinata JWT key to access the pinning service with which we store our ballots as JSON.

VITE_PINATA_JWT=

Start​

Start Vue app

pnpm run dev

MetaMask​

You can use one of the deployed test accounts and associated private key with MetaMask.

If you have not added a local network to MetaMask already, you can use this configuration.

Localhost​

  • RPC HTTP endpoint: http://127.0.0.1:8545/
  • Chain ID:
    • Decimal: 1337

Example​

You should be able to navigate to http://localhost:5173 and create a new poll.

Create a poll

Confirm and sign a transaction to create a new poll (issues a request against the Host contract).

Confirm new poll

Voting on a ballot issues a request to the enclave contract.

Vote on ballot

You should be able to see results from past polls.

See past proposals

If you were able to get to this point, congrats! You have created an OPL dApp!

Example

You can try out and download a frontend of the secret ballot Dapp from the Oasis Playground repository.