WalletConnet - returns Null Address

Hello,

While trying to implement WalletConnect connectivity, when trying to connect to the dApps Platform (https://beta.bitecoin.finance/), I face the following problems:

Using the PC:

  • I tried to use Wallet 3 to connect to the dApps. I get the Signing message, everything looks great, but, the Wallet is not displayed (Connect should be replaced with the Wallet).

Using the Mobile (iPhone):

  • Using TrustWallet - WalletConnect option to scan the QR code, 7 out of 10 tries fail, and when it doesn’t, most of the times I do not receive the “Sign” message after connecting. When I receive it, I tap on Sign and nothing happens at dApps Platform level. The Wallet address is not populated - address null
  • Tried with MetaMask App QR Code scan - same issue

Basically, the Wallet Address is unable to be retrieved and the connectivity with the Provider is… bad from mobile devices

The code that I’ve used is IDENTICAL with the one that you guys offer on https://github.com/ethereum-boilerplate/ethereum-boilerplate:

import { useMoralis } from "react-moralis";
import { getEllipsisTxt } from "../helpers/formatters";
import Blockie from "../Blockie";
import { Button, Card, Modal,Row,Col } from "antd";
import { useState, useEffect } from "react";
import Address from "../Address/Address";
import { SelectOutlined } from "@ant-design/icons";
import { getExplorer } from "../helpers/networks";
import Text from "antd/lib/typography/Text";
import { connectors } from "./config";

const styles = {
  account: {
    height: "42px",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    fontSize: "14px",
    width: "100%",
    borderRadius: "12px",
    backgroundColor: "orange",
    cursor: "pointer",
    fontSize: "14px",
    padding: "18px 12px 8px 12px",
  },
  text: {
    color: "#fff",
    fontSize: "14px",
  },
  connector: {
    alignItems: "center",
    display: "flex",
    flexDirection: "column",
    height: "auto",
    justifyContent: "center",
    marginLeft: "auto",
    marginRight: "auto",
    padding: "20px 5px",
    cursor: "pointer",
  },
  icon: {
    alignSelf: "center",
    fill: "rgb(40, 13, 95)",
    flexShrink: "0",
    marginBottom: "8px",
    height: "30px",
  },
};

function Account() {
  const {Moralis, authenticate, isAuthenticated, account, chainId, logout } = useMoralis();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [isAuthModalVisible, setIsAuthModalVisible] = useState(false);

  if (!isAuthenticated || !account) {
    return (
      <>
        <div style={styles.account}
          onClick={() => setIsAuthModalVisible(true)}
        >
           <h6 style={styles.text}>🔒 Connect Wallet</h6>
        </div>
        <Modal
          visible={isAuthModalVisible}
          footer={null}
          onCancel={() => setIsAuthModalVisible(false)}
          bodyStyle={{
            padding: "15px",
            fontSize: "17px",
            fontWeight: "500",
          }}
          style={{ fontSize: "16px", fontWeight: "500" }}
          width="340px"
        >
          <div style={{ padding: "10px", display: "flex", justifyContent: "center", fontWeight: "700", fontSize: "20px" }}>
            Connect Wallet
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
            {connectors.map(({ title, icon, connectorId }, key) => (
              <div
                style={styles.connector}
                key={key}
                onClick={async () => {
                  try {
                    await authenticate({ provider: connectorId, chainId: 56});
                    window.localStorage.setItem("connectorId", connectorId);
                    setIsAuthModalVisible(false);
                  } catch (e) {
                    console.error(e);
                  }
                }}
              >
                <img src={icon} alt={title} style={styles.icon} />
                <Text style={{ fontSize: "14px" }}>{title}</Text>
              </div>
            ))}
          </div>
        </Modal>
      </>
    );
  }

  return (
    <>
      {/* <button
        onClick={async () => {
          try {
            console.log("change")
            await web3._provider.request({
              method: "wallet_switchEthereumChain",
              params: [{ chainId: "0x38" }],
            });
            console.log("changed")
          } catch (e) {
            console.error(e);
          }
        }}
      >
        Hi
      </button> */}
      
      <div style={styles.account} onClick={() => setIsModalVisible(true)}>
          <p style={{ marginRight: "5px", ...styles.text }}>{getEllipsisTxt(account, 6)}</p>
        <Blockie currentWallet scale={3} />
      </div>
      <Modal
        visible={isModalVisible}
        footer={null}
        onCancel={() => setIsModalVisible(false)}
        bodyStyle={{
          padding: "15px",
          fontSize: "17px",
          fontWeight: "500",
        }}
        style={{ fontSize: "16px", fontWeight: "500" }}
        width="400px"
      >
        Account
        <Card
          style={{
            marginTop: "10px",
            borderRadius: "1rem",
          }}
          bodyStyle={{ padding: "15px" }}
        >
          <Address avatar="left" size={6} copyable style={{ fontSize: "20px" }} />
          <div style={{ marginTop: "10px", padding: "0 10px" }}>
            <a href={`${getExplorer(chainId)}/address/${account}`} target="_blank" rel="noreferrer">
              <SelectOutlined style={{ marginRight: "5px" }} />
              View on Explorer
            </a>
          </div>
        </Card>
        <Button
          size="large"
          type="primary"
          style={{
            width: "100%",
            marginTop: "10px",
            borderRadius: "0.5rem",
            fontSize: "16px",
            fontWeight: "500",
          }}
          onClick={async () => {
            await logout();
            window.localStorage.removeItem("connectorId");
            setIsModalVisible(false);
          }}
        >
          Disconnect Wallet
        </Button>
      </Modal>
    </>
  );
}

export default Account;

I’ve created some examples (pictures 1 2 3 how I connect with Wallet 3 and picture 4 is how it should be shown, there I used MetaMask to connect
https://we.tl/t-8JNTc7Btzn - unable to upload more pictures or links

Any updates?.. This is a Major Issue that needs to be solved as a lot of users are using WalletConnect!

Hi @monstar09

It’s a known issue, fix is ready and awaits for adding to the next release

Great. Just let us know when you release it… thanks :slight_smile:

1 Like