Deploying Web3 App

In this guide you will learn how the Web3 app developers can deploy apps integrated with the Arcana Auth SDK and configure them to use the Arcana Testnet or Mainnet protocols. Developers can choose to configure and deploy one instance of the app (say, under active development) using the Arcana Testnet settings while simultaneously deploying a stable version of their app (say, one validated on Testnet and ready for users) using the Arcana Mainnet settings.

Prerequisites

• Make sure the app is registered and configured via the Arcana Developer Dashboard.

• After successful registration, a unique Client ID is assigned to the app. It will be required later for integrating the app with the Arcana Auth SDK. Also, a default 'Testnet' configuration profile is associated with every newly registered 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 Arcana 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, RainbowKit or Web3-React wallet connector frameworks. Follow the instructions in the respective integration guides and choose carefully depending on the app type.

  Caution

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

Deploying App (Testnet Configuration)

Before deploying an app that uses the Arcana Testnet configurations, make sure that during the app integration with the Arcana Auth SDK a new AuthProvider is created using the correct Client ID assigned to the 'Testnet' configuration profile.

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,
  setWindowProvider: true,
  debug: true,
  position: 'right',
  theme: 'dark',
});

Initialize the newly created AuthProvider before adding code in the integrated app to onboard users.

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

Only authenticated users are allowed to sign blockchain transactions and perform Web3 wallet operations using the Arcana wallet. To onboard app users, developers can use plug-and-play auth via connect method or build custom login UI by plugging in Arcana Auth SDK loginWithSocial and loginWithLink methods. For details, see how to onboard users. You can also plug in additional business logic and utilize the Arcana wallet programmatically for allowing authenticated users to sign blockchain transactions.

Run your App

After registering the app, configuring it for the 'Testnet' configuration profile, integrating the app with the Arcana Auth SDK by using the 'Testnet' Client ID, and finally adding code to onboard users, other business logic, your app is ready to be deployed. Bring up the app and allow users to log in and use Arcana Testnet.

An authenticated app user will see the following wallet UI when using the Arcana Testnet.

Monitor Testnet Usage

Visit the app dashboard screen to view the 'Testnet' configuration profile and monitor Arcana Testnet usage. The figure below shows one new user for the test app.

Deploying App (Mainnet Configuration)

Before deploying the app on the Arcana Mainnet, make sure that there exists a 'Mainnet' configuration profile for the 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 while integrating the app with the Arcana Auth SDK. While creating a new AuthProvider, do remember to update your integration code with the new Client ID that is assigned to the 'Mainnet' configuration profile.

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,
  setWindowProvider: true,
  debug: true,
  position: 'right',
  theme: 'dark',
});

Initialize the newly created AuthProvider before adding code in the integrated app to onboard users.

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

Only authenticated users are allowed to sign blockchain transactions and perform Web3 wallet operations using the Arcana wallet. To onboard app users, developers can use plug-and-play auth via connect method or build custom login UI by plugging in Arcana Auth SDK loginWithSocial and loginWithLink methods. For details, see how to onboard users. You can also plug in additional business logic and utilize the Arcana wallet programmatically for allowing authenticated users to sign blockchain transactions.

Run your App

After registering the app, configuring it for the 'Mainnet' configuration profile, integrating the app with the Arcana Auth SDK by using the 'Mainnet' Client ID, and finally adding code to onboard users, other business logic, your app is ready to be deployed. Bring up the app and allow users to log in and use Arcana Mainnet.

An authenticated app user will see the following wallet UI when using the Arcana Mainnet.

Monitor Mainnet Usage

Visit the app dashboard screen to view the 'Mainnet' configuration profile and monitor Arcana 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.

The figure below shows one new user for the test app deployed on Mainnet.

That is all!

See Also

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