1.2.3 • Published 8 months ago

ixolist-sessions-widget v1.2.3

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

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
}
...
1.2.3

8 months ago

1.2.2

11 months ago

1.2.1

11 months ago

1.2.0

11 months ago

1.1.1

11 months ago

1.1.0

11 months ago

1.0.10

11 months ago

1.0.9

11 months ago

1.0.8

11 months ago

1.0.7

11 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

1.0.0

11 months ago