Thirdweb error: This action requires a connected wallet to sign the transaction. Please pass a valid signer to the SDK - reactjs

So I have this code:
import { ThirdwebSDK } from "#thirdweb-dev/sdk";
import { ConnectWallet, useAddress } from "#thirdweb-dev/react";
export default function DonationPage() {
let address = useAddress()
async function sendCoins() {
try {
if (selectedCoin == 'eth') {
} else {
const sdk = new ThirdwebSDK("mainnet");
const contract = await sdk.getContract('ADDRESS_TO_USDC_CONTRACT');
await contract.erc20.transferFrom(address || '0x',CORPORATE_WALLET || '0x', donationAmount);
}
} catch (error: any) {
alert(error.message)
}
}
return (<>...</>)
}
So i'm using ConnectWallet button to get address and using TrustWallet for this, and trying to transfer tokens from 'address' to a corporate wallet, with a specified donation amount. However, I receive this error "This action requires a connected wallet to sign the transaction. Please pass a valid signer to the SDK.".
There seems to be no documentation on this online, and ChatGPT won't help either. Does someone know how to fix this?
Also, how to send Eth to CORPORATE_WALLET using Thirdweb?

There seems to be no documentation on this online
Well there is complete documentation on the SDK on ThirdWeb website.
Since you're performing transaction on the contract you cannot initialize the SDK without a private key or signer. Using neither returns read-only contracts
Because you're performing the operations in the frontend, fromSigner method is recommended. Access the user's wallet and call for the signer, use this to initialize the SDK instance with the .fromSigner() method.
fromSigner documentation
ThirdWeb official fromSigner example with React
Also linking documentation for private key method, just in case you wish to approach that way.

Related

Detecting on the browser when user switches Phantom wallet accounts

So I have a react app with nextjs where I'd need to get an event trigger when the user uses the Phantom wallet extension and switches accounts. I cannot find anything relevant on their docs: https://docs.phantom.app/
I was wondering if anyone encounter this issue. Basically I have the window.solana object but it does not have a trigger for when the user siwtches accounts
So Phantom itself does not expose any account switching specific API on their window.solana object.
There are some tricks you can do to find out when the account switches though.
You can continuously poll for the currently connected account and set the publicKey to some variable. When the publicKey changes, you can trigger your event.
Example psuedocode:
let currentKey = '';
poll(() => {
if (/* wallet available and connected */) {
await /* Action that updates publicKey */
if (currentKey !== wallet.publicKey.toBase58()) {
currentKey = wallet.publicKey.toBase58();
this.publicKey = wallet.publicKey;
this.emit('change')
}
}
})
You can find a writeup and PR we currently have on wallet-adapter going over this flow here
Phantom now emits accountChanged event: https://docs.phantom.app/integrating/extension-and-in-app-browser-web-apps/establishing-a-connection#changing-accounts

How to call Solidity Function to return Ether from Smart Contract?

I have deployed a smart contract on a local truffle project and I am trying to interact with it in a React project using web3. The following solidity function should send Ether what was previously deposited in the contract to a user address on a boolean condition:
function Payout() public{
require( voteEndTime< block.timestamp, "Voting Time is not up. Please come back later" );
Voter storage sender = voters[msg.sender];
if (negativeVotes > positiveVotes){
require(!sender.option, "Wrong Vote. Stake is distributed among winners");
payable(address(msg.sender)).transfer((stakes*sender.amount) / negativeStakes);
}
else if (positiveVotes > negativeVotes){
require(sender.option, "Wrong Vote. Stake is distributed among winners");
payable(address(msg.sender)).transfer((stakes*sender.amount) / positiveStakes);
}
else{
payable(address(msg.sender)).transfer((stakes*sender.amount) / stakes);
}
}
The contract is definitely able to read the user's address using msg.sender because it has worked in the other functions I have. Every other function in the contract is also working fine. I can interact with it and I am able to send Ether to it. The problem occurs when I am trying to return the Ether stored in the contract to an account. I am trying to call my Payout() function using the following web3 call in React on button click:
var response = await BallotContract.methods.Payout().send({ from: account, gas: 310000 })
I have specified a higher gas limit, because the contract runs out of gas if I try to use the gas estimation seen below. The function this call is present in looks like this:
const giveMeMoney = async (e) => {
const web3 = await new Web3(window.ethereum);
await window.ethereum.enable();
var Accounts = await web3.eth.getAccounts()
account = Accounts[0]
console.log(account)
const gas = await BallotContract.methods.Payout().estimateGas();
console.log(gas)
var response = await BallotContract.methods.Payout().send({ from: account, gas: 310000 })
}
I am able to access the function from the frontend and it is returning the correct string if a "require" condition is not met. My problem is that the contract does not return any Ether if the conditions are met and this line:
payable(address(msg.sender)).transfer((stakes*sender.amount) / positiveStakes);
...is accessed. I am getting the following error:
Uncaught (in promise) Error: Returned error: VM Exception while processing transaction: revert
at Object.ErrorResponse (errors.js:30)
at onJsonrpcResult (index.js:162)
at XMLHttpRequest.request.onreadystatechange (index.js:123)
ErrorResponse # errors.js:30
Now I am unsure what could be the problem, because the contract is running perfectly fine if I test it in Remix. Does anybody see the problem or have a workaround for this kind of problem?
The "out of gas" error is caused by the transfer function. This function has a gas limit of 2100; I recommend you use call, you can check how here.
Also the boolean value of the Voter struct defaults to false. So if the negative votes win, but the user didn't vote, they still can try to claim the reward, even if the amount is 0. I recommend you check how to use an enum, it can be very useful.

Alexa check if a new session was started by accessing session.new

