修改登录流程

This commit is contained in:
cebgcontract 2022-03-07 13:46:36 +08:00
parent 5f2ad57784
commit 750d56f118
3 changed files with 82 additions and 40 deletions

View File

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

View File

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

View File

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