<template>
  <NeedsProvider>
    <slot v-if="ok"/>
    <phone-card v-if="!ok">
      <v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Connect Wallet</v-card-title>
      <v-card-text>
        Please select an account to use from your wallet.
      </v-card-text>
      <v-card-actions>
        <btn icon="mdi-wallet-outline" color="warning" @click="connectWallet">Connect Wallet</btn>
      </v-card-actions>
    </phone-card>
  </NeedsProvider>
</template>

<script setup>
import {useStore} from "@/store/store";
import NeedsProvider from "@/components/NeedsProvider.vue";
import {computed} from "vue";
import PhoneCard from "@/components/PhoneCard.vue";
import {connectWallet} from "@/blockchain/wallet.js";
import Btn from "@/components/Btn.vue";

const s = useStore()

const ok = computed(()=>s.account!==null)

</script>

<style scoped lang="scss">
@use "src/styles/vars" as *;

</style>
