Skip to content

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

@chillbert

Description

@chillbert

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions