Skip to main content

dApp UI Templates

UI templates are small, focused HTML/CSS-based sample applications. These are meant to help developers quickly get started with building the dApp front-end and then integrate them with the Arcana SDKs.

For example, if you quickly wish to try out the dApp user onboarding feature of Arcana Auth SDK via Google OAuth, use the arcana-wallet template. Similarly, to see how passwordless login can be enabled for dApp users, you can pick up the passwordless-login template as the boilerplate code.

To use these templates, simply install and tweak a few settings such as your dApp-specific App Address. Refer to the installation and usage sections of the template for details.

Contents

info

In the future, we will be adding more such boilerplate HTML/CSS code samples.


Template: arcana-wallet

Introduction

The Arcana Wallet template uses HTML, CSS and plain vanilla JavaScript to put together very basic user interface for a dApp. Use this boilerplate code to quickly get started with a dApp that integrates with Arcana Auth SDK.

It demonstrates the following features of the Auth SDK:

  • Onboard dApp users using Google OAuth social authentication
  • Onboard dApp users via passwordless login

Setup Template

There are three parts to the setup. First you need to register your dApp with Arcana Developer Dashboard.

Second, you need to use Google Console and setup OAuth for your dApp.

Lastly, you need to obtain template sources from the GitHub repository, configure some settings and then serve the dApp locally on a configured port.

Configure dApp using Arcana Dashboard

  1. Go to Arcana developer dashboard:

    https://dashboard.beta.arcana.network

  2. Create a new dApp entry, specify storage region of choice and configure Google OAuth provider. Refer to dApp configuration guide and how to setup Google OAuth guide using Google Console in the Arcana documentation.

  3. After dApp configuration is saved, a new App Address is assigned to this new dApp entry in the dashboard. Note down the App Address displayed on the dashboard.

    App Address reference

Configure Template Source File

  1. Clone the sources using the repository:

    arcana-wallet

  2. Open the file index.js in the arcana-wallet template sources and enter the App Address in place of 'your-app-id'.

  3. Use the following installation instructions to setup dependencies locally.

    npm install
  4. Serve the HTML file using a local http server. Arcana SDK will be initialized and Arcana wallet will get initiated and appear on the webpage.

    npm run serve

Usage

In the source file package.json, by default, the template is configured to serve the HTML page at port 3000. You can change it to any other port and begin using the dApp.

note

While configuring Google OAuth on Google console, make sure that you set the JS origin to localhost:3000 or the port that you have specified in the package.json file.

tip

If you choose to configure a different OAuth provider for social authentication via Arcana Auth SDK, make sure that you set the provider's name in the Button text in the index.html file. Also, change the OAuth provider string passed to the loginWithSocial method in the index.js file.

For details, refer to the images below.

template config image 1 template config image 2


Template: passwordless-login

Introduction

The passwordless-login template uses HTML, CSS and plain vanilla JavaScript to put together very basic user interface for a dApp. Use this boilerplate code to quickly get started with a dApp that integrates with Arcana Auth SDK.

It demonstrates the following features of the Auth SDK:

  • Onboard dApp users using passwordless login

Setup Template

There are two parts to the setup. First you need to register your dApp with Arcana Developer Dashboard.

Next, you need to obtain template sources from the GitHub repository, configure some settings and then serve the dApp locally on a configured port.

Configure dApp using Arcana Dashboard

  1. Go to Arcana developer dashboard:

    https://dashboard.beta.arcana.network

  2. Create a new dApp entry, specify storage region of choice. Refer to dApp configuration guide in the Arcana documentation. In the Passwordless login section of the Auth tab, set your origin and the redirect URI as http://localhost:9000.

  3. Save the dApp configuration. A new App Address is assigned to this new dApp entry in the dashboard. Note down the App Address displayed on the dashboard.

    App Address reference

Configure Template Source File

  1. Clone the sources using the GitHub repository:

    passwordless-login

  2. Open the file script.js in the passwordless-login template sources and enter the App Address in place of 'your-app-id' in the AuthProvider.init method.

  3. Use the following installation instructions to setup dependencies locally.

    npm install
  4. Serve the HTML file using a local http server. Arcana SDK will be initialized and Arcana wallet will get initiated and appear on the webpage.

    npm run serve

Usage

In the source file package.json, by default, the template is configured to serve the HTML page at port 9000. You can change it to any other port and begin using the dApp.