@arianee/arianee-wallet

v1.43.0

Published

a year ago

arianee web component wallet

Downloads

887

0High
0Medium
0Low

Arianee-Wallet

Arianee-Wallet is a universal UI tool kit to implement easily and quickly Arianee NFT in your web-site. Today arianee-passport is the only web-component available.

Compatible with:

[x] Reactjs
[x] Angular
[x] VueJS
[x] HTML
[x] JQuery
[ ] COBOL

demo

How to install ?

using npm

npm install @arianee/arianee-wallet

<html>
  <head>
    <script type="text/javascript" src="./node_modules/@arianee/arianee-wallet/arianee-wallet.js"></script>
    ...

or add directly our unpkg link

<html>
<header>
  <script src="https://unpkg.com/@arianee/arianee-wallet/arianee-wallet.js"></script>
  ...

Arianee-Passport

The Arianee-Passport is a web-component which can be implemented in any web front-end project.

How it works ?

Append arianee-passport component to the document.

certificate-id: the Certificate ID to be displayed (REQUIRED)

auth: JWT (REQUIRED)

passphrase: Certificate's passphrase

A valid JWT must include 2 proprieties :

ID (in uppercase) : a unique id representing a user. It should not be a personal data as an email, or hash of an email. It is recommended to be a random string in order to comply to personal data laws.
exp : a timestamp defining when JWT will expire.

Who is an authorized JWT signer authority?

testnet : anyone can sign jwt
mainnet : only authorized public key (please contact us [email protected])

Example:

<body>

  <arianee-passport
    passphrase="{{pass}}"
    certificate-id="{{id}}"
    auth="{{jwt}}"
  ></arianee-passport>

</body>

Custom Style

ArianeeWalletStyleConfig {
  fontFamily?: string;
  buttons?: {
    color?: string;
    bgColor?: string;
    bgHoverColor?: string;
    textHoverColor?: string;
  };
  modal?: {
    bgColor?: string;
    borderColor?: string;
    titleColor?: string;
    textColor?: string;
  },
  spinnerColor?: string;
}

Example:

window.arianeeWalletStyle = {
    fontFamily: '"Roboto","Helvetica Neue",sans-serif',
    buttons: {
      color: '#222',
      bgColor: '#fec42e',
      bgHoverColor: '#e8ae16',
      textHoverColor: '#222'
    },
    modal: {
      borderColor: '#fec42e',
      titleColor: 'yellow'
    }
};

Change NETWORK

enum NETWORK {
  testnet = "testnet",
  mainnet = "mainnet",
  arianeeTestnet = "arianeetestnet",
  mumbai = "mumbai",
  polygon = "polygon"
}

if network is not defined, testnet is set by default

Example:

window.network = 'mainnet';

Languages

To pass languages, pass as a string a list of languages separted with a comma.

<arianee-passport languages='fr,en-US,es'></arianee-passport>

Can I use my own UI ?

arianee passport UI can be disabled, you can access all the available features programmatically

Example:

Add the passport to your document with the hide attribute

<arianee-passport
  id="passport"
  hide="true"
  passphrase="{{pass}}"
  certificate-id="{{id}}"
  auth="{{token}}"
></arianee-passport>

use the Element to access the exposed Promise getMethods

async function test() {
  // loading = true
  const passport = document.getElementById('passport');
  const methods = await passport.getMethods();
  methods.openAuthenticityModal();
  // loading = false
}

await passport.getMethods() is Singleton the request will be made only the first time. it's recommended to call it each time you ask for a Modal or data like the example below

async function Authenticity() {
  // loading = true
  const passport = document.getElementById('passport');
  const methods = await passport.getMethods();
  methods.openAuthenticityModal();
  // loading = false
}
		
async function share() {
  // loading = true
  const passport = document.getElementById('passport');
  const methods = await passport.getMethods();
  methods.openSharePassportModal();
  // loading = false
}
		
async function transfer() {
  // loading = true
  const passport = document.getElementById('passport');
  const methods = await passport.getMethods();
  methods.openTransferPassportModal();
  // loading = false
}

all the features provided by the passport:

wallet: ArianeeWallet

certSummary: CertificateSummary

Open Verify Authenticity Modal

openAuthenticityModal(): void

Open History Modal

openHistoryModal(): void

Open Share Passport Modal

openSharePassportModal(): void

Open Transfer Passport Modal

openTransferPassportModal(): void

Arianee API

arianee-passport web component exposes arianee api methods

owner of

ownerOf(certificateId): {address:string, isOwner:boolean, hasOwner:boolean}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Arianee-Wallet

How to install ?

Arianee-Passport

How it works ?

Custom Style

Change NETWORK

Languages

Can I use my own UI ?

all the features provided by the passport:

Arianee API