Getting started

Estimated time: 3min

You want to try cometh connect ? Request your access to the dashboard

In this tutorial, we'll create a smart wallet and execute a transaction to increment a counter smart contract, using Cometh Connect.

Get Access to Cometh Connect

To use Cometh Connect, the first step is to get your api keys at https://app.cometh.io. If this is your first time using Cometh Connect, please reach out so we can set you up with a Connect account and apiKey.

Setting up your project

Once you validate the email registration, you'll have access to that panel:

By choosing Connect, you'll be able to create your first Cometh Connect project. For this tutorial, we will create a project on the Mumbai network.

You will then have access to your dashboard.

Get your API Keys

On your dashboard, you can click on the apiKey button to access all your project's credentials.

You now have your project API key, congrats ! It will be used in your front-end to authenticate public API calls.

Test the boilerplate

Going back to the apiKey button, by clicking on the getting started button you'll be able to download the tutorial repository and start trying it out !

You can then install packages and start the project:

// install all packages
yarn

//launch the project
yarn dev

You can now go and test the demo live, here is what you should be able to do:

Under the hood

Most of the logic is in the file /src/app/modules/wallet/hooks/useWalletAuth.tsx, inside the connect method.

First, we initialize the ConnectAdaptor and the ComethWallet:

• The ConnectAdaptor is an authentication adaptor that manages the signer of the smart wallet.

• The ComethWallet is a way to access the user's smart wallet features

Init the cometh connect SDK

import { ComethWallet, ConnectAdaptor, SupportedNetworks } from "@cometh/connect-sdk";

const walletAdaptor = new ConnectAdaptor({
  chainId: SupportedNetworks.MUMBAI,
  apiKey,
});

const instance = new ComethWallet({
  authAdapter: walletAdaptor,
  apiKey,
});

Create or connect a wallet for your user

The next step is to verify if the user is already associated with a smart wallet or not.

For the purpose of this demo, we store the smart wallet address of the connected user in local storage.

For a production use case, you must store the wallet address for your user. This should be done in your backend using your preferred Web 2 authentication system. Not saving this address will prevent your user from accessing it in the future.

const localStorageAddress = window.localStorage.getItem("walletAddress");

if (localStorageAddress) {
  await instance.connect(localStorageAddress);
} else {
  await instance.connect();
  const walletAddress = await instance.getAddress();
  window.localStorage.setItem("walletAddress", walletAddress);

• In the case of an existing user, we call connect with the wallet address: connect(localStorageAddress). The signer has already been created and stored in the secure enclave of the device. Every transaction or message will be signed by this signer.

• In the case of a new user, we call the method connect() with no parameter. It will create a new signer and register the wallet in our system. The wallet is not yet deployed, it will be at the first transaction.

Use Cometh Wallet with Ethers Contract

We will interact with a simple contract that just increments a counter. We already deployed a test instance for this tutorial on the Mumbai network.

The ABI of the contract is available in /src/app/modules/contract/counterABI.json

We will encapsulate the ComethWallet inside a ComethProvider that can be used as an Ethers V5 Provider for Contracts following EIP-1193.

import { ComethProvider } from "@cometh/connect-sdk";

const instanceProvider = new ComethProvider(instance);

const contract = new ethers.Contract(
  COUNTER_CONTRACT_ADDRESS,
  countContractAbi,
  instanceProvider.getSigner()
);

You are now ready to call methods on this contract using the user's Cometh wallet.

Call the method count

In the file /src/app/components/Transaction.tsx, we call the method count of the contract and wait for the transaction to be mined.

 const tx: RelayTransactionResponse = await counterContract.count();
 const txReceipt = await tx.wait();
 // Get the number of times the wallet called the method
 const balance = await counterContract.counters(wallet.getAddress());

All transactions to our instance of the count test contract are sponsored. Consequently, your users do not require gas to call this contract. You can lean more about this in the "Send transaction" section.