ARCx
Search…
Passport.js
Display the ARCx DeFi Passport in your dApp.

Introduction

Passport.js is a small React.js component which displays a wallet's DeFi passport.

Install

Passport.js is available with both yarn and npm.
1
npm install @arcxmoney/passport-js --save
Copied!
1
yarn add @arcxmoney/passport-js
Copied!

Basic Usage

Once installed, import the Passport component and use it anywhere in your application.
Here is a basic example using the useWeb3React hook with the Passport component
1
import { Passport } from '@arcxmoney/passport-js';
2
import { useWeb3React } from '@web3-react/core'
3
4
const Page = () => {
5
const { account } = useWeb3React();
6
return (
7
<Layout>
8
<Passport account={account} />
9
</Layout>
10
);
11
}
Copied!

Additional Parameters

The only required parameter is account, all other properties are optional. Default values can be seen below:
1
<Passport
2
account= '0x123...123', //REQUIRED
3
width = 256,
4
height = 256,
5
position = 'fixed',
6
chainId = '1',
7
arcxUrl = 'https://api.arcx.money',
8
closable = true,
9
showSpinner = false,
10
analytics = true,
11
/>
Copied!

Passport Properties

Property
Type
Description
account
string
The associated address with a DeFi Passport. If an address does not have a DeFi Passport, the component will not display anything.
width
integer
The width of the component.
height
integer
The heigh of the component.
position
string
Behaviour of position:
  • fixed : Have the passport float in the lower right corner of the screen
  • flex : Display the passport where the component is placed.
chainId
string
Chain identifier of connected network.
arcxUrl
string
Endpoint to fetch passport metadata.
closeable
boolean
Allow the component to be dismissed.
showSpinner
boolean
Shows a loading animation (spinner) while the passport loads.
analytics
boolean
Participate in providing metrics to the ARCx engineering team.

How it works

If an address has no DeFi passport, nothing shall be shown.
This package simply fetches an address' information from our API and uses WebGL + CSS to wrap everything into a nice React.js component. It's a light-weight package to help with the integration of the DeFi Passport into any dApp which wants to integrate with us.

Help

If you have any questions or suggestions, we'd love your input on our discord server. Happy building! ノ

Changelog

As seen in npm registry.

[1.0.3] - 2021-10-18

  • Fixed issue with metrics tracking
  • Changed arcxUrl default value to stable endpoint

[1.0.2] - 2021-10-13

  • Added WebGL properties
  • Added cross-chain support

[1.0.1] - 2021-10-13

  • Fixed bug with the front image
  • Removed score on the back-side
  • Added ability to dismiss

[1.0.0] - 2021-10-08

  • Add package on NPM
Last modified 4d ago