Skip to main content

Build SUAPPs

This tutorial will show you how to build a SUAPP using suave-viem, our typescript SDK.

info

There are two different templates you can use for your SUAPP. One with minimal, typescript-only dependencies; and one which uses Next.

Set up suave-viem​

Clone the repo:

git clone git@github.com:flashbots/suave-viem.git && cd suave-viem

Use bun to install the dependencies and build the package:

bun install && bun run build

Symlink your newly built package in the global directory:

cd src/ && bun link

Notes​

  1. Confidential Compute Requests on SUAVE do not work with wallets that implement the EIP-1193 Javascript API. Therefore, we use the unsafe eth_sign method to sign CCRs, which does work, but requires that you enable this functionality in wallets like MetaMask.
    1. To do so in MetaMask, go to "Settings" -> "Advanced" -> scroll to bottom -> switch Eth_sign requests on.
  2. Both templates below assume that you are running SUAVE locally.
  3. No tests are included for the contracts at this time.

Typescript Template​

This template can be found directly in the suave-viem repo under examples/suave-web-demo. Continuing on from above, you can setup the template by running:

cd ../examples/suave-web-demo/ && bun install

This template use forge to handle the contracts it interacts with. You will need to compile them, which can be done with:

bun run compile

Now you can start the frontend with:

bun run dev

This template uses the same MEV-Share example contract we worked with using the Golang SDK in the previous tutorial.

If you're struggling with any of the above, you can also find this pure typescript template as a standalone repo here.

Next Template​

This template comes with a more extensive frontend framework, which uses Next (in typescript) and therefore depends on React. You can get it running by first cloning the repo and installing its dependencies.

Make sure you have previously built and symlinked suave-viem for this to work:

git clone git@github.com:andytudhope/build-a-suapp-next-ts.git \
&& cd build-a-suapp-next-ts \
&& yarn

Setup forge to compile your contracts:

cd packages/forge/ && forge install && forge build

Deploy the compiled contracts from the root directory (you need to have SUAVE running locally for this to work):

chmod +x packages/forge/deploy && yarn contracts:deploy

You can start the frontend with:

yarn fe:dev

Conclusion​

You now have two different templates from which to begin building your own SUAPP 💃.

These templates demonstrate how to interact with SUAVE confidentially, both directly and with data from another domain. Follow the next tutorial to understand how.

Good luck and happy building ⚡🤖.