How to Build a MultiSig Contract on Tezos | Part 2

In the last tutorial, we looked at what MultiSigs are, some use-cases for them and how to write your first and deploy your first MultiSig contract on Tezos.

In this tutorial, we’ll cover how to write a frontend dApp to interact with a MultiSig contract.

Making Changes to the MultiSig contract #

To get started, we’ll need to make some changes to the contract we deployed in the last tutorial.

In the original smart contract for the MultiSig here, navigate to the test portion of the Smart contract. We’ll change the test_account instances to actual wallet addresses. Change the wallet addresses for alice, bob, charlie and earl to wallet addresses that you control. Later on, you can switch this out for wallet addresses that you’d like as a part of your MultiSig. Like below;

alice = sp.address("tz1_wallet_address")

You may now deploy the updated contract to the Ghostnet.

Writing the Frontend of your Application #

Now, it’s time to build the Frontend dApp for our MultiSig contract to allow users to interact with the contract. This tutorial assumes a good knowledge of React. Knowledge of NextJS is not important.

I like to start with a fresh installation of Tailwind CSS and NextJS. Start off by running the command below in your terminal;

npx create-next-app --tailwind [name-of-your-app]

Follow the prompts to complete the installation.

Installing Dependencies #

We’ll be using a few dependencies to help us along the way;

• Taquito - Taquito abstracts away most of the complex logic for interacting with the blockchain. We can get data from the Blockchain, send information to smart contracts, and more.
• Beacon Wallet - The Beacon Wallet library allows our dApp to connect to whatever wallet we’re using - in this example, we’ll be using the Temple Wallet via the Chrome extension.
• Airgap/Beacon-sdk - Allows us to access the RPC network we’ll be connecting to the blockchain with
• TailwindCSS - For styling our React components.

npm i @taquito/taquito @taquito/beacon-wallet

Styling the App #

You can find all the code for styling the MultiSig dApp we’ll be building in this tutorial here.

Feel free to style the app as you please. If you’re using the styles above, your dApp should now look like below;

Handling App logic with useTaquito #

We’ll set up hooks to handle all of the interaction between our app and Taquito. Hooks allow us to write cleaner and reusable code snippets that we can then use in our components.

Create a useTaquito.ts file in src/hooks.

In this file, we’ll

• Instantiate Taquito using the line const Tezos = new TezosToolkit(rpcUrl); rpcUrl is
• Create methods to getSmartContract balance and storage and to write information to the smart contract storage.
• Create methods to allow users to connect and disconnect their wallets
• Create a method to vote on a proposal

See the code here

With that done, all we need to is export the methods and states we need and import them into our components.

Reading through the code in src/pages/index.js here shows how to import the methods/state from the useTaquito hooks file and how they’re passed into other components.

We also show different screens based on what menu item the user selects. You should end up with a working app like in this recording.