Proton is a cryptocurrency public blockchain designed for consumer applications and seamless P2P payments which aims at maximizing payment acceptance speed by using identity verification mechanism.
Proton Web SDK – is one of the packages that gives developers the ability to create web applications to interact with Proton wallets. This SDK will facilitate the process of communication between the web application and the Proton wallet. This package allows to send requests to the wallet for user authentication and signatures.
npm
npm i @proton/web-sdk
yarn
yarn add @proton/web-sdk
ES6
importProtonWebSDKfrom'@proton/web-sdk'CommonJS
constProtonWebSDK=require('@proton/web-sdk')importProtonWebSDKfrom'@proton/web-sdk';letlink;letsession;constlogin=async(restoreSession)=>{const{link: localLink,session: localSession}=awaitProtonWebSDK({linkOptions: {
endpoints,
chainId,
restoreSession,},transportOptions: {requestAccount: appIdentifier},uiOptions: {theme: 'light',themes: {dark: {base: {textColorBase: 'black',textColorSecondary: '#6B727F',textColorLink: '#752EEB',bodyBackground: '#F4F7FA'},button: {primary: {backgroundHover: 'black',},},},},}})
link=localLinksession=localSession}
constlogout=async()=>{if(link&&session){awaitlink.removeSession(appIdentifier,session.auth,chainId);}session=undefined;link=undefined;}
consttransfer=async({ to, amount })=>{if(!session){thrownewError('No Session');}
returnawaitsession.transact({actions: [{/** * The token contract, precision and symbol for tokens can be seen at protonscan.io/tokens */
// Token contractaccount: "eosio.token",
// Action namename: "transfer",// Action parametersdata: {// Senderfrom: session.auth.actor,
// Receiverto: to,
// 4 is precision, XPR is symbolquantity: `${(+amount).toFixed(4)} XPR`,
// Optional memomemo: ""},authorization: [session.auth]}]},{broadcast: true})}
// Restore on refreshlogin(true)
The ProtonWebSDK Class takes three main types of option objects:
linkOptionstransportOptionsselectorOptionsuiOptions
A required object which includes all options for communication customization.
linkOptions:
endpoints – type array – required – an array of endpoints that an SDK will address to.
Only one endpoint is required. If more are provided, the SDK will use them as failover targets.
The SDK is able to automatically differentiate Mainnet and Testnet from the url
chainId – type string – optional – an Id or a PSR chain name to which the SDK being connected to. If not specified – it is automatically fetched by the JsonRpcApi from the endpoint provided.
usePulseVM - type boolean - optional - a flag to mark network as using PulseVM. Enables another implementation of JsonRpcApi
storage – type LinkStorage – optional – if not specified, the new Storage is automatically created. In order to customize Storage, you should provide a custom LinkStorage interface with type specifications inside.
storagePrefix – type string – optional – a custom SDK storage prefix which is prepended to the name of localStorage keys. If not specified, automatically prepends ‘proton-storage’ string.
restoreSession – type Boolean – optional – if contains
truevalue, prevents modal from popping up and makes SDK look for saved session value in the Storage. If not specified, automatically containsfalsevalue.
If you add https://rpc.api.testnet.metalx.com as an endpoint, SDK will switch the scheme variable to the test mode, and all requests will be handled via Testnet.
linkOptions: {endpoints: ['https://rpc.api.testnet.metalx.com']}
An object which contains all needed data for the client communication. If not specified an empty object will be provided for the SDK.
transportOptions:
- requestAccount – type string – optional – this field is used for identifying which account is requesting the client transaction. If no value provided, it will be replaced with the “Unknown Requestor” in the transaction request.
Typically same as appName
An optional object which includes options for the wallet selection.
selectorOptions:
- enabledWalletTypes - type stringp[] - optional - The list of enabled wallets. All wallets are enabled by default. Possible values: proton, webauth, anchor.
- walletType – type string – optional – The name of the wallet to use. In this case the wallet selector step will be skipped.
An object which includes style options for the wallet selection. If not specified the basic styling for the modal window will be provided.
uiOptions:
- theme - type string - optional - The name of the theme applied for the widget
- themes – type Object – optional – object which can includes options to configure or defined theme of the widget.
Check the
proton-web-rendererfolder for more info.
In order to install the Proton Web SDK and use it on your local environment for contribution or SDK source code improvement purposes, you should follow a few steps listed below:
- Open the Proton Web SDK github page and clone the repository by using
git clone [https://github.com/ProtonProtocol/ProtonWeb.git]
For now the project uses Node v18.19.1 for development. You can use NVM to switch to this version. The version is set in .nvmrc file. Run command nvm use in the root folder to activate it.
pnpm i
To build all apps and packages, run the following command:
pnpm run build
pnpm run publish-packages
The changes are tagged automatically during publish-packages command run. But all these tags are created in the local repo.
It is required to push these tags to the repo:
To do it you can use the following command: git push origin --tags
Or the usual push of changes can be used with specific flag: git push --follow-tags