blocknative / web3-onboard

Client library to onboard users to web3 apps
https://onboard.blocknative.com/
MIT License
850 stars 504 forks source link

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

Open remy727 opened 7 months ago

remy727 commented 7 months ago

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