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
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 contact@arianee.org)
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
hideattribute
<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}