Hi! I am creating a dApp with reactjs and need to connect to wallet, that works but take too much time… even if I do directly to extension, I tried using my own node but is the same result.
Can you explain in more detail what you are doing? Which operation takes too much time?
When I try to connect to wallet… I am using this package.
import {
WithWalletConnector,
useWalletConnectorSelector,
} from "@concordium/react-components";
here is a video
@firecake this is my component that I use to connect.
/* global BigInt */
import React, { useEffect, useCallback } from "react";
import {
WithWalletConnector,
useWalletConnectorSelector,
} from "@concordium/react-components";
import { HttpProvider, JsonRpcClient } from '@concordium/web-sdk';
import {
TESTNET,
WALLET_CONNECT_OPTIONS_TESTNET,
JSON_RPC_URL,
} from "../../setting-concordium";
import { microCcdToCcd, getChallenge } from "../../services/concordium.service";
import { connect, useDispatch } from "react-redux";
import { setWalletState } from "../../actions";
import walletConcordium from "../../assets/wallet-concordium.png";
const CONNECTION_TYPE = "BrowserWallet"; // "WalletConnect";
const RPC = new JsonRpcClient(new HttpProvider(JSON_RPC_URL));
export const ConnectButton = (props) => {
const dispatch = useDispatch();
const actionWallet = props.actionWallet;
const { isSelected, isConnected, select } =
useWalletConnectorSelector(CONNECTION_TYPE, props);
const connect = useCallback(async () => {
console.log("isSelected", isSelected);
if (isSelected) {
console.log("connect");
await props.connectActive();
}
}, [isSelected]);
const disconnect = useCallback(async () => {
if (isConnected) {
console.log("disconnecting");
await props.disconnectActive();
dispatch(setWalletState(false, false, "", 0));
}
}, [isConnected]);
useEffect(() => {
if (!isSelected) {
select();
}
}, []);
useEffect(() => {
console.log("props", props);
if (props.isConnecting) {
dispatch(setWalletState(false, true, "", 0));
}
if (isConnected) {
const { activeConnection } = props;
dispatch(setWalletState(true, props.isConnecting, props.activeConnectedAccount, 0, activeConnection));
// GET BALANCE
if (CONNECTION_TYPE === "WalletConnect") {
const { activeConnection: { rpcClient } } = props;
rpcClient.getAccountInfo(props.activeConnectedAccount)
.then((res) => {
const balance = microCcdToCcd(res.accountAmount);
dispatch(
setWalletState(true, props.isConnecting, props.activeConnectedAccount, balance, activeConnection)
);
})
.catch((err) => {
console.log("err", err);
});
} else if (CONNECTION_TYPE === "BrowserWallet") {
const { activeConnection: { client } } = props;
client.jsonRpcClient.getAccountInfo(props.activeConnectedAccount).then((accountInfo) => {
const balance = microCcdToCcd(BigInt(accountInfo.accountAmount));
dispatch(
setWalletState(true, false, props.activeConnectedAccount, balance, activeConnection)
);
}, console.error);
}
}
}, [isConnected, props]);
useEffect(() => {
if (actionWallet === "concordium:connect" && !isConnected) {
connect();
}
if (isConnected) {
if (actionWallet === "concordium:disconnect" && isConnected) {
disconnect();
}
}
}, [actionWallet]);
return (
<img
style={{
cursor: "pointer",
border: isConnected ? "1px solid green" : "none",
opacity: isConnected ? 1 : 0.8,
}}
height={50}
alt="BrowserWalletConcordium"
src={walletConcordium}
onClick={() => {
if (isConnected) {
disconnect();
} else {
connect();
}
}}
/>
);
};
export const WalletConcordium = ({ actionWallet }) => {
return (
<WithWalletConnector
network={TESTNET}
walletConnectOpts={WALLET_CONNECT_OPTIONS_TESTNET}
>
{(props) => <ConnectButton {...props} actionWallet={actionWallet} />}
</WithWalletConnector>
);
};
const mapStateToProps = (state) => {
return {
actionWallet: state.wallet.walletAction,
};
};
export default connect(mapStateToProps)(WalletConcordium);
and this setting-concordium.js
/* eslint-disable no-undef */
export const JSON_RPC_URL = 'https://json-rpc.testnet.concordium.com';
export const WALLET_CONNECT_PROJECT_ID = '76324905a70fe5c388bab46d3e0564dc';
export const WALLET_CONNECT_SESSION_NAMESPACE = 'ccd';
export const DEFAULT_CONTRACT_INDEX = BigInt(81);
export const MAX_CONTRACT_EXECUTION_ENERGY = BigInt(30000);
export const CHAIN_ID = 'ccd:testnet';
// export const ZERO_AMOUNT = GtuAmount(BigInt(0));
export const CCDSCAN_URL = 'testnet.ccdscan.io';
export const PING_INTERVAL_MS = 5000;
export const RAW_SCHEMA_BASE64 =
'//8DAQAAAA0AAABNYW5hQ2hhbGxlbmdlAAkAAAAQAAAAYWNjZXB0X2NoYWxsZW5nZQAUAAEAAAAMAAAAY2hhbGxlbmdlX2lkFgINAAAAYWRkX2NoYWxsZW5nZQAUAAIAAAAMAAAAY2hhbGxlbmdlX2lkFgIJAAAAY2hhbGxlbmdlFAAHAAAABgAAAGFtb3VudAoEAAAAZ2FtZRYCCgAAAGNoYWxsZW5nZXILCQAAAG9wcG9uZW50cxUCAAAABAAAAE5vbmUCBAAAAFNvbWUBAQAAABECCwoAAABleHBpcmF0aW9uDQkAAABpc19wdWJsaWMBDQAAAG1heF9vcHBvbmVudHMVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAAEEAAAAGNhbmNlbF9jaGFsbGVuZ2UAFAABAAAADAAAAGNoYWxsZW5nZV9pZBYCEwAAAHNldF9wZXJjZW50YWdlX2ZlZXMAFAABAAAADwAAAHBlcmNlbnRhZ2VfZmVlcwMOAAAAc2V0X3dpbm5lcl9hcGkAFAAEAAAADAAAAGNoYWxsZW5nZV9pZBYCBgAAAHdpbm5lcgsRAAAAdmFsaWRhdG9yX2FkZHJlc3MVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAAWAhAAAAB2YWxpZGF0b3JfYW1vdW50FQIAAAAEAAAATm9uZQIEAAAAU29tZQEBAAAAChEAAABzZXRfd2lubmVyX3BsYXllcgAUAAQAAAAMAAAAY2hhbGxlbmdlX2lkFgIGAAAAd2lubmVyCxEAAAB2YWxpZGF0b3JfYWRkcmVzcxUCAAAABAAAAE5vbmUCBAAAAFNvbWUBAQAAABYCEAAAAHZhbGlkYXRvcl9hbW91bnQVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAAKFAAAAHNldF93aW5uZXJfdmFsaWRhdG9yABQABAAAAAwAAABjaGFsbGVuZ2VfaWQWAgYAAAB3aW5uZXILEQAAAHZhbGlkYXRvcl9hZGRyZXNzFQIAAAAEAAAATm9uZQIEAAAAU29tZQEBAAAAFgIQAAAAdmFsaWRhdG9yX2Ftb3VudBUCAAAABAAAAE5vbmUCBAAAAFNvbWUBAQAAAAoOAAAAdmlld19jaGFsbGVuZ2UAFAABAAAADAAAAGNoYWxsZW5nZV9pZBYCDwAAAHZpZXdfdmFsaWRhdGlvbgAUAAEAAAAMAAAAY2hhbGxlbmdlX2lkFgIA';
export const SCHEMA_JSON = {
"contractName": "ManaChallenge",
"entrypoints": {
"accept_challenge": {
"parameter": "FAABAAAADAAAAGNoYWxsZW5nZV9pZBYC"
},
"add_challenge": {
"parameter": "FAACAAAADAAAAGNoYWxsZW5nZV9pZBYCCQAAAGNoYWxsZW5nZRQABwAAAAYAAABhbW91bnQKBAAAAGdhbWUWAgoAAABjaGFsbGVuZ2VyCwkAAABvcHBvbmVudHMVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAARAgsKAAAAZXhwaXJhdGlvbg0JAAAAaXNfcHVibGljAQ0AAABtYXhfb3Bwb25lbnRzFQIAAAAEAAAATm9uZQIEAAAAU29tZQEBAAAABA"
},
"cancel_challenge": {
"parameter": "FAABAAAADAAAAGNoYWxsZW5nZV9pZBYC"
},
"set_percentage_fees": {
"parameter": "FAABAAAADwAAAHBlcmNlbnRhZ2VfZmVlcwM"
},
"set_winner_api": {
"parameter": "FAAEAAAADAAAAGNoYWxsZW5nZV9pZBYCBgAAAHdpbm5lcgsRAAAAdmFsaWRhdG9yX2FkZHJlc3MVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAAWAhAAAAB2YWxpZGF0b3JfYW1vdW50FQIAAAAEAAAATm9uZQIEAAAAU29tZQEBAAAACg"
},
"set_winner_player": {
"parameter": "FAAEAAAADAAAAGNoYWxsZW5nZV9pZBYCBgAAAHdpbm5lcgsRAAAAdmFsaWRhdG9yX2FkZHJlc3MVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAAWAhAAAAB2YWxpZGF0b3JfYW1vdW50FQIAAAAEAAAATm9uZQIEAAAAU29tZQEBAAAACg"
},
"set_winner_validator": {
"parameter": "FAAEAAAADAAAAGNoYWxsZW5nZV9pZBYCBgAAAHdpbm5lcgsRAAAAdmFsaWRhdG9yX2FkZHJlc3MVAgAAAAQAAABOb25lAgQAAABTb21lAQEAAAAWAhAAAAB2YWxpZGF0b3JfYW1vdW50FQIAAAAEAAAATm9uZQIEAAAAU29tZQEBAAAACg"
},
"view_challenge": {
"parameter": "FAABAAAADAAAAGNoYWxsZW5nZV9pZBYC"
},
"view_validation": {
"parameter": "FAABAAAADAAAAGNoYWxsZW5nZV9pZBYC"
}
}
};
export const TESTNET_GENESIS_BLOCK_HASH =
"4221332d34e1694168c2a0c0b3fd0f273809612cb13d000d5c2e00e85f50f796";
export const TESTNET = {
name: "testnet",
genesisHash: TESTNET_GENESIS_BLOCK_HASH,
jsonRpcUrl: JSON_RPC_URL, // "http://54.185.97.109:10001",
ccdScanBaseUrl: "https://testnet.ccdscan.io",
};
export const WALLET_CONNECT_OPTIONS_TESTNET = {
projectId: WALLET_CONNECT_PROJECT_ID,
metadata: {
name: "Mana Games",
description: "Mana Games",
url: "#",
icons: ["/wallet-concordium.png"],
},
};```Hi @osmany.
I’ve taken a look at your code and don’t see any major issues.
You do have a couple of useEffect and useCallback where the dependency array doesn’t include all the variables captured by the closure, but I don’t see how they explain the issue that you see (props.connectActive etc. should be constant).
I guess that if your code somehow triggered a storm of calls to connect or disconnect (like if actionWallet was flapping), you would see it in your console logging?
Your useCallback functions are async but not handing any error that might be thrown from the library functions. In my understanding, they would still show up in the console, but could you try and wrap it in try/catch?
Btw. do you see anything useful in the console?
Did you try other browsers/computers and observe the same problem there?
You can also try and right click on the wallet extension and inspect it. Do you see anything in the console there?
Btw. how deep in the component hierarchy is WalletConcordium? The WithWalletConnector is meant to live near the root of the app and not designed to be unmounted (yet).
Hi! I found the issue, It’s related with connection active that wallet has… When I connected the first time works fine, but if I refresh the web page and I try again never me connect, I have to restart browser.
Sometimes happen with connect to wallet other times when I am sending transaction.
I removed WithWalletConnector to root and I don’t see any errors and nowhere place
Glad to hear that moving the component to the root fixed the issue!
I still don’t completely understand why you observed the behavior you did before though. I’ve opened an internal task to investigate.
1 Like