From ded77eaeb59faaadb428344cc42ecb0673d5210a Mon Sep 17 00:00:00 2001 From: roiLeo Date: Thu, 2 Dec 2021 14:59:58 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=94=20refactoring=20store?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/accounts/utils.ts | 2 +- components/metadata/Metadata.vue | 4 +- components/rmrk/Create/PermaMint.vue | 2 +- components/rmrk/Create/SimpleMint.vue | 4 +- components/rmrk/Gallery/History.vue | 2 +- components/rmrk/Gallery/Layout.vue | 2 +- components/series/utils.ts | 2 +- .../settings/SettingChooserExplorer.vue | 6 +- components/shared/AddressInput.vue | 2 +- components/shared/SwitchLocale.vue | 10 +- components/shared/format/Money.vue | 39 ++-- components/shared/format/Percent.vue | 2 +- components/shared/wrapper/IndexerGuard.vue | 7 +- components/spotlight/utils.ts | 2 +- components/transfer/Transfer.vue | 12 +- i18n.ts | 2 +- layouts/default.vue | 45 +---- store/chain.ts | 25 +++ store/explorer.ts | 30 +++ store/fiat.ts | 34 ++++ store/index.ts | 178 +----------------- store/indexer.ts | 64 +++++++ store/lang.ts | 130 +++++++++++++ store/preferences.ts | 23 +++ utils/WithKeyring.ts | 2 +- utils/account.ts | 6 +- utils/mixins/chainMixin.ts | 2 +- utils/mixins/indexerMixin.ts | 2 +- utils/support.ts | 8 +- 29 files changed, 374 insertions(+), 275 deletions(-) create mode 100644 store/chain.ts create mode 100644 store/explorer.ts create mode 100644 store/fiat.ts create mode 100644 store/indexer.ts create mode 100644 store/lang.ts create mode 100644 store/preferences.ts diff --git a/components/accounts/utils.ts b/components/accounts/utils.ts index a9acc9eb15..cd8fb49178 100644 --- a/components/accounts/utils.ts +++ b/components/accounts/utils.ts @@ -18,7 +18,7 @@ export const toDistribute = (length: number, distribution: number): number => { } export const parseBatchAddresses = (batchAddresses: string): string[] => { - const ss58Format: any = store.getters.getChainProperties58Format + const ss58Format: any = store.getters['chain/getChainProperties58Format'] const addresses = batchAddresses .split('\n') .map((x) => x.split('-')) diff --git a/components/metadata/Metadata.vue b/components/metadata/Metadata.vue index 914f8874cb..9ac9fb32ef 100644 --- a/components/metadata/Metadata.vue +++ b/components/metadata/Metadata.vue @@ -46,9 +46,9 @@ export default class Summary extends Vue { public chainProperties: any = this.emptyChainProperties; public loading = false; - @Watch('$store.state.chainProperties') + @Watch('$store.state["chain/chainProperties"]') public mapProp(): void { - this.chainProperties = {...this.emptyChainProperties, ...this.$store.state.chainProperties} + this.chainProperties = {...this.emptyChainProperties, ...this.$store.state['chain/chainProperties']} } @Watch('$store.state.loading') diff --git a/components/rmrk/Create/PermaMint.vue b/components/rmrk/Create/PermaMint.vue index ebcf289074..68d80b63b9 100644 --- a/components/rmrk/Create/PermaMint.vue +++ b/components/rmrk/Create/PermaMint.vue @@ -372,7 +372,7 @@ export default class PermaMint extends mixins( } get chainProperties() { - return this.$store.getters.getChainProperties + return this.$store.getters['chain/getChainProperties'] } get decimals(): number { diff --git a/components/rmrk/Create/SimpleMint.vue b/components/rmrk/Create/SimpleMint.vue index 3fff672a98..b45ed95cd2 100644 --- a/components/rmrk/Create/SimpleMint.vue +++ b/components/rmrk/Create/SimpleMint.vue @@ -186,7 +186,7 @@ tooltipsize="is-large" > @@ -617,7 +617,7 @@ export default class SimpleMint extends mixins( } get chainProperties() { - return this.$store.getters.getChainProperties + return this.$store.getters['chain/getChainProperties'] } get decimals(): number { diff --git a/components/rmrk/Gallery/History.vue b/components/rmrk/Gallery/History.vue index 3fd5ff8c77..d7e825a7f3 100644 --- a/components/rmrk/Gallery/History.vue +++ b/components/rmrk/Gallery/History.vue @@ -203,7 +203,7 @@ export default class History extends mixins(ChainMixin) { protected getBlockUrl(block: string): string { return urlBuilderBlockNumber( block, - this.$store.getters.getCurrentChain, + this.$store.getters['explorer/getCurrentChain'], 'subscan' ); } diff --git a/components/rmrk/Gallery/Layout.vue b/components/rmrk/Gallery/Layout.vue index ae146bb5c7..41afafac17 100644 --- a/components/rmrk/Gallery/Layout.vue +++ b/components/rmrk/Gallery/Layout.vue @@ -41,7 +41,7 @@ export default class Layout extends Vue { public layout = 'is-one-third-desktop is-one-third-tablet' public onInputChange (data :string) { - this.$store.dispatch('setLayoutClass', data) + this.$store.dispatch('preferences/setLayoutClass', data) } } diff --git a/components/series/utils.ts b/components/series/utils.ts index dc5c7ad3ab..a26a63d123 100644 --- a/components/series/utils.ts +++ b/components/series/utils.ts @@ -59,7 +59,7 @@ export const nftFn = (a: any): RowSeries => { } } -const tokenDecimals = store.getters.getChainPropertiesTokenDecimals as any +const tokenDecimals = store.getters['chain/getChainPropertiesTokenDecimals'] as any const formatNumber = (val: SimpleSeriesNFT) => Number( formatBalance( diff --git a/components/settings/SettingChooserExplorer.vue b/components/settings/SettingChooserExplorer.vue index bafcbded70..f87511d770 100644 --- a/components/settings/SettingChooserExplorer.vue +++ b/components/settings/SettingChooserExplorer.vue @@ -31,11 +31,11 @@ export default class SettingChooserExplorer extends Vue { @Prop() public addMethod!: string; get options() { - return this.$store.state.explorerOptions.availableOptions[this.selector] + return this.$store.state['explorer/explorerOptions'].availableOptions[this.selector] } get selected() { - return this.$store.state.explorerOptions.availableOptions[this.selector][this.defaultValue].value + return this.$store.state['explorer/explorerOptions'].availableOptions[this.selector][this.defaultValue].value } set selected(value) { @@ -43,7 +43,7 @@ export default class SettingChooserExplorer extends Vue { } public async mounted() { - this.$store.commit('setExplorerOptions',{ availableOptions: { + this.$store.dispatch('explorer/setExplorerOptions', { availableOptions: { provider: [ { text: 'Subscan', value: 'subscan' }, { text: 'Polkascan', value: 'polkascan'} diff --git a/components/shared/AddressInput.vue b/components/shared/AddressInput.vue index 21c8a730dd..a73d9042bb 100644 --- a/components/shared/AddressInput.vue +++ b/components/shared/AddressInput.vue @@ -53,7 +53,7 @@ export default class AddressInput extends Vue { } get ss58Format(): number { - return this.$store.getters.getChainProperties?.ss58Format + return this.$store.getters['chain/getChainProperties58Format'] } } diff --git a/components/shared/SwitchLocale.vue b/components/shared/SwitchLocale.vue index e0f2270814..0e00b06a98 100644 --- a/components/shared/SwitchLocale.vue +++ b/components/shared/SwitchLocale.vue @@ -30,20 +30,20 @@ import { Component, Vue } from 'nuxt-property-decorator' export default class LocaleChanger extends Vue { get langsFlags(): string { - return this.$store.getters.getLangsFlags + return this.$store.getters['lang/getLangsFlags'] } get userFlag(): string { - return this.$store.getters.getUserFlag + return this.$store.getters['lang/getUserFlag'] } get userLang(): string { - this.$i18n.locale = this.$store.getters.getUserLang - return this.$store.getters.getUserLang + this.$i18n.locale = this.$store.getters['lang/getUserLang'] + return this.$store.getters['lang/getUserLang'] } setUserLang(value: string) { - this.$store.commit('setLanguage', { 'userLang': value}) + this.$store.dispatch('lang/setLanguage', { 'userLang': value}) this.$i18n.locale = value } } diff --git a/components/shared/format/Money.vue b/components/shared/format/Money.vue index 35e9cbb5c4..c5202e2baa 100644 --- a/components/shared/format/Money.vue +++ b/components/shared/format/Money.vue @@ -23,7 +23,7 @@ export default class Money extends Vue { private fiatValue = 0 get chainProperties() { - return this.$store.getters.getChainProperties + return this.$store.getters['chain/getChainProperties'] } get decimals(): number { @@ -41,26 +41,27 @@ export default class Money extends Vue { } private async getFiatValue() { - try { - const price = this.$store.state.fiatPrice[this.coinId][this.showFiatValue] + // TODO: unused, should fetch store fiat/ + // try { + // const price = this.$store.state.fiatPrice[this.coinId][this.showFiatValue] - if (price) { - this.fiatValue = price * Number(this.value) - } else { - const { data } = await coingecko.get('/simple/price', { - params: { - ids: this.coinId, - vs_currencies: this.showFiatValue - } - }) + // if (price) { + // this.fiatValue = price * Number(this.value) + // } else { + // const { data } = await coingecko.get('/simple/price', { + // params: { + // ids: this.coinId, + // vs_currencies: this.showFiatValue + // } + // }) - // 420 * 10 ** 12 - this.fiatValue = data[this.coinId][this.showFiatValue] * Number(this.value) - this.$store.dispatch('setFiatPrice', data) - } - } catch (error) { - console.log(error) - } + // // 420 * 10 ** 12 + // this.fiatValue = data[this.coinId][this.showFiatValue] * Number(this.value) + // this.$store.dispatch('fiat/fetchFiatPrice', data) + // } + // } catch (error) { + // console.log(error) + // } } } diff --git a/components/shared/format/Percent.vue b/components/shared/format/Percent.vue index 9e641998b2..00df5e1ea2 100644 --- a/components/shared/format/Percent.vue +++ b/components/shared/format/Percent.vue @@ -10,7 +10,7 @@ export default class Money extends Vue { @Prop({default: 0}) readonly value: number | string | undefined; get chainProperties() { - return this.$store.getters.getChainProperties + return this.$store.getters['chain/getChainProperties'] } } diff --git a/components/shared/wrapper/IndexerGuard.vue b/components/shared/wrapper/IndexerGuard.vue index 1f93793da8..119564a9e9 100644 --- a/components/shared/wrapper/IndexerGuard.vue +++ b/components/shared/wrapper/IndexerGuard.vue @@ -16,9 +16,12 @@ import { Component, mixins, Prop } from 'nuxt-property-decorator' @Component export default class EmptyGuard extends mixins(IndexerMixin) { - @Prop(Boolean) public showMessage!: boolean; - // @Prop({ type: String, default: 'indexer.sick' }) public showMessage!: string; + @Prop(Boolean) public showMessage!: boolean; + // @Prop({ type: String, default: 'indexer.sick' }) public showMessage!: string; + public mounted() { + this.$store.dispatch('indexer/fetchIndexer') + } } diff --git a/components/spotlight/utils.ts b/components/spotlight/utils.ts index b59b66b381..315c044bc2 100644 --- a/components/spotlight/utils.ts +++ b/components/spotlight/utils.ts @@ -31,7 +31,7 @@ export const nftFn = (a: any): Row => { } } -const tokenDecimals = store.getters.getChainPropertiesTokenDecimals as any +const tokenDecimals = store.getters['chain/getChainPropertiesTokenDecimals'] as any const formatNumber = (val: SimpleSpotlightNFT) => Number(formatBalance(val.price, tokenDecimals, false, true)) const sumFn = (acc: number, val: SimpleSpotlightNFT) => { return acc + formatNumber(val) diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue index 28e05d6f53..31db4cb6b3 100644 --- a/components/transfer/Transfer.vue +++ b/components/transfer/Transfer.vue @@ -27,7 +27,7 @@ ${{ $store.getters.getCurrentKSMValue }} + >${{ $store.getters['fiat/getCurrentKSMValue'] }} @@ -198,14 +198,14 @@ export default class Transfer extends mixins( } protected created() { - this.$store.dispatch('fetchFiatPrice') + this.$store.dispatch('fiat/fetchFiatPrice') this.checkQueryParams() } protected onAmountFieldChange() { /* calculating usd value on the basis of price entered */ if (this.price) { - this.usdValue = calculateUsdFromKsm(this.$store.getters.getCurrentKSMValue, this.price) + this.usdValue = calculateUsdFromKsm(this.$store.getters['fiat/getCurrentKSMValue'], this.price) } else { this.usdValue = 0 } @@ -214,7 +214,7 @@ export default class Transfer extends mixins( protected onUSDFieldChange() { /* calculating price value on the basis of usd entered */ if (this.usdValue) { - this.price = calculateKsmFromUsd(this.$store.getters.getCurrentKSMValue, this.usdValue) + this.price = calculateKsmFromUsd(this.$store.getters['fiat/getCurrentKSMValue'], this.usdValue) } else { this.price = 0 } @@ -239,7 +239,7 @@ export default class Transfer extends mixins( if (query.usdamount) { this.usdValue = Number(query.usdamount) // getting ksm value from the usd value - this.price = calculateKsmFromUsd(this.$store.getters.getCurrentKSMValue, this.usdValue) + this.price = calculateKsmFromUsd(this.$store.getters['fiat/getCurrentKSMValue'], this.usdValue) } } @@ -310,7 +310,7 @@ export default class Transfer extends mixins( protected getUrl(): string { return urlBuilderTransaction(this.transactionValue, - this.$store.getters.getCurrentChain, 'subscan') + this.$store.getters['explorer/getCurrentChain'], 'subscan') } protected getExplorerUrl(): void { diff --git a/i18n.ts b/i18n.ts index ff8d25c05d..9f8d0dbae5 100644 --- a/i18n.ts +++ b/i18n.ts @@ -27,7 +27,7 @@ function loadLocaleMessages(): LocaleMessages { return messages; } -// const locale = store.getters.getUserLang; +// const locale = store.getters['lang/getUserLang']; export default new VueI18n({ locale: process.env.VUE_APP_I18N_LOCALE || 'en', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', diff --git a/layouts/default.vue b/layouts/default.vue index ed8de58fb0..c454b61005 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -21,7 +21,6 @@ import { cryptoWaitReady } from '@polkadot/util-crypto' import keyring from '@polkadot/ui-keyring' import isShareMode from '@/utils/isShareMode' import correctFormat from '@/utils/ss58Format' -import checkIndexer from '@/queries/checkIndexer.graphql' @Component({ metaInfo() { @@ -40,7 +39,7 @@ import checkIndexer from '@/queries/checkIndexer.graphql' }) export default class Dashboard extends Vue { get chainProperties() { - return this.$store.getters.getChainProperties + return this.$store.getters['chain/getChainProperties'] } get ss58Format(): number { @@ -60,54 +59,14 @@ export default class Dashboard extends Vue { await cryptoWaitReady() console.log('wasmCrypto loaded') this.loadKeyring() - this.$store.commit('keyringLoaded') + this.$store.commit('keyringLoaded') // TODO: refact to dispatch and move outside } public mounted(): void { this.mountWasmCrypto() - this.fetchIndexer() this.checkVersion() } - private async fetchIndexer() { - try { - const indexer = this.$apollo.query({ - query: checkIndexer - }) - - const { - data: { _meta: data } - } = await indexer - - console.log( - ` - %cIndexer: - Health: ${data?.indexerHealthy ? '❤️' : '💀'} - Last: ${new Date(Number(data?.lastProcessedTimestamp))} - `, - 'background: #222; color: #bada55; padding: 0.3em' - ) - this.$store.dispatch('upateIndexerStatus', data) - } catch (error) { - const type = { - indefinite: true, - position: 'is-top-right', - message: ` -

Indexer Error

-

Indexer is not working properly - and you can check the status here

-

If you think this should't happen, report us by - creating bug issue with steps to reproduce and screenshot.

- `, - type: 'is-danger', - hasIcon: true - } - this.$buefy.snackbar.open(type as any) - // this.$router.push({ name: 'error' }); - console.warn('Do something', error) - } - } - private async checkVersion() { //@ts-ignore const workbox = await window.$workbox; diff --git a/store/chain.ts b/store/chain.ts new file mode 100644 index 0000000000..5ab0896ebe --- /dev/null +++ b/store/chain.ts @@ -0,0 +1,25 @@ +import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex' + +export const state = () => ({ + chainProperties: {}, +}) + +export type ChainState = ReturnType; + +export const getters: GetterTree = { + getChainProperties: ({ chainProperties }: any ) => chainProperties, + getChainProperties58Format: ({ chainProperties }: any ) => chainProperties.ss58Format, + getChainPropertiesTokenDecimals: ({ chainProperties }: any ) => chainProperties.tokenDecimals, +}; + +export const mutations: MutationTree = { + SET_CHAIN_PROPERTIES(state: any, data: any) { + state.chainProperties = Object.assign({}, data) + }, +}; + +export const actions: ActionTree = { + setChainProperties({ commit }: { commit: Commit }, data: any) { + commit('SET_CHAIN_PROPERTIES', data); + }, +}; diff --git a/store/explorer.ts b/store/explorer.ts new file mode 100644 index 0000000000..36daae5961 --- /dev/null +++ b/store/explorer.ts @@ -0,0 +1,30 @@ +import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex' + +export const state = () => ({ + explorer: {}, + explorerOptions: {}, +}) + +export type ExplorerState = ReturnType + +export const getters: GetterTree = { + getCurrentChain: ({ explorer }: any) => explorer.chain, +}; + +export const mutations: MutationTree = { + SET_EXPLORER(state: any, data: any) { + state.explorer = Object.assign(state.explorer, data); + }, + SET_EXPLORER_OPTIONS(state: any, data: any) { + state.explorerOptions = Object.assign({}, data); + }, +}; + +export const actions: ActionTree = { + setExplorer({ commit }: { commit: Commit }, data: any) { + commit('SET_EXPLORER', data); + }, + setExplorerOptions({ commit }: { commit: Commit }, data: any) { + commit('SET_EXPLORER_OPTIONS', data); + }, +}; diff --git a/store/fiat.ts b/store/fiat.ts new file mode 100644 index 0000000000..8e08b52f71 --- /dev/null +++ b/store/fiat.ts @@ -0,0 +1,34 @@ +import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex' +import { getKsmPrice } from '@/coingecko' + +export const state = () => ({ + fiatPrice: { + kusama: { + usd: null, + }, + }, +}) + +export type FiatState = ReturnType + +export const getters: GetterTree = { + getCurrentKSMValue: (state) => state.fiatPrice.kusama.usd, +} + +export const mutations: MutationTree = { + SET_FIAT_PRICE(state, data: any) { + state.fiatPrice = Object.assign({}, state.fiatPrice, data) + // or + // state.fiatPrice = data + }, +} + +export const actions: ActionTree = { + async fetchFiatPrice({ commit }: { commit: Commit }) { + const ksmPrice = await getKsmPrice() + commit('SET_FIAT_PRICE', ksmPrice) + }, + setFiatPrice({ commit }: { commit: Commit }, data: any) { + commit('SET_FIAT_PRICE', data) + }, +} diff --git a/store/index.ts b/store/index.ts index d208d6c383..85158841dd 100644 --- a/store/index.ts +++ b/store/index.ts @@ -1,8 +1,6 @@ import VuexPersist from 'vuex-persist' import Connector from '@vue-polkadot/vue-api' import correctFormat from '@/utils/ss58Format' -import { getKsmPrice } from '@/coingecko' -import { Commit } from 'vuex' const vuexLocalStorage = new VuexPersist({ key: 'vuex', @@ -22,7 +20,7 @@ const apiPlugin = (store: any) => { const {genesisHash} = api console.log('[API] Connect to <3', store.state.setting.apiUrl, { chainSS58, chainDecimals, chainTokens, genesisHash}) - store.commit('setChainProperties', { + store.dispatch('chain/setChainProperties', { ss58Format: correctFormat(chainSS58), tokenDecimals: chainDecimals[0] || 12, tokenSymbol: chainTokens[0] || 'Unit', @@ -32,7 +30,7 @@ const apiPlugin = (store: any) => { const nodeInfo = store.getters.availableNodes .filter((o:any) => o.value === store.state.setting.apiUrl) .map((o:any) => {return o.info})[0] - store.commit('setExplorer', { 'chain': nodeInfo }) + store.dispatch('explorer/setExplorer', { 'chain': nodeInfo }) }) Api().on('error', async (error: Error) => { store.commit('setError', error) @@ -54,154 +52,20 @@ const myPlugin = (store: any) => { }) } -// TODO: create instance of Texitle here as plugin - - export const state = () => ({ loading: false, keyringLoaded: false, chainProperties: {}, - explorer: {}, - lang: {}, - indexer: { - indexerHealthy: true, - lastProcessedHeight: undefined, - lastProcessedTimestamp: undefined, - }, - language: { - userLang: process.env.VUE_APP_I18N_LOCALE || 'en', - langsFlags: [ - { - value: 'en', - flag: '🇬🇧', - label: 'English' - }, - { - value: 'bn', - flag: '🇧🇩', - label: 'বাংলা' - }, - { - value: 'cn', - flag: '🇨🇳', - label: '中文' - }, - { - value: 'cz', - flag: '🇨🇿', - label: 'Česky' - }, - { - value: 'es', - flag: '🇪🇸', - label: 'Español' - }, - { - value: 'fr', - flag: '🇫🇷', - label: 'Français' - }, - { - value: 'jp', - flag: '🇯🇵', - label: '日本語' - }, - { - value: 'ko', - flag: '🇰🇷', - label: '한국어' - }, - { - value: 'nl', - flag: '🇳🇱', - label: 'Vlaams' - }, - { - value: 'pl', - flag: '🇵🇱', - label: 'Polski' - }, - { - value: 'pt', - flag: '🇵🇹', - label: 'Português' - }, - { - value: 'sk', - flag: '🇸🇰', - label: 'Slovenčina' - }, - { - value: 'tu', - flag: '🇹🇷', - label: 'Türkçe' - }, - { - value: 'ur', - flag: '🇵🇰', - label: 'اردو' - }, - { - value: 'vt', - flag: '🇻🇳', - label: 'Tiếng Việt' - }, - { - value: 'ru', - flag: '🇷🇺', - label: 'Русский' - }, - // { - // value: 'de', - // flag: '🇩🇪', - // label: 'Deutsch' - // }, - // { - // value: 'ua', - // flag: '🇺🇦', - // label: 'Українська' - // }, - // { - // value: 'it', - // flag: '🇮🇹', - // label: 'Italiano' - // }, - // { - // value: 'hi', - // flag: '🇮🇳', - // label: 'हिन्दी' - // } - ] - }, - explorerOptions: {}, development: {}, error: null, - fiatPrice: { - kusama: { - usd: null - } - }, - layoutClass: 'is-one-third-desktop is-one-third-tablet' }) export const mutations = { keyringLoaded(state: any) { state.keyringLoaded = true }, - setChainProperties(state: any, data : any) { - state.chainProperties = Object.assign({}, data) - }, setDevelopment(state: any, data : any) { state.development = Object.assign(state.development, data) }, - setExplorer(state: any, data : any) { - state.explorer = Object.assign(state.explorer, data) - }, - setLanguage(state: any, data : any) { - state.language = Object.assign(state.language, data) - }, - setExplorerOptions(state: any, data : any) { - state.explorerOptions = Object.assign({}, data) - }, setLoading(state: any, toggleTo: boolean) { state.loading = toggleTo }, @@ -209,44 +73,10 @@ export const mutations = { state.loading = false state.error = error.message }, - setFiatPrice(state: any, data : any) { - state.fiatPrice = Object.assign({}, state.fiatPrice, data) - }, - setIndexerStatus(state: any, data : any) { - state.indexer = Object.assign({}, state.indexer, data) - }, - setLayoutClass(state: any, data) { - state.layoutClass = data - }, } -export const actions = { - async fetchFiatPrice({ commit }: { commit: Commit }) { - const ksmPrice = await getKsmPrice() - commit('setFiatPrice', ksmPrice) - }, - setFiatPrice({ commit }: { commit: Commit }, data : any) { - commit('setFiatPrice', data) - }, - upateIndexerStatus({ commit }: { commit: Commit }, data : any) { - commit('setIndexerStatus', data) - }, - setLayoutClass({ commit }: { commit: Commit }, data) { - commit('setLayoutClass', data) - }, -} +export const actions = {} -export const getters = { - getChainProperties: ({ chainProperties } : any ) => chainProperties, - getChainProperties58Format: ({ chainProperties } : any ) => chainProperties.ss58Format, - getChainPropertiesTokenDecimals: ({ chainProperties } : any ) => chainProperties.tokenDecimals, - getUserLang: ({ language } : any) => language.userLang || 'en', - getLangsFlags: ({ language } : any) => language.langsFlags, - getUserFlag: ({ language } : any) => language.langsFlags.find((lang: {value: string}) => lang.value === language.userLang).flag, - getCurrentKSMValue: ({ fiatPrice } : any) => fiatPrice['kusama']['usd'], - getCurrentChain: ({ explorer } : any) => explorer.chain, - getIndexer: ({ indexer } : any) => indexer, - getLayoutClass: ({ layoutClass }) => layoutClass, -} +export const getters = {} export const plugins = [vuexLocalStorage.plugin, apiPlugin, myPlugin ] diff --git a/store/indexer.ts b/store/indexer.ts new file mode 100644 index 0000000000..995355c574 --- /dev/null +++ b/store/indexer.ts @@ -0,0 +1,64 @@ +import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex' +import checkIndexer from '@/queries/checkIndexer.graphql' + +export const state = () => ({ + indexer: { + keyringLoaded: false, + indexerHealthy: true, + lastProcessedHeight: undefined, + lastProcessedTimestamp: undefined, + }, +}) + +export type IndexerState = ReturnType + +export const getters: GetterTree = { + getIndexer: ({ indexer }: any) => indexer, +} + +export const mutations: MutationTree = { + SET_INDEXER_STATUS(state: any, data: any) { + state.indexer = Object.assign({}, state.indexer, data) + }, +} + +export const actions: ActionTree = { + async fetchIndexer({ commit }: { commit: Commit }) { + try { + const indexer = await this.app.apolloProvider?.defaultClient.query({ + query: checkIndexer, + }) + + const { + data: { _meta: data }, + }: any = await indexer + + console.log( + `%cIndexer: + Health: ${data?.indexerHealthy ? '❤️' : '💀'} + Last: ${new Date(Number(data?.lastProcessedTimestamp))}`, + 'background: #222; color: #bada55; padding: 0.3em' + ) + commit('SET_INDEXER_STATUS', data) + } catch (error) { + const type = { + indefinite: true, + position: 'is-top-right', + message: ` +

Indexer Error

+

Indexer is not working properly + and you can check the status here

+

If you think this should't happen, report us by + creating bug issue with steps to reproduce and screenshot.

+ `, + type: 'is-danger', + hasIcon: true, + } + this.app.$buefy.snackbar.open(type as any) + console.warn('Do something', error) + } + }, + upateIndexerStatus({ commit }: { commit: Commit }, data: any) { + commit('SET_INDEXER_STATUS', data) + }, +} diff --git a/store/lang.ts b/store/lang.ts new file mode 100644 index 0000000000..8e682e9f59 --- /dev/null +++ b/store/lang.ts @@ -0,0 +1,130 @@ +import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex' + +export const state = () => ({ + lang: {}, + language: { + userLang: process.env.VUE_APP_I18N_LOCALE || 'en', + langsFlags: [ + { + value: 'en', + flag: '🇬🇧', + label: 'English', + }, + { + value: 'bn', + flag: '🇧🇩', + label: 'বাংলা', + }, + { + value: 'cn', + flag: '🇨🇳', + label: '中文', + }, + { + value: 'cz', + flag: '🇨🇿', + label: 'Česky', + }, + { + value: 'es', + flag: '🇪🇸', + label: 'Español', + }, + { + value: 'fr', + flag: '🇫🇷', + label: 'Français', + }, + { + value: 'jp', + flag: '🇯🇵', + label: '日本語', + }, + { + value: 'ko', + flag: '🇰🇷', + label: '한국어', + }, + { + value: 'nl', + flag: '🇳🇱', + label: 'Vlaams', + }, + { + value: 'pl', + flag: '🇵🇱', + label: 'Polski', + }, + { + value: 'pt', + flag: '🇵🇹', + label: 'Português', + }, + { + value: 'sk', + flag: '🇸🇰', + label: 'Slovenčina', + }, + { + value: 'tu', + flag: '🇹🇷', + label: 'Türkçe', + }, + { + value: 'ur', + flag: '🇵🇰', + label: 'اردو', + }, + { + value: 'vt', + flag: '🇻🇳', + label: 'Tiếng Việt', + }, + { + value: 'ru', + flag: '🇷🇺', + label: 'Русский', + }, + // { + // value: 'de', + // flag: '🇩🇪', + // label: 'Deutsch' + // }, + // { + // value: 'ua', + // flag: '🇺🇦', + // label: 'Українська' + // }, + // { + // value: 'it', + // flag: '🇮🇹', + // label: 'Italiano' + // }, + // { + // value: 'hi', + // flag: '🇮🇳', + // label: 'हिन्दी' + // } + ], + }, +}) + +export type LangState = ReturnType + +export const getters: GetterTree = { + getUserLang: ({ language }: any) => language.userLang || 'en', + getLangsFlags: ({ language }: any) => language.langsFlags, + getUserFlag: ({ language }: any) => language.langsFlags.find((lang: {value: string}) => lang.value === language.userLang).flag, +} + +export const mutations: MutationTree = { + SET_LANGUAGE(state: any, data: any) { + state.language = Object.assign(state.language, data) + }, +} + +export const actions: ActionTree = { + setLanguage({ commit }: { commit: Commit }, data: any) { + commit('SET_LANGUAGE', data) + }, +} diff --git a/store/preferences.ts b/store/preferences.ts new file mode 100644 index 0000000000..cd13b3a516 --- /dev/null +++ b/store/preferences.ts @@ -0,0 +1,23 @@ +import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex' + +export const state = () => ({ + layoutClass: 'is-one-third-desktop is-one-third-tablet', +}) + +export type PreferencesState = ReturnType + +export const getters: GetterTree = { + getLayoutClass: ({ layoutClass }) => layoutClass, +} + +export const mutations: MutationTree = { + SET_LAYOUT_CLASS(state: any, data) { + state.layoutClass = data + }, +} + +export const actions: ActionTree = { + setLayoutClass({ commit }: { commit: Commit }, data) { + commit('SET_LAYOUT_CLASS', data) + }, +} diff --git a/utils/WithKeyring.ts b/utils/WithKeyring.ts index 95e1df1f15..893f67a245 100644 --- a/utils/WithKeyring.ts +++ b/utils/WithKeyring.ts @@ -41,7 +41,7 @@ export default class WithKeyring extends Vue { } get chainProperties() { - return this.$store.getters.getChainProperties; + return this.$store.getters['chain/getChainProperties']; } get ss58Format(): number { diff --git a/utils/account.ts b/utils/account.ts index 9f7295e1fe..d8f5ce1f50 100644 --- a/utils/account.ts +++ b/utils/account.ts @@ -35,20 +35,20 @@ export const toDefaultAddress = (account: KeyringAccount | string) => { return address } - const ss58Format = store.getters.getChainProperties58Format + const ss58Format = store.getters['chain/getChainProperties58Format'] return encodeAddress(decodeAddress(address, ss58Format)); } export const pubKeyToAddress = (publicKey: string) => { - const ss58Format = store.getters.getChainProperties58Format + const ss58Format = store.getters['chain/getChainProperties58Format'] return encodeAddress(publicKey, ss58Format); } export const formatAccount = (account: KeyringAccount | string, format?: Prefix) => { const address = accountToAddress(account); - const ss58Format = format ? format : store.getters.getChainProperties58Format + const ss58Format = format ? format : store.getters['chain/getChainProperties58Format'] return encodeAddress(decodeAddress(address), ss58Format); } diff --git a/utils/mixins/chainMixin.ts b/utils/mixins/chainMixin.ts index 57579f1329..7c5fa64821 100644 --- a/utils/mixins/chainMixin.ts +++ b/utils/mixins/chainMixin.ts @@ -7,7 +7,7 @@ import { Component, Vue } from 'nuxt-property-decorator'; @Component export default class ChainMixin extends Vue { get chainProperties() { - return this.$store.getters.getChainProperties; + return this.$store.getters['chain/getChainProperties']; } get decimals(): number { diff --git a/utils/mixins/indexerMixin.ts b/utils/mixins/indexerMixin.ts index 6c017e6953..fcb580d9b0 100644 --- a/utils/mixins/indexerMixin.ts +++ b/utils/mixins/indexerMixin.ts @@ -7,7 +7,7 @@ import { Component, Vue } from 'nuxt-property-decorator'; @Component export default class IndexerMixin extends Vue { get indexer() { - return this.$store.getters.getIndexer; + return this.$store.getters['indexer/getIndexer']; } get healthy(): number { diff --git a/utils/support.ts b/utils/support.ts index 930c6c57ad..1a43545199 100644 --- a/utils/support.ts +++ b/utils/support.ts @@ -69,7 +69,7 @@ export const calculateCost = (files: FileType) => { export const cost = async (files: FileType): Promise => { const ksmPrice = await getKSMUSD() console.log(calculateCost(files) / ksmPrice) - const decimals = store.getters.getChainPropertiesTokenDecimals + const decimals = store.getters['chain/getChainPropertiesTokenDecimals'] return Math.round(calculateCost(files) / ksmPrice * 10 ** decimals) } @@ -90,12 +90,12 @@ export const somePercentFromTX = (price: number | string) => { } export const resolveSupportAddress = () => { - const ss58Format = store.getters.getChainProperties58Format + const ss58Format = store.getters['chain/getChainProperties58Format'] return Number(ss58Format) === 2 ? KODADOT_DAO : pubKeyToAddress(BACKUP_PUBKEY) } export const resolveOffsetAddress = () => { - const ss58Format = store.getters.getChainProperties58Format + const ss58Format = store.getters['chain/getChainProperties58Format'] return Number(ss58Format) === 2 ? OFFSET_DAO : pubKeyToAddress(BACKUP_PUBKEY) } @@ -107,6 +107,6 @@ export const offsetTx = async (price: number) => { export const offsetCost = async (price: number): Promise => { const ksmPrice = await getKSMUSD() console.log(price / ksmPrice) - const decimals = store.getters.getChainPropertiesTokenDecimals + const decimals = store.getters['chain/getChainPropertiesTokenDecimals'] return Math.round(price / ksmPrice * 10 ** decimals) }