It is the wallet connect QR modal. The thing is that i want to log via walletConnect with the installled wallets on my phone. But the Button (Login with wallet) doesnât open the wallets, or the WalletConnect Modal.
Which device are you using where the button doesnât do anything? For Android you can get wallets connected (without WalletConnect) if you make this change.
In ios the button only pops the QR code. I donât need the QR i only need the wallet connect options.
I will make those changes so i can fix the problems on some android devices where the button doesnât do anything (neither the QR popâs or the wallet connect modal).
hai @alex , i have a doubt,
the file path:ethereum-react-native-boilerplate\frontend\providers\MoralisDappProvider\MoralisDappProvider.js
How do I get ChainID dynamically?
I put a static chain id and itâs fine⌠If I put chianId: chainId it shows only for loadingâŚ
(<MoralisDappContext.Provider value={{walletAddress, chianId: chainId}}>)
hereâs my code:
import React, {useEffect, useMemo, useState} from âreactâ;
import {useMoralis} from âreact-moralisâ;
import MoralisDappContext from â./contextâ;
//import Web3 from âweb3â; // Only when using npm/yarn
function MoralisDappProvider({children}) {
const {web3, Moralis, user} = useMoralis();
const [walletAddress, setWalletAddress] = useState();
const [chainId, setChainId] = useState();
useEffect(() => {
Moralis.onChainChanged(function (chain) {
setChainId(chain);
});
Moralis.onAccountsChanged(function (address) {
setWalletAddress(address[0]);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => setChainId(web3.givenProvider?.chainId));
useMemo(
() =>
setWalletAddress(
web3.givenProvider?.selectedAddress || user?.get(âethAddressâ),
),
[web3, user],
);
return (
<MoralisDappContext.Provider value={{walletAddress, chainId:â0x3â}}>
{children}
</MoralisDappContext.Provider>
);
}
function useMoralisDapp() {
const context = React.useContext(MoralisDappContext);
if (context === undefined) {
throw new Error(âuseMoralisDapp must be used within a MoralisDappProviderâ);
}
return context;
}
export {MoralisDappProvider, useMoralisDapp};
Hello can you read this on how to post code on this forum.
Iâm not sure, maybe you canât get the chainId with a deep link connection. If you use WalletConnect for the wallet connection, you should be able to get the chainId separately.
I get the following error when running ânpx react-native run-iosâ as per the README. Can someone please help.
AppContainer@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false:74305:78
[Sun Jul 17 2022 16:14:14.162] ERROR TypeError: Moralis.onAccountChanged is not a function. (In âMoralis.onAccountChanged(function (address) {
setWalletAddress(address[0]);
})â, âMoralis.onAccountChangedâ is undefined)
This error is located at:
in MoralisDappProvider (at Providers.tsx:63)
in MoralisProvider (at Providers.tsx:59)
in WalletConnectProvider (at Providers.tsx:58)
in Providers (at AppWithProviders.tsx:6)
in _default (at renderApplication.js:45)
in RCTView (at View.js:34)
in View (at AppContainer.js:106)
in RCTView (at View.js:34)
in View (at AppContainer.js:132)
in AppContainer (at renderApplication.js:39)
I used Web3 methods to get ChainID. But I donât get ChainIDâŚ
I used this code to get the chainId
âconst chainId = await web3.eth.getChainId();â
Yeah, I customized the wallet connector myself. it is working fine.
Can you please post that code so others here can use it?
hello @alex
I used Web3 methods âconst chainId = await web3.eth.getChainId();â for get ChainID. But I donât get ChainIDâŚ
Anyone get ChainID please let me know how to get it⌠I used this type of method but didnât get chainId.
const web3js = await getWeb3({connector})
const chain = Number(await web3js.eth.getChainId());
====================== getWeb3.ts =============================
import WalletConnect from "@walletconnect/client";
import Web3 from "web3";
import { AbstractProvider } from "web3-core";
import { JsonRpcPayload, JsonRpcResponse } from "web3-core-helpers";
// eslint-disable-next-line functional/prefer-readonly-type
export async function getWeb3({ connector }: { connector: WalletConnect }) {
// @ts-ignore
if (connector.connected === false){
return null;
}
const makeJsonRpcResponse = (payload: JsonRpcPayload, result: any, error?: Error): JsonRpcResponse => ({
id: +payload.id,
jsonrpc: payload.jsonrpc,
result,
error: error ? error.message : undefined,
});
const isMetamask = connector._peerMeta.name === "MetaMask" ? true : false;
const abstractProvider: AbstractProvider = {
sendAsync: (payload, callback) => {
connector
.sendCustomRequest(payload)
.then((result) => {
console.log('sendAsync result', result);
callback(null, makeJsonRpcResponse(payload, result))
})
.catch((error) => {
console.log('sendAsync error', error);
callback(error, makeJsonRpcResponse(payload, null, error))
});
},
send: (payload, callback) => {
connector
.sendCustomRequest(payload)
.then((result) => callback(null, makeJsonRpcResponse(payload, result)))
.catch((error) => callback(error, makeJsonRpcResponse(payload, null, error)));
},
connected: connector.connected,
isMetaMask: isMetamask
};
const web3 = new Web3(abstractProvider);
return web3;
}
1 Like
Hi! I have a question with the expiration time of a session in the mobile app with React Native. Every time I close the app, I have to connect and sign the message again with my wallet.
Is there any chance of set a custom expiration time for each session? Where should I set this config?
I want to keep the session in each mobile phone for 24 hours.
Thank you in advance.
1 Like
Since the boilerplate asks for Moralis authentication no matter what (as you have found out - you have to re-sign every time), you would have to change the start up code to detect if there is an existing WalletConnect session - see if there is some sort of local storage set which you can use.
Moralis.Plugins.rarible.lazyMint is not working in react-native. Is there any suggestion to make this function working?
Do you have the Rarible plugin installed in your server? Do you get an error?
There was an issue with the plugin where rinkeby didnât work in the options. As plugins are now deprecated, itâs recommended you use Rarible directly.
Hi everyone!
I am using the moralis react native boilerplate, and so far everything works as expected.
As my react native mobile dApp will not only store data in the blockchain but also in a custom centralized db - for which I chose a DynamoDb with AWS Lambdas on top I would need to authorize my dApp users to call my custom endpoint through the AWS API Gateway with the help of the crypto auth signatureâŚ
Is there a way to do this properly because so far I havenât found documentation about this use case? I can see that the moralis DB stores infos about the signature of the user and the session itself too⌠should I use webhooks to get relevant info into my custom DB and authorize with that information?
I do not own a moralis server so far just set up a Dapp quickly through the moralis website.
Please help me out with this as I only found information and docs about webapps but not with crypto authentication with react native boilerplate.
Thank you in advance,
Sandor
I would need to authorize my dApp users to call my custom endpoint through the AWS API Gateway
A way of doing this is using cloud code, or using webhooks as you have mentioned to call your API based on certain actions.
Just note that the React Native boilerplate is in alpha and is not production ready.
Suddenly I am getting this error when authenticate in react-native.
authError [Error: database or disk is full (code 13 SQLITE_FULL[13])]