![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@starport/vuex
Advanced tools
A library of Vuex 4 (for Vue 3) standard store modules for state management of cosmos-sdk chains' frontends
Readme
@starport/vuex
A collection of Vuex store modules to help build Ignite CLI front-end applications in combination with the Vue components library @starport/vue
.
Assuming you have a Vue 3 project, just run:
npm install --save vuex/next
npm install --save @starport/vuex
First you need to create a config file in your store root ./src/store/config.js
:
// import modules
import { env, starport, blocks, wallet, transfers } from '@starport/vuex'
// init modules you need
export default function init(store) {
transfers(store)
starport(store)
blocks(store)
env(store)
wallet(store)
}
Then, in your app's ./src/store/index.js
file:
import { createStore } from 'vuex'
import init from './config'
const store = createStore({
state() {
return {}
},
mutations: {},
actions: {}
})
// init @starport/vuex
init(store)
export default store
Finally, initialize the env
store by dispatching the init action in the appropriate part of your app:
await this.$store.dispatch('common/env/init')
or with a specific configuration:
await this.$store.dispatch('common/env/init', {
apiNode: 'http://localhost:1317',
rpcNode: 'http://localhost:26657',
wsNode: 'ws://localhost:26657/websocket',
chainId: 'my-chain',
addrPrefix: 'cosmos',
sdkVersion: 'Stargate',
getTXApi: 'http://localhost:26657/tx?hash=0x'
})
The registered modules for this package are:
Registered as common/env
, this module provides basic environment setup, connection to API, RPC, and WS nodes, connection statuses, and access to the underlying @starport/client-js
client.
// Getter signatures
getters: {
client: (state) => state.client,
signingClient: (state) => state.client.signingClient,
apiTendermint: (state) => state.rpcNode,
apiCosmos: (state) => state.apiNode,
apiWS: (state) => state.wsNode,
sdkVersion: (state) => state.sdkVersion,
apiConnected: (state) => state.apiConnected,
rpcConnected: (state) => state.rpcConnected,
wsConnected: (state) => state.wsConnected,
},
Registered as common/starport
, use this module if you are doing local development on a chain scaffolded with Ignite CLI. This module configures the env
module using the Ignite CLI :12345/status
endpoint.
Registered as common/blocks
, this module receives, stores, and decodes the latest 20 blocks (configurable) as they appear in the websocket API.
Get the latest 10 blocks:
await this.$store.getters['common/blocks/getBlocks'](10)
Get the block at height 15:
await this.$store.getters['common/blocks/getBlocks'](15)
Registered as common/transfers
, this module is a temporary handcoded version until an auto-generated (by Ignite CLI) vuex store is available for the Cosmos SDK TX module (https://github.com/cosmos/cosmos-sdk/tree/master/proto/cosmos/tx/v1beta1).
The querying action is:
ServiceGetTxsEvent({ commit, rootGetters }, { subscribe = false, all=true, ...key })
The getter is:
getGetTxsEvent(params)
So if you wanted to query for all token transfers received by cosmos1xv9tklw7d82sezh9haa573wufgy59vmwe6xxe5
, you would first dispatch the querying action like so:
await this.$store.dispatch('common/transfers/ServiceGetTxsEvent', {
subscribe: true,
event:
'transfer.recipient%3D%27cosmos1xv9tklw7d82sezh9haa573wufgy59vmwe6xxe5%27'
})
And access the resulting state anywhere in your app like so:
this.$store.getters['common/transfers/getGetTxsEvent']({
event:
'transfer.recipient%3D%27cosmos1xv9tklw7d82sezh9haa573wufgy59vmwe6xxe5%27'
})
To learn more about the WebSocket events you can query, see the Tendermint RPC WebSocket docs.
The subscribe
flag in the action dispatch configures auto-updates for the store as new transactions occur.
Registered as common/wallet
, this module provides wallet-handling, sign in and sign out fuctionalities, and encrypted persistence in the browser's local storage.
Creating a new wallet:
await this.$store.dispatch('common/wallet/createWalletWithMnemonic', {
name: "My Wallet",
mnemonic: "web fat decorate draw waste shiver toddler entire knee until board rent robust acid spatial hockey tobacco buddy buffalo flavor mass bridge report pioneer",
HDpath: "m/44'/118'/0'/0/", // BIP32/44 derivation path
prefix: "cosmos", // Address prfix for this chain
password: "password"
}
Listing wallets in local storage
const walletList = this.$store.common.wallet.wallets
Unlocking a specific wallet from the wallet list and logging in:
await this.$store.dispatch('common/wallet/unlockWallet', {
name: 'My Wallet',
password: 'password'
})
Accessing logged in and logged out status:
const loggedInStatus = this.$store.getters['common/wallet/loggedIn']
Signing out:
await this.$store.dispatch('common/wallet/signOut')
Adding next available account to the current wallet:
await this.$store.dispatch('common/wallet/addAccount')
Adding an account with a specific HD Path increment to the current wallet:
await this.$store.dispatch('common/wallet/addAccount', 3)
In this example, the wallet's HD path is assumed to be m/44'/118'/0'/0/
and adds the account corresponding to m/44'/118'/0'/0/3
.
Switch to using a different account in the current wallet, the account with this address must exist in the current wallet:
await this.$store.dispatch(
'common/wallet/switchAccount',
'cosmos1xv9tklw7d82sezh9haa573wufgy59vmwe6xxe5'
)
Accessing current wallet name:
const walletName = this.$store.getters['common/wallet/walletName']
Accessing name of last wallet used:
const lastWallet = this.$store.getters['common/wallet/lastWallet']
Accessing currently active unlocked wallet:
const wallet = this.$store.getters['common/wallet/wallet']
Accessing currently active address in wallet:
const address = this.$store.getters['common/wallet/address']
Inquiring if a wallet name is already in use:
const isAvailable =
this.$store.getters['common/wallet/nameAvailable'](walletNameToCheck)
FAQs
A library of Vuex 4 (for Vue 3) standard store modules for state management of cosmos-sdk chains' frontends
The npm package @starport/vuex receives a total of 1,600 weekly downloads. As such, @starport/vuex popularity was classified as popular.
We found that @starport/vuex demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.