Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I bypass account selection when refresh page? #2080

Open
1 task done
remy727 opened this issue Mar 8, 2024 · 0 comments
Open
1 task done

How can I bypass account selection when refresh page? #2080

remy727 opened this issue Mar 8, 2024 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@remy727
Copy link

remy727 commented Mar 8, 2024

Current Behavior

I enabled Auto Selecting a Wallet
I connected my Metamask account. When I refresh the page, it requires account selection again.
image

Expected Behavior

I want to bypass account selection. I want to connect the last connected account when I refresh the page.
Example page: https://app.pendle.finance/

Steps To Reproduce

My code:

import { ref, computed } from 'vue';
import ChevronIcon from "@/components/Icons/Chevron.vue";
import DisconnectIcon from "@/components/Icons/Disconnect.vue";
import Button from "@/components/Button.vue";
import { init, useOnboard } from '@web3-onboard/vue';
import injectedModule from '@web3-onboard/injected-wallets';
import metamaskModule from '@web3-onboard/metamask';
import ledgerModule from '@web3-onboard/ledger';
import walletConnectModule from '@web3-onboard/walletconnect';
import coinbaseModule from '@web3-onboard/coinbase';
import frameModule from '@web3-onboard/frame';

const projectId = import.meta.env.VITE_PROJECT_ID;
const metamask = metamaskModule({
  options: {
    extensionOnly: false,
    i18nOptions: {
      enabled: true
    },
    dappMetadata: {
      name: 'My App'
    }
  }
});
const ledger = ledgerModule({ projectId });
const walletConnect = walletConnectModule({
  projectId,
  dappUrl: 'https://myapp.com'
});
const coinbase = coinbaseModule();
const frameWallet = frameModule();
const injected = injectedModule({});
const web3Onboard = init({
  wallets: [
    metamask,
    ledger,
    walletConnect,
    coinbase,
    frameWallet,
    injected,
  ],
  chains: [
    {
      id: 42161,
      token: 'ARB-ETH',
      label: 'Arbitrum One',
      rpcUrl: 'https://rpc.ankr.com/arbitrum'
    }
  ],
  appMetadata: {
    name: 'My App',
    description: 'My App',
    recommendedInjectedWallets: [
      { name: 'Coinbase', url: 'https://wallet.coinbase.com/' },
      { name: 'MetaMask', url: 'https://metamask.io' }
    ],
  },
  theme: "dark"
});

const { connectedWallet, connectingWallet, connectWallet, disconnectWallet } = useOnboard();

const isActive = ref(false);

const connect = () => {
  try {
    connectWallet();
  } catch(ex) {
    console.log(ex)
  }
};

const disconnect = () => {
  const { provider, label } = connectedWallet.value || {};
  if (provider && label) {
    try {
      disconnectWallet({ label });
    } catch (ex) {
      console.log(ex)
    }
  }
};

What package is effected by this issue?

@web3-onboard/vue

Is this a build or a runtime issue?

Runtime

Package Version

2.7.12

Node Version

21.5.0

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

No response

Sanity Check

  • If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants