92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<template>
|
|
<approve-region>
|
|
<slot v-if="status===Status.OK" v-bind="$props"/>
|
|
<v-card v-if="status!==Status.OK" rounded="0">
|
|
<v-card-title>
|
|
<!-- <v-icon icon="mdi-hand-wave" color="grey"/>-->
|
|
Welcome to Dexorder!
|
|
</v-card-title>
|
|
<v-card-text>
|
|
Play with the order builder without an account by clicking on the <logo class="logo-small"/> logo or on
|
|
the <v-icon icon="mdi-chart-timeline-variant"/> button.
|
|
</v-card-text>
|
|
<div v-if="status===Status.NEEDS_PLUGIN">
|
|
<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>
|
|
|
|
<div v-if="status===Status.NEEDS_NETWORK">
|
|
<v-card-text>
|
|
Please connect your wallet to the Arbitrum One network to continue.
|
|
</v-card-text>
|
|
</div>
|
|
|
|
<v-card-actions v-if="status>Status.NEEDS_PLUGIN">
|
|
<btn v-if="pluginOk" icon="mdi-wallet-outline" color="warning" variant="outlined"
|
|
@click="connect" :disabled="disabled" text="Connect Wallet"/>
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
<terms-of-service v-if="status===Status.OK"/>
|
|
</approve-region>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useStore} from "@/store/store";
|
|
import {computed, ref} from "vue";
|
|
import {addNetworkAndConnectWallet} from "@/blockchain/wallet.js";
|
|
import Btn from "@/components/Btn.vue";
|
|
import Logo from "@/components/Logo.vue";
|
|
import ApproveRegion from "@/components/ApproveRegion.vue";
|
|
import TermsOfService from "@/components/TermsOfService.vue";
|
|
import {track} from "@/track.js";
|
|
|
|
const s = useStore()
|
|
const disabled = ref(false)
|
|
|
|
const Status = {
|
|
NEEDS_PLUGIN: -3,
|
|
NEEDS_NETWORK: -2,
|
|
NEEDS_ACCOUNT: -1,
|
|
OK: 0,
|
|
}
|
|
|
|
const pluginOk = window.ethereum !== undefined
|
|
const status = computed(() =>
|
|
!pluginOk ? Status.NEEDS_PLUGIN :
|
|
!s.chainInfo ? Status.NEEDS_NETWORK :
|
|
!s.account ? Status.NEEDS_ACCOUNT : Status.OK)
|
|
|
|
function reload() {
|
|
window.location.reload()
|
|
}
|
|
|
|
async function connect() {
|
|
track('connect_wallet')
|
|
disabled.value = true
|
|
try {
|
|
await addNetworkAndConnectWallet(s.chainId);
|
|
}
|
|
finally {
|
|
disabled.value = false
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "src/styles/vars" as *;
|
|
#manualsetup td {
|
|
text-align: right;
|
|
}
|
|
#manualsetup tr td:last-child {
|
|
padding-left: 1em;
|
|
}
|
|
</style>
|