<script setup lang="ts">
import { useRoute } from "vue-router";
import TopBar from "@/components/TopBar/TopBar.vue";
import SpinnerComponent from "@/components/ui/SpinnerComponent.vue";
import ToasterComponent from "@/components/ui/ToasterComponent.vue";
import { init, useOnboard } from "@web3-onboard/vue";
import injectedModule from "@web3-onboard/injected-wallets";
import { Networks, DEFAULT_NETWORK } from "@/config/networks";
import { ref } from "vue";

const route = useRoute();
const injected = injectedModule();
const targetNetwork = ref(DEFAULT_NETWORK);

const web3Onboard = init({
  wallets: [injected],
  chains: Object.values(Networks).map((network) => ({
    id: `0x${network.id.toString(16)}`,
    token: network.nativeCurrency.symbol,
    label: network.name,
    rpcUrl: network.rpcUrls.default.http[0],
  })),
  connect: {
    autoConnectLastWallet: true,
  },
});

const { connectedWallet } = useOnboard();
if (!connectedWallet) {
  web3Onboard.connectWallet();
}
</script>

<template>
  <main class="p-3 sm:p-4 md:p-8">
    <TopBar />
    <RouterView v-slot="{ Component }">
      <template v-if="Component">
        <Transition name="page" mode="out-in" appear>
          <div :key="route.fullPath">
            <Suspense>
              <template #default>
                <component :is="Component" />
              </template>
              <template #fallback>
                <div class="flex w-full h-full justify-center items-center">
                  <SpinnerComponent :width="'16'" :height="'16'" />
                </div>
              </template>
            </Suspense>
          </div>
        </Transition>
      </template>
    </RouterView>
    <ToasterComponent :targetNetwork="targetNetwork" />
  </main>
</template>
