N
Nuxt•2w ago
szobi

refresh page after back to tap on mobile

Hello, l created a login by metamask using wagmi.sh. all connectors and logic are in modal which is inside app.vue l have problem with the following case: When I choose MetaMask, the SDK redirects me to the MetaMask app to connect the wallet. However, after manually returning to the page, the app refreshes, and the modal closes. any idea why?
4 Replies
kapa.ai
kapa.ai•2w ago
Hi @szobi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I apologize, but I don't have enough specific information in the provided knowledge sources to directly answer your question about MetaMask integration and page refreshing issues in Nuxt. The knowledge sources don't contain details about MetaMask or wagmi.sh integration. However, I can provide some general information about page refreshing behavior in Nuxt that might be relevant: 1. Nuxt has a default router scrollBehaviour that handles page refresh scenarios. According to this GitHub pull request, recent improvements have been made to "handle first page load and page refresh scenarios (restore scroll position without jumps), fixes hash-navigation when changing pages and browser back/forward positions, especially when page transitions are involved." 2. If you're experiencing unwanted page refreshes, you might want to check your Nuxt configuration. As mentioned in the Nuxt documentation, there's an experimental feature called navigationRepaint that can affect navigation behavior: 
   export default defineNuxtConfig({
     experimental: {
       navigationRepaint: true // This is the default
     }
   })
   
   export default defineNuxtConfig({
     experimental: {
       navigationRepaint: true // This is the default
     }
   })
3. If the issue persists, it might be related to how the modal is implemented or how the MetaMask connection is handled. You might need to review your implementation to ensure that the modal state is properly managed across navigation events. For more specific help with your MetaMask and wagmi.sh integration, you may need to consult their respective documentation or community forums, as the provided knowledge sources don't contain information about these tools. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2w ago
<@463024314439041037> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Mittchel
Mittchel•2w ago
<template>
  <div>
    <button @click="openModal">Connect Wallet</button>
    <Modal v-if="isModalOpen" @close="closeModal">
      <!-- Your wallet connection UI -->
    </Modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Check localStorage for modal state
const isModalOpen = ref(false);

const openModal = () => {
  isModalOpen.value = true;
  localStorage.setItem('modalState', 'open');
};

const closeModal = () => {
  isModalOpen.value = false;
  localStorage.removeItem('modalState');
};

// On component mount, check if the modal should be open
onMounted(() => {
  const modalState = localStorage.getItem('modalState');
  if (modalState === 'open') {
    isModalOpen.value = true;
  }
});
</script>
<template>
  <div>
    <button @click="openModal">Connect Wallet</button>
    <Modal v-if="isModalOpen" @close="closeModal">
      <!-- Your wallet connection UI -->
    </Modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// Check localStorage for modal state
const isModalOpen = ref(false);

const openModal = () => {
  isModalOpen.value = true;
  localStorage.setItem('modalState', 'open');
};

const closeModal = () => {
  isModalOpen.value = false;
  localStorage.removeItem('modalState');
};

// On component mount, check if the modal should be open
onMounted(() => {
  const modalState = localStorage.getItem('modalState');
  if (modalState === 'open') {
    isModalOpen.value = true;
  }
});
</script>
import { createConfig, configureChains, mainnet } from '@wagmi/core';
import { publicProvider } from '@wagmi/core/providers/public';
import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
import { localStorage } from '@wagmi/core/storage';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const config = createConfig({
  autoConnect: true, // Automatically reconnect on page load
  connectors: [
    new MetaMaskConnector({ chains }),
  ],
  publicClient,
  webSocketPublicClient,
  storage: localStorage, // Persist connection state in localStorage
});
import { createConfig, configureChains, mainnet } from '@wagmi/core';
import { publicProvider } from '@wagmi/core/providers/public';
import { MetaMaskConnector } from '@wagmi/core/connectors/metaMask';
import { localStorage } from '@wagmi/core/storage';

const { chains, publicClient, webSocketPublicClient } = configureChains(
  [mainnet],
  [publicProvider()]
);

const config = createConfig({
  autoConnect: true, // Automatically reconnect on page load
  connectors: [
    new MetaMaskConnector({ chains }),
  ],
  publicClient,
  webSocketPublicClient,
  storage: localStorage, // Persist connection state in localStorage
});
onMounted(() => {
  const isConnecting = localStorage.getItem('isConnecting');
  if (isConnecting === 'true') {
    openModal();
    // Attempt to reconnect the wallet
    connectWallet();
  }
});

const connectWallet = async () => {
  localStorage.setItem('isConnecting', 'true');
  try {
    // Use wagmi to connect the wallet
    const { connector } = useConnect();
    await connector.connect();
  } catch (error) {
    console.error('Connection failed:', error);
  } finally {
    localStorage.removeItem('isConnecting');
  }
};
onMounted(() => {
  const isConnecting = localStorage.getItem('isConnecting');
  if (isConnecting === 'true') {
    openModal();
    // Attempt to reconnect the wallet
    connectWallet();
  }
});

const connectWallet = async () => {
  localStorage.setItem('isConnecting', 'true');
  try {
    // Use wagmi to connect the wallet
    const { connector } = useConnect();
    await connector.connect();
  } catch (error) {
    console.error('Connection failed:', error);
  } finally {
    localStorage.removeItem('isConnecting');
  }
};
const disconnectWallet = async () => {
  const { disconnect } = useDisconnect();
  await disconnect();
  localStorage.removeItem('isConnecting');
  localStorage.removeItem('modalState');
};
const disconnectWallet = async () => {
  const { disconnect } = useDisconnect();
  await disconnect();
  localStorage.removeItem('isConnecting');
  localStorage.removeItem('modalState');
};
szobi
szobiOP•2w ago
Wow Thx! tommorow l'll check your resolution! Now l see in terminal ERROR [unhandledRejection] connect ETIMEDOUT every time when app redirect to metamask ;x maybe probleme is in pnpm dev --host 0.0.0.0 @Mittchel are you using a wagmi.sh/vue/nuxt? or its only vue 3?

Did you find this page helpful?