Koniverse / SubConnect-v2

Providing an efficient and easy solution for connecting Polkadot, Substrate, & Ethereum wallets. Drawing insights from Blocknative's web3-onboard, we've enhanced our capabilities for seamless integration with Substrate wallets.
https://w3o-demo.subwallet.app/
MIT License
5 stars 0 forks source link

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

Open chillbert opened 2 months ago

chillbert commented 2 months ago

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