Oasis Starter dApp

This is a skeleton for confidential Oasis dApps:

• backend contains the example MessageBox solidity contract, deployment and testing utils.
• frontend contains a Vue-based web application communicating with the backend smart contract.

This monorepo is set up for pnpm. Install dependencies by running:

pnpm install

Backend

Move to the backend folder and build smart contracts:

pnpm build

Then, prepare your hex-encoded private key for paying the deployment gas fee and store it as an environment variable:

export PRIVATE_KEY=0x...

Alternative CMD command for Windows:

set PRIVATE_KEY=0x...

To deploy the contracts to the Sapphire Localnet, Testnet or Mainnet, use one of the following commands:

npx hardhat deploy --network sapphire-localnet
npx hardhat deploy --network sapphire-testnet
npx hardhat deploy --network sapphire

If you don't need any Sapphire-specific precompiles, you can spin up the hardhat node and deploy the contract locally:

npx hardhat node
npx hardhat deploy --network localhost

Once deployed, the MessageBox address will be reported. Remember it and store it inside the frontend folder's .env.development, for example:

VITE_MESSAGE_BOX_ADDR=0x5FbDB2315678afecb367f032d93F642f64180aa3

Frontend

After you compiled the backend, updated .env.development with the corresponding address and a chain ID, move to the frontend folder, compile and Hot-Reload frontend for Development:

pnpm dev

Navigate to http://localhost:5173 with your browser to view your dApp. Some browsers (e.g. Brave) may require https connection and a CA-signed certificate to access the wallet. In this case, read the section below on how to properly deploy your dApp.

You can use one of the deployed test accounts and associated private key with MetaMask. If you use the same MetaMask accounts on fresh local networks such as Hardhat Node, Foundry Anvil or sapphire-dev docker image, don't forget to clear your account's activity each time or manually specify the correct account nonce.

Frontend Deployment

You can build assets for deployment by running:

pnpm build

dist folder will contain the generated HTML files that can be hosted.

Different Website Base

If you are running dApp on a non-root base dir, add

BASE_DIR=/my/public/path

to .env.production and bundle the app with

pnpm build-only --base=/my/public/path/

Then copy the dist folder to a place of your /my/public/path location.

Troubleshooting

When click button Connect Wallet, in some case you will constantly get the error: Uncaught (in promise) Error: [useEthereumStore] Request account failed!

To resolve it, try to open MetaMask and manually connect site: