Quick Start

A super fast setup tutorial to experience the Stackup MPC x AA SDK

In this Quickstart we will set up a NextJs app that uses the Stackup SmartAccount SDK. This DApp allows users to pair with the Silent Shard app, mint a smart contact account, and create transactions on the blockchain.

Clone this repository to get started with the example quickly. Follow the instructions listed below.

git clone https://github.com/silence-laboratories/mpc-account-abstraction-sdk

Navigate to the cli directory within the cloned repository:

cd packages/stackup/nextJs

Prerequisites

• Node.js v16 or higher

Setting Up Environment Variables

1. Create a .env file:

   • In the root of your project, create a new file named .env

2. Fill in your API keys in .env:

   NEXT_PUBLIC_BASE_URL= https://us-central1-mobile-wallet-mm-snap-staging.cloudfunctions.net
   STACKUP_API_KEY = your_stackup_api_key_here //update this API key using step 3 below

3. Set the rpcUrl:

   To set the rpcUrl, you can create an instance at app.stackup.sh. Follow these steps:

   1. Create an account or log in if you already have one.

   2. Select the Sepolia network for your instance.

   3. Once the instance is created, navigate to the "Instances" tab.

   4. Copy the API Key for your instance and replace API_KEY in the rpcUrl with your actual API Key.

   5. You can also set up a paymaster (optional) by configuring the paymaster section:

More on the structure of the repository on this page: 'Structure of the Repository'

How to run:

1. npm install

2. npm run dev to run the dev version

Once started, the app is running on http://localhost:3000/. Ensure that you use only port 3000 strictly.

Be aware that when you transfer tokens to any address using this integration, your phone will trigger a signature alert notification twice. You'll need to swipe right to approve the transaction each time. This is a known issue with the Stackup SDK. For more details, check here.

Using the Silent Shard App

To interact with QR codes essential for this setup, you'll need to use the Silent Shard app. Follow these steps:

1. Download the App:

   • Get the Silent Shard app from the Google Play Store.
2. Scan the QR Code:

   • Launch the Silent Shard app and use it to scan the QR code provided during the setup process. This step is crucial for continued configuration.

Do note that the QR code is time-limited, and will expire post 30 seconds. Post which you can initiate a new QR creation.

If you would like to take such an experience into production, check out the Integration and Hosting section