👔 refactoring store

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('-'))

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')

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 {

components/rmrk/Create/SimpleMint.vue

@@ -186,7 +186,7 @@
  tooltipsize="is-large"
  >
  <template v-slot:content>
- {{ $t('carbonOffset.tooltip') }} 
+ {{ $t('carbonOffset.tooltip') }}
  (<a class="has-text-black is-underlined" href='https://kodadot.xyz/carbonless'>https://kodadot.xyz/carbonless</a>)
  </template>
  </Tooltip>
@@ -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 {

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'
  );
  }

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)
  }
 }
 </script>

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(

components/settings/SettingChooserExplorer.vue

@@ -31,19 +31,19 @@ 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) {
  this.$store.commit(this.setter, { [this.selector]: value })
  }
 
  public async mounted() {
- this.$store.commit('setExplorerOptions',{ availableOptions: {
+ this.$store.dispatch('explorer/setExplorerOptions', { availableOptions: {
  provider: [
  { text: 'Subscan', value: 'subscan' },
  { text: 'Polkascan', value: 'polkascan'}

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']
  }
 }
 </script>

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

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)
+ // }
  }
 }
 </script>

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']
  }
 }
 

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')
+ }
 }
 </script>
 

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)

components/transfer/Transfer.vue

@@ -27,7 +27,7 @@
  <span
  class="info--currentPrice"
  title="Current price"
- >${{ $store.getters.getCurrentKSMValue }} </span>
+ >${{ $store.getters['fiat/getCurrentKSMValue'] }} </span>
  </div>
 
  <b-field>
@@ -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 {

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',

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<Dashboard>({
  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: `
- <p class="title is-3">Indexer Error</p>
- <p class="subtitle">Indexer is not working properly
- <a target="_blank" rel="noopener noreferrer" href="https://explorer.subquery.network/subquery/vikiival/magick">and you can check the status here</a></p>
- <p class="subtitle">If you think this should't happen, report us by
- <a target="_blank" rel="noopener noreferrer" href="https://github.com/kodadot/nft-gallery/issues/new?assignees=&labels=bug&template=bug_report.md&title=">creating bug issue with steps to reproduce and screenshot.</a></p>
- `,
- 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;

store/chain.ts

@@ -0,0 +1,25 @@
+import { GetterTree, ActionTree, MutationTree, Commit } from 'vuex'
+
+export const state = () => ({
+ chainProperties: {},
+})
+
+export type ChainState = ReturnType<typeof state>;
+
+export const getters: GetterTree<ChainState, ChainState> = {
+ getChainProperties: ({ chainProperties }: any ) => chainProperties,
+ getChainProperties58Format: ({ chainProperties }: any ) => chainProperties.ss58Format,
+ getChainPropertiesTokenDecimals: ({ chainProperties }: any ) => chainProperties.tokenDecimals,
+};
+
+export const mutations: MutationTree<ChainState> = {
+ SET_CHAIN_PROPERTIES(state: any, data: any) {
+ state.chainProperties = Object.assign({}, data)
+ },
+};
+
+export const actions: ActionTree<ChainState, ChainState> = {
+ setChainProperties({ commit }: { commit: Commit }, data: any) {
+ commit('SET_CHAIN_PROPERTIES', data);
+ },
+};