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