All files / src/mixins W3iMixin.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// Web3Initialize
 
import { errorNotification, infoNotification } from "src/helper/notifications";
import { Component, Vue } from "vue-property-decorator";
import { mapActions, mapGetters, mapMutations } from "vuex";
import { SUPPORTED_NETWORK } from "../contracts/contract";
import { ActionsName, GettersName, MutationsName } from "../store";
import { dom } from "quasar";
 
const { ready } = dom;
 
@Component({
  computed: {
    ...mapGetters({
      loading: GettersName.web3.web3Loading,
      message: GettersName.web3.web3LoadingMessage,
      isInitialized: GettersName.web3.web3Initialize,
      networkId: GettersName.web3.web3Network,
      networkName: GettersName.web3.web3NetworkName,
      compKey: GettersName.contract.getCompKey,
      loginStatus: GettersName.web3.web3Status
    })
  },
  methods: {
    ...mapMutations({
      updateCompKey: MutationsName.contract.updateCompKey
    }),
    ...mapActions({
      initializeWeb3: ActionsName.web3.initializeWeb3,
      loadAllContracts: ActionsName.contract.loadAllContracts
    })
  }
})
export class W3iMixin extends Vue {
  // VUE
  public auth = true;
  public ethNetwork = "";
  // VUEX
  // getters data
  public isInitialized!: boolean;
  public networkId!: number;
  public networkName!: string;
  public loginStatus!: string;
 
  // actions method
  public initializeWeb3!: () => void;
  public loadAllContracts!: (network?: string) => void;
  // mutation method
  public updateCompKey!: () => void;
  // method
  public pushTo(path: string) {
    this.$router.push({ path });
  }
  public async w3i() {
    return new Promise((resolve, reject) => {
      // W3Initialized
      ready(async () => {
        if (!this.isInitialized) {
          try {
            await this.initializeWeb3();
            this.auth = !(this.loginStatus === "logout");
          } catch (err) {
            errorNotification(
              err.message || "Unable to initialize web3",
              false
            );
            this.auth = false;
            reject("Cannot initialize web3");
          }
        }
        if (!this.auth) {
          this.pushTo("/");
        }
        resolve();
      });
    });
  }
  public async networkCheck() {
    // Check Network
    if (SUPPORTED_NETWORK.hasOwnProperty(this.networkId)) {
      // if network route exist
      if (this.$route.params.network) {
        // network and route not match
        if (this.$route.params.network !== this.networkName) {
          infoNotification(`Rerouting to ${this.networkName}`, false);
          this.ethNetwork = this.networkName;
          this.pushTo(`/nft/${this.networkName}`);
          this.updateCompKey();
          return;
        } else {
          this.ethNetwork = this.$route.params.network;
        }
      } else {
        this.ethNetwork = this.networkName;
      }
    } else {
      // if network route exist
      if (this.$route.params.network) {
        if (SUPPORTED_NETWORK.hasOwnProperty(this.$route.params.network)) {
          this.ethNetwork = this.$route.params.network;
          this.auth = true;
        } else {
          errorNotification(
            `Network ${this.networkId ||
              this.$route.params.network} not supported`
          );
          this.pushTo(`/nft`);
        }
      } else {
        //
      }
    }
  }
}