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;
