Skip to content

Deploying on Testnet / Mainnet

This guide explains what Web3 app developers need to do for deploying their apps on the Arcana Testnet and Mainnet networks. Developers can choose to deploy one instance of the app (say, under active development) on the Arcana Testnet while simultaneously deploying a stable version of their app (say, one validated on Testnet and ready for users) on the Arcana Mainnet.

Already using Auth SDK?

If your app is already integrated with an older version of the Auth SDK, v0.3.0 or earlier, use the appropriate Migration Guide to upgrade to the latest Auth SDK v1.0.3.

Prerequisites

  • Make sure you have registered and configured your app using the Arcana Developer Dashboard.

  • After successful registration, a unique Client ID is assigned to your app that will be required later for integrating your app with the Auth SDK. Also, a default 'Testnet' configuration profile is associated with your app. To learn more about various configuration settings, see how to use the Arcana Developer Dashboard to configure app settings.

  • Integrating an app with the Auth SDK may vary slightly depending on the app type, whether it is a vanilla HTML/CSS/JS app, a React app, or a React app using wallet connectors such as Wagmi or RainbowKit. Follow the instructions in the respective Auth SDK integration guide and choose carefully depending on your app type.

    Caution

    Integrating an app may require installing the Auth SDK via say only the Arcana auth package, both auth and the arcana-react packages, or only auth-wagmi wrapper package. After installing, the developer must instantiate the appropriate AuthProvider, react component ProvideAuth or the Wagmi ArcanaConnector, as the case may be.

    If your Web3 application uses Wagmi or RainbowKit, you can directly install and integrate with the Auth wagmi wrapper. Using auth-wagmi does not require installing the auth package as it is wrapped within the auth-wagmi package.

Note

It is recommended that you deploy an app on Arcana Testnet first and then proceed to deploy your app on Arcana Mainnet.

Deploy App on Testnet

To deploy your app on the Arcana Testnet, make sure when you integrate your app with the Auth SDK by creating a new AuthProvider, use the Client ID assigned to the 'Testnet' configuration profile. If you specify the network parameter in the AuthProvider constructor, assign the value 'testnet' as shown in the code below.

Default Network Setting

If you do not provide any network parameter in the AuthProvider constructor, the Auth SDK uses 'testnet' as the default. What this means is, by default your app will be deployed on Arcana Testnet.

import {AuthProvider, CHAIN} from "@arcana/auth";

const provider = new AuthProvider(
  "87f34a9c7879cd4b726ba36a99e164837d70143a", {  // testnet Client ID
  network: 'testnet',  //change it to 'mainnet' to use Arcana Mainnet
  chainConfig: {
    rpcUrl: 'https://rpc-mumbai.maticcvigil.com',  // RPC URL of the selected chain in the wallet network dropdown UI
    chainId: CHAIN.POLYGON_MUMBAI_TESTNET,      // selected chain in the wallet network dropdown UI
  },
  alwaysVisible: true,
  debug: true,
  position: 'right',
  theme: 'dark',
});

Initialize the newly created AuthProvider before invoking any Auth SDK methods.

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

You can use plug-and-play auth via connect method or build your authentication UI by plugging in Auth SDK loginWithSocial or loginWithLink methods. For details see how to onboard users. You can also plug in your business logic and utilize the Arcana wallet for signing blockchain transactions approved by authenticated users.

Run your App

After registering, configuring your app with the 'Testnet' configuration profile, and integrating it with the Auth SDK by using the 'Testnet' Client ID, you can bring up your app. It will be deployed on the Arcana Testnet.

Once an app user authenticates for the app deployed on Arcana Testnet, the following wallet UI is displayed on the user's device.

Testnet Wallet

Monitor Testnet Usage

You can visit your app dashboard screen for the 'Testnet' configuration profile and see the Testnet usage. The figure below shows one new user for the test app.

Testnet App Identifier

Deploy App on Mainnet

To deploy your app on the Arcana Mainnet, you need to make sure that there exists a 'Mainnet' configuration profile for your app. By default, when you register an app, only the 'Testnet' configuration profile is created. See how to create the 'Mainnet' configuration profile section in the Arcana Developer Dashboard User Guide.

Check Mainnet Configuration Profile

You can check if a 'Mainnet' configuration profile is already created for your app by visiting the Manage Apps screen on the Arcana Developer Dashboard. Refer to the app card. Each card displays Testnet and Mainnet buttons. If the Mainnet button is disabled it means you have not created a 'Mainnet' profile for your app yet.

Once you have created the 'Mainnet' configuration profile for your app, please note that a new Client ID is associated with it that must be used for deploying the app on the Arcana Mainnet.

When you integrate your app with the Auth SDK by creating a new AuthProvider, do remember to update your integration code with the new Client ID that is assigned to the 'Mainnet' configuration profile. Also, to enable your app on Arcana Mainnet, you must specify the network parameter in the AuthProvider constructor and assign the value 'mainnet' as shown in the code below.

Default Network Setting

While integrating your app code for using Arcana Mainnet, if you do not provide any network parameter in the AuthProvider constructor, the Auth SDK will use the default value 'testnet'. What this means is, by default your app will be configured to use Arcana Testnet but with the specified 'Mainnet' Client ID. This mismatch will not work. You need to provide the values for 'Mainnet' in both places, Client ID as well as the network parameter in the AuthProvider constructor.

import {AuthProvider, CHAIN} from "@arcana/auth";

const provider = new AuthProvider(
  "d7c88d9b033d100e4200d21a5c4897b896e60063", {  //mainnet Client ID
  network: 'mainnet',  // change it to 'testnet' to use Arcana Testnet
  chainConfig: {
    rpcUrl: 'https://polygon-rpc.com/',  // RPC URL of the selected chain in the wallet network dropdown UI
    chainId: CHAIN.POLYGON_MAINNET,      // selected chain in the wallet network dropdown UI
  },
  alwaysVisible: true,
  debug: true,
  position: 'right',
  theme: 'dark',
});

Initialize the newly created AuthProvider before invoking any Auth SDK methods.

try {
  await auth.init()
} catch (e) {
  // Handle exception case
}

You can use plug-and-play auth via connect method or build your authentication UI by plugging in Auth SDK loginWithSocial or loginWithLink methods. For details see how to onboard users. You can also plug in your business logic and utilize the Arcana wallet for signing blockchain transactions approved by authenticated users.

Run your App

After registering, configuring your app with the 'Mainnet' configuration profile, and integrating it with the Auth SDK using the 'Mainnet' Client ID and specifying the network as 'mainnet', you can bring up your app. It will be deployed on the Arcana Mainnet.

Once an app user authenticates for the app deployed on Arcana Mainnet, the following wallet UI is displayed on the user's device.

Testnet Wallet

Monitor Mainnet Usage

You can visit your app dashboard screen for the 'Mainnet' configuration profile and see the Mainnet usage. Note that Arcana Mainnet usage is tracked in terms of MAU and billed. The figure below shows one new user for the test app deployed on Mainnet.

Mainnet App Usage

That is all!

See Also


Last update: March 13, 2023 by shaloo, shalz