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.

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.

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.

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.

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.

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.

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.

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.

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.

That is all!

See Also

• Auth SDK Errors
• Auth SDK Usage Guide
• Auth SDK Reference Guide