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
}
...
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago