ixolist-sessions-widget v1.2.3
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
}
...