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

53
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"/>
<!-- todo Alpha Live
<v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title>
<v-card-text> <v-card-text>
Dexorder works only with <blockchain chain-id="42161"/>. Please switch to the A cryptocurrency wallet such as <a href="https://metamask.io/download/" target="MetaMask">MetaMask</a> is
<blockchain chain-id="42161"/> blockchain in your wallet. required to use Dexorder. Please install a crypto wallet into your browser to experience the power of
Dexorder.
</v-card-text> </v-card-text>
--> <v-card-actions>
<v-card v-if="needsNetwork" rounded="0"> <v-btn prepend-icon="mdi-reload" text="Reload After Installing Wallet" @click="reload"/>
</v-card-actions>
</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,11 +95,21 @@ async function connect() {
return return
} }
} }
else else if (e.code===4001) {
console.log('wallet connect failure',e) // explicit user rejection
return
} }
else
console.log('switchChain() failure',e)
}
try {
await connectWallet(s.chainId) await connectWallet(s.chainId)
} }
catch (e) {
if (e.code!==4001)
console.log('connectWallet() failed', e)
}
}
finally { finally {
disabled.value = false disabled.value = false
} }