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

[Problem]: Connected wallet widget not visible on autoconnect #24

Open
chillbert opened this issue Apr 26, 2024 · 0 comments
Open

[Problem]: Connected wallet widget not visible on autoconnect #24

chillbert opened this issue Apr 26, 2024 · 0 comments

Comments

@chillbert
Copy link

chillbert commented Apr 26, 2024

Is your request related to a problem?

On autoreconnect, the small icon on bottom right of page is not visible. How it should be:
image

How it is:
image

import React, { useEffect } from 'react';
import { init, useConnectWallet } from '@subwallet-connect/react';
import injectedModule from '@subwallet-connect/injected-wallets';
import { ethers } from 'ethers';
import { ApiPromise, WsProvider } from '@polkadot/api';

const injected = injectedModule();
const ws = 'wss://rpc.polkadot.io';
const infuraKey = '<INFURA_KEY>';
const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`;

init({
  apiKey: '1730eff0-9d50-4382-a3fe-89f0d34a2070',
  wallets: [injected],
  chains: [

  ],
chainsPolkadot:[
    {
      id: '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3',
      namespace: 'substrate',
      token: 'DOT',
      label: 'Polkadot',
      blockExplorerUrl: `polkadot.api.subscan.io`,
      decimal: 10
    }
]
})


function SubConnect() {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
  window.connect = connect;
  useEffect(() => {
    const savedWallet = localStorage.getItem('connectedWallet');
    if (savedWallet) {
      connect({ autoSelect: {label:savedWallet,  type:"substrate", disableModals:false},  });
    }
  }, [connect]);

  const handleConnect = async () => {
    const wallets = await connect();
    console.log(wallets)
    if (wallets.length > 0) {
      localStorage.setItem('connectedWallet', wallets[0].label);
    }
  };

  const handleDisconnect = () => {
    disconnect(wallet);
    localStorage.removeItem('connectedWallet');
  };

  return (
    <div style={{ position: 'absolute', zIndex: 99, top: 0, left: 0, background: 'yellow' }}>
      <button onClick={wallet ? handleDisconnect : handleConnect}>
        {connecting ? 'Connecting' : wallet ? 'Disconnect' : 'Connect'}
        {wallet?.accounts[0].address}
      </button>
    </div>
  );
}

export default SubConnect;

how to show the widget?

Feature Description

No response

Alternative Solutions

No response

Anything else?

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant