UI developer guide

[2byrds]

Integration guide from the UI developers PoV.

[2byrds]

@HunnySajid will show how to migrate from the default white labeling (KERI based) to a customization (using Provenant colors, etc) as a vendor provided example.

[2byrds]

@HunnySajid i forgot to include the link to the provenant.net theming here: https://provenant.net/

[HunnySajid]

@2byrds @rodolfomiranda

UI Developer | Vendor JSON Guide

JSON Link: https://www.npoint.io/docs/d59bd3ab0b31de863a20
Following is the JSON structure

{
  "title": "Provenant",
  "logo": "https://media.licdn.com/dms/image/C4E0BAQG2_zXeSh-Qdw/company-logo_200_200/0/1663180132032/provenant_inc_logo?e=1715212800&v=beta&t=yINW7CaXVG50h3Ay7vu13OpY4mAu30qpijZwJAe5g-I",
  "icon":"https://cdn-icons-png.flaticon.com/128/3291/3291695.png",
  "theme": {
    "colors": {
      "primary": "#004DB5",
      "secondary": "#F0F6FF",
      "error": "#ec576d",
      "heading": "#004DB5",
      "text": "#333333",
      "subtext": "#004DB5",
      "white": "#ffffff",
      "black": "#373e49",
      "bodyBg": "#FBFBFB",
      "bodyBorder": "#004DB5",
      "bodyColor": "#004DB5",
      "cardColor": "#004DB5",
      "cardBg": "#E4F3FE"
    }
  }
}

title

This attribute is used to indicate the vendor name.

logo

This attribute is used to indicate the vendor icon.

title and logo are shown at:

• sign in

• top of the sidebar

• heading of content script dialog

icon

This attribute is used to set the icon provided by the vendor as extension icon.

theme

this attribute is the essence of colors (and others e.g. spacing, fonts, etc in the FUTURE) customization.
To keep it simplistic, the colors are designed to work in a two-tone fashion.

• bodyBg and bodyColor have been used for base colors of screens e.g. sign in, sidebar, and content-script dialog. These should be contrasting and complimenting as these are used for background and text respectively.
• primary is primarily used for buttons
• secondary is used as a contrasting color to make it distinct from bodyBg. It is used for the listings and modal background.
• cardColor and cardBg are used for the list items e.g. identifier card or credential card.
• heading, text, and subtext have been used for label and value pairs on each listing item.

JSON Theme Annotation

Sign in

Main View

Content Script Dialog

The following set of JSON can be analyzed as multiple vendors (use the bin link provided at the bottom of the page).

• https://www.npoint.io/docs/1d388b8942c4ec3ed763
• https://www.npoint.io/docs/a75a0383d2820a2153c1
• https://www.npoint.io/docs/d59bd3ab0b31de863a20

[2byrds]

Great job with the screenshots @HunnySajid !

[HunnySajid]

UI Developer | Web Client Guide

Installation

Install polaris-web from npm
npm install polaris-web --save

Usage

import following methods from polaris-web

import {
  requestAid, // call to select aid for signing in
  requestCredential, // call to select credential for signing in
  requestAidORCred, // call to select either aid of credential
  attemptAutoSignin, // call for auto signin
} from "polaris-web";

Usage requestAid

requestAid is usually called when authentication with AID is required, e.g:

<button onClick={requestAid}>Request AID</button>

Usage requestCredential

requestCredential is usually called when authentication with Credential is required, e.g:

<button onClick={requestCredential}>Request CREDENTIAL</button>

Usage requestAidORCred

requestAidORCred is usually called when authentication with either AID or Credential is required, e.g:

<button onClick={requestAidORCred}>Request AID or CREDENTIAL</button>

Usage attemptAutoSignin

attemptAutoSignin is called to auto-sign in with an already selected pair. The app asks to select one from the extension if there is no auto sign-in pair.

const handleAutoSignin = async () => {
    const resp = await attemptAutoSignin();
    if (resp?.data) {
       alert(
          "Signed headers received\n" +
            JSON.stringify(resp?.data.headers, null, 2)
       );
     }
  };  

[2byrds]

The web app developer guide should be at the root level of the Repo, and be called GETTING_STARTED_WEB_CLI.md. It should detail every part of the demonstration webapp that is necessary for a different web client developer to integrate and use the signify browser extenstion.
@HunnySajid will create another issue in this milestone to created a GETTING_STARTED_VENDOR.md that will detail the vendor customization of the extension and how they will provide it to to their customers. This should result in the extension looking like their vendor web app.

[HunnySajid]

Reviewed and merged with #90