withdrawls

src/components/NeedsProvider.vue

@@ -0,0 +1,52 @@
+<template>
+  <slot v-if="ok"/>
+  <phone-card v-if="!walletOk">
+    <v-card-title>Install Wallet</v-card-title>
+    <v-card-text>
+      A cryptocurrency wallet such as <a href="https://metamask.io/download/">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"/>
+    </v-card-actions>
+  </phone-card>
+  <phone-card v-if="walletOk && !providerOk">
+    <v-card-text>
+      Please log in to your crypto wallet.
+    </v-card-text>
+    <v-card-actions v-if="walletOk && !providerOk">
+      <v-btn prepend-icon="mdi-power" text="Connect Wallet" @click="connectWallet"/>
+    </v-card-actions>
+  </phone-card>
+  <phone-card v-if="walletOk && providerOk && !chainOk">
+    <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>
+  </phone-card>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store";
+import PhoneCard from "@/components/PhoneCard.vue";
+import {connectWallet} from "@/blockchain/wallet.js";
+import {computed} from "vue";
+import Blockchain from "@/components/Blockchain.vue";
+
+const s = useStore()
+const walletOk = typeof window.ethereum !== 'undefined'
+const providerOk = computed(()=>s.provider!==null)
+const chainOk = computed(()=>providerOk.value && s.helper!==null)
+const ok = computed(()=>{
+  return walletOk && providerOk.value && chainOk.value
+})
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+.arbitrum {
+  color: $arbitrum-color;
+}
+</style>