dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

detect missing wallet plugin

Browse Source
This commit is contained in:
Tim
2024-04-12 12:16:11 -04:00
parent 1791ea4111
commit a5accb7049
1 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/NeedsSigner.vue
View File

@@ -1,20 +1,26 @@
<template> <template>
<slot v-if="ok" v-bind="$props"/> <slot v-if="pluginOk && loggedIn" v-bind="$props"/>
<div v-if="!ok"> <v-card v-if="!loggedIn" rounded="0">
<v-card-title><v-icon icon="mdi-hand-wave" color="grey"/>&nbsp;Welcome to Dexorder Alpha!</v-card-title> <v-card-title>
<v-icon icon="mdi-hand-wave" color="grey"/>&nbsp;Welcome to Dexorder Alpha!
</v-card-title>
<v-card-text> <v-card-text>
This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade. This alpha test runs on the Dexorder Testnet blockchain, which gives you free testnet tokens to trade.
</v-card-text> </v-card-text>
<btn icon="mdi-wallet-outline" color="warning" variant="outlined" @click="connect" :disabled="disabled" <div v-if="!pluginOk">
text="Connect Wallet"/> <v-card-text>
<!-- todo Alpha Live A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
<v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title> required to use Dexorder. Please install a crypto wallet into your browser to experience the power of
<v-card-text> Dexorder.
Dexorder works only with <blockchain chain-id="42161"/>. Please switch to the </v-card-text>
<blockchain chain-id="42161"/> blockchain in your wallet. <v-card-actions>
</v-card-text> <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
--> </v-card-actions>
<v-card v-if="needsNetwork" rounded="0"> </div>
<btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
@click="connect" :disabled="disabled" text="Connect Wallet"/>
<div v-if="needsNetwork">
<v-card-text> <v-card-text>
<table id="manualsetup"> <table id="manualsetup">
<thead> <thead>
@@ -50,13 +56,12 @@
</ol> </ol>
--> -->
</v-card-text> </v-card-text>
</v-card> </div>
</div> </v-card>
</template> </template>
<script setup> <script setup>
import {useStore} from "@/store/store"; import {useStore} from "@/store/store";
import NeedsProvider from "@/components/NeedsProvider.vue";
import {computed, ref} from "vue"; import {computed, ref} from "vue";
import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js"; import {addTestnet, connectWallet, switchChain, useWalletStore} from "@/blockchain/wallet.js";
import Btn from "@/components/Btn.vue"; import Btn from "@/components/Btn.vue";
@@ -64,11 +69,15 @@ import CopyButton from "@/components/CopyButton.vue";
const s = useStore() const s = useStore()
const ws = useWalletStore() const ws = useWalletStore()
const providerOk = computed(()=>s.chainId===ws.chainId) const pluginOk = window.ethereum !== undefined
const ok = computed(()=>s.account!==null) const loggedIn = computed(()=>s.account!==null)
const needsNetwork = ref(false) const needsNetwork = ref(false)
const disabled = ref(false) const disabled = ref(false)
function reload() {
window.location.reload()
}
async function connect() { async function connect() {
disabled.value = true disabled.value = true
try { try {
@@ -86,10 +95,20 @@ async function connect() {
return return
} }
} }
else if (e.code===4001) {
// explicit user rejection
return
}
else else
console.log('wallet connect failure',e) console.log('switchChain() failure',e)
}
try {
await connectWallet(s.chainId)
}
catch (e) {
if (e.code!==4001)
console.log('connectWallet() failed', e)
} }
await connectWallet(s.chainId)
} }
finally { finally {
disabled.value = false disabled.value = false