This is the data that is being send by alexa to my skills backend. In the backend code I would like to test if the session is new or not and based on this information I would like to produce a different output. I try to access the session.new, but I don't know how and I could now find anything about it online so far.
const { attributesManager } = handlerInput;
const requestAttributes = attributesManager.getRequestAttributes();
requestAttributes.session.new
//this leads to the error "cannot read property new of undefined"
const { attributesManager } = handlerInput;
const requestAttributes = attributesManager.getSessionAttributes();
sessionAttributes.session.new
//this leads to the same error
I finally found out that this is not possible using the AttributesManager because this only allows access to request, session and permanent attributes. But session.new is not part of those. If you want to check if the Alexa session is new you have to use the so called RequestEnvelopeUtils.
Using those you can access if the session is new or not by using the following statement.
(Alexa.isNewSession(handlerInput.requestEnvelope))

How to auto verify OTP in React Native on android?

I am trying to auto verify otp using react-native-sms-retriever on android devices.
I have tried following way to achieve.
import SmsRetriever from 'react-native-sms-retriever';
// Get the phone number (first gif)
_onPhoneNumberPressed = async () => {
try {
const phoneNumber = await SmsRetriever.requestPhoneNumber();
} catch (error) {
console.log(JSON.stringify(error));
}
};
// Get the SMS message (second gif)
_onSmsListenerPressed = async () => {
try {
const registered = await SmsRetriever.startSmsRetriever();
if (registered) {
SmsRetriever.addSmsListener(event => {
console.log(event.message);
SmsRetriever.removeSmsListener();
});
}
} catch (error) {
console.log(JSON.stringify(error));
}
};
Following is my OTP format
OTP for your login to Orgpick is 3242. Please enter OTP within 10 minutes.
Also I have created sms format as follows dummy key-SZ3KPh5voKE Please guide me with following sms format.
Shall I need to get same format from server end?
What changes need to be done at server side?
<#>OTP for your login to Orgpick is 3242. Please enter OTP within 10 minutes.SZ3KPh5voKE
While trying above solution it showing time out exception
Please help me to get out from it.
I have tried two libraries for auto otp verification but none of them worked for me then I have tried with following library its working fine.Please check answer i have uploaded here
Auto otp verification
That is basically a key issue. The Hex code key which you are sending in the message may not be correct which is causing this issue. Try generating a perfect key and send it to the message.
Note production key and debug key are different. Your's look like debug key.
https://github.com/Bruno-Furtado/react-native-sms-retriever/issues/4
This issue answer will help you.
Please check your play service is up to date. I had the same problem and fixed it by updating the play service.

ADAL.js - Obtaining Microsoft Graph Access Token with id_token

I am attempting to integrate Azure AD login and Graph API into my angular2 website.
I have successfully implemented an ADAL login and redirect, built around a useful blog post here
From this I retrieved an id_token parameter that my adalservice can access. Currently this is acheived through a simple context.login() and catching the token in the redirect.
When I use this token to try and access Microsoft Graph, I receive an InvalidAuthenticationToken response stating Access Token validation failure.
I'm new to this stuff, so it could be that my call is intrinsically wrong, or that I lack certain permissions in AD, or my app reg lacks permissions. I've seen that I potentially need to request an access token with sufficient scope, yet I can find any examples of this.
Has anyone used this adalService library to obtain tokens for use with Graph API?
I found a solution to my problem.
I was using the wrong token. I had to acquire a token specifically for Graph API. This meant I would have to first log in and then call this.context.acquireToken() like below:
this.context.acquireToken("https://graph.microsoft.com", function (error, id_token) {
if (error || !id_token) {
console.log('ADAL error occurred: ' + error);
}
else {
this.graphAccessToken = id_token;
//Call graph API
}
}.bind(this)
);
It seems like it's essential that this process have 2 calls. Maybe someone can shed some light on whether I can immediately obtain a token with scope for the Graph API on login. Perhaps by setting required permissions for the app in Azure AD.
Just to have a clarity for all, updating the end to end solution here again.
In case you do not have the base starter code, refer to this link Adal-JS Tutorial. This post only concerns with the customization involved.
Step 1: Configure the AdalService
(only new code is shown, other methods remain as it is)
export class AdalService {
public get graphAccessToken() {
return sessionStorage[new AppConstants().User_Graph_Token];
}
public retrieveTokenForGraphAPI() {
this.context.acquireToken('https://graph.microsoft.com', function (error, graph_token) {
if (error || !graph_token) {
console.log('ADAL error occurred: ' + error);
} else {
// Store token in sessionStorage
sessionStorage[new AppConstants().User_Graph_Token] = graph_token;
return;
}
}.bind(this)
);
}
}
The code should have existing handlers for id_token callback and corresponding configuration in the routing. If not, please refer to link above for the initial code.
Now the requirement is retrieve the access_token once the id_token is retrieved. The access_token has additional field for "puid" which describes identifier for claims. This will be the step 2.
Step 2: Update LoginComponent
ngOnInit() {
if (!this.adalService.isAuthenticated) {
console.log('LoginComponent::Attempting login via adalService');
this.adalService.login();
} else {
if (this.adalService.accessTokenForGraph == null) {
console.log('LoginComponent::Login valid, attempting graph token retrieval');
this.adalService.retrieveTokenForGraphAPI();
}
}
Now the token is retrieved and stored for later use.
Step 3: Update Routing for 'access_token' callback
Similar to the 'id_token' callback, we need to add additional callback route for the access_token. The callback components will remain same. Their code is as described in the main link. Note that *access_token" endpoint is MS provided, hence be careful not to change the name.
{ path: 'access_token', component: OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] },
{ path: 'id_token', component: OAuthCallbackComponent, canActivate: [OAuthCallbackHandler] }
Step 4: Use the token wherever required
const bearer = this.adalService.graphAccessToken();

Resources