修改登录流程
This commit is contained in:
parent
5f2ad57784
commit
750d56f118
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="chain-modal" v-if="modalShow">
|
||||
<div class="modal-bg" @click="hideModal"></div>
|
||||
<div class="modal-bg" @click="cancelSelect"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-title">
|
||||
You need to connect to supported network
|
||||
@ -21,7 +21,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator'
|
||||
import { CHAIN_SELECTED, EventBus, NEED_CHANGE_CHAIN, SHOW_CHAIN_MODAL, WALLET_SELECTED } from '@/utils/event-bus'
|
||||
import { EventBus, NEED_CHANGE_CHAIN, SHOW_CHAIN_MODAL } from '@/utils/event-bus'
|
||||
import { chains } from '@/configs/chains'
|
||||
|
||||
@Component({
|
||||
@ -33,6 +33,9 @@ export default class ChainModal extends Vue {
|
||||
modalShow = false
|
||||
// 0: wallet 1: chain
|
||||
dataType = 1
|
||||
confirmFun: (id: number) => void
|
||||
cancelFun: (reason: any) => void
|
||||
|
||||
private providers = [
|
||||
{
|
||||
id: 1,
|
||||
@ -74,12 +77,8 @@ export default class ChainModal extends Vue {
|
||||
|
||||
cardClicked(id: number) {
|
||||
console.log('card clicked: ', id)
|
||||
this.confirmFun && this.confirmFun(id)
|
||||
this.hideModal()
|
||||
if (this.dataType === 0) {
|
||||
EventBus.$emit(WALLET_SELECTED, id)
|
||||
} else if (this.dataType === 1) {
|
||||
EventBus.$emit(CHAIN_SELECTED, id)
|
||||
}
|
||||
}
|
||||
|
||||
showModal(type?: number) {
|
||||
@ -87,16 +86,27 @@ export default class ChainModal extends Vue {
|
||||
this.modalShow = true
|
||||
}
|
||||
|
||||
showSelectWallet() {
|
||||
showSelectWallet({ confirm, cancel }: {confirm: (id: number)=>void, cancel: (reason: any)=>void}) {
|
||||
this.confirmFun = confirm
|
||||
this.cancelFun = cancel
|
||||
this.showModal(0)
|
||||
}
|
||||
|
||||
showChangeChain() {
|
||||
showChangeChain({ confirm, cancel }: {confirm: (id: number)=>void, cancel: (reason: any)=>void}) {
|
||||
this.confirmFun = confirm
|
||||
this.cancelFun = cancel
|
||||
this.showModal(1)
|
||||
}
|
||||
|
||||
cancelSelect() {
|
||||
this.cancelFun && this.cancelFun('User cancel')
|
||||
this.hideModal()
|
||||
}
|
||||
|
||||
hideModal() {
|
||||
this.modalShow = false
|
||||
this.confirmFun = (id: number) => { console.log(id) }
|
||||
this.cancelFun = (reason: any) => { console.log(reason) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -4,20 +4,20 @@ import { getNonce } from '@/api/User'
|
||||
import { AppModule } from '@/store/modules/app'
|
||||
import { UserModule } from '@/store/modules/user'
|
||||
import { Message } from 'element-ui'
|
||||
import { EventBus, NEED_NONCE } from '@/utils/event-bus'
|
||||
|
||||
@singleton
|
||||
export default class ChainManager {
|
||||
bc: BlockChain
|
||||
constructor() {
|
||||
this.bc = new BlockChain()
|
||||
EventBus.$on(NEED_NONCE, this.checkNance.bind(this))
|
||||
// EventBus.$on(NEED_NONCE, this.checkNance.bind(this))
|
||||
}
|
||||
|
||||
public async init() {
|
||||
if (this.bc.isWalletConnect) {
|
||||
try {
|
||||
await this.bc.connect()
|
||||
await this.getNance()
|
||||
} catch (err) {
|
||||
console.log('connect chain error: ', err)
|
||||
}
|
||||
@ -33,9 +33,10 @@ export default class ChainManager {
|
||||
}
|
||||
|
||||
public async login() {
|
||||
if (!AppModule.accountId) {
|
||||
if (!AppModule.step) {
|
||||
try {
|
||||
await this.bc.connect(true)
|
||||
await this.checkNance()
|
||||
} catch (err) {
|
||||
Message({
|
||||
message: err.message,
|
||||
|
@ -5,18 +5,17 @@ import Web3 from 'web3'
|
||||
import { ERC20ABI, MALL_ADDRESS } from '@/configs/config_chain'
|
||||
import {
|
||||
ACCOUNT_CHANGE,
|
||||
CHAIN_SELECTED,
|
||||
EventBus, NEED_CHANGE_CHAIN,
|
||||
NEED_LOGIN,
|
||||
NEED_NONCE,
|
||||
SHOW_CHAIN_MODAL,
|
||||
WALLET_SELECTED
|
||||
SHOW_CHAIN_MODAL
|
||||
} from '@/utils/event-bus'
|
||||
import { UserModule } from '@/store/modules/user'
|
||||
import { chains, IChainData } from '@/configs/chains'
|
||||
import { isMobile } from '@/utils/resize'
|
||||
import { hasMetamask } from '@/utils/chain.util'
|
||||
import { AllChains } from '@/configs/allchain'
|
||||
import { MessageBox } from 'element-ui'
|
||||
|
||||
const EIP721_DOMAIN_DATA = [
|
||||
{ name: 'name', type: 'string' },
|
||||
@ -51,8 +50,6 @@ export class BlockChain {
|
||||
this.coinInstanceMap = new Map()
|
||||
// AppModule.updateChainID(chainId)
|
||||
EventBus.$on(NEED_LOGIN, this.connect.bind(this))
|
||||
EventBus.$on(WALLET_SELECTED, this.walletSelected.bind(this))
|
||||
EventBus.$on(CHAIN_SELECTED, this.chainSelected.bind(this))
|
||||
}
|
||||
|
||||
loadJson(url: string) {
|
||||
@ -80,11 +77,6 @@ export class BlockChain {
|
||||
}
|
||||
}
|
||||
|
||||
public async walletSelected(type: number) {
|
||||
this.walletType = type
|
||||
await this.connectWallet(true)
|
||||
}
|
||||
|
||||
public async connectWallet(isManual: boolean) {
|
||||
console.log('begin connect to wallet: ', this.walletType, this.currentChain)
|
||||
if (this.walletType === 1) {
|
||||
@ -96,16 +88,15 @@ export class BlockChain {
|
||||
return
|
||||
}
|
||||
this.web3 = new Web3(this.provider)
|
||||
this.subscribeToEvents()
|
||||
const chainId = await this.web3.eth.getChainId()
|
||||
if (!this.chainMap.has(chainId)) {
|
||||
EventBus.$emit(NEED_CHANGE_CHAIN)
|
||||
return
|
||||
}
|
||||
await this.checkChain(chainId)
|
||||
|
||||
this.subscribeToEvents()
|
||||
const accounts = await this.web3.eth.getAccounts()
|
||||
if (accounts && accounts.length > 0) {
|
||||
AppModule.updateAccount(accounts[0])
|
||||
}
|
||||
if (!this.currentChain) this.currentChain = chainId
|
||||
this.saveProvider()
|
||||
AppModule.updateChainID(chainId)
|
||||
AppModule.updateWalletStatus(true)
|
||||
@ -119,24 +110,68 @@ export class BlockChain {
|
||||
return { account: accounts[0], chainId }
|
||||
}
|
||||
|
||||
private async checkChain(chainId: number) {
|
||||
if (!this.chainMap.has(chainId)) {
|
||||
if (this.walletType === 1) {
|
||||
await this.selectChain()
|
||||
} else if (this.walletType === 2) {
|
||||
await this.disconnect()
|
||||
this.walletType = 2
|
||||
await MessageBox.alert('You need to connect to supported network', 'Wrong Network', {
|
||||
confirmButtonText: 'Confirm'
|
||||
})
|
||||
await this.connectWallet(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public async connect(isManual = false) {
|
||||
if (isMobile()) {
|
||||
this.walletType = 2
|
||||
} else {
|
||||
if (hasMetamask()) {
|
||||
if (isManual && !this.walletType) {
|
||||
EventBus.$emit(SHOW_CHAIN_MODAL)
|
||||
return
|
||||
this.walletType = await this.selectWallet()
|
||||
}
|
||||
} else {
|
||||
this.walletType = 2
|
||||
}
|
||||
}
|
||||
if (this.isWalletConnect) {
|
||||
await this.connectWallet(false)
|
||||
} else {
|
||||
EventBus.$emit(NEED_CHANGE_CHAIN)
|
||||
}
|
||||
if (isManual || this.isWalletConnect) { await this.connectWallet(isManual) }
|
||||
}
|
||||
|
||||
private selectWallet(): Promise<number> {
|
||||
return new Promise((resolve, reject) => {
|
||||
EventBus.$emit(SHOW_CHAIN_MODAL, {
|
||||
confirm: (id: number) => {
|
||||
console.log('select wallet: ', id)
|
||||
resolve && resolve(id)
|
||||
},
|
||||
cancel: (reason: any) => {
|
||||
console.log('cancel select wallet: ', reason)
|
||||
reject && reject(reason)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
private selectChain(): Promise<number> {
|
||||
return new Promise((resolve, reject) => {
|
||||
EventBus.$emit(NEED_CHANGE_CHAIN, {
|
||||
confirm: async(id: number) => {
|
||||
console.log('select chain: ', id)
|
||||
this.currentChain = id
|
||||
if (this.provider) {
|
||||
await this.switchEthereumChain()
|
||||
}
|
||||
resolve && resolve(id)
|
||||
},
|
||||
cancel: (reason: any) => {
|
||||
console.log('cancel select chain: ', reason)
|
||||
reject && reject(reason)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
public async connectMetaMask() {
|
||||
@ -161,7 +196,6 @@ export class BlockChain {
|
||||
public async connectWalletConnect() {
|
||||
const provider = new WalletConnectProvider({
|
||||
infuraId: process.env.VUE_APP_WALLET_INFURAID,
|
||||
chainId: 97,
|
||||
rpc: this.rpc
|
||||
})
|
||||
try {
|
||||
@ -244,8 +278,7 @@ export class BlockChain {
|
||||
if (accounts && accounts.length > 0) {
|
||||
if (AppModule.accountId !== accounts[0]) {
|
||||
await UserModule.LogOut()
|
||||
AppModule.updateAccount(accounts[0])
|
||||
EventBus.$emit(ACCOUNT_CHANGE)
|
||||
location.reload()
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -254,9 +287,7 @@ export class BlockChain {
|
||||
this.provider.on('chainChanged', async(chainId: string) => {
|
||||
console.log('chainChanged', chainId)
|
||||
const chainIdNum = parseInt(chainId)
|
||||
if (chainIdNum !== AppModule.chainId) {
|
||||
EventBus.$emit(NEED_CHANGE_CHAIN)
|
||||
}
|
||||
await this.checkChain(chainIdNum)
|
||||
})
|
||||
|
||||
// Subscribe to session disconnection
|
||||
|
Loading…
x
Reference in New Issue
Block a user