Repository: CryptoBlades/cryptoblades
File: frontend/src/views/Options.vue (Vue)

Code before:
    toggleShowSkillInUsd() {
      this.showSkillInUsd = !this.showSkillInUsd;
      if (this.showSkillInUsd) localStorage.setItem('showSkillInUsd', 'true');
      else localStorage.setItem('showSkillInUsd', 'false');

      Events.$emit('setting:showSkillInUsd', { value: this.showSkillInUsd });
    },

    toggleShowCosmetics() {
      this.showCosmetics = !this.showCosmetics;
      if (this.showCosmetics) localStorage.setItem('showCosmetics', 'true');
      else localStorage.setItem('showCosmetics', 'false');

      Events.$emit('setting:showCosmetics', { value: this.showCosmetics });
    },

    setFightMultiplier() {
      localStorage.setItem('fightMultiplier', this.fightMultiplier.toString());

      Events.$emit('setting:fightMultiplier', { value: this.fightMultiplier });
    },

    async setCurrentChain() {
      localStorage.setItem('currentChain', this.currentChain);
      Events.$emit('setting:currentChain', { value: this.currentChain });
      (this as any).$router.replace(
        {
          query: Object.assign({ ...(this as any).$route.query }, { chain: this.currentChain }),
        },
        () => {}
      );
      await this.configureMetaMask(+getConfigValue('VUE_APP_NETWORK_ID'));
    },
  },
  watch: {
    '$i18n.locale'(newVal, ) {
      localStorage.setItem('language', newVal);
    }
  }
});
</script>

<style>
.list-group {
  border: 2px solid #9e8a57;
  border-radius: 5px;
  background: linear-gradient(120deg, rgba(20, 20, 20, 1) 0%, rgb(41, 43, 38) 100%);
  max-width: 900px;
  margin: 0 auto;
}
.list-group-item {

Review comment (suggestion):
There's a router being used in common.ts without `as any` conversion. You could create and export a function in common.ts that will do `router.replace` and call it from here. 

Code after:

    toggleShowSkillInUsd() {
      this.showSkillInUsd = !this.showSkillInUsd;
      if (this.showSkillInUsd) localStorage.setItem('showSkillInUsd', 'true');
      else localStorage.setItem('showSkillInUsd', 'false');

      Events.$emit('setting:showSkillInUsd', { value: this.showSkillInUsd });
    },

    toggleShowCosmetics() {
      this.showCosmetics = !this.showCosmetics;
      if (this.showCosmetics) localStorage.setItem('showCosmetics', 'true');
      else localStorage.setItem('showCosmetics', 'false');

      Events.$emit('setting:showCosmetics', { value: this.showCosmetics });
    },

    setFightMultiplier() {
      localStorage.setItem('fightMultiplier', this.fightMultiplier.toString());

      Events.$emit('setting:fightMultiplier', { value: this.fightMultiplier });
    },

    async setCurrentChain() {
      localStorage.setItem('currentChain', this.currentChain);
      Events.$emit('setting:currentChain', { value: this.currentChain });
      addChainToRouter(this.currentChain);
      await this.configureMetaMask(+getConfigValue('VUE_APP_NETWORK_ID'));
    },
  },
  watch: {
    '$i18n.locale'(newVal, ) {
      localStorage.setItem('language', newVal);
    }
  }
});
</script>

<style>
.list-group {
  border: 2px solid #9e8a57;
  border-radius: 5px;
  background: linear-gradient(120deg, rgba(20, 20, 20, 1) 0%, rgb(41, 43, 38) 100%);
  max-width: 900px;
  margin: 0 auto;
}
.list-group-item {
  background: none !important;
  border: 0.2px dashed #9e8a57 !important;
}
.top-bg-img,