Ixolist Sessions Widget

The package is a VueJS component capable of organizing blockchain authorization in a Quasar application with the ability to manage sessions

Installation

Use

npm i ixolist-sessions-widget

or

yarn add ixolist-sessions-widget

In-app installation

1. Create boot file with following code

import  plugin  from  "ixolist-sessions-widget";
export  default ({ app, store }) => {
  app.use(plugin, { store });
};

and connect it in quasar.config.js

boot: [
  *somewhere here*
],

2. In store/index.js you need to connect the internal storage of the component, it is called sessions

Example:

import { createStore } from "vuex";
import sessions from "ixolist-sessions-widget/src/store/sessions";
import  VuexPersistence  from  "vuex-persist";

export  const  Store = createStore({
  modules: {
    ...
    sessions
  },
  plugins: [new  VuexPersistence({ supportCircular:  true }).plugin],
  strict:  false,
});

export  default  function (/* { ssrContext } */) {
  return  Store;
}

3. Inside the component it will be connected like a regular VueJS component

import { IxolistSessionsWidget } from  "ixolist-sessions-widget";
components: {
  IxolistSessionsWidget,
},

and in the template

IxolistSessionsWidget(:networksList="you_networks_variable")

The networks array should consist of objects of the following type

Example:

[
  {
    label: "Jungle v.4",
    name: "jungle4",
    logo: "/assets/jungle4-logo.png",
    chainId: "73e4385a2708e6d7048834fbc1079f2fabb17b3c125b146af438971e90716c4d",
    nodeProtocol: "https",
    nodePort: 443,
    nodeHost: "jungle4.cryptolions.io",
    contractAccount: "icoicoicoic1",
    organizationsAccount: "orgorgorgorg",
    userContractAccount: "useruseruser",
    hyperionApi: "https://jungle4.cryptolions.io",
    explorerApiAccount: "https://jungle4.cryptolions.io/v2/explore/account/",
    explorerApiTransaction:
      "https://jungle4.cryptolions.io/v2/explore/transaction/",
    freeFaucetUrl: "https://monitor4.jungletestnet.io/",
    powerUpUrl: "https://monitor4.jungletestnet.io/#powerup"
  }
]

4. Translations

For the package to work correctly, you need to add the following translations to the i18n files of your application

en-US:

components: {
  sessions: {
    connectWallet: "Connect a Wallet",
    guestMode: "Guest mode",
    asAGuestYouHave:
      "As a guest you have full access to all content. However, you cannot participate until you connect.",
    supportedNetworks: "Supported Networks"
  }
}

ru:

components: {
  sessions: {
    connectWallet: "Подключить кошелек",
    guestMode: "Гостевой режим",
    asAGuestYouHave:
      "Будучи гостем, вы имеете полный доступ ко всему контенту. Однако вы не сможете участвовать, пока не подключитесь.",
    supportedNetworks: "Поддерживаемые сети"
  }
}

zh-CN:

components: {
  sessions: {
    connectWallet: "连接钱包",
    guestMode: "访客模式",
    asAGuestYouHave:
      "作为访客，您可以完全访问所有内容。但是，在连接之前您将无法参与",
    supportedNetworks: "支持的网络"
  }
}

Adviсe

Since the component contains its own store, it is important and necessary to link to it inside the application.

Briefly its structure looks like this

...
getters: {
  account: (state) =>  state.account,
  ualName: (state) =>  state.ualName,
  userData: (state) =>  state.userData,
  sessions: (state) =>  state.sessions,
  activeSession: (state) =>  state.activeSession,
  isAuthenticated: (state) =>  state.account !== null,
  networks: (state) => state.networks
}
...